React 14.9<\/title>\n+ <link rel=\"stylesheet\" href=\"styles.css\" \/>\n+\n+ <script type=\"text\/javascript\">\n+ \/\/ Enable DevTools to inspect React inside of an <iframe>\n+ \/\/ This must run before React is loaded\n+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+ <\/script>\n+\n+ <script src=\"https:\/\/unpkg.com\/react@0.14.9\/dist\/react.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-dom@0.14.9\/dist\/react-dom.js\"><\/script>\n+ \n+ \n+ <script src=\"https:\/\/unpkg.com\/babel-standalone@6\/babel.min.js\"><\/script>\n+ <\/head>\n+ <body>\n+ <div id=\"root\">\n+ 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.\n+ <br\/><br\/>\n+ Use the <code>server<\/code> script instead:\n+ <br\/><br\/>\n+ <code>node .\/fixtures\/regression\/server.js<\/code><br\/>\n+ <code>open <a href=\"http:\/\/localhost:3000\/fixtures\/regression\/14.9.html\">http:\/\/localhost:3000\/fixtures\/regression\/14.9.html<\/a><\/code>\n+ <\/div>\n+\n+ <script src=\"shared.js\" type=\"text\/babel\"><\/script>\n+\n+ \n+ <\/body>\n+<\/html>\n\\ No newline at end of file\ndiff --git a\/fixtures\/regression\/15.0.html b\/fixtures\/regression\/15.0.html\nnew file mode 100644\nindex 0000000000..464ea1f548\n--- \/dev\/null\n+++ b\/fixtures\/regression\/15.0.html\n@@ -0,0 +1,38 @@\n+<!DOCTYPE html>\n+<html>\n+ <head>\n+ <meta charset=\"UTF-8\" \/>\n+ <title>React 15.0<\/title>\n+ <link rel=\"stylesheet\" href=\"styles.css\" \/>\n+\n+ <script type=\"text\/javascript\">\n+ \/\/ Enable DevTools to inspect React inside of an <iframe>\n+ \/\/ This must run before React is loaded\n+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+ <\/script>\n+\n+ <script src=\"https:\/\/unpkg.com\/react@15.0\/dist\/react.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-dom@15.0\/dist\/react-dom.js\"><\/script>\n+ \n+ \n+ <script src=\"https:\/\/unpkg.com\/babel-standalone@6\/babel.min.js\"><\/script>\n+ <\/head>\n+ <body>\n+ <div id=\"root\">\n+ 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.\n+ <br\/><br\/>\n+ Use the <code>server<\/code> script instead:\n+ <br\/><br\/>\n+ <code>node .\/fixtures\/regression\/server.js<\/code><br\/>\n+ <code>open <a href=\"http:\/\/localhost:3000\/fixtures\/regression\/15.0.html\">http:\/\/localhost:3000\/fixtures\/regression\/15.0.html<\/a><\/code>\n+ <\/div>\n+\n+ <script src=\"shared.js\" type=\"text\/babel\"><\/script>\n+\n+ \n+ <\/body>\n+<\/html>\n\\ No newline at end of file\ndiff --git a\/fixtures\/regression\/15.1.html b\/fixtures\/regression\/15.1.html\nnew file mode 100644\nindex 0000000000..7e02e81bf9\n--- \/dev\/null\n+++ b\/fixtures\/regression\/15.1.html\n@@ -0,0 +1,38 @@\n+<!DOCTYPE html>\n+<html>\n+ <head>\n+ <meta charset=\"UTF-8\" \/>\n+ <title>React 15.1<\/title>\n+ <link rel=\"stylesheet\" href=\"styles.css\" \/>\n+\n+ <script type=\"text\/javascript\">\n+ \/\/ Enable DevTools to inspect React inside of an <iframe>\n+ \/\/ This must run before React is loaded\n+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+ <\/script>\n+\n+ <script src=\"https:\/\/unpkg.com\/react@15.1\/dist\/react.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-dom@15.1\/dist\/react-dom.js\"><\/script>\n+ \n+ \n+ <script src=\"https:\/\/unpkg.com\/babel-standalone@6\/babel.min.js\"><\/script>\n+ <\/head>\n+ <body>\n+ <div id=\"root\">\n+ 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.\n+ <br\/><br\/>\n+ Use the <code>server<\/code> script instead:\n+ <br\/><br\/>\n+ <code>node .\/fixtures\/regression\/server.js<\/code><br\/>\n+ <code>open <a href=\"http:\/\/localhost:3000\/fixtures\/regression\/15.1.html\">http:\/\/localhost:3000\/fixtures\/regression\/15.1.html<\/a><\/code>\n+ <\/div>\n+\n+ <script src=\"shared.js\" type=\"text\/babel\"><\/script>\n+\n+ \n+ <\/body>\n+<\/html>\n\\ No newline at end of file\ndiff --git a\/fixtures\/regression\/15.2.html b\/fixtures\/regression\/15.2.html\nnew file mode 100644\nindex 0000000000..ff1e6b8746\n--- \/dev\/null\n+++ b\/fixtures\/regression\/15.2.html\n@@ -0,0 +1,38 @@\n+<!DOCTYPE html>\n+<html>\n+ <head>\n+ <meta charset=\"UTF-8\" \/>\n+ <title>React 15.2<\/title>\n+ <link rel=\"stylesheet\" href=\"styles.css\" \/>\n+\n+ <script type=\"text\/javascript\">\n+ \/\/ Enable DevTools to inspect React inside of an <iframe>\n+ \/\/ This must run before React is loaded\n+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+ <\/script>\n+\n+ <script src=\"https:\/\/unpkg.com\/react@15.2\/dist\/react.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-dom@15.2\/dist\/react-dom.js\"><\/script>\n+ \n+ \n+ <script src=\"https:\/\/unpkg.com\/babel-standalone@6\/babel.min.js\"><\/script>\n+ <\/head>\n+ <body>\n+ <div id=\"root\">\n+ 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.\n+ <br\/><br\/>\n+ Use the <code>server<\/code> script instead:\n+ <br\/><br\/>\n+ <code>node .\/fixtures\/regression\/server.js<\/code><br\/>\n+ <code>open <a href=\"http:\/\/localhost:3000\/fixtures\/regression\/15.2.html\">http:\/\/localhost:3000\/fixtures\/regression\/15.2.html<\/a><\/code>\n+ <\/div>\n+\n+ <script src=\"shared.js\" type=\"text\/babel\"><\/script>\n+\n+ \n+ <\/body>\n+<\/html>\n\\ No newline at end of file\ndiff --git a\/fixtures\/regression\/15.3.html b\/fixtures\/regression\/15.3.html\nnew file mode 100644\nindex 0000000000..8d1795962e\n--- \/dev\/null\n+++ b\/fixtures\/regression\/15.3.html\n@@ -0,0 +1,38 @@\n+<!DOCTYPE html>\n+<html>\n+ <head>\n+ <meta charset=\"UTF-8\" \/>\n+ <title>React 15.3<\/title>\n+ <link rel=\"stylesheet\" href=\"styles.css\" \/>\n+\n+ <script type=\"text\/javascript\">\n+ \/\/ Enable DevTools to inspect React inside of an <iframe>\n+ \/\/ This must run before React is loaded\n+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+ <\/script>\n+\n+ <script src=\"https:\/\/unpkg.com\/react@15.3\/dist\/react.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-dom@15.3\/dist\/react-dom.js\"><\/script>\n+ \n+ \n+ <script src=\"https:\/\/unpkg.com\/babel-standalone@6\/babel.min.js\"><\/script>\n+ <\/head>\n+ <body>\n+ <div id=\"root\">\n+ 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.\n+ <br\/><br\/>\n+ Use the <code>server<\/code> script instead:\n+ <br\/><br\/>\n+ <code>node .\/fixtures\/regression\/server.js<\/code><br\/>\n+ <code>open <a href=\"http:\/\/localhost:3000\/fixtures\/regression\/15.3.html\">http:\/\/localhost:3000\/fixtures\/regression\/15.3.html<\/a><\/code>\n+ <\/div>\n+\n+ <script src=\"shared.js\" type=\"text\/babel\"><\/script>\n+\n+ \n+ <\/body>\n+<\/html>\n\\ No newline at end of file\ndiff --git a\/fixtures\/regression\/15.4.html b\/fixtures\/regression\/15.4.html\nnew file mode 100644\nindex 0000000000..ee1bfc0723\n--- \/dev\/null\n+++ b\/fixtures\/regression\/15.4.html\n@@ -0,0 +1,38 @@\n+<!DOCTYPE html>\n+<html>\n+ <head>\n+ <meta charset=\"UTF-8\" \/>\n+ <title>React 15.4<\/title>\n+ <link rel=\"stylesheet\" href=\"styles.css\" \/>\n+\n+ <script type=\"text\/javascript\">\n+ \/\/ Enable DevTools to inspect React inside of an <iframe>\n+ \/\/ This must run before React is loaded\n+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+ <\/script>\n+\n+ <script src=\"https:\/\/unpkg.com\/react@15.4\/dist\/react.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-dom@15.4\/dist\/react-dom.js\"><\/script>\n+ \n+ \n+ <script src=\"https:\/\/unpkg.com\/babel-standalone@6\/babel.min.js\"><\/script>\n+ <\/head>\n+ <body>\n+ <div id=\"root\">\n+ 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.\n+ <br\/><br\/>\n+ Use the <code>server<\/code> script instead:\n+ <br\/><br\/>\n+ <code>node .\/fixtures\/regression\/server.js<\/code><br\/>\n+ <code>open <a href=\"http:\/\/localhost:3000\/fixtures\/regression\/15.4.html\">http:\/\/localhost:3000\/fixtures\/regression\/15.4.html<\/a><\/code>\n+ <\/div>\n+\n+ <script src=\"shared.js\" type=\"text\/babel\"><\/script>\n+\n+ \n+ <\/body>\n+<\/html>\n\\ No newline at end of file\ndiff --git a\/fixtures\/regression\/15.5.html b\/fixtures\/regression\/15.5.html\nnew file mode 100644\nindex 0000000000..4097bdf708\n--- \/dev\/null\n+++ b\/fixtures\/regression\/15.5.html\n@@ -0,0 +1,38 @@\n+<!DOCTYPE html>\n+<html>\n+ <head>\n+ <meta charset=\"UTF-8\" \/>\n+ <title>React 15.5<\/title>\n+ <link rel=\"stylesheet\" href=\"styles.css\" \/>\n+\n+ <script type=\"text\/javascript\">\n+ \/\/ Enable DevTools to inspect React inside of an <iframe>\n+ \/\/ This must run before React is loaded\n+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+ <\/script>\n+\n+ <script src=\"https:\/\/unpkg.com\/react@15.5\/dist\/react.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-dom@15.5\/dist\/react-dom.js\"><\/script>\n+ \n+ \n+ <script src=\"https:\/\/unpkg.com\/babel-standalone@6\/babel.min.js\"><\/script>\n+ <\/head>\n+ <body>\n+ <div id=\"root\">\n+ 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.\n+ <br\/><br\/>\n+ Use the <code>server<\/code> script instead:\n+ <br\/><br\/>\n+ <code>node .\/fixtures\/regression\/server.js<\/code><br\/>\n+ <code>open <a href=\"http:\/\/localhost:3000\/fixtures\/regression\/15.5.html\">http:\/\/localhost:3000\/fixtures\/regression\/15.5.html<\/a><\/code>\n+ <\/div>\n+\n+ <script src=\"shared.js\" type=\"text\/babel\"><\/script>\n+\n+ \n+ <\/body>\n+<\/html>\n\\ No newline at end of file\ndiff --git a\/fixtures\/regression\/15.6.html b\/fixtures\/regression\/15.6.html\nnew file mode 100644\nindex 0000000000..ab10ba8716\n--- \/dev\/null\n+++ b\/fixtures\/regression\/15.6.html\n@@ -0,0 +1,38 @@\n+<!DOCTYPE html>\n+<html>\n+ <head>\n+ <meta charset=\"UTF-8\" \/>\n+ <title>React 15.6<\/title>\n+ <link rel=\"stylesheet\" href=\"styles.css\" \/>\n+\n+ <script type=\"text\/javascript\">\n+ \/\/ Enable DevTools to inspect React inside of an <iframe>\n+ \/\/ This must run before React is loaded\n+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+ <\/script>\n+\n+ <script src=\"https:\/\/unpkg.com\/react@15.6\/dist\/react.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-dom@15.6\/dist\/react-dom.js\"><\/script>\n+ \n+ \n+ <script src=\"https:\/\/unpkg.com\/babel-standalone@6\/babel.min.js\"><\/script>\n+ <\/head>\n+ <body>\n+ <div id=\"root\">\n+ 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.\n+ <br\/><br\/>\n+ Use the <code>server<\/code> script instead:\n+ <br\/><br\/>\n+ <code>node .\/fixtures\/regression\/server.js<\/code><br\/>\n+ <code>open <a href=\"http:\/\/localhost:3000\/fixtures\/regression\/15.6.html\">http:\/\/localhost:3000\/fixtures\/regression\/15.6.html<\/a><\/code>\n+ <\/div>\n+\n+ <script src=\"shared.js\" type=\"text\/babel\"><\/script>\n+\n+ \n+ <\/body>\n+<\/html>\n\\ No newline at end of file\ndiff --git a\/fixtures\/regression\/16.0.html b\/fixtures\/regression\/16.0.html\nnew file mode 100644\nindex 0000000000..7c55d75114\n--- \/dev\/null\n+++ b\/fixtures\/regression\/16.0.html\n@@ -0,0 +1,38 @@\n+<!DOCTYPE html>\n+<html>\n+ <head>\n+ <meta charset=\"UTF-8\" \/>\n+ <title>React 16.0<\/title>\n+ <link rel=\"stylesheet\" href=\"styles.css\" \/>\n+\n+ <script type=\"text\/javascript\">\n+ \/\/ Enable DevTools to inspect React inside of an <iframe>\n+ \/\/ This must run before React is loaded\n+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+ <\/script>\n+\n+ <script src=\"https:\/\/unpkg.com\/react@16.0\/umd\/react.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-dom@16.0\/umd\/react-dom.development.js\"><\/script>\n+ \n+ \n+ <script src=\"https:\/\/unpkg.com\/babel-standalone@6\/babel.min.js\"><\/script>\n+ <\/head>\n+ <body>\n+ <div id=\"root\">\n+ 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.\n+ <br\/><br\/>\n+ Use the <code>server<\/code> script instead:\n+ <br\/><br\/>\n+ <code>node .\/fixtures\/regression\/server.js<\/code><br\/>\n+ <code>open <a href=\"http:\/\/localhost:3000\/fixtures\/regression\/16.0.html\">http:\/\/localhost:3000\/fixtures\/regression\/16.0.html<\/a><\/code>\n+ <\/div>\n+\n+ <script src=\"shared.js\" type=\"text\/babel\"><\/script>\n+\n+ \n+ <\/body>\n+<\/html>\n\\ No newline at end of file\ndiff --git a\/fixtures\/regression\/16.1.html b\/fixtures\/regression\/16.1.html\nnew file mode 100644\nindex 0000000000..d93addf46e\n--- \/dev\/null\n+++ b\/fixtures\/regression\/16.1.html\n@@ -0,0 +1,38 @@\n+<!DOCTYPE html>\n+<html>\n+ <head>\n+ <meta charset=\"UTF-8\" \/>\n+ <title>React 16.1<\/title>\n+ <link rel=\"stylesheet\" href=\"styles.css\" \/>\n+\n+ <script type=\"text\/javascript\">\n+ \/\/ Enable DevTools to inspect React inside of an <iframe>\n+ \/\/ This must run before React is loaded\n+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+ <\/script>\n+\n+ <script src=\"https:\/\/unpkg.com\/react@16.1\/umd\/react.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-dom@16.1\/umd\/react-dom.development.js\"><\/script>\n+ \n+ \n+ <script src=\"https:\/\/unpkg.com\/babel-standalone@6\/babel.min.js\"><\/script>\n+ <\/head>\n+ <body>\n+ <div id=\"root\">\n+ 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.\n+ <br\/><br\/>\n+ Use the <code>server<\/code> script instead:\n+ <br\/><br\/>\n+ <code>node .\/fixtures\/regression\/server.js<\/code><br\/>\n+ <code>open <a href=\"http:\/\/localhost:3000\/fixtures\/regression\/16.1.html\">http:\/\/localhost:3000\/fixtures\/regression\/16.1.html<\/a><\/code>\n+ <\/div>\n+\n+ <script src=\"shared.js\" type=\"text\/babel\"><\/script>\n+\n+ \n+ <\/body>\n+<\/html>\n\\ No newline at end of file\ndiff --git a\/fixtures\/regression\/16.2.html b\/fixtures\/regression\/16.2.html\nnew file mode 100644\nindex 0000000000..10d8e150ed\n--- \/dev\/null\n+++ b\/fixtures\/regression\/16.2.html\n@@ -0,0 +1,38 @@\n+<!DOCTYPE html>\n+<html>\n+ <head>\n+ <meta charset=\"UTF-8\" \/>\n+ <title>React 16.2<\/title>\n+ <link rel=\"stylesheet\" href=\"styles.css\" \/>\n+\n+ <script type=\"text\/javascript\">\n+ \/\/ Enable DevTools to inspect React inside of an <iframe>\n+ \/\/ This must run before React is loaded\n+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+ <\/script>\n+\n+ <script src=\"https:\/\/unpkg.com\/react@16.2\/umd\/react.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-dom@16.2\/umd\/react-dom.development.js\"><\/script>\n+ \n+ \n+ <script src=\"https:\/\/unpkg.com\/babel-standalone@6\/babel.min.js\"><\/script>\n+ <\/head>\n+ <body>\n+ <div id=\"root\">\n+ 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.\n+ <br\/><br\/>\n+ Use the <code>server<\/code> script instead:\n+ <br\/><br\/>\n+ <code>node .\/fixtures\/regression\/server.js<\/code><br\/>\n+ <code>open <a href=\"http:\/\/localhost:3000\/fixtures\/regression\/16.2.html\">http:\/\/localhost:3000\/fixtures\/regression\/16.2.html<\/a><\/code>\n+ <\/div>\n+\n+ <script src=\"shared.js\" type=\"text\/babel\"><\/script>\n+\n+ \n+ <\/body>\n+<\/html>\n\\ No newline at end of file\ndiff --git a\/fixtures\/regression\/16.3.html b\/fixtures\/regression\/16.3.html\nnew file mode 100644\nindex 0000000000..2e42e2813a\n--- \/dev\/null\n+++ b\/fixtures\/regression\/16.3.html\n@@ -0,0 +1,38 @@\n+<!DOCTYPE html>\n+<html>\n+ <head>\n+ <meta charset=\"UTF-8\" \/>\n+ <title>React 16.3<\/title>\n+ <link rel=\"stylesheet\" href=\"styles.css\" \/>\n+\n+ <script type=\"text\/javascript\">\n+ \/\/ Enable DevTools to inspect React inside of an <iframe>\n+ \/\/ This must run before React is loaded\n+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+ <\/script>\n+\n+ <script src=\"https:\/\/unpkg.com\/react@16.3\/umd\/react.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-dom@16.3\/umd\/react-dom.development.js\"><\/script>\n+ \n+ \n+ <script src=\"https:\/\/unpkg.com\/babel-standalone@6\/babel.min.js\"><\/script>\n+ <\/head>\n+ <body>\n+ <div id=\"root\">\n+ 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.\n+ <br\/><br\/>\n+ Use the <code>server<\/code> script instead:\n+ <br\/><br\/>\n+ <code>node .\/fixtures\/regression\/server.js<\/code><br\/>\n+ <code>open <a href=\"http:\/\/localhost:3000\/fixtures\/regression\/16.3.html\">http:\/\/localhost:3000\/fixtures\/regression\/16.3.html<\/a><\/code>\n+ <\/div>\n+\n+ <script src=\"shared.js\" type=\"text\/babel\"><\/script>\n+\n+ \n+ <\/body>\n+<\/html>\n\\ No newline at end of file\ndiff --git a\/fixtures\/regression\/16.4.html b\/fixtures\/regression\/16.4.html\nnew file mode 100644\nindex 0000000000..f59f4e9e6f\n--- \/dev\/null\n+++ b\/fixtures\/regression\/16.4.html\n@@ -0,0 +1,38 @@\n+<!DOCTYPE html>\n+<html>\n+ <head>\n+ <meta charset=\"UTF-8\" \/>\n+ <title>React 16.4<\/title>\n+ <link rel=\"stylesheet\" href=\"styles.css\" \/>\n+\n+ <script type=\"text\/javascript\">\n+ \/\/ Enable DevTools to inspect React inside of an <iframe>\n+ \/\/ This must run before React is loaded\n+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+ <\/script>\n+\n+ <script src=\"https:\/\/unpkg.com\/react@16.4\/umd\/react.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-dom@16.4\/umd\/react-dom.development.js\"><\/script>\n+ \n+ \n+ <script src=\"https:\/\/unpkg.com\/babel-standalone@6\/babel.min.js\"><\/script>\n+ <\/head>\n+ <body>\n+ <div id=\"root\">\n+ 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.\n+ <br\/><br\/>\n+ Use the <code>server<\/code> script instead:\n+ <br\/><br\/>\n+ <code>node .\/fixtures\/regression\/server.js<\/code><br\/>\n+ <code>open <a href=\"http:\/\/localhost:3000\/fixtures\/regression\/16.4.html\">http:\/\/localhost:3000\/fixtures\/regression\/16.4.html<\/a><\/code>\n+ <\/div>\n+\n+ <script src=\"shared.js\" type=\"text\/babel\"><\/script>\n+\n+ \n+ <\/body>\n+<\/html>\n\\ No newline at end of file\ndiff --git a\/fixtures\/regression\/16.5.html b\/fixtures\/regression\/16.5.html\nnew file mode 100644\nindex 0000000000..455e06f219\n--- \/dev\/null\n+++ b\/fixtures\/regression\/16.5.html\n@@ -0,0 +1,40 @@\n+<!DOCTYPE html>\n+<html>\n+ <head>\n+ <meta charset=\"UTF-8\" \/>\n+ <title>React 16.5<\/title>\n+ <link rel=\"stylesheet\" href=\"styles.css\" \/>\n+\n+ <script type=\"text\/javascript\">\n+ \/\/ Enable DevTools to inspect React inside of an <iframe>\n+ \/\/ This must run before React is loaded\n+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+ <\/script>\n+\n+ <script src=\"https:\/\/unpkg.com\/schedule@0.5.0\/umd\/schedule.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/schedule@0.5.0\/umd\/schedule-tracing.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react@16.5\/umd\/react.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-dom@16.5\/umd\/react-dom.development.js\"><\/script>\n+ \n+ \n+ <script src=\"https:\/\/unpkg.com\/babel-standalone@6\/babel.min.js\"><\/script>\n+ <\/head>\n+ <body>\n+ <div id=\"root\">\n+ 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.\n+ <br\/><br\/>\n+ Use the <code>server<\/code> script instead:\n+ <br\/><br\/>\n+ <code>node .\/fixtures\/regression\/server.js<\/code><br\/>\n+ <code>open <a href=\"http:\/\/localhost:3000\/fixtures\/regression\/16.5.html\">http:\/\/localhost:3000\/fixtures\/regression\/16.5.html<\/a><\/code>\n+ <\/div>\n+\n+ <script src=\"shared.js\" type=\"text\/babel\"><\/script>\n+\n+ \n+ <\/body>\n+<\/html>\n\\ No newline at end of file\ndiff --git a\/fixtures\/regression\/16.6.html b\/fixtures\/regression\/16.6.html\nnew file mode 100644\nindex 0000000000..1f61c47f85\n--- \/dev\/null\n+++ b\/fixtures\/regression\/16.6.html\n@@ -0,0 +1,41 @@\n+<!DOCTYPE html>\n+<html>\n+ <head>\n+ <meta charset=\"UTF-8\" \/>\n+ <title>React 16.6<\/title>\n+ <link rel=\"stylesheet\" href=\"styles.css\" \/>\n+\n+ <script type=\"text\/javascript\">\n+ \/\/ Enable DevTools to inspect React inside of an <iframe>\n+ \/\/ This must run before React is loaded\n+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+ <\/script>\n+\n+ <script src=\"https:\/\/unpkg.com\/scheduler@0.10.0\/umd\/scheduler.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/scheduler@0.10.0\/umd\/scheduler-tracing.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react@16.6\/umd\/react.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-dom@16.6\/umd\/react-dom.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-cache@2.0.0-alpha.1\/umd\/react-cache.development.js\"><\/script>\n+ \n+ \n+ <script src=\"https:\/\/unpkg.com\/babel-standalone@6\/babel.min.js\"><\/script>\n+ <\/head>\n+ <body>\n+ <div id=\"root\">\n+ 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.\n+ <br\/><br\/>\n+ Use the <code>server<\/code> script instead:\n+ <br\/><br\/>\n+ <code>node .\/fixtures\/regression\/server.js<\/code><br\/>\n+ <code>open <a href=\"http:\/\/localhost:3000\/fixtures\/regression\/16.6.html\">http:\/\/localhost:3000\/fixtures\/regression\/16.6.html<\/a><\/code>\n+ <\/div>\n+\n+ <script src=\"shared.js\" type=\"text\/babel\"><\/script>\n+\n+ \n+ <\/body>\n+<\/html>\n\\ No newline at end of file\ndiff --git a\/fixtures\/regression\/16.7.html b\/fixtures\/regression\/16.7.html\nnew file mode 100644\nindex 0000000000..d839d7e030\n--- \/dev\/null\n+++ b\/fixtures\/regression\/16.7.html\n@@ -0,0 +1,41 @@\n+<!DOCTYPE html>\n+<html>\n+ <head>\n+ <meta charset=\"UTF-8\" \/>\n+ <title>React 16.7<\/title>\n+ <link rel=\"stylesheet\" href=\"styles.css\" \/>\n+\n+ <script type=\"text\/javascript\">\n+ \/\/ Enable DevTools to inspect React inside of an <iframe>\n+ \/\/ This must run before React is loaded\n+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+ <\/script>\n+\n+ <script src=\"https:\/\/unpkg.com\/scheduler@0.12.0\/umd\/scheduler.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/scheduler@0.12.0\/umd\/scheduler-tracing.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react@16.7\/umd\/react.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-dom@16.7\/umd\/react-dom.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-cache@2.0.0-alpha.1\/umd\/react-cache.development.js\"><\/script>\n+ \n+ \n+ <script src=\"https:\/\/unpkg.com\/babel-standalone@6\/babel.min.js\"><\/script>\n+ <\/head>\n+ <body>\n+ <div id=\"root\">\n+ 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.\n+ <br\/><br\/>\n+ Use the <code>server<\/code> script instead:\n+ <br\/><br\/>\n+ <code>node .\/fixtures\/regression\/server.js<\/code><br\/>\n+ <code>open <a href=\"http:\/\/localhost:3000\/fixtures\/regression\/16.7.html\">http:\/\/localhost:3000\/fixtures\/regression\/16.7.html<\/a><\/code>\n+ <\/div>\n+\n+ <script src=\"shared.js\" type=\"text\/babel\"><\/script>\n+\n+ \n+ <\/body>\n+<\/html>\n\\ No newline at end of file\ndiff --git a\/fixtures\/regression\/canary.html b\/fixtures\/regression\/canary.html\nnew file mode 100644\nindex 0000000000..ab59d7029e\n--- \/dev\/null\n+++ b\/fixtures\/regression\/canary.html\n@@ -0,0 +1,41 @@\n+<!DOCTYPE html>\n+<html>\n+ <head>\n+ <meta charset=\"UTF-8\" \/>\n+ <title>React canary<\/title>\n+ <link rel=\"stylesheet\" href=\"styles.css\" \/>\n+\n+ <script type=\"text\/javascript\">\n+ \/\/ Enable DevTools to inspect React inside of an <iframe>\n+ \/\/ This must run before React is loaded\n+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+ <\/script>\n+\n+ <script src=\"https:\/\/unpkg.com\/scheduler@canary\/umd\/scheduler.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/scheduler@canary\/umd\/scheduler-tracing.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react@canary\/umd\/react.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-dom@canary\/umd\/react-dom.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-cache@next\/umd\/react-cache.development.js\"><\/script>\n+ \n+ \n+ <script src=\"https:\/\/unpkg.com\/babel-standalone@6\/babel.min.js\"><\/script>\n+ <\/head>\n+ <body>\n+ <div id=\"root\">\n+ 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.\n+ <br\/><br\/>\n+ Use the <code>server<\/code> script instead:\n+ <br\/><br\/>\n+ <code>node .\/fixtures\/regression\/server.js<\/code><br\/>\n+ <code>open <a href=\"http:\/\/localhost:3000\/fixtures\/regression\/canary.html\">http:\/\/localhost:3000\/fixtures\/regression\/canary.html<\/a><\/code>\n+ <\/div>\n+\n+ <script src=\"shared.js\" type=\"text\/babel\"><\/script>\n+\n+ \n+ <\/body>\n+<\/html>\n\\ No newline at end of file\ndiff --git a\/fixtures\/regression\/index.html b\/fixtures\/regression\/index.html\nnew file mode 100644\nindex 0000000000..125a8e8baf\n--- \/dev\/null\n+++ b\/fixtures\/regression\/index.html\n@@ -0,0 +1,28 @@\n+<!DOCTYPE html>\n+<html>\n+ <head>\n+ <meta charset=\"UTF-8\" \/>\n+ <title>React DevTools regression test<\/title>\n+ <link rel=\"stylesheet\" href=\"styles.css\" \/>\n+ <\/head>\n+ <body>\n+ <iframe src=\"canary.html\"><\/iframe>\n+ <iframe src=\"next.html\"><\/iframe>\n+ <iframe src=\"16.7.html\"><\/iframe>\n+ <iframe src=\"16.6.html\"><\/iframe>\n+ <iframe src=\"16.5.html\"><\/iframe>\n+ <iframe src=\"16.4.html\"><\/iframe>\n+ <iframe src=\"16.3.html\"><\/iframe>\n+ <iframe src=\"16.2.html\"><\/iframe>\n+ <iframe src=\"16.1.html\"><\/iframe>\n+ <iframe src=\"16.0.html\"><\/iframe>\n+ <iframe src=\"15.6.html\"><\/iframe>\n+ <iframe src=\"15.5.html\"><\/iframe>\n+ <iframe src=\"15.4.html\"><\/iframe>\n+ <iframe src=\"15.3.html\"><\/iframe>\n+ <iframe src=\"15.2.html\"><\/iframe>\n+ <iframe src=\"15.1.html\"><\/iframe>\n+ <iframe src=\"15.0.html\"><\/iframe>\n+ <iframe src=\"14.9.html\"><\/iframe>\n+ <\/body>\n+<\/html>\n\\ No newline at end of file\ndiff --git a\/fixtures\/regression\/next.html b\/fixtures\/regression\/next.html\nnew file mode 100644\nindex 0000000000..77bb9bbed2\n--- \/dev\/null\n+++ b\/fixtures\/regression\/next.html\n@@ -0,0 +1,41 @@\n+<!DOCTYPE html>\n+<html>\n+ <head>\n+ <meta charset=\"UTF-8\" \/>\n+ <title>React next<\/title>\n+ <link rel=\"stylesheet\" href=\"styles.css\" \/>\n+\n+ <script type=\"text\/javascript\">\n+ \/\/ Enable DevTools to inspect React inside of an <iframe>\n+ \/\/ This must run before React is loaded\n+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+ <\/script>\n+\n+ <script src=\"https:\/\/unpkg.com\/scheduler@next\/umd\/scheduler.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/scheduler@next\/umd\/scheduler-tracing.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react@next\/umd\/react.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-dom@next\/umd\/react-dom.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-cache@next\/umd\/react-cache.development.js\"><\/script>\n+ \n+ \n+ <script src=\"https:\/\/unpkg.com\/babel-standalone@6\/babel.min.js\"><\/script>\n+ <\/head>\n+ <body>\n+ <div id=\"root\">\n+ 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.\n+ <br\/><br\/>\n+ Use the <code>server<\/code> script instead:\n+ <br\/><br\/>\n+ <code>node .\/fixtures\/regression\/server.js<\/code><br\/>\n+ <code>open <a href=\"http:\/\/localhost:3000\/fixtures\/regression\/next.html\">http:\/\/localhost:3000\/fixtures\/regression\/next.html<\/a><\/code>\n+ <\/div>\n+\n+ <script src=\"shared.js\" type=\"text\/babel\"><\/script>\n+\n+ \n+ <\/body>\n+<\/html>\n\\ No newline at end of file\ndiff --git a\/fixtures\/regression\/server.js b\/fixtures\/regression\/server.js\nnew file mode 100755\nindex 0000000000..f7e03f075d\n--- \/dev\/null\n+++ b\/fixtures\/regression\/server.js\n@@ -0,0 +1,16 @@\n+#!\/usr\/bin\/env node\n+\n+const finalhandler = require('finalhandler');\n+const http = require('http');\n+const serveStatic = require('serve-static');\n+\n+\/\/ Serve fixtures folder\n+const serve = serveStatic(__dirname, { index: 'index.html' });\n+\n+\/\/ Create server\n+const server = http.createServer(function onRequest(req, res) {\n+ serve(req, res, finalhandler(req, res));\n+});\n+\n+\/\/ Listen\n+server.listen(3000);\ndiff --git a\/fixtures\/regression\/shared.js b\/fixtures\/regression\/shared.js\nnew file mode 100644\nindex 0000000000..2afd063b6b\n--- \/dev\/null\n+++ b\/fixtures\/regression\/shared.js\n@@ -0,0 +1,330 @@\n+\/* eslint-disable no-fallthrough, react\/react-in-jsx-scope, react\/jsx-no-undef *\/\n+\/* global React ReactCache ReactDOM SchedulerTracing ScheduleTracing *\/\n+\n+const apps = [];\n+\n+const pieces = React.version.split('.');\n+const major =\n+ pieces[0] === '0' ? parseInt(pieces[1], 10) : parseInt(pieces[0], 10);\n+const minor =\n+ pieces[0] === '0' ? parseInt(pieces[2], 10) : parseInt(pieces[1], 10);\n+\n+\/\/ Convenience wrapper to organize API features in DevTools.\n+function Feature({ children, label, version }) {\n+ return (\n+ <div className=\"Feature\">\n+ <div className=\"FeatureHeader\">\n+ <code className=\"FeatureCode\">{label}<\/code>\n+ <small>{version}<\/small>\n+ <\/div>\n+ {children}\n+ <\/div>\n+ );\n+}\n+\n+\/\/ Simplify interaction tracing for tests below.\n+let trace = null;\n+if (typeof SchedulerTracing !== 'undefined') {\n+ trace = SchedulerTracing.unstable_trace;\n+} else if (typeof ScheduleTracing !== 'undefined') {\n+ trace = ScheduleTracing.unstable_trace;\n+} else {\n+ trace = (_, __, callback) => callback();\n+}\n+\n+\/\/ https:\/\/github.com\/facebook\/react\/blob\/master\/CHANGELOG.md\n+switch (major) {\n+ case 16:\n+ switch (minor) {\n+ case 7:\n+ if (typeof React.useState === 'function') {\n+ \/\/ Hooks\n+ function Hooks() {\n+ const [count, setCount] = React.useState(0);\n+ const incrementCount = React.useCallback(\n+ () => setCount(count + 1),\n+ [count]\n+ );\n+ return (\n+ <div>\n+ count: {count}{' '}\n+ <button onClick={incrementCount}>increment<\/button>\n+ <\/div>\n+ );\n+ }\n+ apps.push(\n+ <Feature key=\"Hooks\" label=\"Hooks\" version=\"16.7+\">\n+ <Hooks \/>\n+ <\/Feature>\n+ );\n+ }\n+ case 6:\n+ \/\/ memo\n+ function LabelComponent({ label }) {\n+ return <label>{label}<\/label>;\n+ }\n+ const AnonymousMemoized = React.memo(({ label }) => (\n+ <label>{label}<\/label>\n+ ));\n+ const Memoized = React.memo(LabelComponent);\n+ const CustomMemoized = React.memo(LabelComponent);\n+ CustomMemoized.displayName = 'MemoizedLabelFunction';\n+ apps.push(\n+ <Feature key=\"memo\" label=\"memo\" version=\"16.6+\">\n+ <AnonymousMemoized label=\"AnonymousMemoized\" \/>\n+ <Memoized label=\"Memoized\" \/>\n+ <CustomMemoized label=\"CustomMemoized\" \/>\n+ <\/Feature>\n+ );\n+\n+ \/\/ Suspense\n+ const loadResource = ([text, ms]) => {\n+ return new Promise((resolve, reject) => {\n+ setTimeout(() => {\n+ resolve(text);\n+ }, ms);\n+ });\n+ };\n+ const getResourceKey = ([text, ms]) => text;\n+ const Resource = ReactCache.unstable_createResource(\n+ loadResource,\n+ getResourceKey\n+ );\n+ class Suspending extends React.Component {\n+ state = { useSuspense: false };\n+ useSuspense = () => this.setState({ useSuspense: true });\n+ render() {\n+ if (this.state.useSuspense) {\n+ const text = Resource.read(['loaded', 2000]);\n+ return text;\n+ } else {\n+ return <button onClick={this.useSuspense}>load data<\/button>;\n+ }\n+ }\n+ }\n+ apps.push(\n+ <Feature key=\"Suspense\" label=\"Suspense\" version=\"16.6+\">\n+ <React.Suspense fallback={<div>loading...<\/div>}>\n+ <Suspending \/>\n+ <\/React.Suspense>\n+ <\/Feature>\n+ );\n+\n+ \/\/ lazy\n+ const LazyWithDefaultProps = React.lazy(\n+ () =>\n+ new Promise(resolve => {\n+ function FooWithDefaultProps(props) {\n+ return (\n+ <h1>\n+ {props.greeting}, {props.name}\n+ <\/h1>\n+ );\n+ }\n+ FooWithDefaultProps.defaultProps = {\n+ name: 'World',\n+ greeting: 'Bonjour',\n+ };\n+ resolve({\n+ default: FooWithDefaultProps,\n+ });\n+ })\n+ );\n+ apps.push(\n+ <Feature key=\"lazy\" label=\"lazy\" version=\"16.6+\">\n+ <React.Suspense fallback={<div>loading...<\/div>}>\n+ <LazyWithDefaultProps greeting=\"Hello\" \/>\n+ <\/React.Suspense>\n+ <\/Feature>\n+ );\n+ case 5:\n+ case 4:\n+ \/\/ unstable_Profiler\n+ class ProfilerChild extends React.Component {\n+ state = { count: 0 };\n+ incrementCount = () =>\n+ this.setState(prevState => ({ count: prevState.count + 1 }));\n+ render() {\n+ return (\n+ <div>\n+ count: {this.state.count}{' '}\n+ <button onClick={this.incrementCount}>increment<\/button>\n+ <\/div>\n+ );\n+ }\n+ }\n+ const onRender = (...args) => {};\n+ const Profiler = React.unstable_Profiler || React.Profiler;\n+ apps.push(\n+ <Feature\n+ key=\"unstable_Profiler\"\n+ label=\"unstable_Profiler\"\n+ version=\"16.4+\"\n+ >\n+ <Profiler id=\"count\" onRender={onRender}>\n+ <div>\n+ <ProfilerChild \/>\n+ <\/div>\n+ <\/Profiler>\n+ <\/Feature>\n+ );\n+ case 3:\n+ \/\/ createContext()\n+ const LocaleContext = React.createContext();\n+ LocaleContext.displayName = 'LocaleContext';\n+ const ThemeContext = React.createContext();\n+ apps.push(\n+ <Feature key=\"createContext\" label=\"createContext\" version=\"16.3+\">\n+ <ThemeContext.Provider value=\"blue\">\n+ <ThemeContext.Consumer>\n+ {theme => <div>theme: {theme}<\/div>}\n+ <\/ThemeContext.Consumer>\n+ <\/ThemeContext.Provider>\n+ <LocaleContext.Provider value=\"en-US\">\n+ <LocaleContext.Consumer>\n+ {locale => <div>locale: {locale}<\/div>}\n+ <\/LocaleContext.Consumer>\n+ <\/LocaleContext.Provider>\n+ <\/Feature>\n+ );\n+\n+ \/\/ forwardRef()\n+ const AnonymousFunction = React.forwardRef((props, ref) => (\n+ <div ref={ref}>{props.children}<\/div>\n+ ));\n+ const NamedFunction = React.forwardRef(function named(props, ref) {\n+ return <div ref={ref}>{props.children}<\/div>;\n+ });\n+ const CustomName = React.forwardRef((props, ref) => (\n+ <div ref={ref}>{props.children}<\/div>\n+ ));\n+ CustomName.displayName = 'CustomNameForwardRef';\n+ apps.push(\n+ <Feature key=\"forwardRef\" label=\"forwardRef\" version=\"16.3+\">\n+ <AnonymousFunction>AnonymousFunction<\/AnonymousFunction>\n+ <NamedFunction>NamedFunction<\/NamedFunction>\n+ <CustomName>CustomName<\/CustomName>\n+ <\/Feature>\n+ );\n+\n+ \/\/ StrictMode\n+ class StrictModeChild extends React.Component {\n+ render() {\n+ return 'StrictModeChild';\n+ }\n+ }\n+ apps.push(\n+ <Feature key=\"StrictMode\" label=\"StrictMode\" version=\"16.3+\">\n+ <React.StrictMode>\n+ <StrictModeChild \/>\n+ <\/React.StrictMode>\n+ <\/Feature>\n+ );\n+\n+ \/\/ unstable_AsyncMode (later renamed to unstable_ConcurrentMode, then ConcurrentMode)\n+ const ConcurrentMode =\n+ React.ConcurrentMode ||\n+ React.unstable_ConcurrentMode ||\n+ React.unstable_AsyncMode;\n+ apps.push(\n+ <Feature\n+ key=\"AsyncMode\/ConcurrentMode\"\n+ label=\"AsyncMode\/ConcurrentMode\"\n+ version=\"16.3+\"\n+ >\n+ <ConcurrentMode>\n+ <div>\n+ unstable_AsyncMode was added in 16.3, renamed to\n+ unstable_ConcurrentMode in 16.5, and then renamed to\n+ ConcurrentMode in 16.7\n+ <\/div>\n+ <\/ConcurrentMode>\n+ <\/Feature>\n+ );\n+ case 2:\n+ \/\/ Fragment\n+ apps.push(\n+ <Feature key=\"Fragment\" label=\"Fragment\" version=\"16.4+\">\n+ <React.Fragment>\n+ <div>one<\/div>\n+ <div>two<\/div>\n+ <\/React.Fragment>\n+ <\/Feature>\n+ );\n+ case 1:\n+ case 0:\n+ default:\n+ break;\n+ }\n+ break;\n+ case 15:\n+ break;\n+ case 14:\n+ break;\n+ default:\n+ break;\n+}\n+\n+function Even() {\n+ return <small>(even)<\/small>;\n+}\n+\n+\/\/ Simple stateful app shared by all React versions\n+class SimpleApp extends React.Component {\n+ state = { count: 0 };\n+ incrementCount = () => {\n+ const updaterFn = prevState => ({ count: prevState.count + 1 });\n+ trace('Updating count', performance.now(), () => this.setState(updaterFn));\n+ };\n+ render() {\n+ const { count } = this.state;\n+ return (\n+ <div>\n+ {count % 2 === 0 ? (\n+ <span>\n+ count: {count} <Even \/>\n+ <\/span>\n+ ) : (\n+ <span>count: {count}<\/span>\n+ )}{' '}\n+ <button onClick={this.incrementCount}>increment<\/button>\n+ <\/div>\n+ );\n+ }\n+}\n+apps.push(\n+ <Feature key=\"Simple stateful app\" label=\"Simple stateful app\" version=\"any\">\n+ <SimpleApp \/>\n+ <\/Feature>\n+);\n+\n+\/\/ This component, with the version prop, helps organize DevTools at a glance.\n+function TopLevelWrapperForDevTools({ version }) {\n+ let header = <h1>React {version}<\/h1>;\n+ if (version.includes('canary')) {\n+ const commitSha = version.match(\/.+canary-(.+)\/)[1];\n+ header = (\n+ <h1>\n+ React canary{' '}\n+ <a href={`https:\/\/github.com\/facebook\/react\/commit\/${commitSha}`}>\n+ {commitSha}\n+ <\/a>\n+ <\/h1>\n+ );\n+ } else if (version.includes('alpha')) {\n+ header = <h1>React next<\/h1>;\n+ }\n+\n+ return (\n+ <div>\n+ {header}\n+ {apps}\n+ <\/div>\n+ );\n+}\n+TopLevelWrapperForDevTools.displayName = 'React';\n+\n+ReactDOM.render(\n+ <TopLevelWrapperForDevTools version={React.version} \/>,\n+ document.getElementById('root')\n+);\ndiff --git a\/fixtures\/regression\/styles.css b\/fixtures\/regression\/styles.css\nnew file mode 100644\nindex 0000000000..6cbaaa5c01\n--- \/dev\/null\n+++ b\/fixtures\/regression\/styles.css\n@@ -0,0 +1,37 @@\n+body {\n+ font-family: sans-serif;\n+ font-size: 12px;\n+}\n+\n+h1 {\n+ margin: 0;\n+ font-size: 20px;\n+}\n+\n+h2 {\n+ margin: 1rem 0 0;\n+}\n+\n+iframe {\n+ border: 1px solid #ddd;\n+ border-radius: 0.5rem;\n+}\n+\n+code {\n+ white-space: nowrap;\n+}\n+\n+.Feature {\n+ margin: 1rem 0;\n+ border-bottom: 1px solid #eee;\n+ padding-bottom: 1rem;\n+}\n+.FeatureHeader {\n+ font-size: 16px;\n+ margin-bottom: 0.5rem;\n+}\n+.FeatureCode {\n+ background-color: #eee;\n+ padding: 0.25rem;\n+ border-radius: 0.25rem;\n+}\ndiff --git a\/fixtures\/standalone\/index.html b\/fixtures\/standalone\/index.html\nnew file mode 100644\nindex 0000000000..17e133bae8\n--- \/dev\/null\n+++ b\/fixtures\/standalone\/index.html\n@@ -0,0 +1,284 @@\n+<!DOCTYPE html>\n+<html>\n+ <head>\n+ <meta charset=\"UTF-8\" \/>\n+ <title>TODO List<\/title>\n+\n+ \n+ <script src=\"http:\/\/localhost:8097\"><\/script>\n+\n+ <script src=\"https:\/\/unpkg.com\/react@16\/umd\/react.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-dom@16\/umd\/react-dom.development.js\"><\/script>\n+\n+ \n+ <script src=\"https:\/\/unpkg.com\/babel-standalone@6.15.0\/babel.min.js\"><\/script>\n+\n+ <style type=\"text\/css\">\n+ .Input {\n+ font-size: 1rem;\n+ padding: 0.25rem;\n+ }\n+\n+ .IconButton {\n+ padding: 0.25rem;\n+ border: none;\n+ background: none;\n+ cursor: pointer;\n+ }\n+\n+ .List {\n+ margin: 0.5rem 0 0;\n+ padding: 0;\n+ }\n+\n+ .ListItem {\n+ list-style-type: none;\n+ }\n+\n+ .Label {\n+ cursor: pointer;\n+ padding: 0.25rem;\n+ color: #555;\n+ }\n+ .Label:hover {\n+ color: #000;\n+ }\n+\n+ .IconButton {\n+ padding: 0.25rem;\n+ border: none;\n+ background: none;\n+ cursor: pointer;\n+ }\n+ <\/style>\n+ <\/head>\n+ <body>\n+ <div id=\"root\"><\/div>\n+ <script type=\"text\/babel\">\n+ const { Fragment, useCallback, useState } = React;\n+\n+ function List(props) {\n+ const [newItemText, setNewItemText] = useState(\"\");\n+ const [items, setItems] = useState([\n+ { id: 1, isComplete: true, text: \"First\" },\n+ { id: 2, isComplete: true, text: \"Second\" },\n+ { id: 3, isComplete: false, text: \"Third\" }\n+ ]);\n+ const [uid, setUID] = useState(4);\n+\n+ const handleClick = useCallback(() => {\n+ if (newItemText !== \"\") {\n+ setItems([\n+ ...items,\n+ {\n+ id: uid,\n+ isComplete: false,\n+ text: newItemText\n+ }\n+ ]);\n+ setUID(uid + 1);\n+ setNewItemText(\"\");\n+ }\n+ }, [newItemText, items, uid]);\n+\n+ const handleKeyPress = useCallback(\n+ event => {\n+ if (event.key === \"Enter\") {\n+ handleClick();\n+ }\n+ },\n+ [handleClick]\n+ );\n+\n+ const handleChange = useCallback(\n+ event => {\n+ setNewItemText(event.currentTarget.value);\n+ },\n+ [setNewItemText]\n+ );\n+\n+ const removeItem = useCallback(\n+ itemToRemove => setItems(items.filter(item => item !== itemToRemove)),\n+ [items]\n+ );\n+\n+ const toggleItem = useCallback(\n+ itemToToggle => {\n+ const index = items.indexOf(itemToToggle);\n+\n+ setItems(\n+ items\n+ .slice(0, index)\n+ .concat({\n+ ...itemToToggle,\n+ isComplete: !itemToToggle.isComplete\n+ })\n+ .concat(items.slice(index + 1))\n+ );\n+ },\n+ [items]\n+ );\n+\n+ return (\n+ <Fragment>\n+ <h1>List<\/h1>\n+ <input\n+ type=\"text\"\n+ placeholder=\"New list item...\"\n+ className=\"Input\"\n+ value={newItemText}\n+ onChange={handleChange}\n+ onKeyPress={handleKeyPress}\n+ \/>\n+ <button\n+ className=\"IconButton\"\n+ disabled={newItemText === \"\"}\n+ onClick={handleClick}\n+ >\n+ <span role=\"img\" aria-label=\"Add item\">\n+ ➕\n+ <\/span>\n+ <\/button>\n+ <ul className=\"List\">\n+ {items.map(item => (\n+ <ListItem\n+ key={item.id}\n+ item={item}\n+ removeItem={removeItem}\n+ toggleItem={toggleItem}\n+ \/>\n+ ))}\n+ <\/ul>\n+ <\/Fragment>\n+ );\n+ }\n+\n+ function ListItem({ item, removeItem, toggleItem }) {\n+ const handleDelete = useCallback(() => {\n+ removeItem(item);\n+ }, [item, removeItem]);\n+\n+ const handleToggle = useCallback(() => {\n+ toggleItem(item);\n+ }, [item, toggleItem]);\n+\n+ return (\n+ <li className=\"ListItem\">\n+ <button className=\"IconButton\" onClick={handleDelete}>\n+ 🗑\n+ <\/button>\n+ <label className=\"Label\">\n+ <input\n+ className=\"Input\"\n+ checked={item.isComplete}\n+ onChange={handleToggle}\n+ type=\"checkbox\"\n+ \/>{\" \"}\n+ {item.text}\n+ <\/label>\n+ <\/li>\n+ );\n+ }\n+\n+ function SimpleValues() {\n+ return (\n+ <ChildComponent\n+ string=\"abc\"\n+ emptyString=\"\"\n+ number={123}\n+ undefined={undefined}\n+ null={null}\n+ nan={NaN}\n+ infinity={Infinity}\n+ true={true}\n+ false={false}\n+ \/>\n+ );\n+ }\n+\n+ class Custom {\n+ _number = 42;\n+ get number() {\n+ return this._number;\n+ }\n+ }\n+\n+ function CustomObject() {\n+ return <ChildComponent customObject={new Custom()} \/>;\n+ }\n+\n+ const object = {\n+ string: \"abc\",\n+ longString: \"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKJLMNOPQRSTUVWXYZ1234567890\",\n+ emptyString: \"\",\n+ number: 123,\n+ boolean: true,\n+ undefined: undefined,\n+ null: null\n+ };\n+\n+ function ObjectProps() {\n+ return (\n+ <ChildComponent\n+ object={{\n+ outer: {\n+ inner: object\n+ }\n+ }}\n+ array={[\"first\", \"second\", \"third\"]}\n+ objectInArray={[object]}\n+ arrayInObject={{ array: [\"first\", \"second\", \"third\"] }}\n+ deepObject={{\n+ \/\/ Known limitation: we won't go deeper than several levels.\n+ \/\/ In the future, we might offer a way to request deeper access on demand.\n+ a: {\n+ b: {\n+ c: {\n+ d: {\n+ e: {\n+ f: {\n+ g: {\n+ h: {\n+ i: {\n+ j: 10\n+ }\n+ }\n+ }\n+ }\n+ }\n+ }\n+ }\n+ }\n+ }\n+ }}\n+ \/>\n+ );\n+ }\n+\n+ function ChildComponent(props: any) {\n+ return null;\n+ }\n+\n+ function InspectableElements() {\n+ return (\n+ <Fragment>\n+ <SimpleValues \/>\n+ <ObjectProps \/>\n+ <CustomObject \/>\n+ <\/Fragment>\n+ );\n+ }\n+\n+ function App() {\n+ return (\n+ <Fragment>\n+ <List \/>\n+ <InspectableElements \/>\n+ <\/Fragment>\n+ );\n+ }\n+\n+ ReactDOM.render(<App \/>, document.getElementById(\"root\"));\n+ <\/script>\n+ <\/body>\n+<\/html>\ndiff --git a\/flow-typed\/chrome.js b\/flow-typed\/chrome.js\nnew file mode 100644\nindex 0000000000..fac8109124\n--- \/dev\/null\n+++ b\/flow-typed\/chrome.js\n@@ -0,0 +1,94 @@\n+\/\/ @flow\n+\n+declare var chrome: {\n+ devtools: {\n+ network: {\n+ onNavigated: {\n+ addListener: (cb: (url: string) => void) => void,\n+ removeListener: (cb: () => void) => void,\n+ },\n+ },\n+ inspectedWindow: {\n+ eval: (code: string, cb?: (res: any, err: ?Object) => any) => void,\n+ tabId: number,\n+ },\n+ panels: {\n+ create: (\n+ title: string,\n+ icon: string,\n+ filename: string,\n+ cb: (panel: {\n+ onHidden: {\n+ addListener: (cb: (window: Object) => void) => void,\n+ },\n+ onShown: {\n+ addListener: (cb: (window: Object) => void) => void,\n+ },\n+ }) => void\n+ ) => void,\n+ themeName: ?string,\n+ },\n+ },\n+ tabs: {\n+ create: (options: Object) => void,\n+ executeScript: (tabId: number, options: Object, fn: () => void) => void,\n+ onUpdated: {\n+ addListener: (\n+ fn: (tabId: number, changeInfo: Object, tab: Object) => void\n+ ) => void,\n+ },\n+ query: (options: Object, fn: (tabArray: Array<Object>) => void) => void,\n+ },\n+ browserAction: {\n+ setIcon: (options: {\n+ tabId: number,\n+ path: { [key: string]: string },\n+ }) => void,\n+ setPopup: (options: {\n+ tabId: number,\n+ popup: string,\n+ }) => void,\n+ },\n+ runtime: {\n+ getURL: (path: string) => string,\n+ sendMessage: (config: Object) => void,\n+ connect: (\n+ config: Object\n+ ) => {\n+ disconnect: () => void,\n+ onMessage: {\n+ addListener: (fn: (message: Object) => void) => void,\n+ },\n+ onDisconnect: {\n+ addListener: (fn: (message: Object) => void) => void,\n+ },\n+ postMessage: (data: Object) => void,\n+ },\n+ onConnect: {\n+ addListener: (\n+ fn: (port: {\n+ name: string,\n+ sender: {\n+ tab: {\n+ id: number,\n+ url: string,\n+ },\n+ },\n+ }) => void\n+ ) => void,\n+ },\n+ onMessage: {\n+ addListener: (\n+ fn: (\n+ req: Object,\n+ sender: {\n+ url: string,\n+ tab: {\n+ id: number,\n+ },\n+ }\n+ ) => void\n+ ) => void,\n+ },\n+ },\n+};\ndiff --git a\/flow-typed\/jest.js b\/flow-typed\/jest.js\nnew file mode 100644\nindex 0000000000..8563e20d93\n--- \/dev\/null\n+++ b\/flow-typed\/jest.js\n@@ -0,0 +1,1188 @@\n+type JestMockFn<TArguments: $ReadOnlyArray<*>, TReturn> = {\n+ (...args: TArguments): TReturn,\n+ \/**\n+ * An object for introspecting mock calls\n+ *\/\n+ mock: {\n+ \/**\n+ * An array that represents all calls that have been made into this mock\n+ * function. Each call is represented by an array of arguments that were\n+ * passed during the call.\n+ *\/\n+ calls: Array<TArguments>,\n+ \/**\n+ * An array that contains all the object instances that have been\n+ * instantiated from this mock function.\n+ *\/\n+ instances: Array<TReturn>,\n+ \/**\n+ * An array that contains all the object results that have been\n+ * returned by this mock function call\n+ *\/\n+ results: Array<{ isThrow: boolean, value: TReturn }>,\n+ },\n+ \/**\n+ * Resets all information stored in the mockFn.mock.calls and\n+ * mockFn.mock.instances arrays. Often this is useful when you want to clean\n+ * up a mock's usage data between two assertions.\n+ *\/\n+ mockClear(): void,\n+ \/**\n+ * Resets all information stored in the mock. This is useful when you want to\n+ * completely restore a mock back to its initial state.\n+ *\/\n+ mockReset(): void,\n+ \/**\n+ * Removes the mock and restores the initial implementation. This is useful\n+ * when you want to mock functions in certain test cases and restore the\n+ * original implementation in others. Beware that mockFn.mockRestore only\n+ * works when mock was created with jest.spyOn. Thus you have to take care of\n+ * restoration yourself when manually assigning jest.fn().\n+ *\/\n+ mockRestore(): void,\n+ \/**\n+ * Accepts a function that should be used as the implementation of the mock.\n+ * The mock itself will still record all calls that go into and instances\n+ * that come from itself -- the only difference is that the implementation\n+ * will also be executed when the mock is called.\n+ *\/\n+ mockImplementation(\n+ fn: (...args: TArguments) => TReturn\n+ ): JestMockFn<TArguments, TReturn>,\n+ \/**\n+ * Accepts a function that will be used as an implementation of the mock for\n+ * one call to the mocked function. Can be chained so that multiple function\n+ * calls produce different results.\n+ *\/\n+ mockImplementationOnce(\n+ fn: (...args: TArguments) => TReturn\n+ ): JestMockFn<TArguments, TReturn>,\n+ \/**\n+ * Accepts a string to use in test result output in place of \"jest.fn()\" to\n+ * indicate which mock function is being referenced.\n+ *\/\n+ mockName(name: string): JestMockFn<TArguments, TReturn>,\n+ \/**\n+ * Just a simple sugar function for returning `this`\n+ *\/\n+ mockReturnThis(): void,\n+ \/**\n+ * Accepts a value that will be returned whenever the mock function is called.\n+ *\/\n+ mockReturnValue(value: TReturn): JestMockFn<TArguments, TReturn>,\n+ \/**\n+ * Sugar for only returning a value once inside your mock\n+ *\/\n+ mockReturnValueOnce(value: TReturn): JestMockFn<TArguments, TReturn>,\n+ \/**\n+ * Sugar for jest.fn().mockImplementation(() => Promise.resolve(value))\n+ *\/\n+ mockResolvedValue(value: TReturn): JestMockFn<TArguments, Promise<TReturn>>,\n+ \/**\n+ * Sugar for jest.fn().mockImplementationOnce(() => Promise.resolve(value))\n+ *\/\n+ mockResolvedValueOnce(\n+ value: TReturn\n+ ): JestMockFn<TArguments, Promise<TReturn>>,\n+ \/**\n+ * Sugar for jest.fn().mockImplementation(() => Promise.reject(value))\n+ *\/\n+ mockRejectedValue(value: TReturn): JestMockFn<TArguments, Promise<any>>,\n+ \/**\n+ * Sugar for jest.fn().mockImplementationOnce(() => Promise.reject(value))\n+ *\/\n+ mockRejectedValueOnce(value: TReturn): JestMockFn<TArguments, Promise<any>>,\n+};\n+\n+type JestAsymmetricEqualityType = {\n+ \/**\n+ * A custom Jasmine equality tester\n+ *\/\n+ asymmetricMatch(value: mixed): boolean,\n+};\n+\n+type JestCallsType = {\n+ allArgs(): mixed,\n+ all(): mixed,\n+ any(): boolean,\n+ count(): number,\n+ first(): mixed,\n+ mostRecent(): mixed,\n+ reset(): void,\n+};\n+\n+type JestClockType = {\n+ install(): void,\n+ mockDate(date: Date): void,\n+ tick(milliseconds?: number): void,\n+ uninstall(): void,\n+};\n+\n+type JestMatcherResult = {\n+ message?: string | (() => string),\n+ pass: boolean,\n+};\n+\n+type JestMatcher = (\n+ actual: any,\n+ expected: any\n+) => JestMatcherResult | Promise<JestMatcherResult>;\n+\n+type JestPromiseType = {\n+ \/**\n+ * Use rejects to unwrap the reason of a rejected promise so any other\n+ * matcher can be chained. If the promise is fulfilled the assertion fails.\n+ *\/\n+ \/\/ eslint-disable-next-line no-use-before-define\n+ rejects: JestExpectType,\n+ \/**\n+ * Use resolves to unwrap the value of a fulfilled promise so any other\n+ * matcher can be chained. If the promise is rejected the assertion fails.\n+ *\/\n+ \/\/ eslint-disable-next-line no-use-before-define\n+ resolves: JestExpectType,\n+};\n+\n+\/**\n+ * Jest allows functions and classes to be used as test names in test() and\n+ * describe()\n+ *\/\n+type JestTestName = string | Function;\n+\n+\/**\n+ * Plugin: jest-styled-components\n+ *\/\n+\n+type JestStyledComponentsMatcherValue =\n+ | string\n+ | JestAsymmetricEqualityType\n+ | RegExp\n+ | typeof undefined;\n+\n+type JestStyledComponentsMatcherOptions = {\n+ media?: string,\n+ modifier?: string,\n+ supports?: string,\n+};\n+\n+type JestStyledComponentsMatchersType = {\n+ toHaveStyleRule(\n+ property: string,\n+ value: JestStyledComponentsMatcherValue,\n+ options?: JestStyledComponentsMatcherOptions\n+ ): void,\n+};\n+\n+\/**\n+ * Plugin: jest-enzyme\n+ *\/\n+type EnzymeMatchersType = {\n+ \/\/ 5.x\n+ toBeEmpty(): void,\n+ toBePresent(): void,\n+ \/\/ 6.x\n+ toBeChecked(): void,\n+ toBeDisabled(): void,\n+ toBeEmptyRender(): void,\n+ toContainMatchingElement(selector: string): void,\n+ toContainMatchingElements(n: number, selector: string): void,\n+ toContainExactlyOneMatchingElement(selector: string): void,\n+ toContainReact(element: React$Element<any>): void,\n+ toExist(): void,\n+ toHaveClassName(className: string): void,\n+ toHaveHTML(html: string): void,\n+ toHaveProp: ((propKey: string, propValue?: any) => void) &\n+ ((props: {}) => void),\n+ toHaveRef(refName: string): void,\n+ toHaveState: ((stateKey: string, stateValue?: any) => void) &\n+ ((state: {}) => void),\n+ toHaveStyle: ((styleKey: string, styleValue?: any) => void) &\n+ ((style: {}) => void),\n+ toHaveTagName(tagName: string): void,\n+ toHaveText(text: string): void,\n+ toHaveValue(value: any): void,\n+ toIncludeText(text: string): void,\n+ toMatchElement(\n+ element: React$Element<any>,\n+ options?: {| ignoreProps?: boolean, verbose?: boolean |}\n+ ): void,\n+ toMatchSelector(selector: string): void,\n+ \/\/ 7.x\n+ toHaveDisplayName(name: string): void,\n+};\n+\n+\/\/ DOM testing library extensions https:\/\/github.com\/kentcdodds\/dom-testing-library#custom-jest-matchers\n+type DomTestingLibraryType = {\n+ toBeDisabled(): void,\n+ toBeEmpty(): void,\n+ toBeInTheDocument(): void,\n+ toBeVisible(): void,\n+ toContainElement(element: HTMLElement | null): void,\n+ toContainHTML(htmlText: string): void,\n+ toHaveAttribute(name: string, expectedValue?: string): void,\n+ toHaveClass(...classNames: string[]): void,\n+ toHaveFocus(): void,\n+ toHaveFormValues(expectedValues: { [name: string]: any }): void,\n+ toHaveStyle(css: string): void,\n+ toHaveTextContent(\n+ content: string | RegExp,\n+ options?: { normalizeWhitespace: boolean }\n+ ): void,\n+ toBeInTheDOM(): void,\n+};\n+\n+\/\/ Jest JQuery Matchers: https:\/\/github.com\/unindented\/custom-jquery-matchers\n+type JestJQueryMatchersType = {\n+ toExist(): void,\n+ toHaveLength(len: number): void,\n+ toHaveId(id: string): void,\n+ toHaveClass(className: string): void,\n+ toHaveTag(tag: string): void,\n+ toHaveAttr(key: string, val?: any): void,\n+ toHaveProp(key: string, val?: any): void,\n+ toHaveText(text: string | RegExp): void,\n+ toHaveData(key: string, val?: any): void,\n+ toHaveValue(val: any): void,\n+ toHaveCss(css: { [key: string]: any }): void,\n+ toBeChecked(): void,\n+ toBeDisabled(): void,\n+ toBeEmpty(): void,\n+ toBeHidden(): void,\n+ toBeSelected(): void,\n+ toBeVisible(): void,\n+ toBeFocused(): void,\n+ toBeInDom(): void,\n+ toBeMatchedBy(sel: string): void,\n+ toHaveDescendant(sel: string): void,\n+ toHaveDescendantWithText(sel: string, text: string | RegExp): void,\n+};\n+\n+\/\/ Jest Extended Matchers: https:\/\/github.com\/jest-community\/jest-extended\n+type JestExtendedMatchersType = {\n+ \/**\n+ * Note: Currently unimplemented\n+ * Passing assertion\n+ *\n+ * @param {String} message\n+ *\/\n+ \/\/ pass(message: string): void;\n+\n+ \/**\n+ * Note: Currently unimplemented\n+ * Failing assertion\n+ *\n+ * @param {String} message\n+ *\/\n+ \/\/ fail(message: string): void;\n+\n+ \/**\n+ * Use .toBeEmpty when checking if a String '', Array [] or Object {} is empty.\n+ *\/\n+ toBeEmpty(): void,\n+\n+ \/**\n+ * Use .toBeOneOf when checking if a value is a member of a given Array.\n+ * @param {Array.<*>} members\n+ *\/\n+ toBeOneOf(members: any[]): void,\n+\n+ \/**\n+ * Use `.toBeNil` when checking a value is `null` or `undefined`.\n+ *\/\n+ toBeNil(): void,\n+\n+ \/**\n+ * Use `.toSatisfy` when you want to use a custom matcher by supplying a predicate function that returns a `Boolean`.\n+ * @param {Function} predicate\n+ *\/\n+ toSatisfy(predicate: (n: any) => boolean): void,\n+\n+ \/**\n+ * Use `.toBeArray` when checking if a value is an `Array`.\n+ *\/\n+ toBeArray(): void,\n+\n+ \/**\n+ * Use `.toBeArrayOfSize` when checking if a value is an `Array` of size x.\n+ * @param {Number} x\n+ *\/\n+ toBeArrayOfSize(x: number): void,\n+\n+ \/**\n+ * Use `.toIncludeAllMembers` when checking if an `Array` contains all of the same members of a given set.\n+ * @param {Array.<*>} members\n+ *\/\n+ toIncludeAllMembers(members: any[]): void,\n+\n+ \/**\n+ * Use `.toIncludeAnyMembers` when checking if an `Array` contains any of the members of a given set.\n+ * @param {Array.<*>} members\n+ *\/\n+ toIncludeAnyMembers(members: any[]): void,\n+\n+ \/**\n+ * 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.\n+ * @param {Function} predicate\n+ *\/\n+ toSatisfyAll(predicate: (n: any) => boolean): void,\n+\n+ \/**\n+ * Use `.toBeBoolean` when checking if a value is a `Boolean`.\n+ *\/\n+ toBeBoolean(): void,\n+\n+ \/**\n+ * Use `.toBeTrue` when checking a value is equal (===) to `true`.\n+ *\/\n+ toBeTrue(): void,\n+\n+ \/**\n+ * Use `.toBeFalse` when checking a value is equal (===) to `false`.\n+ *\/\n+ toBeFalse(): void,\n+\n+ \/**\n+ * Use .toBeDate when checking if a value is a Date.\n+ *\/\n+ toBeDate(): void,\n+\n+ \/**\n+ * Use `.toBeFunction` when checking if a value is a `Function`.\n+ *\/\n+ toBeFunction(): void,\n+\n+ \/**\n+ * Use `.toHaveBeenCalledBefore` when checking if a `Mock` was called before another `Mock`.\n+ *\n+ * Note: Required Jest version >22\n+ * 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\n+ *\n+ * @param {Mock} mock\n+ *\/\n+ toHaveBeenCalledBefore(mock: JestMockFn<any, any>): void,\n+\n+ \/**\n+ * Use `.toBeNumber` when checking if a value is a `Number`.\n+ *\/\n+ toBeNumber(): void,\n+\n+ \/**\n+ * Use `.toBeNaN` when checking a value is `NaN`.\n+ *\/\n+ toBeNaN(): void,\n+\n+ \/**\n+ * Use `.toBeFinite` when checking if a value is a `Number`, not `NaN` or `Infinity`.\n+ *\/\n+ toBeFinite(): void,\n+\n+ \/**\n+ * Use `.toBePositive` when checking if a value is a positive `Number`.\n+ *\/\n+ toBePositive(): void,\n+\n+ \/**\n+ * Use `.toBeNegative` when checking if a value is a negative `Number`.\n+ *\/\n+ toBeNegative(): void,\n+\n+ \/**\n+ * Use `.toBeEven` when checking if a value is an even `Number`.\n+ *\/\n+ toBeEven(): void,\n+\n+ \/**\n+ * Use `.toBeOdd` when checking if a value is an odd `Number`.\n+ *\/\n+ toBeOdd(): void,\n+\n+ \/**\n+ * Use `.toBeWithin` when checking if a number is in between the given bounds of: start (inclusive) and end (exclusive).\n+ *\n+ * @param {Number} start\n+ * @param {Number} end\n+ *\/\n+ toBeWithin(start: number, end: number): void,\n+\n+ \/**\n+ * Use `.toBeObject` when checking if a value is an `Object`.\n+ *\/\n+ toBeObject(): void,\n+\n+ \/**\n+ * Use `.toContainKey` when checking if an object contains the provided key.\n+ *\n+ * @param {String} key\n+ *\/\n+ toContainKey(key: string): void,\n+\n+ \/**\n+ * Use `.toContainKeys` when checking if an object has all of the provided keys.\n+ *\n+ * @param {Array.<String>} keys\n+ *\/\n+ toContainKeys(keys: string[]): void,\n+\n+ \/**\n+ * Use `.toContainAllKeys` when checking if an object only contains all of the provided keys.\n+ *\n+ * @param {Array.<String>} keys\n+ *\/\n+ toContainAllKeys(keys: string[]): void,\n+\n+ \/**\n+ * Use `.toContainAnyKeys` when checking if an object contains at least one of the provided keys.\n+ *\n+ * @param {Array.<String>} keys\n+ *\/\n+ toContainAnyKeys(keys: string[]): void,\n+\n+ \/**\n+ * Use `.toContainValue` when checking if an object contains the provided value.\n+ *\n+ * @param {*} value\n+ *\/\n+ toContainValue(value: any): void,\n+\n+ \/**\n+ * Use `.toContainValues` when checking if an object contains all of the provided values.\n+ *\n+ * @param {Array.<*>} values\n+ *\/\n+ toContainValues(values: any[]): void,\n+\n+ \/**\n+ * Use `.toContainAllValues` when checking if an object only contains all of the provided values.\n+ *\n+ * @param {Array.<*>} values\n+ *\/\n+ toContainAllValues(values: any[]): void,\n+\n+ \/**\n+ * Use `.toContainAnyValues` when checking if an object contains at least one of the provided values.\n+ *\n+ * @param {Array.<*>} values\n+ *\/\n+ toContainAnyValues(values: any[]): void,\n+\n+ \/**\n+ * Use `.toContainEntry` when checking if an object contains the provided entry.\n+ *\n+ * @param {Array.<String, String>} entry\n+ *\/\n+ toContainEntry(entry: [string, string]): void,\n+\n+ \/**\n+ * Use `.toContainEntries` when checking if an object contains all of the provided entries.\n+ *\n+ * @param {Array.<Array.<String, String>>} entries\n+ *\/\n+ toContainEntries(entries: [string, string][]): void,\n+\n+ \/**\n+ * Use `.toContainAllEntries` when checking if an object only contains all of the provided entries.\n+ *\n+ * @param {Array.<Array.<String, String>>} entries\n+ *\/\n+ toContainAllEntries(entries: [string, string][]): void,\n+\n+ \/**\n+ * Use `.toContainAnyEntries` when checking if an object contains at least one of the provided entries.\n+ *\n+ * @param {Array.<Array.<String, String>>} entries\n+ *\/\n+ toContainAnyEntries(entries: [string, string][]): void,\n+\n+ \/**\n+ * Use `.toBeExtensible` when checking if an object is extensible.\n+ *\/\n+ toBeExtensible(): void,\n+\n+ \/**\n+ * Use `.toBeFrozen` when checking if an object is frozen.\n+ *\/\n+ toBeFrozen(): void,\n+\n+ \/**\n+ * Use `.toBeSealed` when checking if an object is sealed.\n+ *\/\n+ toBeSealed(): void,\n+\n+ \/**\n+ * Use `.toBeString` when checking if a value is a `String`.\n+ *\/\n+ toBeString(): void,\n+\n+ \/**\n+ * Use `.toEqualCaseInsensitive` when checking if a string is equal (===) to another ignoring the casing of both strings.\n+ *\n+ * @param {String} string\n+ *\/\n+ toEqualCaseInsensitive(string: string): void,\n+\n+ \/**\n+ * Use `.toStartWith` when checking if a `String` starts with a given `String` prefix.\n+ *\n+ * @param {String} prefix\n+ *\/\n+ toStartWith(prefix: string): void,\n+\n+ \/**\n+ * Use `.toEndWith` when checking if a `String` ends with a given `String` suffix.\n+ *\n+ * @param {String} suffix\n+ *\/\n+ toEndWith(suffix: string): void,\n+\n+ \/**\n+ * Use `.toInclude` when checking if a `String` includes the given `String` substring.\n+ *\n+ * @param {String} substring\n+ *\/\n+ toInclude(substring: string): void,\n+\n+ \/**\n+ * Use `.toIncludeRepeated` when checking if a `String` includes the given `String` substring the correct number of times.\n+ *\n+ * @param {String} substring\n+ * @param {Number} times\n+ *\/\n+ toIncludeRepeated(substring: string, times: number): void,\n+\n+ \/**\n+ * Use `.toIncludeMultiple` when checking if a `String` includes all of the given substrings.\n+ *\n+ * @param {Array.<String>} substring\n+ *\/\n+ toIncludeMultiple(substring: string[]): void,\n+};\n+\n+interface JestExpectType {\n+ not: JestExpectType &\n+ EnzymeMatchersType &\n+ DomTestingLibraryType &\n+ JestJQueryMatchersType &\n+ JestStyledComponentsMatchersType &\n+ JestExtendedMatchersType;\n+ \/**\n+ * If you have a mock function, you can use .lastCalledWith to test what\n+ * arguments it was last called with.\n+ *\/\n+ lastCalledWith(...args: Array<any>): void;\n+ \/**\n+ * toBe just checks that a value is what you expect. It uses === to check\n+ * strict equality.\n+ *\/\n+ toBe(value: any): void;\n+ \/**\n+ * Use .toBeCalledWith to ensure that a mock function was called with\n+ * specific arguments.\n+ *\/\n+ toBeCalledWith(...args: Array<any>): void;\n+ \/**\n+ * Using exact equality with floating point numbers is a bad idea. Rounding\n+ * means that intuitive things fail.\n+ *\/\n+ toBeCloseTo(num: number, delta: any): void;\n+ \/**\n+ * Use .toBeDefined to check that a variable is not undefined.\n+ *\/\n+ toBeDefined(): void;\n+ \/**\n+ * Use .toBeFalsy when you don't care what a value is, you just want to\n+ * ensure a value is false in a boolean context.\n+ *\/\n+ toBeFalsy(): void;\n+ \/**\n+ * To compare floating point numbers, you can use toBeGreaterThan.\n+ *\/\n+ toBeGreaterThan(number: number): void;\n+ \/**\n+ * To compare floating point numbers, you can use toBeGreaterThanOrEqual.\n+ *\/\n+ toBeGreaterThanOrEqual(number: number): void;\n+ \/**\n+ * To compare floating point numbers, you can use toBeLessThan.\n+ *\/\n+ toBeLessThan(number: number): void;\n+ \/**\n+ * To compare floating point numbers, you can use toBeLessThanOrEqual.\n+ *\/\n+ toBeLessThanOrEqual(number: number): void;\n+ \/**\n+ * Use .toBeInstanceOf(Class) to check that an object is an instance of a\n+ * class.\n+ *\/\n+ toBeInstanceOf(cls: Class<*>): void;\n+ \/**\n+ * .toBeNull() is the same as .toBe(null) but the error messages are a bit\n+ * nicer.\n+ *\/\n+ toBeNull(): void;\n+ \/**\n+ * Use .toBeTruthy when you don't care what a value is, you just want to\n+ * ensure a value is true in a boolean context.\n+ *\/\n+ toBeTruthy(): void;\n+ \/**\n+ * Use .toBeUndefined to check that a variable is undefined.\n+ *\/\n+ toBeUndefined(): void;\n+ \/**\n+ * Use .toContain when you want to check that an item is in a list. For\n+ * testing the items in the list, this uses ===, a strict equality check.\n+ *\/\n+ toContain(item: any): void;\n+ \/**\n+ * Use .toContainEqual when you want to check that an item is in a list. For\n+ * testing the items in the list, this matcher recursively checks the\n+ * equality of all fields, rather than checking for object identity.\n+ *\/\n+ toContainEqual(item: any): void;\n+ \/**\n+ * Use .toEqual when you want to check that two objects have the same value.\n+ * This matcher recursively checks the equality of all fields, rather than\n+ * checking for object identity.\n+ *\/\n+ toEqual(value: any): void;\n+ \/**\n+ * Use .toHaveBeenCalled to ensure that a mock function got called.\n+ *\/\n+ toHaveBeenCalled(): void;\n+ toBeCalled(): void;\n+ \/**\n+ * Use .toHaveBeenCalledTimes to ensure that a mock function got called exact\n+ * number of times.\n+ *\/\n+ toHaveBeenCalledTimes(number: number): void;\n+ toBeCalledTimes(number: number): void;\n+ \/**\n+ *\n+ *\/\n+ toHaveBeenNthCalledWith(nthCall: number, ...args: Array<any>): void;\n+ nthCalledWith(nthCall: number, ...args: Array<any>): void;\n+ \/**\n+ *\n+ *\/\n+ toHaveReturned(): void;\n+ toReturn(): void;\n+ \/**\n+ *\n+ *\/\n+ toHaveReturnedTimes(number: number): void;\n+ toReturnTimes(number: number): void;\n+ \/**\n+ *\n+ *\/\n+ toHaveReturnedWith(value: any): void;\n+ toReturnWith(value: any): void;\n+ \/**\n+ *\n+ *\/\n+ toHaveLastReturnedWith(value: any): void;\n+ lastReturnedWith(value: any): void;\n+ \/**\n+ *\n+ *\/\n+ toHaveNthReturnedWith(nthCall: number, value: any): void;\n+ nthReturnedWith(nthCall: number, value: any): void;\n+ \/**\n+ * Use .toHaveBeenCalledWith to ensure that a mock function was called with\n+ * specific arguments.\n+ *\/\n+ toHaveBeenCalledWith(...args: Array<any>): void;\n+ toBeCalledWith(...args: Array<any>): void;\n+ \/**\n+ * Use .toHaveBeenLastCalledWith to ensure that a mock function was last called\n+ * with specific arguments.\n+ *\/\n+ toHaveBeenLastCalledWith(...args: Array<any>): void;\n+ lastCalledWith(...args: Array<any>): void;\n+ \/**\n+ * Check that an object has a .length property and it is set to a certain\n+ * numeric value.\n+ *\/\n+ toHaveLength(number: number): void;\n+ \/**\n+ *\n+ *\/\n+ toHaveProperty(propPath: string, value?: any): void;\n+ \/**\n+ * Use .toMatch to check that a string matches a regular expression or string.\n+ *\/\n+ toMatch(regexpOrString: RegExp | string): void;\n+ \/**\n+ * Use .toMatchObject to check that a javascript object matches a subset of the properties of an object.\n+ *\/\n+ toMatchObject(object: Object | Array<Object>): void;\n+ \/**\n+ * Use .toStrictEqual to check that a javascript object matches a subset of the properties of an object.\n+ *\/\n+ toStrictEqual(value: any): void;\n+ \/**\n+ * This ensures that an Object matches the most recent snapshot.\n+ *\/\n+ toMatchSnapshot(propertyMatchers?: any, name?: string): void;\n+ \/**\n+ * This ensures that an Object matches the most recent snapshot.\n+ *\/\n+ toMatchSnapshot(name: string): void;\n+\n+ toMatchInlineSnapshot(snapshot?: string): void;\n+ toMatchInlineSnapshot(propertyMatchers?: any, snapshot?: string): void;\n+ \/**\n+ * Use .toThrow to test that a function throws when it is called.\n+ * If you want to test that a specific error gets thrown, you can provide an\n+ * argument to toThrow. The argument can be a string for the error message,\n+ * a class for the error, or a regex that should match the error.\n+ *\n+ * Alias: .toThrowError\n+ *\/\n+ toThrow(message?: string | Error | Class<Error> | RegExp): void;\n+ toThrowError(message?: string | Error | Class<Error> | RegExp): void;\n+ \/**\n+ * Use .toThrowErrorMatchingSnapshot to test that a function throws a error\n+ * matching the most recent snapshot when it is called.\n+ *\/\n+ toThrowErrorMatchingSnapshot(): void;\n+ toThrowErrorMatchingInlineSnapshot(snapshot?: string): void;\n+}\n+\n+type JestObjectType = {\n+ \/**\n+ * Disables automatic mocking in the module loader.\n+ *\n+ * After this method is called, all `require()`s will return the real\n+ * versions of each module (rather than a mocked version).\n+ *\/\n+ disableAutomock(): JestObjectType,\n+ \/**\n+ * An un-hoisted version of disableAutomock\n+ *\/\n+ autoMockOff(): JestObjectType,\n+ \/**\n+ * Enables automatic mocking in the module loader.\n+ *\/\n+ enableAutomock(): JestObjectType,\n+ \/**\n+ * An un-hoisted version of enableAutomock\n+ *\/\n+ autoMockOn(): JestObjectType,\n+ \/**\n+ * Clears the mock.calls and mock.instances properties of all mocks.\n+ * Equivalent to calling .mockClear() on every mocked function.\n+ *\/\n+ clearAllMocks(): JestObjectType,\n+ \/**\n+ * Resets the state of all mocks. Equivalent to calling .mockReset() on every\n+ * mocked function.\n+ *\/\n+ resetAllMocks(): JestObjectType,\n+ \/**\n+ * Restores all mocks back to their original value.\n+ *\/\n+ restoreAllMocks(): JestObjectType,\n+ \/**\n+ * Removes any pending timers from the timer system.\n+ *\/\n+ clearAllTimers(): void,\n+ \/**\n+ * Returns the number of fake timers still left to run.\n+ *\/\n+ getTimerCount(): number,\n+ \/**\n+ * The same as `mock` but not moved to the top of the expectation by\n+ * babel-jest.\n+ *\/\n+ doMock(moduleName: string, moduleFactory?: any): JestObjectType,\n+ \/**\n+ * The same as `unmock` but not moved to the top of the expectation by\n+ * babel-jest.\n+ *\/\n+ dontMock(moduleName: string): JestObjectType,\n+ \/**\n+ * Returns a new, unused mock function. Optionally takes a mock\n+ * implementation.\n+ *\/\n+ fn<TArguments: $ReadOnlyArray<*>, TReturn>(\n+ implementation?: (...args: TArguments) => TReturn\n+ ): JestMockFn<TArguments, TReturn>,\n+ \/**\n+ * Determines if the given function is a mocked function.\n+ *\/\n+ isMockFunction(fn: Function): boolean,\n+ \/**\n+ * Given the name of a module, use the automatic mocking system to generate a\n+ * mocked version of the module for you.\n+ *\/\n+ genMockFromModule(moduleName: string): any,\n+ \/**\n+ * Mocks a module with an auto-mocked version when it is being required.\n+ *\n+ * The second argument can be used to specify an explicit module factory that\n+ * is being run instead of using Jest's automocking feature.\n+ *\n+ * The third argument can be used to create virtual mocks -- mocks of modules\n+ * that don't exist anywhere in the system.\n+ *\/\n+ mock(\n+ moduleName: string,\n+ moduleFactory?: any,\n+ options?: Object\n+ ): JestObjectType,\n+ \/**\n+ * Returns the actual module instead of a mock, bypassing all checks on\n+ * whether the module should receive a mock implementation or not.\n+ *\/\n+ requireActual(moduleName: string): any,\n+ \/**\n+ * Returns a mock module instead of the actual module, bypassing all checks\n+ * on whether the module should be required normally or not.\n+ *\/\n+ requireMock(moduleName: string): any,\n+ \/**\n+ * Resets the module registry - the cache of all required modules. This is\n+ * useful to isolate modules where local state might conflict between tests.\n+ *\/\n+ resetModules(): JestObjectType,\n+\n+ \/**\n+ * Creates a sandbox registry for the modules that are loaded inside the\n+ * callback function. This is useful to isolate specific modules for every\n+ * test so that local module state doesn't conflict between tests.\n+ *\/\n+ isolateModules(fn: () => void): JestObjectType,\n+\n+ \/**\n+ * Exhausts the micro-task queue (usually interfaced in node via\n+ * process.nextTick).\n+ *\/\n+ runAllTicks(): void,\n+ \/**\n+ * Exhausts the macro-task queue (i.e., all tasks queued by setTimeout(),\n+ * setInterval(), and setImmediate()).\n+ *\/\n+ runAllTimers(): void,\n+ \/**\n+ * Exhausts all tasks queued by setImmediate().\n+ *\/\n+ runAllImmediates(): void,\n+ \/**\n+ * Executes only the macro task queue (i.e. all tasks queued by setTimeout()\n+ * or setInterval() and setImmediate()).\n+ *\/\n+ advanceTimersByTime(msToRun: number): void,\n+ \/**\n+ * Executes only the macro task queue (i.e. all tasks queued by setTimeout()\n+ * or setInterval() and setImmediate()).\n+ *\n+ * Renamed to `advanceTimersByTime`.\n+ *\/\n+ runTimersToTime(msToRun: number): void,\n+ \/**\n+ * Executes only the macro-tasks that are currently pending (i.e., only the\n+ * tasks that have been queued by setTimeout() or setInterval() up to this\n+ * point)\n+ *\/\n+ runOnlyPendingTimers(): void,\n+ \/**\n+ * Explicitly supplies the mock object that the module system should return\n+ * for the specified module. Note: It is recommended to use jest.mock()\n+ * instead.\n+ *\/\n+ setMock(moduleName: string, moduleExports: any): JestObjectType,\n+ \/**\n+ * Indicates that the module system should never return a mocked version of\n+ * the specified module from require() (e.g. that it should always return the\n+ * real module).\n+ *\/\n+ unmock(moduleName: string): JestObjectType,\n+ \/**\n+ * Instructs Jest to use fake versions of the standard timer functions\n+ * (setTimeout, setInterval, clearTimeout, clearInterval, nextTick,\n+ * setImmediate and clearImmediate).\n+ *\/\n+ useFakeTimers(): JestObjectType,\n+ \/**\n+ * Instructs Jest to use the real versions of the standard timer functions.\n+ *\/\n+ useRealTimers(): JestObjectType,\n+ \/**\n+ * Creates a mock function similar to jest.fn but also tracks calls to\n+ * object[methodName].\n+ *\/\n+ spyOn(\n+ object: Object,\n+ methodName: string,\n+ accessType?: 'get' | 'set'\n+ ): JestMockFn<any, any>,\n+ \/**\n+ * Set the default timeout interval for tests and before\/after hooks in milliseconds.\n+ * Note: The default timeout interval is 5 seconds if this method is not called.\n+ *\/\n+ setTimeout(timeout: number): JestObjectType,\n+};\n+\n+type JestSpyType = {\n+ calls: JestCallsType,\n+};\n+\n+\/** Runs this function after every test inside this context *\/\n+declare function afterEach(\n+ fn: (done: () => void) => ?Promise<mixed>,\n+ timeout?: number\n+): void;\n+\/** Runs this function before every test inside this context *\/\n+declare function beforeEach(\n+ fn: (done: () => void) => ?Promise<mixed>,\n+ timeout?: number\n+): void;\n+\/** Runs this function after all tests have finished inside this context *\/\n+declare function afterAll(\n+ fn: (done: () => void) => ?Promise<mixed>,\n+ timeout?: number\n+): void;\n+\/** Runs this function before any tests have started inside this context *\/\n+declare function beforeAll(\n+ fn: (done: () => void) => ?Promise<mixed>,\n+ timeout?: number\n+): void;\n+\n+\/** A context for grouping tests together *\/\n+declare var describe: {\n+ \/**\n+ * Creates a block that groups together several related tests in one \"test suite\"\n+ *\/\n+ (name: JestTestName, fn: () => void): void,\n+\n+ \/**\n+ * Only run this describe block\n+ *\/\n+ only(name: JestTestName, fn: () => void): void,\n+\n+ \/**\n+ * Skip running this describe block\n+ *\/\n+ skip(name: JestTestName, fn: () => void): void,\n+\n+ \/**\n+ * each runs this test against array of argument arrays per each run\n+ *\n+ * @param {table} table of Test\n+ *\/\n+ each(\n+ ...table: Array<Array<mixed> | mixed> | [Array<string>, string]\n+ ): (\n+ name: JestTestName,\n+ fn?: (...args: Array<any>) => ?Promise<mixed>,\n+ timeout?: number\n+ ) => void,\n+};\n+\n+\/** An individual test unit *\/\n+declare var it: {\n+ \/**\n+ * An individual test unit\n+ *\n+ * @param {JestTestName} Name of Test\n+ * @param {Function} Test\n+ * @param {number} Timeout for the test, in milliseconds.\n+ *\/\n+ (\n+ name: JestTestName,\n+ fn?: (done: () => void) => ?Promise<mixed>,\n+ timeout?: number\n+ ): void,\n+\n+ \/**\n+ * Only run this test\n+ *\n+ * @param {JestTestName} Name of Test\n+ * @param {Function} Test\n+ * @param {number} Timeout for the test, in milliseconds.\n+ *\/\n+ only(\n+ name: JestTestName,\n+ fn?: (done: () => void) => ?Promise<mixed>,\n+ timeout?: number\n+ ): {\n+ each(\n+ ...table: Array<Array<mixed> | mixed> | [Array<string>, string]\n+ ): (\n+ name: JestTestName,\n+ fn?: (...args: Array<any>) => ?Promise<mixed>,\n+ timeout?: number\n+ ) => void,\n+ },\n+\n+ \/**\n+ * Skip running this test\n+ *\n+ * @param {JestTestName} Name of Test\n+ * @param {Function} Test\n+ * @param {number} Timeout for the test, in milliseconds.\n+ *\/\n+ skip(\n+ name: JestTestName,\n+ fn?: (done: () => void) => ?Promise<mixed>,\n+ timeout?: number\n+ ): void,\n+\n+ \/**\n+ * Highlight planned tests in the summary output\n+ *\n+ * @param {String} Name of Test to do\n+ *\/\n+ todo(name: string): void,\n+\n+ \/**\n+ * Run the test concurrently\n+ *\n+ * @param {JestTestName} Name of Test\n+ * @param {Function} Test\n+ * @param {number} Timeout for the test, in milliseconds.\n+ *\/\n+ concurrent(\n+ name: JestTestName,\n+ fn?: (done: () => void) => ?Promise<mixed>,\n+ timeout?: number\n+ ): void,\n+\n+ \/**\n+ * each runs this test against array of argument arrays per each run\n+ *\n+ * @param {table} table of Test\n+ *\/\n+ each(\n+ ...table: Array<Array<mixed> | mixed> | [Array<string>, string]\n+ ): (\n+ name: JestTestName,\n+ fn?: (...args: Array<any>) => ?Promise<mixed>,\n+ timeout?: number\n+ ) => void,\n+};\n+\n+declare function fit(\n+ name: JestTestName,\n+ fn: (done: () => void) => ?Promise<mixed>,\n+ timeout?: number\n+): void;\n+\/** An individual test unit *\/\n+declare var test: typeof it;\n+\/** A disabled group of tests *\/\n+declare var xdescribe: typeof describe;\n+\/** A focused group of tests *\/\n+declare var fdescribe: typeof describe;\n+\/** A disabled individual test *\/\n+declare var xit: typeof it;\n+\/** A disabled individual test *\/\n+declare var xtest: typeof it;\n+\n+type JestPrettyFormatColors = {\n+ comment: { close: string, open: string },\n+ content: { close: string, open: string },\n+ prop: { close: string, open: string },\n+ tag: { close: string, open: string },\n+ value: { close: string, open: string },\n+};\n+\n+type JestPrettyFormatIndent = string => string;\n+\/\/ eslint-disable-next-line no-unused-vars\n+type JestPrettyFormatRefs = Array<any>;\n+type JestPrettyFormatPrint = any => string;\n+\/\/ eslint-disable-next-line no-unused-vars\n+type JestPrettyFormatStringOrNull = string | null;\n+\n+type JestPrettyFormatOptions = {|\n+ callToJSON: boolean,\n+ edgeSpacing: string,\n+ escapeRegex: boolean,\n+ highlight: boolean,\n+ indent: number,\n+ maxDepth: number,\n+ min: boolean,\n+ \/\/ eslint-disable-next-line no-use-before-define\n+ plugins: JestPrettyFormatPlugins,\n+ printFunctionName: boolean,\n+ spacing: string,\n+ theme: {|\n+ comment: string,\n+ content: string,\n+ prop: string,\n+ tag: string,\n+ value: string,\n+ |},\n+|};\n+\n+type JestPrettyFormatPlugin = {\n+ print: (\n+ val: any,\n+ serialize: JestPrettyFormatPrint,\n+ indent: JestPrettyFormatIndent,\n+ opts: JestPrettyFormatOptions,\n+ colors: JestPrettyFormatColors\n+ ) => string,\n+ test: any => boolean,\n+};\n+\n+type JestPrettyFormatPlugins = Array<JestPrettyFormatPlugin>;\n+\n+\/** The expect function is used every time you want to test a value *\/\n+declare var expect: {\n+ \/** The object that you want to make assertions against *\/\n+ (\n+ value: any\n+ ): JestExpectType &\n+ JestPromiseType &\n+ EnzymeMatchersType &\n+ DomTestingLibraryType &\n+ JestJQueryMatchersType &\n+ JestStyledComponentsMatchersType &\n+ JestExtendedMatchersType,\n+\n+ \/** Add additional Jasmine matchers to Jest's roster *\/\n+ extend(matchers: { [name: string]: JestMatcher }): void,\n+ \/** Add a module that formats application-specific data structures. *\/\n+ addSnapshotSerializer(pluginModule: JestPrettyFormatPlugin): void,\n+ assertions(expectedAssertions: number): void,\n+ hasAssertions(): void,\n+ any(value: mixed): JestAsymmetricEqualityType,\n+ anything(): any,\n+ arrayContaining(value: Array<mixed>): Array<mixed>,\n+ objectContaining(value: Object): Object,\n+ \/** Matches any received string that contains the exact expected string. *\/\n+ stringContaining(value: string): string,\n+ stringMatching(value: string | RegExp): string,\n+ not: {\n+ arrayContaining: (value: $ReadOnlyArray<mixed>) => Array<mixed>,\n+ objectContaining: (value: {}) => Object,\n+ stringContaining: (value: string) => string,\n+ stringMatching: (value: string | RegExp) => string,\n+ },\n+};\n+\n+\/\/ TODO handle return type\n+\/\/ http:\/\/jasmine.github.io\/2.4\/introduction.html#section-Spies\n+declare function spyOn(value: mixed, method: string): Object;\n+\n+\/** Holds all functions related to manipulating test runner *\/\n+declare var jest: JestObjectType;\n+\n+\/**\n+ * The global Jasmine object, this is generally not exposed as the public API,\n+ * using features inside here could break in later versions of Jest.\n+ *\/\n+declare var jasmine: {\n+ DEFAULT_TIMEOUT_INTERVAL: number,\n+ any(value: mixed): JestAsymmetricEqualityType,\n+ anything(): any,\n+ arrayContaining(value: Array<mixed>): Array<mixed>,\n+ clock(): JestClockType,\n+ createSpy(name: string): JestSpyType,\n+ createSpyObj(\n+ baseName: string,\n+ methodNames: Array<string>\n+ ): { [methodName: string]: JestSpyType },\n+ objectContaining(value: Object): Object,\n+ stringMatching(value: string): string,\n+};\ndiff --git a\/flow-typed\/npm\/react-test-renderer_v16.x.x.js b\/flow-typed\/npm\/react-test-renderer_v16.x.x.js\nnew file mode 100644\nindex 0000000000..67eb20ab75\n--- \/dev\/null\n+++ b\/flow-typed\/npm\/react-test-renderer_v16.x.x.js\n@@ -0,0 +1,81 @@\n+\/\/ flow-typed signature: b6bb53397d83d2d821e258cc73818d1b\n+\/\/ flow-typed version: 9c71eca8ef\/react-test-renderer_v16.x.x\/flow_>=v0.47.x\n+\n+\/\/ Type definitions for react-test-renderer 16.x.x\n+\/\/ Ported from: https:\/\/github.com\/DefinitelyTyped\/DefinitelyTyped\/blob\/master\/types\/react-test-renderer\n+\n+type ReactComponentInstance = React$Component<any>;\n+\n+type ReactTestRendererJSON = {\n+ type: string,\n+ props: { [propName: string]: any },\n+ children: null | ReactTestRendererJSON[],\n+};\n+\n+type ReactTestRendererTree = ReactTestRendererJSON & {\n+ nodeType: 'component' | 'host',\n+ instance: ?ReactComponentInstance,\n+ rendered: null | ReactTestRendererTree,\n+};\n+\n+type ReactTestInstance = {\n+ instance: ?ReactComponentInstance,\n+ type: string,\n+ props: { [propName: string]: any },\n+ parent: null | ReactTestInstance,\n+ children: Array<ReactTestInstance | string>,\n+\n+ find(predicate: (node: ReactTestInstance) => boolean): ReactTestInstance,\n+ findByType(type: React$ElementType): ReactTestInstance,\n+ findByProps(props: { [propName: string]: any }): ReactTestInstance,\n+\n+ findAll(\n+ predicate: (node: ReactTestInstance) => boolean,\n+ options?: { deep: boolean }\n+ ): ReactTestInstance[],\n+ findAllByType(\n+ type: React$ElementType,\n+ options?: { deep: boolean }\n+ ): ReactTestInstance[],\n+ findAllByProps(\n+ props: { [propName: string]: any },\n+ options?: { deep: boolean }\n+ ): ReactTestInstance[],\n+};\n+\n+type TestRendererOptions = {\n+ createNodeMock(element: React$Element<any>): any,\n+};\n+\n+declare module 'react-test-renderer' {\n+ declare export type ReactTestRenderer = {\n+ toJSON(): null | ReactTestRendererJSON,\n+ toTree(): null | ReactTestRendererTree,\n+ unmount(nextElement?: React$Element<any>): void,\n+ update(nextElement: React$Element<any>): void,\n+ getInstance(): ?ReactComponentInstance,\n+ root: ReactTestInstance,\n+ };\n+\n+ declare type Thenable = {\n+ then(resolve: () => mixed, reject?: () => mixed): mixed,\n+ };\n+\n+ declare function create(\n+ nextElement: React$Element<any>,\n+ options?: TestRendererOptions\n+ ): ReactTestRenderer;\n+\n+ declare function act(callback: () => ?Thenable): Thenable;\n+}\n+\n+declare module 'react-test-renderer\/shallow' {\n+ declare export default class ShallowRenderer {\n+ static createRenderer(): ShallowRenderer;\n+ getMountedInstance(): ReactTestInstance;\n+ getRenderOutput<E: React$Element<any>>(): E;\n+ getRenderOutput(): React$Element<any>;\n+ render(element: React$Element<any>, context?: any): void;\n+ unmount(): void;\n+ }\n+}\ndiff --git a\/flow.js b\/flow.js\nnew file mode 100644\nindex 0000000000..dc0c575900\n--- \/dev\/null\n+++ b\/flow.js\n@@ -0,0 +1,28 @@\n+\/\/ @flow\n+\n+declare module 'events' {\n+ declare class EventEmitter<Events: Object> {\n+ addListener<Event: $Keys<Events>>(\n+ event: Event,\n+ listener: (...$ElementType<Events, Event>) => any\n+ ): void;\n+ emit: <Event: $Keys<Events>>(\n+ event: Event,\n+ ...$ElementType<Events, Event>\n+ ) => void;\n+ removeListener(event: $Keys<Events>, listener: Function): void;\n+ removeAllListeners(event?: $Keys<Events>): void;\n+ }\n+\n+ declare export default typeof EventEmitter;\n+}\n+\n+declare var __DEV__: boolean;\n+declare var __TEST__: boolean;\n+\n+declare var jasmine: {|\n+ getEnv: () => {|\n+ afterEach: (callback: Function) => void,\n+ beforeEach: (callback: Function) => void,\n+ |},\n+|};\ndiff --git a\/package.json b\/package.json\nnew file mode 100644\nindex 0000000000..c0c5ffadc0\n--- \/dev\/null\n+++ b\/package.json\n@@ -0,0 +1,164 @@\n+{\n+ \"version\": \"4.0.0\",\n+ \"repository\": \"bvaughn\/react-devtools-experimental\",\n+ \"license\": \"MIT\",\n+ \"private\": true,\n+ \"workspaces\": [\n+ \"packages\/*\"\n+ ],\n+ \"jest\": {\n+ \"modulePathIgnorePatterns\": [\n+ \"<rootDir>\/shells\"\n+ ],\n+ \"modulePaths\": [\n+ \"<rootDir>\"\n+ ],\n+ \"moduleNameMapper\": {\n+ \"^src\/(.*)$\": \"<rootDir>\/src\/$1\",\n+ \"\\\\.css$\": \"<rootDir>\/src\/__tests__\/__mocks__\/cssMock.js\"\n+ },\n+ \"setupFiles\": [\n+ \"<rootDir>\/src\/__tests__\/setupEnv\"\n+ ],\n+ \"setupFilesAfterEnv\": [\n+ \"<rootDir>\/src\/__tests__\/setupTests\"\n+ ],\n+ \"snapshotSerializers\": [\n+ \"<rootDir>\/src\/__tests__\/inspectedElementSerializer\",\n+ \"<rootDir>\/src\/__tests__\/storeSerializer\"\n+ ],\n+ \"testMatch\": [\n+ \"**\/__tests__\/**\/*-test.js\"\n+ ]\n+ },\n+ \"scripts\": {\n+ \"build:core:backend\": \"cd .\/packages\/react-devtools-core && yarn build:backend\",\n+ \"build:core:standalone\": \"cd .\/packages\/react-devtools-core && yarn build:standalone\",\n+ \"build:core\": \"cd .\/packages\/react-devtools-core && yarn build\",\n+ \"build:inline\": \"cd .\/packages\/react-devtools-inline && yarn build\",\n+ \"build:demo\": \"cd .\/shells\/dev && cross-env NODE_ENV=development cross-env TARGET=remote webpack --config webpack.config.js\",\n+ \"build:extension\": \"cross-env NODE_ENV=production yarn run build:extension:chrome && yarn run build:extension:firefox\",\n+ \"build:extension:dev\": \"cross-env NODE_ENV=development yarn run build:extension:chrome && yarn run build:extension:firefox\",\n+ \"build:extension:chrome\": \"cross-env NODE_ENV=production node .\/shells\/browser\/chrome\/build\",\n+ \"build:extension:chrome:crx\": \"cross-env NODE_ENV=production node .\/shells\/browser\/chrome\/build --crx\",\n+ \"build:extension:chrome:dev\": \"cross-env NODE_ENV=development node .\/shells\/browser\/chrome\/build\",\n+ \"build:extension:firefox\": \"cross-env NODE_ENV=production node .\/shells\/browser\/firefox\/build\",\n+ \"build:extension:firefox:dev\": \"cross-env NODE_ENV=development node .\/shells\/browser\/firefox\/build\",\n+ \"build:standalone\": \"cd packages\/react-devtools-core && yarn run build\",\n+ \"deploy\": \"yarn run deploy:demo && yarn run deploy:chrome && yarn run deploy:firefox\",\n+ \"deploy:demo\": \"yarn run build:demo && cd shells\/dev\/ && now deploy && now alias react-devtools-experimental\",\n+ \"deploy:chrome\": \"node .\/shells\/browser\/chrome\/deploy\",\n+ \"deploy:firefox\": \"node .\/shells\/browser\/firefox\/deploy\",\n+ \"linc\": \"lint-staged\",\n+ \"lint\": \"eslint '**\/*.js'\",\n+ \"lint:ci\": \"eslint '**\/*.js' --max-warnings 0\",\n+ \"precommit\": \"lint-staged\",\n+ \"prettier\": \"prettier --write '**\/*.{js,json,css}'\",\n+ \"prettier:ci\": \"prettier --check '**\/*.{js,json,css}'\",\n+ \"start\": \"cd .\/shells\/dev && cross-env NODE_ENV=development cross-env TARGET=local webpack-dev-server --open\",\n+ \"start:core:backend\": \"cd .\/packages\/react-devtools-core && yarn start:backend\",\n+ \"start:core:standalone\": \"cd .\/packages\/react-devtools-core && yarn start:standalone\",\n+ \"start:electron\": \"cd .\/packages\/react-devtools && node bin.js\",\n+ \"start:prod\": \"cd .\/shells\/dev && cross-env NODE_ENV=production cross-env TARGET=local webpack-dev-server --open\",\n+ \"test\": \"jest\",\n+ \"test-debug\": \"node --inspect-brk node_modules\/.bin\/jest --runInBand\",\n+ \"test:chrome\": \"node .\/shells\/browser\/chrome\/test\",\n+ \"test:firefox\": \"node .\/shells\/browser\/firefox\/test\",\n+ \"test:standalone\": \"cd packages\/react-devtools && yarn start\",\n+ \"typecheck\": \"flow check --show-all-errors\"\n+ },\n+ \"devEngines\": {\n+ \"node\": \"10.x || 11.x\"\n+ },\n+ \"lint-staged\": {\n+ \"{shells,src}\/**\/*.{js,json,css}\": [\n+ \"prettier --write\",\n+ \"git add\"\n+ ],\n+ \"**\/*.js\": \"eslint --max-warnings 0\"\n+ },\n+ \"dependencies\": {\n+ \"@babel\/core\": \"^7.1.6\",\n+ \"@babel\/plugin-proposal-class-properties\": \"^7.1.0\",\n+ \"@babel\/plugin-transform-flow-strip-types\": \"^7.1.6\",\n+ \"@babel\/plugin-transform-react-jsx-source\": \"^7.2.0\",\n+ \"@babel\/preset-env\": \"^7.1.6\",\n+ \"@babel\/preset-flow\": \"^7.0.0\",\n+ \"@babel\/preset-react\": \"^7.0.0\",\n+ \"@reach\/menu-button\": \"^0.1.17\",\n+ \"@reach\/tooltip\": \"^0.2.2\",\n+ \"archiver\": \"^3.0.0\",\n+ \"babel-core\": \"^7.0.0-bridge\",\n+ \"babel-eslint\": \"^9.0.0\",\n+ \"babel-jest\": \"^24.7.1\",\n+ \"babel-loader\": \"^8.0.4\",\n+ \"child-process-promise\": \"^2.2.1\",\n+ \"chrome-launch\": \"^1.1.4\",\n+ \"classnames\": \"2.2.1\",\n+ \"cli-spinners\": \"^1.0.0\",\n+ \"clipboard-js\": \"^0.3.6\",\n+ \"cross-env\": \"^5.2.0\",\n+ \"crx\": \"^5.0.0\",\n+ \"css-loader\": \"^1.0.1\",\n+ \"error-stack-parser\": \"^2.0.2\",\n+ \"es6-symbol\": \"3.0.2\",\n+ \"escape-string-regexp\": \"^1.0.5\",\n+ \"eslint\": \"^4.19.1\",\n+ \"eslint-config-prettier\": \"^2.9.0\",\n+ \"eslint-config-react-app\": \"^2.1.0\",\n+ \"eslint-config-standard\": \"^11.0.0\",\n+ \"eslint-config-standard-react\": \"^6.0.0\",\n+ \"eslint-plugin-flowtype\": \"^2.47.1\",\n+ \"eslint-plugin-import\": \"^2.11.0\",\n+ \"eslint-plugin-jsx-a11y\": \"^5\",\n+ \"eslint-plugin-node\": \"^6.0.1\",\n+ \"eslint-plugin-prettier\": \"^2.6.0\",\n+ \"eslint-plugin-promise\": \"^3.7.0\",\n+ \"eslint-plugin-react\": \"^7.7.0\",\n+ \"eslint-plugin-react-hooks\": \"^1.6.0\",\n+ \"eslint-plugin-standard\": \"^3.0.1\",\n+ \"events\": \"^3.0.0\",\n+ \"fbjs\": \"0.5.1\",\n+ \"fbjs-scripts\": \"0.7.0\",\n+ \"firefox-profile\": \"^1.0.2\",\n+ \"flow-bin\": \"^0.103.0\",\n+ \"fs-extra\": \"^3.0.1\",\n+ \"gh-pages\": \"^1.0.0\",\n+ \"immutable\": \"3.7.6\",\n+ \"jest\": \"^24.7.1\",\n+ \"lerna\": \"^2.8.0\",\n+ \"lint-staged\": \"^7.0.5\",\n+ \"local-storage-fallback\": \"^4.1.1\",\n+ \"lodash.throttle\": \"^4.1.1\",\n+ \"log-update\": \"^2.0.0\",\n+ \"lru-cache\": \"^4.1.3\",\n+ \"memoize-one\": \"^3.1.1\",\n+ \"node-libs-browser\": \"0.5.3\",\n+ \"nullthrows\": \"^1.0.0\",\n+ \"object-assign\": \"4.0.1\",\n+ \"opener\": \"^1.5.1\",\n+ \"prettier\": \"^1.16.4\",\n+ \"prop-types\": \"^15.6.2\",\n+ \"raw-loader\": \"^3.1.0\",\n+ \"react\": \"^0.0.0-424099da6\",\n+ \"react-15\": \"npm:react@^15\",\n+ \"react-color\": \"^2.11.7\",\n+ \"react-dom\": \"^0.0.0-424099da6\",\n+ \"react-dom-15\": \"npm:react-dom@^15\",\n+ \"react-is\": \"0.0.0-424099da6\",\n+ \"react-native-web\": \"^0.11.5\",\n+ \"react-test-renderer\": \"^0.0.0-424099da6\",\n+ \"react-virtualized-auto-sizer\": \"^1.0.2\",\n+ \"request-promise\": \"^4.2.4\",\n+ \"rimraf\": \"^2.6.3\",\n+ \"scheduler\": \"^0.0.0-424099da6\",\n+ \"semver\": \"^5.5.1\",\n+ \"serve-static\": \"^1.14.1\",\n+ \"style-loader\": \"^0.23.1\",\n+ \"web-ext\": \"^3.0.0\",\n+ \"webpack\": \"^4.26.0\",\n+ \"webpack-cli\": \"^3.1.2\",\n+ \"webpack-dev-server\": \"^3.3.1\",\n+ \"yargs\": \"^13.2.4\"\n+ }\n+}\ndiff --git a\/packages\/react-devtools-core\/README.md b\/packages\/react-devtools-core\/README.md\nnew file mode 100644\nindex 0000000000..35615b3074\n--- \/dev\/null\n+++ b\/packages\/react-devtools-core\/README.md\n@@ -0,0 +1,44 @@\n+# `react-devtools-core`\n+\n+A standalone React DevTools implementation.\n+\n+This is a low-level package. If you're looking for the Electron app you can run, **use `react-devtools` package instead.**\n+\n+## API\n+\n+### `react-devtools-core`\n+\n+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:\n+\n+```js\n+const { connectToDevTools } = require(\"react-devtools-core\");\n+connectToDevTools({\n+ \/\/ Config options\n+});\n+\n+```\n+\n+Run `connectToDevTools()` in the same context as React to set up a connection to DevTools. \n+Be sure to run this function *before* importing e.g. `react`, `react-dom`, `react-native`.\n+\n+The `options` object may contain:\n+* `host: string` (defaults to \"localhost\") - Websocket will connect to this host.\n+* `port: number` (defaults to `8097`) - Websocket will connect to this port.\n+* `websocket: Websocket` - Custom websocked to use. Overrides `host` and `port` settings if provided.\n+* `resolveNativeStyle: (style: number) => ?Object` - Used by the React Native style plug-in.\n+* `isAppActive: () => boolean` - If provided, DevTools will poll this method and wait until it returns true before connecting to React.\n+\n+## `react-devtools-core\/standalone`\n+\n+Renders the DevTools interface into a DOM node.\n+\n+```js\n+require(\"react-devtools-core\/standalone\")\n+ .setContentDOMNode(document.getElementById(\"container\"))\n+ .setStatusListener(status => {\n+ \/\/ This callback is optional...\n+ })\n+ .startServer(port);\n+```\n+\n+Reference the `react-devtools` package for a complete integration example.\ndiff --git a\/packages\/react-devtools-core\/backend.js b\/packages\/react-devtools-core\/backend.js\nnew file mode 100644\nindex 0000000000..2c2a32d451\n--- \/dev\/null\n+++ b\/packages\/react-devtools-core\/backend.js\n@@ -0,0 +1 @@\n+module.exports = require('.\/dist\/backend');\ndiff --git a\/packages\/react-devtools-core\/package.json b\/packages\/react-devtools-core\/package.json\nnew file mode 100644\nindex 0000000000..30b606d728\n--- \/dev\/null\n+++ b\/packages\/react-devtools-core\/package.json\n@@ -0,0 +1,31 @@\n+{\n+ \"name\": \"react-devtools-core\",\n+ \"version\": \"4.0.0-alpha.9\",\n+ \"description\": \"Use react-devtools outside of the browser\",\n+ \"license\": \"MIT\",\n+ \"main\": \".\/dist\/backend.js\",\n+ \"repository\": {\n+ \"url\": \"https:\/\/github.com\/bvaughn\/react-devtools-experimental.git\",\n+ \"type\": \"git\"\n+ },\n+ \"files\": [\n+ \"dist\",\n+ \"backend.js\",\n+ \"standalone.js\"\n+ ],\n+ \"scripts\": {\n+ \"build\": \"yarn build:backend && yarn build:standalone\",\n+ \"build:backend\": \"cross-env NODE_ENV=production webpack --config webpack.backend.js\",\n+ \"build:standalone\": \"cross-env NODE_ENV=production webpack --config webpack.standalone.js\",\n+ \"prepublish\": \"yarn run build\",\n+ \"start:backend\": \"cross-env NODE_ENV=development webpack --config webpack.backend.js --watch\",\n+ \"start:standalone\": \"cross-env NODE_ENV=development webpack --config webpack.standalone.js --watch\"\n+ },\n+ \"dependencies\": {\n+ \"shell-quote\": \"^1.6.1\",\n+ \"ws\": \"^7\"\n+ },\n+ \"devDependencies\": {\n+ \"cross-env\": \"^3.1.4\"\n+ }\n+}\ndiff --git a\/packages\/react-devtools-core\/src\/backend.js b\/packages\/react-devtools-core\/src\/backend.js\nnew file mode 100644\nindex 0000000000..71dac50aa7\n--- \/dev\/null\n+++ b\/packages\/react-devtools-core\/src\/backend.js\n@@ -0,0 +1,270 @@\n+\/\/ @flow\n+\n+import Agent from 'src\/backend\/agent';\n+import Bridge from 'src\/bridge';\n+import { installHook } from 'src\/hook';\n+import { initBackend } from 'src\/backend';\n+import { __DEBUG__ } from 'src\/constants';\n+import setupNativeStyleEditor from 'src\/backend\/NativeStyleEditor\/setupNativeStyleEditor';\n+import { getDefaultComponentFilters } from 'src\/utils';\n+\n+import type { BackendBridge } from 'src\/bridge';\n+import type { ComponentFilter } from 'src\/types';\n+import type { DevToolsHook } from 'src\/backend\/types';\n+import type { ResolveNativeStyle } from 'src\/backend\/NativeStyleEditor\/setupNativeStyleEditor';\n+\n+type ConnectOptions = {\n+ host?: string,\n+ nativeStyleEditorValidAttributes?: $ReadOnlyArray<string>,\n+ port?: number,\n+ resolveRNStyle?: ResolveNativeStyle,\n+ isAppActive?: () => boolean,\n+ websocket?: ?WebSocket,\n+};\n+\n+installHook(window);\n+\n+const hook: DevToolsHook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+\n+let savedComponentFilters: Array<ComponentFilter> = getDefaultComponentFilters();\n+\n+function debug(methodName: string, ...args) {\n+ if (__DEBUG__) {\n+ console.log(\n+ `%c[core\/backend] %c${methodName}`,\n+ 'color: teal; font-weight: bold;',\n+ 'font-weight: bold;',\n+ ...args\n+ );\n+ }\n+}\n+\n+export function connectToDevTools(options: ?ConnectOptions) {\n+ const {\n+ host = 'localhost',\n+ nativeStyleEditorValidAttributes,\n+ port = 8097,\n+ websocket,\n+ resolveRNStyle = null,\n+ isAppActive = () => true,\n+ } = options || {};\n+\n+ let retryTimeoutID: TimeoutID | null = null;\n+\n+ function scheduleRetry() {\n+ if (retryTimeoutID === null) {\n+ \/\/ Two seconds because RN had issues with quick retries.\n+ retryTimeoutID = setTimeout(() => connectToDevTools(options), 2000);\n+ }\n+ }\n+\n+ if (!isAppActive()) {\n+ \/\/ If the app is in background, maybe retry later.\n+ \/\/ Don't actually attempt to connect until we're in foreground.\n+ scheduleRetry();\n+ return;\n+ }\n+\n+ let bridge: BackendBridge | null = null;\n+\n+ const messageListeners = [];\n+ const uri = 'ws:\/\/' + host + ':' + port;\n+\n+ \/\/ If existing websocket is passed, use it.\n+ \/\/ This is necessary to support our custom integrations.\n+ \/\/ See D6251744.\n+ const ws = websocket ? websocket : new window.WebSocket(uri);\n+ ws.onclose = handleClose;\n+ ws.onerror = handleFailed;\n+ ws.onmessage = handleMessage;\n+ ws.onopen = function() {\n+ bridge = new Bridge({\n+ listen(fn) {\n+ messageListeners.push(fn);\n+ return () => {\n+ const index = messageListeners.indexOf(fn);\n+ if (index >= 0) {\n+ messageListeners.splice(index, 1);\n+ }\n+ };\n+ },\n+ send(event: string, payload: any, transferable?: Array<any>) {\n+ if (ws.readyState === ws.OPEN) {\n+ if (__DEBUG__) {\n+ debug('wall.send()', event, payload);\n+ }\n+\n+ ws.send(JSON.stringify({ event, payload }));\n+ } else {\n+ if (__DEBUG__) {\n+ debug(\n+ 'wall.send()',\n+ 'Shutting down bridge because of closed WebSocket connection'\n+ );\n+ }\n+\n+ if (bridge !== null) {\n+ bridge.emit('shutdown');\n+ }\n+\n+ scheduleRetry();\n+ }\n+ },\n+ });\n+ bridge.addListener(\n+ 'inspectElement',\n+ ({ id, rendererID }: { id: number, rendererID: number }) => {\n+ const renderer = agent.rendererInterfaces[rendererID];\n+ if (renderer != null) {\n+ \/\/ Send event for RN to highlight.\n+ const nodes: ?Array<HTMLElement> = renderer.findNativeNodesForFiberID(\n+ id\n+ );\n+ if (nodes != null && nodes[0] != null) {\n+ agent.emit('showNativeHighlight', nodes[0]);\n+ }\n+ }\n+ }\n+ );\n+ bridge.addListener(\n+ 'updateComponentFilters',\n+ (componentFilters: Array<ComponentFilter>) => {\n+ \/\/ Save filter changes in memory, in case DevTools is reloaded.\n+ \/\/ In that case, the renderer will already be using the updated values.\n+ \/\/ We'll lose these in between backend reloads but that can't be helped.\n+ savedComponentFilters = componentFilters;\n+ }\n+ );\n+\n+ \/\/ The renderer interface doesn't read saved component filters directly,\n+ \/\/ because they are generally stored in localStorage within the context of the extension.\n+ \/\/ Because of this it relies on the extension to pass filters.\n+ \/\/ In the case of the standalone DevTools being used with a website,\n+ \/\/ saved filters are injected along with the backend script tag so we shouldn't override them here.\n+ \/\/ This injection strategy doesn't work for React Native though.\n+ \/\/ Ideally the backend would save the filters itself, but RN doesn't provide a sync storage solution.\n+ \/\/ So for now we just fall back to using the default filters...\n+ if (window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ == null) {\n+ bridge.send('overrideComponentFilters', savedComponentFilters);\n+ }\n+\n+ \/\/ TODO (npm-packages) Warn if \"isBackendStorageAPISupported\"\n+ const agent = new Agent(bridge);\n+ agent.addListener('shutdown', () => {\n+ \/\/ If we received 'shutdown' from `agent`, we assume the `bridge` is already shutting down,\n+ \/\/ and that caused the 'shutdown' event on the `agent`, so we don't need to call `bridge.shutdown()` here.\n+ hook.emit('shutdown');\n+ });\n+\n+ initBackend(hook, agent, window);\n+\n+ \/\/ Setup React Native style editor if the environment supports it.\n+ if (resolveRNStyle != null || hook.resolveRNStyle != null) {\n+ setupNativeStyleEditor(\n+ bridge,\n+ agent,\n+ ((resolveRNStyle || hook.resolveRNStyle: any): ResolveNativeStyle),\n+ nativeStyleEditorValidAttributes ||\n+ hook.nativeStyleEditorValidAttributes ||\n+ null\n+ );\n+ } else {\n+ \/\/ Otherwise listen to detect if the environment later supports it.\n+ \/\/ For example, Flipper does not eagerly inject these values.\n+ \/\/ Instead it relies on the React Native Inspector to lazily inject them.\n+ let lazyResolveRNStyle;\n+ let lazyNativeStyleEditorValidAttributes;\n+\n+ const initAfterTick = () => {\n+ if (bridge !== null) {\n+ setupNativeStyleEditor(\n+ bridge,\n+ agent,\n+ lazyResolveRNStyle,\n+ lazyNativeStyleEditorValidAttributes\n+ );\n+ }\n+ };\n+\n+ Object.defineProperty(\n+ hook,\n+ 'resolveRNStyle',\n+ ({\n+ enumerable: false,\n+ get() {\n+ return lazyResolveRNStyle;\n+ },\n+ set(value) {\n+ lazyResolveRNStyle = value;\n+ initAfterTick();\n+ },\n+ }: Object)\n+ );\n+ Object.defineProperty(\n+ hook,\n+ 'nativeStyleEditorValidAttributes',\n+ ({\n+ enumerable: false,\n+ get() {\n+ return lazyNativeStyleEditorValidAttributes;\n+ },\n+ set(value) {\n+ lazyNativeStyleEditorValidAttributes = value;\n+ initAfterTick();\n+ },\n+ }: Object)\n+ );\n+ }\n+ };\n+\n+ function handleClose() {\n+ if (__DEBUG__) {\n+ debug('WebSocket.onclose');\n+ }\n+\n+ if (bridge !== null) {\n+ bridge.emit('shutdown');\n+ }\n+\n+ scheduleRetry();\n+ }\n+\n+ function handleFailed() {\n+ if (__DEBUG__) {\n+ debug('WebSocket.onerror');\n+ }\n+\n+ scheduleRetry();\n+ }\n+\n+ function handleMessage(event) {\n+ let data;\n+ try {\n+ if (typeof event.data === 'string') {\n+ data = JSON.parse(event.data);\n+ if (__DEBUG__) {\n+ debug('WebSocket.onmessage', data);\n+ }\n+ } else {\n+ throw Error();\n+ }\n+ } catch (e) {\n+ console.error(\n+ '[React DevTools] Failed to parse JSON: ' + String(event.data)\n+ );\n+ return;\n+ }\n+ messageListeners.forEach(fn => {\n+ try {\n+ fn(data);\n+ } catch (error) {\n+ \/\/ jsc doesn't play so well with tracebacks that go into eval'd code,\n+ \/\/ so the stack trace here will stop at the `eval()` call. Getting the\n+ \/\/ message that caused the error is the best we can do for now.\n+ console.log('[React DevTools] Error calling listener', data);\n+ console.log('error:', error);\n+ throw error;\n+ }\n+ });\n+ }\n+}\ndiff --git a\/packages\/react-devtools-core\/src\/editor.js b\/packages\/react-devtools-core\/src\/editor.js\nnew file mode 100644\nindex 0000000000..26043f07f6\n--- \/dev\/null\n+++ b\/packages\/react-devtools-core\/src\/editor.js\n@@ -0,0 +1,183 @@\n+\/\/ @flow\n+\n+import { existsSync } from 'fs';\n+import { basename, join, isAbsolute } from 'path';\n+import { execSync, spawn } from 'child_process';\n+import { parse } from 'shell-quote';\n+\n+function isTerminalEditor(editor: string): boolean {\n+ switch (editor) {\n+ case 'vim':\n+ case 'emacs':\n+ case 'nano':\n+ return true;\n+ default:\n+ return false;\n+ }\n+}\n+\n+\/\/ Map from full process name to binary that starts the process\n+\/\/ We can't just re-use full process name, because it will spawn a new instance\n+\/\/ of the app every time\n+const COMMON_EDITORS = {\n+ '\/Applications\/Atom.app\/Contents\/MacOS\/Atom': 'atom',\n+ '\/Applications\/Atom Beta.app\/Contents\/MacOS\/Atom Beta':\n+ '\/Applications\/Atom Beta.app\/Contents\/MacOS\/Atom Beta',\n+ '\/Applications\/Sublime Text.app\/Contents\/MacOS\/Sublime Text':\n+ '\/Applications\/Sublime Text.app\/Contents\/SharedSupport\/bin\/subl',\n+ '\/Applications\/Sublime Text 2.app\/Contents\/MacOS\/Sublime Text 2':\n+ '\/Applications\/Sublime Text 2.app\/Contents\/SharedSupport\/bin\/subl',\n+ '\/Applications\/Visual Studio Code.app\/Contents\/MacOS\/Electron': 'code',\n+};\n+\n+function getArgumentsForLineNumber(\n+ editor: string,\n+ filePath: string,\n+ lineNumber: number\n+): Array<string> {\n+ switch (basename(editor)) {\n+ case 'vim':\n+ case 'mvim':\n+ return [filePath, '+' + lineNumber];\n+ case 'atom':\n+ case 'Atom':\n+ case 'Atom Beta':\n+ case 'subl':\n+ case 'sublime':\n+ case 'wstorm':\n+ case 'appcode':\n+ case 'charm':\n+ case 'idea':\n+ return [filePath + ':' + lineNumber];\n+ case 'joe':\n+ case 'emacs':\n+ case 'emacsclient':\n+ return ['+' + lineNumber, filePath];\n+ case 'rmate':\n+ case 'mate':\n+ case 'mine':\n+ return ['--line', lineNumber + '', filePath];\n+ case 'code':\n+ return ['-g', filePath + ':' + lineNumber];\n+ default:\n+ \/\/ For all others, drop the lineNumber until we have\n+ \/\/ a mapping above, since providing the lineNumber incorrectly\n+ \/\/ can result in errors or confusing behavior.\n+ return [filePath];\n+ }\n+}\n+\n+function guessEditor(): Array<string> {\n+ \/\/ Explicit config always wins\n+ if (process.env.REACT_EDITOR) {\n+ return parse(process.env.REACT_EDITOR);\n+ }\n+\n+ \/\/ Using `ps x` on OSX we can find out which editor is currently running.\n+ \/\/ Potentially we could use similar technique for Windows and Linux\n+ if (process.platform === 'darwin') {\n+ try {\n+ const output = execSync('ps x').toString();\n+ const processNames = Object.keys(COMMON_EDITORS);\n+ for (let i = 0; i < processNames.length; i++) {\n+ const processName = processNames[i];\n+ if (output.indexOf(processName) !== -1) {\n+ return [COMMON_EDITORS[processName]];\n+ }\n+ }\n+ } catch (error) {\n+ \/\/ Ignore...\n+ }\n+ }\n+\n+ \/\/ Last resort, use old skool env vars\n+ if (process.env.VISUAL) {\n+ return [process.env.VISUAL];\n+ } else if (process.env.EDITOR) {\n+ return [process.env.EDITOR];\n+ }\n+\n+ return [];\n+}\n+\n+let childProcess = null;\n+\n+export function getValidFilePath(\n+ maybeRelativePath: string,\n+ absoluteProjectRoots: Array<string>\n+): string | null {\n+ \/\/ We use relative paths at Facebook with deterministic builds.\n+ \/\/ This is why our internal tooling calls React DevTools with absoluteProjectRoots.\n+ \/\/ If the filename is absolute then we don't need to care about this.\n+ if (isAbsolute(maybeRelativePath)) {\n+ if (existsSync(maybeRelativePath)) {\n+ return maybeRelativePath;\n+ }\n+ } else {\n+ for (let i = 0; i < absoluteProjectRoots.length; i++) {\n+ const projectRoot = absoluteProjectRoots[i];\n+ const joinedPath = join(projectRoot, maybeRelativePath);\n+ if (existsSync(joinedPath)) {\n+ return joinedPath;\n+ }\n+ }\n+ }\n+\n+ return null;\n+}\n+\n+export function doesFilePathExist(\n+ maybeRelativePath: string,\n+ absoluteProjectRoots: Array<string>\n+): boolean {\n+ return getValidFilePath(maybeRelativePath, absoluteProjectRoots) !== null;\n+}\n+\n+export function launchEditor(\n+ maybeRelativePath: string,\n+ lineNumber: number,\n+ absoluteProjectRoots: Array<string>\n+) {\n+ const filePath = getValidFilePath(maybeRelativePath, absoluteProjectRoots);\n+ if (filePath === null) {\n+ return;\n+ }\n+\n+ \/\/ Sanitize lineNumber to prevent malicious use on win32\n+ \/\/ via: https:\/\/github.com\/nodejs\/node\/blob\/c3bb4b1aa5e907d489619fb43d233c3336bfc03d\/lib\/child_process.js#L333\n+ if (lineNumber && isNaN(lineNumber)) {\n+ return;\n+ }\n+\n+ let [editor, ...args] = guessEditor();\n+ if (!editor) {\n+ return;\n+ }\n+\n+ if (lineNumber) {\n+ args = args.concat(getArgumentsForLineNumber(editor, filePath, lineNumber));\n+ } else {\n+ args.push(filePath);\n+ }\n+\n+ if (childProcess && isTerminalEditor(editor)) {\n+ \/\/ There's an existing editor process already and it's attached\n+ \/\/ to the terminal, so go kill it. Otherwise two separate editor\n+ \/\/ instances attach to the stdin\/stdout which gets confusing.\n+ childProcess.kill('SIGKILL');\n+ }\n+\n+ if (process.platform === 'win32') {\n+ \/\/ On Windows, launch the editor in a shell because spawn can only\n+ \/\/ launch .exe files.\n+ childProcess = spawn('cmd.exe', ['\/C', editor].concat(args), {\n+ stdio: 'inherit',\n+ });\n+ } else {\n+ childProcess = spawn(editor, args, { stdio: 'inherit' });\n+ }\n+ childProcess.on('error', function() {});\n+ childProcess.on('exit', function(errorCode) {\n+ childProcess = null;\n+ });\n+}\ndiff --git a\/packages\/react-devtools-core\/src\/standalone.js b\/packages\/react-devtools-core\/src\/standalone.js\nnew file mode 100644\nindex 0000000000..c93a3de812\n--- \/dev\/null\n+++ b\/packages\/react-devtools-core\/src\/standalone.js\n@@ -0,0 +1,319 @@\n+\/\/ @flow\n+\n+import { createElement } from 'react';\n+import {\n+ \/\/ $FlowFixMe Flow does not yet know about flushSync()\n+ flushSync,\n+ \/\/ $FlowFixMe Flow does not yet know about createRoot()\n+ unstable_createRoot as createRoot,\n+} from 'react-dom';\n+import Bridge from 'src\/bridge';\n+import Store from 'src\/devtools\/store';\n+import { getSavedComponentFilters, getAppendComponentStack } from 'src\/utils';\n+import { Server } from 'ws';\n+import { existsSync, readFileSync } from 'fs';\n+import { installHook } from 'src\/hook';\n+import DevTools from 'src\/devtools\/views\/DevTools';\n+import { doesFilePathExist, launchEditor } from '.\/editor';\n+import { __DEBUG__ } from 'src\/constants';\n+\n+import type { FrontendBridge } from 'src\/bridge';\n+import type { InspectedElement } from 'src\/devtools\/views\/Components\/types';\n+\n+installHook(window);\n+\n+export type StatusListener = (message: string) => void;\n+\n+let node: HTMLElement = ((null: any): HTMLElement);\n+let nodeWaitingToConnectHTML: string = '';\n+let projectRoots: Array<string> = [];\n+let statusListener: StatusListener = (message: string) => {};\n+\n+\/\/ Unlike browser extension users, people using the standalone have actively installed version 4,\n+\/\/ So we probably don't need to show them a changelog notice.\n+\/\/ We should give embedded users (e.g. Nuclide, Sonar) a way of showing this dialog though.\n+let showWelcomeToTheNewDevToolsDialog: boolean = false;\n+\n+function setContentDOMNode(value: HTMLElement) {\n+ node = value;\n+\n+ \/\/ Save so we can restore the exact waiting message between sessions.\n+ nodeWaitingToConnectHTML = node.innerHTML;\n+\n+ return DevtoolsUI;\n+}\n+\n+function setProjectRoots(value: Array<string>) {\n+ projectRoots = value;\n+}\n+\n+function setStatusListener(value: StatusListener) {\n+ statusListener = value;\n+ return DevtoolsUI;\n+}\n+\n+function setShowWelcomeToTheNewDevToolsDialog(value: boolean) {\n+ showWelcomeToTheNewDevToolsDialog = value;\n+ return DevtoolsUI;\n+}\n+\n+let bridge: FrontendBridge | null = null;\n+let store: Store | null = null;\n+let root = null;\n+\n+const log = (...args) => console.log('[React DevTools]', ...args);\n+log.warn = (...args) => console.warn('[React DevTools]', ...args);\n+log.error = (...args) => console.error('[React DevTools]', ...args);\n+\n+function debug(methodName: string, ...args) {\n+ if (__DEBUG__) {\n+ console.log(\n+ `%c[core\/standalone] %c${methodName}`,\n+ 'color: teal; font-weight: bold;',\n+ 'font-weight: bold;',\n+ ...args\n+ );\n+ }\n+}\n+\n+function safeUnmount() {\n+ flushSync(() => {\n+ if (root !== null) {\n+ root.unmount();\n+ }\n+ });\n+ root = null;\n+}\n+\n+function reload() {\n+ safeUnmount();\n+\n+ node.innerHTML = '';\n+\n+ setTimeout(() => {\n+ root = createRoot(node);\n+ root.render(\n+ createElement(DevTools, {\n+ bridge: ((bridge: any): FrontendBridge),\n+ canViewElementSourceFunction,\n+ showTabBar: true,\n+ showWelcomeToTheNewDevToolsDialog,\n+ store: ((store: any): Store),\n+ warnIfLegacyBackendDetected: true,\n+ viewElementSourceFunction,\n+ })\n+ );\n+ }, 100);\n+}\n+\n+function canViewElementSourceFunction(\n+ inspectedElement: InspectedElement\n+): boolean {\n+ if (\n+ inspectedElement.canViewSource === false ||\n+ inspectedElement.source === null\n+ ) {\n+ return false;\n+ }\n+\n+ const { source } = inspectedElement;\n+\n+ return doesFilePathExist(source.fileName, projectRoots);\n+}\n+\n+function viewElementSourceFunction(\n+ id: number,\n+ inspectedElement: InspectedElement\n+): void {\n+ const { source } = inspectedElement;\n+ if (source !== null) {\n+ launchEditor(source.fileName, source.lineNumber, projectRoots);\n+ } else {\n+ log.error('Cannot inspect element', id);\n+ }\n+}\n+\n+function onDisconnected() {\n+ safeUnmount();\n+\n+ node.innerHTML = nodeWaitingToConnectHTML;\n+}\n+\n+function onError({ code, message }) {\n+ safeUnmount();\n+\n+ if (code === 'EADDRINUSE') {\n+ node.innerHTML = `<div id=\"waiting\"><h2>Another instance of DevTools is running<\/h2><\/div>`;\n+ } else {\n+ node.innerHTML = `<div id=\"waiting\"><h2>Unknown error (${message})<\/h2><\/div>`;\n+ }\n+}\n+\n+function initialize(socket: WebSocket) {\n+ const listeners = [];\n+ socket.onmessage = event => {\n+ let data;\n+ try {\n+ if (typeof event.data === 'string') {\n+ data = JSON.parse(event.data);\n+\n+ if (__DEBUG__) {\n+ debug('WebSocket.onmessage', data);\n+ }\n+ } else {\n+ throw Error();\n+ }\n+ } catch (e) {\n+ log.error('Failed to parse JSON', event.data);\n+ return;\n+ }\n+ listeners.forEach(fn => {\n+ try {\n+ fn(data);\n+ } catch (error) {\n+ log.error('Error calling listener', data);\n+ throw error;\n+ }\n+ });\n+ };\n+\n+ bridge = new Bridge({\n+ listen(fn) {\n+ listeners.push(fn);\n+ return () => {\n+ const index = listeners.indexOf(fn);\n+ if (index >= 0) {\n+ listeners.splice(index, 1);\n+ }\n+ };\n+ },\n+ send(event: string, payload: any, transferable?: Array<any>) {\n+ if (socket.readyState === socket.OPEN) {\n+ socket.send(JSON.stringify({ event, payload }));\n+ }\n+ },\n+ });\n+ ((bridge: any): FrontendBridge).addListener('shutdown', () => {\n+ socket.close();\n+ });\n+\n+ store = new Store(bridge, { supportsNativeInspection: false });\n+\n+ log('Connected');\n+ reload();\n+}\n+\n+let startServerTimeoutID: TimeoutID | null = null;\n+\n+function connectToSocket(socket: WebSocket) {\n+ socket.onerror = err => {\n+ onDisconnected();\n+ log.error('Error with websocket connection', err);\n+ };\n+ socket.onclose = () => {\n+ onDisconnected();\n+ log('Connection to RN closed');\n+ };\n+ initialize(socket);\n+\n+ return {\n+ close: function() {\n+ onDisconnected();\n+ },\n+ };\n+}\n+\n+function startServer(port?: number = 8097) {\n+ const httpServer = require('http').createServer();\n+ const server = new Server({ server: httpServer });\n+ let connected: WebSocket | null = null;\n+ server.on('connection', (socket: WebSocket) => {\n+ if (connected !== null) {\n+ connected.close();\n+ log.warn(\n+ 'Only one connection allowed at a time.',\n+ 'Closing the previous connection'\n+ );\n+ }\n+ connected = socket;\n+ socket.onerror = error => {\n+ connected = null;\n+ onDisconnected();\n+ log.error('Error with websocket connection', error);\n+ };\n+ socket.onclose = () => {\n+ connected = null;\n+ onDisconnected();\n+ log('Connection to RN closed');\n+ };\n+ initialize(socket);\n+ });\n+\n+ server.on('error', event => {\n+ onError(event);\n+ log.error('Failed to start the DevTools server', event);\n+ startServerTimeoutID = setTimeout(() => startServer(port), 1000);\n+ });\n+\n+ httpServer.on('request', (request, response) => {\n+ \/\/ NPM installs should read from node_modules,\n+ \/\/ But local dev mode needs to use a relative path.\n+ const basePath = existsSync('.\/node_modules\/react-devtools-core')\n+ ? 'node_modules\/react-devtools-core'\n+ : '..\/react-devtools-core';\n+\n+ \/\/ Serve a file that immediately sets up the connection.\n+ const backendFile = readFileSync(`${basePath}\/dist\/backend.js`);\n+\n+ \/\/ The renderer interface doesn't read saved component filters directly,\n+ \/\/ because they are generally stored in localStorage within the context of the extension.\n+ \/\/ Because of this it relies on the extension to pass filters, so include them wth the response here.\n+ \/\/ This will ensure that saved filters are shared across different web pages.\n+ const savedPreferencesString = `\n+ window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = ${JSON.stringify(\n+ getSavedComponentFilters()\n+ )};\n+ window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = ${JSON.stringify(\n+ getAppendComponentStack()\n+ )};`;\n+\n+ response.end(\n+ savedPreferencesString +\n+ '\\n;' +\n+ backendFile.toString() +\n+ '\\n;' +\n+ 'ReactDevToolsBackend.connectToDevTools();'\n+ );\n+ });\n+\n+ httpServer.on('error', event => {\n+ onError(event);\n+ statusListener('Failed to start the server.');\n+ startServerTimeoutID = setTimeout(() => startServer(port), 1000);\n+ });\n+\n+ httpServer.listen(port, () => {\n+ statusListener('The server is listening on the port ' + port + '.');\n+ });\n+\n+ return {\n+ close: function() {\n+ connected = null;\n+ onDisconnected();\n+ clearTimeout(startServerTimeoutID);\n+ server.close();\n+ httpServer.close();\n+ },\n+ };\n+}\n+\n+const DevtoolsUI = {\n+ connectToSocket,\n+ setContentDOMNode,\n+ setProjectRoots,\n+ setShowWelcomeToTheNewDevToolsDialog,\n+ setStatusListener,\n+ startServer,\n+};\n+\n+export default DevtoolsUI;\ndiff --git a\/packages\/react-devtools-core\/standalone.js b\/packages\/react-devtools-core\/standalone.js\nnew file mode 100644\nindex 0000000000..fe55aa11d5\n--- \/dev\/null\n+++ b\/packages\/react-devtools-core\/standalone.js\n@@ -0,0 +1 @@\n+module.exports = require('.\/dist\/standalone');\ndiff --git a\/packages\/react-devtools-core\/webpack.backend.js b\/packages\/react-devtools-core\/webpack.backend.js\nnew file mode 100644\nindex 0000000000..14ef8a2cb0\n--- \/dev\/null\n+++ b\/packages\/react-devtools-core\/webpack.backend.js\n@@ -0,0 +1,54 @@\n+const { resolve } = require('path');\n+const { DefinePlugin } = require('webpack');\n+const { getGitHubURL, getVersionString } = require('..\/..\/shells\/utils');\n+\n+const NODE_ENV = process.env.NODE_ENV;\n+if (!NODE_ENV) {\n+ console.error('NODE_ENV not set');\n+ process.exit(1);\n+}\n+\n+const __DEV__ = NODE_ENV === 'development';\n+\n+const GITHUB_URL = getGitHubURL();\n+const DEVTOOLS_VERSION = getVersionString();\n+\n+module.exports = {\n+ mode: __DEV__ ? 'development' : 'production',\n+ devtool: __DEV__ ? 'cheap-module-eval-source-map' : false,\n+ entry: {\n+ backend: '.\/src\/backend.js',\n+ },\n+ output: {\n+ path: __dirname + '\/dist',\n+ filename: '[name].js',\n+\n+ \/\/ This name is important; standalone references it in order to connect.\n+ library: 'ReactDevToolsBackend',\n+ libraryTarget: 'umd',\n+ },\n+ resolve: {\n+ alias: {\n+ src: resolve(__dirname, '..\/..\/src'),\n+ },\n+ },\n+ plugins: [\n+ new DefinePlugin({\n+ __DEV__: true,\n+ __TEST__: false,\n+ 'process.env.DEVTOOLS_VERSION': `\"${DEVTOOLS_VERSION}\"`,\n+ 'process.env.GITHUB_URL': `\"${GITHUB_URL}\"`,\n+ }),\n+ ],\n+ module: {\n+ rules: [\n+ {\n+ test: \/\\.js$\/,\n+ loader: 'babel-loader',\n+ options: {\n+ configFile: resolve(__dirname, '..\/..\/babel.config.js'),\n+ },\n+ },\n+ ],\n+ },\n+};\ndiff --git a\/packages\/react-devtools-core\/webpack.standalone.js b\/packages\/react-devtools-core\/webpack.standalone.js\nnew file mode 100644\nindex 0000000000..034d281a57\n--- \/dev\/null\n+++ b\/packages\/react-devtools-core\/webpack.standalone.js\n@@ -0,0 +1,74 @@\n+const { resolve } = require('path');\n+const { DefinePlugin } = require('webpack');\n+const { getGitHubURL, getVersionString } = require('..\/..\/shells\/utils');\n+\n+const NODE_ENV = process.env.NODE_ENV;\n+if (!NODE_ENV) {\n+ console.error('NODE_ENV not set');\n+ process.exit(1);\n+}\n+\n+const __DEV__ = NODE_ENV === 'development';\n+\n+const GITHUB_URL = getGitHubURL();\n+const DEVTOOLS_VERSION = getVersionString();\n+\n+module.exports = {\n+ mode: __DEV__ ? 'development' : 'production',\n+ devtool: __DEV__ ? 'cheap-module-eval-source-map' : false,\n+ target: 'electron-main',\n+ entry: {\n+ standalone: '.\/src\/standalone.js',\n+ },\n+ output: {\n+ path: __dirname + '\/dist',\n+ filename: '[name].js',\n+ library: '[name]',\n+ libraryTarget: 'commonjs2',\n+ },\n+ resolve: {\n+ alias: {\n+ src: resolve(__dirname, '..\/..\/src'),\n+ },\n+ },\n+ plugins: [\n+ new DefinePlugin({\n+ __DEV__: false,\n+ __TEST__: false,\n+ 'process.env.DEVTOOLS_VERSION': `\"${DEVTOOLS_VERSION}\"`,\n+ 'process.env.GITHUB_URL': `\"${GITHUB_URL}\"`,\n+ 'process.env.NODE_ENV': `\"${NODE_ENV}\"`,\n+ }),\n+ ],\n+ module: {\n+ rules: [\n+ {\n+ test: \/\\.js$\/,\n+ loader: 'babel-loader',\n+ options: {\n+ configFile: resolve(__dirname, '..\/..\/babel.config.js'),\n+ },\n+ },\n+ {\n+ test: \/\\.css$\/,\n+ use: [\n+ {\n+ loader: 'style-loader',\n+ },\n+ {\n+ loader: 'css-loader',\n+ options: {\n+ \/\/ WARNING It's important that we disable CSS source maps for production builds.\n+ \/\/ This causes style-loader to insert styles via a <style> tag rather than URL.createObjectURL,\n+ \/\/ which in turn avoids a nasty Electron\/Chromium bug that breaks DevTools in Nuclide.\n+ \/\/ (Calls to URL.createObjectURL seem to crash the webview process.)\n+ sourceMap: __DEV__,\n+ modules: true,\n+ localIdentName: '[local]___[hash:base64:5]',\n+ },\n+ },\n+ ],\n+ },\n+ ],\n+ },\n+};\ndiff --git a\/packages\/react-devtools-inline\/README.md b\/packages\/react-devtools-inline\/README.md\nnew file mode 100644\nindex 0000000000..b576b40db8\n--- \/dev\/null\n+++ b\/packages\/react-devtools-inline\/README.md\n@@ -0,0 +1,146 @@\n+# `react-devtools-inline`\n+\n+React DevTools implementation for embedding within a browser-based IDE (e.g. [CodeSandbox](https:\/\/codesandbox.io\/), [StackBlitz](https:\/\/stackblitz.com\/)).\n+\n+This is a low-level package. If you're looking for the standalone DevTools app, **use the `react-devtools` package instead.**\n+\n+## Usage\n+\n+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>).\n+\n+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:\n+\n+1. Frontend (DevTools interface) initialized in the main `window`.\n+1. Backend initialized in an `iframe`.\n+1. Backend activated.\n+\n+<sup>1<\/sup> Sandboxed iframes are supported.\n+\n+## API\n+\n+### `react-devtools-inline\/backend`\n+\n+* **`initialize(contentWindow)`** -\n+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!)\n+* **`activate(contentWindow)`** -\n+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.\n+\n+```js\n+import { activate, initialize } from 'react-devtools-inline\/backend';\n+\n+\/\/ Call this before importing React (or any other packages that might import React).\n+initialize();\n+\n+\/\/ Call this only once the frontend has been initialized.\n+activate();\n+```\n+\n+### `react-devtools-inline\/frontend`\n+\n+* **`initialize(contentWindow)`** -\n+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>.\n+\n+```js\n+import { initialize } from 'react-devtools-inline\/frontend';\n+\n+\/\/ This should be the iframe the backend hook has been installed in.\n+const iframe = document.getElementById(frameID);\n+const contentWindow = iframe.contentWindow;\n+\n+\/\/ This returns a React component that can be rendered into your app.\n+\/\/ <DevTools {...props} \/>\n+const DevTools = initialize(contentWindow);\n+```\n+\n+<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`.\n+\n+## Examples\n+\n+### Configuring a same-origin `iframe`\n+\n+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.\n+\n+```js\n+import {\n+ activate as activateBackend,\n+ initialize as initializeBackend\n+} from 'react-devtools-inline\/backend';\n+import { initialize as initializeFrontend } from 'react-devtools-inline\/frontend';\n+\n+\/\/ The React app you want to inspect with DevTools is running within this iframe:\n+const iframe = document.getElementById('target');\n+const { contentWindow } = iframe;\n+\n+\/\/ Installs the global hook into the iframe.\n+\/\/ This must be called before React is loaded into that frame.\n+initializeBackend(contentWindow);\n+\n+\/\/ React application can be injected into <iframe> at any time now...\n+\/\/ Note that this would need to be done via <script> tag injection,\n+\/\/ as setting the src of the <iframe> would load a new page (withou the injected backend).\n+\n+\/\/ Initialize DevTools UI to listen to the hook we just installed.\n+\/\/ This returns a React component we can render anywhere in the parent window.\n+const DevTools = initializeFrontend(contentWindow);\n+\n+\/\/ <DevTools \/> interface can be rendered in the parent window at any time now...\n+\/\/ Be sure to use either ReactDOM.unstable_createRoot()\n+\/\/ or ReactDOM.unstable_createSyncRoot() to render this component.\n+\n+\/\/ Let the backend know the frontend is ready and listening.\n+activateBackend(contentWindow);\n+```\n+\n+### Configuring a sandboxed `iframe`\n+\n+Sandboxed `iframe`s are also supported but require more complex initialization.\n+\n+**`iframe.html`**\n+```js\n+import { activate, initialize } from \"react-devtools-inline\/backend\";\n+\n+\/\/ The DevTooks hook needs to be installed before React is even required!\n+\/\/ The safest way to do this is probably to install it in a separate script tag.\n+initialize(window);\n+\n+\/\/ Wait for the frontend to let us know that it's ready.\n+function onMessage({ data }) {\n+ switch (data.type) {\n+ case \"activate-backend\":\n+ window.removeEventListener(\"message\", onMessage);\n+\n+ activate(window);\n+ break;\n+ default:\n+ break;\n+ }\n+}\n+\n+window.addEventListener(\"message\", onMessage);\n+```\n+\n+**`main-window.html`**\n+```js\n+import { initialize } from \"react-devtools-inline\/frontend\";\n+\n+const iframe = document.getElementById(\"target\");\n+const { contentWindow } = iframe;\n+\n+\/\/ Initialize DevTools UI to listen to the iframe.\n+\/\/ This returns a React component we can render anywhere in the main window.\n+\/\/ Be sure to use either ReactDOM.unstable_createRoot()\n+\/\/ or ReactDOM.unstable_createSyncRoot() to render this component.\n+const DevTools = initialize(contentWindow);\n+\n+\/\/ Let the backend know to initialize itself.\n+\/\/ We can't do this directly because the iframe is sandboxed.\n+\/\/ Only initialize the backend once the DevTools frontend has been initialized.\n+iframe.onload = () => {\n+ contentWindow.postMessage(\n+ {\n+ type: \"activate-backend\"\n+ },\n+ \"*\"\n+ );\n+};\n+```\n\\ No newline at end of file\ndiff --git a\/packages\/react-devtools-inline\/backend.js b\/packages\/react-devtools-inline\/backend.js\nnew file mode 100644\nindex 0000000000..2c2a32d451\n--- \/dev\/null\n+++ b\/packages\/react-devtools-inline\/backend.js\n@@ -0,0 +1 @@\n+module.exports = require('.\/dist\/backend');\ndiff --git a\/packages\/react-devtools-inline\/frontend.js b\/packages\/react-devtools-inline\/frontend.js\nnew file mode 100644\nindex 0000000000..a86be22376\n--- \/dev\/null\n+++ b\/packages\/react-devtools-inline\/frontend.js\n@@ -0,0 +1 @@\n+module.exports = require('.\/dist\/frontend');\ndiff --git a\/packages\/react-devtools-inline\/package.json b\/packages\/react-devtools-inline\/package.json\nnew file mode 100644\nindex 0000000000..2e6ddbe5c2\n--- \/dev\/null\n+++ b\/packages\/react-devtools-inline\/package.json\n@@ -0,0 +1,25 @@\n+{\n+ \"name\": \"react-devtools-inline\",\n+ \"version\": \"4.0.0-alpha.9\",\n+ \"description\": \"Embed react-devtools within a website\",\n+ \"license\": \"MIT\",\n+ \"main\": \".\/dist\/backend.js\",\n+ \"repository\": {\n+ \"url\": \"https:\/\/github.com\/bvaughn\/react-devtools-experimental.git\",\n+ \"type\": \"git\"\n+ },\n+ \"files\": [\n+ \"dist\",\n+ \"backend.js\",\n+ \"frontend.js\"\n+ ],\n+ \"scripts\": {\n+ \"build\": \"cross-env NODE_ENV=production webpack --config webpack.config.js\",\n+ \"prepublish\": \"yarn run build\",\n+ \"start\": \"cross-env NODE_ENV=development webpack --config webpack.config.js --watch\"\n+ },\n+ \"dependencies\": {},\n+ \"devDependencies\": {\n+ \"cross-env\": \"^3.1.4\"\n+ }\n+}\ndiff --git a\/packages\/react-devtools-inline\/src\/backend.js b\/packages\/react-devtools-inline\/src\/backend.js\nnew file mode 100644\nindex 0000000000..4b437458f5\n--- \/dev\/null\n+++ b\/packages\/react-devtools-inline\/src\/backend.js\n@@ -0,0 +1,96 @@\n+\/** @flow *\/\n+\n+import Agent from 'src\/backend\/agent';\n+import Bridge from 'src\/bridge';\n+import { initBackend } from 'src\/backend';\n+import { installHook } from 'src\/hook';\n+import setupNativeStyleEditor from 'src\/backend\/NativeStyleEditor\/setupNativeStyleEditor';\n+import {\n+ MESSAGE_TYPE_GET_SAVED_PREFERENCES,\n+ MESSAGE_TYPE_SAVED_PREFERENCES,\n+} from '.\/constants';\n+\n+function startActivation(contentWindow: window) {\n+ const { parent } = contentWindow;\n+\n+ const onMessage = ({ data }) => {\n+ switch (data.type) {\n+ case MESSAGE_TYPE_SAVED_PREFERENCES:\n+ \/\/ This is the only message we're listening for,\n+ \/\/ so it's safe to cleanup after we've received it.\n+ contentWindow.removeEventListener('message', onMessage);\n+\n+ const { appendComponentStack, componentFilters } = data;\n+\n+ contentWindow.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = appendComponentStack;\n+ contentWindow.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = componentFilters;\n+\n+ \/\/ TRICKY\n+ \/\/ The backend entry point may be required in the context of an iframe or the parent window.\n+ \/\/ If it's required within the parent window, store the saved values on it as well,\n+ \/\/ since the injected renderer interface will read from window.\n+ \/\/ Technically we don't need to store them on the contentWindow in this case,\n+ \/\/ but it doesn't really hurt anything to store them there too.\n+ if (contentWindow !== window) {\n+ window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = appendComponentStack;\n+ window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = componentFilters;\n+ }\n+\n+ finishActivation(contentWindow);\n+ break;\n+ default:\n+ break;\n+ }\n+ };\n+\n+ contentWindow.addEventListener('message', onMessage);\n+\n+ \/\/ The backend may be unable to read saved preferences directly,\n+ \/\/ because they are stored in localStorage within the context of the extension (on the frontend).\n+ \/\/ Instead it relies on the extension to pass preferences through.\n+ \/\/ Because we might be in a sandboxed iframe, we have to ask for them by way of postMessage().\n+ parent.postMessage({ type: MESSAGE_TYPE_GET_SAVED_PREFERENCES }, '*');\n+}\n+\n+function finishActivation(contentWindow: window) {\n+ const { parent } = contentWindow;\n+\n+ const bridge = new Bridge({\n+ listen(fn) {\n+ const onMessage = event => {\n+ fn(event.data);\n+ };\n+ contentWindow.addEventListener('message', onMessage);\n+ return () => {\n+ contentWindow.removeEventListener('message', onMessage);\n+ };\n+ },\n+ send(event: string, payload: any, transferable?: Array<any>) {\n+ parent.postMessage({ event, payload }, '*', transferable);\n+ },\n+ });\n+\n+ const agent = new Agent(bridge);\n+\n+ const hook = contentWindow.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+\n+ initBackend(hook, agent, contentWindow);\n+\n+ \/\/ Setup React Native style editor if a renderer like react-native-web has injected it.\n+ if (!!hook.resolveRNStyle) {\n+ setupNativeStyleEditor(\n+ bridge,\n+ agent,\n+ hook.resolveRNStyle,\n+ hook.nativeStyleEditorValidAttributes\n+ );\n+ }\n+}\n+\n+export function activate(contentWindow: window): void {\n+ startActivation(contentWindow);\n+}\n+\n+export function initialize(contentWindow: window): void {\n+ installHook(contentWindow);\n+}\ndiff --git a\/packages\/react-devtools-inline\/src\/constants.js b\/packages\/react-devtools-inline\/src\/constants.js\nnew file mode 100644\nindex 0000000000..cfa443cc04\n--- \/dev\/null\n+++ b\/packages\/react-devtools-inline\/src\/constants.js\n@@ -0,0 +1,6 @@\n+\/** @flow *\/\n+\n+export const MESSAGE_TYPE_GET_SAVED_PREFERENCES =\n+ 'React::DevTools::getSavedPreferences';\n+export const MESSAGE_TYPE_SAVED_PREFERENCES =\n+ 'React::DevTools::savedPreferences';\ndiff --git a\/packages\/react-devtools-inline\/src\/frontend.js b\/packages\/react-devtools-inline\/src\/frontend.js\nnew file mode 100644\nindex 0000000000..b64363014a\n--- \/dev\/null\n+++ b\/packages\/react-devtools-inline\/src\/frontend.js\n@@ -0,0 +1,72 @@\n+\/** @flow *\/\n+\n+import React, { forwardRef } from 'react';\n+import Bridge from 'src\/bridge';\n+import Store from 'src\/devtools\/store';\n+import DevTools from 'src\/devtools\/views\/DevTools';\n+import { getSavedComponentFilters, getAppendComponentStack } from 'src\/utils';\n+import {\n+ MESSAGE_TYPE_GET_SAVED_PREFERENCES,\n+ MESSAGE_TYPE_SAVED_PREFERENCES,\n+} from '.\/constants';\n+\n+import type { FrontendBridge } from 'src\/bridge';\n+import type { Props } from 'src\/devtools\/views\/DevTools';\n+\n+export function initialize(\n+ contentWindow: window\n+): React$AbstractComponent<Props, mixed> {\n+ const onMessage = ({ data, source }) => {\n+ if (source === 'react-devtools-content-script') {\n+ \/\/ Ignore messages from the DevTools browser extension.\n+ }\n+\n+ switch (data.type) {\n+ case MESSAGE_TYPE_GET_SAVED_PREFERENCES:\n+ \/\/ This is the only message we're listening for,\n+ \/\/ so it's safe to cleanup after we've received it.\n+ window.removeEventListener('message', onMessage);\n+\n+ \/\/ The renderer interface can't read saved preferences directly,\n+ \/\/ because they are stored in localStorage within the context of the extension.\n+ \/\/ Instead it relies on the extension to pass them through.\n+ contentWindow.postMessage(\n+ {\n+ type: MESSAGE_TYPE_SAVED_PREFERENCES,\n+ appendComponentStack: getAppendComponentStack(),\n+ componentFilters: getSavedComponentFilters(),\n+ },\n+ '*'\n+ );\n+ break;\n+ default:\n+ break;\n+ }\n+ };\n+\n+ window.addEventListener('message', onMessage);\n+\n+ const bridge: FrontendBridge = new Bridge({\n+ listen(fn) {\n+ const onMessage = ({ data }) => {\n+ fn(data);\n+ };\n+ window.addEventListener('message', onMessage);\n+ return () => {\n+ window.removeEventListener('message', onMessage);\n+ };\n+ },\n+ send(event: string, payload: any, transferable?: Array<any>) {\n+ contentWindow.postMessage({ event, payload }, '*', transferable);\n+ },\n+ });\n+\n+ const store: Store = new Store(bridge);\n+\n+ const ForwardRef = forwardRef<Props, mixed>((props, ref) => (\n+ <DevTools ref={ref} bridge={bridge} store={store} {...props} \/>\n+ ));\n+ ForwardRef.displayName = 'DevTools';\n+\n+ return ForwardRef;\n+}\ndiff --git a\/packages\/react-devtools-inline\/webpack.config.js b\/packages\/react-devtools-inline\/webpack.config.js\nnew file mode 100644\nindex 0000000000..254d4e4129\n--- \/dev\/null\n+++ b\/packages\/react-devtools-inline\/webpack.config.js\n@@ -0,0 +1,75 @@\n+const { resolve } = require('path');\n+const { DefinePlugin } = require('webpack');\n+const { getGitHubURL, getVersionString } = require('..\/..\/shells\/utils');\n+\n+const NODE_ENV = process.env.NODE_ENV;\n+if (!NODE_ENV) {\n+ console.error('NODE_ENV not set');\n+ process.exit(1);\n+}\n+\n+const __DEV__ = true; \/\/ NODE_ENV === 'development';\n+\n+const GITHUB_URL = getGitHubURL();\n+const DEVTOOLS_VERSION = getVersionString();\n+\n+module.exports = {\n+ mode: __DEV__ ? 'development' : 'production',\n+ devtool: false,\n+ entry: {\n+ backend: '.\/src\/backend.js',\n+ frontend: '.\/src\/frontend.js',\n+ },\n+ output: {\n+ path: __dirname + '\/dist',\n+ filename: '[name].js',\n+ library: '[name]',\n+ libraryTarget: 'commonjs2',\n+ },\n+ resolve: {\n+ alias: {\n+ src: resolve(__dirname, '..\/..\/src'),\n+ },\n+ },\n+ externals: {\n+ react: 'react',\n+ 'react-dom': 'react-dom',\n+ scheduler: 'scheduler',\n+ },\n+ plugins: [\n+ new DefinePlugin({\n+ __DEV__,\n+ __TEST__: false,\n+ 'process.env.DEVTOOLS_VERSION': `\"${DEVTOOLS_VERSION}\"`,\n+ 'process.env.GITHUB_URL': `\"${GITHUB_URL}\"`,\n+ 'process.env.NODE_ENV': `\"${NODE_ENV}\"`,\n+ }),\n+ ],\n+ module: {\n+ rules: [\n+ {\n+ test: \/\\.js$\/,\n+ loader: 'babel-loader',\n+ options: {\n+ configFile: resolve(__dirname, '..\/..\/babel.config.js'),\n+ },\n+ },\n+ {\n+ test: \/\\.css$\/,\n+ use: [\n+ {\n+ loader: 'style-loader',\n+ },\n+ {\n+ loader: 'css-loader',\n+ options: {\n+ sourceMap: true,\n+ modules: true,\n+ localIdentName: '[local]___[hash:base64:5]',\n+ },\n+ },\n+ ],\n+ },\n+ ],\n+ },\n+};\ndiff --git a\/packages\/react-devtools\/README.md b\/packages\/react-devtools\/README.md\nnew file mode 100644\nindex 0000000000..2220a6661d\n--- \/dev\/null\n+++ b\/packages\/react-devtools\/README.md\n@@ -0,0 +1,98 @@\n+# `react-devtools`\n+\n+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).\n+\n+It works both with React DOM and React Native.\n+\n+<img src=\"http:\/\/i.imgur.com\/IXeHiZD.png\" width=\"600\" alt=\"Screenshot of React DevTools running with React Native\">\n+\n+## Installation\n+Install the `react-devtools` package. Because this is a development tool, a global install is often the most convenient:\n+```sh\n+# Yarn\n+yarn global add react-devtools\n+\n+# NPM\n+npm install -g react-devtools\n+```\n+\n+If you prefer to avoid global installations, you can add `react-devtools` as a project dependency. With Yarn, you can do this by running:\n+```sh\n+yarn add --dev react-devtools\n+```\n+\n+With NPM you can just use [NPX](https:\/\/www.npmjs.com\/package\/npx):\n+```sh\n+npx react-devtools\n+```\n+\n+## Usage with React Native\n+Run `react-devtools` from the terminal to launch the standalone DevTools app:\n+```sh\n+react-devtools\n+```\n+\n+If you're not in a simulator then you also need to run the following in a command prompt:\n+```sh\n+adb reverse tcp:8097 tcp:8097\n+```\n+\n+If you're using React Native 0.43 or higher, it should connect to your simulator within a few seconds.\n+\n+### Integration with React Native Inspector\n+\n+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:\n+\n+![React Native Inspector](http:\/\/i.imgur.com\/ReFhREb.gif)\n+\n+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:\n+\n+![React DevTools Inspector Integration](http:\/\/i.imgur.com\/wVgV9RP.gif)\n+\n+You can choose \"Hide Inspector\" in the same menu to exit this mode.\n+\n+### Inspecting Component Instances\n+\n+When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console.\n+\n+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.\n+\n+Make sure that the dropdown in the top left corner of the Chrome console says `debuggerWorker.js`. **This step is essential.**\n+\n+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.\n+\n+![React DevTools Chrome Console Integration](http:\/\/i.imgur.com\/Cpvhs8i.gif)\n+\n+\n+## Usage with React DOM\n+\n+The standalone shell can also be useful with React DOM (e.g. to debug apps in Safari or inside of an iframe).\n+\n+Run `react-devtools` from the terminal to launch the standalone DevTools app:\n+```sh\n+react-devtools\n+```\n+\n+Add `<script src=\"http:\/\/localhost:8097\"><\/script>` as the very first `<script>` tag in the `<head>` of your page when developing:\n+\n+```html\n+<!doctype html>\n+<html lang=\"en\">\n+ <head>\n+ <script src=\"http:\/\/localhost:8097\"><\/script>\n+```\n+\n+This will ensure the developer tools are connected. **Don’t forget to remove it before deploying to production!**\n+\n+>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.\n+\n+## Advanced\n+\n+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.\n+\n+## Developing\n+\n+* Run `yarn run backend:watch` and `yarn run standalone:watch` in `..\/react-devtools-core`\n+* Run `yarn start` in this folder\n+* Refresh the app after it has recompiled a change\n+* For React Native, copy `react-devtools-core` to its `node_modules` to test your changes.\n\\ No newline at end of file\ndiff --git a\/packages\/react-devtools\/app.html b\/packages\/react-devtools\/app.html\nnew file mode 100644\nindex 0000000000..83250645ce\n--- \/dev\/null\n+++ b\/packages\/react-devtools\/app.html\n@@ -0,0 +1,129 @@\n+<!DOCTYPE html>\n+<html>\n+ <head>\n+ <title>React Developer Tools<\/title>\n+ <meta charset=\"utf8\" \/>\n+ <style>\n+ html {\n+ display: flex;\n+ font-family: sans-serif;\n+ }\n+ body {\n+ margin: 0;\n+ padding: 0;\n+ flex: 1;\n+ display: flex;\n+ }\n+ #container {\n+ display: flex;\n+ position: fixed;\n+ top: 0;\n+ left: 0;\n+ right: 0;\n+ bottom: 0;\n+ background-color: white;\n+ }\n+ #logs {\n+ position: fixed;\n+ top: 0;\n+ left: 0;\n+ white-space: pre;\n+ }\n+ #waiting {\n+ flex-direction: column;\n+ text-align: center;\n+ font-family: sans-serif;\n+ color: #aaa;\n+ flex: 1;\n+ overflow: auto;\n+ }\n+ #waiting h2 {\n+ padding: 30px;\n+ }\n+ #waiting p {\n+ padding: 0;\n+ margin: 0;\n+ }\n+ .input {\n+ display: inline-block;\n+ max-width: 100%;\n+ font-weight: 100;\n+ border: 1px solid #aaa;\n+ padding: 0.125rem 0.25rem;\n+ margin: 0.125rem;\n+ color: #666;\n+ }\n+ #loading-status {\n+ margin-top: 10px;\n+ }\n+ <\/style>\n+ <\/head>\n+ <body>\n+ <div id=\"container\">\n+ <div id=\"waiting\" style=\"-webkit-user-select: none; -webkit-app-region: drag;\">\n+ <h2>Waiting for React to connect…<\/h2>\n+ <div>\n+ <h4>React Native<\/h4>\n+ <div>The active app will automatically connect in a few seconds.<\/div>\n+ <br \/>\n+ <h4>React DOM<\/h4>\n+ <div>\n+ Add <span class=\"input\" contenteditable=\"true\" id=\"localhost\"><\/span><br \/>\n+ or <span class=\"input\" contenteditable=\"true\" id=\"byip\"><\/span>\n+ <\/div>\n+ <div>\n+ to the top of the page you want to debug,\n+ <br \/>\n+ <b>before<\/b> importing React DOM.\n+ <\/div>\n+ <\/div>\n+ <br \/>\n+ <br \/>\n+ <div id=\"loading-status\">Starting the server…<\/div>\n+ <\/div>\n+ <\/div>\n+ <script>\n+ const port = process.env.PORT || 8097;\n+ const localIp = require(\"ip\").address();\n+ const $ = document.querySelector.bind(document);\n+\n+ function selectAll(event) {\n+ const element = event.target;\n+ if (window.getSelection) {\n+ const selection = window.getSelection(); \n+ const range = document.createRange();\n+ range.selectNodeContents(element);\n+ selection.removeAllRanges();\n+ selection.addRange(range);\n+ }\n+ }\n+\n+ const $localhost = $(\"#localhost\");\n+ $localhost.innerText = `<script src=\"http:\/\/localhost:${port}\"><\/` + 'script>';\n+ $localhost.addEventListener('click', selectAll);\n+ $localhost.addEventListener('focus', selectAll);\n+\n+ const $byIp = $(\"#byip\");\n+ $byIp.innerText = `<script src=\"http:\/\/${localIp}:${port}\"><\/` + 'script>';\n+ $byIp.addEventListener('click', selectAll);\n+ $byIp.addEventListener('focus', selectAll);\n+\n+ let devtools;\n+ try {\n+ devtools = require(\"react-devtools-core\/standalone\").default;\n+ } catch (err) {\n+ alert(\n+ err.toString() +\n+ \"\\n\\nDid you run `yarn` and `yarn run build` in packages\/react-devtools-core?\"\n+ );\n+ }\n+ window.devtools = devtools;\n+ window.server = devtools\n+ .setContentDOMNode(document.getElementById(\"container\"))\n+ .setStatusListener(function(status) {\n+ document.getElementById(\"loading-status\").innerText = status;\n+ })\n+ .startServer(port);\n+ <\/script>\n+ <\/body>\n+<\/html>\ndiff --git a\/packages\/react-devtools\/app.js b\/packages\/react-devtools\/app.js\nnew file mode 100644\nindex 0000000000..679dfb70df\n--- \/dev\/null\n+++ b\/packages\/react-devtools\/app.js\n@@ -0,0 +1,41 @@\n+\/\/ @flow\n+\n+const { app, BrowserWindow } = require('electron'); \/\/ Module to create native browser window.\n+const { join } = require('path');\n+\n+const argv = require('minimist')(process.argv.slice(2));\n+const projectRoots = argv._;\n+\n+let mainWindow = null;\n+\n+app.on('window-all-closed', function() {\n+ app.quit();\n+});\n+\n+app.on('ready', function() {\n+ \/\/ Create the browser window.\n+ mainWindow = new BrowserWindow({\n+ width: 800,\n+ height: 600,\n+ icon: join(__dirname, 'icons\/icon128.png'),\n+ frame: false,\n+ \/\/titleBarStyle: 'customButtonsOnHover',\n+ webPreferences: {\n+ nodeIntegration: true,\n+ },\n+ });\n+\n+ \/\/ and load the index.html of the app.\n+ mainWindow.loadURL('file:\/\/' + __dirname + '\/app.html'); \/\/ eslint-disable-line no-path-concat\n+ mainWindow.webContents.executeJavaScript(\n+ \/\/ We use this so that RN can keep relative JSX __source filenames\n+ \/\/ but \"click to open in editor\" still works. js1 passes project roots\n+ \/\/ as the argument to DevTools.\n+ 'window.devtools.setProjectRoots(' + JSON.stringify(projectRoots) + ')'\n+ );\n+\n+ \/\/ Emitted when the window is closed.\n+ mainWindow.on('closed', function() {\n+ mainWindow = null;\n+ });\n+});\ndiff --git a\/packages\/react-devtools\/bin.js b\/packages\/react-devtools\/bin.js\nnew file mode 100755\nindex 0000000000..55fd22c22f\n--- \/dev\/null\n+++ b\/packages\/react-devtools\/bin.js\n@@ -0,0 +1,18 @@\n+#!\/usr\/bin\/env node\n+\n+\/\/ @flow\n+\n+const electron = require('electron');\n+const spawn = require('cross-spawn');\n+const argv = process.argv.slice(2);\n+const pkg = require('.\/package.json');\n+const updateNotifier = require('update-notifier');\n+\n+\/\/ notify if there's an update\n+updateNotifier({ pkg }).notify({ defer: false });\n+\n+const result = spawn.sync(electron, [require.resolve('.\/app')].concat(argv), {\n+ stdio: 'ignore',\n+});\n+\n+process.exit(result.status);\ndiff --git a\/packages\/react-devtools\/icons\/icon128.png b\/packages\/react-devtools\/icons\/icon128.png\nnew file mode 100644\nindex 0000000000000000000000000000000000000000..b9327946441f529cd5510f8ee14b788f0aaea1df\nGIT binary patch\nliteral 4577\nzcmV<75gzV|P)<h;3K|Lk000e1NJLTq004jh004jp1^@s6!#-il0000PbVXQnQ*UN;\nzcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU@gGod|RCwC#oo$RBRTal)x6ld|x)KV)\nzqHIwFsX;VtLd1k(G!aZJCg2BXqEJbIsPuzEG=MLV7<`GK#$qB=5~_(Mk>vv~k<jv?\nz@S#L41_Ud1MOx&gy5$`!;QVIyEYo?;xpQac&NI(GGbh>Zc3+<7&OQJ0de1p`By!Ni\nz#KhV0r`7StD*hXFG@ocH{@4<KOioQr-ERHTh{1RmzM*6KP=Vos7zkUkKNwY*|Ks@6\nz=8pM8MeuU-EN}Ot1sUce^%r;hHMDf<*x1;_^z`&(4*+J-(J_Dc>691*V=)Nsnezc=\nzZT{wNZ(2oX;1h@su%X+J)=|Rqk=ao1cin!pl0G*&8|Qb_PFf8BR(1Q(T3R*Q#ry5f\nz4~%wu&~EAg&~iFpkQcXj;)H0y!G|PYzwye8(aTehNAqF5d_G|Dq49bji~jfWi_r^@\nzKGXrgmzJLX+31K>tD{3tTA}_N5WMn_$D@C5yD$D|Hg|Qv;zOc$tvDk(Y~?4C_40p<\nzp1c2!=-Dlk0|y530B;S#LfF9fUwTcnXz9`3e}i<fu}|N5YxMeayZg3Q*7%-tFG;{!\nzl%BqGV>ETk_d5V&r5@&2A%O7DP3vm~LKVhmwb-NIU7G;7^#BOL{H%mMb=&%&n~Q2c\nz=A28Sqs}@%*lPmVzy18G#sRQkY;5e?O}#l1b;8%Kk46_R3ig_Z9Dj0j<R{OKUfaDh\nzdUf|y<<~oG<r&dQSKkyZS-!&S_p$M4App2=>~N>U$nW9Lv{nNk`Ib6mBeCsiM-NFn\nz_}CK?rwhj9`3wB*6YH-kr44wm_g!*L@;)wtiM-Eq_fPgjDZIu}XRV3eedhV9gUGu6\nz_?0soH3f|U0Oo!4XLqSTLp7ozt40j6$&deVT_Nuq=|nTR0Hy)d1tzozubU+tLd;g{\nzOaRUl>bflRA=D?o%V%ColQPT;AQ>4M@d5#$`rtR$n;{(%57VY@`GL2Id2`=?qdgDa\nzotUPqxjQg66VKecseJ%A?xHJuHW_Jp@;5gWek~Y*6v1Rm8}R+b6DLM{w{J}tVwog>\nz>2ff4{N#%0r5%4Ryhh%0-}Li|`AQRh0w5;Q)dV$?3Pu%b>a}WoOc?m^6`waVhT_m=\nz-y0w<|JF^WKY|%~<U4DV^;NOgFj@;!^ZbmV0|1Vk78{3%;U&hl%n0B+`MTfE*<-QK\nzmgc~0;HZVl;Nds)uIa>f0pJ}+j4RSH8SM3uQhW(3&Q3Gka?V8MBl#h{bPY&FvY(-;\nzk+T3z+Uhvy5tWNapY=CH?ORmD87-=zeD-6gHGt*O*Fi{Jk+iF5k2;v|(gLmb0qRVK\nzAa&UBJT1c-T>eAdj&W-MkX6V1$b?Bk$VGVh{ir$6-b3mhT4@6Mkq-xS_yR7P_`>CV\nzk;JBA{(<%Z>L!=BpN$ThQpc?YK;2$289ra8${~=ex~D2N8TJhX0Qy<I<0{~I>b4tI\nz{{yg~3F-oY27rF<NoxQA<BvJ#V$<Oxb!>%*fB>Ih7=>aWeSpw**Tuk@I>L=}9yv7w\nz7Jx!l0d*$8f%cGLka+x>3Wwp@6fvie)<F~?3Vm3U1wd2MKTrTzvV3K**T;#o>?|r@\nzBQ%1Q0J2^$l%{JP0BD$~OD&?ZHHno(kSpngX3&x}J~@Q>=m0hb0F4P+dN`!r_s#Ov\nz?G$Q9zfA(5k<&o!Fr=yz=#o;YHE>n?r0G8oZB|1^w95;RZmZOhq~$#JKC-P{01&2R\nzna<|;oRrBXir>KhQLUC4;eA|3zeNa;$r=F_AFn;TYp%pQ?_5LEbgk0>5Sx_+01Qn7\nzKuX6@n|Vy`C*@Tk^K3I(XIJuBo@u6OwD%yal>opI%&J)$EoFm|lseO~wQXp;X4ant\nziKW?^t_^4m0G1yxtOqfc)@b@<u<wl_glN)E-A{Ecs@XSG>-XAlJez2F?+XBs>ZPZz\nzPE>wB)H)#_Nu5xICajrCVht3$2T~jgFam~t%@U{;05iGtHI>vl4w4LoNKf3b`U;Vt\nzyvm=lDqM>sSP#7jtWz`x&McqtW2!zoW#l2jTsr{r8X|p2rfFDVm5Uj5Hd~Si(hi3J\nzB<15S4Or!PndkY}T^kcHgnqWskc=nM@{yn3l^ntPKCJdYBIVY@TJr=#&jrw4Uklj)\nzWZr?1wjaKdJu{!+;$&~x<B(=FNN-@$Q2CAZ(by@c<@WmXz<VCNC)vy$H(ZhQ#$}sC\nz`JUA=%LZth4PgHM%WG@3m-P1mfWtrb>7JkQ3@}vdI~-rVw&xjn9kj;o$(xh4zwydT\nz$#c7y%iaPunoQ|43{gv22>{r+6Tg0aqVn??FO8p1tiL+>S~_d@?R`Ev@>A#bARb3(\nz-}IiI?;row>(uwc?q`3$4r1LTrVbik*0Z*^V&-d(o7M;mSf;mcodW}31A3Us>$rRe\nzo}Wlc5@%IH$<ZoOk7t~h6{GCx4_`hrVUQN$SUrJ64Vn$sB!rFY=Lk8gNfb4mjRven\nzSgRF|J>pby+l3!DOV-k+2Od<ZS16?cq>b8=dKSI=jtxmG_4J>%<|1^_((xV@dC<|z\nz67`tg$m70rrTSif{n0wJ<=fI+!Wj7|l8)th7R;(+?OFCbaQEE*k3DZ)k2LdMPyYIb\nzTyukTKYQ<{L?aMUX#36gFiF1i4=QB>ea5DM+M?bn(vbD8c`vk#6lu7Qd3_xzOck$b\nz#q3BQYxmhm>It>iVsFxiT9V$*zE6<|fcIiutlz3}6zx-V@KhlUz~l@ZJ&hz3;^B%&\nzW8w$Iwwoy)y$zg)CIDbVwWD0r{!S0akH7!WwYMf~cR5+ub=E=mGS8Fu9F{}K-?MH2\nza`<VzKWEKF{T0y&_(t!HwWT(I3Qfa%7Xg?z08smu<RkSUuWDX93oa1NMlSo}<*L*Y\nzMdYb&n1G{NWD*%0IribxlCdr>5a19>(kHua)&-cdKLfPvS6Ko$tP22Wj$+a2V_r@m\nzjJIm*VLU3TDp~b-Bz!bmi!|h^YSvwL2B9Qxd>le6T-DYcVh%!H2Q%i<H#MEB0i<0@\nzlc11o)NdxCj~-rWgt>8P9M`&i2`S5Su8>I7ZdMwtb>kQpHIc5+T6=GvIqQs;)&Mvj\nzR_GPFjanO@Vrh#!)o-o4DEXwceKlYmIen{;)n|^P7XUQXFQd{zlT6w4@xaThy9~)h\nz@H}VGXVxF*8+GL+EFq`_04s^%E2(8DkGVe5ANoAsr)MGW93ovBR)^qdTEOQd(g^^o\nzRJ+ci1;QNHM*2v9=wc3^*OL>ws^+Z<2(<9G5&*PmUZV2qBDn*gtn@cYE+*GKcBX6y\nzK9B<<ET?ObnkqGN`3g-=0xJyw>fJ5hpe};RmIJ3%+YS=B8c%#2ve4l3@j09Tu(C<n\nzdAA`cZ=-y=dqO)~zC)&68p<~;D=RdbQ2LyZIssrE)mAC@sv5qb0enKdkd7+Vx>cmV\nzZY^NXL71!t0L!tFQ^7iz?*lBK%?{;tTOn2v=`Z?x#Wd#mW`$H`4KTBj8_fyVA@BNu\nzI6SH9C!{x^sumz3$xC=iEu^n=o0n87Dlo2N@?cSbb;ca>!Y7!jIe1ov&8iMc6Qf_M\nzR0{dDl%v-5WSK5Fz99EuzFi!9qxW-r9S8Fu)@2MhA7si%;8Z!}IQlbd)YpIPdzVI|\nz2QKQV7~;Ugs=*VIn>zU0qW2L}V44@ZTQ!PrS1G-29&wkA+j-C9F1pIpI=ps~G`)8o\nzfDD|qAux`T<tnvlno5_$6D!TC)!=E&<m51~zAkM#eCGvQT8NCGE1^}^8DxK{0kq5?\nzQeX6prcgzYb^It2Np%d`K>Fr=iPsxneW9Yt)+a?5NV0DYo{O>6*S)%HXHtTV1j;)3\nz5Xsp!d9zowj;lsdj(qvh_RCfFZV4Fbo;|Y69_#;0tSyUb;ZmJJKDM6?M{D@R&|1e0\nzOre@MP24i3NjwtX?>1|zP$gR<VRbRNuC_`4tyNf(wfSX>a!RFwc|hrhb1j|+ciqL4\nzR&73UyrtekM<YH0U|o8VRr}Tvw^sHpHeO2ZEs&*!1n^g>$SU0!f|}%EH3u#0^pH8k\nz?j1b7ELn6~#ailLE1a}y@YuAnWzl7vFuI_$N+YXAQ7e1TngN7h{Oq;Sve>LpNb0(E\nzRH6(_P1V~`gEWWA1TEh@J)1NWr{9;9fn`gbHT9ncly%`Ge^d8qq17Pj>PnW2sx;Nj\nz^N<_xO%SnfA@4N^+8yj`vwV_IE^n6i(CXv!x^zQ4UtWv2MV9|kBqQnTQ}x9JSdxud\nzV3BygWgi%`LUHIp;}gl(*^T9piijgCHM}3*eVL0LeTWHRnrf!!aeDg$`<V%9_euI-\nz`i?#CveJ7Y(Fxk34((R!fCwI1x^b%Jz$IKm^+^&%(*i!yScWXElUC(26e7g4%8Z1%\nzO<Lb(1j%fmBKEE<0TMEkY4RP$2otlFP%}4{*L%BXzemIL9RL~_LRIe0XOiq)Q{&<q\nzDG76pXCG#=QqfJ$3T$jnpp{7B1P_%<ykB+5Qq#<qiJ{CFmar`w!Z!VUjR8QLnk_{P\nz*^F9xWUM$@gHjuqK2P8SU&D14BGbgO!qAi!7$^;Zq*!*64=p_`ufwKVDPg41*YOnQ\nzSpXB8UG%^!4f3q-1HfAc04**qlif;h989(<WPA=^(jlJ)0J(IcN@%9dNN(Nr@frX^\nzOwA^PsA-8JcLBn9E8fRHsk%lDgiZE4Gy(ukx<XwaYcUBmn^(vRBdkj&EO1rPSm``N\nz>oh<J^>5jG>rjULgJmM}ZW;?2wq^m^<XHSh0HAf-h8&x&T@5G1NuHK~LOW<7na{1`\nzRRLgW#a3y6(D&w~FNe%h_AX)9-GEh{zB;wtyahnWOCnw5O0mi<;jY_3(IRz(XRW_J\nzzMt7IB-pwO5D-|o12jn8E!}x$u~jCZu0#kn+`0?Ua=v6-Yh7e@UAGzlb&?ANntiq|\nzldjVV>;TY*Ff$JXKED%!2I)4mp}jtSkg3Vk??3=RbIR(D42ZMyu5FR&piO{LyHI;*\nz0icCJb>_nf^{D3cQN8^DftLEM+w2S!05mVSF11LEZ-shjA}cxo1a+0HY2a$gF>C|?\nz{YZtvL>O=7{>9;Qg@|%7Mo6-TShflP*0r&r%z&tIR~xl3UcR;%z|pX;`S2lYoJ;GX\nz0L>8$A#JF9mklSomz8?f;wl&kG5_H0^{w&Ri+)ki&Y(ibTez@idIn6>ZVU5Oty~Pj\nz4P@4ccp5l3AJBT}`Q9`4Zpxj1fUok>j)zO-^Q|lI%G@9_?*YIAYtleVRo+b<SzG<y\nz^VUTlxa>O9gvii_XMVpa_w`5v&(s92RDndx8tbMTnIab7by@?Rd@hh0N&p~1TB|p`\nzcU;%<>h7IR#|SCqMlRZ^mn>i5G&QLFBK?9ecJKDB=G{DE7HDfnV`N+2vjC;-+cnKA\nzR5er?YNRtL%|xwjI_(_MLM}E^O2d7pZdRF`kyhJQjbK)i<&x{PS#q_)x!T}c0RYJA\nzx33yygzTX&I{(0zniy>}Z~%bvMxhkRFSw?eRVC~=8X-iu8uGrSc@F@e3n`mqd`KY3\nz^wB|J{=fhr9m5}Uj{o)Oc<lHHO>HJxiy;ucE$^%opbk<!z(4^YEnyNNNH3rahLC1U\nzY-dvkC>9uIvYGqm5oX%j9`n8ss{=qseWlTE3pxOF)B&KQHUnU)+lJQC6ad)L?L%v6\nz3jmnx_Mx>jIl{kjD7ceP-F~!7{l~OSoWKjZ{b(H}JYT>+)6>&aV=={Fp4#n8E9m-I\nz`hPJ8fLRdS6Jr1~a7wp7LruSmnLk&2xgh<M7zC4@CK!6j->>p^MEkASDO?qQ+R!<M\nz!{hK_^JC`sg#06}zlwoycKnIUZB}()n3qh4;gd1rZ?}Hw{{jpEPJO6BgYGht00000\nLNkvXXu0mjfqT|45\n\nliteral 0\nHcmV?d00001\n\ndiff --git a\/packages\/react-devtools\/index.js b\/packages\/react-devtools\/index.js\nnew file mode 100644\nindex 0000000000..9a48b9c2b6\n--- \/dev\/null\n+++ b\/packages\/react-devtools\/index.js\n@@ -0,0 +1,7 @@\n+\/\/ @flow\n+\n+const { connectToDevTools } = require('react-devtools-core\/backend');\n+\n+\/\/ Connect immediately with default options.\n+\/\/ If you need more control, use `react-devtools-core` directly instead of `react-devtools`.\n+connectToDevTools();\ndiff --git a\/packages\/react-devtools\/package.json b\/packages\/react-devtools\/package.json\nnew file mode 100644\nindex 0000000000..2ce188a47f\n--- \/dev\/null\n+++ b\/packages\/react-devtools\/package.json\n@@ -0,0 +1,31 @@\n+{\n+ \"name\": \"react-devtools\",\n+ \"version\": \"4.0.0-alpha.9\",\n+ \"description\": \"Use react-devtools outside of the browser\",\n+ \"license\": \"MIT\",\n+ \"repository\": {\n+ \"url\": \"https:\/\/github.com\/bvaughn\/react-devtools-experimental.git\",\n+ \"type\": \"git\"\n+ },\n+ \"bin\": {\n+ \"react-devtools\": \".\/bin.js\"\n+ },\n+ \"files\": [\n+ \"bin.js\",\n+ \"app.html\",\n+ \"app.js\",\n+ \"index.js\",\n+ \"icons\"\n+ ],\n+ \"scripts\": {\n+ \"start\": \"node bin.js\"\n+ },\n+ \"dependencies\": {\n+ \"cross-spawn\": \"^5.0.1\",\n+ \"electron\": \"^5.0.0\",\n+ \"ip\": \"^1.1.4\",\n+ \"minimist\": \"^1.2.0\",\n+ \"react-devtools-core\": \"4.0.0-alpha.9\",\n+ \"update-notifier\": \"^2.1.0\"\n+ }\n+}\ndiff --git a\/shells\/browser\/chrome\/README.md b\/shells\/browser\/chrome\/README.md\nnew file mode 100644\nindex 0000000000..dd77d072c8\n--- \/dev\/null\n+++ b\/shells\/browser\/chrome\/README.md\n@@ -0,0 +1,12 @@\n+# The Chrome extension\n+\n+The source code for this extension has moved to `shells\/webextension`.\n+\n+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.\n+\n+## Testing in Chrome\n+\n+You can test a local build of the web extension like so:\n+\n+ 1. Build the extension: `node build`\n+ 1. Follow the on-screen instructions.\ndiff --git a\/shells\/browser\/chrome\/build.js b\/shells\/browser\/chrome\/build.js\nnew file mode 100644\nindex 0000000000..8bcb863f11\n--- \/dev\/null\n+++ b\/shells\/browser\/chrome\/build.js\n@@ -0,0 +1,41 @@\n+#!\/usr\/bin\/env node\n+\n+const chalk = require('chalk');\n+const { execSync } = require('child_process');\n+const { existsSync } = require('fs');\n+const { isAbsolute, join, relative } = require('path');\n+const { argv } = require('yargs');\n+const build = require('..\/shared\/build');\n+\n+const main = async () => {\n+ const { crx, keyPath } = argv;\n+\n+ if (crx) {\n+ if (!keyPath || !existsSync(keyPath)) {\n+ console.error('Must specify a key file (.pem) to build CRX');\n+ process.exit(1);\n+ }\n+ }\n+\n+ await build('chrome');\n+\n+ if (crx) {\n+ const cwd = join(__dirname, 'build');\n+\n+ let safeKeyPath = keyPath;\n+ if (!isAbsolute(keyPath)) {\n+ safeKeyPath = join(relative(cwd, process.cwd()), keyPath);\n+ }\n+\n+ execSync(`crx pack .\/unpacked -o ReactDevTools.crx -p ${safeKeyPath}`, {\n+ cwd,\n+ });\n+ }\n+\n+ console.log(chalk.green('\\nThe Chrome extension has been built!'));\n+ console.log(chalk.green('You can test this build by running:'));\n+ console.log(chalk.gray('\\n# From the react-devtools root directory:'));\n+ console.log('yarn run test:chrome');\n+};\n+\n+main();\ndiff --git a\/shells\/browser\/chrome\/deploy.js b\/shells\/browser\/chrome\/deploy.js\nnew file mode 100644\nindex 0000000000..1cfdf39085\n--- \/dev\/null\n+++ b\/shells\/browser\/chrome\/deploy.js\n@@ -0,0 +1,7 @@\n+#!\/usr\/bin\/env node\n+\n+const deploy = require('..\/shared\/deploy');\n+\n+const main = async () => await deploy('chrome');\n+\n+main();\ndiff --git a\/shells\/browser\/chrome\/manifest.json b\/shells\/browser\/chrome\/manifest.json\nnew file mode 100644\nindex 0000000000..3a1dfb1db4\n--- \/dev\/null\n+++ b\/shells\/browser\/chrome\/manifest.json\n@@ -0,0 +1,60 @@\n+{\n+ \"manifest_version\": 2,\n+ \"name\": \"React Developer Tools\",\n+ \"description\": \"Adds React debugging tools to the Chrome Developer Tools.\",\n+ \"version\": \"4.0.0\",\n+ \"version_name\": \"4.0.0\",\n+\n+ \"minimum_chrome_version\": \"49\",\n+\n+ \"icons\": {\n+ \"16\": \"icons\/16-production.png\",\n+ \"32\": \"icons\/32-production.png\",\n+ \"48\": \"icons\/48-production.png\",\n+ \"128\": \"icons\/128-production.png\"\n+ },\n+\n+ \"browser_action\": {\n+ \"default_icon\": {\n+ \"16\": \"icons\/16-disabled.png\",\n+ \"32\": \"icons\/32-disabled.png\",\n+ \"48\": \"icons\/48-disabled.png\",\n+ \"128\": \"icons\/128-disabled.png\"\n+ },\n+\n+ \"default_popup\": \"popups\/disabled.html\"\n+ },\n+\n+ \"devtools_page\": \"main.html\",\n+\n+ \"content_security_policy\": \"script-src 'self' 'unsafe-eval'; object-src 'self'\",\n+ \"web_accessible_resources\": [\n+ \"main.html\",\n+ \"panel.html\",\n+ \"build\/backend.js\",\n+ \"build\/renderer.js\"\n+ ],\n+\n+ \"background\": {\n+ \"scripts\": [\"build\/background.js\"],\n+ \"persistent\": false\n+ },\n+\n+ \"permissions\": [\n+ \"<all_urls>\",\n+ \"background\",\n+ \"tabs\",\n+ \"webNavigation\",\n+ \"file:\/\/\/*\",\n+ \"http:\/\/*\/*\",\n+ \"https:\/\/*\/*\"\n+ ],\n+\n+ \"content_scripts\": [\n+ {\n+ \"matches\": [\"<all_urls>\"],\n+ \"js\": [\"build\/injectGlobalHook.js\"],\n+ \"run_at\": \"document_start\"\n+ }\n+ ]\n+}\ndiff --git a\/shells\/browser\/chrome\/now.json b\/shells\/browser\/chrome\/now.json\nnew file mode 100644\nindex 0000000000..e541ec866d\n--- \/dev\/null\n+++ b\/shells\/browser\/chrome\/now.json\n@@ -0,0 +1,5 @@\n+{\n+ \"name\": \"react-devtools-experimental-chrome\",\n+ \"alias\": [\"react-devtools-experimental-chrome\"],\n+ \"files\": [\"index.html\", \"ReactDevTools.zip\"]\n+}\ndiff --git a\/shells\/browser\/chrome\/test.js b\/shells\/browser\/chrome\/test.js\nnew file mode 100644\nindex 0000000000..c010a3c319\n--- \/dev\/null\n+++ b\/shells\/browser\/chrome\/test.js\n@@ -0,0 +1,11 @@\n+#!\/usr\/bin\/env node\n+\n+const chromeLaunch = require('chrome-launch'); \/\/ eslint-disable-line import\/no-extraneous-dependencies\n+const { resolve } = require('path');\n+\n+const EXTENSION_PATH = resolve('shells\/browser\/chrome\/build\/unpacked');\n+const START_URL = 'https:\/\/facebook.github.io\/react\/';\n+\n+chromeLaunch(START_URL, {\n+ args: [`--load-extension=${EXTENSION_PATH}`],\n+});\ndiff --git a\/shells\/browser\/firefox\/README.md b\/shells\/browser\/firefox\/README.md\nnew file mode 100644\nindex 0000000000..c4bbc8d2de\n--- \/dev\/null\n+++ b\/shells\/browser\/firefox\/README.md\n@@ -0,0 +1,12 @@\n+# The Firefox extension\n+\n+The source code for this extension has moved to `shells\/webextension`.\n+\n+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.\n+\n+## Testing in Firefox\n+\n+ 1. Build the extension: `node build`\n+ 1. Follow the on-screen instructions.\n+\n+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.\ndiff --git a\/shells\/browser\/firefox\/build.js b\/shells\/browser\/firefox\/build.js\nnew file mode 100644\nindex 0000000000..5f7e7c5df9\n--- \/dev\/null\n+++ b\/shells\/browser\/firefox\/build.js\n@@ -0,0 +1,35 @@\n+#!\/usr\/bin\/env node\n+\n+const chalk = require('chalk');\n+const build = require('..\/shared\/build');\n+\n+const main = async () => {\n+ await build('firefox');\n+\n+ console.log(chalk.green('\\nThe Firefox extension has been built!'));\n+ console.log(chalk.green('You can test this build by running:'));\n+ console.log(chalk.gray('\\n# From the react-devtools root directory:'));\n+ console.log('yarn run test:firefox');\n+ console.log(\n+ chalk.gray('\\n# You can also test against upcoming Firefox releases.')\n+ );\n+ console.log(\n+ chalk.gray(\n+ '# First download a release from https:\/\/www.mozilla.org\/en-US\/firefox\/channel\/desktop\/'\n+ )\n+ );\n+ console.log(\n+ chalk.gray(\n+ '# And then tell web-ext which release to use (eg firefoxdeveloperedition, nightly, beta):'\n+ )\n+ );\n+ console.log('WEB_EXT_FIREFOX=nightly yarn run test:firefox');\n+ console.log(chalk.gray('\\n# You can test against older versions too:'));\n+ console.log(\n+ 'WEB_EXT_FIREFOX=\/Applications\/Firefox52.app\/Contents\/MacOS\/firefox-bin yarn run test:firefox'\n+ );\n+};\n+\n+main();\n+\n+module.exports = { main };\ndiff --git a\/shells\/browser\/firefox\/deploy.js b\/shells\/browser\/firefox\/deploy.js\nnew file mode 100644\nindex 0000000000..b7977d62f0\n--- \/dev\/null\n+++ b\/shells\/browser\/firefox\/deploy.js\n@@ -0,0 +1,7 @@\n+#!\/usr\/bin\/env node\n+\n+const deploy = require('..\/shared\/deploy');\n+\n+const main = async () => await deploy('firefox');\n+\n+main();\ndiff --git a\/shells\/browser\/firefox\/manifest.json b\/shells\/browser\/firefox\/manifest.json\nnew file mode 100644\nindex 0000000000..02f24a0fef\n--- \/dev\/null\n+++ b\/shells\/browser\/firefox\/manifest.json\n@@ -0,0 +1,64 @@\n+{\n+ \"manifest_version\": 2,\n+ \"name\": \"React Developer Tools\",\n+ \"description\": \"Adds React debugging tools to the Firefox Developer Tools.\",\n+ \"version\": \"4.0.0\",\n+\n+ \"applications\": {\n+ \"gecko\": {\n+ \"id\": \"@react-devtools\",\n+ \"strict_min_version\": \"54.0\"\n+ }\n+ },\n+\n+ \"icons\": {\n+ \"16\": \"icons\/16-production.png\",\n+ \"32\": \"icons\/32-production.png\",\n+ \"48\": \"icons\/48-production.png\",\n+ \"128\": \"icons\/128-production.png\"\n+ },\n+\n+ \"browser_action\": {\n+ \"default_icon\": {\n+ \"16\": \"icons\/16-disabled.png\",\n+ \"32\": \"icons\/32-disabled.png\",\n+ \"48\": \"icons\/48-disabled.png\",\n+ \"128\": \"icons\/128-disabled.png\"\n+ },\n+\n+ \"default_popup\": \"popups\/disabled.html\",\n+ \"browser_style\": true\n+ },\n+\n+ \"devtools_page\": \"main.html\",\n+\n+ \"content_security_policy\": \"script-src 'self' 'unsafe-eval'; object-src 'self'\",\n+ \"web_accessible_resources\": [\n+ \"main.html\",\n+ \"panel.html\",\n+ \"build\/backend.js\",\n+ \"build\/renderer.js\"\n+ ],\n+\n+ \"background\": {\n+ \"scripts\": [\"build\/background.js\"]\n+ },\n+\n+ \"permissions\": [\n+ \"<all_urls>\",\n+ \"activeTab\",\n+ \"tabs\",\n+ \"webNavigation\",\n+ \"file:\/\/\/*\",\n+ \"http:\/\/*\/*\",\n+ \"https:\/\/*\/*\"\n+ ],\n+\n+ \"content_scripts\": [\n+ {\n+ \"matches\": [\"<all_urls>\"],\n+ \"js\": [\"build\/injectGlobalHook.js\"],\n+ \"run_at\": \"document_start\"\n+ }\n+ ]\n+}\ndiff --git a\/shells\/browser\/firefox\/now.json b\/shells\/browser\/firefox\/now.json\nnew file mode 100644\nindex 0000000000..5e61bb442f\n--- \/dev\/null\n+++ b\/shells\/browser\/firefox\/now.json\n@@ -0,0 +1,5 @@\n+{\n+ \"name\": \"react-devtools-experimental-firefox\",\n+ \"alias\": [\"react-devtools-experimental-firefox\"],\n+ \"files\": [\"index.html\", \"ReactDevTools.zip\"]\n+}\ndiff --git a\/shells\/browser\/firefox\/test.js b\/shells\/browser\/firefox\/test.js\nnew file mode 100644\nindex 0000000000..7dd8d1e65b\n--- \/dev\/null\n+++ b\/shells\/browser\/firefox\/test.js\n@@ -0,0 +1,46 @@\n+#!\/usr\/bin\/env node\n+\n+const { exec } = require('child-process-promise');\n+const { Finder } = require('firefox-profile');\n+const { resolve } = require('path');\n+\n+const EXTENSION_PATH = resolve('shells\/browser\/firefox\/build\/unpacked');\n+const START_URL = 'https:\/\/facebook.github.io\/react\/';\n+\n+const main = async () => {\n+ const finder = new Finder();\n+\n+ \/\/ Use default Firefox profile for testing purposes.\n+ \/\/ This prevents users from having to re-login-to sites before testing.\n+ const findPathPromise = new Promise((resolvePromise, rejectPromise) => {\n+ finder.getPath('default', (error, profile) => {\n+ if (error) {\n+ rejectPromise(error);\n+ } else {\n+ resolvePromise(profile);\n+ }\n+ });\n+ });\n+\n+ const options = [\n+ `--source-dir=${EXTENSION_PATH}`,\n+ `--start-url=${START_URL}`,\n+ '--browser-console',\n+ ];\n+\n+ try {\n+ const path = await findPathPromise;\n+ const trimmedPath = path.replace(' ', '\\\\ ');\n+ options.push(`--firefox-profile=${trimmedPath}`);\n+ } catch (err) {\n+ console.warn('Could not find default profile, using temporary profile.');\n+ }\n+\n+ try {\n+ await exec(`web-ext run ${options.join(' ')}`);\n+ } catch (err) {\n+ console.error('`web-ext run` failed', err.stdout, err.stderr);\n+ }\n+};\n+\n+main();\ndiff --git a\/shells\/browser\/shared\/build.js b\/shells\/browser\/shared\/build.js\nnew file mode 100644\nindex 0000000000..6d2ec5371f\n--- \/dev\/null\n+++ b\/shells\/browser\/shared\/build.js\n@@ -0,0 +1,120 @@\n+#!\/usr\/bin\/env node\n+\n+const archiver = require('archiver');\n+const { execSync } = require('child_process');\n+const { readFileSync, writeFileSync, createWriteStream } = require('fs');\n+const { copy, ensureDir, move, remove } = require('fs-extra');\n+const { join } = require('path');\n+const { getGitCommit } = require('..\/..\/utils');\n+\n+\/\/ These files are copied along with Webpack-bundled files\n+\/\/ to produce the final web extension\n+const STATIC_FILES = ['icons', 'popups', 'main.html', 'panel.html'];\n+\n+const preProcess = async (destinationPath, tempPath) => {\n+ await remove(destinationPath); \/\/ Clean up from previously completed builds\n+ await remove(tempPath); \/\/ Clean up from any previously failed builds\n+ await ensureDir(tempPath); \/\/ Create temp dir for this new build\n+};\n+\n+const build = async (tempPath, manifestPath) => {\n+ const binPath = join(tempPath, 'bin');\n+ const zipPath = join(tempPath, 'zip');\n+\n+ const webpackPath = join(\n+ __dirname,\n+ '..',\n+ '..',\n+ '..',\n+ 'node_modules',\n+ '.bin',\n+ 'webpack'\n+ );\n+ execSync(\n+ `${webpackPath} --config webpack.config.js --output-path ${binPath}`,\n+ {\n+ cwd: __dirname,\n+ env: process.env,\n+ stdio: 'inherit',\n+ }\n+ );\n+ execSync(\n+ `${webpackPath} --config webpack.backend.js --output-path ${binPath}`,\n+ {\n+ cwd: __dirname,\n+ env: process.env,\n+ stdio: 'inherit',\n+ }\n+ );\n+\n+ \/\/ Make temp dir\n+ await ensureDir(zipPath);\n+\n+ const copiedManifestPath = join(zipPath, 'manifest.json');\n+\n+ \/\/ Copy unbuilt source files to zip dir to be packaged:\n+ await copy(binPath, join(zipPath, 'build'));\n+ await copy(manifestPath, copiedManifestPath);\n+ await Promise.all(\n+ STATIC_FILES.map(file => copy(join(__dirname, file), join(zipPath, file)))\n+ );\n+\n+ const commit = getGitCommit();\n+ const versionDateString = `${commit} (${new Date().toLocaleDateString()})`;\n+\n+ const manifest = JSON.parse(readFileSync(copiedManifestPath).toString());\n+ if (manifest.version_name) {\n+ manifest.version_name = versionDateString;\n+ } else {\n+ manifest.description += `\\n\\nCreated from revision ${versionDateString}`;\n+ }\n+\n+ writeFileSync(copiedManifestPath, JSON.stringify(manifest, null, 2));\n+\n+ \/\/ Pack the extension\n+ const archive = archiver('zip', { zlib: { level: 9 } });\n+ const zipStream = createWriteStream(join(tempPath, 'ReactDevTools.zip'));\n+ await new Promise((resolve, reject) => {\n+ archive\n+ .directory(zipPath, false)\n+ .on('error', err => reject(err))\n+ .pipe(zipStream);\n+ archive.finalize();\n+ zipStream.on('close', () => resolve());\n+ });\n+};\n+\n+const postProcess = async (tempPath, destinationPath) => {\n+ const unpackedSourcePath = join(tempPath, 'zip');\n+ const packedSourcePath = join(tempPath, 'ReactDevTools.zip');\n+ const packedDestPath = join(destinationPath, 'ReactDevTools.zip');\n+ const unpackedDestPath = join(destinationPath, 'unpacked');\n+\n+ await move(unpackedSourcePath, unpackedDestPath); \/\/ Copy built files to destination\n+ await move(packedSourcePath, packedDestPath); \/\/ Copy built files to destination\n+ await remove(tempPath); \/\/ Clean up temp directory and files\n+};\n+\n+const main = async buildId => {\n+ const root = join(__dirname, '..', buildId);\n+ const manifestPath = join(root, 'manifest.json');\n+ const destinationPath = join(root, 'build');\n+\n+ try {\n+ const tempPath = join(__dirname, 'build', buildId);\n+ await preProcess(destinationPath, tempPath);\n+ await build(tempPath, manifestPath);\n+\n+ const builtUnpackedPath = join(destinationPath, 'unpacked');\n+ await postProcess(tempPath, destinationPath);\n+\n+ return builtUnpackedPath;\n+ } catch (error) {\n+ console.error(error);\n+ process.exit(1);\n+ }\n+\n+ return null;\n+};\n+\n+module.exports = main;\ndiff --git a\/shells\/browser\/shared\/deploy.chrome.html b\/shells\/browser\/shared\/deploy.chrome.html\nnew file mode 100644\nindex 0000000000..eb70be0024\n--- \/dev\/null\n+++ b\/shells\/browser\/shared\/deploy.chrome.html\n@@ -0,0 +1,8 @@\n+<ol>\n+ <li><a href=\"ReactDevTools.zip\">download extension<\/a><\/li>\n+ <li>Double-click to extract<\/li>\n+ <li>Navigate to <code>chrome:\/\/extensions\/<\/code><\/li>\n+ <li>Enable \"Developer mode\"<\/li>\n+ <li>Click \"LOAD UNPACKED\"<\/li>\n+ <li>Select extracted extension folder (<code>ReactDevTools<\/code>)<\/li>\n+<\/ol>\n\\ No newline at end of file\ndiff --git a\/shells\/browser\/shared\/deploy.firefox.html b\/shells\/browser\/shared\/deploy.firefox.html\nnew file mode 100644\nindex 0000000000..d2879a17c4\n--- \/dev\/null\n+++ b\/shells\/browser\/shared\/deploy.firefox.html\n@@ -0,0 +1,7 @@\n+<ol>\n+ <li><a href=\"ReactDevTools.zip\">download extension<\/a><\/li>\n+ <li>Extract\/unzip<\/li>\n+ <li>Visit <code>about:debugging<\/code><\/li>\n+ <li>Click \"Load Temporary Add-on\"<\/li>\n+ <li>Select the <code>manifest.json<\/code> file inside of the extracted extension folder (<code>ReactDevTools<\/code>)<\/li>\n+<\/ol>\n\\ No newline at end of file\ndiff --git a\/shells\/browser\/shared\/deploy.html b\/shells\/browser\/shared\/deploy.html\nnew file mode 100644\nindex 0000000000..fa9a21b42f\n--- \/dev\/null\n+++ b\/shells\/browser\/shared\/deploy.html\n@@ -0,0 +1,46 @@\n+<html>\n+<head>\n+ <meta charset=\"utf8\">\n+ <title>React DevTools pre-release<\/title>\n+ <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n+ <style>\n+ body {\n+ font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,\n+ sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;\n+ font-size: 14px;\n+ }\n+ <\/style>\n+<\/head>\n+<body>\n+ <h1>\n+ React DevTools pre-release\n+ <\/h1>\n+\n+ <h3>\n+ Created on <strong>%date%<\/strong> from\n+ <a href=\"http:\/\/github.com\/bvaughn\/react-devtools-experimental\/commit\/%commit%\"><code>%commit%<\/code><\/a>\n+ <\/h3>\n+\n+ <p>\n+ This is a preview build of an <a href=\"https:\/\/github.com\/bvaughn\/react-devtools-experimental\">unreleased DevTools extension<\/a>.\n+ It has no developer support.\n+ <\/p>\n+\n+ <h2>Installation instructions<\/h2>\n+ %installation%\n+ <p>\n+ 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.\n+ <\/p>\n+\n+ <h2>Bug reports<\/h2>\n+ <p>\n+ Please report bugs as <a href=\"https:\/\/github.com\/bvaughn\/react-devtools-experimental\/issues\/new?labels=bug\">GitHub issues<\/a>.\n+ Please include all of the info required to reproduce the bug (e.g. links, code, instructions).\n+ <\/p>\n+\n+ <h2>Feature requests<\/h2>\n+ <p>\n+ Feature requests are not being accepted at this time.\n+ <\/p>\n+<\/body>\n+<\/html>\ndiff --git a\/shells\/browser\/shared\/deploy.js b\/shells\/browser\/shared\/deploy.js\nnew file mode 100644\nindex 0000000000..6cc33e1cbf\n--- \/dev\/null\n+++ b\/shells\/browser\/shared\/deploy.js\n@@ -0,0 +1,56 @@\n+#!\/usr\/bin\/env node\n+\n+const { exec, execSync } = require('child_process');\n+const { readFileSync, writeFileSync } = require('fs');\n+const { join } = require('path');\n+\n+const main = async buildId => {\n+ const root = join(__dirname, '..', buildId);\n+ const buildPath = join(root, 'build');\n+\n+ execSync(`node ${join(root, '.\/build')}`, {\n+ cwd: __dirname,\n+ env: {\n+ ...process.env,\n+ NODE_ENV: 'production',\n+ },\n+ stdio: 'inherit',\n+ });\n+\n+ await exec(`cp ${join(root, 'now.json')} ${join(buildPath, 'now.json')}`, {\n+ cwd: root,\n+ });\n+\n+ const file = readFileSync(join(root, 'now.json'));\n+ const json = JSON.parse(file);\n+ const alias = json.alias[0];\n+\n+ const commit = execSync('git rev-parse HEAD')\n+ .toString()\n+ .trim()\n+ .substr(0, 7);\n+\n+ let date = new Date();\n+ date = `${date.toLocaleDateString()} – ${date.toLocaleTimeString()}`;\n+\n+ const installationInstructions =\n+ buildId === 'chrome'\n+ ? readFileSync(join(__dirname, 'deploy.chrome.html'))\n+ : readFileSync(join(__dirname, 'deploy.firefox.html'));\n+\n+ let html = readFileSync(join(__dirname, 'deploy.html')).toString();\n+ html = html.replace(\/%commit%\/g, commit);\n+ html = html.replace(\/%date%\/g, date);\n+ html = html.replace(\/%installation%\/, installationInstructions);\n+\n+ writeFileSync(join(buildPath, 'index.html'), html);\n+\n+ await exec(`now deploy && now alias ${alias}`, {\n+ cwd: buildPath,\n+ stdio: 'inherit',\n+ });\n+\n+ console.log(`Deployed to https:\/\/${alias}.now.sh`);\n+};\n+\n+module.exports = main;\ndiff --git a\/shells\/browser\/shared\/icons\/128-deadcode.png b\/shells\/browser\/shared\/icons\/128-deadcode.png\nnew file mode 100644\nindex 0000000000000000000000000000000000000000..b6ecc88e13ac082da3b82b48179b8a665fef6214\nGIT binary patch\nliteral 5201\nzcmV-X6t3%uP)<h;3K|Lk000e1NJLTq004jh004jp1^@s6!#-il0000PbVXQnQ*UN;\nzcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU_^GQTORCwC#T}y0K*BL$@8$ZVe;}`>h\nz1c)G66iZFI2%Cf|uyGccNNKA^ilAwUl!p|us8b25szhq&qC{#)71|Wqh^iG;!Hc?!\nzQiZUAO;X8GrGzwugrqh@jE(KV#?PMbjE|W)^Pl@V=gz&JJ3kr?wrB3+od5Ct&s)VD\nz=;N-3yZPHL{@Tu88(4*w5?$f1bNtnNf8WJ3x(`)pHXa*(yt3(K#SD8nBb-zJkRmq!\nz2!DIGviW62*voep_ExU}_y-{Mdn)Ty)^vhvg1to=V1YX-n_vF4Ctnj(<=OmqD{GS|\nz`Zh3u)BwjT>ybDTdtSBR>Yc8vM<Qu=YQfL1P%>#37+`y49TH31Qx$(d+3|r?Wet)|\nz6$VH+)x`PY>Nag=)lJRf|FhXKcKh-tY$;qX-c#vje!Z92-1s=V_2CB<2JlKPJ054t\nzcXY9atq+oa2NPgn$1k2|;}_0Ht3I33EWPbfmVWpV*4X)=_*qAzXaCM$eX(N(!~y2x\nza3PI+!#nmLV9Pqzc>c~@cAVYh3p>*L7dCxupk&vIYi#@eGlE(D(lEc)>&ITNFn}uc\nztNG@e5F~8qPj83H2qqh^YO$-YJSP}9@eE*N^Hm8OI{7=Riwo7>_S6qq>#pxwJ0=)*\nz@W`u?GeGr=o7ep;s*^*a?ml>!Rn^v7J7&WJ-(V}co?ug7elA|7l-~9TTmRad!bEwY\nz32x(OG6RAEYg*eJ0OJ-mof(WA*hZ=WAo)6ViiLzU=L0=RVm)8DCcY^EUT$~+-yJ-1\nzD3CV5xmNE#C>X$rU~&LRA<^n);ux*n-xHdH0*JV-%X@c6Y6>D_0BqjI-~WyL8&o3}\nz)YM~;i~PSsJ-*O4+_<#|4m&a!#h^~i1TBK&ssuoY<0Os&+V{Og+ElNbud3<xAHC$b\nzVE~B02Bw$<5|3l~y+$y>rsJoJGy$~6=Py2;JPgqB{Eu06y17VYe|_Rj-^YTjhbzdc\nzs<gHmzlYt;zJHO;Pfux062P7lz#KSykWGI4AK%xAbIuIkC^9L)38Vk&i_8o}5(<VY\nzq@?xwZ_WH;NI0ZP2dpHZQ_r1K(MPp-1e^2aE6)pcZL(3&8kCy~JQG<kD;fsaLi)xw\nze0b?&>r^zD@7`bkanT-2`>eweu=N0Hwjy{VguSP*L0K~ZCH;PFsuMv<fhBZ)w%l}>\nz1syn(D*q~%e4FZ-VkAG&PumnpE}(JiH%ZC0O<<}Su2t3^JX{36@bfyZ_H`5ljC$2j\nzMX?KyF^00y02EDLz7)!FA#r}fu2Or1vHAICB`y>j3=k#?hSb51yJ;C*gA;xT8yF{s\nz0aSHd3KvKOgkJ4&{7i<U{8EHwCy8^&x`#xXfZHLdf0gMF-E*Q<`(7%EB*q~N7&{CQ\nzHaVev)jNpNElVT=gpGm`;q$twG702V-DB(quUegK1}J6q4nn)S2p?kllsX2pKof+;\nz1eD)Dof$|D1I(1@X0h?8;Gqa%U4)KxE+Uu!n4lbmB9<7yw%v8wK)87_1q;-VngJaH\nz*{lMRRI_SLT$VjPCcvf}BoRNQ!gCv57$Qa%Qdg*nw6$ANh^YyPO8TQ?fXrYq5bU%E\nz1OehmJIfauDxV@~1YH0~cRX8~ZYGm32B7?YTgVtHo03==2y*hlp&6(^ke3*O5dch@\nz20*t=v1DwqB3<noyYDs1=L8DdEr3GmJ}He@DvBf<NTozgL7<bAV&jn&bgK3##02k=\nzt|PPy5;-OvNmM3uqW^<rF@W3@b<>fb_fmKv%f2LTz@h?K>+Cen<COaKLtrwQ&4cQO\nz^x_>1hK#0Ln3vW714(3nOGONT4b5i&SvrPAbKB%nl8jt7Y-J?Yz`ac_XdN)RyeH8#\nzN+iOf!~l_M0F`8I95x%99%eW;G*HE_84RL^w{<lDxB8>44Ty{ZbU2_~6EV7c$6R(S\nz((5XDUqE`Hs|O2GN_8$(vnQ!2v8lne0eD8y@?H`KfK=zYcpfi_T1Qk5ZR57`?zm=D\nz5>rfpbIgv9Sz{Q<45gYS5Gn)6Sh|T?pI!h`w?F%&VB&_ZuMiUCR{0ameS47fB(P!V\nzMZk4}36^o~0Wgce7I2K|y`zlWCNqc50B#MDUPw;U(79Dkn-ONSrLLWALKL1p@2CMy\nz(#yCXgsO+n{Mq`wrEG3I0xjr&LkiaG%~Cfso6SkN?q)kQy?eIj0#L`NTsGhtw}cV3\nz9-|&5TdXZ#Q?a&ujcuAyD+~Zt>~-UD!?<y%=}V7q6Y5Rp4pM{#pzN*e)(so1>Dt%O\nzoT|Hb%2a`okbC&=cXo=lvtbWoZt@wybV`XNqvlXK-~npUZODUY{QSe4;--Oi<?x2t\nz;UTu7Yj@#ArJKcPW`}PSEx_8IL*%)@Q0nKyAY3<Wd+qvri>`TodYbh2sYX~dgx-4p\nzVvZRy1LFU%_rN;yQ&Wz)5!^pC4hB<AeE4r8t(P*9dLU!B-h7l@efEPV#0F6=j;<$=\nz;&2prP*MizDdnUMXaQ=`A)Tsr(lx^BQqQ@e7CFtJD_P4oJ=g=2dWAq5K(<lqq#hT2\nz<FD_CR%&pz8;4?nFxsVH;nr_pH%`4%u#g=u^pNMm00>>ncUY#Ns<w`7MTZwKcK+-g\nz)3E2cB54N0e|_RNj_1JrK%0#8ofet}lToPk#_yUR*(qA%gLEAEiUfKYn*y%&i&h~G\nzD!RtGparC)ta3>6dOg>*=~>o0bc^+8r`YAm>4Lv)s$a%Bn`+svwno;mtlASGY<aA!\nzNV<h;&P!@xj$o0LUp()N*>EnbDZDFPjib;$-1YQ3c*>UvfW6mkKDZC6J_r)mnE{M{\nzk!~MlYVbX;ZCu9&$JpLW*V&n&Y|-X}@H_kspTTFnngSZAKC@`Xbm%{b)^VGE5M<(-\nzX9mE5b@m=o4?ox>t3~zA%W$z=P%7f*M%meU_QIz_VspI`K8x?*yKcaiQoFcrIlqWv\nzS`)nDHva(U_2VIUVgN|J?x0XPUS{vO(M`<_t^37MlJT(cZlO|aV9%8sq{O=szJu?&\nzF+oPdgiy)Ub=zn>b?ab;x%3*Eb_Id5U5WxAHruEHdUWm;MPL5JeQ?8x%s9I+HW~Pu\nzhG*v3G~fS+(skO;!1a_h3vzQt{&AY!#H;U&kXX2N^1c9!Z2?wbiTrct149*z1_pru\nz9y-^{b{jR!fESlWH)}@)e16ovlR0n$hA@H9kknklTMGdy;26v|v>mC05K=h@tRtAi\nzHMr#J??2W>MzO*ec#OsJf+MitZUnS%i`<SSqk2wN$GEq!hD7U*yTU_Liz5T*f*2zq\nzhFsk?*NgOn;Of~TFUL}~AvDm3+0w)&z+4ottoM+KbYXxkTH6yAAs6nXCcQ|%1aY>=\nz@3GE~ObB-pAQJCxK++ZyP~M0U1L%-sm_>~882~2IA2q#|7e^3S<VH61a|Xp0u^bRl\nzt;wpzp(5Cgp!Tz~b8M+l$_?D;ut8XaP1eO6pwb#69I57oKAoH?`kj~1vMEt1bT7Gq\nzlylVSk|r?pXlOU$hFo<~L6s2Ow?%%AMFGF9O|_wJel8YJER>TTB91N$K*#7!%DvoZ\nzxl0&RhFRUH)8eA5$2!B^!Y4n<utQ&r2*8&Q^7?O06-j^C8UV#8UObaP7=Uv5WLD5N\nzwRo%=)@8)<3Bem%q#i4`>2o5=_^YpOvOS+%XD6?ZllDJs>DP5bPiS02-wdEDRl-Sa\nzKI<nZ{awa5Az$*k+nS883CGBnV4!-{EySju%#5?2UmXcm6Hx-=)D3OT3%I7qG249L\nzlPC%y0G_VSPgfn3PfxX{jj#Z|yKi-2E&>~^BMSZ7#3EkT9<dUy8AneHfFOe|0D}v`\nztbJ2Vpq=D}VhD{HLY~5jnyRbV;SDPTZ34c7@2UU~>fb9hRj2rI>~`Pf%<lp1=8MPY\nz`N+<CjsxJJI#2=0MWw1qZ5owxkY&@lA`_|xk79y1?rZa94)9rg2j9IT-Sec1ccS|&\nzZ$8!+HGn!{fz)Sw<{Ny~1nSa{AX%G+O4XTbgT8v+;liwZ@@Z0)p$Zr2Q?E66Izmc!\nzM{5JC;{T@RbE#fc;vZe!z<SoN;P3T{YR}abWVrqJL%<8$TIyMAjaj@6_r3b%17eMI\nz>2V0lS3lkFJJlShGsuhW2MQfJ`L?J2Hmc(Wz!N2A`Glv8Q4){3`mp-wu!(T@g60+g\nz0$)>1i66lL)^UsJdwn35kqJ<_P4>e%`Ri!ka(WhzQxuCzIO%HeIxKr5k}izh7Nub(\nziKTv@xIq;Hr<sEIJDA_3A}erX2r6N~2vE&xNw<pbVY>j>YS-N>OhbMHhfe)xj{dT!\nz(F5iHCPvi)LM;X?i`H%Y(ScER>gz0<o;T0rU7nm_J6ANa+EkTm6fw<#qx_tB(imSa\nzQT9!EN2o3`eLAX@=1{MyDxY)3uq7_#z!Pd<hf@Ff45fSEB);R8EkqPA&B2`-okI*C\nzl8(&}BboEms<d!Ri(SWgku5wsJR!^tJcpO>Ue2~P*O8_V>t^%023EU+0ag&JH=X|N\nz_K0;frQ|aW7UkyIKJo6v09at;=c6EO?1|0oi=G9p1u+H6Jb*cmZ)sordHq5sv{y_O\nz83Wj21UXnq9kP_~3(J8GehO0|-G{yyW>L|O6%E2G=pD*BRvCd=PCc-yK<kB72NCLk\nz2wXU_dp0J6h*4~r0g>U7F@d@9F<%|Qh}Szs@^qV#3ntYFb^X@hXkbw1Ck~-TAj6`P\nz%?OgSfsjhJkx8VUxr+^g9fwb!AH*?X0Ch8P4kUlVzzJ{}p(XGt6_spC7)qu^cQ9Ak\nzk{L{T+*LOb>K&OmxiQ<C>qRDRTT7i$I#y*Q{QN9u2%O8NX#k_y4jadc0aRwdd^{5d\nzP{*snuI5W6Qnh#;8@$u_IUYc2MS(|q@rJ<+m{cCav~;&Mier_cVklM&Ab?^g-Rz0R\nz3OO0nbjZ>jKYTiHFbA6q?UL`73Ac{Bbp6@j11a$RZi_VwOO64ke1fcRSG#`mN5<A|\nz+{~)e>7uc+kfi>Q>hO;ZjIz$gy9&&~)&+YV6c7TB?Bw64uu3vC05vsR<Ks%Ea2leB\nz&48-MhFln(6n?fXlBL~hAP2#npn)TNhdO4dDYCL~D#mRZ-2#XLVn-0=jr;E6|8KEY\nzkbwxI%2c_kqei1+mZE7SmJFcA^KDPf1~XuDkk>!;K*vIOwLb9iWZ4&G%Y%YASyz}i\nz252OweT4V;SlC&Zh=cd65X=As9)w_CsIu>UYgz(d+lA5F$<zQUO_pfN7ns4s?!HBg\nzkAa5}wD>cT8i0C2SScT<-0g7?l+LB3kpF&eVuHJ=GZhU`>gVQ|sBLHg6}*|0p+gJU\nz^jc!i0C9K{h>6-3fbcpE2!r4YfJ>yQ@j{4M?KUbq2B?q8Q$gS+26y4IMN(^uFK|3;\nzKA7OikFJSwv}1&}DN7SjiiaamuA+%+c!Wp@0bkgPJ;>RGhprBnKLbQTP~#>j9HD2*\nzEqvB;F26s-Q8S5T0I1qmuH5il8$c1278Yq}kD3LT0j3C_*WrhtaSJb06PHav!lx7y\nzzty?{8_WbvqT2p_YnnZ2m(IpoVK!t)85#vG=Hi{d;9VTNr?tEo06`zMUeM;_<8=f;\nzWn*?=F(ACfx>q(8WcILeNEW$i85FFj+C#LIx0kUSNCkarLY)8OHZK^U4auXR;0@XY\nzwSq-}aAlKYzzM3ol;vNsVE`)W6Xx8Ze{$DKR}g{?kVT&+;O(q9$4s$XxJvI9Mx6?d\nzi~(i{1_*QbQ+95Sls;q#@sg_B4|t<Z%qYoVRKN+^CJq%rkuZSnv9Y$sz^TXDAu4ZD\nz1&a@<r_?VPB50mK*9WKuoFwzbfs7s+WkM(quW4;lfMD8q3MsmbSHFC4@sTUyTztXN\nz@{M<tVZE@nMccBCzP!$+I`-b^WT3u4st*w7%8i!EnTQwp`JE<^CxQV|wY9A2p@$X8\nz-9kPs%nQjUm@V(xEoK$q89SI8AOR;fAF9|3(8Gp(D;<mpvUBqbOjM}$!Bl<26JqnD\nz27a*!1nDFl)5rWIi||>@7eE7LzH2ESF?Zl_V6y^Hh-#uB<^ZlAl_x-NV4OBTQU;J6\nz!j%2S11j7=AwGv86&Ov^su?aRKNFO&`9agP#|Fj-;914uMkRlIyt+YX^3;)NA-`~b\nzF+y0gFcA}7MP4M^WO4=w(Kw8T3CcXLZCn{?(}x#|G!%@DMRTW4f*UkX3v(k|J@g10\nztAwyD%mbJM+Tq&Nte73tluEHp4K?CDhc#;0QlQAM5_14hAJAYS4gj+Pskikg8!8Kj\nz*gaHvN6c*bl4StUSBH9BA4plsjR#Q^K_S_3wBt*j0mS29U+od5z|Z5+MaMDsCTu^v\nzO4@&w!k+t^SO$;;Jb)LvhS54E`vJiax5Z$HF_B3W&kXGUAk<1?O8uLJi7O1?gCNmi\nzNVOlz6#4O~B?Ii1L>wUQ1T<eL{dHw|pA`ns5Yo6ZoQwBo4JwG^OpykHDijY5aHX;g\nziKQ!GfOC~~NGzQL1N2tbA+gje!de^$e8%54RMsO|>i_<}iyNgEu(z@viKD%XZXo9b\nz;DFaFYmyjxePPd8L1u%Sg5&&cPi1||nojV|-<$6SF4DpuDw?3YCBMMjletZ<3AXdM\nz;}u|7K7bE4U#fjq2FPQCZvM85zqVJHVM%T}HoTW_{2ASc{x84)?5Ek@&+CHc00000\nLNkvXXu0mjfgeJQI\n\nliteral 0\nHcmV?d00001\n\ndiff --git a\/shells\/browser\/shared\/icons\/128-development.png b\/shells\/browser\/shared\/icons\/128-development.png\nnew file mode 100644\nindex 0000000000000000000000000000000000000000..b6ecc88e13ac082da3b82b48179b8a665fef6214\nGIT binary patch\nliteral 5201\nzcmV-X6t3%uP)<h;3K|Lk000e1NJLTq004jh004jp1^@s6!#-il0000PbVXQnQ*UN;\nzcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU_^GQTORCwC#T}y0K*BL$@8$ZVe;}`>h\nz1c)G66iZFI2%Cf|uyGccNNKA^ilAwUl!p|us8b25szhq&qC{#)71|Wqh^iG;!Hc?!\nzQiZUAO;X8GrGzwugrqh@jE(KV#?PMbjE|W)^Pl@V=gz&JJ3kr?wrB3+od5Ct&s)VD\nz=;N-3yZPHL{@Tu88(4*w5?$f1bNtnNf8WJ3x(`)pHXa*(yt3(K#SD8nBb-zJkRmq!\nz2!DIGviW62*voep_ExU}_y-{Mdn)Ty)^vhvg1to=V1YX-n_vF4Ctnj(<=OmqD{GS|\nz`Zh3u)BwjT>ybDTdtSBR>Yc8vM<Qu=YQfL1P%>#37+`y49TH31Qx$(d+3|r?Wet)|\nz6$VH+)x`PY>Nag=)lJRf|FhXKcKh-tY$;qX-c#vje!Z92-1s=V_2CB<2JlKPJ054t\nzcXY9atq+oa2NPgn$1k2|;}_0Ht3I33EWPbfmVWpV*4X)=_*qAzXaCM$eX(N(!~y2x\nza3PI+!#nmLV9Pqzc>c~@cAVYh3p>*L7dCxupk&vIYi#@eGlE(D(lEc)>&ITNFn}uc\nztNG@e5F~8qPj83H2qqh^YO$-YJSP}9@eE*N^Hm8OI{7=Riwo7>_S6qq>#pxwJ0=)*\nz@W`u?GeGr=o7ep;s*^*a?ml>!Rn^v7J7&WJ-(V}co?ug7elA|7l-~9TTmRad!bEwY\nz32x(OG6RAEYg*eJ0OJ-mof(WA*hZ=WAo)6ViiLzU=L0=RVm)8DCcY^EUT$~+-yJ-1\nzD3CV5xmNE#C>X$rU~&LRA<^n);ux*n-xHdH0*JV-%X@c6Y6>D_0BqjI-~WyL8&o3}\nz)YM~;i~PSsJ-*O4+_<#|4m&a!#h^~i1TBK&ssuoY<0Os&+V{Og+ElNbud3<xAHC$b\nzVE~B02Bw$<5|3l~y+$y>rsJoJGy$~6=Py2;JPgqB{Eu06y17VYe|_Rj-^YTjhbzdc\nzs<gHmzlYt;zJHO;Pfux062P7lz#KSykWGI4AK%xAbIuIkC^9L)38Vk&i_8o}5(<VY\nzq@?xwZ_WH;NI0ZP2dpHZQ_r1K(MPp-1e^2aE6)pcZL(3&8kCy~JQG<kD;fsaLi)xw\nze0b?&>r^zD@7`bkanT-2`>eweu=N0Hwjy{VguSP*L0K~ZCH;PFsuMv<fhBZ)w%l}>\nz1syn(D*q~%e4FZ-VkAG&PumnpE}(JiH%ZC0O<<}Su2t3^JX{36@bfyZ_H`5ljC$2j\nzMX?KyF^00y02EDLz7)!FA#r}fu2Or1vHAICB`y>j3=k#?hSb51yJ;C*gA;xT8yF{s\nz0aSHd3KvKOgkJ4&{7i<U{8EHwCy8^&x`#xXfZHLdf0gMF-E*Q<`(7%EB*q~N7&{CQ\nzHaVev)jNpNElVT=gpGm`;q$twG702V-DB(quUegK1}J6q4nn)S2p?kllsX2pKof+;\nz1eD)Dof$|D1I(1@X0h?8;Gqa%U4)KxE+Uu!n4lbmB9<7yw%v8wK)87_1q;-VngJaH\nz*{lMRRI_SLT$VjPCcvf}BoRNQ!gCv57$Qa%Qdg*nw6$ANh^YyPO8TQ?fXrYq5bU%E\nz1OehmJIfauDxV@~1YH0~cRX8~ZYGm32B7?YTgVtHo03==2y*hlp&6(^ke3*O5dch@\nz20*t=v1DwqB3<noyYDs1=L8DdEr3GmJ}He@DvBf<NTozgL7<bAV&jn&bgK3##02k=\nzt|PPy5;-OvNmM3uqW^<rF@W3@b<>fb_fmKv%f2LTz@h?K>+Cen<COaKLtrwQ&4cQO\nz^x_>1hK#0Ln3vW714(3nOGONT4b5i&SvrPAbKB%nl8jt7Y-J?Yz`ac_XdN)RyeH8#\nzN+iOf!~l_M0F`8I95x%99%eW;G*HE_84RL^w{<lDxB8>44Ty{ZbU2_~6EV7c$6R(S\nz((5XDUqE`Hs|O2GN_8$(vnQ!2v8lne0eD8y@?H`KfK=zYcpfi_T1Qk5ZR57`?zm=D\nz5>rfpbIgv9Sz{Q<45gYS5Gn)6Sh|T?pI!h`w?F%&VB&_ZuMiUCR{0ameS47fB(P!V\nzMZk4}36^o~0Wgce7I2K|y`zlWCNqc50B#MDUPw;U(79Dkn-ONSrLLWALKL1p@2CMy\nz(#yCXgsO+n{Mq`wrEG3I0xjr&LkiaG%~Cfso6SkN?q)kQy?eIj0#L`NTsGhtw}cV3\nz9-|&5TdXZ#Q?a&ujcuAyD+~Zt>~-UD!?<y%=}V7q6Y5Rp4pM{#pzN*e)(so1>Dt%O\nzoT|Hb%2a`okbC&=cXo=lvtbWoZt@wybV`XNqvlXK-~npUZODUY{QSe4;--Oi<?x2t\nz;UTu7Yj@#ArJKcPW`}PSEx_8IL*%)@Q0nKyAY3<Wd+qvri>`TodYbh2sYX~dgx-4p\nzVvZRy1LFU%_rN;yQ&Wz)5!^pC4hB<AeE4r8t(P*9dLU!B-h7l@efEPV#0F6=j;<$=\nz;&2prP*MizDdnUMXaQ=`A)Tsr(lx^BQqQ@e7CFtJD_P4oJ=g=2dWAq5K(<lqq#hT2\nz<FD_CR%&pz8;4?nFxsVH;nr_pH%`4%u#g=u^pNMm00>>ncUY#Ns<w`7MTZwKcK+-g\nz)3E2cB54N0e|_RNj_1JrK%0#8ofet}lToPk#_yUR*(qA%gLEAEiUfKYn*y%&i&h~G\nzD!RtGparC)ta3>6dOg>*=~>o0bc^+8r`YAm>4Lv)s$a%Bn`+svwno;mtlASGY<aA!\nzNV<h;&P!@xj$o0LUp()N*>EnbDZDFPjib;$-1YQ3c*>UvfW6mkKDZC6J_r)mnE{M{\nzk!~MlYVbX;ZCu9&$JpLW*V&n&Y|-X}@H_kspTTFnngSZAKC@`Xbm%{b)^VGE5M<(-\nzX9mE5b@m=o4?ox>t3~zA%W$z=P%7f*M%meU_QIz_VspI`K8x?*yKcaiQoFcrIlqWv\nzS`)nDHva(U_2VIUVgN|J?x0XPUS{vO(M`<_t^37MlJT(cZlO|aV9%8sq{O=szJu?&\nzF+oPdgiy)Ub=zn>b?ab;x%3*Eb_Id5U5WxAHruEHdUWm;MPL5JeQ?8x%s9I+HW~Pu\nzhG*v3G~fS+(skO;!1a_h3vzQt{&AY!#H;U&kXX2N^1c9!Z2?wbiTrct149*z1_pru\nz9y-^{b{jR!fESlWH)}@)e16ovlR0n$hA@H9kknklTMGdy;26v|v>mC05K=h@tRtAi\nzHMr#J??2W>MzO*ec#OsJf+MitZUnS%i`<SSqk2wN$GEq!hD7U*yTU_Liz5T*f*2zq\nzhFsk?*NgOn;Of~TFUL}~AvDm3+0w)&z+4ottoM+KbYXxkTH6yAAs6nXCcQ|%1aY>=\nz@3GE~ObB-pAQJCxK++ZyP~M0U1L%-sm_>~882~2IA2q#|7e^3S<VH61a|Xp0u^bRl\nzt;wpzp(5Cgp!Tz~b8M+l$_?D;ut8XaP1eO6pwb#69I57oKAoH?`kj~1vMEt1bT7Gq\nzlylVSk|r?pXlOU$hFo<~L6s2Ow?%%AMFGF9O|_wJel8YJER>TTB91N$K*#7!%DvoZ\nzxl0&RhFRUH)8eA5$2!B^!Y4n<utQ&r2*8&Q^7?O06-j^C8UV#8UObaP7=Uv5WLD5N\nzwRo%=)@8)<3Bem%q#i4`>2o5=_^YpOvOS+%XD6?ZllDJs>DP5bPiS02-wdEDRl-Sa\nzKI<nZ{awa5Az$*k+nS883CGBnV4!-{EySju%#5?2UmXcm6Hx-=)D3OT3%I7qG249L\nzlPC%y0G_VSPgfn3PfxX{jj#Z|yKi-2E&>~^BMSZ7#3EkT9<dUy8AneHfFOe|0D}v`\nztbJ2Vpq=D}VhD{HLY~5jnyRbV;SDPTZ34c7@2UU~>fb9hRj2rI>~`Pf%<lp1=8MPY\nz`N+<CjsxJJI#2=0MWw1qZ5owxkY&@lA`_|xk79y1?rZa94)9rg2j9IT-Sec1ccS|&\nzZ$8!+HGn!{fz)Sw<{Ny~1nSa{AX%G+O4XTbgT8v+;liwZ@@Z0)p$Zr2Q?E66Izmc!\nzM{5JC;{T@RbE#fc;vZe!z<SoN;P3T{YR}abWVrqJL%<8$TIyMAjaj@6_r3b%17eMI\nz>2V0lS3lkFJJlShGsuhW2MQfJ`L?J2Hmc(Wz!N2A`Glv8Q4){3`mp-wu!(T@g60+g\nz0$)>1i66lL)^UsJdwn35kqJ<_P4>e%`Ri!ka(WhzQxuCzIO%HeIxKr5k}izh7Nub(\nziKTv@xIq;Hr<sEIJDA_3A}erX2r6N~2vE&xNw<pbVY>j>YS-N>OhbMHhfe)xj{dT!\nz(F5iHCPvi)LM;X?i`H%Y(ScER>gz0<o;T0rU7nm_J6ANa+EkTm6fw<#qx_tB(imSa\nzQT9!EN2o3`eLAX@=1{MyDxY)3uq7_#z!Pd<hf@Ff45fSEB);R8EkqPA&B2`-okI*C\nzl8(&}BboEms<d!Ri(SWgku5wsJR!^tJcpO>Ue2~P*O8_V>t^%023EU+0ag&JH=X|N\nz_K0;frQ|aW7UkyIKJo6v09at;=c6EO?1|0oi=G9p1u+H6Jb*cmZ)sordHq5sv{y_O\nz83Wj21UXnq9kP_~3(J8GehO0|-G{yyW>L|O6%E2G=pD*BRvCd=PCc-yK<kB72NCLk\nz2wXU_dp0J6h*4~r0g>U7F@d@9F<%|Qh}Szs@^qV#3ntYFb^X@hXkbw1Ck~-TAj6`P\nz%?OgSfsjhJkx8VUxr+^g9fwb!AH*?X0Ch8P4kUlVzzJ{}p(XGt6_spC7)qu^cQ9Ak\nzk{L{T+*LOb>K&OmxiQ<C>qRDRTT7i$I#y*Q{QN9u2%O8NX#k_y4jadc0aRwdd^{5d\nzP{*snuI5W6Qnh#;8@$u_IUYc2MS(|q@rJ<+m{cCav~;&Mier_cVklM&Ab?^g-Rz0R\nz3OO0nbjZ>jKYTiHFbA6q?UL`73Ac{Bbp6@j11a$RZi_VwOO64ke1fcRSG#`mN5<A|\nz+{~)e>7uc+kfi>Q>hO;ZjIz$gy9&&~)&+YV6c7TB?Bw64uu3vC05vsR<Ks%Ea2leB\nz&48-MhFln(6n?fXlBL~hAP2#npn)TNhdO4dDYCL~D#mRZ-2#XLVn-0=jr;E6|8KEY\nzkbwxI%2c_kqei1+mZE7SmJFcA^KDPf1~XuDkk>!;K*vIOwLb9iWZ4&G%Y%YASyz}i\nz252OweT4V;SlC&Zh=cd65X=As9)w_CsIu>UYgz(d+lA5F$<zQUO_pfN7ns4s?!HBg\nzkAa5}wD>cT8i0C2SScT<-0g7?l+LB3kpF&eVuHJ=GZhU`>gVQ|sBLHg6}*|0p+gJU\nz^jc!i0C9K{h>6-3fbcpE2!r4YfJ>yQ@j{4M?KUbq2B?q8Q$gS+26y4IMN(^uFK|3;\nzKA7OikFJSwv}1&}DN7SjiiaamuA+%+c!Wp@0bkgPJ;>RGhprBnKLbQTP~#>j9HD2*\nzEqvB;F26s-Q8S5T0I1qmuH5il8$c1278Yq}kD3LT0j3C_*WrhtaSJb06PHav!lx7y\nzzty?{8_WbvqT2p_YnnZ2m(IpoVK!t)85#vG=Hi{d;9VTNr?tEo06`zMUeM;_<8=f;\nzWn*?=F(ACfx>q(8WcILeNEW$i85FFj+C#LIx0kUSNCkarLY)8OHZK^U4auXR;0@XY\nzwSq-}aAlKYzzM3ol;vNsVE`)W6Xx8Ze{$DKR}g{?kVT&+;O(q9$4s$XxJvI9Mx6?d\nzi~(i{1_*QbQ+95Sls;q#@sg_B4|t<Z%qYoVRKN+^CJq%rkuZSnv9Y$sz^TXDAu4ZD\nz1&a@<r_?VPB50mK*9WKuoFwzbfs7s+WkM(quW4;lfMD8q3MsmbSHFC4@sTUyTztXN\nz@{M<tVZE@nMccBCzP!$+I`-b^WT3u4st*w7%8i!EnTQwp`JE<^CxQV|wY9A2p@$X8\nz-9kPs%nQjUm@V(xEoK$q89SI8AOR;fAF9|3(8Gp(D;<mpvUBqbOjM}$!Bl<26JqnD\nz27a*!1nDFl)5rWIi||>@7eE7LzH2ESF?Zl_V6y^Hh-#uB<^ZlAl_x-NV4OBTQU;J6\nz!j%2S11j7=AwGv86&Ov^su?aRKNFO&`9agP#|Fj-;914uMkRlIyt+YX^3;)NA-`~b\nzF+y0gFcA}7MP4M^WO4=w(Kw8T3CcXLZCn{?(}x#|G!%@DMRTW4f*UkX3v(k|J@g10\nztAwyD%mbJM+Tq&Nte73tluEHp4K?CDhc#;0QlQAM5_14hAJAYS4gj+Pskikg8!8Kj\nz*gaHvN6c*bl4StUSBH9BA4plsjR#Q^K_S_3wBt*j0mS29U+od5z|Z5+MaMDsCTu^v\nzO4@&w!k+t^SO$;;Jb)LvhS54E`vJiax5Z$HF_B3W&kXGUAk<1?O8uLJi7O1?gCNmi\nzNVOlz6#4O~B?Ii1L>wUQ1T<eL{dHw|pA`ns5Yo6ZoQwBo4JwG^OpykHDijY5aHX;g\nziKQ!GfOC~~NGzQL1N2tbA+gje!de^$e8%54RMsO|>i_<}iyNgEu(z@viKD%XZXo9b\nz;DFaFYmyjxePPd8L1u%Sg5&&cPi1||nojV|-<$6SF4DpuDw?3YCBMMjletZ<3AXdM\nz;}u|7K7bE4U#fjq2FPQCZvM85zqVJHVM%T}HoTW_{2ASc{x84)?5Ek@&+CHc00000\nLNkvXXu0mjfgeJQI\n\nliteral 0\nHcmV?d00001\n\ndiff --git a\/shells\/browser\/shared\/icons\/128-disabled.png b\/shells\/browser\/shared\/icons\/128-disabled.png\nnew file mode 100644\nindex 0000000000000000000000000000000000000000..67b1c9a31a6dfe22567ce26e385b0be06022e3c2\nGIT binary patch\nliteral 4792\nzcmV;p5=ZTcP)<h;3K|Lk000e1NJLTq004jh004jp1^@s6!#-il0000PbVXQnQ*UN;\nzcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU^T1iAfRCwC#on34eRT{_pK`90cRf%Gk\nzR*fIo+TcfG6j0;Umc|&pSQalxG=XA_8na-$@CL=0ctMaGBt!~{CSJf26Af`IUKyoj\nzjftY$C4NN<T||Plg|cl$WY3Ru%s73XnKLtI-g)WFlS~4A=biV=Isfx~KhLSH38y(z\nzSEIS=Yf8G9=$yGG%{4J~iBzlnods_$7kx&7VPpyrkpP%)uDRu$%}6?9u2KIVf;+sq\nzT>KeLv!~X4LIOa!^NT?Z=Bo3=L7h+Lmy2H<nme`TzXPDToRh*)vj>1VrM6#4V$J7x\nz04S-LbO8X3<vbLY8tY2-Uu-c@SI$APsRTg5X;w84?(MhV?zsH&%jfa$;o;#^4?XnI\nzz{N1$wzjs8*|TTQ|MABk2Tq?pJ$moG_x4xon280nRMUXI`s%Bdt*xyq=ggV2RQmjv\nzUw#=FA0Hq1{`>FWyY05ydh;CX+O=!vJ^SplT`esw%P+a)l4W&ub@Q})M@L8ZeDTE>\nzd#Vi#RRe$zKm2g%k|j&F%$hZ;)%H8T{r20bpMU;&&+gs3d!Bsq$)lAT>#MK6+PZ4h\nzs`c~d&tDn$yFdN(Q_q403!X0l5ZLuM-gx7dG|ym%z4_*wuVe{?Gz%Z(VoyEw)QTND\nzcAP3a09-77aECqj+;f{<PA;te<(FT6=87w>=yvr?0NdQ$ysppyU`IXv_~ZM-WM>jW\nzG#Gii&V`Qf*=L`1End8Mi|rUECMGV(c<wifU`N=!Uw{4ex|?pgX-{FzK-j4^u}tKl\nzLx<MX*4F;XyB>S&vG$KX`e+5a{MTQ9RargHy!F;wcaDvX?PT{R-SvE*=Y%aj<6u1R\nzyz@>cV>HU(3a-Y+#!kk2{P^)#0HpNY>#x6lW76?m^c;ZQ|HKnd989w_qAUiF8}#+{\nzt&XF8W6s@w|NT3|6jA{C<(FUf*l-yZdF$4#dnJx=<j9fdues)$p27j(<jIp8C7GIp\nzEyAWdIyznmTQGLw)mLA=Ijv5@j{okv?_P;JMnJHA`}ThYxd{p(+@f$Iz-ZFTgMT}7\nz=1gxAnaD0|XlPi%B5U_7T)1$3lt>sE8QBuH_^^7zwK|iG5vBCoZ@-;p{=pUChJ^wE\nzELPgBufP8K3u&Iq4o4QVtEA88&Yjx@D-KRLpco$?->aE-h!J!T?DsU*1;CMXmj@nr\nzV0obc(B9tOA=$<*Y<S$o*w~m^(&y|rEDu2Fm(Q9Wfvh+8-{s1KckI})9)TNn6bb-M\nzO--$WjCN)Yu}iVB(I+%3!R)%dcpo+8%wzdz^e%l0Mqil*B%=f5CIWI%0%5no9S4ie\nz!cWd3FI%>3S6p91mNxqN^XLCNZ6S;aSvWs{pWb-mjZ7kafNI~qeJeCuT$1-$J7_#-\nzQ8iF50FYR2mVR;c0_3=+9Qqd@u;k&L^K_Cz03gVYZFgr{y`ZP3XHD2Wm}!;BIWXq#\nzwBPXZ9ttS}qIRYWLfh}|?%o-853bot?8LKY&z`EO5-LneSeUjSv<~uO$Atwzm@nT2\nz;o*x~d_M@fy1KSx8Kg0$<)T6ZAS{ySntu4<hi5bopBAYDEO3mhKp@%upMU=OP>}#o\nzk(VW~LkvLrj3^wgW6eYa1e-Q(+E}SMsbor9Rq6n)<u1=dsgpj#P3(nW(fUaqk?w<Y\nz3=R%<yMEVMvt|`r1WZm&9?jAWf^`$mm%M*i9Klp9qKR+>=~-=UZ5s(UI|e{&ULvt7\nz05Cp2K1~GNaKjDDTs?n_At~C(L=z~Iz5_?l0!XBUxeD1zoUT$Lv1$N7!9-S?F)W*~\nzZ}9KP`FG!acTJeb5zZj_B;X`bJ_K7bKx?((h%*`hRLcke=y0*SVA;}Vwq8Csgr*dd\nz#gul8S6y{ghYd%p6y;JHMu6u0`Sa5z*oEAeK4VuKu5%QV&=R1%lIcha8{ynE*~W&;\nzO!Iks^UXJXg#v)LD8WT1bZZk5=03mPz@(yCYdL}Z&OP_sv)9GA$r3g@w%=pj>|O(y\nzqX3MEW>ip10(xFP04TSlP`q=&T^3B-gry@hVVhBlTrGt70Nez8%yraQ7Xu!sd7lR#\nzd~kp8{`&g*_QG)hqj3)y00d3J<%UgP*wO41*99XLQL4<Cacy%Mk%1XW0*IOeU^qx$\nzp5x680LW4%C&(TbE?hVx12I~>!<c}%Mg}V`0&uEad+oK$jj6V@lI+}L&6bXuMU@^K\nzif0}r?-c<6vhVJ@?_PP?WtXk21Y5_e_tHx*?QxZ5goUwf+qV4@C|Epmjk*Gi2Zl=Z\nz637$)1Y?X6*PX`1!+U46Z8~lI$KP>7QX(OWOD?_i(lxH%1<OOSBv`QR+qZWT%)wiD\nz%PqGo!aBjRg>NJ6yOT!l63h~{xV+46`Lj{vHlI6pZuERYGK;(0O!!}Umh>BZCVh|J\nz)V|~5I(hQs4(WHN6gl;Kh6Da3&3y1(<}{0UbLI(zP2y;w{*4f<EvuKjZYW0Vat-x#\nz5|REsG&Hn1%bh~s0V!~Uf)^DqlIDZhgH1jp-(^mjTjtnho`Mq*0IMhTYP0A;g-0q9\nzWs<4&lfKUcNHKoQEQ&ZPp~T`0lGrtMgAxFv-VyQA-rn9ty`+sU!5re+c9p%Hn0*+T\nzcNgr>hK-Gljs4S1-fD?GO84`3NxW#RRJuQ_i+7R60GpQXKYRA<k>I_E6X{;&2oY#A\nzr_4QTkn(+!ebMatzemY6Pj*EO(sqKhiP0uAtBd#1-aYuPaR8n~m*R72W7%GbM1ZD&\nz`&rb96DN8$Y}l~FMkY%vGUy_e+^F7t6n(^z{hqe&|65#>OA|#wD@2;BFcBx|RxiHz\nz;@T^(ys|q?#M<^hNF@S5rN;jJY%s32s_hcEjCYSFYW(-u>?n!b_{9_!hV8huXZfEY\nz?cgLF%Nu``^^~ay2$T0|<&iX*o_VF2eUp=u|F(HH-;ZO4F_AVPhV_P-g@DtwzQT8T\nzZ-*eTyD>~L(UhM!*Wlpb22G}Fz_Zz{+9E^|lWYTmFwP`>W((RVZV<K}wp`H~02<O0\nz{8;EqNzd2VY?SjQYTULUNGiUxaRYQ$%BThcxScIGuCq}>NQ#s`b6G}>5{CjM1ZG6L\nzc-O97>ynP!mT==nWf75PCMA<<<HoJ)$|pe%qx9P-i;q6~=nGci>!=&hKqc*y?isGj\nzs6YMmQ>%7qymV9{g*NWEg!Ucfd80+G?YLcgDz!vb5@T&LnIi$PV8MdFNnWok8XjYc\nz+2qLEOt>`eBm{`)2p)D1U}Qr?J&Oom7T(E^KmJ%;i-#Y6xH}a9v~FHfqa#;D55Ba!\nzALP4?=Nm2%S-eV|Ak44NF3l>u%X1Yj(2)uNQa3MX-@bkCWd(pun>O`^O{C544?20$\nzl1&pQSUb)y?Q^62W!eq&^y$<6QjjVY0HkhS9?Q$>MVLs=07$y~^CUc<+Gkm}ok`ks\nzqAD9i81_9c=}yd(!gK{MmA%@iE`qHb)pUcb288_9;ta5~YMn^vy6di6uYGp=?YDPl\nz`P*bv2mfZ%jVu%ZhYueXlPK@J^UkiUUL;C$z2lBMBCC5`D_bKYBazP|Cn8Mov^C3;\nzZW<}|Oln3I3jjDdB(u!MHcm<;j)r{>7htlZo+CMxQkYr2X?A}cvn&Z|PM-q@4(v$<\nz0L|pXHl_sI^^35uHqINH$+mSWMG<T?s;D$-_xr)^dgEx-&^F_?0swXM5*Oe{iFLbt\nz84iE2R1#aGxBy}xEf>HX-M@c-sKbi|wE?89Qz`C-(W;@N#vRKFIC$`&+Cs$@2#{lv\nz-Ku%mY>r!5XDCe%LYtCuT+Y(&*N(NZ1-Z@QYiApf91^GDrB&o9EE$2wT-uan?fE=c\nzOUJeeL-T#xyhVRB%_hpJ<tTdT>0u%6nv6ohndJl2MC1gd%}tZSr{2qiC4<^drfsbP\nzV6jcu(B{JfrWWE(n#0KahGjI_<}lQxNeYe1SY-m^q*c{~#MJ$O(l`WZTyb^}JDYc4\nzoc@dF$H~;u#vCk8k>-m<j59yXXA~Dpm=2aKE7&H>CJqoJ7B5YbO%7hAF54VMEuGB<\nzY&Hv@HX|#MD;U2vXY+)GZc*r{rQ>jjD2-h@Kx%Y!bXve^U|>MBceP5PtcdrK6jl_@\nzpwC|maZ@a-Srt6ru=D-QUsyng=W@_S(rn;Vu>iD8Dq*7H;Jg6Zs$q?Xu^57GWG&<@\nzIWedtlH8ko-?slxT4I5;29#P{UIKFv^i&)%Ka_tlUr|M+-U()Dy`D}=!&t=5&d!at\nzO`k!ovC;b}52O7{Fuy)5Z$9k6$!*)VEy+4ssGWBhR+X&PG+?e#McmZX)D`DwT5Nn*\nz=NdRI4<}HAuRd+}@2Dfz^QsTDDG}GcYxI|cX_8cUw@*I#WV7oyM<)FN(gFclN`gbM\nz$&#N9YYiK+Jc<>$Y;*i8<9p<hM>^;eV0QP-jg5^RNf)0Sh%B2$WZEDCc1-}pMQ0Gi\nz0xeaEaCylO5*M)9jY&x3I(}A8zJiP9R=lebHUD_)t+z5yfT>uIAg?!29C??N;2^`p\nz!+%h`Y@0C}ouoCG3B@j!0xmA8(yd`C4gd)ZVFji|A;60DP{~El9RQx3eC@T@4i{;$\nz+2z%CdU$Sq0*!22Chdma-rjX&Ba@1qw#ic7i|us`9U2<yKXBl{1+y(^!sh*cxp4qV\nzsnX0pf6G|paeaOL{Hza}imRM@eS^_8=>4lHZ<0Bf)v>u%%>ksY+3XbQ-YKUCSFdDp\nzddiy?AD38f)PiaN^JI3|B8L$UFr)kY0RU}nZE%5N0YEx8$77Rm$hUL)2L}h|X&Exa\nzE^NJLQ`~8(1SC!$O=Fr#J(3G|eEbvuT7#3D*5<_-Bc*}GISUYuqS^Z#E|qqSIJSa+\nz%d_4g7XV1P{jQFWB@Il9zM*VIC9>kU;;4D)GxQS|eS9TZpQj>NHI+d&IqWt>X&Gk&\nzNuS}&(T;ub&KA~A8gp3<9Rz5eZSivffOJBb%LA2>^)#=LJ|mJR<tM-$q@C!=eaDu=\nzkPTNX6bEp9ZVrhVTCM`tf<G?-uAsSk`}+D;yY|Ps;&vA;02&$^D#G$$+gg2`cS<<i\nzK#K1}aFHzR^THn=Z_~KI6+Qj*)2p?!00DvKJ0J|3bxC)WSS*wX$jTFjQmCB;s3~8V\nzlELF;U6NLHU1$JgNq|5*C0x?@F(tDc4@b<E0H`ow8AO4A#fMvDdFBAr)YLS;1VDhY\nzY&ubGBpn}HC;&)ikjvxaCBn`|=?inZ;0M^cb?e?dz$hK4J!1hNnL$MJvidztJ+gUi\nzJZ^x%GZ8Zs0XGYZ;b>t1AZfvd17tGcG*Hk?J!HOS9RLEGP9#Z)EaBka@;W~_7XV0F\nzu-O$(U7`5)skG6;!=A#YDTaUm;JB_h(wbQ2)&4FQ0B8|0S51^)-^g+;>C~_7d)9$g\nz=SXOn`bJl+T?}VQ)Xi(gSpkxFZq=$)>(f3LmJj>ZLaccBf~KBV=ct9G$qu4sFY0JG\nz8)|83>9$ddXFLFoA3r|L&B~5Vs(isc*r~95P1&P>0}r2M=kqtRbEWp{o=D)hxUsRZ\nzok=+r;>5NPcE$rh>o;thx#O4hMDxhD)$;g|@rMo_T4Pg24L}G2X$~WzhWu9C0~}E(\nzrA#A4kE=q@B$QiLFvO14>g=P6CEyhI-FIJiRHYHmN|MLN^8sU2whkQQgAYFF(H7A=\nz^-D`Lb9v~-MF#+_Y}&6Joj7r#*UO{BSAe-_d%|X#qtyItTU)%~PWBGD_Wl-C`W@%^\nzxETomNUOI`L#}J+<MuzWr9A5ass;dIq987@qd0IPE0&5Jrzxb1!zl7*{kbcFej;fj\nzO;=AAo(YAWW;v-mo8REKY>u|k6w+#0{Hoyqej9$#qD9ZxX2}AYW5<rYm)B$xU|PI*\nz@k-m0cN9iWJgKHbFRBUvepX9ysK4QY=ePHYEsZVSmv!7eE*L2BGG=0{Kjn?_4i66x\nzy#N0D{ndEdNmT-%q=M-HC6xdusRTetc>&;DISqxSa{yqnoQJ~FBmkHw=b^AP;Q^o&\nz0|jLN9sr<`ay|-27uLMqhX%kfyPTIo(3z?0cL3B(DTDmKp`4!?P5(33?==YZL8YMN\nz1T%i;|Dgb-R=Kg!T+ISNO1gLzz7fgfuZ{TPoT;m^1j9wS=#x`iT{ZRpFTen&T)1>{\nSp@}{K0000<MNUMnLSTaTkuNs@\n\nliteral 0\nHcmV?d00001\n\ndiff --git a\/shells\/browser\/shared\/icons\/128-outdated.png b\/shells\/browser\/shared\/icons\/128-outdated.png\nnew file mode 100644\nindex 0000000000000000000000000000000000000000..05792b762878cd366098a4afaabebd86480c38d3\nGIT binary patch\nliteral 4162\nzcmV-I5WVk-P)<h;3K|Lk000e1NJLTq004jh004jp1^@s6!#-il0000PbVXQnQ*UN;\nzcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU><Vi$9RCwC#U0sM3$rbKVQCS!nvY3rK\nzE=*98C@ktjqA#Lxqald+`y!&7k!6h=SAEf#L?K`d2|h$43Hsu=S<n|n2lYV>W>yK&\nz^+9F9SpwofbRiL8aF&1rA?dGoj<h{>>ZhyfR`u;Z&|c@>zJ0sveCM}Lo$5#=)YH?m\nzCVg3*9!v3O(omIXC_M(!qkm{<=mK|A2g7(Uysu$;TY;fB1;Rk_gNXv>|2};=o*rGz\nzxU~&|mp|@GX?S?}3JZXg`H=dbG~?B_v?#?uPYQzmaR3;T{D%4MPxJGdpd)AV|JsaA\nzt?2vk2_}sF(btSe?I`1U$5^O$z8Q~N(%K1QaehPfq}2ex(q<fLOG{w_{@08{eQ827\nz1PuThsxeK9^~M%0T9nM3IWs#z&!0a}9z1xE9r%BYG<WXY?0)e|bnDiw<niOj*%2c}\nz<pW^wcJ11gtXQ!knKo@2dmcc5fjxKbT=xG^gnPujE?>Sp1FY(v`}+ElvuDpX01(mE\nzty?qZ%LXx)fz<`7hydI@d-g=55uyOV;lqcM4I4ICT>}Gp^ypEqKp@83-YZPl#*G_;\nzYOiPj0Leda;DEF1VNeeqJeWzEOI1%A$`t{yD_5=z?$1o@>gxJcNSlA^)F~~dK7IN$\nznLd5G@?4w)2?f*c-Mg2(c=5v88O1$9-RnyC-Me?Q-=8vNiWF41*K60V)mH<YIddi(\nzV9r*;wqLz^b)2V-@2p?H{uOVVlQP)bGTHzPg2Y4eRSd^Hf|2;0yhH=w0Ap`&FY7D7\nz6u8t@l>q<-=jP3u!q31o9a|0nU~pA78NR`hBS(zFIrt?qfRWDu=Bv~=m=Cavu7~Hu\nz^VSXku=^tEg8e>u@}zP6jq7pRgfz;wZQGR00+?_uPGa$WXeJXt5eP0{zWg$;k*9g{\nz<^}Twf@K0lHWf@VWj^@`P^FM0ZXf{;P6~;3@7|qBKF54WI~+Gt<`Zx@N!Rr++6Dmm\nz3|~=I+Yr?0;>C+un+oQ0AOPbzFQ1qP4Pq0&<Gw`qws7IXdI3PBsxh!GoFR&_IWUnb\nzCcmNhH>X`(<rk2>)ESSq*8n2*>XM+Q!8pz&K;q$p$jkzm?mA&3dQQ=Jv^4-kD)08~\nz+s=On8U+mG)Ha+wj`{FKWIlzBh7tiPlop6)I@p&NjKPNEW+KI4Jfe}RJ!_=_;4>Lw\nzl6%+9LD-NFZC80GuoW5xUc4%b2sK?>dlTTB;O(C{aYC5{vYqLx8r22>s?@IOc?|$8\nzsMW;~V5&*BO_echhcT%Q01)eQY8{@w$T1{yVOs6e0KkHLNF1b|D>gx#kAs^aLUIP0\nzzz5BlGpF$ZL{jG(P*DAxw@-0CB#+A&%B~U9vsMlOqBz)PIurxU&FWFfnCd;Bk%8!0\nzLluQYqXAq3fb--jAtaJ^Xa#Np$#rB9GWQ<^0DMk~!s+8Ye%a&@2op%$q?9YCP?Ycq\nzSrQga6yQQCs4~dJ<1Z3dvyc08;SY$OGvpe9NihKc5>|GiM3(8p@8NS){OD>Zk==)8\nzfrcqlwIquGo;-OH3;@Au0!0<U2+34+0aQ%{X$Mm=pm^n~jC`6fXq1tWk(cWgbyPWu\nzPm2CT$jabgi$gJJMF7ALAOL`=R07`J-JLNvWaW&=j*ISx=KB%pK=aUo*8DSx#-dgx\nz05mu_C{(c+Bw86<MWXvJf`e8Gi_BBV`hcJsK&0N=bv916045~06aZi_q+DlJk4xgp\nzuw+u)s{0FF9O4}Sw1yr`cWJ|+Iyp0;<4l^8$ay1h(Q~@WiL?a(Y}U{h2ME%OPzkTp\nzZ37`6S6%Fy`IH|32t)v<nnP+50iYl{p^hOk5Qpv);5-b(AYi?o&1x4~bH}M|TIC~>\nzMl1~R<y0Y$AX+>^)yFb(f+SKA49F+=EI!pCXPH1+b%R5f`J4yb+1V+z*<3~r!13u(\nzgJB|x1t2-+mHZEpCWxUp)EWRZ^9J>(W8-O6Ez~BYRWt!30}!N;n@zLH(CIpp-1<J*\nzf>P1*(6aJM0{{<(CElvg4G#<E5YsW~LJ}@=f+$)Ly$|yuqE@L=+^>jn)K5S}qI(YQ\nz{8<5jq+T^cMhzOU{F$4KA;+#r=)6@Vu89=1NGr2x+=?O06BM;mv27et=*}Re0YIfv\nzGO4Epm5_FwI(v~s6{82v&H_BXRli81$!Z7k#Enx7>faauKr$B(=WQfZy@`rL!v!vX\nzke7a2#}D9zt;RDvdi3a(1MlH8-4wLUA<X+i$bS?GLJ`aIun8v2hvaiApVsD=Sy@Aq\nzCPkvb0}!}E3f<oWbK$Q*O^X1G_wX6c(d}9$a|r3aMSzM${c8h2R%1s4VY`x+TQ@H&\nz^3Z80LF@lj&7O+39N$qTu(*Z~xM!$-k@Uyn{Tl%Q>X%D{LfyMqPsd$@%lP4Zm6?$>\nzXR_6JDlI@+P~GPYMan*bkitWU4hcV7w{D#??;HL6L>@E80G)<Ud-v|O%1EM*AA0@W\nzxN$@35SrZg&Ye4}wLF}2zI1EsY|Q|tEmS#lFvUde%glkwG1TpC#MJ~u3jnSP$5-g3\nzGeEKsOqF~oOR8(>j)yM5qX7Vy+O_TGWg|@p8Fi${<<zszwN&9K?m0I5ucZN6oy3rJ\nz-lUYWt`p~qbgo4WB&#I-#)+W(!}=mzo0F875-419$QHPj0Dy1eBrf*G4cz_d^b@WW\nz0DLlnO2Ii>97}1qNyOySXYvXFF45xB!#2IP?xqbcLsXq>ap2SmS)&GkNOd92>7#BR\nz$rDv=fvoyQ2fSs&Qx(aolwu~O3E(_iRmZI|q`M|SM+?Y2a#K=WixY_0rC$pG+_a~U\nz?isqKMP~ttt7H}T{8hL8+5nK%!GQ@b*Ug)>kk{E_&bCrW);WZTOBGi^`axQoM&Us^\nzIy!_-&a7Fpk|j%)WE(VLV<#IAx)@yme3(4Jq>N~?Wps2@YM(K|bm`Ki?EZ8%oGLOO\nzRZX%@r)WvKXmco?$*M|)fhgqU5;Qb*s=NMPMBLOV1`$#y8cdiBl`~3H)+XkF3RqPP\nzl+`F!LHe~d01+x#@W2ZeEExA0q<}nhtm1k2@S&0Ow`$d@aqsWnzdzF|kiw}`r;gJ=\nz_)Xl8PK6DobSWK+?-exyB>v*Xi<!oO*3j`ojvYHD1RSnmyIozYsMN|J)y7H`I$^+d\nzCP1J@iyDC1yyw*|x9L)d1`FJlcP5)&P3xSP{P7R7lJ9-DGyD6=7o*8fcRox8KmSjB\nzCZMRARqfX?IEWIc4vzy%vG|jyIC&zQ26nmgsIIwkF-@LlKB)W6$;qGlzLfzZN)wPL\nzsOHnBPqWTpp22X!wr}5_`3g|wdEnqPPW=~cFfG6=Y5}No+(#?40F{|>j-RgW|G~1Z\nz<o)-)Auy#Avg798TH`=ESsY5`)+XgwwA&^YfE2%n&$!<HRGQ8?d%m47Zofm>J&Wl2\nz)weT==V;jvKTCb7(RejLaq!_dVX>obvnGU(U_4%nbo}^n*1SOTh#XN!B*5Ww-kqzD\nzq|GRF!@hSne?3|GqpvA6&7|Zn*N3YCfV>R^10dPNkTOIwg0pAOemTH-uNparO`A52\nzQ^NordJmaIASMK7Rg_NvV0DXRzH<C#XKG$XbH4Lh^68x~GsiG`6Cg7UR3C3Uc|^;s\nz0WyS{=o}_W2m9&~!1V?wMk^}%@Pjv#9UsilI``8%Bgy98e^eI$MfC|F*mexjAvlBi\nzwf8Q11abL(lO4&ryC)~tue@#aEC>sInt~vWA^`&Q1awih9g<9UCI9WAo@DLn*NuJy\nzCSci$&*I7h*b+qmRVGNi3G)%}n=+qr18^GK3IJphM8JUk#_S^!DzP+C5D_;+%G>@K\nzrGINj>NogG4h3rzDQcQb?Ny8EV_JHJgWASYui#Ls-^8at(kGwsGfqCG%zt<D8_BUh\nzebF9100=4KVq{>t#Vdu3<g{@qVK{*%V3D0K>j-9=^m#t=-{ky-XURzVO0;&(>uiF^\nzM{+2b1`vgXWr{cQy@sG2IL8vEMK?>xW&32sF|wo&$Izeua%h}~|Ix?)O78r9J{v;r\nzOTSZjAHdhH8LDmIbR!fFMBHW)GSv<HEsOI-T7jDlgcFGbQRM;PbJq+mC96}zC_4vE\nzsp*n9*ln5f_B^Nh^EAS|5BkN=X0|5)T<w}coykNb+X2jUr!k$R&khUEUlvZ<IFwNU\nz0JhqP3CM?&vMydC69f|>+iA>{K9s0_TS7vq?KFUEQtbeiXEp~4kZPwfVThaB=`u+l\nzljIPhg-R!aTtomm$r{z(z_PuCx$mpUwVf9K##>I3L(u@hM+voTo*r6=dING!Uzvsu\nzu5Gj`In*{`pf8f`4a}LM{NBPL?X!xuAji->xji(1Z}Xy?z%e;@T%0b+;&D<eqE1cK\nzj_=z#o3#J{MFuLy(rTcxDj9a!gx-0lOBg<yBztU=L&0_qjcr>vVt!d)M3wXrnu}le\nzBy+y~+AE2lEhVOY;dGX*9Et`2_}gbiFFbuN%V*1cNbQ!AbM`Lg`pNMWrIssW0(@!&\nzgnGW1Pf4FvF6M9<dPcK*xUarLU_2M<xnRC+(g!79kX#%#OTx1ID3Kfr0sv9oA2otb\nz<K(dwJY15;1@mo_KIi+NW%Yir-#FH67)<u<A8M&43IYI8-rr@lF!Bs2IN|aQhzMLT\nz-!|#<(Z~ND4~h%V*jYlQFOt;{zEMp8kgc{Q)bFb{ws6(F!8Yl`sr=6^OaYux6D<(T\nz2^3A#=rnv#NxiIr6m4wbf=rV>t)eU+vG1+;0U#<1&ri~rL=X55q@Dwh%Z)9{CVfPN\nzVo}kxZRZl;l<KC4gB68>?%%&JEx?e~2+)Sqsujt&hU<PkCd<2I1Y7@`-~IDtq32g6\nzWHX$Ued#VM3km?(d|7h`00EkUretYTX4<4#I=EvEC0sXYhGbnhJ2!aTuR{QUDmfGs\nz03g{mbT&?=X#uB+<L9&3!zIDVL}(eM4?yHnJ%i!69zr}{Y2_FlKUs1}rKy4gfadFM\nz7)FJlsQr&=OSURd6mtQz#@^IkQ(Km@8&;NcuD+}cb7B8gNu}UEfGDhkXOG@N`F1n3\nz#vcdP5OST&TR{i`eXiJb#eDP@s2l(qs-X#Jr~yDj4FDPn1%RPu7-~yH0Kh;q4z;BL\nz0HD7ahuTtq2mVb%!AE#$#-m>9Kc#Py6WH5~N9`!%c{WopJUl$ql~VfOMa{U>f{vup\nzf8r$o#z1f-#Q@B}{APUGnogz6-%fwLGFO;_puf=sZ7=!T^KXosEFRMYpQQg?njT%v\nzn6-z)mmX_L?dPdO_N_EJSd+f29s@%YB~*{;0|@m}#$Vu0`o91J0O>$DjDqRRa{vGU\nM07*qoM6N<$f@qJob^rhX\n\nliteral 0\nHcmV?d00001\n\ndiff --git a\/shells\/browser\/shared\/icons\/128-production.png b\/shells\/browser\/shared\/icons\/128-production.png\nnew file mode 100644\nindex 0000000000000000000000000000000000000000..b9327946441f529cd5510f8ee14b788f0aaea1df\nGIT binary patch\nliteral 4577\nzcmV<75gzV|P)<h;3K|Lk000e1NJLTq004jh004jp1^@s6!#-il0000PbVXQnQ*UN;\nzcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU@gGod|RCwC#oo$RBRTal)x6ld|x)KV)\nzqHIwFsX;VtLd1k(G!aZJCg2BXqEJbIsPuzEG=MLV7<`GK#$qB=5~_(Mk>vv~k<jv?\nz@S#L41_Ud1MOx&gy5$`!;QVIyEYo?;xpQac&NI(GGbh>Zc3+<7&OQJ0de1p`By!Ni\nz#KhV0r`7StD*hXFG@ocH{@4<KOioQr-ERHTh{1RmzM*6KP=Vos7zkUkKNwY*|Ks@6\nz=8pM8MeuU-EN}Ot1sUce^%r;hHMDf<*x1;_^z`&(4*+J-(J_Dc>691*V=)Nsnezc=\nzZT{wNZ(2oX;1h@su%X+J)=|Rqk=ao1cin!pl0G*&8|Qb_PFf8BR(1Q(T3R*Q#ry5f\nz4~%wu&~EAg&~iFpkQcXj;)H0y!G|PYzwye8(aTehNAqF5d_G|Dq49bji~jfWi_r^@\nzKGXrgmzJLX+31K>tD{3tTA}_N5WMn_$D@C5yD$D|Hg|Qv;zOc$tvDk(Y~?4C_40p<\nzp1c2!=-Dlk0|y530B;S#LfF9fUwTcnXz9`3e}i<fu}|N5YxMeayZg3Q*7%-tFG;{!\nzl%BqGV>ETk_d5V&r5@&2A%O7DP3vm~LKVhmwb-NIU7G;7^#BOL{H%mMb=&%&n~Q2c\nz=A28Sqs}@%*lPmVzy18G#sRQkY;5e?O}#l1b;8%Kk46_R3ig_Z9Dj0j<R{OKUfaDh\nzdUf|y<<~oG<r&dQSKkyZS-!&S_p$M4App2=>~N>U$nW9Lv{nNk`Ib6mBeCsiM-NFn\nz_}CK?rwhj9`3wB*6YH-kr44wm_g!*L@;)wtiM-Eq_fPgjDZIu}XRV3eedhV9gUGu6\nz_?0soH3f|U0Oo!4XLqSTLp7ozt40j6$&deVT_Nuq=|nTR0Hy)d1tzozubU+tLd;g{\nzOaRUl>bflRA=D?o%V%ColQPT;AQ>4M@d5#$`rtR$n;{(%57VY@`GL2Id2`=?qdgDa\nzotUPqxjQg66VKecseJ%A?xHJuHW_Jp@;5gWek~Y*6v1Rm8}R+b6DLM{w{J}tVwog>\nz>2ff4{N#%0r5%4Ryhh%0-}Li|`AQRh0w5;Q)dV$?3Pu%b>a}WoOc?m^6`waVhT_m=\nz-y0w<|JF^WKY|%~<U4DV^;NOgFj@;!^ZbmV0|1Vk78{3%;U&hl%n0B+`MTfE*<-QK\nzmgc~0;HZVl;Nds)uIa>f0pJ}+j4RSH8SM3uQhW(3&Q3Gka?V8MBl#h{bPY&FvY(-;\nzk+T3z+Uhvy5tWNapY=CH?ORmD87-=zeD-6gHGt*O*Fi{Jk+iF5k2;v|(gLmb0qRVK\nzAa&UBJT1c-T>eAdj&W-MkX6V1$b?Bk$VGVh{ir$6-b3mhT4@6Mkq-xS_yR7P_`>CV\nzk;JBA{(<%Z>L!=BpN$ThQpc?YK;2$289ra8${~=ex~D2N8TJhX0Qy<I<0{~I>b4tI\nz{{yg~3F-oY27rF<NoxQA<BvJ#V$<Oxb!>%*fB>Ih7=>aWeSpw**Tuk@I>L=}9yv7w\nz7Jx!l0d*$8f%cGLka+x>3Wwp@6fvie)<F~?3Vm3U1wd2MKTrTzvV3K**T;#o>?|r@\nzBQ%1Q0J2^$l%{JP0BD$~OD&?ZHHno(kSpngX3&x}J~@Q>=m0hb0F4P+dN`!r_s#Ov\nz?G$Q9zfA(5k<&o!Fr=yz=#o;YHE>n?r0G8oZB|1^w95;RZmZOhq~$#JKC-P{01&2R\nzna<|;oRrBXir>KhQLUC4;eA|3zeNa;$r=F_AFn;TYp%pQ?_5LEbgk0>5Sx_+01Qn7\nzKuX6@n|Vy`C*@Tk^K3I(XIJuBo@u6OwD%yal>opI%&J)$EoFm|lseO~wQXp;X4ant\nziKW?^t_^4m0G1yxtOqfc)@b@<u<wl_glN)E-A{Ecs@XSG>-XAlJez2F?+XBs>ZPZz\nzPE>wB)H)#_Nu5xICajrCVht3$2T~jgFam~t%@U{;05iGtHI>vl4w4LoNKf3b`U;Vt\nzyvm=lDqM>sSP#7jtWz`x&McqtW2!zoW#l2jTsr{r8X|p2rfFDVm5Uj5Hd~Si(hi3J\nzB<15S4Or!PndkY}T^kcHgnqWskc=nM@{yn3l^ntPKCJdYBIVY@TJr=#&jrw4Uklj)\nzWZr?1wjaKdJu{!+;$&~x<B(=FNN-@$Q2CAZ(by@c<@WmXz<VCNC)vy$H(ZhQ#$}sC\nz`JUA=%LZth4PgHM%WG@3m-P1mfWtrb>7JkQ3@}vdI~-rVw&xjn9kj;o$(xh4zwydT\nz$#c7y%iaPunoQ|43{gv22>{r+6Tg0aqVn??FO8p1tiL+>S~_d@?R`Ev@>A#bARb3(\nz-}IiI?;row>(uwc?q`3$4r1LTrVbik*0Z*^V&-d(o7M;mSf;mcodW}31A3Us>$rRe\nzo}Wlc5@%IH$<ZoOk7t~h6{GCx4_`hrVUQN$SUrJ64Vn$sB!rFY=Lk8gNfb4mjRven\nzSgRF|J>pby+l3!DOV-k+2Od<ZS16?cq>b8=dKSI=jtxmG_4J>%<|1^_((xV@dC<|z\nz67`tg$m70rrTSif{n0wJ<=fI+!Wj7|l8)th7R;(+?OFCbaQEE*k3DZ)k2LdMPyYIb\nzTyukTKYQ<{L?aMUX#36gFiF1i4=QB>ea5DM+M?bn(vbD8c`vk#6lu7Qd3_xzOck$b\nz#q3BQYxmhm>It>iVsFxiT9V$*zE6<|fcIiutlz3}6zx-V@KhlUz~l@ZJ&hz3;^B%&\nzW8w$Iwwoy)y$zg)CIDbVwWD0r{!S0akH7!WwYMf~cR5+ub=E=mGS8Fu9F{}K-?MH2\nza`<VzKWEKF{T0y&_(t!HwWT(I3Qfa%7Xg?z08smu<RkSUuWDX93oa1NMlSo}<*L*Y\nzMdYb&n1G{NWD*%0IribxlCdr>5a19>(kHua)&-cdKLfPvS6Ko$tP22Wj$+a2V_r@m\nzjJIm*VLU3TDp~b-Bz!bmi!|h^YSvwL2B9Qxd>le6T-DYcVh%!H2Q%i<H#MEB0i<0@\nzlc11o)NdxCj~-rWgt>8P9M`&i2`S5Su8>I7ZdMwtb>kQpHIc5+T6=GvIqQs;)&Mvj\nzR_GPFjanO@Vrh#!)o-o4DEXwceKlYmIen{;)n|^P7XUQXFQd{zlT6w4@xaThy9~)h\nz@H}VGXVxF*8+GL+EFq`_04s^%E2(8DkGVe5ANoAsr)MGW93ovBR)^qdTEOQd(g^^o\nzRJ+ci1;QNHM*2v9=wc3^*OL>ws^+Z<2(<9G5&*PmUZV2qBDn*gtn@cYE+*GKcBX6y\nzK9B<<ET?ObnkqGN`3g-=0xJyw>fJ5hpe};RmIJ3%+YS=B8c%#2ve4l3@j09Tu(C<n\nzdAA`cZ=-y=dqO)~zC)&68p<~;D=RdbQ2LyZIssrE)mAC@sv5qb0enKdkd7+Vx>cmV\nzZY^NXL71!t0L!tFQ^7iz?*lBK%?{;tTOn2v=`Z?x#Wd#mW`$H`4KTBj8_fyVA@BNu\nzI6SH9C!{x^sumz3$xC=iEu^n=o0n87Dlo2N@?cSbb;ca>!Y7!jIe1ov&8iMc6Qf_M\nzR0{dDl%v-5WSK5Fz99EuzFi!9qxW-r9S8Fu)@2MhA7si%;8Z!}IQlbd)YpIPdzVI|\nz2QKQV7~;Ugs=*VIn>zU0qW2L}V44@ZTQ!PrS1G-29&wkA+j-C9F1pIpI=ps~G`)8o\nzfDD|qAux`T<tnvlno5_$6D!TC)!=E&<m51~zAkM#eCGvQT8NCGE1^}^8DxK{0kq5?\nzQeX6prcgzYb^It2Np%d`K>Fr=iPsxneW9Yt)+a?5NV0DYo{O>6*S)%HXHtTV1j;)3\nz5Xsp!d9zowj;lsdj(qvh_RCfFZV4Fbo;|Y69_#;0tSyUb;ZmJJKDM6?M{D@R&|1e0\nzOre@MP24i3NjwtX?>1|zP$gR<VRbRNuC_`4tyNf(wfSX>a!RFwc|hrhb1j|+ciqL4\nzR&73UyrtekM<YH0U|o8VRr}Tvw^sHpHeO2ZEs&*!1n^g>$SU0!f|}%EH3u#0^pH8k\nz?j1b7ELn6~#ailLE1a}y@YuAnWzl7vFuI_$N+YXAQ7e1TngN7h{Oq;Sve>LpNb0(E\nzRH6(_P1V~`gEWWA1TEh@J)1NWr{9;9fn`gbHT9ncly%`Ge^d8qq17Pj>PnW2sx;Nj\nz^N<_xO%SnfA@4N^+8yj`vwV_IE^n6i(CXv!x^zQ4UtWv2MV9|kBqQnTQ}x9JSdxud\nzV3BygWgi%`LUHIp;}gl(*^T9piijgCHM}3*eVL0LeTWHRnrf!!aeDg$`<V%9_euI-\nz`i?#CveJ7Y(Fxk34((R!fCwI1x^b%Jz$IKm^+^&%(*i!yScWXElUC(26e7g4%8Z1%\nzO<Lb(1j%fmBKEE<0TMEkY4RP$2otlFP%}4{*L%BXzemIL9RL~_LRIe0XOiq)Q{&<q\nzDG76pXCG#=QqfJ$3T$jnpp{7B1P_%<ykB+5Qq#<qiJ{CFmar`w!Z!VUjR8QLnk_{P\nz*^F9xWUM$@gHjuqK2P8SU&D14BGbgO!qAi!7$^;Zq*!*64=p_`ufwKVDPg41*YOnQ\nzSpXB8UG%^!4f3q-1HfAc04**qlif;h989(<WPA=^(jlJ)0J(IcN@%9dNN(Nr@frX^\nzOwA^PsA-8JcLBn9E8fRHsk%lDgiZE4Gy(ukx<XwaYcUBmn^(vRBdkj&EO1rPSm``N\nz>oh<J^>5jG>rjULgJmM}ZW;?2wq^m^<XHSh0HAf-h8&x&T@5G1NuHK~LOW<7na{1`\nzRRLgW#a3y6(D&w~FNe%h_AX)9-GEh{zB;wtyahnWOCnw5O0mi<;jY_3(IRz(XRW_J\nzzMt7IB-pwO5D-|o12jn8E!}x$u~jCZu0#kn+`0?Ua=v6-Yh7e@UAGzlb&?ANntiq|\nzldjVV>;TY*Ff$JXKED%!2I)4mp}jtSkg3Vk??3=RbIR(D42ZMyu5FR&piO{LyHI;*\nz0icCJb>_nf^{D3cQN8^DftLEM+w2S!05mVSF11LEZ-shjA}cxo1a+0HY2a$gF>C|?\nz{YZtvL>O=7{>9;Qg@|%7Mo6-TShflP*0r&r%z&tIR~xl3UcR;%z|pX;`S2lYoJ;GX\nz0L>8$A#JF9mklSomz8?f;wl&kG5_H0^{w&Ri+)ki&Y(ibTez@idIn6>ZVU5Oty~Pj\nz4P@4ccp5l3AJBT}`Q9`4Zpxj1fUok>j)zO-^Q|lI%G@9_?*YIAYtleVRo+b<SzG<y\nz^VUTlxa>O9gvii_XMVpa_w`5v&(s92RDndx8tbMTnIab7by@?Rd@hh0N&p~1TB|p`\nzcU;%<>h7IR#|SCqMlRZ^mn>i5G&QLFBK?9ecJKDB=G{DE7HDfnV`N+2vjC;-+cnKA\nzR5er?YNRtL%|xwjI_(_MLM}E^O2d7pZdRF`kyhJQjbK)i<&x{PS#q_)x!T}c0RYJA\nzx33yygzTX&I{(0zniy>}Z~%bvMxhkRFSw?eRVC~=8X-iu8uGrSc@F@e3n`mqd`KY3\nz^wB|J{=fhr9m5}Uj{o)Oc<lHHO>HJxiy;ucE$^%opbk<!z(4^YEnyNNNH3rahLC1U\nzY-dvkC>9uIvYGqm5oX%j9`n8ss{=qseWlTE3pxOF)B&KQHUnU)+lJQC6ad)L?L%v6\nz3jmnx_Mx>jIl{kjD7ceP-F~!7{l~OSoWKjZ{b(H}JYT>+)6>&aV=={Fp4#n8E9m-I\nz`hPJ8fLRdS6Jr1~a7wp7LruSmnLk&2xgh<M7zC4@CK!6j->>p^MEkASDO?qQ+R!<M\nz!{hK_^JC`sg#06}zlwoycKnIUZB}()n3qh4;gd1rZ?}Hw{{jpEPJO6BgYGht00000\nLNkvXXu0mjfqT|45\n\nliteral 0\nHcmV?d00001\n\ndiff --git a\/shells\/browser\/shared\/icons\/128-unminified.png b\/shells\/browser\/shared\/icons\/128-unminified.png\nnew file mode 100644\nindex 0000000000000000000000000000000000000000..b6ecc88e13ac082da3b82b48179b8a665fef6214\nGIT binary patch\nliteral 5201\nzcmV-X6t3%uP)<h;3K|Lk000e1NJLTq004jh004jp1^@s6!#-il0000PbVXQnQ*UN;\nzcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU_^GQTORCwC#T}y0K*BL$@8$ZVe;}`>h\nz1c)G66iZFI2%Cf|uyGccNNKA^ilAwUl!p|us8b25szhq&qC{#)71|Wqh^iG;!Hc?!\nzQiZUAO;X8GrGzwugrqh@jE(KV#?PMbjE|W)^Pl@V=gz&JJ3kr?wrB3+od5Ct&s)VD\nz=;N-3yZPHL{@Tu88(4*w5?$f1bNtnNf8WJ3x(`)pHXa*(yt3(K#SD8nBb-zJkRmq!\nz2!DIGviW62*voep_ExU}_y-{Mdn)Ty)^vhvg1to=V1YX-n_vF4Ctnj(<=OmqD{GS|\nz`Zh3u)BwjT>ybDTdtSBR>Yc8vM<Qu=YQfL1P%>#37+`y49TH31Qx$(d+3|r?Wet)|\nz6$VH+)x`PY>Nag=)lJRf|FhXKcKh-tY$;qX-c#vje!Z92-1s=V_2CB<2JlKPJ054t\nzcXY9atq+oa2NPgn$1k2|;}_0Ht3I33EWPbfmVWpV*4X)=_*qAzXaCM$eX(N(!~y2x\nza3PI+!#nmLV9Pqzc>c~@cAVYh3p>*L7dCxupk&vIYi#@eGlE(D(lEc)>&ITNFn}uc\nztNG@e5F~8qPj83H2qqh^YO$-YJSP}9@eE*N^Hm8OI{7=Riwo7>_S6qq>#pxwJ0=)*\nz@W`u?GeGr=o7ep;s*^*a?ml>!Rn^v7J7&WJ-(V}co?ug7elA|7l-~9TTmRad!bEwY\nz32x(OG6RAEYg*eJ0OJ-mof(WA*hZ=WAo)6ViiLzU=L0=RVm)8DCcY^EUT$~+-yJ-1\nzD3CV5xmNE#C>X$rU~&LRA<^n);ux*n-xHdH0*JV-%X@c6Y6>D_0BqjI-~WyL8&o3}\nz)YM~;i~PSsJ-*O4+_<#|4m&a!#h^~i1TBK&ssuoY<0Os&+V{Og+ElNbud3<xAHC$b\nzVE~B02Bw$<5|3l~y+$y>rsJoJGy$~6=Py2;JPgqB{Eu06y17VYe|_Rj-^YTjhbzdc\nzs<gHmzlYt;zJHO;Pfux062P7lz#KSykWGI4AK%xAbIuIkC^9L)38Vk&i_8o}5(<VY\nzq@?xwZ_WH;NI0ZP2dpHZQ_r1K(MPp-1e^2aE6)pcZL(3&8kCy~JQG<kD;fsaLi)xw\nze0b?&>r^zD@7`bkanT-2`>eweu=N0Hwjy{VguSP*L0K~ZCH;PFsuMv<fhBZ)w%l}>\nz1syn(D*q~%e4FZ-VkAG&PumnpE}(JiH%ZC0O<<}Su2t3^JX{36@bfyZ_H`5ljC$2j\nzMX?KyF^00y02EDLz7)!FA#r}fu2Or1vHAICB`y>j3=k#?hSb51yJ;C*gA;xT8yF{s\nz0aSHd3KvKOgkJ4&{7i<U{8EHwCy8^&x`#xXfZHLdf0gMF-E*Q<`(7%EB*q~N7&{CQ\nzHaVev)jNpNElVT=gpGm`;q$twG702V-DB(quUegK1}J6q4nn)S2p?kllsX2pKof+;\nz1eD)Dof$|D1I(1@X0h?8;Gqa%U4)KxE+Uu!n4lbmB9<7yw%v8wK)87_1q;-VngJaH\nz*{lMRRI_SLT$VjPCcvf}BoRNQ!gCv57$Qa%Qdg*nw6$ANh^YyPO8TQ?fXrYq5bU%E\nz1OehmJIfauDxV@~1YH0~cRX8~ZYGm32B7?YTgVtHo03==2y*hlp&6(^ke3*O5dch@\nz20*t=v1DwqB3<noyYDs1=L8DdEr3GmJ}He@DvBf<NTozgL7<bAV&jn&bgK3##02k=\nzt|PPy5;-OvNmM3uqW^<rF@W3@b<>fb_fmKv%f2LTz@h?K>+Cen<COaKLtrwQ&4cQO\nz^x_>1hK#0Ln3vW714(3nOGONT4b5i&SvrPAbKB%nl8jt7Y-J?Yz`ac_XdN)RyeH8#\nzN+iOf!~l_M0F`8I95x%99%eW;G*HE_84RL^w{<lDxB8>44Ty{ZbU2_~6EV7c$6R(S\nz((5XDUqE`Hs|O2GN_8$(vnQ!2v8lne0eD8y@?H`KfK=zYcpfi_T1Qk5ZR57`?zm=D\nz5>rfpbIgv9Sz{Q<45gYS5Gn)6Sh|T?pI!h`w?F%&VB&_ZuMiUCR{0ameS47fB(P!V\nzMZk4}36^o~0Wgce7I2K|y`zlWCNqc50B#MDUPw;U(79Dkn-ONSrLLWALKL1p@2CMy\nz(#yCXgsO+n{Mq`wrEG3I0xjr&LkiaG%~Cfso6SkN?q)kQy?eIj0#L`NTsGhtw}cV3\nz9-|&5TdXZ#Q?a&ujcuAyD+~Zt>~-UD!?<y%=}V7q6Y5Rp4pM{#pzN*e)(so1>Dt%O\nzoT|Hb%2a`okbC&=cXo=lvtbWoZt@wybV`XNqvlXK-~npUZODUY{QSe4;--Oi<?x2t\nz;UTu7Yj@#ArJKcPW`}PSEx_8IL*%)@Q0nKyAY3<Wd+qvri>`TodYbh2sYX~dgx-4p\nzVvZRy1LFU%_rN;yQ&Wz)5!^pC4hB<AeE4r8t(P*9dLU!B-h7l@efEPV#0F6=j;<$=\nz;&2prP*MizDdnUMXaQ=`A)Tsr(lx^BQqQ@e7CFtJD_P4oJ=g=2dWAq5K(<lqq#hT2\nz<FD_CR%&pz8;4?nFxsVH;nr_pH%`4%u#g=u^pNMm00>>ncUY#Ns<w`7MTZwKcK+-g\nz)3E2cB54N0e|_RNj_1JrK%0#8ofet}lToPk#_yUR*(qA%gLEAEiUfKYn*y%&i&h~G\nzD!RtGparC)ta3>6dOg>*=~>o0bc^+8r`YAm>4Lv)s$a%Bn`+svwno;mtlASGY<aA!\nzNV<h;&P!@xj$o0LUp()N*>EnbDZDFPjib;$-1YQ3c*>UvfW6mkKDZC6J_r)mnE{M{\nzk!~MlYVbX;ZCu9&$JpLW*V&n&Y|-X}@H_kspTTFnngSZAKC@`Xbm%{b)^VGE5M<(-\nzX9mE5b@m=o4?ox>t3~zA%W$z=P%7f*M%meU_QIz_VspI`K8x?*yKcaiQoFcrIlqWv\nzS`)nDHva(U_2VIUVgN|J?x0XPUS{vO(M`<_t^37MlJT(cZlO|aV9%8sq{O=szJu?&\nzF+oPdgiy)Ub=zn>b?ab;x%3*Eb_Id5U5WxAHruEHdUWm;MPL5JeQ?8x%s9I+HW~Pu\nzhG*v3G~fS+(skO;!1a_h3vzQt{&AY!#H;U&kXX2N^1c9!Z2?wbiTrct149*z1_pru\nz9y-^{b{jR!fESlWH)}@)e16ovlR0n$hA@H9kknklTMGdy;26v|v>mC05K=h@tRtAi\nzHMr#J??2W>MzO*ec#OsJf+MitZUnS%i`<SSqk2wN$GEq!hD7U*yTU_Liz5T*f*2zq\nzhFsk?*NgOn;Of~TFUL}~AvDm3+0w)&z+4ottoM+KbYXxkTH6yAAs6nXCcQ|%1aY>=\nz@3GE~ObB-pAQJCxK++ZyP~M0U1L%-sm_>~882~2IA2q#|7e^3S<VH61a|Xp0u^bRl\nzt;wpzp(5Cgp!Tz~b8M+l$_?D;ut8XaP1eO6pwb#69I57oKAoH?`kj~1vMEt1bT7Gq\nzlylVSk|r?pXlOU$hFo<~L6s2Ow?%%AMFGF9O|_wJel8YJER>TTB91N$K*#7!%DvoZ\nzxl0&RhFRUH)8eA5$2!B^!Y4n<utQ&r2*8&Q^7?O06-j^C8UV#8UObaP7=Uv5WLD5N\nzwRo%=)@8)<3Bem%q#i4`>2o5=_^YpOvOS+%XD6?ZllDJs>DP5bPiS02-wdEDRl-Sa\nzKI<nZ{awa5Az$*k+nS883CGBnV4!-{EySju%#5?2UmXcm6Hx-=)D3OT3%I7qG249L\nzlPC%y0G_VSPgfn3PfxX{jj#Z|yKi-2E&>~^BMSZ7#3EkT9<dUy8AneHfFOe|0D}v`\nztbJ2Vpq=D}VhD{HLY~5jnyRbV;SDPTZ34c7@2UU~>fb9hRj2rI>~`Pf%<lp1=8MPY\nz`N+<CjsxJJI#2=0MWw1qZ5owxkY&@lA`_|xk79y1?rZa94)9rg2j9IT-Sec1ccS|&\nzZ$8!+HGn!{fz)Sw<{Ny~1nSa{AX%G+O4XTbgT8v+;liwZ@@Z0)p$Zr2Q?E66Izmc!\nzM{5JC;{T@RbE#fc;vZe!z<SoN;P3T{YR}abWVrqJL%<8$TIyMAjaj@6_r3b%17eMI\nz>2V0lS3lkFJJlShGsuhW2MQfJ`L?J2Hmc(Wz!N2A`Glv8Q4){3`mp-wu!(T@g60+g\nz0$)>1i66lL)^UsJdwn35kqJ<_P4>e%`Ri!ka(WhzQxuCzIO%HeIxKr5k}izh7Nub(\nziKTv@xIq;Hr<sEIJDA_3A}erX2r6N~2vE&xNw<pbVY>j>YS-N>OhbMHhfe)xj{dT!\nz(F5iHCPvi)LM;X?i`H%Y(ScER>gz0<o;T0rU7nm_J6ANa+EkTm6fw<#qx_tB(imSa\nzQT9!EN2o3`eLAX@=1{MyDxY)3uq7_#z!Pd<hf@Ff45fSEB);R8EkqPA&B2`-okI*C\nzl8(&}BboEms<d!Ri(SWgku5wsJR!^tJcpO>Ue2~P*O8_V>t^%023EU+0ag&JH=X|N\nz_K0;frQ|aW7UkyIKJo6v09at;=c6EO?1|0oi=G9p1u+H6Jb*cmZ)sordHq5sv{y_O\nz83Wj21UXnq9kP_~3(J8GehO0|-G{yyW>L|O6%E2G=pD*BRvCd=PCc-yK<kB72NCLk\nz2wXU_dp0J6h*4~r0g>U7F@d@9F<%|Qh}Szs@^qV#3ntYFb^X@hXkbw1Ck~-TAj6`P\nz%?OgSfsjhJkx8VUxr+^g9fwb!AH*?X0Ch8P4kUlVzzJ{}p(XGt6_spC7)qu^cQ9Ak\nzk{L{T+*LOb>K&OmxiQ<C>qRDRTT7i$I#y*Q{QN9u2%O8NX#k_y4jadc0aRwdd^{5d\nzP{*snuI5W6Qnh#;8@$u_IUYc2MS(|q@rJ<+m{cCav~;&Mier_cVklM&Ab?^g-Rz0R\nz3OO0nbjZ>jKYTiHFbA6q?UL`73Ac{Bbp6@j11a$RZi_VwOO64ke1fcRSG#`mN5<A|\nz+{~)e>7uc+kfi>Q>hO;ZjIz$gy9&&~)&+YV6c7TB?Bw64uu3vC05vsR<Ks%Ea2leB\nz&48-MhFln(6n?fXlBL~hAP2#npn)TNhdO4dDYCL~D#mRZ-2#XLVn-0=jr;E6|8KEY\nzkbwxI%2c_kqei1+mZE7SmJFcA^KDPf1~XuDkk>!;K*vIOwLb9iWZ4&G%Y%YASyz}i\nz252OweT4V;SlC&Zh=cd65X=As9)w_CsIu>UYgz(d+lA5F$<zQUO_pfN7ns4s?!HBg\nzkAa5}wD>cT8i0C2SScT<-0g7?l+LB3kpF&eVuHJ=GZhU`>gVQ|sBLHg6}*|0p+gJU\nz^jc!i0C9K{h>6-3fbcpE2!r4YfJ>yQ@j{4M?KUbq2B?q8Q$gS+26y4IMN(^uFK|3;\nzKA7OikFJSwv}1&}DN7SjiiaamuA+%+c!Wp@0bkgPJ;>RGhprBnKLbQTP~#>j9HD2*\nzEqvB;F26s-Q8S5T0I1qmuH5il8$c1278Yq}kD3LT0j3C_*WrhtaSJb06PHav!lx7y\nzzty?{8_WbvqT2p_YnnZ2m(IpoVK!t)85#vG=Hi{d;9VTNr?tEo06`zMUeM;_<8=f;\nzWn*?=F(ACfx>q(8WcILeNEW$i85FFj+C#LIx0kUSNCkarLY)8OHZK^U4auXR;0@XY\nzwSq-}aAlKYzzM3ol;vNsVE`)W6Xx8Ze{$DKR}g{?kVT&+;O(q9$4s$XxJvI9Mx6?d\nzi~(i{1_*QbQ+95Sls;q#@sg_B4|t<Z%qYoVRKN+^CJq%rkuZSnv9Y$sz^TXDAu4ZD\nz1&a@<r_?VPB50mK*9WKuoFwzbfs7s+WkM(quW4;lfMD8q3MsmbSHFC4@sTUyTztXN\nz@{M<tVZE@nMccBCzP!$+I`-b^WT3u4st*w7%8i!EnTQwp`JE<^CxQV|wY9A2p@$X8\nz-9kPs%nQjUm@V(xEoK$q89SI8AOR;fAF9|3(8Gp(D;<mpvUBqbOjM}$!Bl<26JqnD\nz27a*!1nDFl)5rWIi||>@7eE7LzH2ESF?Zl_V6y^Hh-#uB<^ZlAl_x-NV4OBTQU;J6\nz!j%2S11j7=AwGv86&Ov^su?aRKNFO&`9agP#|Fj-;914uMkRlIyt+YX^3;)NA-`~b\nzF+y0gFcA}7MP4M^WO4=w(Kw8T3CcXLZCn{?(}x#|G!%@DMRTW4f*UkX3v(k|J@g10\nztAwyD%mbJM+Tq&Nte73tluEHp4K?CDhc#;0QlQAM5_14hAJAYS4gj+Pskikg8!8Kj\nz*gaHvN6c*bl4StUSBH9BA4plsjR#Q^K_S_3wBt*j0mS29U+od5z|Z5+MaMDsCTu^v\nzO4@&w!k+t^SO$;;Jb)LvhS54E`vJiax5Z$HF_B3W&kXGUAk<1?O8uLJi7O1?gCNmi\nzNVOlz6#4O~B?Ii1L>wUQ1T<eL{dHw|pA`ns5Yo6ZoQwBo4JwG^OpykHDijY5aHX;g\nziKQ!GfOC~~NGzQL1N2tbA+gje!de^$e8%54RMsO|>i_<}iyNgEu(z@viKD%XZXo9b\nz;DFaFYmyjxePPd8L1u%Sg5&&cPi1||nojV|-<$6SF4DpuDw?3YCBMMjletZ<3AXdM\nz;}u|7K7bE4U#fjq2FPQCZvM85zqVJHVM%T}HoTW_{2ASc{x84)?5Ek@&+CHc00000\nLNkvXXu0mjfgeJQI\n\nliteral 0\nHcmV?d00001\n\ndiff --git a\/shells\/browser\/shared\/icons\/16-deadcode.png b\/shells\/browser\/shared\/icons\/16-deadcode.png\nnew file mode 100644\nindex 0000000000000000000000000000000000000000..33d99798e07b27bd48862e9d5779206bc96f9e4b\nGIT binary patch\nliteral 638\nzcmV-^0)hRBP)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV0000PbVXQnQ*UN;\nzcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU!AW1|)RCwB)Q%y`0Q4s#R+q(U?D79E2\nzCN*$_5Ki{u1y1E4oHXI&MHBG=c#!}Ry(kxBBL2jLNJxN?kPu_!ga^D}NPq^zK?&>0\nz5Ee=iwzklA@y)=lrIw46Om=qOn|a^&y?M58v8zh}>hXUTmx_zswGHq$HAC`vt(+rt\nz5oOnJ@LG}8OU1>(+Z|9M)wuj(gd0&I#gf;DaNhv06`H;9$5q#W<ogNi&V0m<_*Oo7\nz$$9lwD~y!Ru@b4lzPf7FNX3}sW9Tk{hKk7Db$_87slCz&OwIuTnVfj1zb<kv+&h5m\nz#yZEk*!O#R(L%%sh%56Hi&U7?*0K5aIc7WVuqVcb7`7~QAT#x01XOTA2xsyn3Iu;)\nzVifn*ws_Ov&>MK8*HAt+4rwLM`cM<n%F@8>Udq%=7LO-CU}b*ZqMO%`w2<$H1O2(=\nzHYz%M8Gazvii01k@Fg^yOKPa~D40&Bxk>1Z3@w{S^nMQ#!>^GQRBd7s56!M+EjQtB\nzj6whM8Ql*bVQz09sl0)AH9<iq!Ex86vuFyq{=G(1)!k3iEFf)cIq&A&%uX6@!J}JR\nzP92Cwho{eham<Ynsp%X-4jH4Gj;LSZIO23bH;mGgsL#!!>gg-kg%(aRvV9NQnZ~o9\nzzZk{fm2!Aw+ld1$4NRk1mpwjY)bC77&E&8_!ugbvH$({Hg)g#j&dDN9JNs$R`Huht\nY0J(_O53sM9y8r+H07*qoM6N<$g5#(xe*gdg\n\nliteral 0\nHcmV?d00001\n\ndiff --git a\/shells\/browser\/shared\/icons\/16-development.png b\/shells\/browser\/shared\/icons\/16-development.png\nnew file mode 100644\nindex 0000000000000000000000000000000000000000..33d99798e07b27bd48862e9d5779206bc96f9e4b\nGIT binary patch\nliteral 638\nzcmV-^0)hRBP)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV0000PbVXQnQ*UN;\nzcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU!AW1|)RCwB)Q%y`0Q4s#R+q(U?D79E2\nzCN*$_5Ki{u1y1E4oHXI&MHBG=c#!}Ry(kxBBL2jLNJxN?kPu_!ga^D}NPq^zK?&>0\nz5Ee=iwzklA@y)=lrIw46Om=qOn|a^&y?M58v8zh}>hXUTmx_zswGHq$HAC`vt(+rt\nz5oOnJ@LG}8OU1>(+Z|9M)wuj(gd0&I#gf;DaNhv06`H;9$5q#W<ogNi&V0m<_*Oo7\nz$$9lwD~y!Ru@b4lzPf7FNX3}sW9Tk{hKk7Db$_87slCz&OwIuTnVfj1zb<kv+&h5m\nz#yZEk*!O#R(L%%sh%56Hi&U7?*0K5aIc7WVuqVcb7`7~QAT#x01XOTA2xsyn3Iu;)\nzVifn*ws_Ov&>MK8*HAt+4rwLM`cM<n%F@8>Udq%=7LO-CU}b*ZqMO%`w2<$H1O2(=\nzHYz%M8Gazvii01k@Fg^yOKPa~D40&Bxk>1Z3@w{S^nMQ#!>^GQRBd7s56!M+EjQtB\nzj6whM8Ql*bVQz09sl0)AH9<iq!Ex86vuFyq{=G(1)!k3iEFf)cIq&A&%uX6@!J}JR\nzP92Cwho{eham<Ynsp%X-4jH4Gj;LSZIO23bH;mGgsL#!!>gg-kg%(aRvV9NQnZ~o9\nzzZk{fm2!Aw+ld1$4NRk1mpwjY)bC77&E&8_!ugbvH$({Hg)g#j&dDN9JNs$R`Huht\nY0J(_O53sM9y8r+H07*qoM6N<$g5#(xe*gdg\n\nliteral 0\nHcmV?d00001\n\ndiff --git a\/shells\/browser\/shared\/icons\/16-disabled.png b\/shells\/browser\/shared\/icons\/16-disabled.png\nnew file mode 100644\nindex 0000000000000000000000000000000000000000..2f0317ea3fd6b7933988fb03624d7fa0d1981d36\nGIT binary patch\nliteral 494\nzcmV<K0TKR*P)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV0000PbVXQnQ*UN;\nzcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBUzkV!;ARCwB?Q$1_KP!x@U5?oRUbSddx\nzaB(Yk&+Jg?n4ztcOMij?pkt<NZlzPE{(xv_6Pm@%T97~x6^WQH`_7{`JkyV%y>Q9n\nz-goZ3=iI!SBuOXCkEFj@Dp$d->$WD7$#u8eRVij!*4cDAy+f{2fMZX|*@dg!Zuc5R\nzk)5XL8!L3rfc-qrSM&M&0bj>)3=wls0G9y5nRUHD5jdOXyqYJMtE3b~;iDUd(JG2!\nz4e#}Omz0m=cwNQtO6Y<P)OF8nyWPIPai%!v(L^N$j73QTf;-~S1%)@8%`-F*_2C7;\nz6$z@kTrMB!!v51B9Ae0kKENDk&}=r3MP6YT&giUZnkwdWU00blt5SoXD4;VO6tG@&\nzr3pdpV2z@PB%El7A&0`>uF<w_z8*HkQ@vjAc%FBgBuS8E*=#r*b`V3Zy23C20RwSv\nzqtPgkWtnsLegFNp2T_g#zT&FJ<M9og^g#|A5HU3pf{YbuK=r|35D+aqEYma_i^XEy\nkZnp#Re(k@{`9pvK00h~KYD=d<ZU6uP07*qoM6N<$f=$lfl>h($\n\nliteral 0\nHcmV?d00001\n\ndiff --git a\/shells\/browser\/shared\/icons\/16-outdated.png b\/shells\/browser\/shared\/icons\/16-outdated.png\nnew file mode 100644\nindex 0000000000000000000000000000000000000000..aa42bfe0b4e0c791fa1bb7f48e989729028bf481\nGIT binary patch\nliteral 558\nzcmV+}0@3}6P)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV0000PbVXQnQ*UN;\nzcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBUz&`Cr=RCwB?Q?W||VHAI!<xL$<6`g{s\nz4idDuh*01nH=T=vISN5ogA{@gxVdQ|If$Dst`?ksfRaNk-4J*~CpCs%%L#G$9(;P9\nzPW6M2`@Z+R-+S-(zIU!bAn*(ThwwMNxV>KQz1<RtL?9lI!)P=D(=^HE^Z6i|OajmI\nzFdmQX?)#jRTr3tr6h-KEyF|i;d$iT-bqIw*D<y0>12mgW=yW<zsZ@xFh(@C@ole0p\nz4DwM`b;04Bq69&pFUmj?E+jGF*$&sdi54T~aycThGs}c!Gh#lUhrwX5DgkvOSy2>f\nz7&`QNy@ewN4F-c$iJeRVkbvYwB0*U&Gjn7;z&lx%DS;ClE0<|!-%WkN#ya8VIPON%\nzG^kdqq*an6(mtEbpj<9PtJQ*7EJoGo?+O&I{qXSkwTysG#1#&Qtwy6^>AG(9`+duf\nz$z($J+M8sV-?DXiabz(bXMY}iXPkpnDh1hWmMX!?!~MzeHi!ovxT}4_`Pl&oJMPVM\nzz<^}bj=I&?Ar!9sWIs*sQlLzFZ+#N6%k6fX#ulHhR4S1zGbgc(hVest40K!jSPl{c\nwHj)hy8y->g%(L=qRXz<33h=Mr`B#7e0LAj*R5Z^J3jhEB07*qoM6N<$f@F>Jr2qf`\n\nliteral 0\nHcmV?d00001\n\ndiff --git a\/shells\/browser\/shared\/icons\/16-production.png b\/shells\/browser\/shared\/icons\/16-production.png\nnew file mode 100644\nindex 0000000000000000000000000000000000000000..1c253dca5d56d6a309c5854b8a82266dfce01aba\nGIT binary patch\nliteral 546\nzcmV+-0^R+IP)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV0000PbVXQnQ*UN;\nzcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBUz#7RU!RCwB?Q$0vRQ4~J@kfdp^Kte5g\nzLS-n3Lrw+J(2zqd*-{X+8AMCeR0&Nv)l!o~Pz1R(I7QN|U^oO)gB2v9SSSjWQGN%m\nzyq-;U;PUQ0=bm%E^WE=hWLZuVk&pgn*IIS5#XUmS@oCbV%uS!cYA0J@o?|NWY1PT{\nz;yRh+Ve;;taUmpPuQyr9wYJxYxqej8D-WF>Kjq`cRJc0luV*{T{`ATe)vFcW8~a^U\nz&1IW8S~VsC9cYk*rG)-jtNe~YB-#QCyfAn9CdEELe=9ukUS~A3Um(&+k`%_QL#q+K\nzB>6_EcAw=DDz_ObB@^^s%=6`TyOU$!2?em%qZ1rrP9PER2bOm@F|#qpgubK_lsk%W\nzaS#ixnj8R{(gft+VrU|`(3#tG;g8oMcQaTW)H4}mXt?ljx=+s+G3xS-F((~^UNSnI\nz<d|8ayMs+`qG>4cOH>7UfQo=xG$0N|06!l;X?+F3D&~5O9a6V{f_i5|To~O@pf4C|\nz(Q=Cp>eVuTAr|qpN<Lb2qdb(7m*n1xG8aGq#$iw-o)hEYMU>X$Kp3<R)<L8g3rHYg\nk5UZ52DDbb}`CEVi012eSi#9Hm_W%F@07*qoM6N<$g4Ag0w*UYD\n\nliteral 0\nHcmV?d00001\n\ndiff --git a\/shells\/browser\/shared\/icons\/16-unminified.png b\/shells\/browser\/shared\/icons\/16-unminified.png\nnew file mode 100644\nindex 0000000000000000000000000000000000000000..33d99798e07b27bd48862e9d5779206bc96f9e4b\nGIT binary patch\nliteral 638\nzcmV-^0)hRBP)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV0000PbVXQnQ*UN;\nzcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU!AW1|)RCwB)Q%y`0Q4s#R+q(U?D79E2\nzCN*$_5Ki{u1y1E4oHXI&MHBG=c#!}Ry(kxBBL2jLNJxN?kPu_!ga^D}NPq^zK?&>0\nz5Ee=iwzklA@y)=lrIw46Om=qOn|a^&y?M58v8zh}>hXUTmx_zswGHq$HAC`vt(+rt\nz5oOnJ@LG}8OU1>(+Z|9M)wuj(gd0&I#gf;DaNhv06`H;9$5q#W<ogNi&V0m<_*Oo7\nz$$9lwD~y!Ru@b4lzPf7FNX3}sW9Tk{hKk7Db$_87slCz&OwIuTnVfj1zb<kv+&h5m\nz#yZEk*!O#R(L%%sh%56Hi&U7?*0K5aIc7WVuqVcb7`7~QAT#x01XOTA2xsyn3Iu;)\nzVifn*ws_Ov&>MK8*HAt+4rwLM`cM<n%F@8>Udq%=7LO-CU}b*ZqMO%`w2<$H1O2(=\nzHYz%M8Gazvii01k@Fg^yOKPa~D40&Bxk>1Z3@w{S^nMQ#!>^GQRBd7s56!M+EjQtB\nzj6whM8Ql*bVQz09sl0)AH9<iq!Ex86vuFyq{=G(1)!k3iEFf)cIq&A&%uX6@!J}JR\nzP92Cwho{eham<Ynsp%X-4jH4Gj;LSZIO23bH;mGgsL#!!>gg-kg%(aRvV9NQnZ~o9\nzzZk{fm2!Aw+ld1$4NRk1mpwjY)bC77&E&8_!ugbvH$({Hg)g#j&dDN9JNs$R`Huht\nY0J(_O53sM9y8r+H07*qoM6N<$g5#(xe*gdg\n\nliteral 0\nHcmV?d00001\n\ndiff --git a\/shells\/browser\/shared\/icons\/32-deadcode.png b\/shells\/browser\/shared\/icons\/32-deadcode.png\nnew file mode 100644\nindex 0000000000000000000000000000000000000000..c4a6bda3e6a6d0df9388f3beff37e254a91df25c\nGIT binary patch\nliteral 1318\nzcmV+>1=;$EP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F80000PbVXQnQ*UN;\nzcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU$$Vo&&RCwCNS6ygRXBd8SPX3ylG)-gM\nzR4rR8EyAWSy)ifKF5Hb?ti9L-%LZdo!A;n9vtB63>_r`D3!8(9ZZPOzH)}VTUMvIY\nzO?R^j>(!KY%-^(KY@6hyO=1$i=S{zOPI^pY9P@?4NxppN{dwN!eZCXhUxyAf5z(Z$\nzUZ?-pu8V6xc|pNxGv=i7f`XTluvgpRXltjYH;<5`wVl@IW-0mmG-VebSnl=g*+<@R\nzFS)zAX=C9Q#U?IOUQbr^Zxb9SR0{sm7vGWM)hI0-x`boc%1=L-oMT_;<5Sci62KY~\nz#9rM0Ir(nIBq}0+$`Kq+kN`dh2ai!etfSiK*jZA&KH7fz9PeMgG|tJv8V?@kq_l7!\nz#UsDemjIvy><A7+B?zL=OmonV(XUGA+#mVW)EWd09(|wDsboqu4y5L8Sgg%*3lLmZ\nzZpDj7OAiE6uRUJ^GKkU8U$g?10~MfQwGZ|*!q%LCdy{y^gtnh5_8hR^89u>lJ2rV>\nzPPB)zOVNt{?bYB1;WRN?aOUdl=IUi%JHPp{v=<YAiOK5;eh!r*v1$ldjv*fO3l{VI\nz8%PAW@f(O)&JFEAFDEDWNJE>T9U!GuGNuHKV+KnKwxfDHyd;Q*3Sm~WEj2^Ve#huV\nzvJ3G-0`Os_A29V~_s%oY!OqXdO9AhX4Aa`RNrv9N`&Ck0F8*zCe1x6O=^2Wwt<zj8\nzLz=3PKb@jNCd2cO0RBS*6#wliEsl-wT@}SOi8b&3FeRpcr9w7iMgZ9(36M(8y-`qL\nzfd0<#2eh#9h(4VE*Mz{AyS7o6+s=LfxuZ426&rm)yf888g`4cBL_+iqSM2*MrU#^;\nzv<`j5?TJlX;kB8>#+F`A#dP{)ho9k}ilu0mNM?`MxkW$Lgg@Ehn#QnJYjdi!n9cEZ\nzDH^AFfs&P}WqP4VrUG86@kT=nB&%Bl60oq(y~Q!s#_p}rdpDQ)``)tZVek)s^1LvS\nzu*mp6YJTe-=0f`KqRIu29wVF6Ne@MP@GykMb9<h`jcy7!6b^Je)F^n7W$2~#`Q40)\nzG>BKA|44D7E`Gi>0kE>j&Ma#H5<x<qz54_@Hv~T}ldty;q3=;fD^n;i8DZB}Ql{WA\nzObMpr!o4^-6&v-mw+a6d=2=Zbgy7|;8KC?5{5hJ5Z*X-JOHbzc>MJ3dSWcSOWGjXQ\nzLYR=6r5MlyDg;Locg4tHO5}vF2CU{x&qP+&slVAvk(G5OBFrlgINcEtcUygj5wyQ3\nzyR%$9?qQ#czU^t*oO?%U@7K`;-v?Wtuw2jO>CaTA{?ky^G|DBdU#9@+@sQ6H3@td=\nz)L@!`3t}?P-d<(Y>N<{bx>=c?D{#PaF#`O9Et+9GU8LvprM5g%0;nEmffY%o9_lPM\nzAehmh1yDdB(dJND9Y<eo=I@p$%Q3WMXdqaceGm|&ge+qmJO7xbx3_s|x5vQ~F_TF1\nzGpMwy!9j-u9@;Oe57?FZUr3<acqhPNBo8D^h*8NT+hP4dZ;A1^cd1qXc2rIP!Em@h\nzm=w)N`DB8VDt{M%3IgsS11W2@ihoRMHNXy1K22<@jp6m@J_$wj^#n(3Brxz_BvJ3*\nc^Tz@V0FmNf5G=%XfdBvi07*qoM6N<$f^)@nsQ>@~\n\nliteral 0\nHcmV?d00001\n\ndiff --git a\/shells\/browser\/shared\/icons\/32-development.png b\/shells\/browser\/shared\/icons\/32-development.png\nnew file mode 100644\nindex 0000000000000000000000000000000000000000..c4a6bda3e6a6d0df9388f3beff37e254a91df25c\nGIT binary patch\nliteral 1318\nzcmV+>1=;$EP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F80000PbVXQnQ*UN;\nzcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU$$Vo&&RCwCNS6ygRXBd8SPX3ylG)-gM\nzR4rR8EyAWSy)ifKF5Hb?ti9L-%LZdo!A;n9vtB63>_r`D3!8(9ZZPOzH)}VTUMvIY\nzO?R^j>(!KY%-^(KY@6hyO=1$i=S{zOPI^pY9P@?4NxppN{dwN!eZCXhUxyAf5z(Z$\nzUZ?-pu8V6xc|pNxGv=i7f`XTluvgpRXltjYH;<5`wVl@IW-0mmG-VebSnl=g*+<@R\nzFS)zAX=C9Q#U?IOUQbr^Zxb9SR0{sm7vGWM)hI0-x`boc%1=L-oMT_;<5Sci62KY~\nz#9rM0Ir(nIBq}0+$`Kq+kN`dh2ai!etfSiK*jZA&KH7fz9PeMgG|tJv8V?@kq_l7!\nz#UsDemjIvy><A7+B?zL=OmonV(XUGA+#mVW)EWd09(|wDsboqu4y5L8Sgg%*3lLmZ\nzZpDj7OAiE6uRUJ^GKkU8U$g?10~MfQwGZ|*!q%LCdy{y^gtnh5_8hR^89u>lJ2rV>\nzPPB)zOVNt{?bYB1;WRN?aOUdl=IUi%JHPp{v=<YAiOK5;eh!r*v1$ldjv*fO3l{VI\nz8%PAW@f(O)&JFEAFDEDWNJE>T9U!GuGNuHKV+KnKwxfDHyd;Q*3Sm~WEj2^Ve#huV\nzvJ3G-0`Os_A29V~_s%oY!OqXdO9AhX4Aa`RNrv9N`&Ck0F8*zCe1x6O=^2Wwt<zj8\nzLz=3PKb@jNCd2cO0RBS*6#wliEsl-wT@}SOi8b&3FeRpcr9w7iMgZ9(36M(8y-`qL\nzfd0<#2eh#9h(4VE*Mz{AyS7o6+s=LfxuZ426&rm)yf888g`4cBL_+iqSM2*MrU#^;\nzv<`j5?TJlX;kB8>#+F`A#dP{)ho9k}ilu0mNM?`MxkW$Lgg@Ehn#QnJYjdi!n9cEZ\nzDH^AFfs&P}WqP4VrUG86@kT=nB&%Bl60oq(y~Q!s#_p}rdpDQ)``)tZVek)s^1LvS\nzu*mp6YJTe-=0f`KqRIu29wVF6Ne@MP@GykMb9<h`jcy7!6b^Je)F^n7W$2~#`Q40)\nzG>BKA|44D7E`Gi>0kE>j&Ma#H5<x<qz54_@Hv~T}ldty;q3=;fD^n;i8DZB}Ql{WA\nzObMpr!o4^-6&v-mw+a6d=2=Zbgy7|;8KC?5{5hJ5Z*X-JOHbzc>MJ3dSWcSOWGjXQ\nzLYR=6r5MlyDg;Locg4tHO5}vF2CU{x&qP+&slVAvk(G5OBFrlgINcEtcUygj5wyQ3\nzyR%$9?qQ#czU^t*oO?%U@7K`;-v?Wtuw2jO>CaTA{?ky^G|DBdU#9@+@sQ6H3@td=\nz)L@!`3t}?P-d<(Y>N<{bx>=c?D{#PaF#`O9Et+9GU8LvprM5g%0;nEmffY%o9_lPM\nzAehmh1yDdB(dJND9Y<eo=I@p$%Q3WMXdqaceGm|&ge+qmJO7xbx3_s|x5vQ~F_TF1\nzGpMwy!9j-u9@;Oe57?FZUr3<acqhPNBo8D^h*8NT+hP4dZ;A1^cd1qXc2rIP!Em@h\nzm=w)N`DB8VDt{M%3IgsS11W2@ihoRMHNXy1K22<@jp6m@J_$wj^#n(3Brxz_BvJ3*\nc^Tz@V0FmNf5G=%XfdBvi07*qoM6N<$f^)@nsQ>@~\n\nliteral 0\nHcmV?d00001\n\ndiff --git a\/shells\/browser\/shared\/icons\/32-disabled.png b\/shells\/browser\/shared\/icons\/32-disabled.png\nnew file mode 100644\nindex 0000000000000000000000000000000000000000..7c750453238885d1cba45da238abc82ae0fcfa06\nGIT binary patch\nliteral 1092\nzcmV-K1iSl*P)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F80000PbVXQnQ*UN;\nzcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU#=1D|BRCwCNSG`MHQ526aF)9+3P*g&y\nzh)ZY?vlT_hwjyp72gg<yb*PHsAO`<{AP9nx=+dcH1VO0nR8X4YU>({HVg{3dAJt$@\nz#3X9$`B{(LT;F@q2<E`ed%5@A^L>8zzC44$pwO_=FdH71k~AWD^z$SK%5RKNa;O|+\nzRx)u+O-(&LI5-%O#bPtt+uL3Euf@BvveE$F)6>&=JiEKQOYUNYO>2;{=NA_je=ms=\nziNw##Ya-!Z67CTBNa;7MfuDKL&d!1&pT^K$gdzx9TwHvC{}9G=P=a~#`ZbhdP=v;K\nz@8;&_JMiI|wE^%7L!K9vvN4E)%!df<?Cf~-bY!f7qoX6gJlEXZ><@>-9z{{Ea=f;-\nz=I-t74at1x=jY+Fva$v}`56t!&(FVANECXf-EJRDCX>HXsnl^}W8<t=!BKQV4>F**\nzxY#NFhoaWj))~C}e7?6!OH1vD#N_1U?5!R%o1K)xu%3KVrtp`Smv?P!Y_wEVR5&db\nz%d>)l0;kDjx@yIqo}TZ_TUc1wK;C{qM6fR!jfP+to_ad+xDsVAM@L6HY&KgLD+56|\nzgvR4>zg!zutMwH;W}X|UqclY#k<SYY3v+69lGX)cn}G;?KH*8qK41-1t<~F%8R!V^\nzAn>vbHT+0xLkM61fkJL82;g?Y8l~e6=JCWDc+r-a0}g<PpHRrM!N)Bt8S(!G3-EwJ\nzM+OuSV*-?4O2qqMtUM><hlDK#8yK-c3p5yT*i$jAOuUy3Rs%2*UGEG;*%B46U1PpP\nzwFqG`JY_G{QoscU9?^U3L!Oaaj+R(2JmlI)s{w4*D?;APhYQk%uwyVU7b<vQ2;^|h\nz@M+0&s)rGbfDrizh7sI`Skr1l&OMCdh;mWlsdh4I0@2XWP)kis&436*!XXpFK_ll}\nzjrZi_WO-|A>!Zu%TD~(9GEp=JD=RApR##WstE#G;gmk4M;sNCt^F@RN{O;}Tg_@e0\nz=7YhYySlpCm(`63p;v1sP7OlMm;hciKB?gDcONhsjitz=Jm1&X*NzCZwYAOH)zwWP\nz68%InA9&=`^xnrY<@#8j^Lo9<fk42Guwzh%_%N3ZUg#PC?~96xZh3&?xwf`;93Eoe\nz9XDb%FnZ91<nZv&j{>9i>EJ6m71>06ef<nNVS0M{B?jJ6a9HDOJFf8Piv9h4f7aJ>\nz?tK~c)XoeMKV;<88%FxEXj!(tzMk0K-JK(k|4=vlpo_)w@bGYdXJ_YEnb+g-_{oU(\nz4u>N^M*jxy$jFErGVXmNdQ4KTzfyBWNu(ft{ef!C#pn4y0R{m73@I68j+emz0000<\nKMNUMnLSTXgoDP}*\n\nliteral 0\nHcmV?d00001\n\ndiff --git a\/shells\/browser\/shared\/icons\/32-outdated.png b\/shells\/browser\/shared\/icons\/32-outdated.png\nnew file mode 100644\nindex 0000000000000000000000000000000000000000..6eae901bf058833312c3ccd677300e26f08bc3fb\nGIT binary patch\nliteral 1095\nzcmV-N1i1T&P)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F80000PbVXQnQ*UN;\nzcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU#=}AOERCwCNmrqDkQ543ne=rCf2Eqv(\nzg8`vLLKjgp3k4yZjR;9@Tv($UF$z}_1VSK1=|-1s9KwYgAqa<17b&yQDFPSiRN!i~\nzMY>TVm?Eb4yLBGd=bL#mE}Rb@Z{EB2zVDpx{JD23LZOgfDfQaAI@I}M)w+7B{C@x2\nzGLVCibww)6L@wy4_L|Y$+^hx$22?{sgWBHSR`GaT?e6Zn&W%JOs<X3GuVK#g^mN|2\nzf(k1Ka`^@!O(YV^=kuwJjSWoz78VxN`1rUwIy$oFO-@egao$0S5&Uj%Z@1^Up|X&5\nzcn*12SC{JR>r<_*t=g;J-d=4OBwX?vqabAd=;)|k%iJ?7Fh4)9?~psgB4dyc8VI?Y\nzNG6k7ImXVU07#`$r`|z?5|9Htcaj4_L3j$m(|}+w=$e=#BO{uW_|DAC*v6C!PXnAD\nzKm;K`TEfFS35j#9n}Q~)z2wJJ5{Zw6!(n|Fqewne6`qkjole{G7pj1~NytJfAR3LH\nzP=Jr&?eg-nCNY6=Qif(Ys0g?Ga8-bXV`F1>=|F@5QulZW0n$4?lb(U+kV^k3M1H~m\nzDJ>R};j^=|c7mbA-rk-j85$bW@9|a|6NXA<;K1PEp#C0)d%+F?H48aOWm=6IbU8px\nzGcNHqAyV@l37ePvb`{_Wi}1j?053#t#sP}Bbxm^)-|-^14G;piS}wM}36Tjlt)lyY\nzSSy)tf@d*;_)5&3;2rZQTN1ID_yZ0kPx-O9xTwiUAi{x1`}_MgDIRrqckB0SYinv{\nzWknqv9Ozylt$28NSbu{m+1c5#x@e7x^<P%U$A7H3zw;bRtRytAsi~>l;o)HpY;A4n\nz`_j@<uC1*tm&s)GSW8Pw&bf|pu)e--ze~Kioy-2Xn@hfno|-S0Ya>ERJRu}xyxS(@\nzJZPYrY~76Ax>>8{;#ckQ{(-OR{fFcHAuy56X0@b&KtLN1i^X*3+uYpLB#n)Y`c8<X\nzht$>8sfmdR9Uk!FS;z{(1x?C5e5+Qyn)_bbW<-0%5bB@CWQFHMZ4-NPL)tTQK+l~^\nzT7mTEpSI`0`WpSd<lWHiOh-4A0}D+`4kUs{59;-u<TLT)@fGE(tt!m`x7`e*@LtMO\nz+Ov@3EkFgHo0=~E%PouizEu?^86f@M*&8TNNNLTY5(M}90|mdwIOSQC0n|DPCcC4Y\nze%YWP<p657+lQ97ro?;SeyNlde=`(}ONcxVrAREBlo=8dkA!sM%cmPfAH}X+|LA=p\nzf{d&e1$Z_$Cnui2%vc^)t5Q%<f%8D+|9`3F!YT&zl*tJF_x!H_0|0++O5j~2P@Mn(\nN002ovPDHLkV1k)$2?+oI\n\nliteral 0\nHcmV?d00001\n\ndiff --git a\/shells\/browser\/shared\/icons\/32-production.png b\/shells\/browser\/shared\/icons\/32-production.png\nnew file mode 100644\nindex 0000000000000000000000000000000000000000..9192719e5b50fcf214b3b5ea8095ff344f60e45a\nGIT binary patch\nliteral 1068\nzcmV+{1k?M8P)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F80000PbVXQnQ*UN;\nzcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU#&PhZ;RCwCNmrY1iQ547Tj6;TlG6rKG\nzV>Lu!8Q2F3feSTgVT)AI78wLdkU`)giWc_0DOv<Yv<}n+(DhO^ZNXwNMBG1);*|\nzQwIwbCDXF^yLiU;-n^NoFKiB6-f-V}=l<_G|MS0he9>q$q?CGUjB53Nt=AY0IiXM}\nzo`uD+s4))sv$VKab->LdH@r!0JbYX~Cx`mg_x>I=oA~1BTToiA)>Rx-!Dxw^9vN1j\nzp2XDr^i;<9K7#`bnHDd*`B(*l`8pthv9HfNEy3~Ie&)Icz#IVa<@x5q(TpH6W`Lcu\nzI6(lw@8ZT*W4>80_Ab`0a`N(3$+<h)f8^mU4Gs%e9nqi)%WG7k@0qs@?7rNgpMzIh\nzQc^98N_K{Cx22S3|Gl_g{9{)vEdak82PTIG9Oozji_6ZPc)=WCGnp#@QfxQsODWhn\nz^(7ku#tFnf0TALPNfTVEIcXod)?%46Ti(_ZR{#OG^lzwbHd?F30J2jD1Q4v38k>1R\nz$NZj|(%=0Y`>cWSTyY!nAuN{u7bD%gV*xuiU_0Q%M~pK480b-Bz1@!4umCW(8HVVv\nzdzcK-*dgZB+oBoL`*aX<03e2werS#vXTcQ-u<K$hxghl&ec7c`pTDC_`Pby?cl5pl\nz-Eyo=74EIn0cSo8tA)8)Ra9N4%dq}Xla7Nw&p@z1&xQ6>s_|DZ)StOu)(n6i5Ri%m\nz#6(bp6KDd9+es&41uvv*GH2Hhz>2o`h3SlM@lMMJ80aNsA}Haix|CXS2AF*SYmdbo\nz@yy!bU#(-#OkO*|Q*;2N(sFj?q6G3$^u+l^GCi{RkRe!(pZEYk$hUO1H0yYBURX#-\nztB}S>{Yka9D560@rp-;Qnt-qug28fp8FLfk8u<GMH}rg@zD0!$Qog<4ZfvAN`Fy@)\nzCv7{`o+KvzY1@$ACllr)m>{qjq9V<&&(=D&Ap`^vElVa4E;hkC0KyOZ$(UA%5Egdt\nzR7--{MFl@6U%)5&y7hC}Qq1l^N-2sPPwSQ;6ZEnu9+{w>MDxuGiTnZ(F_K%9r?Y^-\nz5>%v@G*SvckZN{KZ?g#EWj0Ef8;*ECjM$aabqcZCcQ>v|FLfjrf+KdL{`S*!#m6y0\nzoJz#*0mz^&-7cS=01%Wiq^e$xW;yQ}{C2we2>U$)fIy@W@i5<hskxkb3?Urvq!SPw\nzeoqYcd%u>GUOA-9S>epEUo>f1(GN2T0q7Zk`Eo)F&QDKT4ySbbLHoM-E*rpVn}6|N\nmYPPHw01a6Jq5q!$6<`4LS42r6)8f(q0000<MNUMnLSTZa2JWW-\n\nliteral 0\nHcmV?d00001\n\ndiff --git a\/shells\/browser\/shared\/icons\/32-unminified.png b\/shells\/browser\/shared\/icons\/32-unminified.png\nnew file mode 100644\nindex 0000000000000000000000000000000000000000..c4a6bda3e6a6d0df9388f3beff37e254a91df25c\nGIT binary patch\nliteral 1318\nzcmV+>1=;$EP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F80000PbVXQnQ*UN;\nzcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU$$Vo&&RCwCNS6ygRXBd8SPX3ylG)-gM\nzR4rR8EyAWSy)ifKF5Hb?ti9L-%LZdo!A;n9vtB63>_r`D3!8(9ZZPOzH)}VTUMvIY\nzO?R^j>(!KY%-^(KY@6hyO=1$i=S{zOPI^pY9P@?4NxppN{dwN!eZCXhUxyAf5z(Z$\nzUZ?-pu8V6xc|pNxGv=i7f`XTluvgpRXltjYH;<5`wVl@IW-0mmG-VebSnl=g*+<@R\nzFS)zAX=C9Q#U?IOUQbr^Zxb9SR0{sm7vGWM)hI0-x`boc%1=L-oMT_;<5Sci62KY~\nz#9rM0Ir(nIBq}0+$`Kq+kN`dh2ai!etfSiK*jZA&KH7fz9PeMgG|tJv8V?@kq_l7!\nz#UsDemjIvy><A7+B?zL=OmonV(XUGA+#mVW)EWd09(|wDsboqu4y5L8Sgg%*3lLmZ\nzZpDj7OAiE6uRUJ^GKkU8U$g?10~MfQwGZ|*!q%LCdy{y^gtnh5_8hR^89u>lJ2rV>\nzPPB)zOVNt{?bYB1;WRN?aOUdl=IUi%JHPp{v=<YAiOK5;eh!r*v1$ldjv*fO3l{VI\nz8%PAW@f(O)&JFEAFDEDWNJE>T9U!GuGNuHKV+KnKwxfDHyd;Q*3Sm~WEj2^Ve#huV\nzvJ3G-0`Os_A29V~_s%oY!OqXdO9AhX4Aa`RNrv9N`&Ck0F8*zCe1x6O=^2Wwt<zj8\nzLz=3PKb@jNCd2cO0RBS*6#wliEsl-wT@}SOi8b&3FeRpcr9w7iMgZ9(36M(8y-`qL\nzfd0<#2eh#9h(4VE*Mz{AyS7o6+s=LfxuZ426&rm)yf888g`4cBL_+iqSM2*MrU#^;\nzv<`j5?TJlX;kB8>#+F`A#dP{)ho9k}ilu0mNM?`MxkW$Lgg@Ehn#QnJYjdi!n9cEZ\nzDH^AFfs&P}WqP4VrUG86@kT=nB&%Bl60oq(y~Q!s#_p}rdpDQ)``)tZVek)s^1LvS\nzu*mp6YJTe-=0f`KqRIu29wVF6Ne@MP@GykMb9<h`jcy7!6b^Je)F^n7W$2~#`Q40)\nzG>BKA|44D7E`Gi>0kE>j&Ma#H5<x<qz54_@Hv~T}ldty;q3=;fD^n;i8DZB}Ql{WA\nzObMpr!o4^-6&v-mw+a6d=2=Zbgy7|;8KC?5{5hJ5Z*X-JOHbzc>MJ3dSWcSOWGjXQ\nzLYR=6r5MlyDg;Locg4tHO5}vF2CU{x&qP+&slVAvk(G5OBFrlgINcEtcUygj5wyQ3\nzyR%$9?qQ#czU^t*oO?%U@7K`;-v?Wtuw2jO>CaTA{?ky^G|DBdU#9@+@sQ6H3@td=\nz)L@!`3t}?P-d<(Y>N<{bx>=c?D{#PaF#`O9Et+9GU8LvprM5g%0;nEmffY%o9_lPM\nzAehmh1yDdB(dJND9Y<eo=I@p$%Q3WMXdqaceGm|&ge+qmJO7xbx3_s|x5vQ~F_TF1\nzGpMwy!9j-u9@;Oe57?FZUr3<acqhPNBo8D^h*8NT+hP4dZ;A1^cd1qXc2rIP!Em@h\nzm=w)N`DB8VDt{M%3IgsS11W2@ihoRMHNXy1K22<@jp6m@J_$wj^#n(3Brxz_BvJ3*\nc^Tz@V0FmNf5G=%XfdBvi07*qoM6N<$f^)@nsQ>@~\n\nliteral 0\nHcmV?d00001\n\ndiff --git a\/shells\/browser\/shared\/icons\/48-deadcode.png b\/shells\/browser\/shared\/icons\/48-deadcode.png\nnew file mode 100644\nindex 0000000000000000000000000000000000000000..f3224021a560c7d543178c3159c05cee9eebac9f\nGIT binary patch\nliteral 2001\nzcmV;?2QK)DP)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm0000PbVXQnQ*UN;\nzcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU(b4f%&RCwCdT1#wHWfVTW)6Pt1rq7`d\nz5Cp3Q7PLuWLt}yqVFL@w!bfOgY(Pj56UI$hP&L4UZY+stB5EKKj7Ag7!me=BO}mjM\nzR1-_3A`knr5Bi#RrVsz`%$)1(%)NK!woKxj<YuPx-+SjfukU>So#v3TzJq(Wsh2i&\nzG*EU}yE;NUI=Ua^#KHHdqnNVGCe=}=#Ur0>;3<x|P0OOPF|!7ZvfOf=UZD8{RMPM!\nz6~20q@+vmc!azUG_1>YW+duL9bgXdyAqwo>N50zKe81@MAWi+;L1Q<+bnF0{c*V&D\nzTR-`lJXO`EYcpM)H2TG524rS|`h8UP&KY*x%qDJqN26CSXD$OJhu_e_kA3qMh40=W\nzEfC;na#ZVMQ5{hrkP&0nDnl*24ugY}3M?`w_r>*ib&^S#>%HpDAEkS8#p!0sEeSGs\nzq&qq?NRh{X(M)$Imq1?mMs^TD5oLUi*UjfIvt#1;-xr%{zVA0$ni%H;=V2Y^u0$g=\nz_e*zXG9b~PX#X~84N(O!M6v9|8IGu@YCD5M29{@M=+W6zmeED|<k##buSI!U_M}tr\nz001yn1|W~mzRTy}8i2<&15HP4OGDOj%Qt4m0hhmkUzca6Q=W^`N;EsCC4(@l24A-W\nzPH1-1xmKMXC3}^jb7@_l%F#7DAdG=JwKK2{00RhmVyNw+&i&{QEAz$gyD)Gs^BF*N\nz%`Dh>T&K#RwhLU>phYkb49)Gc2mt6f<C8e7vVaVL@-VazY1Ay(h9`79!iYZJBOCZU\nz9M2wXQ%fs7RZig?L>pxWM<ug!y*-(80AH40Lp)7U=XMz~mYVUs(NVM7U!IwE<UmR(\nzfe06?FT}JpV+cf7G5`>m!iyGC0vSUYNiY^i22FbkYZz{r)>g74r2_yPJbH|q&ln}C\nze>A9+5%duZItFvV&X76u3GRj2fLHVmzDu%T>@n#fD@Qad%>z&Z9ybBtKVCn;pkvY8\nz&adV1h@y^DftTi%Kmd4*f$H=ji0{C6iIxHeV6kGbBrOEKE`9AS%5l3H?2`{e>Si6R\nzc{pWmPfY8mi5XF#1;kM62l@b;U0R_lgHv>Ce2#8UhUxBXglhdBa%(xPbygw~^6%M8\nz`8#*16713MF{~&T&Y9^eoG<#y(gEB^JOzLMbN#cV!Gcu6L06za&k!6P|KWxX{_Xxz\nz>I+9{IJ(5g!2BY0OoZuBiI1Itki)gOho&Yxg0(m@MC0GzNNViq&fEM72axrJKl}Ay\nzu3{l0JB%jC;l!I_&Da~*1BiV-G^LzaPPz`CVeS3riu7nNDOn;K$YUeoP+GYv`YaR`\nz14<dM>H%+@N#p`MGp@rKV}p&Th+CO)4U_$0-|y6PZ<N}{=2GqfB%p~*s5zOmiNbCz\nz;>&2gsyAXK7EO7s)%R$|h)BI-&uhP@J-BK}8RbEFp3Cw&Sv!4yj6Qzyl)9!C`0rZ3\nzJEa4`qsR5RW0?WjRD+YPXbahq`j^rPHXhU0PgWL^-<6zLe1<hd9T5jRbxqInT8)hZ\nzqHaYXjwI}vwZz(%TEoQLa_Q3~@fE0lMF&3|SDMIzh&aD1hptzb(f;Cmjw}wm$7itf\nzk0wnTe8uwVMb)(*^}#0s(RL1iXQPVJAlTfSxAIM5``H`@UDkAp>v3F7M^K!IIq!~L\nz>^yiLR9Ro>W#BmQzH@4xS{_cAGSuV9BA+MDfPyRBE*_G=0MHn2VH2TeDJ5i57AXhJ\nzni^CKXP1=tLX?m_?3JaDt`1G>&3RwV0W;u61HEG4bxkkuxvkqu>E**mRx!|;#2moG\nziP$FHoU26xfeukJRo+}W`(T^_8SUEkG74xK4>~)C>I=N=5Xy1gavBlk=&A#Kf#yaj\nz$);U&5SsI<8dTD-rgI>&L=}D)HI@bRbB$Kz&7+p*i>bnf$=0<WkVhVvy#I;1YIX=r\nzaze2T*u{$1L7m7#L(oUJ#%6g27!7|TLmAsriUKt<f$=d5fL(bp$RHcblluk$QD#!}\nzW^zNQH6sp4GpE{Qpaf7RW&`Tx=nOMWO`KvA?QVQJXKYjN<grJ{BFb>WY8@pAeIy#`\nznLCgw`o`hZrfS~I+Ex8SVsoYvN)4akKo+{wC@06i4|vjeb_sCJibfG_VWdRb1PfhK\nzT;EXY=Sa)?r58$d2hwS1Z7t<v=LGr$jR-)faYzU>w^^-YXo2fbR>ssVrm;{cUelQa\nzjvlW=F1WXB<wxw05s8`E)O>+*OE=I<_kU&ZC=bXAyqBGs(fa11bfDNrJAHXHySze8\nz6$O006LaJMp5<dA!wFC-bdOi<Yaw-^TcC@uF@kd&BH`6TDnCzg|LUd$XmM~)z~dOa\nz;~tRT!sOQ&QJ}_M6XdQLQ;GIRnIJQm%IFWsj`f)1tFhU~<G&)qrUp})Rjds|^~QA(\nzl&LVyv#>R}k4W1oMAPBsj)AWAx#?M&<6kNNZw4A|&tm-Ta3Dmnf1JoR1Lly1e_2s)\nj>ar{oz*-0F{|YbwKA#E$9zpcP00000NkvXXu0mjf*nPMD\n\nliteral 0\nHcmV?d00001\n\ndiff --git a\/shells\/browser\/shared\/icons\/48-development.png b\/shells\/browser\/shared\/icons\/48-development.png\nnew file mode 100644\nindex 0000000000000000000000000000000000000000..f3224021a560c7d543178c3159c05cee9eebac9f\nGIT binary patch\nliteral 2001\nzcmV;?2QK)DP)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm0000PbVXQnQ*UN;\nzcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU(b4f%&RCwCdT1#wHWfVTW)6Pt1rq7`d\nz5Cp3Q7PLuWLt}yqVFL@w!bfOgY(Pj56UI$hP&L4UZY+stB5EKKj7Ag7!me=BO}mjM\nzR1-_3A`knr5Bi#RrVsz`%$)1(%)NK!woKxj<YuPx-+SjfukU>So#v3TzJq(Wsh2i&\nzG*EU}yE;NUI=Ua^#KHHdqnNVGCe=}=#Ur0>;3<x|P0OOPF|!7ZvfOf=UZD8{RMPM!\nz6~20q@+vmc!azUG_1>YW+duL9bgXdyAqwo>N50zKe81@MAWi+;L1Q<+bnF0{c*V&D\nzTR-`lJXO`EYcpM)H2TG524rS|`h8UP&KY*x%qDJqN26CSXD$OJhu_e_kA3qMh40=W\nzEfC;na#ZVMQ5{hrkP&0nDnl*24ugY}3M?`w_r>*ib&^S#>%HpDAEkS8#p!0sEeSGs\nzq&qq?NRh{X(M)$Imq1?mMs^TD5oLUi*UjfIvt#1;-xr%{zVA0$ni%H;=V2Y^u0$g=\nz_e*zXG9b~PX#X~84N(O!M6v9|8IGu@YCD5M29{@M=+W6zmeED|<k##buSI!U_M}tr\nz001yn1|W~mzRTy}8i2<&15HP4OGDOj%Qt4m0hhmkUzca6Q=W^`N;EsCC4(@l24A-W\nzPH1-1xmKMXC3}^jb7@_l%F#7DAdG=JwKK2{00RhmVyNw+&i&{QEAz$gyD)Gs^BF*N\nz%`Dh>T&K#RwhLU>phYkb49)Gc2mt6f<C8e7vVaVL@-VazY1Ay(h9`79!iYZJBOCZU\nz9M2wXQ%fs7RZig?L>pxWM<ug!y*-(80AH40Lp)7U=XMz~mYVUs(NVM7U!IwE<UmR(\nzfe06?FT}JpV+cf7G5`>m!iyGC0vSUYNiY^i22FbkYZz{r)>g74r2_yPJbH|q&ln}C\nze>A9+5%duZItFvV&X76u3GRj2fLHVmzDu%T>@n#fD@Qad%>z&Z9ybBtKVCn;pkvY8\nz&adV1h@y^DftTi%Kmd4*f$H=ji0{C6iIxHeV6kGbBrOEKE`9AS%5l3H?2`{e>Si6R\nzc{pWmPfY8mi5XF#1;kM62l@b;U0R_lgHv>Ce2#8UhUxBXglhdBa%(xPbygw~^6%M8\nz`8#*16713MF{~&T&Y9^eoG<#y(gEB^JOzLMbN#cV!Gcu6L06za&k!6P|KWxX{_Xxz\nz>I+9{IJ(5g!2BY0OoZuBiI1Itki)gOho&Yxg0(m@MC0GzNNViq&fEM72axrJKl}Ay\nzu3{l0JB%jC;l!I_&Da~*1BiV-G^LzaPPz`CVeS3riu7nNDOn;K$YUeoP+GYv`YaR`\nz14<dM>H%+@N#p`MGp@rKV}p&Th+CO)4U_$0-|y6PZ<N}{=2GqfB%p~*s5zOmiNbCz\nz;>&2gsyAXK7EO7s)%R$|h)BI-&uhP@J-BK}8RbEFp3Cw&Sv!4yj6Qzyl)9!C`0rZ3\nzJEa4`qsR5RW0?WjRD+YPXbahq`j^rPHXhU0PgWL^-<6zLe1<hd9T5jRbxqInT8)hZ\nzqHaYXjwI}vwZz(%TEoQLa_Q3~@fE0lMF&3|SDMIzh&aD1hptzb(f;Cmjw}wm$7itf\nzk0wnTe8uwVMb)(*^}#0s(RL1iXQPVJAlTfSxAIM5``H`@UDkAp>v3F7M^K!IIq!~L\nz>^yiLR9Ro>W#BmQzH@4xS{_cAGSuV9BA+MDfPyRBE*_G=0MHn2VH2TeDJ5i57AXhJ\nzni^CKXP1=tLX?m_?3JaDt`1G>&3RwV0W;u61HEG4bxkkuxvkqu>E**mRx!|;#2moG\nziP$FHoU26xfeukJRo+}W`(T^_8SUEkG74xK4>~)C>I=N=5Xy1gavBlk=&A#Kf#yaj\nz$);U&5SsI<8dTD-rgI>&L=}D)HI@bRbB$Kz&7+p*i>bnf$=0<WkVhVvy#I;1YIX=r\nzaze2T*u{$1L7m7#L(oUJ#%6g27!7|TLmAsriUKt<f$=d5fL(bp$RHcblluk$QD#!}\nzW^zNQH6sp4GpE{Qpaf7RW&`Tx=nOMWO`KvA?QVQJXKYjN<grJ{BFb>WY8@pAeIy#`\nznLCgw`o`hZrfS~I+Ex8SVsoYvN)4akKo+{wC@06i4|vjeb_sCJibfG_VWdRb1PfhK\nzT;EXY=Sa)?r58$d2hwS1Z7t<v=LGr$jR-)faYzU>w^^-YXo2fbR>ssVrm;{cUelQa\nzjvlW=F1WXB<wxw05s8`E)O>+*OE=I<_kU&ZC=bXAyqBGs(fa11bfDNrJAHXHySze8\nz6$O006LaJMp5<dA!wFC-bdOi<Yaw-^TcC@uF@kd&BH`6TDnCzg|LUd$XmM~)z~dOa\nz;~tRT!sOQ&QJ}_M6XdQLQ;GIRnIJQm%IFWsj`f)1tFhU~<G&)qrUp})Rjds|^~QA(\nzl&LVyv#>R}k4W1oMAPBsj)AWAx#?M&<6kNNZw4A|&tm-Ta3Dmnf1JoR1Lly1e_2s)\nj>ar{oz*-0F{|YbwKA#E$9zpcP00000NkvXXu0mjf*nPMD\n\nliteral 0\nHcmV?d00001\n\ndiff --git a\/shells\/browser\/shared\/icons\/48-disabled.png b\/shells\/browser\/shared\/icons\/48-disabled.png\nnew file mode 100644\nindex 0000000000000000000000000000000000000000..372b6e00e88a85c08ccfa020e8db75b31b429a5b\nGIT binary patch\nliteral 1564\nzcmV+%2IKjOP)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm0000PbVXQnQ*UN;\nzcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU%zDYzuRCwClTFFnFM-(^4Y(iiPlqHSf\nz0w@s&xJ5+bSS1G}4yoYY7zv3>X|Jd>e?ZEK3(Fq>>IDf=r&l24$Pz0Ohy##{rBE=7\nzFpKTHpX(RBOlH2t#%bM=MtsaS^S-yg-y6vD{4?@t`e_z>a$`hkMrg+JQp|r%)9cBt\nz5vTbVnE#4qfhYF{l<)KAklW}+vDcI1!?gf?eSPJ-ySqQ#+}ylLBocpKU0wZgczF0?\nzW@e_<DUJ2@^`7(d^T}8&_6{^a3pCRe;+~sH48Khn1~K*f=;-Jp)7j<a<?o5vZPR&D\nz#JF32TnVtXwe>T9j5PLget!NLm^wK*nc{WQYJ@cWgFHu8djR2h4}<_Mvf8(p@;rXe\nzngFbQFt5IY<|UJ0ir1ypbZ0RyFE3xGX$9w-nF(mriIu=OEW(zt(k?8CeGtSAPmY6_\nzgY^3PIy^o;ernp+*w{F+u(0r5JRUzSEG%sGdcEa1)8F6!sJpv6Y&y5NxR`wB^ZD*)\nzB@0znR+cBrA2DXPcXf63y}D*4G{(Tdz)nhlKvvVJlQbI)1}CBU+uPeDQ?LZZ#E2t&\nz;6OoX3DDWuxs)t@#l;;~`$lMhVK6c`H}`yFV`C8Oe!stm;v;A}M;WbyT{P<!fR=UZ\nzC`P5FrBCs^wzf71pKobtncmym`xR>q4Gk}tQFWA+mHE>JME9I-rVQ~LEU>b&^1Qvh\nzJ%qrfpbga4*0vTD6qHw0RR!4%ph*tmXf(RSmczT_<Kt<n1*iM_`(d)m4g^It$9V`_\nzUtj++D+0ie;R^6=x54Jb_aW@|_VzF`*_{bMg(%S5+Z!atpXiu|c3IP4VsmqIm^8bi\nzqeU*%3OB+tltA;nE~fA<5{bN;nwpy6?Bp5?p@Pa1&&7zJQFyQq#fjHY#Ow+WS8LGX\nzf{5zOYw{ah(XH^6$5c%vArN7PnE{3b3;|Geom5UR&9oUdFb$@u!&er{`E)@Z)S*iN\nzH3nn=bG#SNya!g1npU+a;fAE4e#?Zfi~_JJF;qk;HK>Epl6ln)RF}bISj~H_EGPwL\nzPxwp#X<9p9R%1hIPHM~w?@P^FDU2u1vgNe`NP>2LECW|HYr<lvNRxeEwT|64ZPBQy\nz(yG7?qo}ATkS>;C<cSnah0(GSqhQ*mQFb9y(_wNU8Nlj0IizcHGO%lO)MiT4FX)5C\nz6bCYhIS?gL#Dgw~!2r97j5lUX<J%v<CtXd`6q&V)gHpRzX;fwhd=x>4^O#VE^l@3Z\nzq`+#1!M9{br^!J2LM9KgAXt;yU<<Lp5XdeN*+Qz@Fb({Kh9SKCKCEQXj+!f`N=Wr*\nzFr%xiR+AOLE(0r?;s$%{(yJ|)Lq-}J8tSR5tLp)1vqF-1J~}#@094lPD=8_t4>W6s\nzO3%*DLex)8a}#xEaGEhY&>}bOcLAf(J3s-T=N3-;+<c6>tt7+YaQGKAG<;iuy3o|r\nz^th&`Cdifm%>LvSHU*o(EV<tVAUB$ShRbL-0kz3Ou9V_R0M<BPfnbQMk|oL#;kLH6\nz$yD>R#GMryAqW6%heDx2-SrA-K1>39Rv7Qpg>Vs@Jd~IBjcE`1Vv3g^@yrc<b93_u\nz|BfEn6l-H+WAE(fXDk4;n4h2j&`Im526uIJ^>C&N%J^1-?|Q68MMcFR_A&Dp7Z)Kr\nz=D*nA2b^Rc-2cn|nbPNDijSxNx&Vwct^SyS7+{~L#(Wyt2$n!_TU~6ifNn3gT-{D{\nzvm!e%iPyQxs#RIVS2|emMXuK+c!LlCS19$e3p0T(tVvjcGk_zQQgE9ah|C1A!~1w=\nz1?ce3>bxE9Nec^^f;12ae8e;d2M3|q+1Xc4E}{6ctgEZ*3Bi&MO38jgn>$XiPeyg%\nzfAMG5|DpiV9Ogd?0q|cR@f>6xJV)@)9=K<@Od(TWu4ta--!x+%1Q-Bvr`E+MSw)!u\nO0000<MNUMnLSTaCAnqan\n\nliteral 0\nHcmV?d00001\n\ndiff --git a\/shells\/browser\/shared\/icons\/48-outdated.png b\/shells\/browser\/shared\/icons\/48-outdated.png\nnew file mode 100644\nindex 0000000000000000000000000000000000000000..342fedea1ed508bd7cabe8c80b5761f9d03220a9\nGIT binary patch\nliteral 1570\nzcmV+-2Hp9IP)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm0000PbVXQnQ*UN;\nzcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU%#7RU!RCwC#nomd^R~*M*jYLu!SqQc?\nzYapjqrA0g>dJ!R1d+^W%y?8J|FG5IB57H743Q}6|5TzyHMQH<i(bgV3R7(ze(UwxA\nzprIi4pefWAf(wNTrJ2u*-{m>Z+uhmOv|Z>AhFxdgy!n2A@B91nX00@VT@EbxxECDP\nzO?lX2a18$(*bB$te+Z70DKC2x98DF+o-a4><{0xmR^V?_##Uj<++q``uC6xY<Kt#?\nzbJOhZ?%GfOZfR*Lc#iJwZZkDCm7Qa4ZOse~4HZQomV^L5H#cV*8X6+6udlD0v9U3;\nzwY3#_y`!VUjE;_)+S=O4>+|#TW@KdK`4Q;v@3#Q3$;n9z7;A5Dw_b&yu1!o#oFLA9\nzjKTKy_RPY<LiYZ?zCKG1>*?vqo-a9prKKh7{V+gRS^~1Xyqxu>yK3A!Jw0s>4-Ze=\nzkEFOa?kdD0fL^i2#>P_sTzx|XLrTa6a*Q7s81Q-*@Q~o1&d$!#2eCZJ^83I`#{ggq\nz_W)j?a!EtieDRf-fb<Q4d=^D87wJN-Cnlf=h)6D?NI|mEN=R1!S{+bo%(uh<WemW{\nzC<;h4o-5b85`FHK*q6rvs4N6<NRy4oJlNpiVD`Fi&bS0B;|wOysJM8G2l1T;bEMPh\nzY@Wya<b9;%uAWw?xw+Y7G8ucGdHB={_=;dj2q+E!A#lDpaAU=l9p@>CzPY!zw@XWa\nzhpSQwlnahkQMv>K((z>!R!YH)=e3INoN=mfP6B{J25yta1Ep1p68dHw6<Sr6bGZ!p\nzsO?}5$Pzomhe#z3Vt@lm;8mPjTU)aL0iv<eE-gYnquB#A1OScI*Vkv;kGNJDl?D}z\nz0LQDYS5{V5teiMDHa4;(0TyoF+{_~29L&jeVnOp^G<b>HX-%p$2!W^orH}Wu!Ca@m\nz4;MUuvx15b#z0W30ZFbGUC5YB;PF-zcmWAtQ=XR-qN=r4MdlL5W@cuRRbsa|<<qkJ\nzFvz$P^A)-9HL{H|PLxv;1#uz$P9cB`t>}PH+{}?hG>Ni<&!`JBf;gONedb;xQHVgX\nz@;O03*+E-JU*p9?l{Ey&C9G@{6+6mQZag5@xVhgeAtsX+0p->LcjqMV3Pi@}ys{1R\nzNauWaGY}3^<#rPQcJ<16Q(yODvMnWGs0Y$I@*+o5Xy}2czIYSDsv8i}PAs49Nug1j\nz|95X+G<R;lYQJB5`$x0Cf0UQNnN%wELHOj(&W@R#oi#^CM;0s(ZEI_@o~x;;v13+O\nzSIxn}fh}eb;Cxk8l|7%!Z~*f`m{vlTPM<X&eRw&TqvBX*mFAm=Pm*uySp`;vz%69I\nz%Bs*RN15AlhhLw39Du*^&V>`>d;5Me-+q@V-CGG)F4`&<V~})P4>Z3xUw>*G;2}}6\nz{eaRQ!Rx+7V3i1DRw=42=A64>2?y@o_nysrnEA_m{@_<rS9i|5buDEBn$KKPinXOw\nzMsjyed<QJS=)RDmNkb+a8XvV^03-+Y=+PhMllza&X90;Ux%V%XeoySnG-N5YA>?^t\nzhrpNaqu!gM{alv5c-GwNeL1;=<o$d*CP1p#xvAK#F|r%iFIa&2>`stgzg+y?O6(u`\nzeE^vd=mHOLH)w5KoIew2|57MRRUH?ybEn4M>U|~I3aH!{l6mmH+o(motOXFj!g6^q\nz^IGJbHv<`c@zrmqid#io0(do72a5K!arc1-_{|7i?>|1WY4g+jzeL_crA{Ov>EGR$\nzxG_TSq)id2()XI2%o6s#C9wae&HWpm;zgkg_erq|nfvOTj6;9KYVZSxf?TQ6w?U_6\nzc=+|3-e*97SnvgRxVXjsmD1hxN4;A2wbM}zTe0@~8{ZdKiIrh!;JUiHP82OXUPxb0\nzRlR!UrJ})yQ|bS|6aN<oES53;MF<R=Xa6`+ZU*Mz3jSp!_|jBnD*@Ifus;=G05G*<\nU7noI_!vFvP07*qoM6N<$g5<;STmS$7\n\nliteral 0\nHcmV?d00001\n\ndiff --git a\/shells\/browser\/shared\/icons\/48-production.png b\/shells\/browser\/shared\/icons\/48-production.png\nnew file mode 100644\nindex 0000000000000000000000000000000000000000..9aac93a622bfab260839911f5d7daa1b47c7c839\nGIT binary patch\nliteral 1674\nzcmV;526g#~P)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm0000PbVXQnQ*UN;\nzcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU&EJ;K`RCwCdnoDd{RT#$)MJcu^Opp?B\nzFw_SY+k{X<H)4XaqAV;6bRkVls0&Io*2F+u)E5hbkEqdDH%K(F5f-Hj8WSU$sGAar\nz8mbjdO2lG{U<HfPs(62={okCKx#!Nk(~e=j<YuNb=kY!N=l`AQJQGMmAi>LP!L!9w\nzhV%u`lOuu5n^FEm@MKJ7$$0Rz%+F*p`-3-YP36f#l7|RfH5DvXro!dA)Dvp!%<|10\nzrhdZ%rn>%SGchu3E)E?x=RQ4R-zO2~E@|Cp7B#K2>s>iF8qDuEKOO2#Z9wW2TC?{9\nzQ`^uO`Q3%VV`k*Nm#jijvZVEX)9}bHYj~8LJ$lg2FPj0&H*d2FAZHH0V}3t5Xg!EG\nz@hbB7#3ic)9(AL3d)FRo0D^&Mj~=j*n_jmgod5OihZ08;0fnARI{3Cnd(48&QmZ`S\nzMv*^9N37>jxVk=Tqk};Umu2nec>AuWd(GnJb)n(IuXLL~PJLsh#?RY_af_Q<?bv^(\nzCe8R)pO>cwlsb4XUoZy66eT=bv$D}DMFfb<&<mYj@3JN};Y-h1qmULx0hI9xd3^Hu\nzPCJG<D9@Y|kGI99hQ9OF$E*#QUsGpa|G9jr=-8+tjx*YwQ#J$Az-;4FuZQrc=-sh%\nzPonw73@zCJAqIIGC!h@qqX;$e!`nR}_ER4|(YlvU50^gzcsELJd9W*l${%}sY+i#-\nzAdh9eL2>&W;9GM}QHUs@01wcIr^(schSj!4<YBxIwi68$Q}hth3!|u|iIMMYnqlao\nzrq-NDm*pTMk4XhKO<Qb9avx(k1VOSnGXO>LCaDpnG#&%*h4pb%f{5uPXADnNO7S@n\nz=4|k-Rn!2KC8u@7yIw*lP^A(42ub2SQV3_T7H0#m?6YF)ju3&|dJxI;8B*orJSZjQ\nzSp<a#x8G}(p7!SIurPHHB?&#nEk~@_+LePqzYH9-d$5<d6gr@b55Wq!5P6<$-)^cF\nzR9j`geQ~E<49;UMzJ7t_I-=5e4>|S5?i}2QH{JQfUYmY3*<0;c3Ky<(b?S=AtX*&F\nzR;{rqs5O9G#zgTe#*1HhQ%IrIVlJa};jZ=F&kATXUX$`o&+IFJMK@)TyWbkHPEa&3\nz5GGoT1uJz6Qiw%vYTFj(a+LB?B>y{?!;=<KnC_;G9OUME6hU<PmC{p&6c`{R(S$g0\nzH^UgWz;uws5kjGtFdwJ<cKlfEo^*UsT&b#*Q&Ge&YQZ#IMswNET{CX17lrVKHmC67\nzWZ8Y~IUL5t@;Fak82mV=FLsr3*NhUSU;as*6M-{_duImk@WK|}61*yPgdzx-9Tf%f\nzBCX-VuMG0-*Zl0hkRayw%sDVhn+H@0wrKNoVoGkjXOo3dKBExv9G-+l0)N2Z*hhx~\nzxUCN0ax(0HPrv_iXjpbjr(IuNTK$H0+p1~}H%hdlHv}-uSk93A2o#(HK-BaR-)bkK\nzAci25zmA%f4|iLIiPrfqJ`4>8)A2AkufCSQd2kG$DVI5ok<tGBc0bMu){w#3_D-`Z\nzI761M-(=4tqV)Z%-H}AkOC<z*cp<8&2_>83@s>9S?3g6iBBTQ~gQ8zP)@I-1q^J~P\nz3@Pb@^h9J%IZv2<4Y$jYFv8b%;(cGPyK4aiW1k#JM6FZNX$p_x#xrW#=YmF)`@ksc\nzrKQs)U8^X4^ckB|C!FMpM85X~wbP{UKnM;32pm(}uqz~qWif!$+J!#%JqpudsX+N#\nzcb#hJg(OkeE2Unmq%uI>^>K5eLjTJ-!t>YI&p8-R<a~ESYUYbw8qE53x)@c!>nc`i\nz#x3qRG)a4%Qu3`tu@+BElW|gBx7OFh4;)F5C!gn#7I7@~e=|T~jxz#Yq@pEdC}!Q(\nz#a(R4z%*CusSOY`x{Zk&8BSSsbmTm##6_=ipPCRcE9|;D%6~6JDxiS!nkIuY0CFb}\nz3M%t^SH9Opm*!s_8l3rVV~9S`izIbck^%1JR&>|YZ;RE3D5BB6`My4UP7P3zx(x`8\nzidbyYPK=1acy)`Nl>5wy0oRgL{O`mV&{x6w_f`BqdsOi+E4-<&NT6#Ay8kD@0DMx%\nU2JL{>NdN!<07*qoM6N<$f|%kP{{R30\n\nliteral 0\nHcmV?d00001\n\ndiff --git a\/shells\/browser\/shared\/icons\/48-unminified.png b\/shells\/browser\/shared\/icons\/48-unminified.png\nnew file mode 100644\nindex 0000000000000000000000000000000000000000..f3224021a560c7d543178c3159c05cee9eebac9f\nGIT binary patch\nliteral 2001\nzcmV;?2QK)DP)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm0000PbVXQnQ*UN;\nzcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU(b4f%&RCwCdT1#wHWfVTW)6Pt1rq7`d\nz5Cp3Q7PLuWLt}yqVFL@w!bfOgY(Pj56UI$hP&L4UZY+stB5EKKj7Ag7!me=BO}mjM\nzR1-_3A`knr5Bi#RrVsz`%$)1(%)NK!woKxj<YuPx-+SjfukU>So#v3TzJq(Wsh2i&\nzG*EU}yE;NUI=Ua^#KHHdqnNVGCe=}=#Ur0>;3<x|P0OOPF|!7ZvfOf=UZD8{RMPM!\nz6~20q@+vmc!azUG_1>YW+duL9bgXdyAqwo>N50zKe81@MAWi+;L1Q<+bnF0{c*V&D\nzTR-`lJXO`EYcpM)H2TG524rS|`h8UP&KY*x%qDJqN26CSXD$OJhu_e_kA3qMh40=W\nzEfC;na#ZVMQ5{hrkP&0nDnl*24ugY}3M?`w_r>*ib&^S#>%HpDAEkS8#p!0sEeSGs\nzq&qq?NRh{X(M)$Imq1?mMs^TD5oLUi*UjfIvt#1;-xr%{zVA0$ni%H;=V2Y^u0$g=\nz_e*zXG9b~PX#X~84N(O!M6v9|8IGu@YCD5M29{@M=+W6zmeED|<k##buSI!U_M}tr\nz001yn1|W~mzRTy}8i2<&15HP4OGDOj%Qt4m0hhmkUzca6Q=W^`N;EsCC4(@l24A-W\nzPH1-1xmKMXC3}^jb7@_l%F#7DAdG=JwKK2{00RhmVyNw+&i&{QEAz$gyD)Gs^BF*N\nz%`Dh>T&K#RwhLU>phYkb49)Gc2mt6f<C8e7vVaVL@-VazY1Ay(h9`79!iYZJBOCZU\nz9M2wXQ%fs7RZig?L>pxWM<ug!y*-(80AH40Lp)7U=XMz~mYVUs(NVM7U!IwE<UmR(\nzfe06?FT}JpV+cf7G5`>m!iyGC0vSUYNiY^i22FbkYZz{r)>g74r2_yPJbH|q&ln}C\nze>A9+5%duZItFvV&X76u3GRj2fLHVmzDu%T>@n#fD@Qad%>z&Z9ybBtKVCn;pkvY8\nz&adV1h@y^DftTi%Kmd4*f$H=ji0{C6iIxHeV6kGbBrOEKE`9AS%5l3H?2`{e>Si6R\nzc{pWmPfY8mi5XF#1;kM62l@b;U0R_lgHv>Ce2#8UhUxBXglhdBa%(xPbygw~^6%M8\nz`8#*16713MF{~&T&Y9^eoG<#y(gEB^JOzLMbN#cV!Gcu6L06za&k!6P|KWxX{_Xxz\nz>I+9{IJ(5g!2BY0OoZuBiI1Itki)gOho&Yxg0(m@MC0GzNNViq&fEM72axrJKl}Ay\nzu3{l0JB%jC;l!I_&Da~*1BiV-G^LzaPPz`CVeS3riu7nNDOn;K$YUeoP+GYv`YaR`\nz14<dM>H%+@N#p`MGp@rKV}p&Th+CO)4U_$0-|y6PZ<N}{=2GqfB%p~*s5zOmiNbCz\nz;>&2gsyAXK7EO7s)%R$|h)BI-&uhP@J-BK}8RbEFp3Cw&Sv!4yj6Qzyl)9!C`0rZ3\nzJEa4`qsR5RW0?WjRD+YPXbahq`j^rPHXhU0PgWL^-<6zLe1<hd9T5jRbxqInT8)hZ\nzqHaYXjwI}vwZz(%TEoQLa_Q3~@fE0lMF&3|SDMIzh&aD1hptzb(f;Cmjw}wm$7itf\nzk0wnTe8uwVMb)(*^}#0s(RL1iXQPVJAlTfSxAIM5``H`@UDkAp>v3F7M^K!IIq!~L\nz>^yiLR9Ro>W#BmQzH@4xS{_cAGSuV9BA+MDfPyRBE*_G=0MHn2VH2TeDJ5i57AXhJ\nzni^CKXP1=tLX?m_?3JaDt`1G>&3RwV0W;u61HEG4bxkkuxvkqu>E**mRx!|;#2moG\nziP$FHoU26xfeukJRo+}W`(T^_8SUEkG74xK4>~)C>I=N=5Xy1gavBlk=&A#Kf#yaj\nz$);U&5SsI<8dTD-rgI>&L=}D)HI@bRbB$Kz&7+p*i>bnf$=0<WkVhVvy#I;1YIX=r\nzaze2T*u{$1L7m7#L(oUJ#%6g27!7|TLmAsriUKt<f$=d5fL(bp$RHcblluk$QD#!}\nzW^zNQH6sp4GpE{Qpaf7RW&`Tx=nOMWO`KvA?QVQJXKYjN<grJ{BFb>WY8@pAeIy#`\nznLCgw`o`hZrfS~I+Ex8SVsoYvN)4akKo+{wC@06i4|vjeb_sCJibfG_VWdRb1PfhK\nzT;EXY=Sa)?r58$d2hwS1Z7t<v=LGr$jR-)faYzU>w^^-YXo2fbR>ssVrm;{cUelQa\nzjvlW=F1WXB<wxw05s8`E)O>+*OE=I<_kU&ZC=bXAyqBGs(fa11bfDNrJAHXHySze8\nz6$O006LaJMp5<dA!wFC-bdOi<Yaw-^TcC@uF@kd&BH`6TDnCzg|LUd$XmM~)z~dOa\nz;~tRT!sOQ&QJ}_M6XdQLQ;GIRnIJQm%IFWsj`f)1tFhU~<G&)qrUp})Rjds|^~QA(\nzl&LVyv#>R}k4W1oMAPBsj)AWAx#?M&<6kNNZw4A|&tm-Ta3Dmnf1JoR1Lly1e_2s)\nj>ar{oz*-0F{|YbwKA#E$9zpcP00000NkvXXu0mjf*nPMD\n\nliteral 0\nHcmV?d00001\n\ndiff --git a\/shells\/browser\/shared\/icons\/deadcode.svg b\/shells\/browser\/shared\/icons\/deadcode.svg\nnew file mode 100644\nindex 0000000000..ccd6e66906\n--- \/dev\/null\n+++ b\/shells\/browser\/shared\/icons\/deadcode.svg\n@@ -0,0 +1 @@\n+<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>\n\\ No newline at end of file\ndiff --git a\/shells\/browser\/shared\/icons\/development.svg b\/shells\/browser\/shared\/icons\/development.svg\nnew file mode 100644\nindex 0000000000..ccd6e66906\n--- \/dev\/null\n+++ b\/shells\/browser\/shared\/icons\/development.svg\n@@ -0,0 +1 @@\n+<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>\n\\ No newline at end of file\ndiff --git a\/shells\/browser\/shared\/icons\/disabled.svg b\/shells\/browser\/shared\/icons\/disabled.svg\nnew file mode 100644\nindex 0000000000..73c2bb51cd\n--- \/dev\/null\n+++ b\/shells\/browser\/shared\/icons\/disabled.svg\n@@ -0,0 +1 @@\n+<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>\n\\ No newline at end of file\ndiff --git a\/shells\/browser\/shared\/icons\/outdated.svg b\/shells\/browser\/shared\/icons\/outdated.svg\nnew file mode 100644\nindex 0000000000..03b83c1eb5\n--- \/dev\/null\n+++ b\/shells\/browser\/shared\/icons\/outdated.svg\n@@ -0,0 +1 @@\n+<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>\n\\ No newline at end of file\ndiff --git a\/shells\/browser\/shared\/icons\/production.svg b\/shells\/browser\/shared\/icons\/production.svg\nnew file mode 100644\nindex 0000000000..1e974f5131\n--- \/dev\/null\n+++ b\/shells\/browser\/shared\/icons\/production.svg\n@@ -0,0 +1 @@\n+<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>\n\\ No newline at end of file\ndiff --git a\/shells\/browser\/shared\/main.html b\/shells\/browser\/shared\/main.html\nnew file mode 100644\nindex 0000000000..f1c96d4a7a\n--- \/dev\/null\n+++ b\/shells\/browser\/shared\/main.html\n@@ -0,0 +1,9 @@\n+<!doctype html>\n+<html>\n+ <head>\n+ <meta charset=\"utf-8\">\n+ <script src=\".\/build\/main.js\"><\/script>\n+ <\/head>\n+ <body>\n+ <\/body>\n+<\/html>\ndiff --git a\/shells\/browser\/shared\/panel.html b\/shells\/browser\/shared\/panel.html\nnew file mode 100644\nindex 0000000000..60fd1bdf13\n--- \/dev\/null\n+++ b\/shells\/browser\/shared\/panel.html\n@@ -0,0 +1,32 @@\n+<!doctype html>\n+<html style=\"display: flex\">\n+ <head>\n+ <meta charset=\"utf8\">\n+ <style>\n+ html {\n+ display: flex;\n+ }\n+ body {\n+ margin: 0;\n+ padding: 0;\n+ flex: 1;\n+ display: flex;\n+ }\n+ #container {\n+ display: flex;\n+ flex: 1;\n+ width: 100%;\n+ position: fixed;\n+ top: 0;\n+ left: 0;\n+ right: 0;\n+ bottom: 0;\n+ }\n+ <\/style>\n+ <\/head>\n+ <body>\n+ \n+ <div id=\"container\">Unable to find React on the page.<\/div>\n+ <script src=\".\/build\/panel.js\"><\/script>\n+ <\/body>\n+<\/html>\ndiff --git a\/shells\/browser\/shared\/popups\/deadcode.html b\/shells\/browser\/shared\/popups\/deadcode.html\nnew file mode 100644\nindex 0000000000..5e74dc06c4\n--- \/dev\/null\n+++ b\/shells\/browser\/shared\/popups\/deadcode.html\n@@ -0,0 +1,32 @@\n+<script src=\"shared.js\"><\/script>\n+<style>\n+ html, body {\n+ font-size: 14px;\n+ min-width: 460px;\n+ min-height: 133px;\n+ }\n+\n+ body {\n+ margin: 8px;\n+ }\n+\n+ hr {\n+ width: 100%;\n+ }\n+<\/style>\n+<p>\n+ <b>This page includes an extra development build of React. 🚧<\/b>\n+<\/p>\n+<p>\n+ The React build on this page includes both development and production versions because dead code elimination has not been applied correctly.\n+ <br \/>\n+ <br \/>\n+ This makes its size larger, and causes React to run slower.\n+ <br \/>\n+ <br \/>\n+ 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.\n+<\/p>\n+<hr \/>\n+<p>\n+ Open the developer tools, and the React tab will appear to the right.\n+<\/p>\ndiff --git a\/shells\/browser\/shared\/popups\/development.html b\/shells\/browser\/shared\/popups\/development.html\nnew file mode 100644\nindex 0000000000..9c2089cc2f\n--- \/dev\/null\n+++ b\/shells\/browser\/shared\/popups\/development.html\n@@ -0,0 +1,28 @@\n+<script src=\"shared.js\"><\/script>\n+<style>\n+ html, body {\n+ font-size: 14px;\n+ min-width: 460px;\n+ min-height: 101px;\n+ }\n+\n+ body {\n+ margin: 8px;\n+ }\n+\n+ hr {\n+ width: 100%;\n+ }\n+<\/style>\n+<p>\n+ <b>This page is using the development build of React. 🚧<\/b>\n+<\/p>\n+<p>\n+ Note that the development build is not suitable for production.\n+ <br \/>\n+ 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.\n+<\/p>\n+<hr \/>\n+<p>\n+ Open the developer tools, and the React tab will appear to the right.\n+<\/p>\ndiff --git a\/shells\/browser\/shared\/popups\/disabled.html b\/shells\/browser\/shared\/popups\/disabled.html\nnew file mode 100644\nindex 0000000000..a89b178d49\n--- \/dev\/null\n+++ b\/shells\/browser\/shared\/popups\/disabled.html\n@@ -0,0 +1,21 @@\n+<script src=\"shared.js\"><\/script>\n+<style>\n+ html, body {\n+ font-size: 14px;\n+ min-width: 410px;\n+ min-height: 33px;\n+ }\n+\n+ body {\n+ margin: 8px;\n+ }\n+\n+ hr {\n+ width: 100%;\n+ }\n+<\/style>\n+<p>\n+ <b>This page doesn’t appear to be using React.<\/b>\n+ <br \/>\n+ 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>.\n+<\/p>\ndiff --git a\/shells\/browser\/shared\/popups\/outdated.html b\/shells\/browser\/shared\/popups\/outdated.html\nnew file mode 100644\nindex 0000000000..a6ec12bcaf\n--- \/dev\/null\n+++ b\/shells\/browser\/shared\/popups\/outdated.html\n@@ -0,0 +1,29 @@\n+<script src=\"shared.js\"><\/script>\n+<style>\n+ html, body {\n+ font-size: 14px;\n+ min-width: 460px;\n+ min-height: 117px;\n+ }\n+\n+ body {\n+ margin: 8px;\n+ }\n+\n+ hr {\n+ width: 100%;\n+ }\n+<\/style>\n+<p>\n+ <b>This page is using an outdated version of React. ⌛<\/b>\n+<\/p>\n+<p>\n+ We recommend updating React to ensure that you receive important bugfixes and performance improvements.\n+ <br \/>\n+ <br \/>\n+ You can find the upgrade instructions on the <a href=\"https:\/\/facebook.github.io\/react\/blog\/\">React blog<\/a>.\n+<\/p>\n+<hr \/>\n+<p>\n+ Open the developer tools, and the React tab will appear to the right.\n+<\/p>\ndiff --git a\/shells\/browser\/shared\/popups\/production.html b\/shells\/browser\/shared\/popups\/production.html\nnew file mode 100644\nindex 0000000000..1b65eb5b21\n--- \/dev\/null\n+++ b\/shells\/browser\/shared\/popups\/production.html\n@@ -0,0 +1,21 @@\n+<script src=\"shared.js\"><\/script>\n+<style>\n+ html, body {\n+ font-size: 14px;\n+ min-width: 460px;\n+ min-height: 39px;\n+ }\n+\n+ body {\n+ margin: 8px;\n+ }\n+\n+ hr {\n+ width: 100%;\n+ }\n+<\/style>\n+<p>\n+ <b>This page is using the production build of React. ✅<\/b>\n+ <br \/>\n+ Open the developer tools, and the React tab will appear to the right.\n+<\/p>\ndiff --git a\/shells\/browser\/shared\/popups\/shared.js b\/shells\/browser\/shared\/popups\/shared.js\nnew file mode 100644\nindex 0000000000..130f1f457e\n--- \/dev\/null\n+++ b\/shells\/browser\/shared\/popups\/shared.js\n@@ -0,0 +1,22 @@\n+\/* globals chrome *\/\n+\n+document.addEventListener('DOMContentLoaded', function() {\n+ \/\/ Make links work\n+ const links = document.getElementsByTagName('a');\n+ for (let i = 0; i < links.length; i++) {\n+ (function() {\n+ const ln = links[i];\n+ const location = ln.href;\n+ ln.onclick = function() {\n+ chrome.tabs.create({ active: true, url: location });\n+ };\n+ })();\n+ }\n+\n+ \/\/ Work around https:\/\/bugs.chromium.org\/p\/chromium\/issues\/detail?id=428044\n+ document.body.style.opacity = 0;\n+ document.body.style.transition = 'opacity ease-out .4s';\n+ requestAnimationFrame(function() {\n+ document.body.style.opacity = 1;\n+ });\n+});\ndiff --git a\/shells\/browser\/shared\/popups\/unminified.html b\/shells\/browser\/shared\/popups\/unminified.html\nnew file mode 100644\nindex 0000000000..553c9ac6ac\n--- \/dev\/null\n+++ b\/shells\/browser\/shared\/popups\/unminified.html\n@@ -0,0 +1,31 @@\n+<script src=\"shared.js\"><\/script>\n+<style>\n+ html, body {\n+ font-size: 14px;\n+ min-width: 460px;\n+ min-height: 133px;\n+ }\n+\n+ body {\n+ margin: 8px;\n+ }\n+\n+ hr {\n+ width: 100%;\n+ }\n+<\/style>\n+<p>\n+ <b>This page is using an unminified build of React. 🚧<\/b>\n+<\/p>\n+<p>\n+ The React build on this page appears to be unminified.\n+ <br \/>\n+ This makes its size larger, and causes React to run slower.\n+ <br \/>\n+ <br \/>\n+ Make sure to <a href=\"https:\/\/facebook.github.io\/react\/docs\/optimizing-performance.html#use-the-production-build\">set up minification<\/a> before deployment.\n+<\/p>\n+<hr \/>\n+<p>\n+ Open the developer tools, and the React tab will appear to the right.\n+<\/p>\ndiff --git a\/shells\/browser\/shared\/src\/backend.js b\/shells\/browser\/shared\/src\/backend.js\nnew file mode 100644\nindex 0000000000..c8cee150d8\n--- \/dev\/null\n+++ b\/shells\/browser\/shared\/src\/backend.js\n@@ -0,0 +1,77 @@\n+\/\/ Do not use imports or top-level requires here!\n+\/\/ Running module factories is intentionally delayed until we know the hook exists.\n+\/\/ This is to avoid issues like: https:\/\/github.com\/facebook\/react-devtools\/issues\/1039\n+\n+\/** @flow *\/\n+\n+function welcome(event) {\n+ if (\n+ event.source !== window ||\n+ event.data.source !== 'react-devtools-content-script'\n+ ) {\n+ return;\n+ }\n+\n+ window.removeEventListener('message', welcome);\n+\n+ setup(window.__REACT_DEVTOOLS_GLOBAL_HOOK__);\n+}\n+\n+window.addEventListener('message', welcome);\n+\n+function setup(hook) {\n+ const Agent = require('src\/backend\/agent').default;\n+ const Bridge = require('src\/bridge').default;\n+ const { initBackend } = require('src\/backend');\n+ const setupNativeStyleEditor = require('src\/backend\/NativeStyleEditor\/setupNativeStyleEditor')\n+ .default;\n+\n+ const bridge = new Bridge({\n+ listen(fn) {\n+ const listener = event => {\n+ if (\n+ event.source !== window ||\n+ !event.data ||\n+ event.data.source !== 'react-devtools-content-script' ||\n+ !event.data.payload\n+ ) {\n+ return;\n+ }\n+ fn(event.data.payload);\n+ };\n+ window.addEventListener('message', listener);\n+ return () => {\n+ window.removeEventListener('message', listener);\n+ };\n+ },\n+ send(event: string, payload: any, transferable?: Array<any>) {\n+ window.postMessage(\n+ {\n+ source: 'react-devtools-bridge',\n+ payload: { event, payload },\n+ },\n+ '*',\n+ transferable\n+ );\n+ },\n+ });\n+\n+ const agent = new Agent(bridge);\n+ agent.addListener('shutdown', () => {\n+ \/\/ If we received 'shutdown' from `agent`, we assume the `bridge` is already shutting down,\n+ \/\/ and that caused the 'shutdown' event on the `agent`, so we don't need to call `bridge.shutdown()` here.\n+ hook.emit('shutdown');\n+ });\n+\n+ initBackend(hook, agent, window);\n+\n+ \/\/ Setup React Native style editor if a renderer like react-native-web has injected it.\n+ if (!!hook.resolveRNStyle) {\n+ setupNativeStyleEditor(\n+ bridge,\n+ agent,\n+ hook.resolveRNStyle,\n+ hook.nativeStyleEditorValidAttributes\n+ );\n+ }\n+}\ndiff --git a\/shells\/browser\/shared\/src\/background.js b\/shells\/browser\/shared\/src\/background.js\nnew file mode 100644\nindex 0000000000..e22071b3aa\n--- \/dev\/null\n+++ b\/shells\/browser\/shared\/src\/background.js\n@@ -0,0 +1,113 @@\n+\/* global chrome *\/\n+\n+const ports = {};\n+\n+const IS_FIREFOX = navigator.userAgent.indexOf('Firefox') >= 0;\n+\n+chrome.runtime.onConnect.addListener(function(port) {\n+ let tab = null;\n+ let name = null;\n+ if (isNumeric(port.name)) {\n+ tab = port.name;\n+ name = 'devtools';\n+ installContentScript(+port.name);\n+ } else {\n+ tab = port.sender.tab.id;\n+ name = 'content-script';\n+ }\n+\n+ if (!ports[tab]) {\n+ ports[tab] = {\n+ devtools: null,\n+ 'content-script': null,\n+ };\n+ }\n+ ports[tab][name] = port;\n+\n+ if (ports[tab].devtools && ports[tab]['content-script']) {\n+ doublePipe(ports[tab].devtools, ports[tab]['content-script']);\n+ }\n+});\n+\n+function isNumeric(str: string): boolean {\n+ return +str + '' === str;\n+}\n+\n+function installContentScript(tabId: number) {\n+ chrome.tabs.executeScript(\n+ tabId,\n+ { file: '\/build\/contentScript.js' },\n+ function() {}\n+ );\n+}\n+\n+function doublePipe(one, two) {\n+ one.onMessage.addListener(lOne);\n+ function lOne(message) {\n+ two.postMessage(message);\n+ }\n+ two.onMessage.addListener(lTwo);\n+ function lTwo(message) {\n+ one.postMessage(message);\n+ }\n+ function shutdown() {\n+ one.onMessage.removeListener(lOne);\n+ two.onMessage.removeListener(lTwo);\n+ one.disconnect();\n+ two.disconnect();\n+ }\n+ one.onDisconnect.addListener(shutdown);\n+ two.onDisconnect.addListener(shutdown);\n+}\n+\n+function setIconAndPopup(reactBuildType, tabId) {\n+ chrome.browserAction.setIcon({\n+ tabId: tabId,\n+ path: {\n+ '16': 'icons\/16-' + reactBuildType + '.png',\n+ '32': 'icons\/32-' + reactBuildType + '.png',\n+ '48': 'icons\/48-' + reactBuildType + '.png',\n+ '128': 'icons\/128-' + reactBuildType + '.png',\n+ },\n+ });\n+ chrome.browserAction.setPopup({\n+ tabId: tabId,\n+ popup: 'popups\/' + reactBuildType + '.html',\n+ });\n+}\n+\n+\/\/ Listen to URL changes on the active tab and reset the DevTools icon.\n+\/\/ This prevents non-disabled icons from sticking in Firefox.\n+\/\/ Don't listen to this event in Chrome though.\n+\/\/ It fires more frequently, often after onMessage() has been called.\n+if (IS_FIREFOX) {\n+ chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {\n+ if (tab.active && changeInfo.status === 'loading') {\n+ setIconAndPopup('disabled', tabId);\n+ }\n+ });\n+}\n+\n+chrome.runtime.onMessage.addListener((request, sender) => {\n+ if (sender.tab) {\n+ \/\/ This is sent from the hook content script.\n+ \/\/ It tells us a renderer has attached.\n+ if (request.hasDetectedReact) {\n+ \/\/ We use browserAction instead of pageAction because this lets us\n+ \/\/ display a custom default popup when React is *not* detected.\n+ \/\/ It is specified in the manifest.\n+ let reactBuildType = request.reactBuildType;\n+ if (sender.url.indexOf('facebook.github.io\/react') !== -1) {\n+ \/\/ Cheat: We use the development version on the website because\n+ \/\/ it is better for interactive examples. However we're going\n+ \/\/ to get misguided bug reports if the extension highlights it\n+ \/\/ as using the dev version. We're just going to special case\n+ \/\/ our own documentation and cheat. It is acceptable to use dev\n+ \/\/ version of React in React docs, but not in any other case.\n+ reactBuildType = 'production';\n+ }\n+\n+ setIconAndPopup(reactBuildType, sender.tab.id);\n+ }\n+ }\n+});\ndiff --git a\/shells\/browser\/shared\/src\/contentScript.js b\/shells\/browser\/shared\/src\/contentScript.js\nnew file mode 100644\nindex 0000000000..68a44e21af\n--- \/dev\/null\n+++ b\/shells\/browser\/shared\/src\/contentScript.js\n@@ -0,0 +1,77 @@\n+\/* global chrome *\/\n+\n+let backendDisconnected: boolean = false;\n+let backendInitialized: boolean = false;\n+\n+function sayHelloToBackend() {\n+ window.postMessage(\n+ {\n+ source: 'react-devtools-content-script',\n+ hello: true,\n+ },\n+ '*'\n+ );\n+}\n+\n+function handleMessageFromDevtools(message) {\n+ window.postMessage(\n+ {\n+ source: 'react-devtools-content-script',\n+ payload: message,\n+ },\n+ '*'\n+ );\n+}\n+\n+function handleMessageFromPage(evt) {\n+ if (\n+ evt.source === window &&\n+ evt.data &&\n+ evt.data.source === 'react-devtools-bridge'\n+ ) {\n+ backendInitialized = true;\n+\n+ port.postMessage(evt.data.payload);\n+ }\n+}\n+\n+function handleDisconnect() {\n+ backendDisconnected = true;\n+\n+ window.removeEventListener('message', handleMessageFromPage);\n+\n+ window.postMessage(\n+ {\n+ source: 'react-devtools-content-script',\n+ payload: {\n+ type: 'event',\n+ event: 'shutdown',\n+ },\n+ },\n+ '*'\n+ );\n+}\n+\n+\/\/ proxy from main page to devtools (via the background page)\n+var port = chrome.runtime.connect({\n+ name: 'content-script',\n+});\n+port.onMessage.addListener(handleMessageFromDevtools);\n+port.onDisconnect.addListener(handleDisconnect);\n+\n+window.addEventListener('message', handleMessageFromPage);\n+\n+sayHelloToBackend();\n+\n+\/\/ The backend waits to install the global hook until notified by the content script.\n+\/\/ In the event of a page reload, the content script might be loaded before the backend is injected.\n+\/\/ Because of this we need to poll the backend until it has been initialized.\n+if (!backendInitialized) {\n+ const intervalID = setInterval(() => {\n+ if (backendInitialized || backendDisconnected) {\n+ clearInterval(intervalID);\n+ } else {\n+ sayHelloToBackend();\n+ }\n+ }, 500);\n+}\ndiff --git a\/shells\/browser\/shared\/src\/inject.js b\/shells\/browser\/shared\/src\/inject.js\nnew file mode 100644\nindex 0000000000..938e2cf7eb\n--- \/dev\/null\n+++ b\/shells\/browser\/shared\/src\/inject.js\n@@ -0,0 +1,24 @@\n+\/* global chrome *\/\n+\n+export default function inject(scriptName: string, done: ?Function) {\n+ const source = `\n+ \/\/ the prototype stuff is in case document.createElement has been modified\n+ (function () {\n+ var script = document.constructor.prototype.createElement.call(document, 'script');\n+ script.src = \"${scriptName}\";\n+ script.charset = \"utf-8\";\n+ document.documentElement.appendChild(script);\n+ script.parentNode.removeChild(script);\n+ })()\n+ `;\n+\n+ chrome.devtools.inspectedWindow.eval(source, function(response, error) {\n+ if (error) {\n+ console.log(error);\n+ }\n+\n+ if (typeof done === 'function') {\n+ done();\n+ }\n+ });\n+}\ndiff --git a\/shells\/browser\/shared\/src\/injectGlobalHook.js b\/shells\/browser\/shared\/src\/injectGlobalHook.js\nnew file mode 100644\nindex 0000000000..2bdc7c8a7f\n--- \/dev\/null\n+++ b\/shells\/browser\/shared\/src\/injectGlobalHook.js\n@@ -0,0 +1,89 @@\n+\/* global chrome *\/\n+\n+import nullthrows from 'nullthrows';\n+import { installHook } from 'src\/hook';\n+import { SESSION_STORAGE_RELOAD_AND_PROFILE_KEY } from 'src\/constants';\n+import { sessionStorageGetItem } from 'src\/storage';\n+\n+function injectCode(code) {\n+ const script = document.createElement('script');\n+ script.textContent = code;\n+\n+ \/\/ This script runs before the <head> element is created,\n+ \/\/ so we add the script to <html> instead.\n+ nullthrows(document.documentElement).appendChild(script);\n+ nullthrows(script.parentNode).removeChild(script);\n+}\n+\n+let lastDetectionResult;\n+\n+\/\/ We want to detect when a renderer attaches, and notify the \"background page\"\n+\/\/ (which is shared between tabs and can highlight the React icon).\n+\/\/ Currently we are in \"content script\" context, so we can't listen to the hook directly\n+\/\/ (it will be injected directly into the page).\n+\/\/ So instead, the hook will use postMessage() to pass message to us here.\n+\/\/ And when this happens, we'll send a message to the \"background page\".\n+window.addEventListener('message', function(evt) {\n+ if (\n+ evt.source === window &&\n+ evt.data &&\n+ evt.data.source === 'react-devtools-detector'\n+ ) {\n+ lastDetectionResult = {\n+ hasDetectedReact: true,\n+ reactBuildType: evt.data.reactBuildType,\n+ };\n+ chrome.runtime.sendMessage(lastDetectionResult);\n+ }\n+});\n+\n+\/\/ NOTE: Firefox WebExtensions content scripts are still alive and not re-injected\n+\/\/ while navigating the history to a document that has not been destroyed yet,\n+\/\/ replay the last detection result if the content script is active and the\n+\/\/ document has been hidden and shown again.\n+window.addEventListener('pageshow', function(evt) {\n+ if (!lastDetectionResult || evt.target !== window.document) {\n+ return;\n+ }\n+ chrome.runtime.sendMessage(lastDetectionResult);\n+});\n+\n+const detectReact = `\n+window.__REACT_DEVTOOLS_GLOBAL_HOOK__.on('renderer', function(evt) {\n+ window.postMessage({\n+ source: 'react-devtools-detector',\n+ reactBuildType: evt.reactBuildType,\n+ }, '*');\n+});\n+`;\n+const saveNativeValues = `\n+window.__REACT_DEVTOOLS_GLOBAL_HOOK__.nativeObjectCreate = Object.create;\n+window.__REACT_DEVTOOLS_GLOBAL_HOOK__.nativeMap = Map;\n+window.__REACT_DEVTOOLS_GLOBAL_HOOK__.nativeWeakMap = WeakMap;\n+window.__REACT_DEVTOOLS_GLOBAL_HOOK__.nativeSet = Set;\n+`;\n+\n+\/\/ If we have just reloaded to profile, we need to inject the renderer interface before the app loads.\n+if (sessionStorageGetItem(SESSION_STORAGE_RELOAD_AND_PROFILE_KEY) === 'true') {\n+ const rendererURL = chrome.runtime.getURL('build\/renderer.js');\n+ let rendererCode;\n+\n+ \/\/ We need to inject in time to catch the initial mount.\n+ \/\/ This means we need to synchronously read the renderer code itself,\n+ \/\/ and synchronously inject it into the page.\n+ \/\/ There are very few ways to actually do this.\n+ \/\/ This seems to be the best approach.\n+ const request = new XMLHttpRequest();\n+ request.addEventListener('load', function() {\n+ rendererCode = this.responseText;\n+ });\n+ request.open('GET', rendererURL, false);\n+ request.send();\n+ injectCode(rendererCode);\n+}\n+\n+\/\/ Inject a `__REACT_DEVTOOLS_GLOBAL_HOOK__` global so that React can detect that the\n+\/\/ devtools are installed (and skip its suggestion to install the devtools).\n+injectCode(\n+ ';(' + installHook.toString() + '(window))' + saveNativeValues + detectReact\n+);\ndiff --git a\/shells\/browser\/shared\/src\/main.js b\/shells\/browser\/shared\/src\/main.js\nnew file mode 100644\nindex 0000000000..f4942e5f01\n--- \/dev\/null\n+++ b\/shells\/browser\/shared\/src\/main.js\n@@ -0,0 +1,316 @@\n+\/* global chrome *\/\n+\n+import { createElement } from 'react';\n+import { unstable_createRoot as createRoot, flushSync } from 'react-dom';\n+import Bridge from 'src\/bridge';\n+import Store from 'src\/devtools\/store';\n+import inject from '.\/inject';\n+import {\n+ createViewElementSource,\n+ getBrowserName,\n+ getBrowserTheme,\n+} from '.\/utils';\n+import { getSavedComponentFilters, getAppendComponentStack } from 'src\/utils';\n+import {\n+ localStorageGetItem,\n+ localStorageRemoveItem,\n+ localStorageSetItem,\n+} from 'src\/storage';\n+import DevTools from 'src\/devtools\/views\/DevTools';\n+\n+const LOCAL_STORAGE_SUPPORTS_PROFILING_KEY =\n+ 'React::DevTools::supportsProfiling';\n+\n+let panelCreated = false;\n+\n+\/\/ The renderer interface can't read saved component filters directly,\n+\/\/ because they are stored in localStorage within the context of the extension.\n+\/\/ Instead it relies on the extension to pass filters through.\n+function syncSavedPreferences() {\n+ const componentFilters = getSavedComponentFilters();\n+ chrome.devtools.inspectedWindow.eval(\n+ `window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = ${JSON.stringify(\n+ componentFilters\n+ )};`\n+ );\n+\n+ const appendComponentStack = getAppendComponentStack();\n+ chrome.devtools.inspectedWindow.eval(\n+ `window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = ${JSON.stringify(\n+ appendComponentStack\n+ )};`\n+ );\n+}\n+\n+syncSavedPreferences();\n+\n+function createPanelIfReactLoaded() {\n+ if (panelCreated) {\n+ return;\n+ }\n+\n+ chrome.devtools.inspectedWindow.eval(\n+ 'window.__REACT_DEVTOOLS_GLOBAL_HOOK__ && window.__REACT_DEVTOOLS_GLOBAL_HOOK__.renderers.size > 0',\n+ function(pageHasReact, error) {\n+ if (!pageHasReact || panelCreated) {\n+ return;\n+ }\n+\n+ panelCreated = true;\n+\n+ clearInterval(loadCheckInterval);\n+\n+ let bridge = null;\n+ let store = null;\n+\n+ let profilingData = null;\n+\n+ let componentsPortalContainer = null;\n+ let profilerPortalContainer = null;\n+\n+ let cloneStyleTags = null;\n+ let mostRecentOverrideTab = null;\n+ let render = null;\n+ let root = null;\n+\n+ const tabId = chrome.devtools.inspectedWindow.tabId;\n+\n+ function initBridgeAndStore() {\n+ const port = chrome.runtime.connect({\n+ name: '' + tabId,\n+ });\n+ \/\/ Looks like `port.onDisconnect` does not trigger on in-tab navigation like new URL or back\/forward navigation,\n+ \/\/ so it makes no sense to handle it here.\n+\n+ bridge = new Bridge({\n+ listen(fn) {\n+ const listener = message => fn(message);\n+ \/\/ Store the reference so that we unsubscribe from the same object.\n+ const portOnMessage = port.onMessage;\n+ portOnMessage.addListener(listener);\n+ return () => {\n+ portOnMessage.removeListener(listener);\n+ };\n+ },\n+ send(event: string, payload: any, transferable?: Array<any>) {\n+ port.postMessage({ event, payload }, transferable);\n+ },\n+ });\n+ bridge.addListener('reloadAppForProfiling', () => {\n+ localStorageSetItem(LOCAL_STORAGE_SUPPORTS_PROFILING_KEY, 'true');\n+ chrome.devtools.inspectedWindow.eval('window.location.reload();');\n+ });\n+ bridge.addListener('syncSelectionToNativeElementsPanel', () => {\n+ setBrowserSelectionFromReact();\n+ });\n+\n+ \/\/ This flag lets us tip the Store off early that we expect to be profiling.\n+ \/\/ This avoids flashing a temporary \"Profiling not supported\" message in the Profiler tab,\n+ \/\/ after a user has clicked the \"reload and profile\" button.\n+ let isProfiling = false;\n+ let supportsProfiling = false;\n+ if (\n+ localStorageGetItem(LOCAL_STORAGE_SUPPORTS_PROFILING_KEY) === 'true'\n+ ) {\n+ supportsProfiling = true;\n+ isProfiling = true;\n+ localStorageRemoveItem(LOCAL_STORAGE_SUPPORTS_PROFILING_KEY);\n+ }\n+\n+ store = new Store(bridge, {\n+ isProfiling,\n+ supportsReloadAndProfile: getBrowserName() === 'Chrome',\n+ supportsProfiling,\n+ });\n+ store.profilerStore.profilingData = profilingData;\n+\n+ \/\/ Initialize the backend only once the Store has been initialized.\n+ \/\/ Otherwise the Store may miss important initial tree op codes.\n+ inject(chrome.runtime.getURL('build\/backend.js'));\n+\n+ const viewElementSourceFunction = createViewElementSource(\n+ bridge,\n+ store\n+ );\n+\n+ root = createRoot(document.createElement('div'));\n+\n+ render = (overrideTab = mostRecentOverrideTab) => {\n+ mostRecentOverrideTab = overrideTab;\n+\n+ root.render(\n+ createElement(DevTools, {\n+ bridge,\n+ browserTheme: getBrowserTheme(),\n+ componentsPortalContainer,\n+ overrideTab,\n+ profilerPortalContainer,\n+ showTabBar: false,\n+ showWelcomeToTheNewDevToolsDialog: true,\n+ store,\n+ viewElementSourceFunction,\n+ })\n+ );\n+ };\n+\n+ render();\n+ }\n+\n+ cloneStyleTags = () => {\n+ const linkTags = [];\n+ for (let linkTag of document.getElementsByTagName('link')) {\n+ if (linkTag.rel === 'stylesheet') {\n+ const newLinkTag = document.createElement('link');\n+ for (let attribute of linkTag.attributes) {\n+ newLinkTag.setAttribute(attribute.nodeName, attribute.nodeValue);\n+ }\n+ linkTags.push(newLinkTag);\n+ }\n+ }\n+ return linkTags;\n+ };\n+\n+ initBridgeAndStore();\n+\n+ function ensureInitialHTMLIsCleared(container) {\n+ if (container._hasInitialHTMLBeenCleared) {\n+ return;\n+ }\n+ container.innerHTML = '';\n+ container._hasInitialHTMLBeenCleared = true;\n+ }\n+\n+ function setBrowserSelectionFromReact() {\n+ \/\/ This is currently only called on demand when you press \"view DOM\".\n+ \/\/ In the future, if Chrome adds an inspect() that doesn't switch tabs,\n+ \/\/ we could make this happen automatically when you select another component.\n+ chrome.devtools.inspectedWindow.eval(\n+ '(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 !== $0) ?' +\n+ '(inspect(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0), true) :' +\n+ 'false',\n+ (didSelectionChange, error) => {\n+ if (error) {\n+ console.error(error);\n+ }\n+ }\n+ );\n+ }\n+\n+ function setReactSelectionFromBrowser() {\n+ \/\/ When the user chooses a different node in the browser Elements tab,\n+ \/\/ copy it over to the hook object so that we can sync the selection.\n+ chrome.devtools.inspectedWindow.eval(\n+ '(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 !== $0) ?' +\n+ '(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 = $0, true) :' +\n+ 'false',\n+ (didSelectionChange, error) => {\n+ if (error) {\n+ console.error(error);\n+ } else if (didSelectionChange) {\n+ \/\/ Remember to sync the selection next time we show Components tab.\n+ needsToSyncElementSelection = true;\n+ }\n+ }\n+ );\n+ }\n+\n+ setReactSelectionFromBrowser();\n+ chrome.devtools.panels.elements.onSelectionChanged.addListener(() => {\n+ setReactSelectionFromBrowser();\n+ });\n+\n+ let currentPanel = null;\n+ let needsToSyncElementSelection = false;\n+\n+ chrome.devtools.panels.create('⚛ Components', '', 'panel.html', panel => {\n+ panel.onShown.addListener(panel => {\n+ if (needsToSyncElementSelection) {\n+ needsToSyncElementSelection = false;\n+ bridge.send('syncSelectionFromNativeElementsPanel');\n+ }\n+\n+ if (currentPanel === panel) {\n+ return;\n+ }\n+\n+ currentPanel = panel;\n+ componentsPortalContainer = panel.container;\n+\n+ if (componentsPortalContainer != null) {\n+ ensureInitialHTMLIsCleared(componentsPortalContainer);\n+ render('components');\n+ panel.injectStyles(cloneStyleTags);\n+ }\n+ });\n+ panel.onHidden.addListener(() => {\n+ \/\/ TODO: Stop highlighting and stuff.\n+ });\n+ });\n+\n+ chrome.devtools.panels.create('⚛ Profiler', '', 'panel.html', panel => {\n+ panel.onShown.addListener(panel => {\n+ if (currentPanel === panel) {\n+ return;\n+ }\n+\n+ currentPanel = panel;\n+ profilerPortalContainer = panel.container;\n+\n+ if (profilerPortalContainer != null) {\n+ ensureInitialHTMLIsCleared(profilerPortalContainer);\n+ render('profiler');\n+ panel.injectStyles(cloneStyleTags);\n+ }\n+ });\n+ });\n+\n+ chrome.devtools.network.onNavigated.removeListener(checkPageForReact);\n+\n+ \/\/ Shutdown bridge before a new page is loaded.\n+ chrome.webNavigation.onBeforeNavigate.addListener(\n+ function onBeforeNavigate(details) {\n+ \/\/ Ignore navigation events from other tabs (or from within frames).\n+ if (details.tabId !== tabId || details.frameId !== 0) {\n+ return;\n+ }\n+\n+ \/\/ `bridge.shutdown()` will remove all listeners we added, so we don't have to.\n+ bridge.shutdown();\n+\n+ profilingData = store.profilerStore.profilingData;\n+ }\n+ );\n+\n+ \/\/ Re-initialize DevTools panel when a new page is loaded.\n+ chrome.devtools.network.onNavigated.addListener(function onNavigated() {\n+ \/\/ Re-initialize saved filters on navigation,\n+ \/\/ since global values stored on window get reset in this case.\n+ syncSavedPreferences();\n+\n+ \/\/ It's easiest to recreate the DevTools panel (to clean up potential stale state).\n+ \/\/ We can revisit this in the future as a small optimization.\n+ flushSync(() => {\n+ root.unmount(() => {\n+ initBridgeAndStore();\n+ });\n+ });\n+ });\n+ }\n+ );\n+}\n+\n+\/\/ Load (or reload) the DevTools extension when the user navigates to a new page.\n+function checkPageForReact() {\n+ syncSavedPreferences();\n+ createPanelIfReactLoaded();\n+}\n+\n+chrome.devtools.network.onNavigated.addListener(checkPageForReact);\n+\n+\/\/ Check to see if React has loaded once per second in case React is added\n+\/\/ after page load\n+const loadCheckInterval = setInterval(function() {\n+ createPanelIfReactLoaded();\n+}, 1000);\n+\n+createPanelIfReactLoaded();\ndiff --git a\/shells\/browser\/shared\/src\/panel.js b\/shells\/browser\/shared\/src\/panel.js\nnew file mode 100644\nindex 0000000000..f84ac11beb\n--- \/dev\/null\n+++ b\/shells\/browser\/shared\/src\/panel.js\n@@ -0,0 +1,18 @@\n+\/\/ Portal target container.\n+window.container = document.getElementById('container');\n+\n+let hasInjectedStyles = false;\n+\n+\/\/ DevTools styles are injected into the top-level document head (where the main React app is rendered).\n+\/\/ This method copies those styles to the child window where each panel (e.g. Elements, Profiler) is portaled.\n+window.injectStyles = getLinkTags => {\n+ if (!hasInjectedStyles) {\n+ hasInjectedStyles = true;\n+\n+ const linkTags = getLinkTags();\n+\n+ for (let linkTag of linkTags) {\n+ document.head.appendChild(linkTag);\n+ }\n+ }\n+};\ndiff --git a\/shells\/browser\/shared\/src\/renderer.js b\/shells\/browser\/shared\/src\/renderer.js\nnew file mode 100644\nindex 0000000000..0a0e74808e\n--- \/dev\/null\n+++ b\/shells\/browser\/shared\/src\/renderer.js\n@@ -0,0 +1,26 @@\n+\/**\n+ * In order to support reload-and-profile functionality, the renderer needs to be injected before any other scripts.\n+ * Since it is a complex file (with imports) we can't just toString() it like we do with the hook itself,\n+ * So this entry point (one of the web_accessible_resources) provcides a way to eagerly inject it.\n+ * The hook will look for the presence of a global __REACT_DEVTOOLS_ATTACH__ and attach an injected renderer early.\n+ * The normal case (not a reload-and-profile) will not make use of this entry point though.\n+ *\n+ * @flow\n+ *\/\n+\n+import { attach } from 'src\/backend\/renderer';\n+\n+Object.defineProperty(\n+ window,\n+ '__REACT_DEVTOOLS_ATTACH__',\n+ ({\n+ enumerable: false,\n+ \/\/ This property needs to be configurable to allow third-party integrations\n+ \/\/ to attach their own renderer. Note that using third-party integrations\n+ \/\/ is not officially supported. Use at your own risk.\n+ configurable: true,\n+ get() {\n+ return attach;\n+ },\n+ }: Object)\n+);\ndiff --git a\/shells\/browser\/shared\/src\/utils.js b\/shells\/browser\/shared\/src\/utils.js\nnew file mode 100644\nindex 0000000000..c419244596\n--- \/dev\/null\n+++ b\/shells\/browser\/shared\/src\/utils.js\n@@ -0,0 +1,51 @@\n+\/* global chrome *\/\n+\n+const IS_CHROME = navigator.userAgent.indexOf('Firefox') < 0;\n+\n+export function createViewElementSource(bridge: Bridge, store: Store) {\n+ return function viewElementSource(id) {\n+ const rendererID = store.getRendererIDForElement(id);\n+ if (rendererID != null) {\n+ \/\/ Ask the renderer interface to determine the component function,\n+ \/\/ and store it as a global variable on the window\n+ bridge.send('viewElementSource', { id, rendererID });\n+\n+ setTimeout(() => {\n+ \/\/ Ask Chrome to display the location of the component function,\n+ \/\/ assuming the renderer found one.\n+ chrome.devtools.inspectedWindow.eval(`\n+ if (window.$type != null) {\n+ inspect(window.$type);\n+ }\n+ `);\n+ }, 100);\n+ }\n+ };\n+}\n+\n+export type BrowserName = 'Chrome' | 'Firefox';\n+\n+export function getBrowserName(): BrowserName {\n+ return IS_CHROME ? 'Chrome' : 'Firefox';\n+}\n+\n+export type BrowserTheme = 'dark' | 'light';\n+\n+export function getBrowserTheme(): BrowserTheme {\n+ if (IS_CHROME) {\n+ \/\/ chrome.devtools.panels added in Chrome 18.\n+ \/\/ chrome.devtools.panels.themeName added in Chrome 54.\n+ return chrome.devtools.panels.themeName === 'dark' ? 'dark' : 'light';\n+ } else {\n+ \/\/ chrome.devtools.panels.themeName added in Firefox 55.\n+ \/\/ https:\/\/developer.mozilla.org\/en-US\/Add-ons\/WebExtensions\/API\/devtools.panels\/themeName\n+ if (chrome.devtools && chrome.devtools.panels) {\n+ switch (chrome.devtools.panels.themeName) {\n+ case 'dark':\n+ return 'dark';\n+ default:\n+ return 'light';\n+ }\n+ }\n+ }\n+}\ndiff --git a\/shells\/browser\/shared\/webpack.backend.js b\/shells\/browser\/shared\/webpack.backend.js\nnew file mode 100644\nindex 0000000000..cf034bccef\n--- \/dev\/null\n+++ b\/shells\/browser\/shared\/webpack.backend.js\n@@ -0,0 +1,50 @@\n+const { resolve } = require('path');\n+const { DefinePlugin } = require('webpack');\n+const { getGitHubURL, getVersionString } = require('..\/..\/utils');\n+\n+const NODE_ENV = process.env.NODE_ENV;\n+if (!NODE_ENV) {\n+ console.error('NODE_ENV not set');\n+ process.exit(1);\n+}\n+\n+const __DEV__ = NODE_ENV === 'development';\n+\n+const GITHUB_URL = getGitHubURL();\n+const DEVTOOLS_VERSION = getVersionString();\n+\n+module.exports = {\n+ mode: __DEV__ ? 'development' : 'production',\n+ devtool: __DEV__ ? 'cheap-module-eval-source-map' : false,\n+ entry: {\n+ backend: '.\/src\/backend.js',\n+ },\n+ output: {\n+ path: __dirname + '\/build',\n+ filename: '[name].js',\n+ },\n+ resolve: {\n+ alias: {\n+ src: resolve(__dirname, '..\/..\/..\/src'),\n+ },\n+ },\n+ plugins: [\n+ new DefinePlugin({\n+ __DEV__: true,\n+ __TEST__: false,\n+ 'process.env.DEVTOOLS_VERSION': `\"${DEVTOOLS_VERSION}\"`,\n+ 'process.env.GITHUB_URL': `\"${GITHUB_URL}\"`,\n+ }),\n+ ],\n+ module: {\n+ rules: [\n+ {\n+ test: \/\\.js$\/,\n+ loader: 'babel-loader',\n+ options: {\n+ configFile: resolve(__dirname, '..\/..\/..\/babel.config.js'),\n+ },\n+ },\n+ ],\n+ },\n+};\ndiff --git a\/shells\/browser\/shared\/webpack.config.js b\/shells\/browser\/shared\/webpack.config.js\nnew file mode 100644\nindex 0000000000..23342ca46c\n--- \/dev\/null\n+++ b\/shells\/browser\/shared\/webpack.config.js\n@@ -0,0 +1,72 @@\n+const { resolve } = require('path');\n+const { DefinePlugin } = require('webpack');\n+const { getGitHubURL, getVersionString } = require('..\/..\/utils');\n+\n+const NODE_ENV = process.env.NODE_ENV;\n+if (!NODE_ENV) {\n+ console.error('NODE_ENV not set');\n+ process.exit(1);\n+}\n+\n+const __DEV__ = NODE_ENV === 'development';\n+\n+const GITHUB_URL = getGitHubURL();\n+const DEVTOOLS_VERSION = getVersionString();\n+\n+module.exports = {\n+ mode: __DEV__ ? 'development' : 'production',\n+ devtool: __DEV__ ? 'cheap-module-eval-source-map' : false,\n+ entry: {\n+ background: '.\/src\/background.js',\n+ contentScript: '.\/src\/contentScript.js',\n+ injectGlobalHook: '.\/src\/injectGlobalHook.js',\n+ main: '.\/src\/main.js',\n+ panel: '.\/src\/panel.js',\n+ renderer: '.\/src\/renderer.js',\n+ },\n+ output: {\n+ path: __dirname + '\/build',\n+ filename: '[name].js',\n+ },\n+ resolve: {\n+ alias: {\n+ src: resolve(__dirname, '..\/..\/..\/src'),\n+ },\n+ },\n+ plugins: [\n+ new DefinePlugin({\n+ __DEV__: false,\n+ __TEST__: false,\n+ 'process.env.DEVTOOLS_VERSION': `\"${DEVTOOLS_VERSION}\"`,\n+ 'process.env.GITHUB_URL': `\"${GITHUB_URL}\"`,\n+ 'process.env.NODE_ENV': `\"${NODE_ENV}\"`,\n+ }),\n+ ],\n+ module: {\n+ rules: [\n+ {\n+ test: \/\\.js$\/,\n+ loader: 'babel-loader',\n+ options: {\n+ configFile: resolve(__dirname, '..\/..\/..\/babel.config.js'),\n+ },\n+ },\n+ {\n+ test: \/\\.css$\/,\n+ use: [\n+ {\n+ loader: 'style-loader',\n+ },\n+ {\n+ loader: 'css-loader',\n+ options: {\n+ sourceMap: true,\n+ modules: true,\n+ localIdentName: '[local]___[hash:base64:5]',\n+ },\n+ },\n+ ],\n+ },\n+ ],\n+ },\n+};\ndiff --git a\/shells\/dev\/app\/DeeplyNestedComponents\/index.js b\/shells\/dev\/app\/DeeplyNestedComponents\/index.js\nnew file mode 100644\nindex 0000000000..ad4468d2eb\n--- \/dev\/null\n+++ b\/shells\/dev\/app\/DeeplyNestedComponents\/index.js\n@@ -0,0 +1,35 @@\n+\/\/ @flow\n+\n+import React, { Fragment } from 'react';\n+\n+function wrapWithHoc(Component, index) {\n+ function HOC() {\n+ return <Component \/>;\n+ }\n+ HOC.displayName = `withHoc${index}(${Component.displayName ||\n+ Component.name})`;\n+ return HOC;\n+}\n+\n+function wrapWithNested(Component, times) {\n+ for (let i = 0; i < times; i++) {\n+ Component = wrapWithHoc(Component, i);\n+ }\n+\n+ return Component;\n+}\n+\n+function Nested() {\n+ return <div>Deeply nested div<\/div>;\n+}\n+\n+const DeeplyNested = wrapWithNested(Nested, 100);\n+\n+export default function DeeplyNestedComponents() {\n+ return (\n+ <Fragment>\n+ <h1>Deeply nested component<\/h1>\n+ <DeeplyNested \/>\n+ <\/Fragment>\n+ );\n+}\ndiff --git a\/shells\/dev\/app\/EditableProps\/index.js b\/shells\/dev\/app\/EditableProps\/index.js\nnew file mode 100644\nindex 0000000000..f5a39fc92f\n--- \/dev\/null\n+++ b\/shells\/dev\/app\/EditableProps\/index.js\n@@ -0,0 +1,162 @@\n+\/\/ @flow\n+\n+import React, {\n+ createContext,\n+ Component,\n+ forwardRef,\n+ Fragment,\n+ memo,\n+ useCallback,\n+ useDebugValue,\n+ useEffect,\n+ useReducer,\n+ useState,\n+} from 'react';\n+\n+const initialData = { foo: 'FOO', bar: 'BAR' };\n+\n+function reducer(state, action) {\n+ switch (action.type) {\n+ case 'swap':\n+ return { foo: state.bar, bar: state.foo };\n+ default:\n+ throw new Error();\n+ }\n+}\n+\n+type StatefulFunctionProps = {| name: string |};\n+\n+function StatefulFunction({ name }: StatefulFunctionProps) {\n+ const [count, updateCount] = useState(0);\n+ const debouncedCount = useDebounce(count, 1000);\n+ const handleUpdateCountClick = useCallback(() => updateCount(count + 1), [\n+ count,\n+ ]);\n+\n+ const [data, dispatch] = useReducer(reducer, initialData);\n+ const handleUpdateReducerClick = useCallback(\n+ () => dispatch({ type: 'swap' }),\n+ []\n+ );\n+\n+ return (\n+ <ul>\n+ <li>Name: {name}<\/li>\n+ <li>\n+ <button onClick={handleUpdateCountClick}>\n+ Debounced count: {debouncedCount}\n+ <\/button>\n+ <\/li>\n+ <li>\n+ Reducer state: foo \"{data.foo}\", bar \"{data.bar}\"\n+ <\/li>\n+ <li>\n+ <button onClick={handleUpdateReducerClick}>Swap reducer values<\/button>\n+ <\/li>\n+ <\/ul>\n+ );\n+}\n+\n+const BoolContext = createContext(true);\n+BoolContext.displayName = 'BoolContext';\n+\n+type Props = {| name: string, toggle: boolean |};\n+type State = {| cities: Array<string>, state: string |};\n+\n+class StatefulClass extends Component<Props, State> {\n+ static contextType = BoolContext;\n+\n+ state: State = {\n+ cities: ['San Francisco', 'San Jose'],\n+ state: 'California',\n+ };\n+\n+ handleChange = ({ target }) =>\n+ this.setState({\n+ state: target.value,\n+ });\n+\n+ render() {\n+ return (\n+ <ul>\n+ <li>Name: {this.props.name}<\/li>\n+ <li>Toggle: {this.props.toggle ? 'true' : 'false'}<\/li>\n+ <li>\n+ State: <input value={this.state.state} onChange={this.handleChange} \/>\n+ <\/li>\n+ <li>Cities: {this.state.cities.join(', ')}<\/li>\n+ <li>Context: {this.context ? 'true' : 'false'}<\/li>\n+ <\/ul>\n+ );\n+ }\n+}\n+\n+const MemoizedStatefulClass = memo(StatefulClass);\n+const MemoizedStatefulFunction = memo(StatefulFunction);\n+\n+const ForwardRef = forwardRef<{| name: string |}, HTMLUListElement>(\n+ ({ name }, ref) => {\n+ const [count, updateCount] = useState(0);\n+ const debouncedCount = useDebounce(count, 1000);\n+ const handleUpdateCountClick = useCallback(() => updateCount(count + 1), [\n+ count,\n+ ]);\n+ return (\n+ <ul ref={ref}>\n+ <li>Name: {name}<\/li>\n+ <li>\n+ <button onClick={handleUpdateCountClick}>\n+ Debounced count: {debouncedCount}\n+ <\/button>\n+ <\/li>\n+ <\/ul>\n+ );\n+ }\n+);\n+\n+export default function EditableProps() {\n+ return (\n+ <Fragment>\n+ <h1>Editable props<\/h1>\n+ <strong>Class<\/strong>\n+ <StatefulClass name=\"Brian\" toggle={true} \/>\n+ <strong>Function<\/strong>\n+ <StatefulFunction name=\"Brian\" \/>\n+ <strong>Memoized Class<\/strong>\n+ <MemoizedStatefulClass name=\"Brian\" toggle={true} \/>\n+ <strong>Memoized Function<\/strong>\n+ <MemoizedStatefulFunction name=\"Brian\" \/>\n+ <strong>Forward Ref<\/strong>\n+ <ForwardRef name=\"Brian\" \/>\n+ <\/Fragment>\n+ );\n+}\n+\n+\/\/ Below copied from https:\/\/usehooks.com\/\n+function useDebounce(value, delay) {\n+ \/\/ State and setters for debounced value\n+ const [debouncedValue, setDebouncedValue] = useState(value);\n+\n+ \/\/ Show the value in DevTools\n+ useDebugValue(debouncedValue);\n+\n+ useEffect(\n+ () => {\n+ \/\/ Update debounced value after delay\n+ const handler = setTimeout(() => {\n+ setDebouncedValue(value);\n+ }, delay);\n+\n+ \/\/ Cancel the timeout if value changes (also on delay change or unmount)\n+ \/\/ This is how we prevent debounced value from updating if value is changed ...\n+ \/\/ .. within the delay period. Timeout gets cleared and restarted.\n+ return () => {\n+ clearTimeout(handler);\n+ };\n+ },\n+ [value, delay] \/\/ Only re-call effect if value or delay changes\n+ );\n+\n+ return debouncedValue;\n+}\n+\/\/ Above copied from https:\/\/usehooks.com\/\ndiff --git a\/shells\/dev\/app\/ElementTypes\/index.js b\/shells\/dev\/app\/ElementTypes\/index.js\nnew file mode 100644\nindex 0000000000..6ef562596c\n--- \/dev\/null\n+++ b\/shells\/dev\/app\/ElementTypes\/index.js\n@@ -0,0 +1,60 @@\n+\/\/ @flow\n+\n+import React, {\n+ createContext,\n+ forwardRef,\n+ lazy,\n+ memo,\n+ Component,\n+ Fragment,\n+ \/\/ $FlowFixMe Flow doesn't know about the Profiler import yet\n+ Profiler,\n+ StrictMode,\n+ Suspense,\n+} from 'react';\n+\n+const Context = createContext('abc');\n+Context.displayName = 'ExampleContext';\n+\n+class ClassComponent extends Component<any> {\n+ render() {\n+ return null;\n+ }\n+}\n+\n+function FunctionComponent() {\n+ return null;\n+}\n+\n+const MemoFunctionComponent = memo(FunctionComponent);\n+\n+const ForwardRefComponent = forwardRef((props, ref) => (\n+ <ClassComponent ref={ref} {...props} \/>\n+));\n+\n+const LazyComponent = lazy(() =>\n+ Promise.resolve({\n+ default: FunctionComponent,\n+ })\n+);\n+\n+export default function ElementTypes() {\n+ return (\n+ <Profiler id=\"test\" onRender={() => {}}>\n+ <Fragment>\n+ <Context.Provider value={'def'}>\n+ <Context.Consumer>{value => null}<\/Context.Consumer>\n+ <\/Context.Provider>\n+ <StrictMode>\n+ <Suspense fallback={<div>Loading...<\/div>}>\n+ <ClassComponent \/>\n+ <FunctionComponent \/>\n+ <MemoFunctionComponent \/>\n+ <ForwardRefComponent \/>\n+ <LazyComponent \/>\n+ <\/Suspense>\n+ <\/StrictMode>\n+ <\/Fragment>\n+ <\/Profiler>\n+ );\n+}\ndiff --git a\/shells\/dev\/app\/Hydration\/index.js b\/shells\/dev\/app\/Hydration\/index.js\nnew file mode 100644\nindex 0000000000..bf0cd66a52\n--- \/dev\/null\n+++ b\/shells\/dev\/app\/Hydration\/index.js\n@@ -0,0 +1,133 @@\n+\/\/ @flow\n+\n+import React, { Fragment, useDebugValue, useState } from 'react';\n+\n+const div = document.createElement('div');\n+const exmapleFunction = () => {};\n+const typedArray = new Uint8Array(3);\n+typedArray[0] = 1;\n+typedArray[1] = 2;\n+typedArray[2] = 3;\n+\n+const arrayOfArrays = [\n+ [['a', 'b', 'c'], ['d', 'e', 'f'], ['h', 'i', 'j']],\n+ [['k', 'l', 'm'], ['n', 'o', 'p'], ['q', 'r', 's']],\n+ [['t', 'u', 'v'], ['w', 'x', 'y'], ['z']],\n+ [],\n+];\n+\n+const objectOfObjects = {\n+ foo: {\n+ a: 1,\n+ b: 2,\n+ c: 3,\n+ },\n+ bar: {\n+ e: 4,\n+ f: 5,\n+ g: 6,\n+ },\n+ baz: {\n+ h: 7,\n+ i: 8,\n+ j: 9,\n+ },\n+ qux: {},\n+};\n+\n+function useOuterFoo() {\n+ useDebugValue({\n+ debugA: {\n+ debugB: {\n+ debugC: 'abc',\n+ },\n+ },\n+ });\n+ useState({\n+ valueA: {\n+ valueB: {\n+ valueC: 'abc',\n+ },\n+ },\n+ });\n+ return useInnerFoo();\n+}\n+\n+function useInnerFoo() {\n+ const [value] = useState([[['a', 'b', 'c']]]);\n+ return value;\n+}\n+\n+function useOuterBar() {\n+ useDebugValue({\n+ debugA: {\n+ debugB: {\n+ debugC: 'abc',\n+ },\n+ },\n+ });\n+ return useInnerBar();\n+}\n+\n+function useInnerBar() {\n+ useDebugValue({\n+ debugA: {\n+ debugB: {\n+ debugC: 'abc',\n+ },\n+ },\n+ });\n+ const [count] = useState(123);\n+ return count;\n+}\n+\n+function useOuterBaz() {\n+ return useInnerBaz();\n+}\n+\n+function useInnerBaz() {\n+ const [count] = useState(123);\n+ return count;\n+}\n+\n+export default function Hydration() {\n+ return (\n+ <Fragment>\n+ <h1>Hydration<\/h1>\n+ <DehydratableProps\n+ html_element={div}\n+ fn={exmapleFunction}\n+ symbol={Symbol('symbol')}\n+ react_element={<span \/>}\n+ array_buffer={typedArray.buffer}\n+ typed_array={typedArray}\n+ date={new Date()}\n+ array={arrayOfArrays}\n+ object={objectOfObjects}\n+ \/>\n+ <DeepHooks \/>\n+ <\/Fragment>\n+ );\n+}\n+\n+function DehydratableProps({ array, object }: any) {\n+ return (\n+ <ul>\n+ <li>array: {JSON.stringify(array, null, 2)}<\/li>\n+ <li>object: {JSON.stringify(object, null, 2)}<\/li>\n+ <\/ul>\n+ );\n+}\n+\n+function DeepHooks(props: any) {\n+ const foo = useOuterFoo();\n+ const bar = useOuterBar();\n+ const baz = useOuterBaz();\n+ return (\n+ <ul>\n+ <li>foo: {foo}<\/li>\n+ <li>bar: {bar}<\/li>\n+ <li>baz: {baz}<\/li>\n+ <\/ul>\n+ );\n+}\ndiff --git a\/shells\/dev\/app\/Iframe\/index.js b\/shells\/dev\/app\/Iframe\/index.js\nnew file mode 100644\nindex 0000000000..8e4967ae5a\n--- \/dev\/null\n+++ b\/shells\/dev\/app\/Iframe\/index.js\n@@ -0,0 +1,69 @@\n+\/** @flow *\/\n+\n+import React, { Fragment } from 'react';\n+import ReactDOM from 'react-dom';\n+\n+export default function Iframe() {\n+ return (\n+ <Fragment>\n+ <h2>Iframe<\/h2>\n+ <div>\n+ <Frame>\n+ <Greeting \/>\n+ <\/Frame>\n+ <\/div>\n+ <\/Fragment>\n+ );\n+}\n+\n+const iframeStyle = { border: '2px solid #eee', height: 80 };\n+\n+function Frame(props) {\n+ const [element, setElement] = React.useState(null);\n+\n+ const ref = React.useRef();\n+\n+ React.useLayoutEffect(function() {\n+ const iframe = ref.current;\n+\n+ if (iframe) {\n+ const html = `\n+ <!DOCTYPE html>\n+ <html>\n+ <body>\n+ <div id=\"root\"><\/div>\n+ <\/body>\n+ <\/html>\n+ `;\n+\n+ const document = iframe.contentDocument;\n+\n+ document.open();\n+ document.write(html);\n+ document.close();\n+\n+ setElement(document.getElementById('root'));\n+ }\n+ }, []);\n+\n+ return (\n+ <Fragment>\n+ <iframe title=\"Test Iframe\" ref={ref} style={iframeStyle} \/>\n+ <iframe\n+ title=\"Secured Iframe\"\n+ src=\"https:\/\/example.com\"\n+ style={iframeStyle}\n+ \/>\n+\n+ {element ? ReactDOM.createPortal(props.children, element) : null}\n+ <\/Fragment>\n+ );\n+}\n+\n+function Greeting() {\n+ return (\n+ <p>\n+ Hello from within an <code><iframe><\/code>!\n+ <\/p>\n+ );\n+}\ndiff --git a\/shells\/dev\/app\/InspectableElements\/Contexts.js b\/shells\/dev\/app\/InspectableElements\/Contexts.js\nnew file mode 100644\nindex 0000000000..65e35d4606\n--- \/dev\/null\n+++ b\/shells\/dev\/app\/InspectableElements\/Contexts.js\n@@ -0,0 +1,113 @@\n+\/\/ @flow\n+\n+import React, { createContext, Component, Fragment, useContext } from 'react';\n+import PropTypes from 'prop-types';\n+\n+function someNamedFunction() {}\n+\n+const contextData = {\n+ array: ['first', 'second', 'third'],\n+ bool: true,\n+ func: someNamedFunction,\n+ number: 123,\n+ object: { outer: { inner: {} } },\n+ string: 'abc',\n+ symbol: Symbol.for('symbol'),\n+ null: null,\n+ undefined: undefined,\n+};\n+\n+class LegacyContextProvider extends Component<any> {\n+ static childContextTypes = {\n+ array: PropTypes.array,\n+ bool: PropTypes.bool,\n+ func: PropTypes.func,\n+ number: PropTypes.number,\n+ object: PropTypes.object,\n+ string: PropTypes.string,\n+ symbol: PropTypes.symbol,\n+ null: PropTypes.any,\n+ undefined: PropTypes.any,\n+ };\n+\n+ getChildContext() {\n+ return contextData;\n+ }\n+\n+ render() {\n+ return this.props.children;\n+ }\n+}\n+\n+class LegacyContextConsumer extends Component<any> {\n+ static contextTypes = {\n+ array: PropTypes.array,\n+ bool: PropTypes.bool,\n+ func: PropTypes.func,\n+ number: PropTypes.number,\n+ object: PropTypes.object,\n+ string: PropTypes.string,\n+ symbol: PropTypes.symbol,\n+ null: PropTypes.any,\n+ undefined: PropTypes.any,\n+ };\n+\n+ render() {\n+ return null;\n+ }\n+}\n+\n+const ModernContext = createContext();\n+ModernContext.displayName = 'ModernContext';\n+const ArrayContext = createContext(contextData.array);\n+ArrayContext.displayName = 'ArrayContext';\n+const BoolContext = createContext(contextData.bool);\n+BoolContext.displayName = 'BoolContext';\n+const FuncContext = createContext(contextData.func);\n+FuncContext.displayName = 'FuncContext';\n+const NumberContext = createContext(contextData.number);\n+NumberContext.displayName = 'NumberContext';\n+const StringContext = createContext(contextData.string);\n+StringContext.displayName = 'StringContext';\n+const SymbolContext = createContext(contextData.symbol);\n+SymbolContext.displayName = 'SymbolContext';\n+const NullContext = createContext(null);\n+NullContext.displayName = 'NullContext';\n+const UndefinedContext = createContext(undefined);\n+UndefinedContext.displayName = 'UndefinedContext';\n+\n+class ModernContextType extends Component<any> {\n+ static contextType = ModernContext;\n+\n+ render() {\n+ return null;\n+ }\n+}\n+\n+function FunctionalContextConsumer() {\n+ useContext(StringContext);\n+ return null;\n+}\n+\n+export default function Contexts() {\n+ return (\n+ <Fragment>\n+ <LegacyContextProvider>\n+ <LegacyContextConsumer \/>\n+ <\/LegacyContextProvider>\n+ <ModernContext.Provider value={contextData}>\n+ <ModernContext.Consumer>{value => null}<\/ModernContext.Consumer>\n+ <ModernContextType \/>\n+ <\/ModernContext.Provider>\n+ <FunctionalContextConsumer \/>\n+ <ArrayContext.Consumer>{value => null}<\/ArrayContext.Consumer>\n+ <BoolContext.Consumer>{value => null}<\/BoolContext.Consumer>\n+ <FuncContext.Consumer>{value => null}<\/FuncContext.Consumer>\n+ <NumberContext.Consumer>{value => null}<\/NumberContext.Consumer>\n+ <StringContext.Consumer>{value => null}<\/StringContext.Consumer>\n+ <SymbolContext.Consumer>{value => null}<\/SymbolContext.Consumer>\n+ <NullContext.Consumer>{value => null}<\/NullContext.Consumer>\n+ <UndefinedContext.Consumer>{value => null}<\/UndefinedContext.Consumer>\n+ <\/Fragment>\n+ );\n+}\ndiff --git a\/shells\/dev\/app\/InspectableElements\/CustomHooks.js b\/shells\/dev\/app\/InspectableElements\/CustomHooks.js\nnew file mode 100644\nindex 0000000000..56eea075d1\n--- \/dev\/null\n+++ b\/shells\/dev\/app\/InspectableElements\/CustomHooks.js\n@@ -0,0 +1,125 @@\n+\/\/ @flow\n+\n+import React, {\n+ forwardRef,\n+ Fragment,\n+ memo,\n+ useCallback,\n+ useDebugValue,\n+ useEffect,\n+ useState,\n+} from 'react';\n+\n+const object = {\n+ string: 'abc',\n+ number: 123,\n+ boolean: true,\n+ null: null,\n+ undefined: undefined,\n+ array: ['a', 'b', 'c'],\n+ object: { foo: 1, bar: 2, baz: 3 },\n+};\n+\n+function useNestedInnerHook() {\n+ return useState(123);\n+}\n+function useNestedOuterHook() {\n+ return useNestedInnerHook();\n+}\n+\n+function useCustomObject() {\n+ useDebugValue(object);\n+ return useState(123);\n+}\n+\n+function useDeepHookA() {\n+ useDebugValue('useDeepHookA');\n+ useDeepHookB();\n+}\n+function useDeepHookB() {\n+ useDebugValue('useDeepHookB');\n+ useDeepHookC();\n+}\n+function useDeepHookC() {\n+ useDebugValue('useDeepHookC');\n+ useDeepHookD();\n+}\n+function useDeepHookD() {\n+ useDebugValue('useDeepHookD');\n+ useDeepHookE();\n+}\n+function useDeepHookE() {\n+ useDebugValue('useDeepHookE');\n+ useDeepHookF();\n+}\n+function useDeepHookF() {\n+ useDebugValue('useDeepHookF');\n+}\n+\n+function FunctionWithHooks(props: any, ref: React$Ref<any>) {\n+ const [count, updateCount] = useState(0);\n+\n+ \/\/ eslint-disable-next-line no-unused-vars\n+ const [_, __] = useState(object);\n+\n+ \/\/ Custom hook with a custom debug label\n+ const debouncedCount = useDebounce(count, 1000);\n+\n+ useCustomObject();\n+\n+ const onClick = useCallback(\n+ function onClick() {\n+ updateCount(count + 1);\n+ },\n+ [count]\n+ );\n+\n+ \/\/ Tests nested custom hooks\n+ useNestedOuterHook();\n+\n+ \/\/ Verify deep nesting doesn't break\n+ useDeepHookA();\n+\n+ return <button onClick={onClick}>Count: {debouncedCount}<\/button>;\n+}\n+const MemoWithHooks = memo(FunctionWithHooks);\n+const ForwardRefWithHooks = forwardRef(FunctionWithHooks);\n+\n+export default function CustomHooks() {\n+ return (\n+ <Fragment>\n+ <FunctionWithHooks \/>\n+ <MemoWithHooks \/>\n+ <ForwardRefWithHooks \/>\n+ <\/Fragment>\n+ );\n+}\n+\n+\/\/ Below copied from https:\/\/usehooks.com\/\n+function useDebounce(value, delay) {\n+ \/\/ State and setters for debounced value\n+ const [debouncedValue, setDebouncedValue] = useState(value);\n+\n+ \/\/ Show the value in DevTools\n+ useDebugValue(debouncedValue);\n+\n+ useEffect(\n+ () => {\n+ \/\/ Update debounced value after delay\n+ const handler = setTimeout(() => {\n+ setDebouncedValue(value);\n+ }, delay);\n+\n+ \/\/ Cancel the timeout if value changes (also on delay change or unmount)\n+ \/\/ This is how we prevent debounced value from updating if value is changed ...\n+ \/\/ .. within the delay period. Timeout gets cleared and restarted.\n+ return () => {\n+ clearTimeout(handler);\n+ };\n+ },\n+ [value, delay] \/\/ Only re-call effect if value or delay changes\n+ );\n+\n+ return debouncedValue;\n+}\n+\/\/ Above copied from https:\/\/usehooks.com\/\ndiff --git a\/shells\/dev\/app\/InspectableElements\/CustomObject.js b\/shells\/dev\/app\/InspectableElements\/CustomObject.js\nnew file mode 100644\nindex 0000000000..f7cb376bf2\n--- \/dev\/null\n+++ b\/shells\/dev\/app\/InspectableElements\/CustomObject.js\n@@ -0,0 +1,18 @@\n+\/\/ @flow\n+\n+import React from 'react';\n+\n+class Custom {\n+ _number = 42;\n+ get number() {\n+ return this._number;\n+ }\n+}\n+\n+export default function CustomObject() {\n+ return <ChildComponent customObject={new Custom()} \/>;\n+}\n+\n+function ChildComponent(props: any) {\n+ return null;\n+}\ndiff --git a\/shells\/dev\/app\/InspectableElements\/InspectableElements.js b\/shells\/dev\/app\/InspectableElements\/InspectableElements.js\nnew file mode 100644\nindex 0000000000..8917b33037\n--- \/dev\/null\n+++ b\/shells\/dev\/app\/InspectableElements\/InspectableElements.js\n@@ -0,0 +1,23 @@\n+\/\/ @flow\n+\n+import React, { Fragment } from 'react';\n+import Contexts from '.\/Contexts';\n+import CustomHooks from '.\/CustomHooks';\n+import CustomObject from '.\/CustomObject';\n+import NestedProps from '.\/NestedProps';\n+import SimpleValues from '.\/SimpleValues';\n+\n+\/\/ TODO Add Immutable JS example\n+\n+export default function InspectableElements() {\n+ return (\n+ <Fragment>\n+ <h1>Inspectable elements<\/h1>\n+ <SimpleValues \/>\n+ <NestedProps \/>\n+ <Contexts \/>\n+ <CustomHooks \/>\n+ <CustomObject \/>\n+ <\/Fragment>\n+ );\n+}\ndiff --git a\/shells\/dev\/app\/InspectableElements\/NestedProps.js b\/shells\/dev\/app\/InspectableElements\/NestedProps.js\nnew file mode 100644\nindex 0000000000..d6f5a804eb\n--- \/dev\/null\n+++ b\/shells\/dev\/app\/InspectableElements\/NestedProps.js\n@@ -0,0 +1,55 @@\n+\/\/ @flow\n+\n+import React from 'react';\n+\n+const object = {\n+ string: 'abc',\n+ longString: 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKJLMNOPQRSTUVWXYZ1234567890',\n+ emptyString: '',\n+ number: 123,\n+ boolean: true,\n+ undefined: undefined,\n+ null: null,\n+};\n+\n+export default function ObjectProps() {\n+ return (\n+ <ChildComponent\n+ object={{\n+ outer: {\n+ inner: object,\n+ },\n+ }}\n+ array={['first', 'second', 'third']}\n+ objectInArray={[object]}\n+ arrayInObject={{ array: ['first', 'second', 'third'] }}\n+ deepObject={{\n+ \/\/ Known limitation: we won't go deeper than several levels.\n+ \/\/ In the future, we might offer a way to request deeper access on demand.\n+ a: {\n+ b: {\n+ c: {\n+ d: {\n+ e: {\n+ f: {\n+ g: {\n+ h: {\n+ i: {\n+ j: 10,\n+ },\n+ },\n+ },\n+ },\n+ },\n+ },\n+ },\n+ },\n+ },\n+ }}\n+ \/>\n+ );\n+}\n+\n+function ChildComponent(props: any) {\n+ return null;\n+}\ndiff --git a\/shells\/dev\/app\/InspectableElements\/SimpleValues.js b\/shells\/dev\/app\/InspectableElements\/SimpleValues.js\nnew file mode 100644\nindex 0000000000..43373d6095\n--- \/dev\/null\n+++ b\/shells\/dev\/app\/InspectableElements\/SimpleValues.js\n@@ -0,0 +1,23 @@\n+\/\/ @flow\n+\n+import React from 'react';\n+\n+export default function SimpleValues() {\n+ return (\n+ <ChildComponent\n+ string=\"abc\"\n+ emptyString=\"\"\n+ number={123}\n+ undefined={undefined}\n+ null={null}\n+ nan={NaN}\n+ infinity={Infinity}\n+ true={true}\n+ false={false}\n+ \/>\n+ );\n+}\n+\n+function ChildComponent(props: any) {\n+ return null;\n+}\ndiff --git a\/shells\/dev\/app\/InspectableElements\/index.js b\/shells\/dev\/app\/InspectableElements\/index.js\nnew file mode 100644\nindex 0000000000..58efb1216e\n--- \/dev\/null\n+++ b\/shells\/dev\/app\/InspectableElements\/index.js\n@@ -0,0 +1,5 @@\n+\/\/ @flow\n+\n+import InspectableElements from '.\/InspectableElements';\n+\n+export default InspectableElements;\ndiff --git a\/shells\/dev\/app\/InteractionTracing\/index.js b\/shells\/dev\/app\/InteractionTracing\/index.js\nnew file mode 100644\nindex 0000000000..d062f976f9\n--- \/dev\/null\n+++ b\/shells\/dev\/app\/InteractionTracing\/index.js\n@@ -0,0 +1,73 @@\n+\/\/ @flow\n+\n+import React, { Fragment, useCallback, useEffect, useState } from 'react';\n+import { unstable_batchedUpdates as batchedUpdates } from 'react-dom';\n+import {\n+ unstable_trace as trace,\n+ unstable_wrap as wrap,\n+} from 'scheduler\/tracing';\n+\n+export default function InteractionTracing() {\n+ const [count, setCount] = useState(0);\n+ const [shouldCascade, setShouldCascade] = useState(false);\n+\n+ const handleUpdate = useCallback(() => {\n+ trace('count', performance.now(), () => {\n+ setTimeout(\n+ wrap(() => {\n+ setCount(count + 1);\n+ }),\n+ count * 100\n+ );\n+ });\n+ }, [count]);\n+\n+ const handleCascadingUpdate = useCallback(() => {\n+ trace('cascade', performance.now(), () => {\n+ setTimeout(\n+ wrap(() => {\n+ batchedUpdates(() => {\n+ setCount(count + 1);\n+ setShouldCascade(true);\n+ });\n+ }),\n+ count * 100\n+ );\n+ });\n+ }, [count]);\n+\n+ const handleMultiple = useCallback(() => {\n+ trace('first', performance.now(), () => {\n+ trace('second', performance.now(), () => {\n+ setTimeout(\n+ wrap(() => {\n+ setCount(count + 1);\n+ }),\n+ count * 100\n+ );\n+ });\n+ });\n+ }, [count]);\n+\n+ useEffect(() => {\n+ if (shouldCascade) {\n+ setTimeout(\n+ wrap(() => {\n+ setShouldCascade(false);\n+ }),\n+ count * 100\n+ );\n+ }\n+ }, [count, shouldCascade]);\n+\n+ return (\n+ <Fragment>\n+ <h1>Interaction Tracing<\/h1>\n+ <button onClick={handleUpdate}>Update ({count})<\/button>\n+ <button onClick={handleCascadingUpdate}>\n+ Cascading Update ({count}, {shouldCascade ? 'true' : 'false'})\n+ <\/button>\n+ <button onClick={handleMultiple}>Multiple<\/button>\n+ <\/Fragment>\n+ );\n+}\ndiff --git a\/shells\/dev\/app\/PriorityLevels\/index.js b\/shells\/dev\/app\/PriorityLevels\/index.js\nnew file mode 100644\nindex 0000000000..2888451980\n--- \/dev\/null\n+++ b\/shells\/dev\/app\/PriorityLevels\/index.js\n@@ -0,0 +1,46 @@\n+\/\/ @flow\n+\n+import React, { Fragment, useCallback, useState } from 'react';\n+import {\n+ unstable_IdlePriority as IdlePriority,\n+ unstable_LowPriority as LowPriority,\n+ unstable_runWithPriority as runWithPriority,\n+} from 'scheduler';\n+\n+export default function PriorityLevels() {\n+ const [defaultPriority, setDefaultPriority] = useState<boolean>(false);\n+ const [idlePriority, setIdlePriority] = useState<boolean>(false);\n+ const [normalPriority, setLowPriority] = useState<boolean>(false);\n+\n+ const resetSequence = useCallback(() => {\n+ setDefaultPriority(false);\n+ setLowPriority(false);\n+ setIdlePriority(false);\n+ }, []);\n+\n+ const startSequence = useCallback(() => {\n+ setDefaultPriority(true);\n+ runWithPriority(LowPriority, () => setLowPriority(true));\n+ runWithPriority(IdlePriority, () => setIdlePriority(true));\n+ }, []);\n+\n+ const labels = [];\n+ if (defaultPriority) {\n+ labels.push('(default priority)');\n+ }\n+ if (normalPriority) {\n+ labels.push('Low Priority');\n+ }\n+ if (idlePriority) {\n+ labels.push('Idle Priority');\n+ }\n+\n+ return (\n+ <Fragment>\n+ <h1>Priority Levels<\/h1>\n+ <button onClick={resetSequence}>Reset<\/button>\n+ <button onClick={startSequence}>Start sequence<\/button>\n+ <span>{labels.join(', ')}<\/span>\n+ <\/Fragment>\n+ );\n+}\ndiff --git a\/shells\/dev\/app\/ReactNativeWeb\/index.js b\/shells\/dev\/app\/ReactNativeWeb\/index.js\nnew file mode 100644\nindex 0000000000..7e2e27ede7\n--- \/dev\/null\n+++ b\/shells\/dev\/app\/ReactNativeWeb\/index.js\n@@ -0,0 +1,34 @@\n+\/\/ @flow\n+\n+import React, { Fragment, useState } from 'react';\n+import { Button, Text, View } from 'react-native-web';\n+\n+export default function ReactNativeWeb() {\n+ const [backgroundColor, setBackgroundColor] = useState('blue');\n+ const toggleColor = () =>\n+ setBackgroundColor(backgroundColor === 'purple' ? 'green' : 'purple');\n+ return (\n+ <Fragment>\n+ <h1>ReactNativeWeb<\/h1>\n+ <View>\n+ <Text>auto (default) - english LTR<\/Text>\n+ <Text>\n+ {\n+ '\\u0623\\u062D\\u0628 \\u0627\\u0644\\u0644\\u063A\\u0629 \\u0627\\u0644\\u0639\\u0631\\u0628\\u064A\\u0629 auto (default) - arabic RTL'\n+ }\n+ <\/Text>\n+ <Text style={{ textAlign: 'left' }}>\n+ left left left left left left left left left left left left left left\n+ left\n+ <\/Text>\n+ <Button\n+ onPress={toggleColor}\n+ style={{ backgroundColor }}\n+ title={`Switch background color to \"${\n+ backgroundColor === 'purple' ? 'green' : 'purple'\n+ }\"`}\n+ \/>\n+ <\/View>\n+ <\/Fragment>\n+ );\n+}\ndiff --git a\/shells\/dev\/app\/SuspenseTree\/index.js b\/shells\/dev\/app\/SuspenseTree\/index.js\nnew file mode 100644\nindex 0000000000..873f210e16\n--- \/dev\/null\n+++ b\/shells\/dev\/app\/SuspenseTree\/index.js\n@@ -0,0 +1,137 @@\n+\/\/ @flow\n+\n+import React, { Fragment, Suspense, useState } from 'react';\n+\n+function SuspenseTree() {\n+ return (\n+ <Fragment>\n+ <h1>Suspense<\/h1>\n+ <h4>Primary to Fallback Cycle<\/h4>\n+ <PrimaryFallbackTest initialSuspend={false} \/>\n+ <h4>Fallback to Primary Cycle<\/h4>\n+ <PrimaryFallbackTest initialSuspend={true} \/>\n+ <NestedSuspenseTest \/>\n+ <\/Fragment>\n+ );\n+}\n+\n+function PrimaryFallbackTest({ initialSuspend }) {\n+ const [suspend, setSuspend] = useState(initialSuspend);\n+ const fallbackStep = useTestSequence('fallback', Fallback1, Fallback2);\n+ const primaryStep = useTestSequence('primary', Primary1, Primary2);\n+ return (\n+ <Fragment>\n+ <label>\n+ <input\n+ checked={suspend}\n+ onChange={e => setSuspend(e.target.checked)}\n+ type=\"checkbox\"\n+ \/>\n+ Suspend\n+ <\/label>\n+ <br \/>\n+ <Suspense fallback={fallbackStep}>\n+ {suspend ? <Never \/> : primaryStep}\n+ <\/Suspense>\n+ <\/Fragment>\n+ );\n+}\n+\n+function useTestSequence(label, T1, T2) {\n+ let [step, setStep] = useState(0);\n+ let next = (\n+ <button onClick={() => setStep(s => (s + 1) % allSteps.length)}>\n+ next {label} content\n+ <\/button>\n+ );\n+ let allSteps = [\n+ <Fragment>{next}<\/Fragment>,\n+ <Fragment>\n+ {next} <T1 prop={step}>mount<\/T1>\n+ <\/Fragment>,\n+ <Fragment>\n+ {next} <T1 prop={step}>update<\/T1>\n+ <\/Fragment>,\n+ <Fragment>\n+ {next} <T2 prop={step}>several<\/T2> <T1 prop={step}>different<\/T1>{' '}\n+ <T2 prop={step}>children<\/T2>\n+ <\/Fragment>,\n+ <Fragment>\n+ {next} <T2 prop={step}>goodbye<\/T2>\n+ <\/Fragment>,\n+ ];\n+ return allSteps[step];\n+}\n+\n+function NestedSuspenseTest() {\n+ return (\n+ <Fragment>\n+ <h3>Nested Suspense<\/h3>\n+ <Suspense fallback={<Fallback1>Loading outer<\/Fallback1>}>\n+ <Parent \/>\n+ <\/Suspense>\n+ <\/Fragment>\n+ );\n+}\n+\n+function Parent() {\n+ return (\n+ <div>\n+ <Suspense fallback={<Fallback1>Loading inner 1<\/Fallback1>}>\n+ <Primary1>Hello<\/Primary1>\n+ <\/Suspense>{' '}\n+ <Suspense fallback={<Fallback2>Loading inner 2<\/Fallback2>}>\n+ <Primary2>World<\/Primary2>\n+ <\/Suspense>\n+ <br \/>\n+ <Suspense fallback={<Fallback1>This will never load<\/Fallback1>}>\n+ <Never \/>\n+ <\/Suspense>\n+ <br \/>\n+ <b>\n+ <LoadLater \/>\n+ <\/b>\n+ <\/div>\n+ );\n+}\n+\n+function LoadLater() {\n+ const [loadChild, setLoadChild] = useState(0);\n+ return (\n+ <Suspense\n+ fallback={\n+ <Fallback1 onClick={() => setLoadChild(true)}>Click to load<\/Fallback1>\n+ }\n+ >\n+ {loadChild ? (\n+ <Primary1 onClick={() => setLoadChild(false)}>\n+ Loaded! Click to suspend again.\n+ <\/Primary1>\n+ ) : (\n+ <Never \/>\n+ )}\n+ <\/Suspense>\n+ );\n+}\n+\n+function Never() {\n+ throw new Promise(resolve => {});\n+}\n+\n+function Fallback1({ prop, ...rest }: any) {\n+ return <span {...rest} \/>;\n+}\n+\n+function Fallback2({ prop, ...rest }: any) {\n+ return <span {...rest} \/>;\n+}\n+\n+function Primary1({ prop, ...rest }: any) {\n+ return <span {...rest} \/>;\n+}\n+\n+function Primary2({ prop, ...rest }: any) {\n+ return <span {...rest} \/>;\n+}\n+\n+export default SuspenseTree;\ndiff --git a\/shells\/dev\/app\/ToDoList\/List.css b\/shells\/dev\/app\/ToDoList\/List.css\nnew file mode 100644\nindex 0000000000..0583402840\n--- \/dev\/null\n+++ b\/shells\/dev\/app\/ToDoList\/List.css\n@@ -0,0 +1,16 @@\n+.Input {\n+ font-size: 1rem;\n+ padding: 0.25rem;\n+}\n+\n+.IconButton {\n+ padding: 0.25rem;\n+ border: none;\n+ background: none;\n+ cursor: pointer;\n+}\n+\n+.List {\n+ margin: 0.5rem 0 0;\n+ padding: 0;\n+}\ndiff --git a\/shells\/dev\/app\/ToDoList\/List.js b\/shells\/dev\/app\/ToDoList\/List.js\nnew file mode 100644\nindex 0000000000..f96df7748a\n--- \/dev\/null\n+++ b\/shells\/dev\/app\/ToDoList\/List.js\n@@ -0,0 +1,109 @@\n+\/\/ @flow\n+\n+import React, { Fragment, useCallback, useState } from 'react';\n+import ListItem from '.\/ListItem';\n+import styles from '.\/List.css';\n+\n+export type Item = {|\n+ id: number,\n+ isComplete: boolean,\n+ text: string,\n+|};\n+\n+type Props = {||};\n+\n+export default function List(props: Props) {\n+ const [newItemText, setNewItemText] = useState<string>('');\n+ const [items, setItems] = useState<Array<Item>>([\n+ { id: 1, isComplete: true, text: 'First' },\n+ { id: 2, isComplete: true, text: 'Second' },\n+ { id: 3, isComplete: false, text: 'Third' },\n+ ]);\n+ const [uid, setUID] = useState<number>(4);\n+\n+ const handleClick = useCallback(() => {\n+ if (newItemText !== '') {\n+ setItems([\n+ ...items,\n+ {\n+ id: uid,\n+ isComplete: false,\n+ text: newItemText,\n+ },\n+ ]);\n+ setUID(uid + 1);\n+ setNewItemText('');\n+ }\n+ }, [newItemText, items, uid]);\n+\n+ const handleKeyPress = useCallback(\n+ event => {\n+ if (event.key === 'Enter') {\n+ handleClick();\n+ }\n+ },\n+ [handleClick]\n+ );\n+\n+ const handleChange = useCallback(\n+ event => {\n+ setNewItemText(event.currentTarget.value);\n+ },\n+ [setNewItemText]\n+ );\n+\n+ const removeItem = useCallback(\n+ itemToRemove => setItems(items.filter(item => item !== itemToRemove)),\n+ [items]\n+ );\n+\n+ const toggleItem = useCallback(\n+ itemToToggle => {\n+ const index = items.indexOf(itemToToggle);\n+\n+ setItems(\n+ items\n+ .slice(0, index)\n+ .concat({\n+ ...itemToToggle,\n+ isComplete: !itemToToggle.isComplete,\n+ })\n+ .concat(items.slice(index + 1))\n+ );\n+ },\n+ [items]\n+ );\n+\n+ return (\n+ <Fragment>\n+ <h1>List<\/h1>\n+ <input\n+ type=\"text\"\n+ placeholder=\"New list item...\"\n+ className={styles.Input}\n+ value={newItemText}\n+ onChange={handleChange}\n+ onKeyPress={handleKeyPress}\n+ \/>\n+ <button\n+ className={styles.IconButton}\n+ disabled={newItemText === ''}\n+ onClick={handleClick}\n+ >\n+ <span role=\"img\" aria-label=\"Add item\">\n+ ➕\n+ <\/span>\n+ <\/button>\n+ <ul className={styles.List}>\n+ {items.map(item => (\n+ <ListItem\n+ key={item.id}\n+ item={item}\n+ removeItem={removeItem}\n+ toggleItem={toggleItem}\n+ \/>\n+ ))}\n+ <\/ul>\n+ <\/Fragment>\n+ );\n+}\ndiff --git a\/shells\/dev\/app\/ToDoList\/ListItem.css b\/shells\/dev\/app\/ToDoList\/ListItem.css\nnew file mode 100644\nindex 0000000000..77c666251c\n--- \/dev\/null\n+++ b\/shells\/dev\/app\/ToDoList\/ListItem.css\n@@ -0,0 +1,23 @@\n+.ListItem {\n+ list-style-type: none;\n+}\n+\n+.Input {\n+ cursor: pointer;\n+}\n+\n+.Label {\n+ cursor: pointer;\n+ padding: 0.25rem;\n+ color: #555;\n+}\n+.Label:hover {\n+ color: #000;\n+}\n+\n+.IconButton {\n+ padding: 0.25rem;\n+ border: none;\n+ background: none;\n+ cursor: pointer;\n+}\ndiff --git a\/shells\/dev\/app\/ToDoList\/ListItem.js b\/shells\/dev\/app\/ToDoList\/ListItem.js\nnew file mode 100644\nindex 0000000000..2305e28ce6\n--- \/dev\/null\n+++ b\/shells\/dev\/app\/ToDoList\/ListItem.js\n@@ -0,0 +1,41 @@\n+\/\/ @flow\n+\n+import React, { memo, useCallback } from 'react';\n+import styles from '.\/ListItem.css';\n+\n+import type { Item } from '.\/List';\n+\n+type Props = {|\n+ item: Item,\n+ removeItem: (item: Item) => void,\n+ toggleItem: (item: Item) => void,\n+|};\n+\n+function ListItem({ item, removeItem, toggleItem }: Props) {\n+ const handleDelete = useCallback(() => {\n+ removeItem(item);\n+ }, [item, removeItem]);\n+\n+ const handleToggle = useCallback(() => {\n+ toggleItem(item);\n+ }, [item, toggleItem]);\n+\n+ return (\n+ <li className={styles.ListItem}>\n+ <button className={styles.IconButton} onClick={handleDelete}>\n+ 🗑\n+ <\/button>\n+ <label className={styles.Label}>\n+ <input\n+ className={styles.Input}\n+ checked={item.isComplete}\n+ onChange={handleToggle}\n+ type=\"checkbox\"\n+ \/>{' '}\n+ {item.text}\n+ <\/label>\n+ <\/li>\n+ );\n+}\n+\n+export default memo<Props>(ListItem);\ndiff --git a\/shells\/dev\/app\/ToDoList\/index.js b\/shells\/dev\/app\/ToDoList\/index.js\nnew file mode 100644\nindex 0000000000..0a86ff185c\n--- \/dev\/null\n+++ b\/shells\/dev\/app\/ToDoList\/index.js\n@@ -0,0 +1,5 @@\n+\/\/ @flow\n+\n+import List from '.\/List';\n+\n+export default List;\ndiff --git a\/shells\/dev\/app\/Toggle\/index.js b\/shells\/dev\/app\/Toggle\/index.js\nnew file mode 100644\nindex 0000000000..5e96cd447b\n--- \/dev\/null\n+++ b\/shells\/dev\/app\/Toggle\/index.js\n@@ -0,0 +1,21 @@\n+import React, { useState } from 'react';\n+\n+export default function Toggle() {\n+ const [show, setShow] = useState(false);\n+ return (\n+ <>\n+ <h2>Toggle<\/h2>\n+ <div>\n+ <>\n+ <button onClick={() => setShow(s => !s)}>Show child<\/button>\n+ {show && ' '}\n+ {show && <Greeting>Hello<\/Greeting>}\n+ <\/>\n+ <\/div>\n+ <\/>\n+ );\n+}\n+\n+function Greeting({ children }) {\n+ return <p>{children}<\/p>;\n+}\ndiff --git a\/shells\/dev\/app\/console.js b\/shells\/dev\/app\/console.js\nnew file mode 100644\nindex 0000000000..9e5f01401a\n--- \/dev\/null\n+++ b\/shells\/dev\/app\/console.js\n@@ -0,0 +1,27 @@\n+\/\/ @flow\n+\n+function ignoreStrings(\n+ methodName: string,\n+ stringsToIgnore: Array<string>\n+): void {\n+ const originalMethod = console[methodName];\n+ console[methodName] = (...args) => {\n+ const maybeString = args[0];\n+ if (typeof maybeString === 'string') {\n+ for (let i = 0; i < stringsToIgnore.length; i++) {\n+ if (maybeString.startsWith(stringsToIgnore[i])) {\n+ return;\n+ }\n+ }\n+ }\n+ originalMethod(...args);\n+ };\n+}\n+\n+export function ignoreErrors(errorsToIgnore: Array<string>): void {\n+ ignoreStrings('error', errorsToIgnore);\n+}\n+\n+export function ignoreWarnings(warningsToIgnore: Array<string>): void {\n+ ignoreStrings('warn', warningsToIgnore);\n+}\ndiff --git a\/shells\/dev\/app\/index.js b\/shells\/dev\/app\/index.js\nnew file mode 100644\nindex 0000000000..4115c1c480\n--- \/dev\/null\n+++ b\/shells\/dev\/app\/index.js\n@@ -0,0 +1,71 @@\n+\/** @flow *\/\n+\n+\/\/ This test harness mounts each test app as a separate root to test multi-root applications.\n+\n+import { createElement } from 'react';\n+import {\n+ \/\/ $FlowFixMe Flow does not yet know about createRoot()\n+ unstable_createRoot as createRoot,\n+} from 'react-dom';\n+import DeeplyNestedComponents from '.\/DeeplyNestedComponents';\n+import Iframe from '.\/Iframe';\n+import EditableProps from '.\/EditableProps';\n+import ElementTypes from '.\/ElementTypes';\n+import Hydration from '.\/Hydration';\n+import InspectableElements from '.\/InspectableElements';\n+import InteractionTracing from '.\/InteractionTracing';\n+import PriorityLevels from '.\/PriorityLevels';\n+import ReactNativeWeb from '.\/ReactNativeWeb';\n+import ToDoList from '.\/ToDoList';\n+import Toggle from '.\/Toggle';\n+import SuspenseTree from '.\/SuspenseTree';\n+import { ignoreErrors, ignoreWarnings } from '.\/console';\n+\n+import '.\/styles.css';\n+\n+\/\/ DevTools intentionally tests compatibility with certain legacy APIs.\n+\/\/ Suppress their error messages in the local dev shell,\n+\/\/ because they might mask other more serious error messages.\n+ignoreErrors([\n+ 'Warning: Legacy context API',\n+ 'Warning: Unsafe lifecycle methods',\n+ 'Warning: %s is deprecated in StrictMode.', \/\/ findDOMNode\n+]);\n+ignoreWarnings(['Warning: componentWillReceiveProps is deprecated']);\n+\n+const roots = [];\n+\n+function mountHelper(App) {\n+ const container = document.createElement('div');\n+\n+ ((document.body: any): HTMLBodyElement).appendChild(container);\n+\n+ const root = createRoot(container);\n+ root.render(createElement(App));\n+\n+ roots.push(root);\n+}\n+\n+function mountTestApp() {\n+ mountHelper(ToDoList);\n+ mountHelper(InteractionTracing);\n+ mountHelper(InspectableElements);\n+ mountHelper(Hydration);\n+ mountHelper(ElementTypes);\n+ mountHelper(EditableProps);\n+ mountHelper(PriorityLevels);\n+ mountHelper(ReactNativeWeb);\n+ mountHelper(Toggle);\n+ mountHelper(SuspenseTree);\n+ mountHelper(DeeplyNestedComponents);\n+ mountHelper(Iframe);\n+}\n+\n+function unmountTestApp() {\n+ roots.forEach(root => root.unmount());\n+}\n+\n+mountTestApp();\n+\n+window.parent.mountTestApp = mountTestApp;\n+window.parent.unmountTestApp = unmountTestApp;\ndiff --git a\/shells\/dev\/app\/styles.css b\/shells\/dev\/app\/styles.css\nnew file mode 100644\nindex 0000000000..2a995314c1\n--- \/dev\/null\n+++ b\/shells\/dev\/app\/styles.css\n@@ -0,0 +1,13 @@\n+body {\n+ \/* GitHub.com frontend fonts *\/\n+ font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,\n+ sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;\n+ font-size: 14px;\n+ line-height: 1.5;\n+}\n+\n+h1 {\n+ font-size: 1.5rem;\n+ font-weight: bold;\n+ margin-bottom: 0.5rem;\n+}\ndiff --git a\/shells\/dev\/index.html b\/shells\/dev\/index.html\nnew file mode 100644\nindex 0000000000..f0252eee4d\n--- \/dev\/null\n+++ b\/shells\/dev\/index.html\n@@ -0,0 +1,68 @@\n+<!doctype html>\n+<html>\n+ <head>\n+ <meta charset=\"utf8\">\n+ <title>React DevTools<\/title>\n+ <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n+ <style>\n+ #target {\n+ flex: 1;\n+ border: none;\n+ }\n+ #devtools {\n+ height: 400px;\n+ max-height: 50%;\n+ overflow: hidden;\n+ z-index: 10000001;\n+ }\n+ body {\n+ display: flex;\n+ flex-direction: column;\n+ position: absolute;\n+ top: 0;\n+ left: 0;\n+ right: 0;\n+ bottom: 0;\n+ margin: 0;\n+ padding: 0;\n+ font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,\n+ sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;\n+ font-size: 12px;\n+ line-height: 1.5;\n+ }\n+ .optionsRow {\n+ width: 100%;\n+ display: flex;\n+ padding: 0.25rem;\n+ background: aliceblue;\n+ border-bottom: 1px solid lightblue;\n+ }\n+ .optionsRowSpacer {\n+ flex: 1;\n+ }\n+ <\/style>\n+ <\/head>\n+ <body>\n+ <div class=\"optionsRow\">\n+ <button id=\"mountButton\">Unmount test app<\/button>\n+ <div class=\"optionsRowSpacer\"> <\/div>\n+ <span>\n+ <a href=\"https:\/\/react-devtools-experimental-chrome.now.sh\/\">Chrome extension<\/a>\n+ <a href=\"https:\/\/react-devtools-experimental-firefox.now.sh\/\">Firefox extension<\/a>\n+ <\/span>\n+ <\/div>\n+\n+ \n+ \n+ \n+ <iframe id=\"target\"><\/iframe>\n+\n+ \n+ <div id=\"devtools\"><\/div>\n+\n+ \n+ \n+ \n+ <script src=\"dist\/devtools.js\"><\/script>\n+ <\/body>\n+<\/html>\n\\ No newline at end of file\ndiff --git a\/shells\/dev\/now.json b\/shells\/dev\/now.json\nnew file mode 100644\nindex 0000000000..7c0805c3b1\n--- \/dev\/null\n+++ b\/shells\/dev\/now.json\n@@ -0,0 +1,5 @@\n+{\n+ \"name\": \"react-devtools-experimental\",\n+ \"alias\": [\"react-devtools-experimental\"],\n+ \"files\": [\"index.html\", \"dist\"]\n+}\ndiff --git a\/shells\/dev\/src\/devtools.js b\/shells\/dev\/src\/devtools.js\nnew file mode 100644\nindex 0000000000..230ddc94d2\n--- \/dev\/null\n+++ b\/shells\/dev\/src\/devtools.js\n@@ -0,0 +1,77 @@\n+\/** @flow *\/\n+\n+import { createElement } from 'react';\n+\/\/ $FlowFixMe Flow does not yet know about createRoot()\n+import { unstable_createRoot as createRoot } from 'react-dom';\n+import {\n+ activate as activateBackend,\n+ initialize as initializeBackend,\n+} from 'react-devtools-inline\/backend';\n+import { initialize as initializeFrontend } from 'react-devtools-inline\/frontend';\n+import { initDevTools } from 'src\/devtools';\n+\n+const iframe = ((document.getElementById('target'): any): HTMLIFrameElement);\n+\n+const { contentDocument, contentWindow } = iframe;\n+\n+\/\/ Helps with positioning Overlay UI.\n+contentWindow.__REACT_DEVTOOLS_TARGET_WINDOW__ = window;\n+\n+initializeBackend(contentWindow);\n+\n+const container = ((document.getElementById('devtools'): any): HTMLElement);\n+\n+let isTestAppMounted = true;\n+\n+const mountButton = ((document.getElementById(\n+ 'mountButton'\n+): any): HTMLButtonElement);\n+mountButton.addEventListener('click', function() {\n+ if (isTestAppMounted) {\n+ if (typeof window.unmountTestApp === 'function') {\n+ window.unmountTestApp();\n+ mountButton.innerText = 'Mount test app';\n+ isTestAppMounted = false;\n+ }\n+ } else {\n+ if (typeof window.mountTestApp === 'function') {\n+ window.mountTestApp();\n+ mountButton.innerText = 'Unmount test app';\n+ isTestAppMounted = true;\n+ }\n+ }\n+});\n+\n+inject('dist\/app.js', () => {\n+ initDevTools({\n+ connect(cb) {\n+ const DevTools = initializeFrontend(contentWindow);\n+\n+ \/\/ Activate the backend only once the DevTools frontend Store has been initialized.\n+ \/\/ Otherwise the Store may miss important initial tree op codes.\n+ activateBackend(contentWindow);\n+\n+ const root = createRoot(container);\n+ root.render(\n+ createElement(DevTools, {\n+ browserTheme: 'light',\n+ showTabBar: true,\n+ showWelcomeToTheNewDevToolsDialog: true,\n+ warnIfLegacyBackendDetected: true,\n+ })\n+ );\n+ },\n+\n+ onReload(reloadFn) {\n+ iframe.onload = reloadFn;\n+ },\n+ });\n+});\n+\n+function inject(sourcePath, callback) {\n+ const script = contentDocument.createElement('script');\n+ script.onload = callback;\n+ script.src = sourcePath;\n+\n+ ((contentDocument.body: any): HTMLBodyElement).appendChild(script);\n+}\ndiff --git a\/shells\/dev\/webpack.config.js b\/shells\/dev\/webpack.config.js\nnew file mode 100644\nindex 0000000000..ce58e6418a\n--- \/dev\/null\n+++ b\/shells\/dev\/webpack.config.js\n@@ -0,0 +1,92 @@\n+const { resolve } = require('path');\n+const { DefinePlugin } = require('webpack');\n+const { getGitHubURL, getVersionString } = require('..\/utils');\n+\n+const NODE_ENV = process.env.NODE_ENV;\n+if (!NODE_ENV) {\n+ console.error('NODE_ENV not set');\n+ process.exit(1);\n+}\n+\n+const TARGET = process.env.TARGET;\n+if (!TARGET) {\n+ console.error('TARGET not set');\n+ process.exit(1);\n+}\n+\n+const __DEV__ = NODE_ENV === 'development';\n+\n+const root = resolve(__dirname, '..\/..');\n+\n+const GITHUB_URL = getGitHubURL();\n+const DEVTOOLS_VERSION = getVersionString();\n+\n+const config = {\n+ mode: __DEV__ ? 'development' : 'production',\n+ devtool: false,\n+ entry: {\n+ app: '.\/app\/index.js',\n+ devtools: '.\/src\/devtools.js',\n+ },\n+ resolve: {\n+ alias: {\n+ 'react-devtools-inline': resolve(\n+ root,\n+ 'packages\/react-devtools-inline\/src\/'\n+ ),\n+ src: resolve(root, 'src'),\n+ },\n+ },\n+ plugins: [\n+ new DefinePlugin({\n+ __DEV__,\n+ __TEST__: false,\n+ 'process.env.GITHUB_URL': `\"${GITHUB_URL}\"`,\n+ 'process.env.DEVTOOLS_VERSION': `\"${DEVTOOLS_VERSION}\"`,\n+ }),\n+ ],\n+ module: {\n+ rules: [\n+ {\n+ test: \/\\.js$\/,\n+ loader: 'babel-loader',\n+ options: {\n+ configFile: resolve(root, 'babel.config.js'),\n+ },\n+ },\n+ {\n+ test: \/\\.css$\/,\n+ use: [\n+ {\n+ loader: 'style-loader',\n+ },\n+ {\n+ loader: 'css-loader',\n+ options: {\n+ sourceMap: true,\n+ modules: true,\n+ localIdentName: '[local]___[hash:base64:5]',\n+ },\n+ },\n+ ],\n+ },\n+ ],\n+ },\n+};\n+\n+if (TARGET === 'local') {\n+ config.devServer = {\n+ hot: true,\n+ port: 8080,\n+ clientLogLevel: 'warning',\n+ publicPath: '\/dist\/',\n+ stats: 'errors-only',\n+ };\n+} else {\n+ config.output = {\n+ path: resolve(__dirname, 'dist'),\n+ filename: '[name].js',\n+ };\n+}\n+\n+module.exports = config;\ndiff --git a\/shells\/utils.js b\/shells\/utils.js\nnew file mode 100644\nindex 0000000000..515f5c242b\n--- \/dev\/null\n+++ b\/shells\/utils.js\n@@ -0,0 +1,37 @@\n+const { execSync } = require('child_process');\n+const { readFileSync } = require('fs');\n+const { resolve } = require('path');\n+\n+function getGitCommit() {\n+ return execSync('git show -s --format=%h')\n+ .toString()\n+ .trim();\n+}\n+\n+function getGitHubURL() {\n+ \/\/ TODO potentially replace this with an fb.me URL (assuming it can forward the query params)\n+ const url = execSync('git remote get-url origin')\n+ .toString()\n+ .trim();\n+\n+ if (url.startsWith('https:\/\/')) {\n+ return url.replace('.git', '');\n+ } else {\n+ return url\n+ .replace(':', '\/')\n+ .replace('git@', 'https:\/\/')\n+ .replace('.git', '');\n+ }\n+}\n+\n+function getVersionString() {\n+ const packageVersion = JSON.parse(\n+ readFileSync(resolve(__dirname, '..\/package.json'))\n+ ).version;\n+\n+ const commit = getGitCommit();\n+\n+ return `${packageVersion}-${commit}`;\n+}\n+\n+module.exports = { getGitCommit, getGitHubURL, getVersionString };\ndiff --git a\/src\/__tests__\/__mocks__\/cssMock.js b\/src\/__tests__\/__mocks__\/cssMock.js\nnew file mode 100644\nindex 0000000000..f053ebf797\n--- \/dev\/null\n+++ b\/src\/__tests__\/__mocks__\/cssMock.js\n@@ -0,0 +1 @@\n+module.exports = {};\ndiff --git a\/src\/__tests__\/__snapshots__\/inspectedElementContext-test.js.snap b\/src\/__tests__\/__snapshots__\/inspectedElementContext-test.js.snap\nnew file mode 100644\nindex 0000000000..a27a73527c\n--- \/dev\/null\n+++ b\/src\/__tests__\/__snapshots__\/inspectedElementContext-test.js.snap\n@@ -0,0 +1,478 @@\n+\/\/ Jest Snapshot v1, https:\/\/goo.gl\/fbAQLP\n+\n+exports[`InspectedElementContext should include updates for nested values that were previously hydrated: 1: Initially inspect element 1`] = `\n+{\n+ \"id\": 2,\n+ \"owners\": null,\n+ \"context\": null,\n+ \"hooks\": null,\n+ \"props\": {\n+ \"nestedObject\": {\n+ \"a\": {},\n+ \"c\": {}\n+ }\n+ },\n+ \"state\": null\n+}\n+`;\n+\n+exports[`InspectedElementContext should include updates for nested values that were previously hydrated: 2: Inspect props.nestedObject.a 1`] = `\n+{\n+ \"id\": 2,\n+ \"owners\": null,\n+ \"context\": null,\n+ \"hooks\": null,\n+ \"props\": {\n+ \"nestedObject\": {\n+ \"a\": {\n+ \"value\": 1,\n+ \"b\": {\n+ \"value\": 1\n+ }\n+ },\n+ \"c\": {}\n+ }\n+ },\n+ \"state\": null\n+}\n+`;\n+\n+exports[`InspectedElementContext should include updates for nested values that were previously hydrated: 3: Inspect props.nestedObject.c 1`] = `\n+{\n+ \"id\": 2,\n+ \"owners\": null,\n+ \"context\": null,\n+ \"hooks\": null,\n+ \"props\": {\n+ \"nestedObject\": {\n+ \"a\": {\n+ \"value\": 1,\n+ \"b\": {\n+ \"value\": 1\n+ }\n+ },\n+ \"c\": {\n+ \"value\": 1,\n+ \"d\": {\n+ \"value\": 1,\n+ \"e\": {}\n+ }\n+ }\n+ }\n+ },\n+ \"state\": null\n+}\n+`;\n+\n+exports[`InspectedElementContext should include updates for nested values that were previously hydrated: 4: update inspected element 1`] = `\n+{\n+ \"id\": 2,\n+ \"owners\": null,\n+ \"context\": null,\n+ \"hooks\": null,\n+ \"props\": {\n+ \"nestedObject\": {\n+ \"a\": {\n+ \"value\": 2,\n+ \"b\": {\n+ \"value\": 2\n+ }\n+ },\n+ \"c\": {\n+ \"value\": 2,\n+ \"d\": {\n+ \"value\": 2,\n+ \"e\": {}\n+ }\n+ }\n+ }\n+ },\n+ \"state\": null\n+}\n+`;\n+\n+exports[`InspectedElementContext should inspect the currently selected element: 1: Inspected element 2 1`] = `\n+{\n+ \"id\": 2,\n+ \"owners\": null,\n+ \"context\": null,\n+ \"hooks\": [\n+ {\n+ \"id\": 0,\n+ \"isStateEditable\": true,\n+ \"name\": \"State\",\n+ \"value\": 1,\n+ \"subHooks\": []\n+ }\n+ ],\n+ \"props\": {\n+ \"a\": 1,\n+ \"b\": \"abc\"\n+ },\n+ \"state\": null\n+}\n+`;\n+\n+exports[`InspectedElementContext should not dehydrate nested values until explicitly requested: 1: Initially inspect element 1`] = `\n+{\n+ \"id\": 2,\n+ \"owners\": null,\n+ \"context\": null,\n+ \"hooks\": [\n+ {\n+ \"id\": 0,\n+ \"isStateEditable\": true,\n+ \"name\": \"State\",\n+ \"value\": {\n+ \"foo\": {}\n+ },\n+ \"subHooks\": []\n+ }\n+ ],\n+ \"props\": {\n+ \"nestedObject\": {\n+ \"a\": {}\n+ }\n+ },\n+ \"state\": null\n+}\n+`;\n+\n+exports[`InspectedElementContext should not dehydrate nested values until explicitly requested: 2: Inspect props.nestedObject.a 1`] = `\n+{\n+ \"id\": 2,\n+ \"owners\": null,\n+ \"context\": null,\n+ \"hooks\": [\n+ {\n+ \"id\": 0,\n+ \"isStateEditable\": true,\n+ \"name\": \"State\",\n+ \"value\": {\n+ \"foo\": {}\n+ },\n+ \"subHooks\": []\n+ }\n+ ],\n+ \"props\": {\n+ \"nestedObject\": {\n+ \"a\": {\n+ \"b\": {\n+ \"c\": {}\n+ }\n+ }\n+ }\n+ },\n+ \"state\": null\n+}\n+`;\n+\n+exports[`InspectedElementContext should not dehydrate nested values until explicitly requested: 3: Inspect props.nestedObject.a.b.c 1`] = `\n+{\n+ \"id\": 2,\n+ \"owners\": null,\n+ \"context\": null,\n+ \"hooks\": [\n+ {\n+ \"id\": 0,\n+ \"isStateEditable\": true,\n+ \"name\": \"State\",\n+ \"value\": {\n+ \"foo\": {}\n+ },\n+ \"subHooks\": []\n+ }\n+ ],\n+ \"props\": {\n+ \"nestedObject\": {\n+ \"a\": {\n+ \"b\": {\n+ \"c\": [\n+ {\n+ \"d\": {}\n+ }\n+ ]\n+ }\n+ }\n+ }\n+ },\n+ \"state\": null\n+}\n+`;\n+\n+exports[`InspectedElementContext should not dehydrate nested values until explicitly requested: 4: Inspect props.nestedObject.a.b.c.0.d 1`] = `\n+{\n+ \"id\": 2,\n+ \"owners\": null,\n+ \"context\": null,\n+ \"hooks\": [\n+ {\n+ \"id\": 0,\n+ \"isStateEditable\": true,\n+ \"name\": \"State\",\n+ \"value\": {\n+ \"foo\": {}\n+ },\n+ \"subHooks\": []\n+ }\n+ ],\n+ \"props\": {\n+ \"nestedObject\": {\n+ \"a\": {\n+ \"b\": {\n+ \"c\": [\n+ {\n+ \"d\": {\n+ \"e\": {}\n+ }\n+ }\n+ ]\n+ }\n+ }\n+ }\n+ },\n+ \"state\": null\n+}\n+`;\n+\n+exports[`InspectedElementContext should not dehydrate nested values until explicitly requested: 5: Inspect hooks.0.value 1`] = `\n+{\n+ \"id\": 2,\n+ \"owners\": null,\n+ \"context\": null,\n+ \"hooks\": [\n+ {\n+ \"id\": 0,\n+ \"isStateEditable\": true,\n+ \"name\": \"State\",\n+ \"value\": {\n+ \"foo\": {\n+ \"bar\": {}\n+ }\n+ },\n+ \"subHooks\": []\n+ }\n+ ],\n+ \"props\": {\n+ \"nestedObject\": {\n+ \"a\": {\n+ \"b\": {\n+ \"c\": [\n+ {\n+ \"d\": {\n+ \"e\": {}\n+ }\n+ }\n+ ]\n+ }\n+ }\n+ }\n+ },\n+ \"state\": null\n+}\n+`;\n+\n+exports[`InspectedElementContext should not dehydrate nested values until explicitly requested: 6: Inspect hooks.0.value.foo.bar 1`] = `\n+{\n+ \"id\": 2,\n+ \"owners\": null,\n+ \"context\": null,\n+ \"hooks\": [\n+ {\n+ \"id\": 0,\n+ \"isStateEditable\": true,\n+ \"name\": \"State\",\n+ \"value\": {\n+ \"foo\": {\n+ \"bar\": {\n+ \"baz\": \"hi\"\n+ }\n+ }\n+ },\n+ \"subHooks\": []\n+ }\n+ ],\n+ \"props\": {\n+ \"nestedObject\": {\n+ \"a\": {\n+ \"b\": {\n+ \"c\": [\n+ {\n+ \"d\": {\n+ \"e\": {}\n+ }\n+ }\n+ ]\n+ }\n+ }\n+ }\n+ },\n+ \"state\": null\n+}\n+`;\n+\n+exports[`InspectedElementContext should not re-render a function with hooks if it did not update since it was last inspected: 1: initial render 1`] = `\n+{\n+ \"id\": 3,\n+ \"owners\": null,\n+ \"context\": null,\n+ \"hooks\": [\n+ {\n+ \"id\": 0,\n+ \"isStateEditable\": true,\n+ \"name\": \"State\",\n+ \"value\": 0,\n+ \"subHooks\": []\n+ }\n+ ],\n+ \"props\": {\n+ \"a\": 1,\n+ \"b\": \"abc\"\n+ },\n+ \"state\": null\n+}\n+`;\n+\n+exports[`InspectedElementContext should not re-render a function with hooks if it did not update since it was last inspected: 2: updated state 1`] = `\n+{\n+ \"id\": 3,\n+ \"owners\": null,\n+ \"context\": null,\n+ \"hooks\": [\n+ {\n+ \"id\": 0,\n+ \"isStateEditable\": true,\n+ \"name\": \"State\",\n+ \"value\": 0,\n+ \"subHooks\": []\n+ }\n+ ],\n+ \"props\": {\n+ \"a\": 2,\n+ \"b\": \"def\"\n+ },\n+ \"state\": null\n+}\n+`;\n+\n+exports[`InspectedElementContext should not tear if hydration is requested after an update: 1: Initially inspect element 1`] = `\n+{\n+ \"id\": 2,\n+ \"owners\": null,\n+ \"context\": null,\n+ \"hooks\": null,\n+ \"props\": {\n+ \"nestedObject\": {\n+ \"value\": 1,\n+ \"a\": {}\n+ }\n+ },\n+ \"state\": null\n+}\n+`;\n+\n+exports[`InspectedElementContext should not tear if hydration is requested after an update: 2: Inspect props.nestedObject.a 1`] = `\n+{\n+ \"id\": 2,\n+ \"owners\": null,\n+ \"context\": null,\n+ \"hooks\": null,\n+ \"props\": {\n+ \"nestedObject\": {\n+ \"value\": 2,\n+ \"a\": {\n+ \"value\": 2,\n+ \"b\": {\n+ \"value\": 2\n+ }\n+ }\n+ }\n+ },\n+ \"state\": null\n+}\n+`;\n+\n+exports[`InspectedElementContext should poll for updates for the currently selected element: 1: initial render 1`] = `\n+{\n+ \"id\": 2,\n+ \"owners\": null,\n+ \"context\": null,\n+ \"hooks\": null,\n+ \"props\": {\n+ \"a\": 1,\n+ \"b\": \"abc\"\n+ },\n+ \"state\": null\n+}\n+`;\n+\n+exports[`InspectedElementContext should poll for updates for the currently selected element: 2: updated state 1`] = `\n+{\n+ \"id\": 2,\n+ \"owners\": null,\n+ \"context\": null,\n+ \"hooks\": null,\n+ \"props\": {\n+ \"a\": 2,\n+ \"b\": \"def\"\n+ },\n+ \"state\": null\n+}\n+`;\n+\n+exports[`InspectedElementContext should support complex data types: 1: Inspected element 2 1`] = `\n+{\n+ \"id\": 2,\n+ \"owners\": null,\n+ \"context\": null,\n+ \"hooks\": null,\n+ \"props\": {\n+ \"html_element\": {},\n+ \"fn\": {},\n+ \"symbol\": {},\n+ \"react_element\": {},\n+ \"array_buffer\": {},\n+ \"typed_array\": {},\n+ \"date\": {}\n+ },\n+ \"state\": null\n+}\n+`;\n+\n+exports[`InspectedElementContext should support custom objects with enumerable properties and getters: 1: Inspected element 2 1`] = `\n+{\n+ \"id\": 2,\n+ \"owners\": null,\n+ \"context\": null,\n+ \"hooks\": null,\n+ \"props\": {\n+ \"data\": {\n+ \"_number\": 42,\n+ \"number\": 42\n+ }\n+ },\n+ \"state\": null\n+}\n+`;\n+\n+exports[`InspectedElementContext should support simple data types: 1: Initial inspection 1`] = `\n+{\n+ \"id\": 2,\n+ \"owners\": null,\n+ \"context\": null,\n+ \"hooks\": null,\n+ \"props\": {\n+ \"boolean_false\": false,\n+ \"boolean_true\": true,\n+ \"infinity\": null,\n+ \"integer_zero\": 0,\n+ \"integer_one\": 1,\n+ \"float\": 1.23,\n+ \"string\": \"abc\",\n+ \"string_empty\": \"\",\n+ \"nan\": null,\n+ \"value_null\": null\n+ },\n+ \"state\": null\n+}\n+`;\ndiff --git a\/src\/__tests__\/__snapshots__\/ownersListContext-test.js.snap b\/src\/__tests__\/__snapshots__\/ownersListContext-test.js.snap\nnew file mode 100644\nindex 0000000000..0699eb5b18\n--- \/dev\/null\n+++ b\/src\/__tests__\/__snapshots__\/ownersListContext-test.js.snap\n@@ -0,0 +1,95 @@\n+\/\/ Jest Snapshot v1, https:\/\/goo.gl\/fbAQLP\n+\n+exports[`OwnersListContext should fetch the owners list for the selected element that includes filtered components: mount 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ <Child>\n+ <Child>\n+`;\n+\n+exports[`OwnersListContext should fetch the owners list for the selected element that includes filtered components: owners for \"Child\" 1`] = `\n+Array [\n+ Object {\n+ \"displayName\": \"Grandparent\",\n+ \"hocDisplayNames\": null,\n+ \"id\": 7,\n+ \"type\": 5,\n+ },\n+ Object {\n+ \"displayName\": \"Parent\",\n+ \"hocDisplayNames\": null,\n+ \"id\": 9,\n+ \"type\": 5,\n+ },\n+ Object {\n+ \"displayName\": \"Child\",\n+ \"hocDisplayNames\": null,\n+ \"id\": 8,\n+ \"type\": 5,\n+ },\n+]\n+`;\n+\n+exports[`OwnersListContext should fetch the owners list for the selected element: mount 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ ▾ <Parent>\n+ <Child>\n+ <Child>\n+`;\n+\n+exports[`OwnersListContext should fetch the owners list for the selected element: owners for \"Child\" 1`] = `\n+Array [\n+ Object {\n+ \"displayName\": \"Grandparent\",\n+ \"hocDisplayNames\": null,\n+ \"id\": 2,\n+ \"type\": 5,\n+ },\n+ Object {\n+ \"displayName\": \"Parent\",\n+ \"hocDisplayNames\": null,\n+ \"id\": 3,\n+ \"type\": 5,\n+ },\n+ Object {\n+ \"displayName\": \"Child\",\n+ \"hocDisplayNames\": null,\n+ \"id\": 4,\n+ \"type\": 5,\n+ },\n+]\n+`;\n+\n+exports[`OwnersListContext should fetch the owners list for the selected element: owners for \"Parent\" 1`] = `\n+Array [\n+ Object {\n+ \"displayName\": \"Grandparent\",\n+ \"hocDisplayNames\": null,\n+ \"id\": 2,\n+ \"type\": 5,\n+ },\n+ Object {\n+ \"displayName\": \"Parent\",\n+ \"hocDisplayNames\": null,\n+ \"id\": 3,\n+ \"type\": 5,\n+ },\n+]\n+`;\n+\n+exports[`OwnersListContext should include the current element even if there are no other owners: mount 1`] = `\n+[root]\n+ <Grandparent>\n+`;\n+\n+exports[`OwnersListContext should include the current element even if there are no other owners: owners for \"Grandparent\" 1`] = `\n+Array [\n+ Object {\n+ \"displayName\": \"Grandparent\",\n+ \"hocDisplayNames\": null,\n+ \"id\": 5,\n+ \"type\": 5,\n+ },\n+]\n+`;\ndiff --git a\/src\/__tests__\/__snapshots__\/profilerContext-test.js.snap b\/src\/__tests__\/__snapshots__\/profilerContext-test.js.snap\nnew file mode 100644\nindex 0000000000..927f3180b4\n--- \/dev\/null\n+++ b\/src\/__tests__\/__snapshots__\/profilerContext-test.js.snap\n@@ -0,0 +1,41 @@\n+\/\/ Jest Snapshot v1, https:\/\/goo.gl\/fbAQLP\n+\n+exports[`ProfilerContext should auto-select the root ID matching the Components tab selection if it has profiling data: mounted 1`] = `\n+[root]\n+ ▾ <Parent>\n+ <Child>\n+[root]\n+ ▾ <Parent>\n+ <Child>\n+`;\n+\n+exports[`ProfilerContext should maintain root selection between profiling sessions so long as there is data for that root: mounted 1`] = `\n+[root]\n+ ▾ <Parent>\n+ <Child>\n+[root]\n+ ▾ <Parent>\n+ <Child>\n+`;\n+\n+exports[`ProfilerContext should not select the root ID matching the Components tab selection if it has no profiling data: mounted 1`] = `\n+[root]\n+ ▾ <Parent>\n+ <Child>\n+[root]\n+ ▾ <Parent>\n+ <Child>\n+`;\n+\n+exports[`ProfilerContext should sync selected element in the Components tab too, provided the element is a match: mounted 1`] = `\n+[root]\n+ ▾ <GrandParent>\n+ ▾ <Parent>\n+ <Child>\n+`;\n+\n+exports[`ProfilerContext should sync selected element in the Components tab too, provided the element is a match: updated 1`] = `\n+[root]\n+ ▾ <GrandParent>\n+ <Parent>\n+`;\ndiff --git a\/src\/__tests__\/__snapshots__\/profilingCache-test.js.snap b\/src\/__tests__\/__snapshots__\/profilingCache-test.js.snap\nnew file mode 100644\nindex 0000000000..82438ada7c\n--- \/dev\/null\n+++ b\/src\/__tests__\/__snapshots__\/profilingCache-test.js.snap\n@@ -0,0 +1,3632 @@\n+\/\/ Jest Snapshot v1, https:\/\/goo.gl\/fbAQLP\n+\n+exports[`ProfilingCache should calculate a self duration based on actual children (not filtered children): CommitDetails with filtered self durations 1`] = `\n+Object {\n+ \"changeDescriptions\": Map {\n+ 2 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ 3 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ 5 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ },\n+ \"duration\": 16,\n+ \"fiberActualDurations\": Map {\n+ 1 => 16,\n+ 2 => 16,\n+ 3 => 1,\n+ 5 => 1,\n+ },\n+ \"fiberSelfDurations\": Map {\n+ 1 => 0,\n+ 2 => 10,\n+ 3 => 1,\n+ 5 => 1,\n+ },\n+ \"interactionIDs\": Array [],\n+ \"priorityLevel\": \"Immediate\",\n+ \"timestamp\": 16,\n+}\n+`;\n+\n+exports[`ProfilingCache should calculate self duration correctly for suspended views: CommitDetails with filtered self durations 1`] = `\n+Object {\n+ \"changeDescriptions\": Map {\n+ 2 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ 4 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ },\n+ \"duration\": 15,\n+ \"fiberActualDurations\": Map {\n+ 1 => 15,\n+ 2 => 15,\n+ 3 => 5,\n+ 4 => 2,\n+ },\n+ \"fiberSelfDurations\": Map {\n+ 1 => 0,\n+ 2 => 10,\n+ 3 => 3,\n+ 4 => 2,\n+ },\n+ \"interactionIDs\": Array [],\n+ \"priorityLevel\": \"Immediate\",\n+ \"timestamp\": 15,\n+}\n+`;\n+\n+exports[`ProfilingCache should calculate self duration correctly for suspended views: CommitDetails with filtered self durations 2`] = `\n+Object {\n+ \"changeDescriptions\": Map {\n+ 5 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ },\n+ \"duration\": 3,\n+ \"fiberActualDurations\": Map {\n+ 5 => 3,\n+ 3 => 3,\n+ },\n+ \"fiberSelfDurations\": Map {\n+ 5 => 3,\n+ 3 => 0,\n+ },\n+ \"interactionIDs\": Array [],\n+ \"priorityLevel\": \"Immediate\",\n+ \"timestamp\": 18,\n+}\n+`;\n+\n+exports[`ProfilingCache should collect data for each commit: CommitDetails commitIndex: 0 1`] = `\n+Object {\n+ \"changeDescriptions\": Map {\n+ 2 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ 3 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ 4 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ 5 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ },\n+ \"duration\": 12,\n+ \"fiberActualDurations\": Map {\n+ 1 => 12,\n+ 2 => 12,\n+ 3 => 0,\n+ 4 => 1,\n+ 5 => 1,\n+ },\n+ \"fiberSelfDurations\": Map {\n+ 1 => 0,\n+ 2 => 10,\n+ 3 => 0,\n+ 4 => 1,\n+ 5 => 1,\n+ },\n+ \"interactionIDs\": Array [],\n+ \"priorityLevel\": \"Immediate\",\n+ \"timestamp\": 12,\n+}\n+`;\n+\n+exports[`ProfilingCache should collect data for each commit: CommitDetails commitIndex: 1 1`] = `\n+Object {\n+ \"changeDescriptions\": Map {\n+ 3 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ 4 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ 6 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ 2 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [\n+ \"count\",\n+ ],\n+ \"state\": null,\n+ },\n+ },\n+ \"duration\": 13,\n+ \"fiberActualDurations\": Map {\n+ 3 => 0,\n+ 4 => 1,\n+ 6 => 2,\n+ 2 => 13,\n+ 1 => 13,\n+ },\n+ \"fiberSelfDurations\": Map {\n+ 3 => 0,\n+ 4 => 1,\n+ 6 => 2,\n+ 2 => 10,\n+ 1 => 0,\n+ },\n+ \"interactionIDs\": Array [],\n+ \"priorityLevel\": \"Immediate\",\n+ \"timestamp\": 25,\n+}\n+`;\n+\n+exports[`ProfilingCache should collect data for each commit: CommitDetails commitIndex: 2 1`] = `\n+Object {\n+ \"changeDescriptions\": Map {\n+ 3 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ 2 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [\n+ \"count\",\n+ ],\n+ \"state\": null,\n+ },\n+ },\n+ \"duration\": 10,\n+ \"fiberActualDurations\": Map {\n+ 3 => 0,\n+ 2 => 10,\n+ 1 => 10,\n+ },\n+ \"fiberSelfDurations\": Map {\n+ 3 => 0,\n+ 2 => 10,\n+ 1 => 0,\n+ },\n+ \"interactionIDs\": Array [],\n+ \"priorityLevel\": \"Immediate\",\n+ \"timestamp\": 35,\n+}\n+`;\n+\n+exports[`ProfilingCache should collect data for each commit: CommitDetails commitIndex: 3 1`] = `\n+Object {\n+ \"changeDescriptions\": Map {\n+ 2 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [\n+ \"count\",\n+ ],\n+ \"state\": null,\n+ },\n+ },\n+ \"duration\": 10,\n+ \"fiberActualDurations\": Map {\n+ 2 => 10,\n+ 1 => 10,\n+ },\n+ \"fiberSelfDurations\": Map {\n+ 2 => 10,\n+ 1 => 0,\n+ },\n+ \"interactionIDs\": Array [],\n+ \"priorityLevel\": \"Immediate\",\n+ \"timestamp\": 45,\n+}\n+`;\n+\n+exports[`ProfilingCache should collect data for each commit: imported data 1`] = `\n+Object {\n+ \"dataForRoots\": Array [\n+ Object {\n+ \"commitData\": Array [\n+ Object {\n+ \"changeDescriptions\": Array [\n+ Array [\n+ 2,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 3,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 4,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 5,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ ],\n+ ],\n+ \"duration\": 12,\n+ \"fiberActualDurations\": Array [\n+ Array [\n+ 1,\n+ 12,\n+ ],\n+ Array [\n+ 2,\n+ 12,\n+ ],\n+ Array [\n+ 3,\n+ 0,\n+ ],\n+ Array [\n+ 4,\n+ 1,\n+ ],\n+ Array [\n+ 5,\n+ 1,\n+ ],\n+ ],\n+ \"fiberSelfDurations\": Array [\n+ Array [\n+ 1,\n+ 0,\n+ ],\n+ Array [\n+ 2,\n+ 10,\n+ ],\n+ Array [\n+ 3,\n+ 0,\n+ ],\n+ Array [\n+ 4,\n+ 1,\n+ ],\n+ Array [\n+ 5,\n+ 1,\n+ ],\n+ ],\n+ \"interactionIDs\": Array [],\n+ \"priorityLevel\": \"Immediate\",\n+ \"timestamp\": 12,\n+ },\n+ Object {\n+ \"changeDescriptions\": Array [\n+ Array [\n+ 3,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 4,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 6,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 2,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [\n+ \"count\",\n+ ],\n+ \"state\": null,\n+ },\n+ ],\n+ ],\n+ \"duration\": 13,\n+ \"fiberActualDurations\": Array [\n+ Array [\n+ 3,\n+ 0,\n+ ],\n+ Array [\n+ 4,\n+ 1,\n+ ],\n+ Array [\n+ 6,\n+ 2,\n+ ],\n+ Array [\n+ 2,\n+ 13,\n+ ],\n+ Array [\n+ 1,\n+ 13,\n+ ],\n+ ],\n+ \"fiberSelfDurations\": Array [\n+ Array [\n+ 3,\n+ 0,\n+ ],\n+ Array [\n+ 4,\n+ 1,\n+ ],\n+ Array [\n+ 6,\n+ 2,\n+ ],\n+ Array [\n+ 2,\n+ 10,\n+ ],\n+ Array [\n+ 1,\n+ 0,\n+ ],\n+ ],\n+ \"interactionIDs\": Array [],\n+ \"priorityLevel\": \"Immediate\",\n+ \"timestamp\": 25,\n+ },\n+ Object {\n+ \"changeDescriptions\": Array [\n+ Array [\n+ 3,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 2,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [\n+ \"count\",\n+ ],\n+ \"state\": null,\n+ },\n+ ],\n+ ],\n+ \"duration\": 10,\n+ \"fiberActualDurations\": Array [\n+ Array [\n+ 3,\n+ 0,\n+ ],\n+ Array [\n+ 2,\n+ 10,\n+ ],\n+ Array [\n+ 1,\n+ 10,\n+ ],\n+ ],\n+ \"fiberSelfDurations\": Array [\n+ Array [\n+ 3,\n+ 0,\n+ ],\n+ Array [\n+ 2,\n+ 10,\n+ ],\n+ Array [\n+ 1,\n+ 0,\n+ ],\n+ ],\n+ \"interactionIDs\": Array [],\n+ \"priorityLevel\": \"Immediate\",\n+ \"timestamp\": 35,\n+ },\n+ Object {\n+ \"changeDescriptions\": Array [\n+ Array [\n+ 2,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [\n+ \"count\",\n+ ],\n+ \"state\": null,\n+ },\n+ ],\n+ ],\n+ \"duration\": 10,\n+ \"fiberActualDurations\": Array [\n+ Array [\n+ 2,\n+ 10,\n+ ],\n+ Array [\n+ 1,\n+ 10,\n+ ],\n+ ],\n+ \"fiberSelfDurations\": Array [\n+ Array [\n+ 2,\n+ 10,\n+ ],\n+ Array [\n+ 1,\n+ 0,\n+ ],\n+ ],\n+ \"interactionIDs\": Array [],\n+ \"priorityLevel\": \"Immediate\",\n+ \"timestamp\": 45,\n+ },\n+ ],\n+ \"displayName\": \"Parent\",\n+ \"initialTreeBaseDurations\": Array [],\n+ \"interactionCommits\": Array [],\n+ \"interactions\": Array [],\n+ \"operations\": Array [\n+ Array [\n+ 1,\n+ 1,\n+ 17,\n+ 6,\n+ 80,\n+ 97,\n+ 114,\n+ 101,\n+ 110,\n+ 116,\n+ 5,\n+ 67,\n+ 104,\n+ 105,\n+ 108,\n+ 100,\n+ 1,\n+ 48,\n+ 1,\n+ 49,\n+ 1,\n+ 1,\n+ 11,\n+ 1,\n+ 1,\n+ 4,\n+ 1,\n+ 12000,\n+ 1,\n+ 2,\n+ 5,\n+ 1,\n+ 0,\n+ 1,\n+ 0,\n+ 4,\n+ 2,\n+ 12000,\n+ 1,\n+ 3,\n+ 5,\n+ 2,\n+ 2,\n+ 2,\n+ 3,\n+ 4,\n+ 3,\n+ 0,\n+ 1,\n+ 4,\n+ 5,\n+ 2,\n+ 2,\n+ 2,\n+ 4,\n+ 4,\n+ 4,\n+ 1000,\n+ 1,\n+ 5,\n+ 8,\n+ 2,\n+ 2,\n+ 2,\n+ 0,\n+ 4,\n+ 5,\n+ 1000,\n+ ],\n+ Array [\n+ 1,\n+ 1,\n+ 8,\n+ 5,\n+ 67,\n+ 104,\n+ 105,\n+ 108,\n+ 100,\n+ 1,\n+ 50,\n+ 1,\n+ 6,\n+ 5,\n+ 2,\n+ 2,\n+ 1,\n+ 2,\n+ 4,\n+ 6,\n+ 2000,\n+ 4,\n+ 2,\n+ 14000,\n+ 3,\n+ 2,\n+ 4,\n+ 3,\n+ 4,\n+ 6,\n+ 5,\n+ 4,\n+ 1,\n+ 14000,\n+ ],\n+ Array [\n+ 1,\n+ 1,\n+ 0,\n+ 2,\n+ 2,\n+ 6,\n+ 4,\n+ 4,\n+ 2,\n+ 11000,\n+ 3,\n+ 2,\n+ 2,\n+ 3,\n+ 5,\n+ 4,\n+ 1,\n+ 11000,\n+ ],\n+ Array [\n+ 1,\n+ 1,\n+ 0,\n+ 2,\n+ 1,\n+ 3,\n+ ],\n+ ],\n+ \"rootID\": 1,\n+ \"snapshots\": Array [],\n+ },\n+ ],\n+ \"version\": 4,\n+}\n+`;\n+\n+exports[`ProfilingCache should collect data for each rendered fiber: FiberCommits: element 2 1`] = `\n+Array [\n+ 0,\n+ 1,\n+ 2,\n+]\n+`;\n+\n+exports[`ProfilingCache should collect data for each rendered fiber: FiberCommits: element 3 1`] = `\n+Array [\n+ 0,\n+ 1,\n+ 2,\n+]\n+`;\n+\n+exports[`ProfilingCache should collect data for each rendered fiber: FiberCommits: element 4 1`] = `\n+Array [\n+ 0,\n+]\n+`;\n+\n+exports[`ProfilingCache should collect data for each rendered fiber: FiberCommits: element 5 1`] = `\n+Array [\n+ 1,\n+ 2,\n+]\n+`;\n+\n+exports[`ProfilingCache should collect data for each rendered fiber: FiberCommits: element 6 1`] = `\n+Array [\n+ 2,\n+]\n+`;\n+\n+exports[`ProfilingCache should collect data for each rendered fiber: imported data 1`] = `\n+Object {\n+ \"dataForRoots\": Array [\n+ Object {\n+ \"commitData\": Array [\n+ Object {\n+ \"changeDescriptions\": Array [\n+ Array [\n+ 2,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 3,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 4,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ ],\n+ ],\n+ \"duration\": 11,\n+ \"fiberActualDurations\": Array [\n+ Array [\n+ 1,\n+ 11,\n+ ],\n+ Array [\n+ 2,\n+ 11,\n+ ],\n+ Array [\n+ 3,\n+ 0,\n+ ],\n+ Array [\n+ 4,\n+ 1,\n+ ],\n+ ],\n+ \"fiberSelfDurations\": Array [\n+ Array [\n+ 1,\n+ 0,\n+ ],\n+ Array [\n+ 2,\n+ 10,\n+ ],\n+ Array [\n+ 3,\n+ 0,\n+ ],\n+ Array [\n+ 4,\n+ 1,\n+ ],\n+ ],\n+ \"interactionIDs\": Array [],\n+ \"priorityLevel\": \"Immediate\",\n+ \"timestamp\": 11,\n+ },\n+ Object {\n+ \"changeDescriptions\": Array [\n+ Array [\n+ 3,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 5,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 2,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [\n+ \"count\",\n+ ],\n+ \"state\": null,\n+ },\n+ ],\n+ ],\n+ \"duration\": 11,\n+ \"fiberActualDurations\": Array [\n+ Array [\n+ 3,\n+ 0,\n+ ],\n+ Array [\n+ 5,\n+ 1,\n+ ],\n+ Array [\n+ 2,\n+ 11,\n+ ],\n+ Array [\n+ 1,\n+ 11,\n+ ],\n+ ],\n+ \"fiberSelfDurations\": Array [\n+ Array [\n+ 3,\n+ 0,\n+ ],\n+ Array [\n+ 5,\n+ 1,\n+ ],\n+ Array [\n+ 2,\n+ 10,\n+ ],\n+ Array [\n+ 1,\n+ 0,\n+ ],\n+ ],\n+ \"interactionIDs\": Array [],\n+ \"priorityLevel\": \"Immediate\",\n+ \"timestamp\": 22,\n+ },\n+ Object {\n+ \"changeDescriptions\": Array [\n+ Array [\n+ 3,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 5,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 6,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 2,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [\n+ \"count\",\n+ ],\n+ \"state\": null,\n+ },\n+ ],\n+ ],\n+ \"duration\": 13,\n+ \"fiberActualDurations\": Array [\n+ Array [\n+ 3,\n+ 0,\n+ ],\n+ Array [\n+ 5,\n+ 1,\n+ ],\n+ Array [\n+ 6,\n+ 2,\n+ ],\n+ Array [\n+ 2,\n+ 13,\n+ ],\n+ Array [\n+ 1,\n+ 13,\n+ ],\n+ ],\n+ \"fiberSelfDurations\": Array [\n+ Array [\n+ 3,\n+ 0,\n+ ],\n+ Array [\n+ 5,\n+ 1,\n+ ],\n+ Array [\n+ 6,\n+ 2,\n+ ],\n+ Array [\n+ 2,\n+ 10,\n+ ],\n+ Array [\n+ 1,\n+ 0,\n+ ],\n+ ],\n+ \"interactionIDs\": Array [],\n+ \"priorityLevel\": \"Immediate\",\n+ \"timestamp\": 35,\n+ },\n+ ],\n+ \"displayName\": \"Parent\",\n+ \"initialTreeBaseDurations\": Array [],\n+ \"interactionCommits\": Array [],\n+ \"interactions\": Array [],\n+ \"operations\": Array [\n+ Array [\n+ 1,\n+ 1,\n+ 15,\n+ 6,\n+ 80,\n+ 97,\n+ 114,\n+ 101,\n+ 110,\n+ 116,\n+ 5,\n+ 67,\n+ 104,\n+ 105,\n+ 108,\n+ 100,\n+ 1,\n+ 48,\n+ 1,\n+ 1,\n+ 11,\n+ 1,\n+ 1,\n+ 4,\n+ 1,\n+ 11000,\n+ 1,\n+ 2,\n+ 5,\n+ 1,\n+ 0,\n+ 1,\n+ 0,\n+ 4,\n+ 2,\n+ 11000,\n+ 1,\n+ 3,\n+ 5,\n+ 2,\n+ 2,\n+ 2,\n+ 3,\n+ 4,\n+ 3,\n+ 0,\n+ 1,\n+ 4,\n+ 8,\n+ 2,\n+ 2,\n+ 2,\n+ 0,\n+ 4,\n+ 4,\n+ 1000,\n+ ],\n+ Array [\n+ 1,\n+ 1,\n+ 8,\n+ 5,\n+ 67,\n+ 104,\n+ 105,\n+ 108,\n+ 100,\n+ 1,\n+ 49,\n+ 1,\n+ 5,\n+ 5,\n+ 2,\n+ 2,\n+ 1,\n+ 2,\n+ 4,\n+ 5,\n+ 1000,\n+ 4,\n+ 2,\n+ 12000,\n+ 3,\n+ 2,\n+ 3,\n+ 3,\n+ 5,\n+ 4,\n+ 4,\n+ 1,\n+ 12000,\n+ ],\n+ Array [\n+ 1,\n+ 1,\n+ 8,\n+ 5,\n+ 67,\n+ 104,\n+ 105,\n+ 108,\n+ 100,\n+ 1,\n+ 50,\n+ 1,\n+ 6,\n+ 5,\n+ 2,\n+ 2,\n+ 1,\n+ 2,\n+ 4,\n+ 6,\n+ 2000,\n+ 4,\n+ 2,\n+ 14000,\n+ 3,\n+ 2,\n+ 4,\n+ 3,\n+ 5,\n+ 6,\n+ 4,\n+ 4,\n+ 1,\n+ 14000,\n+ ],\n+ ],\n+ \"rootID\": 1,\n+ \"snapshots\": Array [],\n+ },\n+ ],\n+ \"version\": 4,\n+}\n+`;\n+\n+exports[`ProfilingCache should collect data for each root (including ones added or mounted after profiling started): Data for root Parent 1`] = `\n+Object {\n+ \"commitData\": Array [\n+ Object {\n+ \"changeDescriptions\": Map {\n+ 3 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ 4 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ 10 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ 2 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [\n+ \"count\",\n+ ],\n+ \"state\": null,\n+ },\n+ },\n+ \"duration\": 13,\n+ \"fiberActualDurations\": Map {\n+ 3 => 0,\n+ 4 => 1,\n+ 10 => 2,\n+ 2 => 13,\n+ 1 => 13,\n+ },\n+ \"fiberSelfDurations\": Map {\n+ 3 => 0,\n+ 4 => 1,\n+ 10 => 2,\n+ 2 => 10,\n+ 1 => 0,\n+ },\n+ \"interactionIDs\": Array [],\n+ \"priorityLevel\": \"Immediate\",\n+ \"timestamp\": 13,\n+ },\n+ Object {\n+ \"changeDescriptions\": Map {\n+ 3 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ 2 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [\n+ \"count\",\n+ ],\n+ \"state\": null,\n+ },\n+ },\n+ \"duration\": 10,\n+ \"fiberActualDurations\": Map {\n+ 3 => 0,\n+ 2 => 10,\n+ 1 => 10,\n+ },\n+ \"fiberSelfDurations\": Map {\n+ 3 => 0,\n+ 2 => 10,\n+ 1 => 0,\n+ },\n+ \"interactionIDs\": Array [],\n+ \"priorityLevel\": \"Immediate\",\n+ \"timestamp\": 34,\n+ },\n+ Object {\n+ \"changeDescriptions\": Map {\n+ 2 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [\n+ \"count\",\n+ ],\n+ \"state\": null,\n+ },\n+ },\n+ \"duration\": 10,\n+ \"fiberActualDurations\": Map {\n+ 2 => 10,\n+ 1 => 10,\n+ },\n+ \"fiberSelfDurations\": Map {\n+ 2 => 10,\n+ 1 => 0,\n+ },\n+ \"interactionIDs\": Array [],\n+ \"priorityLevel\": \"Immediate\",\n+ \"timestamp\": 44,\n+ },\n+ ],\n+ \"displayName\": \"Parent\",\n+ \"initialTreeBaseDurations\": Map {\n+ 1 => 12,\n+ 2 => 12,\n+ 3 => 0,\n+ 4 => 1,\n+ 5 => 1,\n+ },\n+ \"interactionCommits\": Map {},\n+ \"interactions\": Map {},\n+ \"operations\": Array [\n+ Array [\n+ 1,\n+ 1,\n+ 8,\n+ 5,\n+ 67,\n+ 104,\n+ 105,\n+ 108,\n+ 100,\n+ 1,\n+ 50,\n+ 1,\n+ 10,\n+ 5,\n+ 2,\n+ 2,\n+ 1,\n+ 2,\n+ 4,\n+ 10,\n+ 2000,\n+ 4,\n+ 2,\n+ 14000,\n+ 3,\n+ 2,\n+ 4,\n+ 3,\n+ 4,\n+ 10,\n+ 5,\n+ 4,\n+ 1,\n+ 14000,\n+ ],\n+ Array [\n+ 1,\n+ 1,\n+ 0,\n+ 2,\n+ 2,\n+ 10,\n+ 4,\n+ 4,\n+ 2,\n+ 11000,\n+ 3,\n+ 2,\n+ 2,\n+ 3,\n+ 5,\n+ 4,\n+ 1,\n+ 11000,\n+ ],\n+ Array [\n+ 1,\n+ 1,\n+ 0,\n+ 2,\n+ 1,\n+ 3,\n+ ],\n+ ],\n+ \"rootID\": 1,\n+ \"snapshots\": Map {\n+ 1 => Object {\n+ \"children\": Array [\n+ 2,\n+ ],\n+ \"displayName\": null,\n+ \"id\": 1,\n+ \"key\": null,\n+ \"type\": 11,\n+ },\n+ 2 => Object {\n+ \"children\": Array [\n+ 3,\n+ 4,\n+ 5,\n+ ],\n+ \"displayName\": \"Parent\",\n+ \"id\": 2,\n+ \"key\": null,\n+ \"type\": 5,\n+ },\n+ 3 => Object {\n+ \"children\": Array [],\n+ \"displayName\": \"Child\",\n+ \"id\": 3,\n+ \"key\": \"0\",\n+ \"type\": 5,\n+ },\n+ 4 => Object {\n+ \"children\": Array [],\n+ \"displayName\": \"Child\",\n+ \"id\": 4,\n+ \"key\": \"1\",\n+ \"type\": 5,\n+ },\n+ 5 => Object {\n+ \"children\": Array [],\n+ \"displayName\": \"Child\",\n+ \"id\": 5,\n+ \"key\": null,\n+ \"type\": 8,\n+ },\n+ },\n+}\n+`;\n+\n+exports[`ProfilingCache should collect data for each root (including ones added or mounted after profiling started): Data for root Parent 2`] = `\n+Object {\n+ \"commitData\": Array [\n+ Object {\n+ \"changeDescriptions\": Map {\n+ 12 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ 13 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ 14 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ },\n+ \"duration\": 11,\n+ \"fiberActualDurations\": Map {\n+ 11 => 11,\n+ 12 => 11,\n+ 13 => 0,\n+ 14 => 1,\n+ },\n+ \"fiberSelfDurations\": Map {\n+ 11 => 0,\n+ 12 => 10,\n+ 13 => 0,\n+ 14 => 1,\n+ },\n+ \"interactionIDs\": Array [],\n+ \"priorityLevel\": \"Immediate\",\n+ \"timestamp\": 24,\n+ },\n+ ],\n+ \"displayName\": \"Parent\",\n+ \"initialTreeBaseDurations\": Map {},\n+ \"interactionCommits\": Map {},\n+ \"interactions\": Map {},\n+ \"operations\": Array [\n+ Array [\n+ 1,\n+ 11,\n+ 15,\n+ 6,\n+ 80,\n+ 97,\n+ 114,\n+ 101,\n+ 110,\n+ 116,\n+ 5,\n+ 67,\n+ 104,\n+ 105,\n+ 108,\n+ 100,\n+ 1,\n+ 48,\n+ 1,\n+ 11,\n+ 11,\n+ 1,\n+ 1,\n+ 4,\n+ 11,\n+ 11000,\n+ 1,\n+ 12,\n+ 5,\n+ 11,\n+ 0,\n+ 1,\n+ 0,\n+ 4,\n+ 12,\n+ 11000,\n+ 1,\n+ 13,\n+ 5,\n+ 12,\n+ 12,\n+ 2,\n+ 3,\n+ 4,\n+ 13,\n+ 0,\n+ 1,\n+ 14,\n+ 8,\n+ 12,\n+ 12,\n+ 2,\n+ 0,\n+ 4,\n+ 14,\n+ 1000,\n+ ],\n+ ],\n+ \"rootID\": 11,\n+ \"snapshots\": Map {},\n+}\n+`;\n+\n+exports[`ProfilingCache should collect data for each root (including ones added or mounted after profiling started): Data for root Parent 3`] = `\n+Object {\n+ \"commitData\": Array [\n+ Object {\n+ \"changeDescriptions\": Map {},\n+ \"duration\": 0,\n+ \"fiberActualDurations\": Map {},\n+ \"fiberSelfDurations\": Map {},\n+ \"interactionIDs\": Array [],\n+ \"priorityLevel\": \"Immediate\",\n+ \"timestamp\": 34,\n+ },\n+ ],\n+ \"displayName\": \"Parent\",\n+ \"initialTreeBaseDurations\": Map {\n+ 6 => 11,\n+ 7 => 11,\n+ 8 => 0,\n+ 9 => 1,\n+ },\n+ \"interactionCommits\": Map {},\n+ \"interactions\": Map {},\n+ \"operations\": Array [\n+ Array [\n+ 1,\n+ 6,\n+ 0,\n+ 2,\n+ 4,\n+ 9,\n+ 8,\n+ 7,\n+ 6,\n+ ],\n+ ],\n+ \"rootID\": 6,\n+ \"snapshots\": Map {\n+ 6 => Object {\n+ \"children\": Array [\n+ 7,\n+ ],\n+ \"displayName\": null,\n+ \"id\": 6,\n+ \"key\": null,\n+ \"type\": 11,\n+ },\n+ 7 => Object {\n+ \"children\": Array [\n+ 8,\n+ 9,\n+ ],\n+ \"displayName\": \"Parent\",\n+ \"id\": 7,\n+ \"key\": null,\n+ \"type\": 5,\n+ },\n+ 8 => Object {\n+ \"children\": Array [],\n+ \"displayName\": \"Child\",\n+ \"id\": 8,\n+ \"key\": \"0\",\n+ \"type\": 5,\n+ },\n+ 9 => Object {\n+ \"children\": Array [],\n+ \"displayName\": \"Child\",\n+ \"id\": 9,\n+ \"key\": null,\n+ \"type\": 8,\n+ },\n+ },\n+}\n+`;\n+\n+exports[`ProfilingCache should collect data for each root (including ones added or mounted after profiling started): imported data 1`] = `\n+Object {\n+ \"dataForRoots\": Array [\n+ Object {\n+ \"commitData\": Array [\n+ Object {\n+ \"changeDescriptions\": Array [\n+ Array [\n+ 3,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 4,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 10,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 2,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [\n+ \"count\",\n+ ],\n+ \"state\": null,\n+ },\n+ ],\n+ ],\n+ \"duration\": 13,\n+ \"fiberActualDurations\": Array [\n+ Array [\n+ 3,\n+ 0,\n+ ],\n+ Array [\n+ 4,\n+ 1,\n+ ],\n+ Array [\n+ 10,\n+ 2,\n+ ],\n+ Array [\n+ 2,\n+ 13,\n+ ],\n+ Array [\n+ 1,\n+ 13,\n+ ],\n+ ],\n+ \"fiberSelfDurations\": Array [\n+ Array [\n+ 3,\n+ 0,\n+ ],\n+ Array [\n+ 4,\n+ 1,\n+ ],\n+ Array [\n+ 10,\n+ 2,\n+ ],\n+ Array [\n+ 2,\n+ 10,\n+ ],\n+ Array [\n+ 1,\n+ 0,\n+ ],\n+ ],\n+ \"interactionIDs\": Array [],\n+ \"priorityLevel\": \"Immediate\",\n+ \"timestamp\": 13,\n+ },\n+ Object {\n+ \"changeDescriptions\": Array [\n+ Array [\n+ 3,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 2,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [\n+ \"count\",\n+ ],\n+ \"state\": null,\n+ },\n+ ],\n+ ],\n+ \"duration\": 10,\n+ \"fiberActualDurations\": Array [\n+ Array [\n+ 3,\n+ 0,\n+ ],\n+ Array [\n+ 2,\n+ 10,\n+ ],\n+ Array [\n+ 1,\n+ 10,\n+ ],\n+ ],\n+ \"fiberSelfDurations\": Array [\n+ Array [\n+ 3,\n+ 0,\n+ ],\n+ Array [\n+ 2,\n+ 10,\n+ ],\n+ Array [\n+ 1,\n+ 0,\n+ ],\n+ ],\n+ \"interactionIDs\": Array [],\n+ \"priorityLevel\": \"Immediate\",\n+ \"timestamp\": 34,\n+ },\n+ Object {\n+ \"changeDescriptions\": Array [\n+ Array [\n+ 2,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [\n+ \"count\",\n+ ],\n+ \"state\": null,\n+ },\n+ ],\n+ ],\n+ \"duration\": 10,\n+ \"fiberActualDurations\": Array [\n+ Array [\n+ 2,\n+ 10,\n+ ],\n+ Array [\n+ 1,\n+ 10,\n+ ],\n+ ],\n+ \"fiberSelfDurations\": Array [\n+ Array [\n+ 2,\n+ 10,\n+ ],\n+ Array [\n+ 1,\n+ 0,\n+ ],\n+ ],\n+ \"interactionIDs\": Array [],\n+ \"priorityLevel\": \"Immediate\",\n+ \"timestamp\": 44,\n+ },\n+ ],\n+ \"displayName\": \"Parent\",\n+ \"initialTreeBaseDurations\": Array [\n+ Array [\n+ 1,\n+ 12,\n+ ],\n+ Array [\n+ 2,\n+ 12,\n+ ],\n+ Array [\n+ 3,\n+ 0,\n+ ],\n+ Array [\n+ 4,\n+ 1,\n+ ],\n+ Array [\n+ 5,\n+ 1,\n+ ],\n+ ],\n+ \"interactionCommits\": Array [],\n+ \"interactions\": Array [],\n+ \"operations\": Array [\n+ Array [\n+ 1,\n+ 1,\n+ 8,\n+ 5,\n+ 67,\n+ 104,\n+ 105,\n+ 108,\n+ 100,\n+ 1,\n+ 50,\n+ 1,\n+ 10,\n+ 5,\n+ 2,\n+ 2,\n+ 1,\n+ 2,\n+ 4,\n+ 10,\n+ 2000,\n+ 4,\n+ 2,\n+ 14000,\n+ 3,\n+ 2,\n+ 4,\n+ 3,\n+ 4,\n+ 10,\n+ 5,\n+ 4,\n+ 1,\n+ 14000,\n+ ],\n+ Array [\n+ 1,\n+ 1,\n+ 0,\n+ 2,\n+ 2,\n+ 10,\n+ 4,\n+ 4,\n+ 2,\n+ 11000,\n+ 3,\n+ 2,\n+ 2,\n+ 3,\n+ 5,\n+ 4,\n+ 1,\n+ 11000,\n+ ],\n+ Array [\n+ 1,\n+ 1,\n+ 0,\n+ 2,\n+ 1,\n+ 3,\n+ ],\n+ ],\n+ \"rootID\": 1,\n+ \"snapshots\": Array [\n+ Array [\n+ 1,\n+ Object {\n+ \"children\": Array [\n+ 2,\n+ ],\n+ \"displayName\": null,\n+ \"id\": 1,\n+ \"key\": null,\n+ \"type\": 11,\n+ },\n+ ],\n+ Array [\n+ 2,\n+ Object {\n+ \"children\": Array [\n+ 3,\n+ 4,\n+ 5,\n+ ],\n+ \"displayName\": \"Parent\",\n+ \"id\": 2,\n+ \"key\": null,\n+ \"type\": 5,\n+ },\n+ ],\n+ Array [\n+ 3,\n+ Object {\n+ \"children\": Array [],\n+ \"displayName\": \"Child\",\n+ \"id\": 3,\n+ \"key\": \"0\",\n+ \"type\": 5,\n+ },\n+ ],\n+ Array [\n+ 4,\n+ Object {\n+ \"children\": Array [],\n+ \"displayName\": \"Child\",\n+ \"id\": 4,\n+ \"key\": \"1\",\n+ \"type\": 5,\n+ },\n+ ],\n+ Array [\n+ 5,\n+ Object {\n+ \"children\": Array [],\n+ \"displayName\": \"Child\",\n+ \"id\": 5,\n+ \"key\": null,\n+ \"type\": 8,\n+ },\n+ ],\n+ ],\n+ },\n+ Object {\n+ \"commitData\": Array [\n+ Object {\n+ \"changeDescriptions\": Array [\n+ Array [\n+ 12,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 13,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 14,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ ],\n+ ],\n+ \"duration\": 11,\n+ \"fiberActualDurations\": Array [\n+ Array [\n+ 11,\n+ 11,\n+ ],\n+ Array [\n+ 12,\n+ 11,\n+ ],\n+ Array [\n+ 13,\n+ 0,\n+ ],\n+ Array [\n+ 14,\n+ 1,\n+ ],\n+ ],\n+ \"fiberSelfDurations\": Array [\n+ Array [\n+ 11,\n+ 0,\n+ ],\n+ Array [\n+ 12,\n+ 10,\n+ ],\n+ Array [\n+ 13,\n+ 0,\n+ ],\n+ Array [\n+ 14,\n+ 1,\n+ ],\n+ ],\n+ \"interactionIDs\": Array [],\n+ \"priorityLevel\": \"Immediate\",\n+ \"timestamp\": 24,\n+ },\n+ ],\n+ \"displayName\": \"Parent\",\n+ \"initialTreeBaseDurations\": Array [],\n+ \"interactionCommits\": Array [],\n+ \"interactions\": Array [],\n+ \"operations\": Array [\n+ Array [\n+ 1,\n+ 11,\n+ 15,\n+ 6,\n+ 80,\n+ 97,\n+ 114,\n+ 101,\n+ 110,\n+ 116,\n+ 5,\n+ 67,\n+ 104,\n+ 105,\n+ 108,\n+ 100,\n+ 1,\n+ 48,\n+ 1,\n+ 11,\n+ 11,\n+ 1,\n+ 1,\n+ 4,\n+ 11,\n+ 11000,\n+ 1,\n+ 12,\n+ 5,\n+ 11,\n+ 0,\n+ 1,\n+ 0,\n+ 4,\n+ 12,\n+ 11000,\n+ 1,\n+ 13,\n+ 5,\n+ 12,\n+ 12,\n+ 2,\n+ 3,\n+ 4,\n+ 13,\n+ 0,\n+ 1,\n+ 14,\n+ 8,\n+ 12,\n+ 12,\n+ 2,\n+ 0,\n+ 4,\n+ 14,\n+ 1000,\n+ ],\n+ ],\n+ \"rootID\": 11,\n+ \"snapshots\": Array [],\n+ },\n+ Object {\n+ \"commitData\": Array [\n+ Object {\n+ \"changeDescriptions\": Array [],\n+ \"duration\": 0,\n+ \"fiberActualDurations\": Array [],\n+ \"fiberSelfDurations\": Array [],\n+ \"interactionIDs\": Array [],\n+ \"priorityLevel\": \"Immediate\",\n+ \"timestamp\": 34,\n+ },\n+ ],\n+ \"displayName\": \"Parent\",\n+ \"initialTreeBaseDurations\": Array [\n+ Array [\n+ 6,\n+ 11,\n+ ],\n+ Array [\n+ 7,\n+ 11,\n+ ],\n+ Array [\n+ 8,\n+ 0,\n+ ],\n+ Array [\n+ 9,\n+ 1,\n+ ],\n+ ],\n+ \"interactionCommits\": Array [],\n+ \"interactions\": Array [],\n+ \"operations\": Array [\n+ Array [\n+ 1,\n+ 6,\n+ 0,\n+ 2,\n+ 4,\n+ 9,\n+ 8,\n+ 7,\n+ 6,\n+ ],\n+ ],\n+ \"rootID\": 6,\n+ \"snapshots\": Array [\n+ Array [\n+ 6,\n+ Object {\n+ \"children\": Array [\n+ 7,\n+ ],\n+ \"displayName\": null,\n+ \"id\": 6,\n+ \"key\": null,\n+ \"type\": 11,\n+ },\n+ ],\n+ Array [\n+ 7,\n+ Object {\n+ \"children\": Array [\n+ 8,\n+ 9,\n+ ],\n+ \"displayName\": \"Parent\",\n+ \"id\": 7,\n+ \"key\": null,\n+ \"type\": 5,\n+ },\n+ ],\n+ Array [\n+ 8,\n+ Object {\n+ \"children\": Array [],\n+ \"displayName\": \"Child\",\n+ \"id\": 8,\n+ \"key\": \"0\",\n+ \"type\": 5,\n+ },\n+ ],\n+ Array [\n+ 9,\n+ Object {\n+ \"children\": Array [],\n+ \"displayName\": \"Child\",\n+ \"id\": 9,\n+ \"key\": null,\n+ \"type\": 8,\n+ },\n+ ],\n+ ],\n+ },\n+ ],\n+ \"version\": 4,\n+}\n+`;\n+\n+exports[`ProfilingCache should record changed props\/state\/context\/hooks: CommitDetails commitIndex: 0 1`] = `\n+Object {\n+ \"changeDescriptions\": Map {\n+ 2 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ 4 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ 5 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ 6 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ 7 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ },\n+ \"duration\": 0,\n+ \"fiberActualDurations\": Map {\n+ 1 => 0,\n+ 2 => 0,\n+ 3 => 0,\n+ 4 => 0,\n+ 5 => 0,\n+ 6 => 0,\n+ 7 => 0,\n+ },\n+ \"fiberSelfDurations\": Map {\n+ 1 => 0,\n+ 2 => 0,\n+ 3 => 0,\n+ 4 => 0,\n+ 5 => 0,\n+ 6 => 0,\n+ 7 => 0,\n+ },\n+ \"interactionIDs\": Array [],\n+ \"priorityLevel\": \"Immediate\",\n+ \"timestamp\": 0,\n+}\n+`;\n+\n+exports[`ProfilingCache should record changed props\/state\/context\/hooks: CommitDetails commitIndex: 1 1`] = `\n+Object {\n+ \"changeDescriptions\": Map {\n+ 5 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": true,\n+ \"isFirstMount\": false,\n+ \"props\": Array [\n+ \"count\",\n+ ],\n+ \"state\": null,\n+ },\n+ 4 => Object {\n+ \"context\": true,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ 7 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": true,\n+ \"isFirstMount\": false,\n+ \"props\": Array [\n+ \"count\",\n+ ],\n+ \"state\": null,\n+ },\n+ 6 => Object {\n+ \"context\": Array [\n+ \"count\",\n+ ],\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ 2 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": Array [\n+ \"count\",\n+ ],\n+ },\n+ },\n+ \"duration\": 0,\n+ \"fiberActualDurations\": Map {\n+ 5 => 0,\n+ 4 => 0,\n+ 7 => 0,\n+ 6 => 0,\n+ 3 => 0,\n+ 2 => 0,\n+ },\n+ \"fiberSelfDurations\": Map {\n+ 5 => 0,\n+ 4 => 0,\n+ 7 => 0,\n+ 6 => 0,\n+ 3 => 0,\n+ 2 => 0,\n+ },\n+ \"interactionIDs\": Array [],\n+ \"priorityLevel\": \"Immediate\",\n+ \"timestamp\": 0,\n+}\n+`;\n+\n+exports[`ProfilingCache should record changed props\/state\/context\/hooks: CommitDetails commitIndex: 2 1`] = `\n+Object {\n+ \"changeDescriptions\": Map {\n+ 5 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ 4 => Object {\n+ \"context\": false,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ 7 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ 6 => Object {\n+ \"context\": Array [],\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ 2 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [\n+ \"foo\",\n+ ],\n+ \"state\": Array [],\n+ },\n+ },\n+ \"duration\": 0,\n+ \"fiberActualDurations\": Map {\n+ 5 => 0,\n+ 4 => 0,\n+ 7 => 0,\n+ 6 => 0,\n+ 3 => 0,\n+ 2 => 0,\n+ 1 => 0,\n+ },\n+ \"fiberSelfDurations\": Map {\n+ 5 => 0,\n+ 4 => 0,\n+ 7 => 0,\n+ 6 => 0,\n+ 3 => 0,\n+ 2 => 0,\n+ 1 => 0,\n+ },\n+ \"interactionIDs\": Array [],\n+ \"priorityLevel\": \"Immediate\",\n+ \"timestamp\": 0,\n+}\n+`;\n+\n+exports[`ProfilingCache should record changed props\/state\/context\/hooks: CommitDetails commitIndex: 3 1`] = `\n+Object {\n+ \"changeDescriptions\": Map {\n+ 5 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ 4 => Object {\n+ \"context\": false,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ 7 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ 6 => Object {\n+ \"context\": Array [],\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ 2 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [\n+ \"foo\",\n+ \"bar\",\n+ ],\n+ \"state\": Array [],\n+ },\n+ },\n+ \"duration\": 0,\n+ \"fiberActualDurations\": Map {\n+ 5 => 0,\n+ 4 => 0,\n+ 7 => 0,\n+ 6 => 0,\n+ 3 => 0,\n+ 2 => 0,\n+ 1 => 0,\n+ },\n+ \"fiberSelfDurations\": Map {\n+ 5 => 0,\n+ 4 => 0,\n+ 7 => 0,\n+ 6 => 0,\n+ 3 => 0,\n+ 2 => 0,\n+ 1 => 0,\n+ },\n+ \"interactionIDs\": Array [],\n+ \"priorityLevel\": \"Immediate\",\n+ \"timestamp\": 0,\n+}\n+`;\n+\n+exports[`ProfilingCache should record changed props\/state\/context\/hooks: CommitDetails commitIndex: 4 1`] = `\n+Object {\n+ \"changeDescriptions\": Map {\n+ 5 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ 4 => Object {\n+ \"context\": false,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ 7 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ 6 => Object {\n+ \"context\": Array [],\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ 2 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [\n+ \"bar\",\n+ ],\n+ \"state\": Array [],\n+ },\n+ },\n+ \"duration\": 0,\n+ \"fiberActualDurations\": Map {\n+ 5 => 0,\n+ 4 => 0,\n+ 7 => 0,\n+ 6 => 0,\n+ 3 => 0,\n+ 2 => 0,\n+ 1 => 0,\n+ },\n+ \"fiberSelfDurations\": Map {\n+ 5 => 0,\n+ 4 => 0,\n+ 7 => 0,\n+ 6 => 0,\n+ 3 => 0,\n+ 2 => 0,\n+ 1 => 0,\n+ },\n+ \"interactionIDs\": Array [],\n+ \"priorityLevel\": \"Immediate\",\n+ \"timestamp\": 0,\n+}\n+`;\n+\n+exports[`ProfilingCache should record changed props\/state\/context\/hooks: imported data 1`] = `\n+Object {\n+ \"dataForRoots\": Array [\n+ Object {\n+ \"commitData\": Array [\n+ Object {\n+ \"changeDescriptions\": Array [\n+ Array [\n+ 2,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 4,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 5,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 6,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 7,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ ],\n+ ],\n+ \"duration\": 0,\n+ \"fiberActualDurations\": Array [\n+ Array [\n+ 1,\n+ 0,\n+ ],\n+ Array [\n+ 2,\n+ 0,\n+ ],\n+ Array [\n+ 3,\n+ 0,\n+ ],\n+ Array [\n+ 4,\n+ 0,\n+ ],\n+ Array [\n+ 5,\n+ 0,\n+ ],\n+ Array [\n+ 6,\n+ 0,\n+ ],\n+ Array [\n+ 7,\n+ 0,\n+ ],\n+ ],\n+ \"fiberSelfDurations\": Array [\n+ Array [\n+ 1,\n+ 0,\n+ ],\n+ Array [\n+ 2,\n+ 0,\n+ ],\n+ Array [\n+ 3,\n+ 0,\n+ ],\n+ Array [\n+ 4,\n+ 0,\n+ ],\n+ Array [\n+ 5,\n+ 0,\n+ ],\n+ Array [\n+ 6,\n+ 0,\n+ ],\n+ Array [\n+ 7,\n+ 0,\n+ ],\n+ ],\n+ \"interactionIDs\": Array [],\n+ \"priorityLevel\": \"Immediate\",\n+ \"timestamp\": 0,\n+ },\n+ Object {\n+ \"changeDescriptions\": Array [\n+ Array [\n+ 5,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": true,\n+ \"isFirstMount\": false,\n+ \"props\": Array [\n+ \"count\",\n+ ],\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 4,\n+ Object {\n+ \"context\": true,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 7,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": true,\n+ \"isFirstMount\": false,\n+ \"props\": Array [\n+ \"count\",\n+ ],\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 6,\n+ Object {\n+ \"context\": Array [\n+ \"count\",\n+ ],\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 2,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": Array [\n+ \"count\",\n+ ],\n+ },\n+ ],\n+ ],\n+ \"duration\": 0,\n+ \"fiberActualDurations\": Array [\n+ Array [\n+ 5,\n+ 0,\n+ ],\n+ Array [\n+ 4,\n+ 0,\n+ ],\n+ Array [\n+ 7,\n+ 0,\n+ ],\n+ Array [\n+ 6,\n+ 0,\n+ ],\n+ Array [\n+ 3,\n+ 0,\n+ ],\n+ Array [\n+ 2,\n+ 0,\n+ ],\n+ ],\n+ \"fiberSelfDurations\": Array [\n+ Array [\n+ 5,\n+ 0,\n+ ],\n+ Array [\n+ 4,\n+ 0,\n+ ],\n+ Array [\n+ 7,\n+ 0,\n+ ],\n+ Array [\n+ 6,\n+ 0,\n+ ],\n+ Array [\n+ 3,\n+ 0,\n+ ],\n+ Array [\n+ 2,\n+ 0,\n+ ],\n+ ],\n+ \"interactionIDs\": Array [],\n+ \"priorityLevel\": \"Immediate\",\n+ \"timestamp\": 0,\n+ },\n+ Object {\n+ \"changeDescriptions\": Array [\n+ Array [\n+ 5,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 4,\n+ Object {\n+ \"context\": false,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 7,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 6,\n+ Object {\n+ \"context\": Array [],\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 2,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [\n+ \"foo\",\n+ ],\n+ \"state\": Array [],\n+ },\n+ ],\n+ ],\n+ \"duration\": 0,\n+ \"fiberActualDurations\": Array [\n+ Array [\n+ 5,\n+ 0,\n+ ],\n+ Array [\n+ 4,\n+ 0,\n+ ],\n+ Array [\n+ 7,\n+ 0,\n+ ],\n+ Array [\n+ 6,\n+ 0,\n+ ],\n+ Array [\n+ 3,\n+ 0,\n+ ],\n+ Array [\n+ 2,\n+ 0,\n+ ],\n+ Array [\n+ 1,\n+ 0,\n+ ],\n+ ],\n+ \"fiberSelfDurations\": Array [\n+ Array [\n+ 5,\n+ 0,\n+ ],\n+ Array [\n+ 4,\n+ 0,\n+ ],\n+ Array [\n+ 7,\n+ 0,\n+ ],\n+ Array [\n+ 6,\n+ 0,\n+ ],\n+ Array [\n+ 3,\n+ 0,\n+ ],\n+ Array [\n+ 2,\n+ 0,\n+ ],\n+ Array [\n+ 1,\n+ 0,\n+ ],\n+ ],\n+ \"interactionIDs\": Array [],\n+ \"priorityLevel\": \"Immediate\",\n+ \"timestamp\": 0,\n+ },\n+ Object {\n+ \"changeDescriptions\": Array [\n+ Array [\n+ 5,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 4,\n+ Object {\n+ \"context\": false,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 7,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 6,\n+ Object {\n+ \"context\": Array [],\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 2,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [\n+ \"foo\",\n+ \"bar\",\n+ ],\n+ \"state\": Array [],\n+ },\n+ ],\n+ ],\n+ \"duration\": 0,\n+ \"fiberActualDurations\": Array [\n+ Array [\n+ 5,\n+ 0,\n+ ],\n+ Array [\n+ 4,\n+ 0,\n+ ],\n+ Array [\n+ 7,\n+ 0,\n+ ],\n+ Array [\n+ 6,\n+ 0,\n+ ],\n+ Array [\n+ 3,\n+ 0,\n+ ],\n+ Array [\n+ 2,\n+ 0,\n+ ],\n+ Array [\n+ 1,\n+ 0,\n+ ],\n+ ],\n+ \"fiberSelfDurations\": Array [\n+ Array [\n+ 5,\n+ 0,\n+ ],\n+ Array [\n+ 4,\n+ 0,\n+ ],\n+ Array [\n+ 7,\n+ 0,\n+ ],\n+ Array [\n+ 6,\n+ 0,\n+ ],\n+ Array [\n+ 3,\n+ 0,\n+ ],\n+ Array [\n+ 2,\n+ 0,\n+ ],\n+ Array [\n+ 1,\n+ 0,\n+ ],\n+ ],\n+ \"interactionIDs\": Array [],\n+ \"priorityLevel\": \"Immediate\",\n+ \"timestamp\": 0,\n+ },\n+ Object {\n+ \"changeDescriptions\": Array [\n+ Array [\n+ 5,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 4,\n+ Object {\n+ \"context\": false,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 7,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 6,\n+ Object {\n+ \"context\": Array [],\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 2,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [\n+ \"bar\",\n+ ],\n+ \"state\": Array [],\n+ },\n+ ],\n+ ],\n+ \"duration\": 0,\n+ \"fiberActualDurations\": Array [\n+ Array [\n+ 5,\n+ 0,\n+ ],\n+ Array [\n+ 4,\n+ 0,\n+ ],\n+ Array [\n+ 7,\n+ 0,\n+ ],\n+ Array [\n+ 6,\n+ 0,\n+ ],\n+ Array [\n+ 3,\n+ 0,\n+ ],\n+ Array [\n+ 2,\n+ 0,\n+ ],\n+ Array [\n+ 1,\n+ 0,\n+ ],\n+ ],\n+ \"fiberSelfDurations\": Array [\n+ Array [\n+ 5,\n+ 0,\n+ ],\n+ Array [\n+ 4,\n+ 0,\n+ ],\n+ Array [\n+ 7,\n+ 0,\n+ ],\n+ Array [\n+ 6,\n+ 0,\n+ ],\n+ Array [\n+ 3,\n+ 0,\n+ ],\n+ Array [\n+ 2,\n+ 0,\n+ ],\n+ Array [\n+ 1,\n+ 0,\n+ ],\n+ ],\n+ \"interactionIDs\": Array [],\n+ \"priorityLevel\": \"Immediate\",\n+ \"timestamp\": 0,\n+ },\n+ ],\n+ \"displayName\": \"LegacyContextProvider\",\n+ \"initialTreeBaseDurations\": Array [],\n+ \"interactionCommits\": Array [],\n+ \"interactions\": Array [],\n+ \"operations\": Array [\n+ Array [\n+ 1,\n+ 1,\n+ 110,\n+ 21,\n+ 76,\n+ 101,\n+ 103,\n+ 97,\n+ 99,\n+ 121,\n+ 67,\n+ 111,\n+ 110,\n+ 116,\n+ 101,\n+ 120,\n+ 116,\n+ 80,\n+ 114,\n+ 111,\n+ 118,\n+ 105,\n+ 100,\n+ 101,\n+ 114,\n+ 16,\n+ 67,\n+ 111,\n+ 110,\n+ 116,\n+ 101,\n+ 120,\n+ 116,\n+ 46,\n+ 80,\n+ 114,\n+ 111,\n+ 118,\n+ 105,\n+ 100,\n+ 101,\n+ 114,\n+ 21,\n+ 77,\n+ 111,\n+ 100,\n+ 101,\n+ 114,\n+ 110,\n+ 67,\n+ 111,\n+ 110,\n+ 116,\n+ 101,\n+ 120,\n+ 116,\n+ 67,\n+ 111,\n+ 110,\n+ 115,\n+ 117,\n+ 109,\n+ 101,\n+ 114,\n+ 26,\n+ 70,\n+ 117,\n+ 110,\n+ 99,\n+ 116,\n+ 105,\n+ 111,\n+ 110,\n+ 67,\n+ 111,\n+ 109,\n+ 112,\n+ 111,\n+ 110,\n+ 101,\n+ 110,\n+ 116,\n+ 87,\n+ 105,\n+ 116,\n+ 104,\n+ 72,\n+ 111,\n+ 111,\n+ 107,\n+ 115,\n+ 21,\n+ 76,\n+ 101,\n+ 103,\n+ 97,\n+ 99,\n+ 121,\n+ 67,\n+ 111,\n+ 110,\n+ 116,\n+ 101,\n+ 120,\n+ 116,\n+ 67,\n+ 111,\n+ 110,\n+ 115,\n+ 117,\n+ 109,\n+ 101,\n+ 114,\n+ 1,\n+ 1,\n+ 11,\n+ 1,\n+ 1,\n+ 1,\n+ 2,\n+ 1,\n+ 1,\n+ 0,\n+ 1,\n+ 0,\n+ 4,\n+ 2,\n+ 0,\n+ 1,\n+ 3,\n+ 2,\n+ 2,\n+ 2,\n+ 2,\n+ 0,\n+ 4,\n+ 3,\n+ 0,\n+ 1,\n+ 4,\n+ 1,\n+ 3,\n+ 2,\n+ 3,\n+ 0,\n+ 4,\n+ 4,\n+ 0,\n+ 1,\n+ 5,\n+ 5,\n+ 4,\n+ 4,\n+ 4,\n+ 0,\n+ 4,\n+ 5,\n+ 0,\n+ 1,\n+ 6,\n+ 1,\n+ 3,\n+ 2,\n+ 5,\n+ 0,\n+ 4,\n+ 6,\n+ 0,\n+ 1,\n+ 7,\n+ 5,\n+ 6,\n+ 6,\n+ 4,\n+ 0,\n+ 4,\n+ 7,\n+ 0,\n+ ],\n+ Array [\n+ 1,\n+ 1,\n+ 0,\n+ ],\n+ Array [\n+ 1,\n+ 1,\n+ 0,\n+ ],\n+ Array [\n+ 1,\n+ 1,\n+ 0,\n+ ],\n+ Array [\n+ 1,\n+ 1,\n+ 0,\n+ ],\n+ ],\n+ \"rootID\": 1,\n+ \"snapshots\": Array [],\n+ },\n+ ],\n+ \"version\": 4,\n+}\n+`;\n+\n+exports[`ProfilingCache should report every traced interaction: Interactions 1`] = `\n+Array [\n+ Object {\n+ \"__count\": 1,\n+ \"id\": 0,\n+ \"name\": \"mount: one child\",\n+ \"timestamp\": 0,\n+ },\n+ Object {\n+ \"__count\": 0,\n+ \"id\": 1,\n+ \"name\": \"update: two children\",\n+ \"timestamp\": 11,\n+ },\n+]\n+`;\n+\n+exports[`ProfilingCache should report every traced interaction: imported data 1`] = `\n+Object {\n+ \"dataForRoots\": Array [\n+ Object {\n+ \"commitData\": Array [\n+ Object {\n+ \"changeDescriptions\": Array [\n+ Array [\n+ 2,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 3,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 4,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ ],\n+ ],\n+ \"duration\": 11,\n+ \"fiberActualDurations\": Array [\n+ Array [\n+ 1,\n+ 11,\n+ ],\n+ Array [\n+ 2,\n+ 11,\n+ ],\n+ Array [\n+ 3,\n+ 0,\n+ ],\n+ Array [\n+ 4,\n+ 1,\n+ ],\n+ ],\n+ \"fiberSelfDurations\": Array [\n+ Array [\n+ 1,\n+ 0,\n+ ],\n+ Array [\n+ 2,\n+ 10,\n+ ],\n+ Array [\n+ 3,\n+ 0,\n+ ],\n+ Array [\n+ 4,\n+ 1,\n+ ],\n+ ],\n+ \"interactionIDs\": Array [\n+ 0,\n+ ],\n+ \"priorityLevel\": \"Immediate\",\n+ \"timestamp\": 11,\n+ },\n+ Object {\n+ \"changeDescriptions\": Array [\n+ Array [\n+ 3,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 5,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 2,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [\n+ \"count\",\n+ ],\n+ \"state\": null,\n+ },\n+ ],\n+ ],\n+ \"duration\": 11,\n+ \"fiberActualDurations\": Array [\n+ Array [\n+ 3,\n+ 0,\n+ ],\n+ Array [\n+ 5,\n+ 1,\n+ ],\n+ Array [\n+ 2,\n+ 11,\n+ ],\n+ Array [\n+ 1,\n+ 11,\n+ ],\n+ ],\n+ \"fiberSelfDurations\": Array [\n+ Array [\n+ 3,\n+ 0,\n+ ],\n+ Array [\n+ 5,\n+ 1,\n+ ],\n+ Array [\n+ 2,\n+ 10,\n+ ],\n+ Array [\n+ 1,\n+ 0,\n+ ],\n+ ],\n+ \"interactionIDs\": Array [\n+ 1,\n+ ],\n+ \"priorityLevel\": \"Immediate\",\n+ \"timestamp\": 22,\n+ },\n+ ],\n+ \"displayName\": \"Parent\",\n+ \"initialTreeBaseDurations\": Array [],\n+ \"interactionCommits\": Array [\n+ Array [\n+ 0,\n+ Array [\n+ 0,\n+ ],\n+ ],\n+ Array [\n+ 1,\n+ Array [\n+ 1,\n+ ],\n+ ],\n+ ],\n+ \"interactions\": Array [\n+ Array [\n+ 0,\n+ Object {\n+ \"__count\": 1,\n+ \"id\": 0,\n+ \"name\": \"mount: one child\",\n+ \"timestamp\": 0,\n+ },\n+ ],\n+ Array [\n+ 1,\n+ Object {\n+ \"__count\": 0,\n+ \"id\": 1,\n+ \"name\": \"update: two children\",\n+ \"timestamp\": 11,\n+ },\n+ ],\n+ ],\n+ \"operations\": Array [\n+ Array [\n+ 1,\n+ 1,\n+ 15,\n+ 6,\n+ 80,\n+ 97,\n+ 114,\n+ 101,\n+ 110,\n+ 116,\n+ 5,\n+ 67,\n+ 104,\n+ 105,\n+ 108,\n+ 100,\n+ 1,\n+ 48,\n+ 1,\n+ 1,\n+ 11,\n+ 1,\n+ 1,\n+ 4,\n+ 1,\n+ 11000,\n+ 1,\n+ 2,\n+ 5,\n+ 1,\n+ 0,\n+ 1,\n+ 0,\n+ 4,\n+ 2,\n+ 11000,\n+ 1,\n+ 3,\n+ 5,\n+ 2,\n+ 2,\n+ 2,\n+ 3,\n+ 4,\n+ 3,\n+ 0,\n+ 1,\n+ 4,\n+ 8,\n+ 2,\n+ 2,\n+ 2,\n+ 0,\n+ 4,\n+ 4,\n+ 1000,\n+ ],\n+ Array [\n+ 1,\n+ 1,\n+ 8,\n+ 5,\n+ 67,\n+ 104,\n+ 105,\n+ 108,\n+ 100,\n+ 1,\n+ 49,\n+ 1,\n+ 5,\n+ 5,\n+ 2,\n+ 2,\n+ 1,\n+ 2,\n+ 4,\n+ 5,\n+ 1000,\n+ 4,\n+ 2,\n+ 12000,\n+ 3,\n+ 2,\n+ 3,\n+ 3,\n+ 5,\n+ 4,\n+ 4,\n+ 1,\n+ 12000,\n+ ],\n+ ],\n+ \"rootID\": 1,\n+ \"snapshots\": Array [],\n+ },\n+ ],\n+ \"version\": 4,\n+}\n+`;\ndiff --git a\/src\/__tests__\/__snapshots__\/profilingCharts-test.js.snap b\/src\/__tests__\/__snapshots__\/profilingCharts-test.js.snap\nnew file mode 100644\nindex 0000000000..8399be81c6\n--- \/dev\/null\n+++ b\/src\/__tests__\/__snapshots__\/profilingCharts-test.js.snap\n@@ -0,0 +1,452 @@\n+\/\/ Jest Snapshot v1, https:\/\/goo.gl\/fbAQLP\n+\n+exports[`profiling charts flamegraph chart should contain valid data: 0: CommitTree 1`] = `\n+Object {\n+ \"nodes\": Map {\n+ 1 => Object {\n+ \"children\": Array [\n+ 2,\n+ ],\n+ \"displayName\": null,\n+ \"id\": 1,\n+ \"key\": null,\n+ \"parentID\": 0,\n+ \"treeBaseDuration\": 15,\n+ \"type\": 11,\n+ },\n+ 2 => Object {\n+ \"children\": Array [\n+ 3,\n+ 4,\n+ 5,\n+ ],\n+ \"displayName\": \"Parent\",\n+ \"id\": 2,\n+ \"key\": null,\n+ \"parentID\": 1,\n+ \"treeBaseDuration\": 15,\n+ \"type\": 5,\n+ },\n+ 3 => Object {\n+ \"children\": Array [],\n+ \"displayName\": \"Child\",\n+ \"id\": 3,\n+ \"key\": \"first\",\n+ \"parentID\": 2,\n+ \"treeBaseDuration\": 3,\n+ \"type\": 8,\n+ },\n+ 4 => Object {\n+ \"children\": Array [],\n+ \"displayName\": \"Child\",\n+ \"id\": 4,\n+ \"key\": \"second\",\n+ \"parentID\": 2,\n+ \"treeBaseDuration\": 2,\n+ \"type\": 8,\n+ },\n+ 5 => Object {\n+ \"children\": Array [],\n+ \"displayName\": \"Child\",\n+ \"id\": 5,\n+ \"key\": \"third\",\n+ \"parentID\": 2,\n+ \"treeBaseDuration\": 0,\n+ \"type\": 8,\n+ },\n+ },\n+ \"rootID\": 1,\n+}\n+`;\n+\n+exports[`profiling charts flamegraph chart should contain valid data: 0: FlamegraphChartData 1`] = `\n+Object {\n+ \"baseDuration\": 15,\n+ \"depth\": 2,\n+ \"idToDepthMap\": Map {\n+ 2 => 1,\n+ 5 => 2,\n+ 4 => 2,\n+ 3 => 2,\n+ },\n+ \"maxSelfDuration\": 10,\n+ \"renderPathNodes\": Set {\n+ 1,\n+ 2,\n+ },\n+ \"rows\": Array [\n+ Array [\n+ Object {\n+ \"actualDuration\": 15,\n+ \"didRender\": true,\n+ \"id\": 2,\n+ \"label\": \"Parent (10ms of 15ms)\",\n+ \"name\": \"Parent\",\n+ \"offset\": 0,\n+ \"selfDuration\": 10,\n+ \"treeBaseDuration\": 15,\n+ },\n+ ],\n+ Array [\n+ Object {\n+ \"actualDuration\": 0,\n+ \"didRender\": true,\n+ \"id\": 5,\n+ \"label\": \"Child (Memo) key=\\\\\"third\\\\\" (<0.1ms of <0.1ms)\",\n+ \"name\": \"Child\",\n+ \"offset\": 15,\n+ \"selfDuration\": 0,\n+ \"treeBaseDuration\": 0,\n+ },\n+ Object {\n+ \"actualDuration\": 2,\n+ \"didRender\": true,\n+ \"id\": 4,\n+ \"label\": \"Child (Memo) key=\\\\\"second\\\\\" (2ms of 2ms)\",\n+ \"name\": \"Child\",\n+ \"offset\": 13,\n+ \"selfDuration\": 2,\n+ \"treeBaseDuration\": 2,\n+ },\n+ Object {\n+ \"actualDuration\": 3,\n+ \"didRender\": true,\n+ \"id\": 3,\n+ \"label\": \"Child (Memo) key=\\\\\"first\\\\\" (3ms of 3ms)\",\n+ \"name\": \"Child\",\n+ \"offset\": 10,\n+ \"selfDuration\": 3,\n+ \"treeBaseDuration\": 3,\n+ },\n+ ],\n+ ],\n+}\n+`;\n+\n+exports[`profiling charts flamegraph chart should contain valid data: 1: CommitTree 1`] = `\n+Object {\n+ \"nodes\": Map {\n+ 1 => Object {\n+ \"children\": Array [\n+ 2,\n+ ],\n+ \"displayName\": null,\n+ \"id\": 1,\n+ \"key\": null,\n+ \"parentID\": 0,\n+ \"treeBaseDuration\": 15,\n+ \"type\": 11,\n+ },\n+ 2 => Object {\n+ \"children\": Array [\n+ 3,\n+ 4,\n+ 5,\n+ ],\n+ \"displayName\": \"Parent\",\n+ \"id\": 2,\n+ \"key\": null,\n+ \"parentID\": 1,\n+ \"treeBaseDuration\": 15,\n+ \"type\": 5,\n+ },\n+ 3 => Object {\n+ \"children\": Array [],\n+ \"displayName\": \"Child\",\n+ \"id\": 3,\n+ \"key\": \"first\",\n+ \"parentID\": 2,\n+ \"treeBaseDuration\": 3,\n+ \"type\": 8,\n+ },\n+ 4 => Object {\n+ \"children\": Array [],\n+ \"displayName\": \"Child\",\n+ \"id\": 4,\n+ \"key\": \"second\",\n+ \"parentID\": 2,\n+ \"treeBaseDuration\": 2,\n+ \"type\": 8,\n+ },\n+ 5 => Object {\n+ \"children\": Array [],\n+ \"displayName\": \"Child\",\n+ \"id\": 5,\n+ \"key\": \"third\",\n+ \"parentID\": 2,\n+ \"treeBaseDuration\": 0,\n+ \"type\": 8,\n+ },\n+ },\n+ \"rootID\": 1,\n+}\n+`;\n+\n+exports[`profiling charts flamegraph chart should contain valid data: 1: FlamegraphChartData 1`] = `\n+Object {\n+ \"baseDuration\": 15,\n+ \"depth\": 2,\n+ \"idToDepthMap\": Map {\n+ 2 => 1,\n+ 5 => 2,\n+ 4 => 2,\n+ 3 => 2,\n+ },\n+ \"maxSelfDuration\": 10,\n+ \"renderPathNodes\": Set {\n+ 1,\n+ },\n+ \"rows\": Array [\n+ Array [\n+ Object {\n+ \"actualDuration\": 10,\n+ \"didRender\": true,\n+ \"id\": 2,\n+ \"label\": \"Parent (10ms of 10ms)\",\n+ \"name\": \"Parent\",\n+ \"offset\": 0,\n+ \"selfDuration\": 10,\n+ \"treeBaseDuration\": 15,\n+ },\n+ ],\n+ Array [\n+ Object {\n+ \"actualDuration\": 0,\n+ \"didRender\": false,\n+ \"id\": 5,\n+ \"label\": \"Child (Memo) key=\\\\\"third\\\\\"\",\n+ \"name\": \"Child\",\n+ \"offset\": 15,\n+ \"selfDuration\": 0,\n+ \"treeBaseDuration\": 0,\n+ },\n+ Object {\n+ \"actualDuration\": 0,\n+ \"didRender\": false,\n+ \"id\": 4,\n+ \"label\": \"Child (Memo) key=\\\\\"second\\\\\"\",\n+ \"name\": \"Child\",\n+ \"offset\": 13,\n+ \"selfDuration\": 0,\n+ \"treeBaseDuration\": 2,\n+ },\n+ Object {\n+ \"actualDuration\": 0,\n+ \"didRender\": false,\n+ \"id\": 3,\n+ \"label\": \"Child (Memo) key=\\\\\"first\\\\\"\",\n+ \"name\": \"Child\",\n+ \"offset\": 10,\n+ \"selfDuration\": 0,\n+ \"treeBaseDuration\": 3,\n+ },\n+ ],\n+ ],\n+}\n+`;\n+\n+exports[`profiling charts interactions should contain valid data: Interactions 1`] = `\n+Object {\n+ \"interactions\": Array [\n+ Object {\n+ \"__count\": 1,\n+ \"id\": 0,\n+ \"name\": \"mount\",\n+ \"timestamp\": 0,\n+ },\n+ Object {\n+ \"__count\": 0,\n+ \"id\": 1,\n+ \"name\": \"update\",\n+ \"timestamp\": 15,\n+ },\n+ ],\n+ \"lastInteractionTime\": 25,\n+ \"maxCommitDuration\": 15,\n+}\n+`;\n+\n+exports[`profiling charts interactions should contain valid data: Interactions 2`] = `\n+Object {\n+ \"interactions\": Array [\n+ Object {\n+ \"__count\": 1,\n+ \"id\": 0,\n+ \"name\": \"mount\",\n+ \"timestamp\": 0,\n+ },\n+ Object {\n+ \"__count\": 0,\n+ \"id\": 1,\n+ \"name\": \"update\",\n+ \"timestamp\": 15,\n+ },\n+ ],\n+ \"lastInteractionTime\": 25,\n+ \"maxCommitDuration\": 15,\n+}\n+`;\n+\n+exports[`profiling charts ranked chart should contain valid data: 0: CommitTree 1`] = `\n+Object {\n+ \"nodes\": Map {\n+ 1 => Object {\n+ \"children\": Array [\n+ 2,\n+ ],\n+ \"displayName\": null,\n+ \"id\": 1,\n+ \"key\": null,\n+ \"parentID\": 0,\n+ \"treeBaseDuration\": 15,\n+ \"type\": 11,\n+ },\n+ 2 => Object {\n+ \"children\": Array [\n+ 3,\n+ 4,\n+ 5,\n+ ],\n+ \"displayName\": \"Parent\",\n+ \"id\": 2,\n+ \"key\": null,\n+ \"parentID\": 1,\n+ \"treeBaseDuration\": 15,\n+ \"type\": 5,\n+ },\n+ 3 => Object {\n+ \"children\": Array [],\n+ \"displayName\": \"Child\",\n+ \"id\": 3,\n+ \"key\": \"first\",\n+ \"parentID\": 2,\n+ \"treeBaseDuration\": 3,\n+ \"type\": 8,\n+ },\n+ 4 => Object {\n+ \"children\": Array [],\n+ \"displayName\": \"Child\",\n+ \"id\": 4,\n+ \"key\": \"second\",\n+ \"parentID\": 2,\n+ \"treeBaseDuration\": 2,\n+ \"type\": 8,\n+ },\n+ 5 => Object {\n+ \"children\": Array [],\n+ \"displayName\": \"Child\",\n+ \"id\": 5,\n+ \"key\": \"third\",\n+ \"parentID\": 2,\n+ \"treeBaseDuration\": 0,\n+ \"type\": 8,\n+ },\n+ },\n+ \"rootID\": 1,\n+}\n+`;\n+\n+exports[`profiling charts ranked chart should contain valid data: 0: RankedChartData 1`] = `\n+Object {\n+ \"maxValue\": 10,\n+ \"nodes\": Array [\n+ Object {\n+ \"id\": 2,\n+ \"label\": \"Parent (10ms)\",\n+ \"name\": \"Parent\",\n+ \"value\": 10,\n+ },\n+ Object {\n+ \"id\": 3,\n+ \"label\": \"Child (Memo) key=\\\\\"first\\\\\" (3ms)\",\n+ \"name\": \"Child\",\n+ \"value\": 3,\n+ },\n+ Object {\n+ \"id\": 4,\n+ \"label\": \"Child (Memo) key=\\\\\"second\\\\\" (2ms)\",\n+ \"name\": \"Child\",\n+ \"value\": 2,\n+ },\n+ Object {\n+ \"id\": 5,\n+ \"label\": \"Child (Memo) key=\\\\\"third\\\\\" (<0.1ms)\",\n+ \"name\": \"Child\",\n+ \"value\": 0,\n+ },\n+ ],\n+}\n+`;\n+\n+exports[`profiling charts ranked chart should contain valid data: 1: CommitTree 1`] = `\n+Object {\n+ \"nodes\": Map {\n+ 1 => Object {\n+ \"children\": Array [\n+ 2,\n+ ],\n+ \"displayName\": null,\n+ \"id\": 1,\n+ \"key\": null,\n+ \"parentID\": 0,\n+ \"treeBaseDuration\": 15,\n+ \"type\": 11,\n+ },\n+ 2 => Object {\n+ \"children\": Array [\n+ 3,\n+ 4,\n+ 5,\n+ ],\n+ \"displayName\": \"Parent\",\n+ \"id\": 2,\n+ \"key\": null,\n+ \"parentID\": 1,\n+ \"treeBaseDuration\": 15,\n+ \"type\": 5,\n+ },\n+ 3 => Object {\n+ \"children\": Array [],\n+ \"displayName\": \"Child\",\n+ \"id\": 3,\n+ \"key\": \"first\",\n+ \"parentID\": 2,\n+ \"treeBaseDuration\": 3,\n+ \"type\": 8,\n+ },\n+ 4 => Object {\n+ \"children\": Array [],\n+ \"displayName\": \"Child\",\n+ \"id\": 4,\n+ \"key\": \"second\",\n+ \"parentID\": 2,\n+ \"treeBaseDuration\": 2,\n+ \"type\": 8,\n+ },\n+ 5 => Object {\n+ \"children\": Array [],\n+ \"displayName\": \"Child\",\n+ \"id\": 5,\n+ \"key\": \"third\",\n+ \"parentID\": 2,\n+ \"treeBaseDuration\": 0,\n+ \"type\": 8,\n+ },\n+ },\n+ \"rootID\": 1,\n+}\n+`;\n+\n+exports[`profiling charts ranked chart should contain valid data: 1: RankedChartData 1`] = `\n+Object {\n+ \"maxValue\": 10,\n+ \"nodes\": Array [\n+ Object {\n+ \"id\": 2,\n+ \"label\": \"Parent (10ms)\",\n+ \"name\": \"Parent\",\n+ \"value\": 10,\n+ },\n+ ],\n+}\n+`;\ndiff --git a\/src\/__tests__\/__snapshots__\/profilingCommitTreeBuilder-test.js.snap b\/src\/__tests__\/__snapshots__\/profilingCommitTreeBuilder-test.js.snap\nnew file mode 100644\nindex 0000000000..6f8573b08e\n--- \/dev\/null\n+++ b\/src\/__tests__\/__snapshots__\/profilingCommitTreeBuilder-test.js.snap\n@@ -0,0 +1,176 @@\n+\/\/ Jest Snapshot v1, https:\/\/goo.gl\/fbAQLP\n+\n+exports[`commit tree should be able to rebuild the store tree for each commit: 0: CommitTree 1`] = `\n+Object {\n+ \"nodes\": Map {\n+ 1 => Object {\n+ \"children\": Array [\n+ 2,\n+ ],\n+ \"displayName\": null,\n+ \"id\": 1,\n+ \"key\": null,\n+ \"parentID\": 0,\n+ \"treeBaseDuration\": 12,\n+ \"type\": 11,\n+ },\n+ 2 => Object {\n+ \"children\": Array [\n+ 3,\n+ ],\n+ \"displayName\": \"Parent\",\n+ \"id\": 2,\n+ \"key\": null,\n+ \"parentID\": 1,\n+ \"treeBaseDuration\": 12,\n+ \"type\": 5,\n+ },\n+ 3 => Object {\n+ \"children\": Array [],\n+ \"displayName\": \"Child\",\n+ \"id\": 3,\n+ \"key\": \"0\",\n+ \"parentID\": 2,\n+ \"treeBaseDuration\": 2,\n+ \"type\": 8,\n+ },\n+ },\n+ \"rootID\": 1,\n+}\n+`;\n+\n+exports[`commit tree should be able to rebuild the store tree for each commit: 1: CommitTree 1`] = `\n+Object {\n+ \"nodes\": Map {\n+ 1 => Object {\n+ \"children\": Array [\n+ 2,\n+ ],\n+ \"displayName\": null,\n+ \"id\": 1,\n+ \"key\": null,\n+ \"parentID\": 0,\n+ \"treeBaseDuration\": 16,\n+ \"type\": 11,\n+ },\n+ 2 => Object {\n+ \"children\": Array [\n+ 3,\n+ 4,\n+ 5,\n+ ],\n+ \"displayName\": \"Parent\",\n+ \"id\": 2,\n+ \"key\": null,\n+ \"parentID\": 1,\n+ \"treeBaseDuration\": 16,\n+ \"type\": 5,\n+ },\n+ 3 => Object {\n+ \"children\": Array [],\n+ \"displayName\": \"Child\",\n+ \"id\": 3,\n+ \"key\": \"0\",\n+ \"parentID\": 2,\n+ \"treeBaseDuration\": 2,\n+ \"type\": 8,\n+ },\n+ 4 => Object {\n+ \"children\": Array [],\n+ \"displayName\": \"Child\",\n+ \"id\": 4,\n+ \"key\": \"1\",\n+ \"parentID\": 2,\n+ \"treeBaseDuration\": 2,\n+ \"type\": 8,\n+ },\n+ 5 => Object {\n+ \"children\": Array [],\n+ \"displayName\": \"Child\",\n+ \"id\": 5,\n+ \"key\": \"2\",\n+ \"parentID\": 2,\n+ \"treeBaseDuration\": 2,\n+ \"type\": 8,\n+ },\n+ },\n+ \"rootID\": 1,\n+}\n+`;\n+\n+exports[`commit tree should be able to rebuild the store tree for each commit: 2: CommitTree 1`] = `\n+Object {\n+ \"nodes\": Map {\n+ 1 => Object {\n+ \"children\": Array [\n+ 2,\n+ ],\n+ \"displayName\": null,\n+ \"id\": 1,\n+ \"key\": null,\n+ \"parentID\": 0,\n+ \"treeBaseDuration\": 14,\n+ \"type\": 11,\n+ },\n+ 2 => Object {\n+ \"children\": Array [\n+ 3,\n+ 4,\n+ ],\n+ \"displayName\": \"Parent\",\n+ \"id\": 2,\n+ \"key\": null,\n+ \"parentID\": 1,\n+ \"treeBaseDuration\": 14,\n+ \"type\": 5,\n+ },\n+ 3 => Object {\n+ \"children\": Array [],\n+ \"displayName\": \"Child\",\n+ \"id\": 3,\n+ \"key\": \"0\",\n+ \"parentID\": 2,\n+ \"treeBaseDuration\": 2,\n+ \"type\": 8,\n+ },\n+ 4 => Object {\n+ \"children\": Array [],\n+ \"displayName\": \"Child\",\n+ \"id\": 4,\n+ \"key\": \"1\",\n+ \"parentID\": 2,\n+ \"treeBaseDuration\": 2,\n+ \"type\": 8,\n+ },\n+ },\n+ \"rootID\": 1,\n+}\n+`;\n+\n+exports[`commit tree should be able to rebuild the store tree for each commit: 3: CommitTree 1`] = `\n+Object {\n+ \"nodes\": Map {\n+ 1 => Object {\n+ \"children\": Array [\n+ 2,\n+ ],\n+ \"displayName\": null,\n+ \"id\": 1,\n+ \"key\": null,\n+ \"parentID\": 0,\n+ \"treeBaseDuration\": 10,\n+ \"type\": 11,\n+ },\n+ 2 => Object {\n+ \"children\": Array [],\n+ \"displayName\": \"Parent\",\n+ \"id\": 2,\n+ \"key\": null,\n+ \"parentID\": 1,\n+ \"treeBaseDuration\": 10,\n+ \"type\": 5,\n+ },\n+ },\n+ \"rootID\": 1,\n+}\n+`;\ndiff --git a\/src\/__tests__\/__snapshots__\/store-test.js.snap b\/src\/__tests__\/__snapshots__\/store-test.js.snap\nnew file mode 100644\nindex 0000000000..39bddd9b58\n--- \/dev\/null\n+++ b\/src\/__tests__\/__snapshots__\/store-test.js.snap\n@@ -0,0 +1,590 @@\n+\/\/ Jest Snapshot v1, https:\/\/goo.gl\/fbAQLP\n+\n+exports[`Store collapseNodesByDefault:false should display Suspense nodes properly in various states: 1: loading 1`] = `\n+[root]\n+ ▾ <Wrapper>\n+ <Component key=\"Outside\">\n+ ▾ <Suspense>\n+ <Loading>\n+`;\n+\n+exports[`Store collapseNodesByDefault:false should display Suspense nodes properly in various states: 2: resolved 1`] = `\n+[root]\n+ ▾ <Wrapper>\n+ <Component key=\"Outside\">\n+ ▾ <Suspense>\n+ <Component key=\"Inside\">\n+`;\n+\n+exports[`Store collapseNodesByDefault:false should filter DOM nodes from the store tree: 1: mount 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ ▾ <Parent>\n+ <Child>\n+ ▾ <Parent>\n+ <Child>\n+`;\n+\n+exports[`Store collapseNodesByDefault:false should support collapsing parts of the tree: 1: mount 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ ▾ <Parent>\n+ <Child key=\"0\">\n+ <Child key=\"1\">\n+ ▾ <Parent>\n+ <Child key=\"0\">\n+ <Child key=\"1\">\n+`;\n+\n+exports[`Store collapseNodesByDefault:false should support collapsing parts of the tree: 2: collapse first Parent 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ ▸ <Parent>\n+ ▾ <Parent>\n+ <Child key=\"0\">\n+ <Child key=\"1\">\n+`;\n+\n+exports[`Store collapseNodesByDefault:false should support collapsing parts of the tree: 3: collapse second Parent 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ ▸ <Parent>\n+ ▸ <Parent>\n+`;\n+\n+exports[`Store collapseNodesByDefault:false should support collapsing parts of the tree: 4: expand first Parent 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ ▾ <Parent>\n+ <Child key=\"0\">\n+ <Child key=\"1\">\n+ ▸ <Parent>\n+`;\n+\n+exports[`Store collapseNodesByDefault:false should support collapsing parts of the tree: 5: collapse Grandparent 1`] = `\n+[root]\n+ ▸ <Grandparent>\n+`;\n+\n+exports[`Store collapseNodesByDefault:false should support collapsing parts of the tree: 6: expand Grandparent 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ ▾ <Parent>\n+ <Child key=\"0\">\n+ <Child key=\"1\">\n+ ▸ <Parent>\n+`;\n+\n+exports[`Store collapseNodesByDefault:false should support mount and update operations for multiple roots: 1: mount 1`] = `\n+[root]\n+ ▾ <Parent key=\"A\">\n+ <Child key=\"0\">\n+ <Child key=\"1\">\n+ <Child key=\"2\">\n+[root]\n+ ▾ <Parent key=\"B\">\n+ <Child key=\"0\">\n+ <Child key=\"1\">\n+`;\n+\n+exports[`Store collapseNodesByDefault:false should support mount and update operations for multiple roots: 2: update 1`] = `\n+[root]\n+ ▾ <Parent key=\"A\">\n+ <Child key=\"0\">\n+ <Child key=\"1\">\n+ <Child key=\"2\">\n+ <Child key=\"3\">\n+[root]\n+ ▾ <Parent key=\"B\">\n+ <Child key=\"0\">\n+`;\n+\n+exports[`Store collapseNodesByDefault:false should support mount and update operations for multiple roots: 3: unmount B 1`] = `\n+[root]\n+ ▾ <Parent key=\"A\">\n+ <Child key=\"0\">\n+ <Child key=\"1\">\n+ <Child key=\"2\">\n+ <Child key=\"3\">\n+`;\n+\n+exports[`Store collapseNodesByDefault:false should support mount and update operations for multiple roots: 4: unmount A 1`] = ``;\n+\n+exports[`Store collapseNodesByDefault:false should support mount and update operations: 1: mount 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ ▾ <Parent>\n+ <Child key=\"0\">\n+ <Child key=\"1\">\n+ <Child key=\"2\">\n+ <Child key=\"3\">\n+ ▾ <Parent>\n+ <Child key=\"0\">\n+ <Child key=\"1\">\n+ <Child key=\"2\">\n+ <Child key=\"3\">\n+`;\n+\n+exports[`Store collapseNodesByDefault:false should support mount and update operations: 2: update 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ ▾ <Parent>\n+ <Child key=\"0\">\n+ <Child key=\"1\">\n+ ▾ <Parent>\n+ <Child key=\"0\">\n+ <Child key=\"1\">\n+`;\n+\n+exports[`Store collapseNodesByDefault:false should support mount and update operations: 3: unmount 1`] = ``;\n+\n+exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 1: third child is suspended 1`] = `\n+[root]\n+ ▾ <Wrapper>\n+ <Component key=\"Outside\">\n+ ▾ <Suspense>\n+ <Component key=\"Unrelated at Start\">\n+ ▾ <Suspense>\n+ <Component key=\"Suspense 1 Content\">\n+ ▾ <Suspense>\n+ <Component key=\"Suspense 2 Content\">\n+ ▾ <Suspense>\n+ <Loading key=\"Suspense 3 Fallback\">\n+ <Component key=\"Unrelated at End\">\n+`;\n+\n+exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 2: first and third child are suspended 1`] = `\n+[root]\n+ ▾ <Wrapper>\n+ <Component key=\"Outside\">\n+ ▾ <Suspense>\n+ <Component key=\"Unrelated at Start\">\n+ ▾ <Suspense>\n+ <Loading key=\"Suspense 1 Fallback\">\n+ ▾ <Suspense>\n+ <Component key=\"Suspense 2 Content\">\n+ ▾ <Suspense>\n+ <Loading key=\"Suspense 3 Fallback\">\n+ <Component key=\"Unrelated at End\">\n+`;\n+\n+exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 3: second and third child are suspended 1`] = `\n+[root]\n+ ▾ <Wrapper>\n+ <Component key=\"Outside\">\n+ ▾ <Suspense>\n+ <Component key=\"Unrelated at Start\">\n+ ▾ <Suspense>\n+ <Component key=\"Suspense 1 Content\">\n+ ▾ <Suspense>\n+ <Loading key=\"Suspense 2 Fallback\">\n+ ▾ <Suspense>\n+ <Loading key=\"Suspense 3 Fallback\">\n+ <Component key=\"Unrelated at End\">\n+`;\n+\n+exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 4: first and third child are suspended 1`] = `\n+[root]\n+ ▾ <Wrapper>\n+ <Component key=\"Outside\">\n+ ▾ <Suspense>\n+ <Component key=\"Unrelated at Start\">\n+ ▾ <Suspense>\n+ <Loading key=\"Suspense 1 Fallback\">\n+ ▾ <Suspense>\n+ <Component key=\"Suspense 2 Content\">\n+ ▾ <Suspense>\n+ <Loading key=\"Suspense 3 Fallback\">\n+ <Component key=\"Unrelated at End\">\n+`;\n+\n+exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 5: parent is suspended 1`] = `\n+[root]\n+ ▾ <Wrapper>\n+ <Component key=\"Outside\">\n+ ▾ <Suspense>\n+ <Loading key=\"Parent Fallback\">\n+`;\n+\n+exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 6: all children are suspended 1`] = `\n+[root]\n+ ▾ <Wrapper>\n+ <Component key=\"Outside\">\n+ ▾ <Suspense>\n+ <Component key=\"Unrelated at Start\">\n+ ▾ <Suspense>\n+ <Loading key=\"Suspense 1 Fallback\">\n+ ▾ <Suspense>\n+ <Loading key=\"Suspense 2 Fallback\">\n+ ▾ <Suspense>\n+ <Loading key=\"Suspense 3 Fallback\">\n+ <Component key=\"Unrelated at End\">\n+`;\n+\n+exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 7: only third child is suspended 1`] = `\n+[root]\n+ ▾ <Wrapper>\n+ <Component key=\"Outside\">\n+ ▾ <Suspense>\n+ <Component key=\"Unrelated at Start\">\n+ ▾ <Suspense>\n+ <Component key=\"Suspense 1 Content\">\n+ ▾ <Suspense>\n+ <Component key=\"Suspense 2 Content\">\n+ ▾ <Suspense>\n+ <Loading key=\"Suspense 3 Fallback\">\n+ <Component key=\"Unrelated at End\">\n+`;\n+\n+exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 8: first and third child are suspended 1`] = `\n+[root]\n+ ▾ <Wrapper>\n+ <Component key=\"Outside\">\n+ ▾ <Suspense>\n+ <Component key=\"Unrelated at Start\">\n+ ▾ <Suspense>\n+ <Loading key=\"Suspense 1 Fallback\">\n+ ▾ <Suspense>\n+ <Component key=\"Suspense 2 Content\">\n+ ▾ <Suspense>\n+ <Loading key=\"Suspense 3 Fallback\">\n+ <Component key=\"Unrelated at End\">\n+`;\n+\n+exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 9: parent is suspended 1`] = `\n+[root]\n+ ▾ <Wrapper>\n+ <Component key=\"Outside\">\n+ ▾ <Suspense>\n+ <Loading key=\"Parent Fallback\">\n+`;\n+\n+exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 10: parent is suspended 1`] = `\n+[root]\n+ ▾ <Wrapper>\n+ <Component key=\"Outside\">\n+ ▾ <Suspense>\n+ <Loading key=\"Parent Fallback\">\n+`;\n+\n+exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 11: all children are suspended 1`] = `\n+[root]\n+ ▾ <Wrapper>\n+ <Component key=\"Outside\">\n+ ▾ <Suspense>\n+ <Component key=\"Unrelated at Start\">\n+ ▾ <Suspense>\n+ <Loading key=\"Suspense 1 Fallback\">\n+ ▾ <Suspense>\n+ <Loading key=\"Suspense 2 Fallback\">\n+ ▾ <Suspense>\n+ <Loading key=\"Suspense 3 Fallback\">\n+ <Component key=\"Unrelated at End\">\n+`;\n+\n+exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 12: all children are suspended 1`] = `\n+[root]\n+ ▾ <Wrapper>\n+ <Component key=\"Outside\">\n+ ▾ <Suspense>\n+ <Component key=\"Unrelated at Start\">\n+ ▾ <Suspense>\n+ <Loading key=\"Suspense 1 Fallback\">\n+ ▾ <Suspense>\n+ <Loading key=\"Suspense 2 Fallback\">\n+ ▾ <Suspense>\n+ <Loading key=\"Suspense 3 Fallback\">\n+ <Component key=\"Unrelated at End\">\n+`;\n+\n+exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 13: third child is suspended 1`] = `\n+[root]\n+ ▾ <Wrapper>\n+ <Component key=\"Outside\">\n+ ▾ <Suspense>\n+ <Component key=\"Unrelated at Start\">\n+ ▾ <Suspense>\n+ <Component key=\"Suspense 1 Content\">\n+ ▾ <Suspense>\n+ <Component key=\"Suspense 2 Content\">\n+ ▾ <Suspense>\n+ <Loading key=\"Suspense 3 Fallback\">\n+ <Component key=\"Unrelated at End\">\n+`;\n+\n+exports[`Store collapseNodesByDefault:false should support reordering of children: 1: mount 1`] = `\n+[root]\n+ ▾ <Root>\n+ ▾ <Foo key=\"foo\">\n+ <Component key=\"0\">\n+ ▾ <Bar key=\"bar\">\n+ <Component key=\"0\">\n+ <Component key=\"1\">\n+`;\n+\n+exports[`Store collapseNodesByDefault:false should support reordering of children: 3: reorder children 1`] = `\n+[root]\n+ ▾ <Root>\n+ ▾ <Bar key=\"bar\">\n+ <Component key=\"0\">\n+ <Component key=\"1\">\n+ ▾ <Foo key=\"foo\">\n+ <Component key=\"0\">\n+`;\n+\n+exports[`Store collapseNodesByDefault:false should support reordering of children: 4: collapse root 1`] = `\n+[root]\n+ ▸ <Root>\n+`;\n+\n+exports[`Store collapseNodesByDefault:false should support reordering of children: 5: expand root 1`] = `\n+[root]\n+ ▾ <Root>\n+ ▾ <Bar key=\"bar\">\n+ <Component key=\"0\">\n+ <Component key=\"1\">\n+ ▾ <Foo key=\"foo\">\n+ <Component key=\"0\">\n+`;\n+\n+exports[`Store collapseNodesByDefault:true should display Suspense nodes properly in various states: 1: loading 1`] = `\n+[root]\n+ ▸ <Wrapper>\n+`;\n+\n+exports[`Store collapseNodesByDefault:true should display Suspense nodes properly in various states: 2: expand Wrapper and Suspense 1`] = `\n+[root]\n+ ▾ <Wrapper>\n+ <Component key=\"Outside\">\n+ ▾ <Suspense>\n+ <Loading>\n+`;\n+\n+exports[`Store collapseNodesByDefault:true should display Suspense nodes properly in various states: 2: resolved 1`] = `\n+[root]\n+ ▾ <Wrapper>\n+ <Component key=\"Outside\">\n+ ▾ <Suspense>\n+ <Component key=\"Inside\">\n+`;\n+\n+exports[`Store collapseNodesByDefault:true should filter DOM nodes from the store tree: 1: mount 1`] = `\n+[root]\n+ ▸ <Grandparent>\n+`;\n+\n+exports[`Store collapseNodesByDefault:true should filter DOM nodes from the store tree: 2: expand Grandparent 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ ▸ <Parent>\n+ ▸ <Parent>\n+`;\n+\n+exports[`Store collapseNodesByDefault:true should filter DOM nodes from the store tree: 3: expand Parent 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ ▾ <Parent>\n+ <Child>\n+ ▸ <Parent>\n+`;\n+\n+exports[`Store collapseNodesByDefault:true should not add new nodes when suspense is toggled: 1: mount 1`] = `\n+[root]\n+ ▸ <SuspenseTree>\n+`;\n+\n+exports[`Store collapseNodesByDefault:true should not add new nodes when suspense is toggled: 2: expand tree 1`] = `\n+[root]\n+ ▾ <SuspenseTree>\n+ ▾ <Suspense>\n+ ▸ <Parent>\n+`;\n+\n+exports[`Store collapseNodesByDefault:true should not add new nodes when suspense is toggled: 3: toggle fallback on 1`] = `\n+[root]\n+ ▾ <SuspenseTree>\n+ ▾ <Suspense>\n+ <Fallback>\n+`;\n+\n+exports[`Store collapseNodesByDefault:true should not add new nodes when suspense is toggled: 4: toggle fallback on 1`] = `\n+[root]\n+ ▾ <SuspenseTree>\n+ ▾ <Suspense>\n+ ▸ <Parent>\n+`;\n+\n+exports[`Store collapseNodesByDefault:true should support expanding deep parts of the tree: 1: mount 1`] = `\n+[root]\n+ ▸ <Wrapper>\n+`;\n+\n+exports[`Store collapseNodesByDefault:true should support expanding deep parts of the tree: 2: expand deepest node 1`] = `\n+[root]\n+ ▾ <Wrapper>\n+ ▾ <Nested>\n+ ▾ <Nested>\n+ ▾ <Nested>\n+ <Nested>\n+`;\n+\n+exports[`Store collapseNodesByDefault:true should support expanding deep parts of the tree: 3: collapse root 1`] = `\n+[root]\n+ ▸ <Wrapper>\n+`;\n+\n+exports[`Store collapseNodesByDefault:true should support expanding deep parts of the tree: 4: expand root 1`] = `\n+[root]\n+ ▾ <Wrapper>\n+ ▾ <Nested>\n+ ▾ <Nested>\n+ ▾ <Nested>\n+ <Nested>\n+`;\n+\n+exports[`Store collapseNodesByDefault:true should support expanding deep parts of the tree: 5: collapse middle node 1`] = `\n+[root]\n+ ▾ <Wrapper>\n+ ▸ <Nested>\n+`;\n+\n+exports[`Store collapseNodesByDefault:true should support expanding deep parts of the tree: 6: expand middle node 1`] = `\n+[root]\n+ ▾ <Wrapper>\n+ ▾ <Nested>\n+ ▾ <Nested>\n+ ▾ <Nested>\n+ <Nested>\n+`;\n+\n+exports[`Store collapseNodesByDefault:true should support expanding parts of the tree: 1: mount 1`] = `\n+[root]\n+ ▸ <Grandparent>\n+`;\n+\n+exports[`Store collapseNodesByDefault:true should support expanding parts of the tree: 2: expand Grandparent 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ ▸ <Parent>\n+ ▸ <Parent>\n+`;\n+\n+exports[`Store collapseNodesByDefault:true should support expanding parts of the tree: 3: expand first Parent 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ ▾ <Parent>\n+ <Child key=\"0\">\n+ <Child key=\"1\">\n+ ▸ <Parent>\n+`;\n+\n+exports[`Store collapseNodesByDefault:true should support expanding parts of the tree: 4: expand second Parent 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ ▾ <Parent>\n+ <Child key=\"0\">\n+ <Child key=\"1\">\n+ ▾ <Parent>\n+ <Child key=\"0\">\n+ <Child key=\"1\">\n+`;\n+\n+exports[`Store collapseNodesByDefault:true should support expanding parts of the tree: 5: collapse first Parent 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ ▸ <Parent>\n+ ▾ <Parent>\n+ <Child key=\"0\">\n+ <Child key=\"1\">\n+`;\n+\n+exports[`Store collapseNodesByDefault:true should support expanding parts of the tree: 6: collapse second Parent 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ ▸ <Parent>\n+ ▸ <Parent>\n+`;\n+\n+exports[`Store collapseNodesByDefault:true should support expanding parts of the tree: 7: collapse Grandparent 1`] = `\n+[root]\n+ ▸ <Grandparent>\n+`;\n+\n+exports[`Store collapseNodesByDefault:true should support mount and update operations for multiple roots: 1: mount 1`] = `\n+[root]\n+ ▸ <Parent key=\"A\">\n+[root]\n+ ▸ <Parent key=\"B\">\n+`;\n+\n+exports[`Store collapseNodesByDefault:true should support mount and update operations for multiple roots: 2: update 1`] = `\n+[root]\n+ ▸ <Parent key=\"A\">\n+[root]\n+ ▸ <Parent key=\"B\">\n+`;\n+\n+exports[`Store collapseNodesByDefault:true should support mount and update operations for multiple roots: 3: unmount B 1`] = `\n+[root]\n+ ▸ <Parent key=\"A\">\n+`;\n+\n+exports[`Store collapseNodesByDefault:true should support mount and update operations for multiple roots: 4: unmount A 1`] = ``;\n+\n+exports[`Store collapseNodesByDefault:true should support mount and update operations: 1: mount 1`] = `\n+[root]\n+ ▸ <Parent>\n+ ▸ <Parent>\n+`;\n+\n+exports[`Store collapseNodesByDefault:true should support mount and update operations: 2: update 1`] = `\n+[root]\n+ ▸ <Parent>\n+ ▸ <Parent>\n+`;\n+\n+exports[`Store collapseNodesByDefault:true should support mount and update operations: 3: unmount 1`] = ``;\n+\n+exports[`Store collapseNodesByDefault:true should support reordering of children: 1: mount 1`] = `\n+[root]\n+ ▸ <Root>\n+`;\n+\n+exports[`Store collapseNodesByDefault:true should support reordering of children: 3: reorder children 1`] = `\n+[root]\n+ ▸ <Root>\n+`;\n+\n+exports[`Store collapseNodesByDefault:true should support reordering of children: 4: expand root 1`] = `\n+[root]\n+ ▾ <Root>\n+ ▸ <Bar key=\"bar\">\n+ ▸ <Foo key=\"foo\">\n+`;\n+\n+exports[`Store collapseNodesByDefault:true should support reordering of children: 5: expand leaves 1`] = `\n+[root]\n+ ▾ <Root>\n+ ▾ <Bar key=\"bar\">\n+ <Component key=\"0\">\n+ <Component key=\"1\">\n+ ▾ <Foo key=\"foo\">\n+ <Component key=\"0\">\n+`;\n+\n+exports[`Store collapseNodesByDefault:true should support reordering of children: 6: collapse root 1`] = `\n+[root]\n+ ▸ <Root>\n+`;\n+\n+exports[`Store should not allow a root node to be collapsed: 1: mount 1`] = `\n+[root]\n+ <Component>\n+`;\n+\n+exports[`Store should properly handle a root with no visible nodes: 1: mount 1`] = `\n+[root]\n+ <Root>\n+`;\n+\n+exports[`Store should properly handle a root with no visible nodes: 2: add host nodes 1`] = `[root]`;\ndiff --git a\/src\/__tests__\/__snapshots__\/storeComponentFilters-test.js.snap b\/src\/__tests__\/__snapshots__\/storeComponentFilters-test.js.snap\nnew file mode 100644\nindex 0000000000..884b6cbcec\n--- \/dev\/null\n+++ b\/src\/__tests__\/__snapshots__\/storeComponentFilters-test.js.snap\n@@ -0,0 +1,120 @@\n+\/\/ Jest Snapshot v1, https:\/\/goo.gl\/fbAQLP\n+\n+exports[`Store component filters should filter HOCs: 1: mount 1`] = `\n+[root]\n+ ▾ <Component> [Bar][Foo]\n+ ▾ <Component> [Foo]\n+ ▾ <Component>\n+ <div>\n+`;\n+\n+exports[`Store component filters should filter HOCs: 2: hide all HOCs 1`] = `\n+[root]\n+ ▾ <Component>\n+ <div>\n+`;\n+\n+exports[`Store component filters should filter HOCs: 3: disable HOC filter 1`] = `\n+[root]\n+ ▾ <Component> [Bar][Foo]\n+ ▾ <Component> [Foo]\n+ ▾ <Component>\n+ <div>\n+`;\n+\n+exports[`Store component filters should filter by display name: 1: mount 1`] = `\n+[root]\n+ ▾ <Foo>\n+ <Text>\n+ ▾ <Bar>\n+ <Text>\n+ ▾ <Baz>\n+ <Text>\n+`;\n+\n+exports[`Store component filters should filter by display name: 2: filter \"Foo\" 1`] = `\n+[root]\n+ <Text>\n+ ▾ <Bar>\n+ <Text>\n+ ▾ <Baz>\n+ <Text>\n+`;\n+\n+exports[`Store component filters should filter by display name: 3: filter \"Ba\" 1`] = `\n+[root]\n+ ▾ <Foo>\n+ <Text>\n+ <Text>\n+ <Text>\n+`;\n+\n+exports[`Store component filters should filter by display name: 4: filter \"B.z\" 1`] = `\n+[root]\n+ ▾ <Foo>\n+ <Text>\n+ ▾ <Bar>\n+ <Text>\n+ <Text>\n+`;\n+\n+exports[`Store component filters should filter by path: 1: mount 1`] = `\n+[root]\n+ ▾ <Component>\n+ <div>\n+`;\n+\n+exports[`Store component filters should filter by path: 2: hide all components declared within this test filed 1`] = `[root]`;\n+\n+exports[`Store component filters should filter by path: 3: hide components in a made up fake path 1`] = `\n+[root]\n+ ▾ <Component>\n+ <div>\n+`;\n+\n+exports[`Store component filters should ignore invalid ElementTypeRoot filter: 1: mount 1`] = `\n+[root]\n+ ▾ <Root>\n+ <div>\n+`;\n+\n+exports[`Store component filters should ignore invalid ElementTypeRoot filter: 2: add invalid filter 1`] = `\n+[root]\n+ ▾ <Root>\n+ <div>\n+`;\n+\n+exports[`Store component filters should support filtering by element type: 1: mount 1`] = `\n+[root]\n+ ▾ <Root>\n+ ▾ <div>\n+ ▾ <Component>\n+ <div>\n+`;\n+\n+exports[`Store component filters should support filtering by element type: 2: hide host components 1`] = `\n+[root]\n+ ▾ <Root>\n+ <Component>\n+`;\n+\n+exports[`Store component filters should support filtering by element type: 3: hide class components 1`] = `\n+[root]\n+ ▾ <div>\n+ ▾ <Component>\n+ <div>\n+`;\n+\n+exports[`Store component filters should support filtering by element type: 4: hide class and function components 1`] = `\n+[root]\n+ ▾ <div>\n+ <div>\n+`;\n+\n+exports[`Store component filters should support filtering by element type: 5: disable all filters 1`] = `\n+[root]\n+ ▾ <Root>\n+ ▾ <div>\n+ ▾ <Component>\n+ <div>\n+`;\ndiff --git a\/src\/__tests__\/__snapshots__\/storeOwners-test.js.snap b\/src\/__tests__\/__snapshots__\/storeOwners-test.js.snap\nnew file mode 100644\nindex 0000000000..28069711fd\n--- \/dev\/null\n+++ b\/src\/__tests__\/__snapshots__\/storeOwners-test.js.snap\n@@ -0,0 +1,121 @@\n+\/\/ Jest Snapshot v1, https:\/\/goo.gl\/fbAQLP\n+\n+exports[`Store owners list should drill through interleaved intermediate components: 1: mount 1`] = `\n+[root]\n+ ▾ <Root>\n+ ▾ <Intermediate key=\"intermediate\">\n+ <Leaf key=\"leaf\">\n+ ▾ <Wrapper key=\"wrapper\">\n+ <Leaf>\n+ <Leaf key=\"leaf\">\n+`;\n+\n+exports[`Store owners list should drill through interleaved intermediate components: 2: components owned by <Root> 1`] = `\n+\" ▾ <Root>\n+ ▾ <Intermediate key=\\\\\"intermediate\\\\\">\n+ <Leaf>\n+ <Leaf key=\\\\\"leaf\\\\\">\"\n+`;\n+\n+exports[`Store owners list should drill through interleaved intermediate components: 3: components owned by <Intermediate> 1`] = `\n+\" ▾ <Intermediate key=\\\\\"intermediate\\\\\">\n+ <Leaf key=\\\\\"leaf\\\\\">\n+ ▾ <Wrapper key=\\\\\"wrapper\\\\\">\"\n+`;\n+\n+exports[`Store owners list should drill through intermediate components: 1: mount 1`] = `\n+[root]\n+ ▾ <Root>\n+ ▾ <Intermediate>\n+ ▾ <Wrapper>\n+ <Leaf>\n+`;\n+\n+exports[`Store owners list should drill through intermediate components: 2: components owned by <Root> 1`] = `\n+\" ▾ <Root>\n+ ▾ <Intermediate>\n+ <Leaf>\"\n+`;\n+\n+exports[`Store owners list should drill through intermediate components: 3: components owned by <Intermediate> 1`] = `\n+\" ▾ <Intermediate>\n+ ▾ <Wrapper>\"\n+`;\n+\n+exports[`Store owners list should show the proper owners list order and contents after insertions and deletions: 1: mount 1`] = `\n+[root]\n+ ▾ <Root>\n+ ▾ <Intermediate>\n+ ▾ <Wrapper>\n+ <Leaf>\n+`;\n+\n+exports[`Store owners list should show the proper owners list order and contents after insertions and deletions: 2: components owned by <Root> 1`] = `\n+\" ▾ <Root>\n+ ▾ <Intermediate>\n+ <Leaf>\"\n+`;\n+\n+exports[`Store owners list should show the proper owners list order and contents after insertions and deletions: 3: update to add direct 1`] = `\n+[root]\n+ ▾ <Root>\n+ <Leaf>\n+ ▾ <Intermediate>\n+ ▾ <Wrapper>\n+ <Leaf>\n+`;\n+\n+exports[`Store owners list should show the proper owners list order and contents after insertions and deletions: 4: components owned by <Root> 1`] = `\n+\" ▾ <Root>\n+ <Leaf>\n+ ▾ <Intermediate>\n+ <Leaf>\"\n+`;\n+\n+exports[`Store owners list should show the proper owners list order and contents after insertions and deletions: 5: update to remove indirect 1`] = `\n+[root]\n+ ▾ <Root>\n+ <Leaf>\n+`;\n+\n+exports[`Store owners list should show the proper owners list order and contents after insertions and deletions: 6: components owned by <Root> 1`] = `\n+\" ▾ <Root>\n+ <Leaf>\"\n+`;\n+\n+exports[`Store owners list should show the proper owners list order and contents after insertions and deletions: 7: update to remove both 1`] = `\n+[root]\n+ <Root>\n+`;\n+\n+exports[`Store owners list should show the proper owners list order and contents after insertions and deletions: 8: components owned by <Root> 1`] = `\" <Root>\"`;\n+\n+exports[`Store owners list should show the proper owners list ordering after reordered children: 1: mount (ascending) 1`] = `\n+[root]\n+ ▾ <Root>\n+ <Leaf key=\"A\">\n+ <Leaf key=\"B\">\n+ <Leaf key=\"C\">\n+`;\n+\n+exports[`Store owners list should show the proper owners list ordering after reordered children: 2: components owned by <Root> 1`] = `\n+\" ▾ <Root>\n+ <Leaf key=\\\\\"A\\\\\">\n+ <Leaf key=\\\\\"B\\\\\">\n+ <Leaf key=\\\\\"C\\\\\">\"\n+`;\n+\n+exports[`Store owners list should show the proper owners list ordering after reordered children: 3: update (descending) 1`] = `\n+[root]\n+ ▾ <Root>\n+ <Leaf key=\"C\">\n+ <Leaf key=\"B\">\n+ <Leaf key=\"A\">\n+`;\n+\n+exports[`Store owners list should show the proper owners list ordering after reordered children: 4: components owned by <Root> 1`] = `\n+\" ▾ <Root>\n+ <Leaf key=\\\\\"C\\\\\">\n+ <Leaf key=\\\\\"B\\\\\">\n+ <Leaf key=\\\\\"A\\\\\">\"\n+`;\ndiff --git a\/src\/__tests__\/__snapshots__\/storeStressSync-test.js.snap b\/src\/__tests__\/__snapshots__\/storeStressSync-test.js.snap\nnew file mode 100644\nindex 0000000000..801ad148a0\n--- \/dev\/null\n+++ b\/src\/__tests__\/__snapshots__\/storeStressSync-test.js.snap\n@@ -0,0 +1,493 @@\n+\/\/ Jest Snapshot v1, https:\/\/goo.gl\/fbAQLP\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense (Sync Mode) 1`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <A key=\"a\">\n+ <Y>\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense (Sync Mode) 2`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <A key=\"a\">\n+ <Y>\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense (Sync Mode) 3`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <A key=\"a\">\n+ <B key=\"b\">\n+ <C key=\"c\">\n+ <Y>\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense (Sync Mode) 4`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <C key=\"c\">\n+ <B key=\"b\">\n+ <A key=\"a\">\n+ <Y>\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense (Sync Mode) 5`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <C key=\"c\">\n+ <A key=\"a\">\n+ <Y>\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense (Sync Mode) 6`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <C key=\"c\">\n+ <A key=\"a\">\n+ <Y>\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense (Sync Mode) 7`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <C key=\"c\">\n+ <A key=\"a\">\n+ <Y>\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense (Sync Mode) 8`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <A key=\"a\">\n+ <B key=\"b\">\n+ <Y>\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense (Sync Mode) 9`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <A key=\"a\">\n+ <Y>\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense (Sync Mode) 10`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ <Suspense>\n+ <Y>\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense (Sync Mode) 11`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <B key=\"b\">\n+ <Y>\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense (Sync Mode) 12`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <A key=\"a\">\n+ <Y>\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 1`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ ▾ <MaybeSuspend>\n+ <A key=\"a\">\n+ <Z>\n+ <Y>\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 2`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ ▾ <MaybeSuspend>\n+ <A key=\"a\">\n+ <Z>\n+ <Y>\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 3`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ ▾ <MaybeSuspend>\n+ <A key=\"a\">\n+ <B key=\"b\">\n+ <C key=\"c\">\n+ <Z>\n+ <Y>\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 4`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ ▾ <MaybeSuspend>\n+ <C key=\"c\">\n+ <B key=\"b\">\n+ <A key=\"a\">\n+ <Z>\n+ <Y>\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 5`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ ▾ <MaybeSuspend>\n+ <C key=\"c\">\n+ <A key=\"a\">\n+ <Z>\n+ <Y>\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 6`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ ▾ <MaybeSuspend>\n+ <C key=\"c\">\n+ <A key=\"a\">\n+ <Z>\n+ <Y>\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 7`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ ▾ <MaybeSuspend>\n+ <C key=\"c\">\n+ <A key=\"a\">\n+ <Z>\n+ <Y>\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 8`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ ▾ <MaybeSuspend>\n+ <A key=\"a\">\n+ <B key=\"b\">\n+ <Z>\n+ <Y>\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 9`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ ▾ <MaybeSuspend>\n+ <A key=\"a\">\n+ <Z>\n+ <Y>\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 10`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ ▾ <MaybeSuspend>\n+ <Z>\n+ <Y>\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 11`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ ▾ <MaybeSuspend>\n+ <B key=\"b\">\n+ <Z>\n+ <Y>\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 12`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ ▾ <MaybeSuspend>\n+ <A key=\"a\">\n+ <Z>\n+ <Y>\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 13`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <A key=\"a\">\n+ <Y>\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 14`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <A key=\"a\">\n+ <Y>\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 15`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <A key=\"a\">\n+ <B key=\"b\">\n+ <C key=\"c\">\n+ <Y>\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 16`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <C key=\"c\">\n+ <B key=\"b\">\n+ <A key=\"a\">\n+ <Y>\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 17`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <C key=\"c\">\n+ <A key=\"a\">\n+ <Y>\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 18`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <C key=\"c\">\n+ <A key=\"a\">\n+ <Y>\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 19`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <C key=\"c\">\n+ <A key=\"a\">\n+ <Y>\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 20`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <A key=\"a\">\n+ <B key=\"b\">\n+ <Y>\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 21`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <A key=\"a\">\n+ <Y>\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 22`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ <Suspense>\n+ <Y>\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 23`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <B key=\"b\">\n+ <Y>\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 24`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <A key=\"a\">\n+ <Y>\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test with different tree operations (Sync Mode): 1: abcde 1`] = `\n+[root]\n+ ▾ <Parent>\n+ <A key=\"a\">\n+ <B key=\"b\">\n+ <C key=\"c\">\n+ <D key=\"d\">\n+ <E key=\"e\">\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test with different tree operations (Sync Mode): 2: abxde 1`] = `\n+[root]\n+ ▾ <Parent>\n+ <A key=\"a\">\n+ <B key=\"b\">\n+ ▾ <C key=\"c\">\n+ <X>\n+ <D key=\"d\">\n+ <E key=\"e\">\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle stress test with reordering (Sync Mode) 1`] = `\n+[root]\n+ ▾ <Root>\n+ <A key=\"a\">\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle stress test with reordering (Sync Mode) 2`] = `\n+[root]\n+ ▾ <Root>\n+ <B key=\"b\">\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle stress test with reordering (Sync Mode) 3`] = `\n+[root]\n+ ▾ <Root>\n+ <C key=\"c\">\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle stress test with reordering (Sync Mode) 4`] = `\n+[root]\n+ ▾ <Root>\n+ <D key=\"d\">\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle stress test with reordering (Sync Mode) 5`] = `\n+[root]\n+ ▾ <Root>\n+ <E key=\"e\">\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle stress test with reordering (Sync Mode) 6`] = `\n+[root]\n+ ▾ <Root>\n+ <A key=\"a\">\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle stress test with reordering (Sync Mode) 7`] = `\n+[root]\n+ ▾ <Root>\n+ <B key=\"b\">\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle stress test with reordering (Sync Mode) 8`] = `\n+[root]\n+ ▾ <Root>\n+ <C key=\"c\">\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle stress test with reordering (Sync Mode) 9`] = `\n+[root]\n+ ▾ <Root>\n+ <D key=\"d\">\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle stress test with reordering (Sync Mode) 10`] = `\n+[root]\n+ ▾ <Root>\n+ <E key=\"e\">\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle stress test with reordering (Sync Mode) 11`] = `\n+[root]\n+ ▾ <Root>\n+ <A key=\"a\">\n+ <B key=\"b\">\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle stress test with reordering (Sync Mode) 12`] = `\n+[root]\n+ ▾ <Root>\n+ <B key=\"b\">\n+ <A key=\"a\">\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle stress test with reordering (Sync Mode) 13`] = `\n+[root]\n+ ▾ <Root>\n+ <B key=\"b\">\n+ <C key=\"c\">\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle stress test with reordering (Sync Mode) 14`] = `\n+[root]\n+ ▾ <Root>\n+ <C key=\"c\">\n+ <B key=\"b\">\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle stress test with reordering (Sync Mode) 15`] = `\n+[root]\n+ ▾ <Root>\n+ <A key=\"a\">\n+ <C key=\"c\">\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle stress test with reordering (Sync Mode) 16`] = `\n+[root]\n+ ▾ <Root>\n+ <C key=\"c\">\n+ <A key=\"a\">\n+`;\ndiff --git a\/src\/__tests__\/__snapshots__\/storeStressTestConcurrent-test.js.snap b\/src\/__tests__\/__snapshots__\/storeStressTestConcurrent-test.js.snap\nnew file mode 100644\nindex 0000000000..9527d9f602\n--- \/dev\/null\n+++ b\/src\/__tests__\/__snapshots__\/storeStressTestConcurrent-test.js.snap\n@@ -0,0 +1,493 @@\n+\/\/ Jest Snapshot v1, https:\/\/goo.gl\/fbAQLP\n+\n+exports[`StoreStressConcurrent should handle a stress test for Suspense (Concurrent Mode) 1`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <A key=\"a\">\n+ <Y>\n+`;\n+\n+exports[`StoreStressConcurrent should handle a stress test for Suspense (Concurrent Mode) 2`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <A key=\"a\">\n+ <Y>\n+`;\n+\n+exports[`StoreStressConcurrent should handle a stress test for Suspense (Concurrent Mode) 3`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <A key=\"a\">\n+ <B key=\"b\">\n+ <C key=\"c\">\n+ <Y>\n+`;\n+\n+exports[`StoreStressConcurrent should handle a stress test for Suspense (Concurrent Mode) 4`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <C key=\"c\">\n+ <B key=\"b\">\n+ <A key=\"a\">\n+ <Y>\n+`;\n+\n+exports[`StoreStressConcurrent should handle a stress test for Suspense (Concurrent Mode) 5`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <C key=\"c\">\n+ <A key=\"a\">\n+ <Y>\n+`;\n+\n+exports[`StoreStressConcurrent should handle a stress test for Suspense (Concurrent Mode) 6`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <C key=\"c\">\n+ <A key=\"a\">\n+ <Y>\n+`;\n+\n+exports[`StoreStressConcurrent should handle a stress test for Suspense (Concurrent Mode) 7`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <C key=\"c\">\n+ <A key=\"a\">\n+ <Y>\n+`;\n+\n+exports[`StoreStressConcurrent should handle a stress test for Suspense (Concurrent Mode) 8`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <A key=\"a\">\n+ <B key=\"b\">\n+ <Y>\n+`;\n+\n+exports[`StoreStressConcurrent should handle a stress test for Suspense (Concurrent Mode) 9`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <A key=\"a\">\n+ <Y>\n+`;\n+\n+exports[`StoreStressConcurrent should handle a stress test for Suspense (Concurrent Mode) 10`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ <Suspense>\n+ <Y>\n+`;\n+\n+exports[`StoreStressConcurrent should handle a stress test for Suspense (Concurrent Mode) 11`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <B key=\"b\">\n+ <Y>\n+`;\n+\n+exports[`StoreStressConcurrent should handle a stress test for Suspense (Concurrent Mode) 12`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <A key=\"a\">\n+ <Y>\n+`;\n+\n+exports[`StoreStressConcurrent should handle a stress test for Suspense without type change (Concurrent Mode) 1`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ ▾ <MaybeSuspend>\n+ <A key=\"a\">\n+ <Z>\n+ <Y>\n+`;\n+\n+exports[`StoreStressConcurrent should handle a stress test for Suspense without type change (Concurrent Mode) 2`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ ▾ <MaybeSuspend>\n+ <A key=\"a\">\n+ <Z>\n+ <Y>\n+`;\n+\n+exports[`StoreStressConcurrent should handle a stress test for Suspense without type change (Concurrent Mode) 3`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ ▾ <MaybeSuspend>\n+ <A key=\"a\">\n+ <B key=\"b\">\n+ <C key=\"c\">\n+ <Z>\n+ <Y>\n+`;\n+\n+exports[`StoreStressConcurrent should handle a stress test for Suspense without type change (Concurrent Mode) 4`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ ▾ <MaybeSuspend>\n+ <C key=\"c\">\n+ <B key=\"b\">\n+ <A key=\"a\">\n+ <Z>\n+ <Y>\n+`;\n+\n+exports[`StoreStressConcurrent should handle a stress test for Suspense without type change (Concurrent Mode) 5`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ ▾ <MaybeSuspend>\n+ <C key=\"c\">\n+ <A key=\"a\">\n+ <Z>\n+ <Y>\n+`;\n+\n+exports[`StoreStressConcurrent should handle a stress test for Suspense without type change (Concurrent Mode) 6`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ ▾ <MaybeSuspend>\n+ <C key=\"c\">\n+ <A key=\"a\">\n+ <Z>\n+ <Y>\n+`;\n+\n+exports[`StoreStressConcurrent should handle a stress test for Suspense without type change (Concurrent Mode) 7`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ ▾ <MaybeSuspend>\n+ <C key=\"c\">\n+ <A key=\"a\">\n+ <Z>\n+ <Y>\n+`;\n+\n+exports[`StoreStressConcurrent should handle a stress test for Suspense without type change (Concurrent Mode) 8`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ ▾ <MaybeSuspend>\n+ <A key=\"a\">\n+ <B key=\"b\">\n+ <Z>\n+ <Y>\n+`;\n+\n+exports[`StoreStressConcurrent should handle a stress test for Suspense without type change (Concurrent Mode) 9`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ ▾ <MaybeSuspend>\n+ <A key=\"a\">\n+ <Z>\n+ <Y>\n+`;\n+\n+exports[`StoreStressConcurrent should handle a stress test for Suspense without type change (Concurrent Mode) 10`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ ▾ <MaybeSuspend>\n+ <Z>\n+ <Y>\n+`;\n+\n+exports[`StoreStressConcurrent should handle a stress test for Suspense without type change (Concurrent Mode) 11`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ ▾ <MaybeSuspend>\n+ <B key=\"b\">\n+ <Z>\n+ <Y>\n+`;\n+\n+exports[`StoreStressConcurrent should handle a stress test for Suspense without type change (Concurrent Mode) 12`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ ▾ <MaybeSuspend>\n+ <A key=\"a\">\n+ <Z>\n+ <Y>\n+`;\n+\n+exports[`StoreStressConcurrent should handle a stress test for Suspense without type change (Concurrent Mode) 13`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <A key=\"a\">\n+ <Y>\n+`;\n+\n+exports[`StoreStressConcurrent should handle a stress test for Suspense without type change (Concurrent Mode) 14`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <A key=\"a\">\n+ <Y>\n+`;\n+\n+exports[`StoreStressConcurrent should handle a stress test for Suspense without type change (Concurrent Mode) 15`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <A key=\"a\">\n+ <B key=\"b\">\n+ <C key=\"c\">\n+ <Y>\n+`;\n+\n+exports[`StoreStressConcurrent should handle a stress test for Suspense without type change (Concurrent Mode) 16`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <C key=\"c\">\n+ <B key=\"b\">\n+ <A key=\"a\">\n+ <Y>\n+`;\n+\n+exports[`StoreStressConcurrent should handle a stress test for Suspense without type change (Concurrent Mode) 17`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <C key=\"c\">\n+ <A key=\"a\">\n+ <Y>\n+`;\n+\n+exports[`StoreStressConcurrent should handle a stress test for Suspense without type change (Concurrent Mode) 18`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <C key=\"c\">\n+ <A key=\"a\">\n+ <Y>\n+`;\n+\n+exports[`StoreStressConcurrent should handle a stress test for Suspense without type change (Concurrent Mode) 19`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <C key=\"c\">\n+ <A key=\"a\">\n+ <Y>\n+`;\n+\n+exports[`StoreStressConcurrent should handle a stress test for Suspense without type change (Concurrent Mode) 20`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <A key=\"a\">\n+ <B key=\"b\">\n+ <Y>\n+`;\n+\n+exports[`StoreStressConcurrent should handle a stress test for Suspense without type change (Concurrent Mode) 21`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <A key=\"a\">\n+ <Y>\n+`;\n+\n+exports[`StoreStressConcurrent should handle a stress test for Suspense without type change (Concurrent Mode) 22`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ <Suspense>\n+ <Y>\n+`;\n+\n+exports[`StoreStressConcurrent should handle a stress test for Suspense without type change (Concurrent Mode) 23`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <B key=\"b\">\n+ <Y>\n+`;\n+\n+exports[`StoreStressConcurrent should handle a stress test for Suspense without type change (Concurrent Mode) 24`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <A key=\"a\">\n+ <Y>\n+`;\n+\n+exports[`StoreStressConcurrent should handle a stress test with different tree operations (Concurrent Mode): 1: abcde 1`] = `\n+[root]\n+ ▾ <Parent>\n+ <A key=\"a\">\n+ <B key=\"b\">\n+ <C key=\"c\">\n+ <D key=\"d\">\n+ <E key=\"e\">\n+`;\n+\n+exports[`StoreStressConcurrent should handle a stress test with different tree operations (Concurrent Mode): 2: abxde 1`] = `\n+[root]\n+ ▾ <Parent>\n+ <A key=\"a\">\n+ <B key=\"b\">\n+ ▾ <C key=\"c\">\n+ <X>\n+ <D key=\"d\">\n+ <E key=\"e\">\n+`;\n+\n+exports[`StoreStressConcurrent should handle stress test with reordering (Concurrent Mode) 1`] = `\n+[root]\n+ ▾ <Root>\n+ <A key=\"a\">\n+`;\n+\n+exports[`StoreStressConcurrent should handle stress test with reordering (Concurrent Mode) 2`] = `\n+[root]\n+ ▾ <Root>\n+ <B key=\"b\">\n+`;\n+\n+exports[`StoreStressConcurrent should handle stress test with reordering (Concurrent Mode) 3`] = `\n+[root]\n+ ▾ <Root>\n+ <C key=\"c\">\n+`;\n+\n+exports[`StoreStressConcurrent should handle stress test with reordering (Concurrent Mode) 4`] = `\n+[root]\n+ ▾ <Root>\n+ <D key=\"d\">\n+`;\n+\n+exports[`StoreStressConcurrent should handle stress test with reordering (Concurrent Mode) 5`] = `\n+[root]\n+ ▾ <Root>\n+ <E key=\"e\">\n+`;\n+\n+exports[`StoreStressConcurrent should handle stress test with reordering (Concurrent Mode) 6`] = `\n+[root]\n+ ▾ <Root>\n+ <A key=\"a\">\n+`;\n+\n+exports[`StoreStressConcurrent should handle stress test with reordering (Concurrent Mode) 7`] = `\n+[root]\n+ ▾ <Root>\n+ <B key=\"b\">\n+`;\n+\n+exports[`StoreStressConcurrent should handle stress test with reordering (Concurrent Mode) 8`] = `\n+[root]\n+ ▾ <Root>\n+ <C key=\"c\">\n+`;\n+\n+exports[`StoreStressConcurrent should handle stress test with reordering (Concurrent Mode) 9`] = `\n+[root]\n+ ▾ <Root>\n+ <D key=\"d\">\n+`;\n+\n+exports[`StoreStressConcurrent should handle stress test with reordering (Concurrent Mode) 10`] = `\n+[root]\n+ ▾ <Root>\n+ <E key=\"e\">\n+`;\n+\n+exports[`StoreStressConcurrent should handle stress test with reordering (Concurrent Mode) 11`] = `\n+[root]\n+ ▾ <Root>\n+ <A key=\"a\">\n+ <B key=\"b\">\n+`;\n+\n+exports[`StoreStressConcurrent should handle stress test with reordering (Concurrent Mode) 12`] = `\n+[root]\n+ ▾ <Root>\n+ <B key=\"b\">\n+ <A key=\"a\">\n+`;\n+\n+exports[`StoreStressConcurrent should handle stress test with reordering (Concurrent Mode) 13`] = `\n+[root]\n+ ▾ <Root>\n+ <B key=\"b\">\n+ <C key=\"c\">\n+`;\n+\n+exports[`StoreStressConcurrent should handle stress test with reordering (Concurrent Mode) 14`] = `\n+[root]\n+ ▾ <Root>\n+ <C key=\"c\">\n+ <B key=\"b\">\n+`;\n+\n+exports[`StoreStressConcurrent should handle stress test with reordering (Concurrent Mode) 15`] = `\n+[root]\n+ ▾ <Root>\n+ <A key=\"a\">\n+ <C key=\"c\">\n+`;\n+\n+exports[`StoreStressConcurrent should handle stress test with reordering (Concurrent Mode) 16`] = `\n+[root]\n+ ▾ <Root>\n+ <C key=\"c\">\n+ <A key=\"a\">\n+`;\ndiff --git a\/src\/__tests__\/__snapshots__\/treeContext-test.js.snap b\/src\/__tests__\/__snapshots__\/treeContext-test.js.snap\nnew file mode 100644\nindex 0000000000..33230c69aa\n--- \/dev\/null\n+++ b\/src\/__tests__\/__snapshots__\/treeContext-test.js.snap\n@@ -0,0 +1,1204 @@\n+\/\/ Jest Snapshot v1, https:\/\/goo.gl\/fbAQLP\n+\n+exports[`TreeListContext owners state should exit the owners list if an element outside the list is selected: 0: mount 1`] = `\n+[root]\n+ ▾ <Parent>\n+ ▾ <Suspense>\n+ ▾ <Child>\n+ ▾ <Suspense>\n+ <Grandchild>\n+`;\n+\n+exports[`TreeListContext owners state should exit the owners list if an element outside the list is selected: 1: initial state 1`] = `\n+Object {\n+ \"inspectedElementID\": null,\n+ \"numElements\": 5,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": null,\n+ \"selectedElementIndex\": null,\n+}\n+`;\n+\n+exports[`TreeListContext owners state should exit the owners list if an element outside the list is selected: 2: child owners tree 1`] = `\n+Object {\n+ \"inspectedElementID\": 4,\n+ \"numElements\": 3,\n+ \"ownerFlatTree\": Array [\n+ Object {\n+ \"children\": Array [\n+ 5,\n+ ],\n+ \"depth\": 0,\n+ \"displayName\": \"Child\",\n+ \"hocDisplayNames\": null,\n+ \"id\": 4,\n+ \"isCollapsed\": false,\n+ \"key\": null,\n+ \"ownerID\": 2,\n+ \"parentID\": 3,\n+ \"type\": 5,\n+ \"weight\": 3,\n+ },\n+ Object {\n+ \"children\": Array [\n+ 6,\n+ ],\n+ \"depth\": 1,\n+ \"displayName\": \"Suspense\",\n+ \"hocDisplayNames\": null,\n+ \"id\": 5,\n+ \"isCollapsed\": false,\n+ \"key\": null,\n+ \"ownerID\": 4,\n+ \"parentID\": 4,\n+ \"type\": 12,\n+ \"weight\": 2,\n+ },\n+ Object {\n+ \"children\": Array [],\n+ \"depth\": 2,\n+ \"displayName\": \"Grandchild\",\n+ \"hocDisplayNames\": null,\n+ \"id\": 6,\n+ \"isCollapsed\": false,\n+ \"key\": null,\n+ \"ownerID\": 4,\n+ \"parentID\": 5,\n+ \"type\": 5,\n+ \"weight\": 1,\n+ },\n+ ],\n+ \"ownerID\": 4,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 4,\n+ \"selectedElementIndex\": 0,\n+}\n+`;\n+\n+exports[`TreeListContext owners state should exit the owners list if an element outside the list is selected: 3: child owners tree 1`] = `\n+Object {\n+ \"inspectedElementID\": 5,\n+ \"numElements\": 3,\n+ \"ownerFlatTree\": Array [\n+ Object {\n+ \"children\": Array [\n+ 5,\n+ ],\n+ \"depth\": 0,\n+ \"displayName\": \"Child\",\n+ \"hocDisplayNames\": null,\n+ \"id\": 4,\n+ \"isCollapsed\": false,\n+ \"key\": null,\n+ \"ownerID\": 2,\n+ \"parentID\": 3,\n+ \"type\": 5,\n+ \"weight\": 3,\n+ },\n+ Object {\n+ \"children\": Array [\n+ 6,\n+ ],\n+ \"depth\": 1,\n+ \"displayName\": \"Suspense\",\n+ \"hocDisplayNames\": null,\n+ \"id\": 5,\n+ \"isCollapsed\": false,\n+ \"key\": null,\n+ \"ownerID\": 4,\n+ \"parentID\": 4,\n+ \"type\": 12,\n+ \"weight\": 2,\n+ },\n+ Object {\n+ \"children\": Array [],\n+ \"depth\": 2,\n+ \"displayName\": \"Grandchild\",\n+ \"hocDisplayNames\": null,\n+ \"id\": 6,\n+ \"isCollapsed\": false,\n+ \"key\": null,\n+ \"ownerID\": 4,\n+ \"parentID\": 5,\n+ \"type\": 5,\n+ \"weight\": 1,\n+ },\n+ ],\n+ \"ownerID\": 4,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 5,\n+ \"selectedElementIndex\": 1,\n+}\n+`;\n+\n+exports[`TreeListContext owners state should exit the owners list if an element outside the list is selected: 4: main tree 1`] = `\n+Object {\n+ \"inspectedElementID\": 5,\n+ \"numElements\": 5,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 5,\n+ \"selectedElementIndex\": 1,\n+}\n+`;\n+\n+exports[`TreeListContext owners state should exit the owners list if the current owner is unmounted: 0: mount 1`] = `\n+[root]\n+ ▾ <Parent>\n+ <Child>\n+`;\n+\n+exports[`TreeListContext owners state should exit the owners list if the current owner is unmounted: 1: initial state 1`] = `\n+Object {\n+ \"inspectedElementID\": null,\n+ \"numElements\": 2,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": null,\n+ \"selectedElementIndex\": null,\n+}\n+`;\n+\n+exports[`TreeListContext owners state should exit the owners list if the current owner is unmounted: 2: child owners tree 1`] = `\n+Object {\n+ \"inspectedElementID\": 3,\n+ \"numElements\": 1,\n+ \"ownerFlatTree\": Array [\n+ Object {\n+ \"children\": Array [],\n+ \"depth\": 0,\n+ \"displayName\": \"Child\",\n+ \"hocDisplayNames\": null,\n+ \"id\": 3,\n+ \"isCollapsed\": false,\n+ \"key\": null,\n+ \"ownerID\": 0,\n+ \"parentID\": 2,\n+ \"type\": 5,\n+ \"weight\": 1,\n+ },\n+ ],\n+ \"ownerID\": 3,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 3,\n+ \"selectedElementIndex\": 0,\n+}\n+`;\n+\n+exports[`TreeListContext owners state should exit the owners list if the current owner is unmounted: 3: remove child 1`] = `\n+Object {\n+ \"inspectedElementID\": null,\n+ \"numElements\": 1,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": null,\n+ \"selectedElementIndex\": 0,\n+}\n+`;\n+\n+exports[`TreeListContext owners state should exit the owners list if the current owner is unmounted: 4: parent owners tree 1`] = `\n+Object {\n+ \"inspectedElementID\": 2,\n+ \"numElements\": 1,\n+ \"ownerFlatTree\": Array [\n+ Object {\n+ \"children\": Array [],\n+ \"depth\": 0,\n+ \"displayName\": \"Parent\",\n+ \"hocDisplayNames\": null,\n+ \"id\": 2,\n+ \"isCollapsed\": false,\n+ \"key\": null,\n+ \"ownerID\": 0,\n+ \"parentID\": 1,\n+ \"type\": 5,\n+ \"weight\": 1,\n+ },\n+ ],\n+ \"ownerID\": 2,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 2,\n+ \"selectedElementIndex\": 0,\n+}\n+`;\n+\n+exports[`TreeListContext owners state should exit the owners list if the current owner is unmounted: 5: unmount root 1`] = `\n+Object {\n+ \"inspectedElementID\": null,\n+ \"numElements\": 0,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": null,\n+ \"selectedElementIndex\": 0,\n+}\n+`;\n+\n+exports[`TreeListContext owners state should remove an element from the owners list if it is unmounted: 0: mount 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ ▾ <Parent>\n+ <Child key=\"0\">\n+ <Child key=\"1\">\n+`;\n+\n+exports[`TreeListContext owners state should remove an element from the owners list if it is unmounted: 1: initial state 1`] = `\n+Object {\n+ \"inspectedElementID\": null,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": null,\n+ \"selectedElementIndex\": null,\n+}\n+`;\n+\n+exports[`TreeListContext owners state should remove an element from the owners list if it is unmounted: 2: parent owners tree 1`] = `\n+Object {\n+ \"inspectedElementID\": 3,\n+ \"numElements\": 3,\n+ \"ownerFlatTree\": Array [\n+ Object {\n+ \"children\": Array [\n+ 4,\n+ 5,\n+ ],\n+ \"depth\": 0,\n+ \"displayName\": \"Parent\",\n+ \"hocDisplayNames\": null,\n+ \"id\": 3,\n+ \"isCollapsed\": false,\n+ \"key\": null,\n+ \"ownerID\": 2,\n+ \"parentID\": 2,\n+ \"type\": 5,\n+ \"weight\": 3,\n+ },\n+ Object {\n+ \"children\": Array [],\n+ \"depth\": 1,\n+ \"displayName\": \"Child\",\n+ \"hocDisplayNames\": null,\n+ \"id\": 4,\n+ \"isCollapsed\": false,\n+ \"key\": \"0\",\n+ \"ownerID\": 3,\n+ \"parentID\": 3,\n+ \"type\": 5,\n+ \"weight\": 1,\n+ },\n+ Object {\n+ \"children\": Array [],\n+ \"depth\": 1,\n+ \"displayName\": \"Child\",\n+ \"hocDisplayNames\": null,\n+ \"id\": 5,\n+ \"isCollapsed\": false,\n+ \"key\": \"1\",\n+ \"ownerID\": 3,\n+ \"parentID\": 3,\n+ \"type\": 5,\n+ \"weight\": 1,\n+ },\n+ ],\n+ \"ownerID\": 3,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 3,\n+ \"selectedElementIndex\": 0,\n+}\n+`;\n+\n+exports[`TreeListContext owners state should remove an element from the owners list if it is unmounted: 3: remove second child 1`] = `\n+Object {\n+ \"inspectedElementID\": 3,\n+ \"numElements\": 2,\n+ \"ownerFlatTree\": Array [\n+ Object {\n+ \"children\": Array [\n+ 4,\n+ ],\n+ \"depth\": 0,\n+ \"displayName\": \"Parent\",\n+ \"hocDisplayNames\": null,\n+ \"id\": 3,\n+ \"isCollapsed\": false,\n+ \"key\": null,\n+ \"ownerID\": 2,\n+ \"parentID\": 2,\n+ \"type\": 5,\n+ \"weight\": 2,\n+ },\n+ Object {\n+ \"children\": Array [],\n+ \"depth\": 1,\n+ \"displayName\": \"Child\",\n+ \"hocDisplayNames\": null,\n+ \"id\": 4,\n+ \"isCollapsed\": false,\n+ \"key\": \"0\",\n+ \"ownerID\": 3,\n+ \"parentID\": 3,\n+ \"type\": 5,\n+ \"weight\": 1,\n+ },\n+ ],\n+ \"ownerID\": 3,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 3,\n+ \"selectedElementIndex\": 0,\n+}\n+`;\n+\n+exports[`TreeListContext owners state should remove an element from the owners list if it is unmounted: 4: remove first child 1`] = `\n+Object {\n+ \"inspectedElementID\": 3,\n+ \"numElements\": 1,\n+ \"ownerFlatTree\": Array [\n+ Object {\n+ \"children\": Array [],\n+ \"depth\": 0,\n+ \"displayName\": \"Parent\",\n+ \"hocDisplayNames\": null,\n+ \"id\": 3,\n+ \"isCollapsed\": false,\n+ \"key\": null,\n+ \"ownerID\": 2,\n+ \"parentID\": 2,\n+ \"type\": 5,\n+ \"weight\": 1,\n+ },\n+ ],\n+ \"ownerID\": 3,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 3,\n+ \"selectedElementIndex\": 0,\n+}\n+`;\n+\n+exports[`TreeListContext owners state should support entering and existing the owners tree view: 0: mount 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ ▾ <Parent>\n+ <Child>\n+ <Child>\n+`;\n+\n+exports[`TreeListContext owners state should support entering and existing the owners tree view: 1: initial state 1`] = `\n+Object {\n+ \"inspectedElementID\": null,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": null,\n+ \"selectedElementIndex\": null,\n+}\n+`;\n+\n+exports[`TreeListContext owners state should support entering and existing the owners tree view: 2: parent owners tree 1`] = `\n+Object {\n+ \"inspectedElementID\": 3,\n+ \"numElements\": 3,\n+ \"ownerFlatTree\": Array [\n+ Object {\n+ \"children\": Array [\n+ 4,\n+ 5,\n+ ],\n+ \"depth\": 0,\n+ \"displayName\": \"Parent\",\n+ \"hocDisplayNames\": null,\n+ \"id\": 3,\n+ \"isCollapsed\": false,\n+ \"key\": null,\n+ \"ownerID\": 2,\n+ \"parentID\": 2,\n+ \"type\": 5,\n+ \"weight\": 3,\n+ },\n+ Object {\n+ \"children\": Array [],\n+ \"depth\": 1,\n+ \"displayName\": \"Child\",\n+ \"hocDisplayNames\": null,\n+ \"id\": 4,\n+ \"isCollapsed\": false,\n+ \"key\": null,\n+ \"ownerID\": 3,\n+ \"parentID\": 3,\n+ \"type\": 5,\n+ \"weight\": 1,\n+ },\n+ Object {\n+ \"children\": Array [],\n+ \"depth\": 1,\n+ \"displayName\": \"Child\",\n+ \"hocDisplayNames\": null,\n+ \"id\": 5,\n+ \"isCollapsed\": false,\n+ \"key\": null,\n+ \"ownerID\": 3,\n+ \"parentID\": 3,\n+ \"type\": 5,\n+ \"weight\": 1,\n+ },\n+ ],\n+ \"ownerID\": 3,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 3,\n+ \"selectedElementIndex\": 0,\n+}\n+`;\n+\n+exports[`TreeListContext owners state should support entering and existing the owners tree view: 3: final state 1`] = `\n+Object {\n+ \"inspectedElementID\": 3,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 3,\n+ \"selectedElementIndex\": 1,\n+}\n+`;\n+\n+exports[`TreeListContext search state should add newly mounted elements to the search results set if they match the current text: 0: mount 1`] = `\n+[root]\n+ <Foo>\n+ <Bar>\n+`;\n+\n+exports[`TreeListContext search state should add newly mounted elements to the search results set if they match the current text: 1: initial state 1`] = `\n+Object {\n+ \"inspectedElementID\": null,\n+ \"numElements\": 2,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": null,\n+ \"selectedElementIndex\": null,\n+}\n+`;\n+\n+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`] = `\n+Object {\n+ \"inspectedElementID\": 3,\n+ \"numElements\": 2,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": 0,\n+ \"searchResults\": Array [\n+ 3,\n+ ],\n+ \"searchText\": \"ba\",\n+ \"selectedElementID\": 3,\n+ \"selectedElementIndex\": 1,\n+}\n+`;\n+\n+exports[`TreeListContext search state should add newly mounted elements to the search results set if they match the current text: 3: mount Baz 1`] = `\n+Object {\n+ \"inspectedElementID\": 3,\n+ \"numElements\": 3,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": 0,\n+ \"searchResults\": Array [\n+ 3,\n+ 4,\n+ ],\n+ \"searchText\": \"ba\",\n+ \"selectedElementID\": 3,\n+ \"selectedElementIndex\": 1,\n+}\n+`;\n+\n+exports[`TreeListContext search state should find elements matching search text: 0: mount 1`] = `\n+[root]\n+ <Foo>\n+ <Bar>\n+ <Baz>\n+ <Qux> [withHOC]\n+`;\n+\n+exports[`TreeListContext search state should find elements matching search text: 1: initial state 1`] = `\n+Object {\n+ \"inspectedElementID\": null,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": null,\n+ \"selectedElementIndex\": null,\n+}\n+`;\n+\n+exports[`TreeListContext search state should find elements matching search text: 2: search for \"ba\" 1`] = `\n+Object {\n+ \"inspectedElementID\": 3,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": 0,\n+ \"searchResults\": Array [\n+ 3,\n+ 4,\n+ ],\n+ \"searchText\": \"ba\",\n+ \"selectedElementID\": 3,\n+ \"selectedElementIndex\": 1,\n+}\n+`;\n+\n+exports[`TreeListContext search state should find elements matching search text: 3: search for \"f\" 1`] = `\n+Object {\n+ \"inspectedElementID\": 2,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": 0,\n+ \"searchResults\": Array [\n+ 2,\n+ ],\n+ \"searchText\": \"f\",\n+ \"selectedElementID\": 2,\n+ \"selectedElementIndex\": 0,\n+}\n+`;\n+\n+exports[`TreeListContext search state should find elements matching search text: 4: search for \"y\" 1`] = `\n+Object {\n+ \"inspectedElementID\": 2,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"y\",\n+ \"selectedElementID\": 2,\n+ \"selectedElementIndex\": 0,\n+}\n+`;\n+\n+exports[`TreeListContext search state should find elements matching search text: 5: search for \"w\" 1`] = `\n+Object {\n+ \"inspectedElementID\": 5,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": 0,\n+ \"searchResults\": Array [\n+ 5,\n+ ],\n+ \"searchText\": \"w\",\n+ \"selectedElementID\": 5,\n+ \"selectedElementIndex\": 3,\n+}\n+`;\n+\n+exports[`TreeListContext search state should remove unmounted elements from the search results set: 0: mount 1`] = `\n+[root]\n+ <Foo>\n+ <Bar>\n+ <Baz>\n+`;\n+\n+exports[`TreeListContext search state should remove unmounted elements from the search results set: 1: initial state 1`] = `\n+Object {\n+ \"inspectedElementID\": null,\n+ \"numElements\": 3,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": null,\n+ \"selectedElementIndex\": null,\n+}\n+`;\n+\n+exports[`TreeListContext search state should remove unmounted elements from the search results set: 2: search for \"ba\" 1`] = `\n+Object {\n+ \"inspectedElementID\": 3,\n+ \"numElements\": 3,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": 0,\n+ \"searchResults\": Array [\n+ 3,\n+ 4,\n+ ],\n+ \"searchText\": \"ba\",\n+ \"selectedElementID\": 3,\n+ \"selectedElementIndex\": 1,\n+}\n+`;\n+\n+exports[`TreeListContext search state should remove unmounted elements from the search results set: 3: go to second result 1`] = `\n+Object {\n+ \"inspectedElementID\": 4,\n+ \"numElements\": 3,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": 1,\n+ \"searchResults\": Array [\n+ 3,\n+ 4,\n+ ],\n+ \"searchText\": \"ba\",\n+ \"selectedElementID\": 4,\n+ \"selectedElementIndex\": 2,\n+}\n+`;\n+\n+exports[`TreeListContext search state should remove unmounted elements from the search results set: 4: unmount Baz 1`] = `\n+Object {\n+ \"inspectedElementID\": null,\n+ \"numElements\": 2,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": 0,\n+ \"searchResults\": Array [\n+ 3,\n+ ],\n+ \"searchText\": \"ba\",\n+ \"selectedElementID\": null,\n+ \"selectedElementIndex\": null,\n+}\n+`;\n+\n+exports[`TreeListContext search state should select the next and previous items within the search results: 0: mount 1`] = `\n+[root]\n+ <Foo>\n+ <Baz>\n+ <Bar>\n+ <Baz>\n+`;\n+\n+exports[`TreeListContext search state should select the next and previous items within the search results: 1: initial state 1`] = `\n+Object {\n+ \"inspectedElementID\": null,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": null,\n+ \"selectedElementIndex\": null,\n+}\n+`;\n+\n+exports[`TreeListContext search state should select the next and previous items within the search results: 2: search for \"ba\" 1`] = `\n+Object {\n+ \"inspectedElementID\": 3,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": 0,\n+ \"searchResults\": Array [\n+ 3,\n+ 4,\n+ 5,\n+ ],\n+ \"searchText\": \"ba\",\n+ \"selectedElementID\": 3,\n+ \"selectedElementIndex\": 1,\n+}\n+`;\n+\n+exports[`TreeListContext search state should select the next and previous items within the search results: 3: go to second result 1`] = `\n+Object {\n+ \"inspectedElementID\": 4,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": 1,\n+ \"searchResults\": Array [\n+ 3,\n+ 4,\n+ 5,\n+ ],\n+ \"searchText\": \"ba\",\n+ \"selectedElementID\": 4,\n+ \"selectedElementIndex\": 2,\n+}\n+`;\n+\n+exports[`TreeListContext search state should select the next and previous items within the search results: 4: go to third result 1`] = `\n+Object {\n+ \"inspectedElementID\": 5,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": 2,\n+ \"searchResults\": Array [\n+ 3,\n+ 4,\n+ 5,\n+ ],\n+ \"searchText\": \"ba\",\n+ \"selectedElementID\": 5,\n+ \"selectedElementIndex\": 3,\n+}\n+`;\n+\n+exports[`TreeListContext search state should select the next and previous items within the search results: 5: go to second result 1`] = `\n+Object {\n+ \"inspectedElementID\": 4,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": 1,\n+ \"searchResults\": Array [\n+ 3,\n+ 4,\n+ 5,\n+ ],\n+ \"searchText\": \"ba\",\n+ \"selectedElementID\": 4,\n+ \"selectedElementIndex\": 2,\n+}\n+`;\n+\n+exports[`TreeListContext search state should select the next and previous items within the search results: 6: go to first result 1`] = `\n+Object {\n+ \"inspectedElementID\": 3,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": 0,\n+ \"searchResults\": Array [\n+ 3,\n+ 4,\n+ 5,\n+ ],\n+ \"searchText\": \"ba\",\n+ \"selectedElementID\": 3,\n+ \"selectedElementIndex\": 1,\n+}\n+`;\n+\n+exports[`TreeListContext search state should select the next and previous items within the search results: 7: wrap to last result 1`] = `\n+Object {\n+ \"inspectedElementID\": 5,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": 2,\n+ \"searchResults\": Array [\n+ 3,\n+ 4,\n+ 5,\n+ ],\n+ \"searchText\": \"ba\",\n+ \"selectedElementID\": 5,\n+ \"selectedElementIndex\": 3,\n+}\n+`;\n+\n+exports[`TreeListContext search state should select the next and previous items within the search results: 8: wrap to first result 1`] = `\n+Object {\n+ \"inspectedElementID\": 3,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": 0,\n+ \"searchResults\": Array [\n+ 3,\n+ 4,\n+ 5,\n+ ],\n+ \"searchText\": \"ba\",\n+ \"selectedElementID\": 3,\n+ \"selectedElementIndex\": 1,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should clear selection if the selected element is unmounted: 0: mount 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ ▾ <Parent>\n+ <Child>\n+ <Child>\n+`;\n+\n+exports[`TreeListContext tree state should clear selection if the selected element is unmounted: 1: initial state 1`] = `\n+Object {\n+ \"inspectedElementID\": null,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": null,\n+ \"selectedElementIndex\": null,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should clear selection if the selected element is unmounted: 2: select second child 1`] = `\n+Object {\n+ \"inspectedElementID\": 5,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 5,\n+ \"selectedElementIndex\": 3,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should clear selection if the selected element is unmounted: 3: remove children (parent should now be selected) 1`] = `\n+Object {\n+ \"inspectedElementID\": 3,\n+ \"numElements\": 2,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 3,\n+ \"selectedElementIndex\": 1,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should clear selection if the selected element is unmounted: 4: unmount root (nothing should be selected) 1`] = `\n+Object {\n+ \"inspectedElementID\": null,\n+ \"numElements\": 0,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": null,\n+ \"selectedElementIndex\": null,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should select child elements: 0: mount 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ ▾ <Parent>\n+ <Child>\n+ <Child>\n+ ▾ <Parent>\n+ <Child>\n+ <Child>\n+`;\n+\n+exports[`TreeListContext tree state should select child elements: 1: initial state 1`] = `\n+Object {\n+ \"inspectedElementID\": null,\n+ \"numElements\": 7,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": null,\n+ \"selectedElementIndex\": null,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should select child elements: 2: select first element 1`] = `\n+Object {\n+ \"inspectedElementID\": 2,\n+ \"numElements\": 7,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 2,\n+ \"selectedElementIndex\": 0,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should select child elements: 3: select Parent 1`] = `\n+Object {\n+ \"inspectedElementID\": 3,\n+ \"numElements\": 7,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 3,\n+ \"selectedElementIndex\": 1,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should select child elements: 4: select Child 1`] = `\n+Object {\n+ \"inspectedElementID\": 4,\n+ \"numElements\": 7,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 4,\n+ \"selectedElementIndex\": 2,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should select parent elements and then collapse: 0: mount 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ ▾ <Parent>\n+ <Child>\n+ <Child>\n+ ▾ <Parent>\n+ <Child>\n+ <Child>\n+`;\n+\n+exports[`TreeListContext tree state should select parent elements and then collapse: 1: initial state 1`] = `\n+Object {\n+ \"inspectedElementID\": null,\n+ \"numElements\": 7,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": null,\n+ \"selectedElementIndex\": null,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should select parent elements and then collapse: 2: select last child 1`] = `\n+Object {\n+ \"inspectedElementID\": 8,\n+ \"numElements\": 7,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 8,\n+ \"selectedElementIndex\": 6,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should select parent elements and then collapse: 3: select Parent 1`] = `\n+Object {\n+ \"inspectedElementID\": 6,\n+ \"numElements\": 7,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 6,\n+ \"selectedElementIndex\": 4,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should select parent elements and then collapse: 4: select Grandparent 1`] = `\n+Object {\n+ \"inspectedElementID\": 2,\n+ \"numElements\": 7,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 2,\n+ \"selectedElementIndex\": 0,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should select the next and previous elements in the tree: 0: mount 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ ▾ <Parent>\n+ <Child>\n+ <Child>\n+`;\n+\n+exports[`TreeListContext tree state should select the next and previous elements in the tree: 1: initial state 1`] = `\n+Object {\n+ \"inspectedElementID\": null,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": null,\n+ \"selectedElementIndex\": null,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should select the next and previous elements in the tree: 2: select first element 1`] = `\n+Object {\n+ \"inspectedElementID\": 2,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 2,\n+ \"selectedElementIndex\": 0,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should select the next and previous elements in the tree: 3: select element after (0) 1`] = `\n+Object {\n+ \"inspectedElementID\": 3,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 3,\n+ \"selectedElementIndex\": 1,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should select the next and previous elements in the tree: 3: select element after (1) 1`] = `\n+Object {\n+ \"inspectedElementID\": 4,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 4,\n+ \"selectedElementIndex\": 2,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should select the next and previous elements in the tree: 3: select element after (2) 1`] = `\n+Object {\n+ \"inspectedElementID\": 5,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 5,\n+ \"selectedElementIndex\": 3,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should select the next and previous elements in the tree: 4: select element before (1) 1`] = `\n+Object {\n+ \"inspectedElementID\": 2,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 2,\n+ \"selectedElementIndex\": 0,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should select the next and previous elements in the tree: 4: select element before (2) 1`] = `\n+Object {\n+ \"inspectedElementID\": 3,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 3,\n+ \"selectedElementIndex\": 1,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should select the next and previous elements in the tree: 4: select element before (3) 1`] = `\n+Object {\n+ \"inspectedElementID\": 4,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 4,\n+ \"selectedElementIndex\": 2,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should select the next and previous elements in the tree: 5: select previous wraps around to last 1`] = `\n+Object {\n+ \"inspectedElementID\": 5,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 5,\n+ \"selectedElementIndex\": 3,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should select the next and previous elements in the tree: 6: select next wraps around to first 1`] = `\n+Object {\n+ \"inspectedElementID\": 2,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 2,\n+ \"selectedElementIndex\": 0,\n+}\n+`;\ndiff --git a\/src\/__tests__\/bridge-test.js b\/src\/__tests__\/bridge-test.js\nnew file mode 100644\nindex 0000000000..fe89a6c2b1\n--- \/dev\/null\n+++ b\/src\/__tests__\/bridge-test.js\n@@ -0,0 +1,42 @@\n+\/\/ @flow\n+\n+describe('Bridge', () => {\n+ let Bridge;\n+\n+ beforeEach(() => {\n+ Bridge = require('src\/bridge').default;\n+ });\n+\n+ it('should shutdown properly', () => {\n+ const wall = {\n+ listen: jest.fn(() => () => {}),\n+ send: jest.fn(),\n+ };\n+ const bridge = new Bridge(wall);\n+\n+ \/\/ Check that we're wired up correctly.\n+ bridge.send('reloadAppForProfiling');\n+ jest.runAllTimers();\n+ expect(wall.send).toHaveBeenCalledWith('reloadAppForProfiling');\n+\n+ \/\/ Should flush pending messages and then shut down.\n+ wall.send.mockClear();\n+ bridge.send('update', '1');\n+ bridge.send('update', '2');\n+ bridge.shutdown();\n+ jest.runAllTimers();\n+ expect(wall.send).toHaveBeenCalledWith('update', '1');\n+ expect(wall.send).toHaveBeenCalledWith('update', '2');\n+ expect(wall.send).toHaveBeenCalledWith('shutdown');\n+\n+ \/\/ Verify that the Bridge doesn't send messages after shutdown.\n+ spyOn(console, 'warn');\n+ wall.send.mockClear();\n+ bridge.send('should not send');\n+ jest.runAllTimers();\n+ expect(wall.send).not.toHaveBeenCalled();\n+ expect(console.warn).toHaveBeenCalledWith(\n+ 'Cannot send message \"should not send\" through a Bridge that has been shutdown.'\n+ );\n+ });\n+});\ndiff --git a\/src\/__tests__\/console-test.js b\/src\/__tests__\/console-test.js\nnew file mode 100644\nindex 0000000000..a633e6f817\n--- \/dev\/null\n+++ b\/src\/__tests__\/console-test.js\n@@ -0,0 +1,333 @@\n+\/\/ @flow\n+\n+describe('console', () => {\n+ let React;\n+ let ReactDOM;\n+ let act;\n+ let fakeConsole;\n+ let mockError;\n+ let mockInfo;\n+ let mockLog;\n+ let mockWarn;\n+ let patchConsole;\n+ let unpatchConsole;\n+\n+ beforeEach(() => {\n+ const Console = require('..\/backend\/console');\n+ patchConsole = Console.patch;\n+ unpatchConsole = Console.unpatch;\n+\n+ const inject = global.__REACT_DEVTOOLS_GLOBAL_HOOK__.inject;\n+ global.__REACT_DEVTOOLS_GLOBAL_HOOK__.inject = internals => {\n+ inject(internals);\n+\n+ Console.registerRenderer(internals);\n+ };\n+\n+ React = require('react');\n+ ReactDOM = require('react-dom');\n+\n+ const utils = require('.\/utils');\n+ act = utils.act;\n+\n+ \/\/ Patch a fake console so we can verify with tests below.\n+ \/\/ Patching the real console is too complicated,\n+ \/\/ because Jest itself has hooks into it as does our test env setup.\n+ mockError = jest.fn();\n+ mockInfo = jest.fn();\n+ mockLog = jest.fn();\n+ mockWarn = jest.fn();\n+ fakeConsole = {\n+ error: mockError,\n+ info: mockInfo,\n+ log: mockLog,\n+ warn: mockWarn,\n+ };\n+\n+ Console.dangerous_setTargetConsoleForTesting(fakeConsole);\n+\n+ patchConsole();\n+ });\n+\n+ function normalizeCodeLocInfo(str) {\n+ return str && str.replace(\/\$at .+?:\\d+\$\/g, '(at **)');\n+ }\n+\n+ it('should not patch console methods that do not receive component stacks', () => {\n+ expect(fakeConsole.error).not.toBe(mockError);\n+ expect(fakeConsole.info).toBe(mockInfo);\n+ expect(fakeConsole.log).toBe(mockLog);\n+ expect(fakeConsole.warn).not.toBe(mockWarn);\n+ });\n+\n+ it('should only patch the console once', () => {\n+ const { error, warn } = fakeConsole;\n+\n+ patchConsole();\n+\n+ expect(fakeConsole.error).toBe(error);\n+ expect(fakeConsole.warn).toBe(warn);\n+ });\n+\n+ it('should un-patch when requested', () => {\n+ expect(fakeConsole.error).not.toBe(mockError);\n+ expect(fakeConsole.warn).not.toBe(mockWarn);\n+\n+ unpatchConsole();\n+\n+ expect(fakeConsole.error).toBe(mockError);\n+ expect(fakeConsole.warn).toBe(mockWarn);\n+ });\n+\n+ it('should pass through logs when there is no current fiber', () => {\n+ expect(mockLog).toHaveBeenCalledTimes(0);\n+ expect(mockWarn).toHaveBeenCalledTimes(0);\n+ expect(mockError).toHaveBeenCalledTimes(0);\n+ fakeConsole.log('log');\n+ fakeConsole.warn('warn');\n+ fakeConsole.error('error');\n+ expect(mockLog).toHaveBeenCalledTimes(1);\n+ expect(mockLog.mock.calls[0]).toHaveLength(1);\n+ expect(mockLog.mock.calls[0][0]).toBe('log');\n+ expect(mockWarn).toHaveBeenCalledTimes(1);\n+ expect(mockWarn.mock.calls[0]).toHaveLength(1);\n+ expect(mockWarn.mock.calls[0][0]).toBe('warn');\n+ expect(mockError).toHaveBeenCalledTimes(1);\n+ expect(mockError.mock.calls[0]).toHaveLength(1);\n+ expect(mockError.mock.calls[0][0]).toBe('error');\n+ });\n+\n+ it('should not append multiple stacks', () => {\n+ const Child = () => {\n+ fakeConsole.warn('warn\\n in Child (at fake.js:123)');\n+ fakeConsole.error('error', '\\n in Child (at fake.js:123)');\n+ return null;\n+ };\n+\n+ act(() => ReactDOM.render(<Child \/>, document.createElement('div')));\n+\n+ expect(mockWarn).toHaveBeenCalledTimes(1);\n+ expect(mockWarn.mock.calls[0]).toHaveLength(1);\n+ expect(mockWarn.mock.calls[0][0]).toBe(\n+ 'warn\\n in Child (at fake.js:123)'\n+ );\n+ expect(mockError).toHaveBeenCalledTimes(1);\n+ expect(mockError.mock.calls[0]).toHaveLength(2);\n+ expect(mockError.mock.calls[0][0]).toBe('error');\n+ expect(mockError.mock.calls[0][1]).toBe('\\n in Child (at fake.js:123)');\n+ });\n+\n+ it('should append component stacks to errors and warnings logged during render', () => {\n+ const Intermediate = ({ children }) => children;\n+ const Parent = () => (\n+ <Intermediate>\n+ <Child \/>\n+ <\/Intermediate>\n+ );\n+ const Child = () => {\n+ fakeConsole.error('error');\n+ fakeConsole.log('log');\n+ fakeConsole.warn('warn');\n+ return null;\n+ };\n+\n+ act(() => ReactDOM.render(<Parent \/>, document.createElement('div')));\n+\n+ expect(mockLog).toHaveBeenCalledTimes(1);\n+ expect(mockLog.mock.calls[0]).toHaveLength(1);\n+ expect(mockLog.mock.calls[0][0]).toBe('log');\n+ expect(mockWarn).toHaveBeenCalledTimes(1);\n+ expect(mockWarn.mock.calls[0]).toHaveLength(2);\n+ expect(mockWarn.mock.calls[0][0]).toBe('warn');\n+ expect(normalizeCodeLocInfo(mockWarn.mock.calls[0][1])).toEqual(\n+ '\\n in Child (at **)\\n in Parent (at **)'\n+ );\n+ expect(mockError).toHaveBeenCalledTimes(1);\n+ expect(mockError.mock.calls[0]).toHaveLength(2);\n+ expect(mockError.mock.calls[0][0]).toBe('error');\n+ expect(normalizeCodeLocInfo(mockError.mock.calls[0][1])).toBe(\n+ '\\n in Child (at **)\\n in Parent (at **)'\n+ );\n+ });\n+\n+ it('should append component stacks to errors and warnings logged from effects', () => {\n+ const Intermediate = ({ children }) => children;\n+ const Parent = () => (\n+ <Intermediate>\n+ <Child \/>\n+ <\/Intermediate>\n+ );\n+ const Child = () => {\n+ React.useLayoutEffect(() => {\n+ fakeConsole.error('active error');\n+ fakeConsole.log('active log');\n+ fakeConsole.warn('active warn');\n+ });\n+ React.useEffect(() => {\n+ fakeConsole.error('passive error');\n+ fakeConsole.log('passive log');\n+ fakeConsole.warn('passive warn');\n+ });\n+ return null;\n+ };\n+\n+ act(() => ReactDOM.render(<Parent \/>, document.createElement('div')));\n+\n+ expect(mockLog).toHaveBeenCalledTimes(2);\n+ expect(mockLog.mock.calls[0]).toHaveLength(1);\n+ expect(mockLog.mock.calls[0][0]).toBe('active log');\n+ expect(mockLog.mock.calls[1]).toHaveLength(1);\n+ expect(mockLog.mock.calls[1][0]).toBe('passive log');\n+ expect(mockWarn).toHaveBeenCalledTimes(2);\n+ expect(mockWarn.mock.calls[0]).toHaveLength(2);\n+ expect(mockWarn.mock.calls[0][0]).toBe('active warn');\n+ expect(normalizeCodeLocInfo(mockWarn.mock.calls[0][1])).toEqual(\n+ '\\n in Child (at **)\\n in Parent (at **)'\n+ );\n+ expect(mockWarn.mock.calls[1]).toHaveLength(2);\n+ expect(mockWarn.mock.calls[1][0]).toBe('passive warn');\n+ expect(normalizeCodeLocInfo(mockWarn.mock.calls[1][1])).toEqual(\n+ '\\n in Child (at **)\\n in Parent (at **)'\n+ );\n+ expect(mockError).toHaveBeenCalledTimes(2);\n+ expect(mockError.mock.calls[0]).toHaveLength(2);\n+ expect(mockError.mock.calls[0][0]).toBe('active error');\n+ expect(normalizeCodeLocInfo(mockError.mock.calls[0][1])).toBe(\n+ '\\n in Child (at **)\\n in Parent (at **)'\n+ );\n+ expect(mockError.mock.calls[1]).toHaveLength(2);\n+ expect(mockError.mock.calls[1][0]).toBe('passive error');\n+ expect(normalizeCodeLocInfo(mockError.mock.calls[1][1])).toBe(\n+ '\\n in Child (at **)\\n in Parent (at **)'\n+ );\n+ });\n+\n+ it('should append component stacks to errors and warnings logged from commit hooks', () => {\n+ const Intermediate = ({ children }) => children;\n+ const Parent = () => (\n+ <Intermediate>\n+ <Child \/>\n+ <\/Intermediate>\n+ );\n+ class Child extends React.Component<any> {\n+ componentDidMount() {\n+ fakeConsole.error('didMount error');\n+ fakeConsole.log('didMount log');\n+ fakeConsole.warn('didMount warn');\n+ }\n+ componentDidUpdate() {\n+ fakeConsole.error('didUpdate error');\n+ fakeConsole.log('didUpdate log');\n+ fakeConsole.warn('didUpdate warn');\n+ }\n+ render() {\n+ return null;\n+ }\n+ }\n+\n+ const container = document.createElement('div');\n+ act(() => ReactDOM.render(<Parent \/>, container));\n+ act(() => ReactDOM.render(<Parent \/>, container));\n+\n+ expect(mockLog).toHaveBeenCalledTimes(2);\n+ expect(mockLog.mock.calls[0]).toHaveLength(1);\n+ expect(mockLog.mock.calls[0][0]).toBe('didMount log');\n+ expect(mockLog.mock.calls[1]).toHaveLength(1);\n+ expect(mockLog.mock.calls[1][0]).toBe('didUpdate log');\n+ expect(mockWarn).toHaveBeenCalledTimes(2);\n+ expect(mockWarn.mock.calls[0]).toHaveLength(2);\n+ expect(mockWarn.mock.calls[0][0]).toBe('didMount warn');\n+ expect(normalizeCodeLocInfo(mockWarn.mock.calls[0][1])).toEqual(\n+ '\\n in Child (at **)\\n in Parent (at **)'\n+ );\n+ expect(mockWarn.mock.calls[1]).toHaveLength(2);\n+ expect(mockWarn.mock.calls[1][0]).toBe('didUpdate warn');\n+ expect(normalizeCodeLocInfo(mockWarn.mock.calls[1][1])).toEqual(\n+ '\\n in Child (at **)\\n in Parent (at **)'\n+ );\n+ expect(mockError).toHaveBeenCalledTimes(2);\n+ expect(mockError.mock.calls[0]).toHaveLength(2);\n+ expect(mockError.mock.calls[0][0]).toBe('didMount error');\n+ expect(normalizeCodeLocInfo(mockError.mock.calls[0][1])).toBe(\n+ '\\n in Child (at **)\\n in Parent (at **)'\n+ );\n+ expect(mockError.mock.calls[1]).toHaveLength(2);\n+ expect(mockError.mock.calls[1][0]).toBe('didUpdate error');\n+ expect(normalizeCodeLocInfo(mockError.mock.calls[1][1])).toBe(\n+ '\\n in Child (at **)\\n in Parent (at **)'\n+ );\n+ });\n+\n+ it('should append component stacks to errors and warnings logged from gDSFP', () => {\n+ const Intermediate = ({ children }) => children;\n+ const Parent = () => (\n+ <Intermediate>\n+ <Child \/>\n+ <\/Intermediate>\n+ );\n+ class Child extends React.Component<any, any> {\n+ state = {};\n+ static getDerivedStateFromProps() {\n+ fakeConsole.error('error');\n+ fakeConsole.log('log');\n+ fakeConsole.warn('warn');\n+ return null;\n+ }\n+ render() {\n+ return null;\n+ }\n+ }\n+\n+ act(() => ReactDOM.render(<Parent \/>, document.createElement('div')));\n+\n+ expect(mockLog).toHaveBeenCalledTimes(1);\n+ expect(mockLog.mock.calls[0]).toHaveLength(1);\n+ expect(mockLog.mock.calls[0][0]).toBe('log');\n+ expect(mockWarn).toHaveBeenCalledTimes(1);\n+ expect(mockWarn.mock.calls[0]).toHaveLength(2);\n+ expect(mockWarn.mock.calls[0][0]).toBe('warn');\n+ expect(normalizeCodeLocInfo(mockWarn.mock.calls[0][1])).toEqual(\n+ '\\n in Child (at **)\\n in Parent (at **)'\n+ );\n+ expect(mockError).toHaveBeenCalledTimes(1);\n+ expect(mockError.mock.calls[0]).toHaveLength(2);\n+ expect(mockError.mock.calls[0][0]).toBe('error');\n+ expect(normalizeCodeLocInfo(mockError.mock.calls[0][1])).toBe(\n+ '\\n in Child (at **)\\n in Parent (at **)'\n+ );\n+ });\n+\n+ it('should append stacks after being uninstalled and reinstalled', () => {\n+ const Child = () => {\n+ fakeConsole.warn('warn');\n+ fakeConsole.error('error');\n+ return null;\n+ };\n+\n+ unpatchConsole();\n+ act(() => ReactDOM.render(<Child \/>, document.createElement('div')));\n+\n+ expect(mockWarn).toHaveBeenCalledTimes(1);\n+ expect(mockWarn.mock.calls[0]).toHaveLength(1);\n+ expect(mockWarn.mock.calls[0][0]).toBe('warn');\n+ expect(mockError).toHaveBeenCalledTimes(1);\n+ expect(mockError.mock.calls[0]).toHaveLength(1);\n+ expect(mockError.mock.calls[0][0]).toBe('error');\n+\n+ patchConsole();\n+ act(() => ReactDOM.render(<Child \/>, document.createElement('div')));\n+\n+ expect(mockWarn).toHaveBeenCalledTimes(2);\n+ expect(mockWarn.mock.calls[1]).toHaveLength(2);\n+ expect(mockWarn.mock.calls[1][0]).toBe('warn');\n+ expect(normalizeCodeLocInfo(mockWarn.mock.calls[1][1])).toEqual(\n+ '\\n in Child (at **)'\n+ );\n+ expect(mockError).toHaveBeenCalledTimes(2);\n+ expect(mockError.mock.calls[1]).toHaveLength(2);\n+ expect(mockError.mock.calls[1][0]).toBe('error');\n+ expect(normalizeCodeLocInfo(mockError.mock.calls[1][1])).toBe(\n+ '\\n in Child (at **)'\n+ );\n+ });\n+});\ndiff --git a\/src\/__tests__\/inspectedElementContext-test.js b\/src\/__tests__\/inspectedElementContext-test.js\nnew file mode 100644\nindex 0000000000..2cf1ed8632\n--- \/dev\/null\n+++ b\/src\/__tests__\/inspectedElementContext-test.js\n@@ -0,0 +1,859 @@\n+\/\/ @flow\n+\n+import typeof ReactTestRenderer from 'react-test-renderer';\n+import type { GetInspectedElementPath } from 'src\/devtools\/views\/Components\/InspectedElementContext';\n+import type { FrontendBridge } from 'src\/bridge';\n+import type Store from 'src\/devtools\/store';\n+\n+describe('InspectedElementContext', () => {\n+ let React;\n+ let ReactDOM;\n+ let TestRenderer: ReactTestRenderer;\n+ let bridge: FrontendBridge;\n+ let store: Store;\n+ let meta;\n+ let utils;\n+\n+ let BridgeContext;\n+ let InspectedElementContext;\n+ let InspectedElementContextController;\n+ let StoreContext;\n+ let TestUtils;\n+ let TreeContextController;\n+\n+ beforeEach(() => {\n+ utils = require('.\/utils');\n+ utils.beforeEachProfiling();\n+\n+ meta = require('src\/hydration').meta;\n+\n+ bridge = global.bridge;\n+ store = global.store;\n+ store.collapseNodesByDefault = false;\n+\n+ React = require('react');\n+ ReactDOM = require('react-dom');\n+ TestUtils = require('react-dom\/test-utils');\n+ TestRenderer = utils.requireTestRenderer();\n+\n+ BridgeContext = require('src\/devtools\/views\/context').BridgeContext;\n+ InspectedElementContext = require('src\/devtools\/views\/Components\/InspectedElementContext')\n+ .InspectedElementContext;\n+ InspectedElementContextController = require('src\/devtools\/views\/Components\/InspectedElementContext')\n+ .InspectedElementContextController;\n+ StoreContext = require('src\/devtools\/views\/context').StoreContext;\n+ TreeContextController = require('src\/devtools\/views\/Components\/TreeContext')\n+ .TreeContextController;\n+ });\n+\n+ const Contexts = ({\n+ children,\n+ defaultSelectedElementID = null,\n+ defaultSelectedElementIndex = null,\n+ }) => (\n+ <BridgeContext.Provider value={bridge}>\n+ <StoreContext.Provider value={store}>\n+ <TreeContextController\n+ defaultSelectedElementID={defaultSelectedElementID}\n+ defaultSelectedElementIndex={defaultSelectedElementIndex}\n+ >\n+ <InspectedElementContextController>\n+ {children}\n+ <\/InspectedElementContextController>\n+ <\/TreeContextController>\n+ <\/StoreContext.Provider>\n+ <\/BridgeContext.Provider>\n+ );\n+\n+ it('should inspect the currently selected element', async done => {\n+ const Example = () => {\n+ const [count] = React.useState(1);\n+ return count;\n+ };\n+\n+ const container = document.createElement('div');\n+ await utils.actAsync(() =>\n+ ReactDOM.render(<Example a={1} b=\"abc\" \/>, container)\n+ );\n+\n+ const id = ((store.getElementIDAtIndex(0): any): number);\n+\n+ let didFinish = false;\n+\n+ function Suspender({ target }) {\n+ const { getInspectedElement } = React.useContext(InspectedElementContext);\n+ const inspectedElement = getInspectedElement(id);\n+ expect(inspectedElement).toMatchSnapshot(`1: Inspected element ${id}`);\n+ didFinish = true;\n+ return null;\n+ }\n+\n+ await utils.actAsync(\n+ () =>\n+ TestRenderer.create(\n+ <Contexts\n+ defaultSelectedElementID={id}\n+ defaultSelectedElementIndex={0}\n+ >\n+ <React.Suspense fallback={null}>\n+ <Suspender target={id} \/>\n+ <\/React.Suspense>\n+ <\/Contexts>\n+ ),\n+ false\n+ );\n+ expect(didFinish).toBe(true);\n+\n+ done();\n+ });\n+\n+ it('should poll for updates for the currently selected element', async done => {\n+ const Example = () => null;\n+\n+ const container = document.createElement('div');\n+ await utils.actAsync(\n+ () => ReactDOM.render(<Example a={1} b=\"abc\" \/>, container),\n+ false\n+ );\n+\n+ const id = ((store.getElementIDAtIndex(0): any): number);\n+\n+ let inspectedElement = null;\n+\n+ function Suspender({ target }) {\n+ const { getInspectedElement } = React.useContext(InspectedElementContext);\n+ inspectedElement = getInspectedElement(id);\n+ return null;\n+ }\n+\n+ let renderer;\n+\n+ await utils.actAsync(() => {\n+ renderer = TestRenderer.create(\n+ <Contexts defaultSelectedElementID={id} defaultSelectedElementIndex={0}>\n+ <React.Suspense fallback={null}>\n+ <Suspender target={id} \/>\n+ <\/React.Suspense>\n+ <\/Contexts>\n+ );\n+ }, false);\n+ expect(inspectedElement).toMatchSnapshot('1: initial render');\n+\n+ await utils.actAsync(\n+ () => ReactDOM.render(<Example a={2} b=\"def\" \/>, container),\n+ false\n+ );\n+\n+ inspectedElement = null;\n+ await utils.actAsync(\n+ () =>\n+ renderer.update(\n+ <Contexts\n+ defaultSelectedElementID={id}\n+ defaultSelectedElementIndex={0}\n+ >\n+ <React.Suspense fallback={null}>\n+ <Suspender target={id} \/>\n+ <\/React.Suspense>\n+ <\/Contexts>\n+ ),\n+ false\n+ );\n+ expect(inspectedElement).toMatchSnapshot('2: updated state');\n+\n+ done();\n+ });\n+\n+ it('should not re-render a function with hooks if it did not update since it was last inspected', async done => {\n+ let targetRenderCount = 0;\n+\n+ const Wrapper = ({ children }) => children;\n+ const Target = React.memo(props => {\n+ targetRenderCount++;\n+ React.useState(0);\n+ return null;\n+ });\n+\n+ const container = document.createElement('div');\n+ await utils.actAsync(() =>\n+ ReactDOM.render(\n+ <Wrapper>\n+ <Target a={1} b=\"abc\" \/>\n+ <\/Wrapper>,\n+ container\n+ )\n+ );\n+\n+ const id = ((store.getElementIDAtIndex(1): any): number);\n+\n+ let inspectedElement = null;\n+\n+ function Suspender({ target }) {\n+ const { getInspectedElement } = React.useContext(InspectedElementContext);\n+ inspectedElement = getInspectedElement(target);\n+ return null;\n+ }\n+\n+ targetRenderCount = 0;\n+\n+ let renderer;\n+ await utils.actAsync(\n+ () =>\n+ (renderer = TestRenderer.create(\n+ <Contexts\n+ defaultSelectedElementID={id}\n+ defaultSelectedElementIndex={1}\n+ >\n+ <React.Suspense fallback={null}>\n+ <Suspender target={id} \/>\n+ <\/React.Suspense>\n+ <\/Contexts>\n+ )),\n+ false\n+ );\n+ expect(targetRenderCount).toBe(1);\n+ expect(inspectedElement).toMatchSnapshot('1: initial render');\n+\n+ const initialInspectedElement = inspectedElement;\n+\n+ targetRenderCount = 0;\n+ inspectedElement = null;\n+ await utils.actAsync(\n+ () =>\n+ renderer.update(\n+ <Contexts\n+ defaultSelectedElementID={id}\n+ defaultSelectedElementIndex={1}\n+ >\n+ <React.Suspense fallback={null}>\n+ <Suspender target={id} \/>\n+ <\/React.Suspense>\n+ <\/Contexts>\n+ ),\n+ false\n+ );\n+ expect(targetRenderCount).toBe(0);\n+ expect(inspectedElement).toEqual(initialInspectedElement);\n+\n+ targetRenderCount = 0;\n+\n+ await utils.actAsync(\n+ () =>\n+ ReactDOM.render(\n+ <Wrapper>\n+ <Target a={2} b=\"def\" \/>\n+ <\/Wrapper>,\n+ container\n+ ),\n+ false\n+ );\n+\n+ \/\/ Target should have been rendered once (by ReactDOM) and once by DevTools for inspection.\n+ expect(targetRenderCount).toBe(2);\n+ expect(inspectedElement).toMatchSnapshot('2: updated state');\n+\n+ done();\n+ });\n+\n+ it('should temporarily disable console logging when re-running a component to inspect its hooks', async done => {\n+ let targetRenderCount = 0;\n+\n+ const errorSpy = ((console: any).error = jest.fn());\n+ const infoSpy = ((console: any).info = jest.fn());\n+ const logSpy = ((console: any).log = jest.fn());\n+ const warnSpy = ((console: any).warn = jest.fn());\n+\n+ const Target = React.memo(props => {\n+ targetRenderCount++;\n+ console.error('error');\n+ console.info('info');\n+ console.log('log');\n+ console.warn('warn');\n+ React.useState(0);\n+ return null;\n+ });\n+\n+ const container = document.createElement('div');\n+ await utils.actAsync(() =>\n+ ReactDOM.render(<Target a={1} b=\"abc\" \/>, container)\n+ );\n+\n+ expect(targetRenderCount).toBe(1);\n+ expect(errorSpy).toHaveBeenCalledTimes(1);\n+ expect(errorSpy).toHaveBeenCalledWith('error');\n+ expect(infoSpy).toHaveBeenCalledTimes(1);\n+ expect(infoSpy).toHaveBeenCalledWith('info');\n+ expect(logSpy).toHaveBeenCalledTimes(1);\n+ expect(logSpy).toHaveBeenCalledWith('log');\n+ expect(warnSpy).toHaveBeenCalledTimes(1);\n+ expect(warnSpy).toHaveBeenCalledWith('warn');\n+\n+ const id = ((store.getElementIDAtIndex(0): any): number);\n+\n+ let inspectedElement = null;\n+\n+ function Suspender({ target }) {\n+ const { getInspectedElement } = React.useContext(InspectedElementContext);\n+ inspectedElement = getInspectedElement(target);\n+ return null;\n+ }\n+\n+ await utils.actAsync(\n+ () =>\n+ TestRenderer.create(\n+ <Contexts\n+ defaultSelectedElementID={id}\n+ defaultSelectedElementIndex={1}\n+ >\n+ <React.Suspense fallback={null}>\n+ <Suspender target={id} \/>\n+ <\/React.Suspense>\n+ <\/Contexts>\n+ ),\n+ false\n+ );\n+\n+ expect(inspectedElement).not.toBe(null);\n+ expect(targetRenderCount).toBe(2);\n+ expect(errorSpy).toHaveBeenCalledTimes(1);\n+ expect(infoSpy).toHaveBeenCalledTimes(1);\n+ expect(logSpy).toHaveBeenCalledTimes(1);\n+ expect(warnSpy).toHaveBeenCalledTimes(1);\n+\n+ done();\n+ });\n+\n+ it('should support simple data types', async done => {\n+ const Example = () => null;\n+\n+ const container = document.createElement('div');\n+ await utils.actAsync(() =>\n+ ReactDOM.render(\n+ <Example\n+ boolean_false={false}\n+ boolean_true={true}\n+ infinity={Infinity}\n+ integer_zero={0}\n+ integer_one={1}\n+ float={1.23}\n+ string=\"abc\"\n+ string_empty=\"\"\n+ nan={NaN}\n+ value_null={null}\n+ value_undefined={undefined}\n+ \/>,\n+ container\n+ )\n+ );\n+\n+ const id = ((store.getElementIDAtIndex(0): any): number);\n+ let inspectedElement = null;\n+\n+ function Suspender({ target }) {\n+ const { getInspectedElement } = React.useContext(InspectedElementContext);\n+ inspectedElement = getInspectedElement(id);\n+ return null;\n+ }\n+\n+ await utils.actAsync(\n+ () =>\n+ TestRenderer.create(\n+ <Contexts\n+ defaultSelectedElementID={id}\n+ defaultSelectedElementIndex={0}\n+ >\n+ <React.Suspense fallback={null}>\n+ <Suspender target={id} \/>\n+ <\/React.Suspense>\n+ <\/Contexts>\n+ ),\n+ false\n+ );\n+\n+ expect(inspectedElement).not.toBeNull();\n+ expect(inspectedElement).toMatchSnapshot('1: Initial inspection');\n+\n+ const { props } = (inspectedElement: any);\n+ expect(props.boolean_false).toBe(false);\n+ expect(props.boolean_true).toBe(true);\n+ expect(Number.isFinite(props.infinity)).toBe(false);\n+ expect(props.integer_zero).toEqual(0);\n+ expect(props.integer_one).toEqual(1);\n+ expect(props.float).toEqual(1.23);\n+ expect(props.string).toEqual('abc');\n+ expect(props.string_empty).toEqual('');\n+ expect(props.nan).toBeNaN();\n+ expect(props.value_null).toBeNull();\n+ expect(props.value_undefined).toBeUndefined();\n+\n+ done();\n+ });\n+\n+ it('should support complex data types', async done => {\n+ const Example = () => null;\n+\n+ const div = document.createElement('div');\n+ const exmapleFunction = () => {};\n+ const typedArray = new Uint8Array(3);\n+\n+ const container = document.createElement('div');\n+ await utils.actAsync(() =>\n+ ReactDOM.render(\n+ <Example\n+ html_element={div}\n+ fn={exmapleFunction}\n+ symbol={Symbol('symbol')}\n+ react_element={<span \/>}\n+ array_buffer={typedArray.buffer}\n+ typed_array={typedArray}\n+ date={new Date()}\n+ \/>,\n+ container\n+ )\n+ );\n+\n+ const id = ((store.getElementIDAtIndex(0): any): number);\n+\n+ let inspectedElement = null;\n+\n+ function Suspender({ target }) {\n+ const { getInspectedElement } = React.useContext(InspectedElementContext);\n+ inspectedElement = getInspectedElement(id);\n+ return null;\n+ }\n+\n+ await utils.actAsync(\n+ () =>\n+ TestRenderer.create(\n+ <Contexts\n+ defaultSelectedElementID={id}\n+ defaultSelectedElementIndex={0}\n+ >\n+ <React.Suspense fallback={null}>\n+ <Suspender target={id} \/>\n+ <\/React.Suspense>\n+ <\/Contexts>\n+ ),\n+ false\n+ );\n+\n+ expect(inspectedElement).not.toBeNull();\n+ expect(inspectedElement).toMatchSnapshot(`1: Inspected element ${id}`);\n+\n+ const {\n+ html_element,\n+ fn,\n+ symbol,\n+ react_element,\n+ array_buffer,\n+ typed_array,\n+ date,\n+ } = (inspectedElement: any).props;\n+ expect(html_element[meta.inspectable]).toBe(false);\n+ expect(html_element[meta.name]).toBe('DIV');\n+ expect(html_element[meta.type]).toBe('html_element');\n+ expect(fn[meta.inspectable]).toBe(false);\n+ expect(fn[meta.name]).toBe('exmapleFunction');\n+ expect(fn[meta.type]).toBe('function');\n+ expect(symbol[meta.inspectable]).toBe(false);\n+ expect(symbol[meta.name]).toBe('Symbol(symbol)');\n+ expect(symbol[meta.type]).toBe('symbol');\n+ expect(react_element[meta.inspectable]).toBe(false);\n+ expect(react_element[meta.name]).toBe('span');\n+ expect(react_element[meta.type]).toBe('react_element');\n+ expect(array_buffer[meta.size]).toBe(3);\n+ expect(array_buffer[meta.inspectable]).toBe(false);\n+ expect(array_buffer[meta.name]).toBe('ArrayBuffer');\n+ expect(array_buffer[meta.type]).toBe('array_buffer');\n+ expect(typed_array[meta.size]).toBe(3);\n+ expect(typed_array[meta.inspectable]).toBe(false);\n+ expect(typed_array[meta.name]).toBe('Uint8Array');\n+ expect(typed_array[meta.type]).toBe('typed_array');\n+ expect(date[meta.inspectable]).toBe(false);\n+ expect(date[meta.type]).toBe('date');\n+\n+ done();\n+ });\n+\n+ it('should support custom objects with enumerable properties and getters', async done => {\n+ class CustomData {\n+ _number = 42;\n+ get number() {\n+ return this._number;\n+ }\n+ set number(value) {\n+ this._number = value;\n+ }\n+ }\n+\n+ const descriptor = ((Object.getOwnPropertyDescriptor(\n+ CustomData.prototype,\n+ 'number'\n+ ): any): PropertyDescriptor<number>);\n+ descriptor.enumerable = true;\n+ Object.defineProperty(CustomData.prototype, 'number', descriptor);\n+\n+ const Example = () => null;\n+\n+ const container = document.createElement('div');\n+ await utils.actAsync(() =>\n+ ReactDOM.render(<Example data={new CustomData()} \/>, container)\n+ );\n+\n+ const id = ((store.getElementIDAtIndex(0): any): number);\n+\n+ let didFinish = false;\n+\n+ function Suspender({ target }) {\n+ const { getInspectedElement } = React.useContext(InspectedElementContext);\n+ const inspectedElement = getInspectedElement(id);\n+ expect(inspectedElement).toMatchSnapshot(`1: Inspected element ${id}`);\n+ didFinish = true;\n+ return null;\n+ }\n+\n+ await utils.actAsync(\n+ () =>\n+ TestRenderer.create(\n+ <Contexts\n+ defaultSelectedElementID={id}\n+ defaultSelectedElementIndex={0}\n+ >\n+ <React.Suspense fallback={null}>\n+ <Suspender target={id} \/>\n+ <\/React.Suspense>\n+ <\/Contexts>\n+ ),\n+ false\n+ );\n+ expect(didFinish).toBe(true);\n+\n+ done();\n+ });\n+\n+ it('should not dehydrate nested values until explicitly requested', async done => {\n+ const Example = () => {\n+ const [state] = React.useState({\n+ foo: {\n+ bar: {\n+ baz: 'hi',\n+ },\n+ },\n+ });\n+\n+ return state.foo.bar.baz;\n+ };\n+\n+ const container = document.createElement('div');\n+ await utils.actAsync(() =>\n+ ReactDOM.render(\n+ <Example\n+ nestedObject={{\n+ a: {\n+ b: {\n+ c: [\n+ {\n+ d: {\n+ e: {},\n+ },\n+ },\n+ ],\n+ },\n+ },\n+ }}\n+ \/>,\n+ container\n+ )\n+ );\n+\n+ const id = ((store.getElementIDAtIndex(0): any): number);\n+\n+ let getInspectedElementPath: GetInspectedElementPath = ((null: any): GetInspectedElementPath);\n+ let inspectedElement = null;\n+\n+ function Suspender({ target }) {\n+ const context = React.useContext(InspectedElementContext);\n+ getInspectedElementPath = context.getInspectedElementPath;\n+ inspectedElement = context.getInspectedElement(target);\n+ return null;\n+ }\n+\n+ await utils.actAsync(\n+ () =>\n+ TestRenderer.create(\n+ <Contexts\n+ defaultSelectedElementID={id}\n+ defaultSelectedElementIndex={0}\n+ >\n+ <React.Suspense fallback={null}>\n+ <Suspender target={id} \/>\n+ <\/React.Suspense>\n+ <\/Contexts>\n+ ),\n+ false\n+ );\n+ expect(getInspectedElementPath).not.toBeNull();\n+ expect(inspectedElement).not.toBeNull();\n+ expect(inspectedElement).toMatchSnapshot('1: Initially inspect element');\n+\n+ inspectedElement = null;\n+ TestUtils.act(() => {\n+ TestRenderer.act(() => {\n+ getInspectedElementPath(id, ['props', 'nestedObject', 'a']);\n+ jest.runOnlyPendingTimers();\n+ });\n+ });\n+ expect(inspectedElement).not.toBeNull();\n+ expect(inspectedElement).toMatchSnapshot('2: Inspect props.nestedObject.a');\n+\n+ inspectedElement = null;\n+ TestUtils.act(() => {\n+ TestRenderer.act(() => {\n+ getInspectedElementPath(id, ['props', 'nestedObject', 'a', 'b', 'c']);\n+ jest.runOnlyPendingTimers();\n+ });\n+ });\n+ expect(inspectedElement).not.toBeNull();\n+ expect(inspectedElement).toMatchSnapshot(\n+ '3: Inspect props.nestedObject.a.b.c'\n+ );\n+\n+ inspectedElement = null;\n+ TestUtils.act(() => {\n+ TestRenderer.act(() => {\n+ getInspectedElementPath(id, [\n+ 'props',\n+ 'nestedObject',\n+ 'a',\n+ 'b',\n+ 'c',\n+ 0,\n+ 'd',\n+ ]);\n+ jest.runOnlyPendingTimers();\n+ });\n+ });\n+ expect(inspectedElement).not.toBeNull();\n+ expect(inspectedElement).toMatchSnapshot(\n+ '4: Inspect props.nestedObject.a.b.c.0.d'\n+ );\n+\n+ inspectedElement = null;\n+ TestUtils.act(() => {\n+ TestRenderer.act(() => {\n+ getInspectedElementPath(id, ['hooks', 0, 'value']);\n+ jest.runOnlyPendingTimers();\n+ });\n+ });\n+ expect(inspectedElement).not.toBeNull();\n+ expect(inspectedElement).toMatchSnapshot('5: Inspect hooks.0.value');\n+\n+ inspectedElement = null;\n+ TestUtils.act(() => {\n+ TestRenderer.act(() => {\n+ getInspectedElementPath(id, ['hooks', 0, 'value', 'foo', 'bar']);\n+ jest.runOnlyPendingTimers();\n+ });\n+ });\n+ expect(inspectedElement).not.toBeNull();\n+ expect(inspectedElement).toMatchSnapshot(\n+ '6: Inspect hooks.0.value.foo.bar'\n+ );\n+\n+ done();\n+ });\n+\n+ it('should include updates for nested values that were previously hydrated', async done => {\n+ const Example = () => null;\n+\n+ const container = document.createElement('div');\n+ await utils.actAsync(() =>\n+ ReactDOM.render(\n+ <Example\n+ nestedObject={{\n+ a: {\n+ value: 1,\n+ b: {\n+ value: 1,\n+ },\n+ },\n+ c: {\n+ value: 1,\n+ d: {\n+ value: 1,\n+ e: {\n+ value: 1,\n+ },\n+ },\n+ },\n+ }}\n+ \/>,\n+ container\n+ )\n+ );\n+\n+ const id = ((store.getElementIDAtIndex(0): any): number);\n+\n+ let getInspectedElementPath: GetInspectedElementPath = ((null: any): GetInspectedElementPath);\n+ let inspectedElement = null;\n+\n+ function Suspender({ target }) {\n+ const context = React.useContext(InspectedElementContext);\n+ getInspectedElementPath = context.getInspectedElementPath;\n+ inspectedElement = context.getInspectedElement(id);\n+ return null;\n+ }\n+\n+ await utils.actAsync(\n+ () =>\n+ TestRenderer.create(\n+ <Contexts\n+ defaultSelectedElementID={id}\n+ defaultSelectedElementIndex={0}\n+ >\n+ <React.Suspense fallback={null}>\n+ <Suspender target={id} \/>\n+ <\/React.Suspense>\n+ <\/Contexts>\n+ ),\n+ false\n+ );\n+ expect(getInspectedElementPath).not.toBeNull();\n+ expect(inspectedElement).not.toBeNull();\n+ expect(inspectedElement).toMatchSnapshot('1: Initially inspect element');\n+\n+ inspectedElement = null;\n+ TestRenderer.act(() => {\n+ getInspectedElementPath(id, ['props', 'nestedObject', 'a']);\n+ jest.runOnlyPendingTimers();\n+ });\n+ expect(inspectedElement).not.toBeNull();\n+ expect(inspectedElement).toMatchSnapshot('2: Inspect props.nestedObject.a');\n+\n+ inspectedElement = null;\n+ TestRenderer.act(() => {\n+ getInspectedElementPath(id, ['props', 'nestedObject', 'c']);\n+ jest.runOnlyPendingTimers();\n+ });\n+ expect(inspectedElement).not.toBeNull();\n+ expect(inspectedElement).toMatchSnapshot('3: Inspect props.nestedObject.c');\n+\n+ TestRenderer.act(() => {\n+ TestUtils.act(() => {\n+ ReactDOM.render(\n+ <Example\n+ nestedObject={{\n+ a: {\n+ value: 2,\n+ b: {\n+ value: 2,\n+ },\n+ },\n+ c: {\n+ value: 2,\n+ d: {\n+ value: 2,\n+ e: {\n+ value: 2,\n+ },\n+ },\n+ },\n+ }}\n+ \/>,\n+ container\n+ );\n+ });\n+ });\n+\n+ TestRenderer.act(() => {\n+ inspectedElement = null;\n+ jest.advanceTimersByTime(1000);\n+ });\n+ expect(inspectedElement).not.toBeNull();\n+ expect(inspectedElement).toMatchSnapshot('4: update inspected element');\n+\n+ done();\n+ });\n+\n+ it('should not tear if hydration is requested after an update', async done => {\n+ const Example = () => null;\n+\n+ const container = document.createElement('div');\n+ await utils.actAsync(() =>\n+ ReactDOM.render(\n+ <Example\n+ nestedObject={{\n+ value: 1,\n+ a: {\n+ value: 1,\n+ b: {\n+ value: 1,\n+ },\n+ },\n+ }}\n+ \/>,\n+ container\n+ )\n+ );\n+\n+ const id = ((store.getElementIDAtIndex(0): any): number);\n+\n+ let getInspectedElementPath: GetInspectedElementPath = ((null: any): GetInspectedElementPath);\n+ let inspectedElement = null;\n+\n+ function Suspender({ target }) {\n+ const context = React.useContext(InspectedElementContext);\n+ getInspectedElementPath = context.getInspectedElementPath;\n+ inspectedElement = context.getInspectedElement(id);\n+ return null;\n+ }\n+\n+ await utils.actAsync(\n+ () =>\n+ TestRenderer.create(\n+ <Contexts\n+ defaultSelectedElementID={id}\n+ defaultSelectedElementIndex={0}\n+ >\n+ <React.Suspense fallback={null}>\n+ <Suspender target={id} \/>\n+ <\/React.Suspense>\n+ <\/Contexts>\n+ ),\n+ false\n+ );\n+ expect(getInspectedElementPath).not.toBeNull();\n+ expect(inspectedElement).not.toBeNull();\n+ expect(inspectedElement).toMatchSnapshot('1: Initially inspect element');\n+\n+ TestUtils.act(() => {\n+ ReactDOM.render(\n+ <Example\n+ nestedObject={{\n+ value: 2,\n+ a: {\n+ value: 2,\n+ b: {\n+ value: 2,\n+ },\n+ },\n+ }}\n+ \/>,\n+ container\n+ );\n+ });\n+\n+ inspectedElement = null;\n+\n+ TestRenderer.act(() => {\n+ TestUtils.act(() => {\n+ getInspectedElementPath(id, ['props', 'nestedObject', 'a']);\n+ jest.runOnlyPendingTimers();\n+ });\n+ });\n+ expect(inspectedElement).not.toBeNull();\n+ expect(inspectedElement).toMatchSnapshot('2: Inspect props.nestedObject.a');\n+\n+ done();\n+ });\n+});\ndiff --git a\/src\/__tests__\/inspectedElementSerializer.js b\/src\/__tests__\/inspectedElementSerializer.js\nnew file mode 100644\nindex 0000000000..13e105cf0d\n--- \/dev\/null\n+++ b\/src\/__tests__\/inspectedElementSerializer.js\n@@ -0,0 +1,28 @@\n+\/\/ test() is part of Jest's serializer API\n+export function test(maybeInspectedElement) {\n+ return (\n+ maybeInspectedElement !== null &&\n+ typeof maybeInspectedElement === 'object' &&\n+ maybeInspectedElement.hasOwnProperty('canEditFunctionProps') &&\n+ maybeInspectedElement.hasOwnProperty('canEditHooks') &&\n+ maybeInspectedElement.hasOwnProperty('canToggleSuspense') &&\n+ maybeInspectedElement.hasOwnProperty('canViewSource')\n+ );\n+}\n+\n+\/\/ print() is part of Jest's serializer API\n+export function print(inspectedElement, serialize, indent) {\n+ return JSON.stringify(\n+ {\n+ id: inspectedElement.id,\n+ owners: inspectedElement.owners,\n+ context: inspectedElement.context,\n+ events: inspectedElement.events,\n+ hooks: inspectedElement.hooks,\n+ props: inspectedElement.props,\n+ state: inspectedElement.state,\n+ },\n+ null,\n+ 2\n+ );\n+}\ndiff --git a\/src\/__tests__\/legacy\/__snapshots__\/inspectElement-test.js.snap b\/src\/__tests__\/legacy\/__snapshots__\/inspectElement-test.js.snap\nnew file mode 100644\nindex 0000000000..1cfc30e884\n--- \/dev\/null\n+++ b\/src\/__tests__\/legacy\/__snapshots__\/inspectElement-test.js.snap\n@@ -0,0 +1,186 @@\n+\/\/ Jest Snapshot v1, https:\/\/goo.gl\/fbAQLP\n+\n+exports[`InspectedElementContext should inspect the currently selected element: 1: Initial inspection 1`] = `\n+Object {\n+ \"id\": 2,\n+ \"type\": \"full-data\",\n+ \"value\": {\n+ \"id\": 2,\n+ \"owners\": null,\n+ \"context\": {},\n+ \"hooks\": null,\n+ \"props\": {\n+ \"a\": 1,\n+ \"b\": \"abc\"\n+ },\n+ \"state\": null\n+},\n+}\n+`;\n+\n+exports[`InspectedElementContext should not dehydrate nested values until explicitly requested: 1: Initially inspect element 1`] = `\n+Object {\n+ \"id\": 2,\n+ \"type\": \"full-data\",\n+ \"value\": {\n+ \"id\": 2,\n+ \"owners\": null,\n+ \"context\": {},\n+ \"hooks\": null,\n+ \"props\": {\n+ \"nestedObject\": {\n+ \"a\": {}\n+ }\n+ },\n+ \"state\": null\n+},\n+}\n+`;\n+\n+exports[`InspectedElementContext should not dehydrate nested values until explicitly requested: 2: Inspect props.nestedObject.a 1`] = `\n+Object {\n+ \"id\": 2,\n+ \"type\": \"full-data\",\n+ \"value\": {\n+ \"id\": 2,\n+ \"owners\": null,\n+ \"context\": {},\n+ \"hooks\": null,\n+ \"props\": {\n+ \"nestedObject\": {\n+ \"a\": {\n+ \"b\": {\n+ \"c\": {}\n+ }\n+ }\n+ }\n+ },\n+ \"state\": null\n+},\n+}\n+`;\n+\n+exports[`InspectedElementContext should not dehydrate nested values until explicitly requested: 3: Inspect props.nestedObject.a.b.c 1`] = `\n+Object {\n+ \"id\": 2,\n+ \"type\": \"full-data\",\n+ \"value\": {\n+ \"id\": 2,\n+ \"owners\": null,\n+ \"context\": {},\n+ \"hooks\": null,\n+ \"props\": {\n+ \"nestedObject\": {\n+ \"a\": {\n+ \"b\": {\n+ \"c\": [\n+ {\n+ \"d\": {}\n+ }\n+ ]\n+ }\n+ }\n+ }\n+ },\n+ \"state\": null\n+},\n+}\n+`;\n+\n+exports[`InspectedElementContext should not dehydrate nested values until explicitly requested: 4: Inspect props.nestedObject.a.b.c.0.d 1`] = `\n+Object {\n+ \"id\": 2,\n+ \"type\": \"full-data\",\n+ \"value\": {\n+ \"id\": 2,\n+ \"owners\": null,\n+ \"context\": {},\n+ \"hooks\": null,\n+ \"props\": {\n+ \"nestedObject\": {\n+ \"a\": {\n+ \"b\": {\n+ \"c\": [\n+ {\n+ \"d\": {\n+ \"e\": {}\n+ }\n+ }\n+ ]\n+ }\n+ }\n+ }\n+ },\n+ \"state\": null\n+},\n+}\n+`;\n+\n+exports[`InspectedElementContext should support complex data types: 1: Initial inspection 1`] = `\n+Object {\n+ \"id\": 2,\n+ \"type\": \"full-data\",\n+ \"value\": {\n+ \"id\": 2,\n+ \"owners\": null,\n+ \"context\": {},\n+ \"hooks\": null,\n+ \"props\": {\n+ \"html_element\": {},\n+ \"fn\": {},\n+ \"symbol\": {},\n+ \"react_element\": {},\n+ \"array_buffer\": {},\n+ \"typed_array\": {},\n+ \"date\": {}\n+ },\n+ \"state\": null\n+},\n+}\n+`;\n+\n+exports[`InspectedElementContext should support custom objects with enumerable properties and getters: 1: Initial inspection 1`] = `\n+Object {\n+ \"id\": 2,\n+ \"type\": \"full-data\",\n+ \"value\": {\n+ \"id\": 2,\n+ \"owners\": null,\n+ \"context\": {},\n+ \"hooks\": null,\n+ \"props\": {\n+ \"data\": {\n+ \"_number\": 42,\n+ \"number\": 42\n+ }\n+ },\n+ \"state\": null\n+},\n+}\n+`;\n+\n+exports[`InspectedElementContext should support simple data types: 1: Initial inspection 1`] = `\n+Object {\n+ \"id\": 2,\n+ \"type\": \"full-data\",\n+ \"value\": {\n+ \"id\": 2,\n+ \"owners\": null,\n+ \"context\": {},\n+ \"hooks\": null,\n+ \"props\": {\n+ \"boolean_false\": false,\n+ \"boolean_true\": true,\n+ \"infinity\": null,\n+ \"integer_zero\": 0,\n+ \"integer_one\": 1,\n+ \"float\": 1.23,\n+ \"string\": \"abc\",\n+ \"string_empty\": \"\",\n+ \"nan\": null,\n+ \"value_null\": null\n+ },\n+ \"state\": null\n+},\n+}\n+`;\ndiff --git a\/src\/__tests__\/legacy\/__snapshots__\/storeLegacy-v15-test.js.snap b\/src\/__tests__\/legacy\/__snapshots__\/storeLegacy-v15-test.js.snap\nnew file mode 100644\nindex 0000000000..06628a9e9a\n--- \/dev\/null\n+++ b\/src\/__tests__\/legacy\/__snapshots__\/storeLegacy-v15-test.js.snap\n@@ -0,0 +1,499 @@\n+\/\/ Jest Snapshot v1, https:\/\/goo.gl\/fbAQLP\n+\n+exports[`Store (legacy) collapseNodesByDefault:false should not filter DOM nodes from the store tree: 1: mount 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ ▾ <div>\n+ ▾ <div>\n+ ▾ <Parent>\n+ ▾ <div>\n+ ▾ <Child>\n+ <div>\n+ ▾ <Parent>\n+ ▾ <div>\n+ ▾ <Child>\n+ <div>\n+ <Nothing>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:false should not filter DOM nodes from the store tree: 2: update 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ ▾ <div>\n+ ▾ <div>\n+ ▾ <Parent>\n+ ▾ <div>\n+ ▾ <Child>\n+ <div>\n+ ▾ <Parent>\n+ ▾ <div>\n+ ▾ <Child>\n+ <div>\n+ <Nothing>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:false should not filter DOM nodes from the store tree: 5: unmount 1`] = ``;\n+\n+exports[`Store (legacy) collapseNodesByDefault:false should support adding and removing children: 1: mount 1`] = `\n+[root]\n+ ▾ <Root>\n+ ▾ <div>\n+ ▾ <Component key=\"a\">\n+ <div>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:false should support adding and removing children: 2: add child 1`] = `\n+[root]\n+ ▾ <Root>\n+ ▾ <div>\n+ ▾ <Component key=\"a\">\n+ <div>\n+ ▾ <Component key=\"b\">\n+ <div>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:false should support adding and removing children: 3: remove child 1`] = `\n+[root]\n+ ▾ <Root>\n+ ▾ <div>\n+ ▾ <Component key=\"b\">\n+ <div>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:false should support collapsing parts of the tree: 1: mount 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ ▾ <div>\n+ ▾ <Parent>\n+ ▾ <div>\n+ ▾ <Child key=\"0\">\n+ <div>\n+ ▾ <Child key=\"1\">\n+ <div>\n+ ▾ <Parent>\n+ ▾ <div>\n+ ▾ <Child key=\"0\">\n+ <div>\n+ ▾ <Child key=\"1\">\n+ <div>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:false should support collapsing parts of the tree: 2: collapse first Parent 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ ▾ <div>\n+ ▸ <Parent>\n+ ▾ <Parent>\n+ ▾ <div>\n+ ▾ <Child key=\"0\">\n+ <div>\n+ ▾ <Child key=\"1\">\n+ <div>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:false should support collapsing parts of the tree: 3: collapse second Parent 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ ▾ <div>\n+ ▸ <Parent>\n+ ▸ <Parent>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:false should support collapsing parts of the tree: 4: expand first Parent 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ ▾ <div>\n+ ▾ <Parent>\n+ ▾ <div>\n+ ▾ <Child key=\"0\">\n+ <div>\n+ ▾ <Child key=\"1\">\n+ <div>\n+ ▸ <Parent>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:false should support collapsing parts of the tree: 5: collapse Grandparent 1`] = `\n+[root]\n+ ▸ <Grandparent>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:false should support collapsing parts of the tree: 6: expand Grandparent 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ ▾ <div>\n+ ▾ <Parent>\n+ ▾ <div>\n+ ▾ <Child key=\"0\">\n+ <div>\n+ ▾ <Child key=\"1\">\n+ <div>\n+ ▸ <Parent>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:false should support mount and update operations for multiple roots: 1: mount 1`] = `\n+[root]\n+ ▾ <Parent key=\"A\">\n+ ▾ <div>\n+ ▾ <Child key=\"0\">\n+ <div>\n+ ▾ <Child key=\"1\">\n+ <div>\n+ ▾ <Child key=\"2\">\n+ <div>\n+[root]\n+ ▾ <Parent key=\"B\">\n+ ▾ <div>\n+ ▾ <Child key=\"0\">\n+ <div>\n+ ▾ <Child key=\"1\">\n+ <div>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:false should support mount and update operations for multiple roots: 2: update 1`] = `\n+[root]\n+ ▾ <Parent key=\"A\">\n+ ▾ <div>\n+ ▾ <Child key=\"0\">\n+ <div>\n+ ▾ <Child key=\"1\">\n+ <div>\n+ ▾ <Child key=\"2\">\n+ <div>\n+ ▾ <Child key=\"3\">\n+ <div>\n+[root]\n+ ▾ <Parent key=\"B\">\n+ ▾ <div>\n+ ▾ <Child key=\"0\">\n+ <div>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:false should support mount and update operations for multiple roots: 3: unmount B 1`] = `\n+[root]\n+ ▾ <Parent key=\"A\">\n+ ▾ <div>\n+ ▾ <Child key=\"0\">\n+ <div>\n+ ▾ <Child key=\"1\">\n+ <div>\n+ ▾ <Child key=\"2\">\n+ <div>\n+ ▾ <Child key=\"3\">\n+ <div>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:false should support mount and update operations for multiple roots: 4: unmount A 1`] = ``;\n+\n+exports[`Store (legacy) collapseNodesByDefault:false should support mount and update operations: 1: mount 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ ▾ <div>\n+ ▾ <Parent>\n+ ▾ <div>\n+ ▾ <Child key=\"0\">\n+ <div>\n+ ▾ <Child key=\"1\">\n+ <div>\n+ ▾ <Child key=\"2\">\n+ <div>\n+ ▾ <Child key=\"3\">\n+ <div>\n+ ▾ <Parent>\n+ ▾ <div>\n+ ▾ <Child key=\"0\">\n+ <div>\n+ ▾ <Child key=\"1\">\n+ <div>\n+ ▾ <Child key=\"2\">\n+ <div>\n+ ▾ <Child key=\"3\">\n+ <div>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:false should support mount and update operations: 2: update 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ ▾ <div>\n+ ▾ <Parent>\n+ ▾ <div>\n+ ▾ <Child key=\"0\">\n+ <div>\n+ ▾ <Child key=\"1\">\n+ <div>\n+ ▾ <Parent>\n+ ▾ <div>\n+ ▾ <Child key=\"0\">\n+ <div>\n+ ▾ <Child key=\"1\">\n+ <div>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:false should support mount and update operations: 3: unmount 1`] = ``;\n+\n+exports[`Store (legacy) collapseNodesByDefault:false should support reordering of children: 1: mount 1`] = `\n+[root]\n+ ▾ <Root>\n+ ▾ <div>\n+ ▾ <Foo key=\"foo\">\n+ ▾ <div>\n+ ▾ <Component key=\"0\">\n+ <div>\n+ ▾ <Bar key=\"bar\">\n+ ▾ <div>\n+ ▾ <Component key=\"0\">\n+ <div>\n+ ▾ <Component key=\"1\">\n+ <div>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:false should support reordering of children: 2: reorder children 1`] = `\n+[root]\n+ ▾ <Root>\n+ ▾ <div>\n+ ▾ <Bar key=\"bar\">\n+ ▾ <div>\n+ ▾ <Component key=\"0\">\n+ <div>\n+ ▾ <Component key=\"1\">\n+ <div>\n+ ▾ <Foo key=\"foo\">\n+ ▾ <div>\n+ ▾ <Component key=\"0\">\n+ <div>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:false should support reordering of children: 3: collapse root 1`] = `\n+[root]\n+ ▸ <Root>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:false should support reordering of children: 4: expand root 1`] = `\n+[root]\n+ ▾ <Root>\n+ ▾ <div>\n+ ▾ <Bar key=\"bar\">\n+ ▾ <div>\n+ ▾ <Component key=\"0\">\n+ <div>\n+ ▾ <Component key=\"1\">\n+ <div>\n+ ▾ <Foo key=\"foo\">\n+ ▾ <div>\n+ ▾ <Component key=\"0\">\n+ <div>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:true should not filter DOM nodes from the store tree: 1: mount 1`] = `\n+[root]\n+ ▸ <Grandparent>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:true should not filter DOM nodes from the store tree: 2: expand Grandparent 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ ▸ <div>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:true should not filter DOM nodes from the store tree: 3: expand div 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ ▾ <div>\n+ ▸ <div>\n+ ▸ <Parent>\n+ <Nothing>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:true should not filter DOM nodes from the store tree: 4: final update 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ ▾ <div>\n+ ▸ <div>\n+ ▸ <Parent>\n+ <Nothing>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:true should not filter DOM nodes from the store tree: 5: unmount 1`] = ``;\n+\n+exports[`Store (legacy) collapseNodesByDefault:true should support expanding deep parts of the tree: 1: mount 1`] = `\n+[root]\n+ ▸ <Wrapper>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:true should support expanding deep parts of the tree: 2: expand deepest node 1`] = `\n+[root]\n+ ▾ <Wrapper>\n+ ▾ <Nested>\n+ ▾ <Nested>\n+ ▾ <Nested>\n+ ▾ <Nested>\n+ <div>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:true should support expanding deep parts of the tree: 3: collapse root 1`] = `\n+[root]\n+ ▸ <Wrapper>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:true should support expanding deep parts of the tree: 4: expand root 1`] = `\n+[root]\n+ ▾ <Wrapper>\n+ ▾ <Nested>\n+ ▾ <Nested>\n+ ▾ <Nested>\n+ ▾ <Nested>\n+ <div>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:true should support expanding deep parts of the tree: 5: collapse middle node 1`] = `\n+[root]\n+ ▾ <Wrapper>\n+ ▸ <Nested>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:true should support expanding deep parts of the tree: 6: expand middle node 1`] = `\n+[root]\n+ ▾ <Wrapper>\n+ ▾ <Nested>\n+ ▾ <Nested>\n+ ▾ <Nested>\n+ ▾ <Nested>\n+ <div>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 1: mount 1`] = `\n+[root]\n+ ▸ <Grandparent>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 2: expand Grandparent 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ ▸ <div>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 3: expand parent div 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ ▾ <div>\n+ ▸ <Parent>\n+ ▸ <Parent>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 4: expand first Parent 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ ▾ <div>\n+ ▾ <Parent>\n+ ▸ <div>\n+ ▸ <Parent>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 5: expand second Parent 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ ▾ <div>\n+ ▾ <Parent>\n+ ▸ <div>\n+ ▾ <Parent>\n+ ▸ <div>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 6: collapse first Parent 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ ▾ <div>\n+ ▸ <Parent>\n+ ▾ <Parent>\n+ ▸ <div>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 7: collapse second Parent 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ ▾ <div>\n+ ▸ <Parent>\n+ ▸ <Parent>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 8: collapse Grandparent 1`] = `\n+[root]\n+ ▸ <Grandparent>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:true should support mount and update operations for multiple roots: 1: mount 1`] = `\n+[root]\n+ ▸ <Parent key=\"A\">\n+[root]\n+ ▸ <Parent key=\"B\">\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:true should support mount and update operations for multiple roots: 2: update 1`] = `\n+[root]\n+ ▸ <Parent key=\"A\">\n+[root]\n+ ▸ <Parent key=\"B\">\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:true should support mount and update operations for multiple roots: 3: unmount B 1`] = `\n+[root]\n+ ▸ <Parent key=\"A\">\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:true should support mount and update operations for multiple roots: 4: unmount A 1`] = ``;\n+\n+exports[`Store (legacy) collapseNodesByDefault:true should support mount and update operations: 1: mount 1`] = `\n+[root]\n+ ▸ <div>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:true should support mount and update operations: 2: update 1`] = `\n+[root]\n+ ▸ <div>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:true should support mount and update operations: 3: unmount 1`] = ``;\n+\n+exports[`Store (legacy) collapseNodesByDefault:true should support reordering of children: 1: mount 1`] = `\n+[root]\n+ ▸ <Root>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:true should support reordering of children: 2: reorder children 1`] = `\n+[root]\n+ ▸ <Root>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:true should support reordering of children: 3: expand root 1`] = `\n+[root]\n+ ▾ <Root>\n+ ▸ <div>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:true should support reordering of children: 4: expand div 1`] = `\n+[root]\n+ ▾ <Root>\n+ ▾ <div>\n+ ▸ <Bar key=\"bar\">\n+ ▸ <Foo key=\"foo\">\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:true should support reordering of children: 4: expand leaves 1`] = `\n+[root]\n+ ▾ <Root>\n+ ▾ <div>\n+ ▾ <Bar key=\"bar\">\n+ ▸ <div>\n+ ▾ <Foo key=\"foo\">\n+ ▸ <div>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:true should support reordering of children: 5: collapse root 1`] = `\n+[root]\n+ ▸ <Root>\n+`;\n+\n+exports[`Store (legacy) should not allow a root node to be collapsed: 1: mount 1`] = `\n+[root]\n+ ▾ <Component>\n+ <div>\n+`;\ndiff --git a\/src\/__tests__\/legacy\/inspectElement-test.js b\/src\/__tests__\/legacy\/inspectElement-test.js\nnew file mode 100644\nindex 0000000000..7b8c2b04a9\n--- \/dev\/null\n+++ b\/src\/__tests__\/legacy\/inspectElement-test.js\n@@ -0,0 +1,283 @@\n+\/\/ @flow\n+\n+import type { InspectedElementPayload } from 'src\/backend\/types';\n+import type { DehydratedData } from 'src\/devtools\/views\/Components\/types';\n+import type { FrontendBridge } from 'src\/bridge';\n+import type Store from 'src\/devtools\/store';\n+\n+describe('InspectedElementContext', () => {\n+ let React;\n+ let ReactDOM;\n+ let hydrate;\n+ let meta;\n+ let bridge: FrontendBridge;\n+ let store: Store;\n+\n+ const act = (callback: Function) => {\n+ callback();\n+\n+ jest.runAllTimers(); \/\/ Flush Bridge operations\n+ };\n+\n+ function dehydrateHelper(\n+ dehydratedData: DehydratedData | null\n+ ): Object | null {\n+ if (dehydratedData !== null) {\n+ return hydrate(dehydratedData.data, dehydratedData.cleaned);\n+ } else {\n+ return null;\n+ }\n+ }\n+\n+ async function read(\n+ id: number,\n+ path?: Array<string | number>\n+ ): Promise<Object> {\n+ return new Promise((resolve, reject) => {\n+ const rendererID = ((store.getRendererIDForElement(id): any): number);\n+\n+ const onInspectedElement = (payload: InspectedElementPayload) => {\n+ bridge.removeListener('inspectedElement', onInspectedElement);\n+\n+ if (payload.type === 'full-data' && payload.value !== null) {\n+ payload.value.context = dehydrateHelper(payload.value.context);\n+ payload.value.props = dehydrateHelper(payload.value.props);\n+ payload.value.state = dehydrateHelper(payload.value.state);\n+ }\n+\n+ resolve(payload);\n+ };\n+\n+ bridge.addListener('inspectedElement', onInspectedElement);\n+ bridge.send('inspectElement', { id, path, rendererID });\n+\n+ jest.runOnlyPendingTimers();\n+ });\n+ }\n+\n+ beforeEach(() => {\n+ bridge = global.bridge;\n+ store = global.store;\n+\n+ hydrate = require('src\/hydration').hydrate;\n+ meta = require('src\/hydration').meta;\n+\n+ \/\/ Redirect all React\/ReactDOM requires to the v15 UMD.\n+ \/\/ We use the UMD because Jest doesn't enable us to mock deep imports (e.g. \"react\/lib\/Something\").\n+ jest.mock('react', () => jest.requireActual('react-15\/dist\/react.js'));\n+ jest.mock('react-dom', () =>\n+ jest.requireActual('react-dom-15\/dist\/react-dom.js')\n+ );\n+\n+ React = require('react');\n+ ReactDOM = require('react-dom');\n+ });\n+\n+ it('should inspect the currently selected element', async done => {\n+ const Example = () => null;\n+\n+ act(() =>\n+ ReactDOM.render(<Example a={1} b=\"abc\" \/>, document.createElement('div'))\n+ );\n+\n+ const id = ((store.getElementIDAtIndex(0): any): number);\n+ const inspectedElement = await read(id);\n+\n+ expect(inspectedElement).toMatchSnapshot('1: Initial inspection');\n+\n+ done();\n+ });\n+\n+ it('should support simple data types', async done => {\n+ const Example = () => null;\n+\n+ act(() =>\n+ ReactDOM.render(\n+ <Example\n+ boolean_false={false}\n+ boolean_true={true}\n+ infinity={Infinity}\n+ integer_zero={0}\n+ integer_one={1}\n+ float={1.23}\n+ string=\"abc\"\n+ string_empty=\"\"\n+ nan={NaN}\n+ value_null={null}\n+ value_undefined={undefined}\n+ \/>,\n+ document.createElement('div')\n+ )\n+ );\n+\n+ const id = ((store.getElementIDAtIndex(0): any): number);\n+ const inspectedElement = await read(id);\n+\n+ expect(inspectedElement).toMatchSnapshot('1: Initial inspection');\n+\n+ const { props } = inspectedElement.value;\n+ expect(props.boolean_false).toBe(false);\n+ expect(props.boolean_true).toBe(true);\n+ expect(Number.isFinite(props.infinity)).toBe(false);\n+ expect(props.integer_zero).toEqual(0);\n+ expect(props.integer_one).toEqual(1);\n+ expect(props.float).toEqual(1.23);\n+ expect(props.string).toEqual('abc');\n+ expect(props.string_empty).toEqual('');\n+ expect(props.nan).toBeNaN();\n+ expect(props.value_null).toBeNull();\n+ expect(props.value_undefined).toBeUndefined();\n+\n+ done();\n+ });\n+\n+ it('should support complex data types', async done => {\n+ const Example = () => null;\n+\n+ const div = document.createElement('div');\n+ const exmapleFunction = () => {};\n+ const typedArray = new Uint8Array(3);\n+\n+ act(() =>\n+ ReactDOM.render(\n+ <Example\n+ html_element={div}\n+ fn={exmapleFunction}\n+ symbol={Symbol('symbol')}\n+ react_element={<span \/>}\n+ array_buffer={typedArray.buffer}\n+ typed_array={typedArray}\n+ date={new Date()}\n+ \/>,\n+ document.createElement('div')\n+ )\n+ );\n+\n+ const id = ((store.getElementIDAtIndex(0): any): number);\n+ const inspectedElement = await read(id);\n+\n+ expect(inspectedElement).toMatchSnapshot('1: Initial inspection');\n+\n+ const {\n+ html_element,\n+ fn,\n+ symbol,\n+ react_element,\n+ array_buffer,\n+ typed_array,\n+ date,\n+ } = inspectedElement.value.props;\n+ expect(html_element[meta.inspectable]).toBe(false);\n+ expect(html_element[meta.name]).toBe('DIV');\n+ expect(html_element[meta.type]).toBe('html_element');\n+ expect(fn[meta.inspectable]).toBe(false);\n+ expect(fn[meta.name]).toBe('exmapleFunction');\n+ expect(fn[meta.type]).toBe('function');\n+ expect(symbol[meta.inspectable]).toBe(false);\n+ expect(symbol[meta.name]).toBe('Symbol(symbol)');\n+ expect(symbol[meta.type]).toBe('symbol');\n+ expect(react_element[meta.inspectable]).toBe(false);\n+ expect(react_element[meta.name]).toBe('span');\n+ expect(react_element[meta.type]).toBe('react_element');\n+ expect(array_buffer[meta.size]).toBe(3);\n+ expect(array_buffer[meta.inspectable]).toBe(false);\n+ expect(array_buffer[meta.name]).toBe('ArrayBuffer');\n+ expect(array_buffer[meta.type]).toBe('array_buffer');\n+ expect(typed_array[meta.size]).toBe(3);\n+ expect(typed_array[meta.inspectable]).toBe(false);\n+ expect(typed_array[meta.name]).toBe('Uint8Array');\n+ expect(typed_array[meta.type]).toBe('typed_array');\n+ expect(date[meta.inspectable]).toBe(false);\n+ expect(date[meta.type]).toBe('date');\n+\n+ done();\n+ });\n+\n+ it('should support custom objects with enumerable properties and getters', async done => {\n+ class CustomData {\n+ _number = 42;\n+ get number() {\n+ return this._number;\n+ }\n+ set number(value) {\n+ this._number = value;\n+ }\n+ }\n+\n+ const descriptor = ((Object.getOwnPropertyDescriptor(\n+ CustomData.prototype,\n+ 'number'\n+ ): any): PropertyDescriptor<number>);\n+ descriptor.enumerable = true;\n+ Object.defineProperty(CustomData.prototype, 'number', descriptor);\n+\n+ const Example = ({ data }) => null;\n+\n+ act(() =>\n+ ReactDOM.render(\n+ <Example data={new CustomData()} \/>,\n+ document.createElement('div')\n+ )\n+ );\n+\n+ const id = ((store.getElementIDAtIndex(0): any): number);\n+ const inspectedElement = await read(id);\n+\n+ expect(inspectedElement).toMatchSnapshot('1: Initial inspection');\n+\n+ done();\n+ });\n+\n+ it('should not dehydrate nested values until explicitly requested', async done => {\n+ const Example = () => null;\n+\n+ act(() =>\n+ ReactDOM.render(\n+ <Example\n+ nestedObject={{\n+ a: {\n+ b: {\n+ c: [\n+ {\n+ d: {\n+ e: {},\n+ },\n+ },\n+ ],\n+ },\n+ },\n+ }}\n+ \/>,\n+ document.createElement('div')\n+ )\n+ );\n+\n+ const id = ((store.getElementIDAtIndex(0): any): number);\n+\n+ let inspectedElement = await read(id);\n+ expect(inspectedElement).toMatchSnapshot('1: Initially inspect element');\n+\n+ inspectedElement = await read(id, ['props', 'nestedObject', 'a']);\n+ expect(inspectedElement).toMatchSnapshot('2: Inspect props.nestedObject.a');\n+\n+ inspectedElement = await read(id, ['props', 'nestedObject', 'a', 'b', 'c']);\n+ expect(inspectedElement).toMatchSnapshot(\n+ '3: Inspect props.nestedObject.a.b.c'\n+ );\n+\n+ inspectedElement = await read(id, [\n+ 'props',\n+ 'nestedObject',\n+ 'a',\n+ 'b',\n+ 'c',\n+ 0,\n+ 'd',\n+ ]);\n+ expect(inspectedElement).toMatchSnapshot(\n+ '4: Inspect props.nestedObject.a.b.c.0.d'\n+ );\n+\n+ done();\n+ });\n+});\ndiff --git a\/src\/__tests__\/legacy\/storeLegacy-v15-test.js b\/src\/__tests__\/legacy\/storeLegacy-v15-test.js\nnew file mode 100644\nindex 0000000000..fc5d373e5b\n--- \/dev\/null\n+++ b\/src\/__tests__\/legacy\/storeLegacy-v15-test.js\n@@ -0,0 +1,505 @@\n+\/\/ @flow\n+\n+describe('Store (legacy)', () => {\n+ let React;\n+ let ReactDOM;\n+ let store;\n+\n+ const act = (callback: Function) => {\n+ callback();\n+\n+ jest.runAllTimers(); \/\/ Flush Bridge operations\n+ };\n+\n+ beforeEach(() => {\n+ store = global.store;\n+\n+ \/\/ Redirect all React\/ReactDOM requires to the v15 UMD.\n+ \/\/ We use the UMD because Jest doesn't enable us to mock deep imports (e.g. \"react\/lib\/Something\").\n+ jest.mock('react', () => jest.requireActual('react-15\/dist\/react.js'));\n+ jest.mock('react-dom', () =>\n+ jest.requireActual('react-dom-15\/dist\/react-dom.js')\n+ );\n+\n+ React = require('react');\n+ ReactDOM = require('react-dom');\n+ });\n+\n+ it('should not allow a root node to be collapsed', () => {\n+ const Component = () => <div>Hi<\/div>;\n+\n+ act(() =>\n+ ReactDOM.render(<Component count={4} \/>, document.createElement('div'))\n+ );\n+ expect(store).toMatchSnapshot('1: mount');\n+\n+ expect(store.roots).toHaveLength(1);\n+\n+ const rootID = store.roots[0];\n+\n+ expect(() => store.toggleIsCollapsed(rootID, true)).toThrow(\n+ 'Root nodes cannot be collapsed'\n+ );\n+ });\n+\n+ describe('collapseNodesByDefault:false', () => {\n+ beforeEach(() => {\n+ store.collapseNodesByDefault = false;\n+ });\n+\n+ it('should support mount and update operations', () => {\n+ const Grandparent = ({ count }) => (\n+ <div>\n+ <Parent count={count} \/>\n+ <Parent count={count} \/>\n+ <\/div>\n+ );\n+ const Parent = ({ count }) => (\n+ <div>\n+ {new Array(count).fill(true).map((_, index) => (\n+ <Child key={index} \/>\n+ ))}\n+ <\/div>\n+ );\n+ const Child = () => <div>Hi!<\/div>;\n+\n+ const container = document.createElement('div');\n+\n+ act(() => ReactDOM.render(<Grandparent count={4} \/>, container));\n+ expect(store).toMatchSnapshot('1: mount');\n+\n+ act(() => ReactDOM.render(<Grandparent count={2} \/>, container));\n+ expect(store).toMatchSnapshot('2: update');\n+\n+ act(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(store).toMatchSnapshot('3: unmount');\n+ });\n+\n+ it('should support mount and update operations for multiple roots', () => {\n+ const Parent = ({ count }) => (\n+ <div>\n+ {new Array(count).fill(true).map((_, index) => (\n+ <Child key={index} \/>\n+ ))}\n+ <\/div>\n+ );\n+ const Child = () => <div>Hi!<\/div>;\n+\n+ const containerA = document.createElement('div');\n+ const containerB = document.createElement('div');\n+\n+ act(() => {\n+ ReactDOM.render(<Parent key=\"A\" count={3} \/>, containerA);\n+ ReactDOM.render(<Parent key=\"B\" count={2} \/>, containerB);\n+ });\n+ expect(store).toMatchSnapshot('1: mount');\n+\n+ act(() => {\n+ ReactDOM.render(<Parent key=\"A\" count={4} \/>, containerA);\n+ ReactDOM.render(<Parent key=\"B\" count={1} \/>, containerB);\n+ });\n+ expect(store).toMatchSnapshot('2: update');\n+\n+ act(() => ReactDOM.unmountComponentAtNode(containerB));\n+ expect(store).toMatchSnapshot('3: unmount B');\n+\n+ act(() => ReactDOM.unmountComponentAtNode(containerA));\n+ expect(store).toMatchSnapshot('4: unmount A');\n+ });\n+\n+ it('should not filter DOM nodes from the store tree', () => {\n+ const Grandparent = ({ flip }) => (\n+ <div>\n+ <div>\n+ <Parent flip={flip} \/>\n+ <\/div>\n+ <Parent flip={flip} \/>\n+ <Nothing \/>\n+ <\/div>\n+ );\n+ const Parent = ({ flip }) => (\n+ <div>\n+ {flip ? 'foo' : null}\n+ <Child \/>\n+ {flip && [null, 'hello', 42]}\n+ {flip ? 'bar' : 'baz'}\n+ <\/div>\n+ );\n+ const Child = () => <div>Hi!<\/div>;\n+ const Nothing = () => null;\n+\n+ const container = document.createElement('div');\n+ act(() =>\n+ ReactDOM.render(<Grandparent count={4} flip={false} \/>, container)\n+ );\n+ expect(store).toMatchSnapshot('1: mount');\n+\n+ act(() =>\n+ ReactDOM.render(<Grandparent count={4} flip={true} \/>, container)\n+ );\n+ expect(store).toMatchSnapshot('2: update');\n+\n+ act(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(store).toMatchSnapshot('5: unmount');\n+ });\n+\n+ it('should support collapsing parts of the tree', () => {\n+ const Grandparent = ({ count }) => (\n+ <div>\n+ <Parent count={count} \/>\n+ <Parent count={count} \/>\n+ <\/div>\n+ );\n+ const Parent = ({ count }) => (\n+ <div>\n+ {new Array(count).fill(true).map((_, index) => (\n+ <Child key={index} \/>\n+ ))}\n+ <\/div>\n+ );\n+ const Child = () => <div>Hi!<\/div>;\n+\n+ act(() =>\n+ ReactDOM.render(\n+ <Grandparent count={2} \/>,\n+ document.createElement('div')\n+ )\n+ );\n+ expect(store).toMatchSnapshot('1: mount');\n+\n+ const grandparentID = store.getElementIDAtIndex(0);\n+ const parentOneID = store.getElementIDAtIndex(2);\n+ const parentTwoID = store.getElementIDAtIndex(8);\n+\n+ act(() => store.toggleIsCollapsed(parentOneID, true));\n+ expect(store).toMatchSnapshot('2: collapse first Parent');\n+\n+ act(() => store.toggleIsCollapsed(parentTwoID, true));\n+ expect(store).toMatchSnapshot('3: collapse second Parent');\n+\n+ act(() => store.toggleIsCollapsed(parentOneID, false));\n+ expect(store).toMatchSnapshot('4: expand first Parent');\n+\n+ act(() => store.toggleIsCollapsed(grandparentID, true));\n+ expect(store).toMatchSnapshot('5: collapse Grandparent');\n+\n+ act(() => store.toggleIsCollapsed(grandparentID, false));\n+ expect(store).toMatchSnapshot('6: expand Grandparent');\n+ });\n+\n+ it('should support adding and removing children', () => {\n+ const Root = ({ children }) => <div>{children}<\/div>;\n+ const Component = () => <div \/>;\n+\n+ const container = document.createElement('div');\n+\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <Component key=\"a\" \/>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+ expect(store).toMatchSnapshot('1: mount');\n+\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <Component key=\"a\" \/>\n+ <Component key=\"b\" \/>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+ expect(store).toMatchSnapshot('2: add child');\n+\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <Component key=\"b\" \/>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+ expect(store).toMatchSnapshot('3: remove child');\n+ });\n+\n+ it('should support reordering of children', () => {\n+ const Root = ({ children }) => <div>{children}<\/div>;\n+ const Component = () => <div \/>;\n+\n+ const Foo = () => <div>{[<Component key=\"0\" \/>]}<\/div>;\n+ const Bar = () => (\n+ <div>{[<Component key=\"0\" \/>, <Component key=\"1\" \/>]}<\/div>\n+ );\n+ const foo = <Foo key=\"foo\" \/>;\n+ const bar = <Bar key=\"bar\" \/>;\n+\n+ const container = document.createElement('div');\n+\n+ act(() => ReactDOM.render(<Root>{[foo, bar]}<\/Root>, container));\n+ expect(store).toMatchSnapshot('1: mount');\n+\n+ act(() => ReactDOM.render(<Root>{[bar, foo]}<\/Root>, container));\n+ expect(store).toMatchSnapshot('2: reorder children');\n+\n+ act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), true));\n+ expect(store).toMatchSnapshot('3: collapse root');\n+\n+ act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));\n+ expect(store).toMatchSnapshot('4: expand root');\n+ });\n+ });\n+\n+ describe('collapseNodesByDefault:true', () => {\n+ beforeEach(() => {\n+ store.collapseNodesByDefault = true;\n+ });\n+\n+ it('should support mount and update operations', () => {\n+ const Parent = ({ count }) => (\n+ <div>\n+ {new Array(count).fill(true).map((_, index) => (\n+ <Child key={index} \/>\n+ ))}\n+ <\/div>\n+ );\n+ const Child = () => <div>Hi!<\/div>;\n+\n+ const container = document.createElement('div');\n+\n+ act(() =>\n+ ReactDOM.render(\n+ <div>\n+ <Parent count={1} \/>\n+ <Parent count={3} \/>\n+ <\/div>,\n+ container\n+ )\n+ );\n+ expect(store).toMatchSnapshot('1: mount');\n+\n+ act(() =>\n+ ReactDOM.render(\n+ <div>\n+ <Parent count={2} \/>\n+ <Parent count={1} \/>\n+ <\/div>,\n+ container\n+ )\n+ );\n+ expect(store).toMatchSnapshot('2: update');\n+\n+ act(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(store).toMatchSnapshot('3: unmount');\n+ });\n+\n+ it('should support mount and update operations for multiple roots', () => {\n+ const Parent = ({ count }) => (\n+ <div>\n+ {new Array(count).fill(true).map((_, index) => (\n+ <Child key={index} \/>\n+ ))}\n+ <\/div>\n+ );\n+ const Child = () => <div>Hi!<\/div>;\n+\n+ const containerA = document.createElement('div');\n+ const containerB = document.createElement('div');\n+\n+ act(() => {\n+ ReactDOM.render(<Parent key=\"A\" count={3} \/>, containerA);\n+ ReactDOM.render(<Parent key=\"B\" count={2} \/>, containerB);\n+ });\n+ expect(store).toMatchSnapshot('1: mount');\n+\n+ act(() => {\n+ ReactDOM.render(<Parent key=\"A\" count={4} \/>, containerA);\n+ ReactDOM.render(<Parent key=\"B\" count={1} \/>, containerB);\n+ });\n+ expect(store).toMatchSnapshot('2: update');\n+\n+ act(() => ReactDOM.unmountComponentAtNode(containerB));\n+ expect(store).toMatchSnapshot('3: unmount B');\n+\n+ act(() => ReactDOM.unmountComponentAtNode(containerA));\n+ expect(store).toMatchSnapshot('4: unmount A');\n+ });\n+\n+ it('should not filter DOM nodes from the store tree', () => {\n+ const Grandparent = ({ flip }) => (\n+ <div>\n+ <div>\n+ <Parent flip={flip} \/>\n+ <\/div>\n+ <Parent flip={flip} \/>\n+ <Nothing \/>\n+ <\/div>\n+ );\n+ const Parent = ({ flip }) => (\n+ <div>\n+ {flip ? 'foo' : null}\n+ <Child \/>\n+ {flip && [null, 'hello', 42]}\n+ {flip ? 'bar' : 'baz'}\n+ <\/div>\n+ );\n+ const Child = () => <div>Hi!<\/div>;\n+ const Nothing = () => null;\n+\n+ const container = document.createElement('div');\n+ act(() =>\n+ ReactDOM.render(<Grandparent count={4} flip={false} \/>, container)\n+ );\n+ expect(store).toMatchSnapshot('1: mount');\n+\n+ act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));\n+ expect(store).toMatchSnapshot('2: expand Grandparent');\n+\n+ act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(1), false));\n+ expect(store).toMatchSnapshot('3: expand div');\n+\n+ act(() =>\n+ ReactDOM.render(<Grandparent count={4} flip={true} \/>, container)\n+ );\n+ expect(store).toMatchSnapshot('4: final update');\n+\n+ act(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(store).toMatchSnapshot('5: unmount');\n+ });\n+\n+ it('should support expanding parts of the tree', () => {\n+ const Grandparent = ({ count }) => (\n+ <div>\n+ <Parent count={count} \/>\n+ <Parent count={count} \/>\n+ <\/div>\n+ );\n+ const Parent = ({ count }) => (\n+ <div>\n+ {new Array(count).fill(true).map((_, index) => (\n+ <Child key={index} \/>\n+ ))}\n+ <\/div>\n+ );\n+ const Child = () => <div>Hi!<\/div>;\n+\n+ act(() =>\n+ ReactDOM.render(\n+ <Grandparent count={2} \/>,\n+ document.createElement('div')\n+ )\n+ );\n+ expect(store).toMatchSnapshot('1: mount');\n+\n+ const grandparentID = store.getElementIDAtIndex(0);\n+\n+ act(() => store.toggleIsCollapsed(grandparentID, false));\n+ expect(store).toMatchSnapshot('2: expand Grandparent');\n+\n+ const parentDivID = store.getElementIDAtIndex(1);\n+ act(() => store.toggleIsCollapsed(parentDivID, false));\n+ expect(store).toMatchSnapshot('3: expand parent div');\n+\n+ const parentOneID = store.getElementIDAtIndex(2);\n+ const parentTwoID = store.getElementIDAtIndex(3);\n+\n+ act(() => store.toggleIsCollapsed(parentOneID, false));\n+ expect(store).toMatchSnapshot('4: expand first Parent');\n+\n+ act(() => store.toggleIsCollapsed(parentTwoID, false));\n+ expect(store).toMatchSnapshot('5: expand second Parent');\n+\n+ act(() => store.toggleIsCollapsed(parentOneID, true));\n+ expect(store).toMatchSnapshot('6: collapse first Parent');\n+\n+ act(() => store.toggleIsCollapsed(parentTwoID, true));\n+ expect(store).toMatchSnapshot('7: collapse second Parent');\n+\n+ act(() => store.toggleIsCollapsed(grandparentID, true));\n+ expect(store).toMatchSnapshot('8: collapse Grandparent');\n+ });\n+\n+ it('should support expanding deep parts of the tree', () => {\n+ const Wrapper = ({ forwardedRef }) => (\n+ <Nested depth={3} forwardedRef={forwardedRef} \/>\n+ );\n+ const Nested = ({ depth, forwardedRef }) =>\n+ depth > 0 ? (\n+ <Nested depth={depth - 1} forwardedRef={forwardedRef} \/>\n+ ) : (\n+ <div ref={forwardedRef} \/>\n+ );\n+\n+ let ref = null;\n+ const refSetter = value => {\n+ ref = value;\n+ };\n+\n+ act(() =>\n+ ReactDOM.render(\n+ <Wrapper forwardedRef={refSetter} \/>,\n+ document.createElement('div')\n+ )\n+ );\n+ expect(store).toMatchSnapshot('1: mount');\n+\n+ const deepestedNodeID = global.agent.getIDForNode(ref);\n+\n+ act(() => store.toggleIsCollapsed(deepestedNodeID, false));\n+ expect(store).toMatchSnapshot('2: expand deepest node');\n+\n+ const rootID = store.getElementIDAtIndex(0);\n+\n+ act(() => store.toggleIsCollapsed(rootID, true));\n+ expect(store).toMatchSnapshot('3: collapse root');\n+\n+ act(() => store.toggleIsCollapsed(rootID, false));\n+ expect(store).toMatchSnapshot('4: expand root');\n+\n+ const id = store.getElementIDAtIndex(1);\n+\n+ act(() => store.toggleIsCollapsed(id, true));\n+ expect(store).toMatchSnapshot('5: collapse middle node');\n+\n+ act(() => store.toggleIsCollapsed(id, false));\n+ expect(store).toMatchSnapshot('6: expand middle node');\n+ });\n+\n+ it('should support reordering of children', () => {\n+ const Root = ({ children }) => <div>{children}<\/div>;\n+ const Component = () => <div \/>;\n+\n+ const Foo = () => <div>{[<Component key=\"0\" \/>]}<\/div>;\n+ const Bar = () => (\n+ <div>{[<Component key=\"0\" \/>, <Component key=\"1\" \/>]}<\/div>\n+ );\n+ const foo = <Foo key=\"foo\" \/>;\n+ const bar = <Bar key=\"bar\" \/>;\n+\n+ const container = document.createElement('div');\n+\n+ act(() => ReactDOM.render(<Root>{[foo, bar]}<\/Root>, container));\n+ expect(store).toMatchSnapshot('1: mount');\n+\n+ act(() => ReactDOM.render(<Root>{[bar, foo]}<\/Root>, container));\n+ expect(store).toMatchSnapshot('2: reorder children');\n+\n+ act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));\n+ expect(store).toMatchSnapshot('3: expand root');\n+\n+ act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(1), false));\n+ expect(store).toMatchSnapshot('4: expand div');\n+\n+ act(() => {\n+ store.toggleIsCollapsed(store.getElementIDAtIndex(3), false);\n+ store.toggleIsCollapsed(store.getElementIDAtIndex(2), false);\n+ });\n+ expect(store).toMatchSnapshot('4: expand leaves');\n+\n+ act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), true));\n+ expect(store).toMatchSnapshot('5: collapse root');\n+ });\n+ });\n+});\ndiff --git a\/src\/__tests__\/ownersListContext-test.js b\/src\/__tests__\/ownersListContext-test.js\nnew file mode 100644\nindex 0000000000..97681b70bd\n--- \/dev\/null\n+++ b\/src\/__tests__\/ownersListContext-test.js\n@@ -0,0 +1,200 @@\n+\/\/ @flow\n+\n+import typeof ReactTestRenderer from 'react-test-renderer';\n+import type { Element } from 'src\/devtools\/views\/Components\/types';\n+import type { FrontendBridge } from 'src\/bridge';\n+import type Store from 'src\/devtools\/store';\n+\n+describe('OwnersListContext', () => {\n+ let React;\n+ let ReactDOM;\n+ let TestRenderer: ReactTestRenderer;\n+ let bridge: FrontendBridge;\n+ let store: Store;\n+ let utils;\n+\n+ let BridgeContext;\n+ let OwnersListContext;\n+ let OwnersListContextController;\n+ let StoreContext;\n+ let TreeContextController;\n+\n+ beforeEach(() => {\n+ utils = require('.\/utils');\n+ utils.beforeEachProfiling();\n+\n+ bridge = global.bridge;\n+ store = global.store;\n+ store.collapseNodesByDefault = false;\n+\n+ React = require('react');\n+ ReactDOM = require('react-dom');\n+ TestRenderer = utils.requireTestRenderer();\n+\n+ BridgeContext = require('src\/devtools\/views\/context').BridgeContext;\n+ OwnersListContext = require('src\/devtools\/views\/Components\/OwnersListContext')\n+ .OwnersListContext;\n+ OwnersListContextController = require('src\/devtools\/views\/Components\/OwnersListContext')\n+ .OwnersListContextController;\n+ StoreContext = require('src\/devtools\/views\/context').StoreContext;\n+ TreeContextController = require('src\/devtools\/views\/Components\/TreeContext')\n+ .TreeContextController;\n+ });\n+\n+ const Contexts = ({ children, defaultOwnerID = null }) => (\n+ <BridgeContext.Provider value={bridge}>\n+ <StoreContext.Provider value={store}>\n+ <TreeContextController defaultOwnerID={defaultOwnerID}>\n+ <OwnersListContextController>{children}<\/OwnersListContextController>\n+ <\/TreeContextController>\n+ <\/StoreContext.Provider>\n+ <\/BridgeContext.Provider>\n+ );\n+\n+ it('should fetch the owners list for the selected element', async done => {\n+ const Grandparent = () => <Parent \/>;\n+ const Parent = () => {\n+ return (\n+ <React.Fragment>\n+ <Child \/>\n+ <Child \/>\n+ <\/React.Fragment>\n+ );\n+ };\n+ const Child = () => null;\n+\n+ utils.act(() =>\n+ ReactDOM.render(<Grandparent \/>, document.createElement('div'))\n+ );\n+\n+ expect(store).toMatchSnapshot('mount');\n+\n+ const parent = ((store.getElementAtIndex(1): any): Element);\n+ const firstChild = ((store.getElementAtIndex(2): any): Element);\n+\n+ let didFinish = false;\n+\n+ function Suspender({ owner }) {\n+ const read = React.useContext(OwnersListContext);\n+ const owners = read(owner.id);\n+ expect(owners).toMatchSnapshot(\n+ `owners for \"${(owner && owner.displayName) || ''}\"`\n+ );\n+ didFinish = true;\n+ return null;\n+ }\n+\n+ await utils.actAsync(() =>\n+ TestRenderer.create(\n+ <Contexts defaultOwnerID={parent.id}>\n+ <React.Suspense fallback={null}>\n+ <Suspender owner={parent} \/>\n+ <\/React.Suspense>\n+ <\/Contexts>\n+ )\n+ );\n+ expect(didFinish).toBe(true);\n+\n+ didFinish = false;\n+ await utils.actAsync(() =>\n+ TestRenderer.create(\n+ <Contexts defaultOwnerID={firstChild.id}>\n+ <React.Suspense fallback={null}>\n+ <Suspender owner={firstChild} \/>\n+ <\/React.Suspense>\n+ <\/Contexts>\n+ )\n+ );\n+ expect(didFinish).toBe(true);\n+\n+ done();\n+ });\n+\n+ it('should fetch the owners list for the selected element that includes filtered components', async done => {\n+ store.componentFilters = [utils.createDisplayNameFilter('^Parent$')];\n+\n+ const Grandparent = () => <Parent \/>;\n+ const Parent = () => {\n+ return (\n+ <React.Fragment>\n+ <Child \/>\n+ <Child \/>\n+ <\/React.Fragment>\n+ );\n+ };\n+ const Child = () => null;\n+\n+ utils.act(() =>\n+ ReactDOM.render(<Grandparent \/>, document.createElement('div'))\n+ );\n+\n+ expect(store).toMatchSnapshot('mount');\n+\n+ const firstChild = ((store.getElementAtIndex(1): any): Element);\n+\n+ let didFinish = false;\n+\n+ function Suspender({ owner }) {\n+ const read = React.useContext(OwnersListContext);\n+ const owners = read(owner.id);\n+ expect(owners).toMatchSnapshot(\n+ `owners for \"${(owner && owner.displayName) || ''}\"`\n+ );\n+ didFinish = true;\n+ return null;\n+ }\n+\n+ await utils.actAsync(() =>\n+ TestRenderer.create(\n+ <Contexts defaultOwnerID={firstChild.id}>\n+ <React.Suspense fallback={null}>\n+ <Suspender owner={firstChild} \/>\n+ <\/React.Suspense>\n+ <\/Contexts>\n+ )\n+ );\n+ expect(didFinish).toBe(true);\n+\n+ done();\n+ });\n+\n+ it('should include the current element even if there are no other owners', async done => {\n+ store.componentFilters = [utils.createDisplayNameFilter('^Parent$')];\n+\n+ const Grandparent = () => <Parent \/>;\n+ const Parent = () => null;\n+\n+ utils.act(() =>\n+ ReactDOM.render(<Grandparent \/>, document.createElement('div'))\n+ );\n+\n+ expect(store).toMatchSnapshot('mount');\n+\n+ const grandparent = ((store.getElementAtIndex(0): any): Element);\n+\n+ let didFinish = false;\n+\n+ function Suspender({ owner }) {\n+ const read = React.useContext(OwnersListContext);\n+ const owners = read(owner.id);\n+ expect(owners).toMatchSnapshot(\n+ `owners for \"${(owner && owner.displayName) || ''}\"`\n+ );\n+ didFinish = true;\n+ return null;\n+ }\n+\n+ await utils.actAsync(() =>\n+ TestRenderer.create(\n+ <Contexts defaultOwnerID={grandparent.id}>\n+ <React.Suspense fallback={null}>\n+ <Suspender owner={grandparent} \/>\n+ <\/React.Suspense>\n+ <\/Contexts>\n+ )\n+ );\n+ expect(didFinish).toBe(true);\n+\n+ done();\n+ });\n+});\ndiff --git a\/src\/__tests__\/profilerContext-test.js b\/src\/__tests__\/profilerContext-test.js\nnew file mode 100644\nindex 0000000000..c06f70d039\n--- \/dev\/null\n+++ b\/src\/__tests__\/profilerContext-test.js\n@@ -0,0 +1,348 @@\n+\/\/ @flow\n+\n+import typeof ReactTestRenderer from 'react-test-renderer';\n+import type { FrontendBridge } from 'src\/bridge';\n+import type { Context } from 'src\/devtools\/views\/Profiler\/ProfilerContext';\n+import type { DispatcherContext } from 'src\/devtools\/views\/Components\/TreeContext';\n+import type Store from 'src\/devtools\/store';\n+\n+describe('ProfilerContext', () => {\n+ let React;\n+ let ReactDOM;\n+ let TestRenderer: ReactTestRenderer;\n+ let bridge: FrontendBridge;\n+ let store: Store;\n+ let utils;\n+\n+ let BridgeContext;\n+ let ProfilerContext;\n+ let ProfilerContextController;\n+ let StoreContext;\n+ let TreeContextController;\n+ let TreeDispatcherContext;\n+ let TreeStateContext;\n+\n+ beforeEach(() => {\n+ utils = require('.\/utils');\n+ utils.beforeEachProfiling();\n+\n+ bridge = global.bridge;\n+ store = global.store;\n+ store.collapseNodesByDefault = false;\n+ store.recordChangeDescriptions = true;\n+\n+ React = require('react');\n+ ReactDOM = require('react-dom');\n+ TestRenderer = utils.requireTestRenderer();\n+\n+ BridgeContext = require('src\/devtools\/views\/context').BridgeContext;\n+ ProfilerContext = require('src\/devtools\/views\/Profiler\/ProfilerContext')\n+ .ProfilerContext;\n+ ProfilerContextController = require('src\/devtools\/views\/Profiler\/ProfilerContext')\n+ .ProfilerContextController;\n+ StoreContext = require('src\/devtools\/views\/context').StoreContext;\n+ TreeContextController = require('src\/devtools\/views\/Components\/TreeContext')\n+ .TreeContextController;\n+ TreeDispatcherContext = require('src\/devtools\/views\/Components\/TreeContext')\n+ .TreeDispatcherContext;\n+ TreeStateContext = require('src\/devtools\/views\/Components\/TreeContext')\n+ .TreeStateContext;\n+ });\n+\n+ const Contexts = ({\n+ children = null,\n+ defaultSelectedElementID = null,\n+ defaultSelectedElementIndex = null,\n+ }: any) => (\n+ <BridgeContext.Provider value={bridge}>\n+ <StoreContext.Provider value={store}>\n+ <TreeContextController\n+ defaultSelectedElementID={defaultSelectedElementID}\n+ defaultSelectedElementIndex={defaultSelectedElementIndex}\n+ >\n+ <ProfilerContextController>{children}<\/ProfilerContextController>\n+ <\/TreeContextController>\n+ <\/StoreContext.Provider>\n+ <\/BridgeContext.Provider>\n+ );\n+\n+ it('updates updates profiling support based on the attached roots', async done => {\n+ const Component = () => null;\n+\n+ let context: Context = ((null: any): Context);\n+\n+ function ContextReader() {\n+ context = React.useContext(ProfilerContext);\n+ return null;\n+ }\n+ await utils.actAsync(() => {\n+ TestRenderer.create(\n+ <Contexts>\n+ <ContextReader \/>\n+ <\/Contexts>\n+ );\n+ });\n+\n+ expect(context.supportsProfiling).toBe(false);\n+\n+ const containerA = document.createElement('div');\n+ const containerB = document.createElement('div');\n+\n+ await utils.actAsync(() => ReactDOM.render(<Component \/>, containerA));\n+ expect(context.supportsProfiling).toBe(true);\n+\n+ await utils.actAsync(() => ReactDOM.render(<Component \/>, containerB));\n+ await utils.actAsync(() => ReactDOM.unmountComponentAtNode(containerA));\n+ expect(context.supportsProfiling).toBe(true);\n+\n+ await utils.actAsync(() => ReactDOM.unmountComponentAtNode(containerB));\n+ expect(context.supportsProfiling).toBe(false);\n+\n+ done();\n+ });\n+\n+ it('should gracefully handle an empty profiling session (with no recorded commits)', async done => {\n+ const Example = () => null;\n+\n+ utils.act(() =>\n+ ReactDOM.render(<Example \/>, document.createElement('div'))\n+ );\n+\n+ let context: Context = ((null: any): Context);\n+\n+ function ContextReader() {\n+ context = React.useContext(ProfilerContext);\n+ return null;\n+ }\n+\n+ \/\/ Profile but don't record any updates.\n+ await utils.actAsync(() => store.profilerStore.startProfiling());\n+ await utils.actAsync(() => {\n+ TestRenderer.create(\n+ <Contexts>\n+ <ContextReader \/>\n+ <\/Contexts>\n+ );\n+ });\n+ expect(context).not.toBeNull();\n+ expect(context.didRecordCommits).toBe(false);\n+ expect(context.isProcessingData).toBe(false);\n+ expect(context.isProfiling).toBe(true);\n+ expect(context.profilingData).toBe(null);\n+ await utils.actAsync(() => store.profilerStore.stopProfiling());\n+\n+ expect(context).not.toBeNull();\n+ expect(context.didRecordCommits).toBe(false);\n+ expect(context.isProcessingData).toBe(false);\n+ expect(context.isProfiling).toBe(false);\n+ expect(context.profilingData).not.toBe(null);\n+\n+ done();\n+ });\n+\n+ it('should auto-select the root ID matching the Components tab selection if it has profiling data', async done => {\n+ const Parent = () => <Child \/>;\n+ const Child = () => null;\n+\n+ const containerOne = document.createElement('div');\n+ const containerTwo = document.createElement('div');\n+ utils.act(() => ReactDOM.render(<Parent \/>, containerOne));\n+ utils.act(() => ReactDOM.render(<Parent \/>, containerTwo));\n+ expect(store).toMatchSnapshot('mounted');\n+\n+ \/\/ Profile and record updates to both roots.\n+ await utils.actAsync(() => store.profilerStore.startProfiling());\n+ await utils.actAsync(() => ReactDOM.render(<Parent \/>, containerOne));\n+ await utils.actAsync(() => ReactDOM.render(<Parent \/>, containerTwo));\n+ await utils.actAsync(() => store.profilerStore.stopProfiling());\n+\n+ let context: Context = ((null: any): Context);\n+ function ContextReader() {\n+ context = React.useContext(ProfilerContext);\n+ return null;\n+ }\n+\n+ \/\/ Select an element within the second root.\n+ await utils.actAsync(() =>\n+ TestRenderer.create(\n+ <Contexts\n+ defaultSelectedElementID={store.getElementIDAtIndex(3)}\n+ defaultSelectedElementIndex={3}\n+ >\n+ <ContextReader \/>\n+ <\/Contexts>\n+ )\n+ );\n+\n+ expect(context).not.toBeNull();\n+ expect(context.rootID).toBe(\n+ store.getRootIDForElement(((store.getElementIDAtIndex(3): any): number))\n+ );\n+\n+ done();\n+ });\n+\n+ it('should not select the root ID matching the Components tab selection if it has no profiling data', async done => {\n+ const Parent = () => <Child \/>;\n+ const Child = () => null;\n+\n+ const containerOne = document.createElement('div');\n+ const containerTwo = document.createElement('div');\n+ utils.act(() => ReactDOM.render(<Parent \/>, containerOne));\n+ utils.act(() => ReactDOM.render(<Parent \/>, containerTwo));\n+ expect(store).toMatchSnapshot('mounted');\n+\n+ \/\/ Profile and record updates to only the first root.\n+ await utils.actAsync(() => store.profilerStore.startProfiling());\n+ await utils.actAsync(() => ReactDOM.render(<Parent \/>, containerOne));\n+ await utils.actAsync(() => store.profilerStore.stopProfiling());\n+\n+ let context: Context = ((null: any): Context);\n+ function ContextReader() {\n+ context = React.useContext(ProfilerContext);\n+ return null;\n+ }\n+\n+ \/\/ Select an element within the second root.\n+ await utils.actAsync(() =>\n+ TestRenderer.create(\n+ <Contexts\n+ defaultSelectedElementID={store.getElementIDAtIndex(3)}\n+ defaultSelectedElementIndex={3}\n+ >\n+ <ContextReader \/>\n+ <\/Contexts>\n+ )\n+ );\n+\n+ \/\/ Verify the default profiling root is the first one.\n+ expect(context).not.toBeNull();\n+ expect(context.rootID).toBe(\n+ store.getRootIDForElement(((store.getElementIDAtIndex(0): any): number))\n+ );\n+\n+ done();\n+ });\n+\n+ it('should maintain root selection between profiling sessions so long as there is data for that root', async done => {\n+ const Parent = () => <Child \/>;\n+ const Child = () => null;\n+\n+ const containerA = document.createElement('div');\n+ const containerB = document.createElement('div');\n+ utils.act(() => ReactDOM.render(<Parent \/>, containerA));\n+ utils.act(() => ReactDOM.render(<Parent \/>, containerB));\n+ expect(store).toMatchSnapshot('mounted');\n+\n+ \/\/ Profile and record updates.\n+ await utils.actAsync(() => store.profilerStore.startProfiling());\n+ await utils.actAsync(() => ReactDOM.render(<Parent \/>, containerA));\n+ await utils.actAsync(() => ReactDOM.render(<Parent \/>, containerB));\n+ await utils.actAsync(() => store.profilerStore.stopProfiling());\n+\n+ let context: Context = ((null: any): Context);\n+ let dispatch: DispatcherContext = ((null: any): DispatcherContext);\n+ let selectedElementID = null;\n+ function ContextReader() {\n+ context = React.useContext(ProfilerContext);\n+ dispatch = React.useContext(TreeDispatcherContext);\n+ selectedElementID = React.useContext(TreeStateContext).selectedElementID;\n+ return null;\n+ }\n+\n+ const id = ((store.getElementIDAtIndex(3): any): number);\n+\n+ \/\/ Select an element within the second root.\n+ await utils.actAsync(() =>\n+ TestRenderer.create(\n+ <Contexts defaultSelectedElementID={id} defaultSelectedElementIndex={3}>\n+ <ContextReader \/>\n+ <\/Contexts>\n+ )\n+ );\n+\n+ expect(selectedElementID).toBe(id);\n+\n+ \/\/ Profile and record more updates to both roots\n+ await utils.actAsync(() => store.profilerStore.startProfiling());\n+ await utils.actAsync(() => ReactDOM.render(<Parent \/>, containerA));\n+ await utils.actAsync(() => ReactDOM.render(<Parent \/>, containerB));\n+ await utils.actAsync(() => store.profilerStore.stopProfiling());\n+\n+ const otherID = ((store.getElementIDAtIndex(0): any): number);\n+\n+ \/\/ Change the selected element within a the Components tab.\n+ utils.act(() => dispatch({ type: 'SELECT_ELEMENT_AT_INDEX', payload: 0 }));\n+\n+ \/\/ Verify that the initial Profiler root selection is maintained.\n+ expect(selectedElementID).toBe(otherID);\n+ expect(context).not.toBeNull();\n+ expect(context.rootID).toBe(store.getRootIDForElement(id));\n+\n+ done();\n+ });\n+\n+ it('should sync selected element in the Components tab too, provided the element is a match', async done => {\n+ const GrandParent = ({ includeChild }) => (\n+ <Parent includeChild={includeChild} \/>\n+ );\n+ const Parent = ({ includeChild }) => (includeChild ? <Child \/> : null);\n+ const Child = () => null;\n+\n+ const container = document.createElement('div');\n+ utils.act(() =>\n+ ReactDOM.render(<GrandParent includeChild={true} \/>, container)\n+ );\n+ expect(store).toMatchSnapshot('mounted');\n+\n+ const parentID = ((store.getElementIDAtIndex(1): any): number);\n+ const childID = ((store.getElementIDAtIndex(2): any): number);\n+\n+ \/\/ Profile and record updates.\n+ await utils.actAsync(() => store.profilerStore.startProfiling());\n+ await utils.actAsync(() =>\n+ ReactDOM.render(<GrandParent includeChild={true} \/>, container)\n+ );\n+ await utils.actAsync(() =>\n+ ReactDOM.render(<GrandParent includeChild={false} \/>, container)\n+ );\n+ await utils.actAsync(() => store.profilerStore.stopProfiling());\n+\n+ expect(store).toMatchSnapshot('updated');\n+\n+ let context: Context = ((null: any): Context);\n+ let selectedElementID = null;\n+ function ContextReader() {\n+ context = React.useContext(ProfilerContext);\n+ selectedElementID = React.useContext(TreeStateContext).selectedElementID;\n+ return null;\n+ }\n+\n+ await utils.actAsync(() =>\n+ TestRenderer.create(\n+ <Contexts>\n+ <ContextReader \/>\n+ <\/Contexts>\n+ )\n+ );\n+ expect(selectedElementID).toBeNull();\n+\n+ \/\/ Select an element in the Profiler tab and verify that the selection is synced to the Components tab.\n+ await utils.actAsync(() => context.selectFiber(parentID, 'Parent'));\n+ expect(selectedElementID).toBe(parentID);\n+\n+ \/\/ We expect a \"no element found\" warning.\n+ \/\/ Let's hide it from the test console though.\n+ spyOn(console, 'warn');\n+\n+ \/\/ Select an unmounted element and verify no Components tab selection doesn't change.\n+ await utils.actAsync(() => context.selectFiber(childID, 'Child'));\n+ expect(selectedElementID).toBe(parentID);\n+\n+ expect(console.warn).toHaveBeenCalledWith(\n+ `No element found with id \"${childID}\"`\n+ );\n+\n+ done();\n+ });\n+});\ndiff --git a\/src\/__tests__\/profilerStore-test.js b\/src\/__tests__\/profilerStore-test.js\nnew file mode 100644\nindex 0000000000..0f4074f165\n--- \/dev\/null\n+++ b\/src\/__tests__\/profilerStore-test.js\n@@ -0,0 +1,75 @@\n+\/\/ @flow\n+\n+import type Store from 'src\/devtools\/store';\n+\n+describe('ProfilerStore', () => {\n+ let React;\n+ let ReactDOM;\n+ let store: Store;\n+ let utils;\n+\n+ beforeEach(() => {\n+ utils = require('.\/utils');\n+ utils.beforeEachProfiling();\n+\n+ store = global.store;\n+ store.collapseNodesByDefault = false;\n+ store.recordChangeDescriptions = true;\n+\n+ React = require('react');\n+ ReactDOM = require('react-dom');\n+ });\n+\n+ it('should not remove profiling data when roots are unmounted', async () => {\n+ const Parent = ({ count }) =>\n+ new Array(count)\n+ .fill(true)\n+ .map((_, index) => <Child key={index} duration={index} \/>);\n+ const Child = () => <div>Hi!<\/div>;\n+\n+ const containerA = document.createElement('div');\n+ const containerB = document.createElement('div');\n+\n+ utils.act(() => {\n+ ReactDOM.render(<Parent key=\"A\" count={3} \/>, containerA);\n+ ReactDOM.render(<Parent key=\"B\" count={2} \/>, containerB);\n+ });\n+\n+ utils.act(() => store.profilerStore.startProfiling());\n+\n+ utils.act(() => {\n+ ReactDOM.render(<Parent key=\"A\" count={4} \/>, containerA);\n+ ReactDOM.render(<Parent key=\"B\" count={1} \/>, containerB);\n+ });\n+\n+ utils.act(() => store.profilerStore.stopProfiling());\n+\n+ const rootA = store.roots[0];\n+ const rootB = store.roots[1];\n+\n+ utils.act(() => ReactDOM.unmountComponentAtNode(containerB));\n+\n+ expect(store.profilerStore.getDataForRoot(rootA)).not.toBeNull();\n+\n+ utils.act(() => ReactDOM.unmountComponentAtNode(containerA));\n+\n+ expect(store.profilerStore.getDataForRoot(rootB)).not.toBeNull();\n+ });\n+\n+ it('should not allow new\/saved profiling data to be set while profiling is in progress', () => {\n+ utils.act(() => store.profilerStore.startProfiling());\n+ const fauxProfilingData = {\n+ dataForRoots: new Map(),\n+ };\n+ spyOn(console, 'warn');\n+ store.profilerStore.profilingData = fauxProfilingData;\n+ expect(store.profilerStore.profilingData).not.toBe(fauxProfilingData);\n+ expect(console.warn).toHaveBeenCalledTimes(1);\n+ expect(console.warn).toHaveBeenCalledWith(\n+ 'Profiling data cannot be updated while profiling is in progress.'\n+ );\n+ utils.act(() => store.profilerStore.stopProfiling());\n+ store.profilerStore.profilingData = fauxProfilingData;\n+ expect(store.profilerStore.profilingData).toBe(fauxProfilingData);\n+ });\n+});\ndiff --git a\/src\/__tests__\/profilingCache-test.js b\/src\/__tests__\/profilingCache-test.js\nnew file mode 100644\nindex 0000000000..6f6e4742cd\n--- \/dev\/null\n+++ b\/src\/__tests__\/profilingCache-test.js\n@@ -0,0 +1,569 @@\n+\/\/ @flow\n+\n+import typeof ReactTestRenderer from 'react-test-renderer';\n+import type { FrontendBridge } from 'src\/bridge';\n+import type Store from 'src\/devtools\/store';\n+\n+describe('ProfilingCache', () => {\n+ let PropTypes;\n+ let React;\n+ let ReactDOM;\n+ let Scheduler;\n+ let SchedulerTracing;\n+ let TestRenderer: ReactTestRenderer;\n+ let bridge: FrontendBridge;\n+ let store: Store;\n+ let utils;\n+\n+ beforeEach(() => {\n+ utils = require('.\/utils');\n+ utils.beforeEachProfiling();\n+\n+ bridge = global.bridge;\n+ store = global.store;\n+ store.collapseNodesByDefault = false;\n+ store.recordChangeDescriptions = true;\n+\n+ PropTypes = require('prop-types');\n+ React = require('react');\n+ ReactDOM = require('react-dom');\n+ Scheduler = require('scheduler');\n+ SchedulerTracing = require('scheduler\/tracing');\n+ TestRenderer = utils.requireTestRenderer();\n+ });\n+\n+ it('should collect data for each root (including ones added or mounted after profiling started)', () => {\n+ const Parent = ({ count }) => {\n+ Scheduler.unstable_advanceTime(10);\n+ const children = new Array(count)\n+ .fill(true)\n+ .map((_, index) => <Child key={index} duration={index} \/>);\n+ return (\n+ <React.Fragment>\n+ {children}\n+ <MemoizedChild duration={1} \/>\n+ <\/React.Fragment>\n+ );\n+ };\n+ const Child = ({ duration }) => {\n+ Scheduler.unstable_advanceTime(duration);\n+ return null;\n+ };\n+ const MemoizedChild = React.memo(Child);\n+\n+ const containerA = document.createElement('div');\n+ const containerB = document.createElement('div');\n+ const containerC = document.createElement('div');\n+\n+ utils.act(() => ReactDOM.render(<Parent count={2} \/>, containerA));\n+ utils.act(() => ReactDOM.render(<Parent count={1} \/>, containerB));\n+ utils.act(() => store.profilerStore.startProfiling());\n+ utils.act(() => ReactDOM.render(<Parent count={3} \/>, containerA));\n+ utils.act(() => ReactDOM.render(<Parent count={1} \/>, containerC));\n+ utils.act(() => ReactDOM.render(<Parent count={1} \/>, containerA));\n+ utils.act(() => ReactDOM.unmountComponentAtNode(containerB));\n+ utils.act(() => ReactDOM.render(<Parent count={0} \/>, containerA));\n+ utils.act(() => store.profilerStore.stopProfiling());\n+\n+ let allProfilingDataForRoots = [];\n+\n+ function Validator({ previousProfilingDataForRoot, rootID }) {\n+ const profilingDataForRoot = store.profilerStore.getDataForRoot(rootID);\n+ if (previousProfilingDataForRoot != null) {\n+ expect(profilingDataForRoot).toEqual(previousProfilingDataForRoot);\n+ } else {\n+ expect(profilingDataForRoot).toMatchSnapshot(\n+ `Data for root ${profilingDataForRoot.displayName}`\n+ );\n+ }\n+ allProfilingDataForRoots.push(profilingDataForRoot);\n+ return null;\n+ }\n+\n+ const dataForRoots =\n+ store.profilerStore.profilingData !== null\n+ ? store.profilerStore.profilingData.dataForRoots\n+ : null;\n+\n+ expect(dataForRoots).not.toBeNull();\n+\n+ if (dataForRoots !== null) {\n+ dataForRoots.forEach(dataForRoot => {\n+ utils.act(() =>\n+ TestRenderer.create(\n+ <Validator\n+ previousProfilingDataForRoot={null}\n+ rootID={dataForRoot.rootID}\n+ \/>\n+ )\n+ );\n+ });\n+ }\n+\n+ expect(allProfilingDataForRoots).toHaveLength(3);\n+\n+ utils.exportImportHelper(bridge, store);\n+\n+ allProfilingDataForRoots.forEach(profilingDataForRoot => {\n+ utils.act(() =>\n+ TestRenderer.create(\n+ <Validator\n+ previousProfilingDataForRoot={profilingDataForRoot}\n+ rootID={profilingDataForRoot.rootID}\n+ \/>\n+ )\n+ );\n+ });\n+ });\n+\n+ it('should collect data for each commit', () => {\n+ const Parent = ({ count }) => {\n+ Scheduler.unstable_advanceTime(10);\n+ const children = new Array(count)\n+ .fill(true)\n+ .map((_, index) => <Child key={index} duration={index} \/>);\n+ return (\n+ <React.Fragment>\n+ {children}\n+ <MemoizedChild duration={1} \/>\n+ <\/React.Fragment>\n+ );\n+ };\n+ const Child = ({ duration }) => {\n+ Scheduler.unstable_advanceTime(duration);\n+ return null;\n+ };\n+ const MemoizedChild = React.memo(Child);\n+\n+ const container = document.createElement('div');\n+\n+ utils.act(() => store.profilerStore.startProfiling());\n+ utils.act(() => ReactDOM.render(<Parent count={2} \/>, container));\n+ utils.act(() => ReactDOM.render(<Parent count={3} \/>, container));\n+ utils.act(() => ReactDOM.render(<Parent count={1} \/>, container));\n+ utils.act(() => ReactDOM.render(<Parent count={0} \/>, container));\n+ utils.act(() => store.profilerStore.stopProfiling());\n+\n+ const allCommitData = [];\n+\n+ function Validator({ commitIndex, previousCommitDetails, rootID }) {\n+ const commitData = store.profilerStore.getCommitData(rootID, commitIndex);\n+ if (previousCommitDetails != null) {\n+ expect(commitData).toEqual(previousCommitDetails);\n+ } else {\n+ allCommitData.push(commitData);\n+ expect(commitData).toMatchSnapshot(\n+ `CommitDetails commitIndex: ${commitIndex}`\n+ );\n+ }\n+ return null;\n+ }\n+\n+ const rootID = store.roots[0];\n+\n+ for (let commitIndex = 0; commitIndex < 4; commitIndex++) {\n+ utils.act(() => {\n+ TestRenderer.create(\n+ <Validator\n+ commitIndex={commitIndex}\n+ previousCommitDetails={null}\n+ rootID={rootID}\n+ \/>\n+ );\n+ });\n+ }\n+\n+ expect(allCommitData).toHaveLength(4);\n+\n+ utils.exportImportHelper(bridge, store);\n+\n+ for (let commitIndex = 0; commitIndex < 4; commitIndex++) {\n+ utils.act(() => {\n+ TestRenderer.create(\n+ <Validator\n+ commitIndex={commitIndex}\n+ previousCommitDetails={allCommitData[commitIndex]}\n+ rootID={rootID}\n+ \/>\n+ );\n+ });\n+ }\n+ });\n+\n+ it('should record changed props\/state\/context\/hooks', () => {\n+ let instance = null;\n+\n+ const ModernContext = React.createContext(0);\n+\n+ class LegacyContextProvider extends React.Component<\n+ any,\n+ {| count: number |}\n+ > {\n+ static childContextTypes = {\n+ count: PropTypes.number,\n+ };\n+ state = { count: 0 };\n+ getChildContext() {\n+ return this.state;\n+ }\n+ render() {\n+ instance = this;\n+ return (\n+ <ModernContext.Provider value={this.state.count}>\n+ <React.Fragment>\n+ <ModernContextConsumer \/>\n+ <LegacyContextConsumer \/>\n+ <\/React.Fragment>\n+ <\/ModernContext.Provider>\n+ );\n+ }\n+ }\n+\n+ const FunctionComponentWithHooks = ({ count }) => {\n+ React.useMemo(() => count, [count]);\n+ return null;\n+ };\n+\n+ class ModernContextConsumer extends React.Component<any> {\n+ static contextType = ModernContext;\n+ render() {\n+ return <FunctionComponentWithHooks count={this.context} \/>;\n+ }\n+ }\n+\n+ class LegacyContextConsumer extends React.Component<any> {\n+ static contextTypes = {\n+ count: PropTypes.number,\n+ };\n+ render() {\n+ return <FunctionComponentWithHooks count={this.context.count} \/>;\n+ }\n+ }\n+\n+ const container = document.createElement('div');\n+\n+ utils.act(() => store.profilerStore.startProfiling());\n+ utils.act(() => ReactDOM.render(<LegacyContextProvider \/>, container));\n+ expect(instance).not.toBeNull();\n+ utils.act(() => (instance: any).setState({ count: 1 }));\n+ utils.act(() =>\n+ ReactDOM.render(<LegacyContextProvider foo={123} \/>, container)\n+ );\n+ utils.act(() =>\n+ ReactDOM.render(<LegacyContextProvider bar=\"abc\" \/>, container)\n+ );\n+ utils.act(() => ReactDOM.render(<LegacyContextProvider \/>, container));\n+ utils.act(() => store.profilerStore.stopProfiling());\n+\n+ const allCommitData = [];\n+\n+ function Validator({ commitIndex, previousCommitDetails, rootID }) {\n+ const commitData = store.profilerStore.getCommitData(rootID, commitIndex);\n+ if (previousCommitDetails != null) {\n+ expect(commitData).toEqual(previousCommitDetails);\n+ } else {\n+ allCommitData.push(commitData);\n+ expect(commitData).toMatchSnapshot(\n+ `CommitDetails commitIndex: ${commitIndex}`\n+ );\n+ }\n+ return null;\n+ }\n+\n+ const rootID = store.roots[0];\n+\n+ for (let commitIndex = 0; commitIndex < 5; commitIndex++) {\n+ utils.act(() => {\n+ TestRenderer.create(\n+ <Validator\n+ commitIndex={commitIndex}\n+ previousCommitDetails={null}\n+ rootID={rootID}\n+ \/>\n+ );\n+ });\n+ }\n+\n+ expect(allCommitData).toHaveLength(5);\n+\n+ utils.exportImportHelper(bridge, store);\n+\n+ for (let commitIndex = 0; commitIndex < 5; commitIndex++) {\n+ utils.act(() => {\n+ TestRenderer.create(\n+ <Validator\n+ commitIndex={commitIndex}\n+ previousCommitDetails={allCommitData[commitIndex]}\n+ rootID={rootID}\n+ \/>\n+ );\n+ });\n+ }\n+ });\n+\n+ it('should calculate a self duration based on actual children (not filtered children)', () => {\n+ store.componentFilters = [utils.createDisplayNameFilter('^Parent$')];\n+\n+ const Grandparent = () => {\n+ Scheduler.unstable_advanceTime(10);\n+ return (\n+ <React.Fragment>\n+ <Parent key=\"one\" \/>\n+ <Parent key=\"two\" \/>\n+ <\/React.Fragment>\n+ );\n+ };\n+ const Parent = () => {\n+ Scheduler.unstable_advanceTime(2);\n+ return <Child \/>;\n+ };\n+ const Child = () => {\n+ Scheduler.unstable_advanceTime(1);\n+ return null;\n+ };\n+\n+ utils.act(() => store.profilerStore.startProfiling());\n+ utils.act(() =>\n+ ReactDOM.render(<Grandparent \/>, document.createElement('div'))\n+ );\n+ utils.act(() => store.profilerStore.stopProfiling());\n+\n+ let commitData = null;\n+\n+ function Validator({ commitIndex, rootID }) {\n+ commitData = store.profilerStore.getCommitData(rootID, commitIndex);\n+ expect(commitData).toMatchSnapshot(\n+ `CommitDetails with filtered self durations`\n+ );\n+ return null;\n+ }\n+\n+ const rootID = store.roots[0];\n+\n+ utils.act(() => {\n+ TestRenderer.create(<Validator commitIndex={0} rootID={rootID} \/>);\n+ });\n+\n+ expect(commitData).not.toBeNull();\n+ });\n+\n+ it('should calculate self duration correctly for suspended views', async done => {\n+ let data;\n+ const getData = () => {\n+ if (data) {\n+ return data;\n+ } else {\n+ throw new Promise(resolve => {\n+ data = 'abc';\n+ resolve(data);\n+ });\n+ }\n+ };\n+\n+ const Parent = () => {\n+ Scheduler.unstable_advanceTime(10);\n+ return (\n+ <React.Suspense fallback={<Fallback \/>}>\n+ <Async \/>\n+ <\/React.Suspense>\n+ );\n+ };\n+ const Fallback = () => {\n+ Scheduler.unstable_advanceTime(2);\n+ return 'Fallback...';\n+ };\n+ const Async = () => {\n+ Scheduler.unstable_advanceTime(3);\n+ const data = getData();\n+ return data;\n+ };\n+\n+ utils.act(() => store.profilerStore.startProfiling());\n+ await utils.actAsync(() =>\n+ ReactDOM.render(<Parent \/>, document.createElement('div'))\n+ );\n+ utils.act(() => store.profilerStore.stopProfiling());\n+\n+ const allCommitData = [];\n+\n+ function Validator({ commitIndex, rootID }) {\n+ const commitData = store.profilerStore.getCommitData(rootID, commitIndex);\n+ allCommitData.push(commitData);\n+ expect(commitData).toMatchSnapshot(\n+ `CommitDetails with filtered self durations`\n+ );\n+ return null;\n+ }\n+\n+ const rootID = store.roots[0];\n+\n+ for (let commitIndex = 0; commitIndex < 2; commitIndex++) {\n+ utils.act(() => {\n+ TestRenderer.create(\n+ <Validator commitIndex={commitIndex} rootID={rootID} \/>\n+ );\n+ });\n+ }\n+\n+ expect(allCommitData).toHaveLength(2);\n+\n+ done();\n+ });\n+\n+ it('should collect data for each rendered fiber', () => {\n+ const Parent = ({ count }) => {\n+ Scheduler.unstable_advanceTime(10);\n+ const children = new Array(count)\n+ .fill(true)\n+ .map((_, index) => <Child key={index} duration={index} \/>);\n+ return (\n+ <React.Fragment>\n+ {children}\n+ <MemoizedChild duration={1} \/>\n+ <\/React.Fragment>\n+ );\n+ };\n+ const Child = ({ duration }) => {\n+ Scheduler.unstable_advanceTime(duration);\n+ return null;\n+ };\n+ const MemoizedChild = React.memo(Child);\n+\n+ const container = document.createElement('div');\n+\n+ utils.act(() => store.profilerStore.startProfiling());\n+ utils.act(() => ReactDOM.render(<Parent count={1} \/>, container));\n+ utils.act(() => ReactDOM.render(<Parent count={2} \/>, container));\n+ utils.act(() => ReactDOM.render(<Parent count={3} \/>, container));\n+ utils.act(() => store.profilerStore.stopProfiling());\n+\n+ const allFiberCommits = [];\n+\n+ function Validator({ fiberID, previousFiberCommits, rootID }) {\n+ const fiberCommits = store.profilerStore.profilingCache.getFiberCommits({\n+ fiberID,\n+ rootID,\n+ });\n+ if (previousFiberCommits != null) {\n+ expect(fiberCommits).toEqual(previousFiberCommits);\n+ } else {\n+ allFiberCommits.push(fiberCommits);\n+ expect(fiberCommits).toMatchSnapshot(\n+ `FiberCommits: element ${fiberID}`\n+ );\n+ }\n+ return null;\n+ }\n+\n+ const rootID = store.roots[0];\n+\n+ for (let index = 0; index < store.numElements; index++) {\n+ utils.act(() => {\n+ const fiberID = store.getElementIDAtIndex(index);\n+ if (fiberID == null) {\n+ throw Error(`Unexpected null ID for element at index ${index}`);\n+ }\n+ TestRenderer.create(\n+ <Validator\n+ fiberID={fiberID}\n+ previousFiberCommits={null}\n+ rootID={rootID}\n+ \/>\n+ );\n+ });\n+ }\n+\n+ expect(allFiberCommits).toHaveLength(store.numElements);\n+\n+ utils.exportImportHelper(bridge, store);\n+\n+ for (let index = 0; index < store.numElements; index++) {\n+ utils.act(() => {\n+ const fiberID = store.getElementIDAtIndex(index);\n+ if (fiberID == null) {\n+ throw Error(`Unexpected null ID for element at index ${index}`);\n+ }\n+ TestRenderer.create(\n+ <Validator\n+ fiberID={fiberID}\n+ previousFiberCommits={allFiberCommits[index]}\n+ rootID={rootID}\n+ \/>\n+ );\n+ });\n+ }\n+ });\n+\n+ it('should report every traced interaction', () => {\n+ const Parent = ({ count }) => {\n+ Scheduler.unstable_advanceTime(10);\n+ const children = new Array(count)\n+ .fill(true)\n+ .map((_, index) => <Child key={index} duration={index} \/>);\n+ return (\n+ <React.Fragment>\n+ {children}\n+ <MemoizedChild duration={1} \/>\n+ <\/React.Fragment>\n+ );\n+ };\n+ const Child = ({ duration }) => {\n+ Scheduler.unstable_advanceTime(duration);\n+ return null;\n+ };\n+ const MemoizedChild = React.memo(Child);\n+\n+ const container = document.createElement('div');\n+\n+ utils.act(() => store.profilerStore.startProfiling());\n+ utils.act(() =>\n+ SchedulerTracing.unstable_trace(\n+ 'mount: one child',\n+ Scheduler.unstable_now(),\n+ () => ReactDOM.render(<Parent count={1} \/>, container)\n+ )\n+ );\n+ utils.act(() =>\n+ SchedulerTracing.unstable_trace(\n+ 'update: two children',\n+ Scheduler.unstable_now(),\n+ () => ReactDOM.render(<Parent count={2} \/>, container)\n+ )\n+ );\n+ utils.act(() => store.profilerStore.stopProfiling());\n+\n+ let interactions = null;\n+\n+ function Validator({ previousInteractions, rootID }) {\n+ interactions = store.profilerStore.profilingCache.getInteractionsChartData(\n+ {\n+ rootID,\n+ }\n+ ).interactions;\n+ if (previousInteractions != null) {\n+ expect(interactions).toEqual(previousInteractions);\n+ } else {\n+ expect(interactions).toMatchSnapshot('Interactions');\n+ }\n+ return null;\n+ }\n+\n+ const rootID = store.roots[0];\n+\n+ utils.act(() =>\n+ TestRenderer.create(\n+ <Validator previousInteractions={null} rootID={rootID} \/>\n+ )\n+ );\n+\n+ expect(interactions).not.toBeNull();\n+\n+ utils.exportImportHelper(bridge, store);\n+\n+ utils.act(() =>\n+ TestRenderer.create(\n+ <Validator previousInteractions={interactions} rootID={rootID} \/>\n+ )\n+ );\n+ });\n+});\ndiff --git a\/src\/__tests__\/profilingCharts-test.js b\/src\/__tests__\/profilingCharts-test.js\nnew file mode 100644\nindex 0000000000..0e7fff951e\n--- \/dev\/null\n+++ b\/src\/__tests__\/profilingCharts-test.js\n@@ -0,0 +1,242 @@\n+\/\/ @flow\n+\n+import typeof TestRendererType from 'react-test-renderer';\n+import type Store from 'src\/devtools\/store';\n+\n+describe('profiling charts', () => {\n+ let React;\n+ let ReactDOM;\n+ let Scheduler;\n+ let SchedulerTracing;\n+ let TestRenderer: TestRendererType;\n+ let store: Store;\n+ let utils;\n+\n+ beforeEach(() => {\n+ utils = require('.\/utils');\n+ utils.beforeEachProfiling();\n+\n+ store = global.store;\n+ store.collapseNodesByDefault = false;\n+ store.recordChangeDescriptions = true;\n+\n+ React = require('react');\n+ ReactDOM = require('react-dom');\n+ Scheduler = require('scheduler');\n+ SchedulerTracing = require('scheduler\/tracing');\n+ TestRenderer = utils.requireTestRenderer();\n+ });\n+\n+ describe('flamegraph chart', () => {\n+ it('should contain valid data', () => {\n+ const Parent = (_: {||}) => {\n+ Scheduler.unstable_advanceTime(10);\n+ return (\n+ <React.Fragment>\n+ <Child key=\"first\" duration={3} \/>\n+ <Child key=\"second\" duration={2} \/>\n+ <Child key=\"third\" duration={0} \/>\n+ <\/React.Fragment>\n+ );\n+ };\n+\n+ \/\/ Memoize children to verify that chart doesn't include in the update.\n+ const Child = React.memo(function Child({ duration }) {\n+ Scheduler.unstable_advanceTime(duration);\n+ return null;\n+ });\n+\n+ const container = document.createElement('div');\n+\n+ utils.act(() => store.profilerStore.startProfiling());\n+ utils.act(() =>\n+ SchedulerTracing.unstable_trace('mount', Scheduler.unstable_now(), () =>\n+ ReactDOM.render(<Parent \/>, container)\n+ )\n+ );\n+ utils.act(() =>\n+ SchedulerTracing.unstable_trace(\n+ 'update',\n+ Scheduler.unstable_now(),\n+ () => ReactDOM.render(<Parent \/>, container)\n+ )\n+ );\n+ utils.act(() => store.profilerStore.stopProfiling());\n+\n+ let renderFinished = false;\n+\n+ function Validator({ commitIndex, rootID }) {\n+ const commitTree = store.profilerStore.profilingCache.getCommitTree({\n+ commitIndex,\n+ rootID,\n+ });\n+ const chartData = store.profilerStore.profilingCache.getFlamegraphChartData(\n+ {\n+ commitIndex,\n+ commitTree,\n+ rootID,\n+ }\n+ );\n+ expect(commitTree).toMatchSnapshot(`${commitIndex}: CommitTree`);\n+ expect(chartData).toMatchSnapshot(\n+ `${commitIndex}: FlamegraphChartData`\n+ );\n+ renderFinished = true;\n+ return null;\n+ }\n+\n+ const rootID = store.roots[0];\n+\n+ for (let commitIndex = 0; commitIndex < 2; commitIndex++) {\n+ renderFinished = false;\n+\n+ utils.act(() => {\n+ TestRenderer.create(\n+ <Validator commitIndex={commitIndex} rootID={rootID} \/>\n+ );\n+ });\n+\n+ expect(renderFinished).toBe(true);\n+ }\n+\n+ expect(renderFinished).toBe(true);\n+ });\n+ });\n+\n+ describe('ranked chart', () => {\n+ it('should contain valid data', () => {\n+ const Parent = (_: {||}) => {\n+ Scheduler.unstable_advanceTime(10);\n+ return (\n+ <React.Fragment>\n+ <Child key=\"first\" duration={3} \/>\n+ <Child key=\"second\" duration={2} \/>\n+ <Child key=\"third\" duration={0} \/>\n+ <\/React.Fragment>\n+ );\n+ };\n+\n+ \/\/ Memoize children to verify that chart doesn't include in the update.\n+ const Child = React.memo(function Child({ duration }) {\n+ Scheduler.unstable_advanceTime(duration);\n+ return null;\n+ });\n+\n+ const container = document.createElement('div');\n+\n+ utils.act(() => store.profilerStore.startProfiling());\n+ utils.act(() =>\n+ SchedulerTracing.unstable_trace('mount', Scheduler.unstable_now(), () =>\n+ ReactDOM.render(<Parent \/>, container)\n+ )\n+ );\n+ utils.act(() =>\n+ SchedulerTracing.unstable_trace(\n+ 'update',\n+ Scheduler.unstable_now(),\n+ () => ReactDOM.render(<Parent \/>, container)\n+ )\n+ );\n+ utils.act(() => store.profilerStore.stopProfiling());\n+\n+ let renderFinished = false;\n+\n+ function Validator({ commitIndex, rootID }) {\n+ const commitTree = store.profilerStore.profilingCache.getCommitTree({\n+ commitIndex,\n+ rootID,\n+ });\n+ const chartData = store.profilerStore.profilingCache.getRankedChartData(\n+ {\n+ commitIndex,\n+ commitTree,\n+ rootID,\n+ }\n+ );\n+ expect(commitTree).toMatchSnapshot(`${commitIndex}: CommitTree`);\n+ expect(chartData).toMatchSnapshot(`${commitIndex}: RankedChartData`);\n+ renderFinished = true;\n+ return null;\n+ }\n+\n+ const rootID = store.roots[0];\n+\n+ for (let commitIndex = 0; commitIndex < 2; commitIndex++) {\n+ renderFinished = false;\n+\n+ utils.act(() => {\n+ TestRenderer.create(\n+ <Validator commitIndex={commitIndex} rootID={rootID} \/>\n+ );\n+ });\n+\n+ expect(renderFinished).toBe(true);\n+ }\n+ });\n+ });\n+\n+ describe('interactions', () => {\n+ it('should contain valid data', () => {\n+ const Parent = (_: {||}) => {\n+ Scheduler.unstable_advanceTime(10);\n+ return (\n+ <React.Fragment>\n+ <Child key=\"first\" duration={3} \/>\n+ <Child key=\"second\" duration={2} \/>\n+ <Child key=\"third\" duration={0} \/>\n+ <\/React.Fragment>\n+ );\n+ };\n+\n+ \/\/ Memoize children to verify that chart doesn't include in the update.\n+ const Child = React.memo(function Child({ duration }) {\n+ Scheduler.unstable_advanceTime(duration);\n+ return null;\n+ });\n+\n+ const container = document.createElement('div');\n+\n+ utils.act(() => store.profilerStore.startProfiling());\n+ utils.act(() =>\n+ SchedulerTracing.unstable_trace('mount', Scheduler.unstable_now(), () =>\n+ ReactDOM.render(<Parent \/>, container)\n+ )\n+ );\n+ utils.act(() =>\n+ SchedulerTracing.unstable_trace(\n+ 'update',\n+ Scheduler.unstable_now(),\n+ () => ReactDOM.render(<Parent \/>, container)\n+ )\n+ );\n+ utils.act(() => store.profilerStore.stopProfiling());\n+\n+ let renderFinished = false;\n+\n+ function Validator({ commitIndex, rootID }) {\n+ const chartData = store.profilerStore.profilingCache.getInteractionsChartData(\n+ {\n+ rootID,\n+ }\n+ );\n+ expect(chartData).toMatchSnapshot('Interactions');\n+ renderFinished = true;\n+ return null;\n+ }\n+\n+ const rootID = store.roots[0];\n+\n+ for (let commitIndex = 0; commitIndex < 2; commitIndex++) {\n+ renderFinished = false;\n+\n+ utils.act(() => {\n+ TestRenderer.create(\n+ <Validator commitIndex={commitIndex} rootID={rootID} \/>\n+ );\n+ });\n+\n+ expect(renderFinished).toBe(true);\n+ }\n+ });\n+ });\n+});\ndiff --git a\/src\/__tests__\/profilingCommitTreeBuilder-test.js b\/src\/__tests__\/profilingCommitTreeBuilder-test.js\nnew file mode 100644\nindex 0000000000..0ef670607f\n--- \/dev\/null\n+++ b\/src\/__tests__\/profilingCommitTreeBuilder-test.js\n@@ -0,0 +1,75 @@\n+\/\/ @flow\n+\n+import typeof TestRendererType from 'react-test-renderer';\n+import type Store from 'src\/devtools\/store';\n+\n+describe('commit tree', () => {\n+ let React;\n+ let ReactDOM;\n+ let Scheduler;\n+ let TestRenderer: TestRendererType;\n+ let store: Store;\n+ let utils;\n+\n+ beforeEach(() => {\n+ utils = require('.\/utils');\n+ utils.beforeEachProfiling();\n+\n+ store = global.store;\n+ store.collapseNodesByDefault = false;\n+ store.recordChangeDescriptions = true;\n+\n+ React = require('react');\n+ ReactDOM = require('react-dom');\n+ Scheduler = require('scheduler');\n+ TestRenderer = utils.requireTestRenderer();\n+ });\n+\n+ it('should be able to rebuild the store tree for each commit', () => {\n+ const Parent = ({ count }) => {\n+ Scheduler.unstable_advanceTime(10);\n+ return new Array(count)\n+ .fill(true)\n+ .map((_, index) => <Child key={index} \/>);\n+ };\n+ const Child = React.memo(function Child() {\n+ Scheduler.unstable_advanceTime(2);\n+ return null;\n+ });\n+\n+ const container = document.createElement('div');\n+\n+ utils.act(() => store.profilerStore.startProfiling());\n+ utils.act(() => ReactDOM.render(<Parent count={1} \/>, container));\n+ utils.act(() => ReactDOM.render(<Parent count={3} \/>, container));\n+ utils.act(() => ReactDOM.render(<Parent count={2} \/>, container));\n+ utils.act(() => ReactDOM.render(<Parent count={0} \/>, container));\n+ utils.act(() => store.profilerStore.stopProfiling());\n+\n+ let renderFinished = false;\n+\n+ function Validator({ commitIndex, rootID }) {\n+ const commitTree = store.profilerStore.profilingCache.getCommitTree({\n+ commitIndex,\n+ rootID,\n+ });\n+ expect(commitTree).toMatchSnapshot(`${commitIndex}: CommitTree`);\n+ renderFinished = true;\n+ return null;\n+ }\n+\n+ const rootID = store.roots[0];\n+\n+ for (let commitIndex = 0; commitIndex < 4; commitIndex++) {\n+ renderFinished = false;\n+\n+ utils.act(() => {\n+ TestRenderer.create(\n+ <Validator commitIndex={commitIndex} rootID={rootID} \/>\n+ );\n+ });\n+\n+ expect(renderFinished).toBe(true);\n+ }\n+ });\n+});\ndiff --git a\/src\/__tests__\/profilingUtils-test.js b\/src\/__tests__\/profilingUtils-test.js\nnew file mode 100644\nindex 0000000000..66029a2568\n--- \/dev\/null\n+++ b\/src\/__tests__\/profilingUtils-test.js\n@@ -0,0 +1,20 @@\n+\/\/ @flow\n+\n+describe('profiling utils', () => {\n+ let utils;\n+\n+ beforeEach(() => {\n+ utils = require('src\/devtools\/views\/Profiler\/utils');\n+ });\n+\n+ it('should throw if importing older\/unsupported data', () => {\n+ expect(() =>\n+ utils.prepareProfilingDataFrontendFromExport(\n+ ({\n+ version: 0,\n+ dataForRoots: [],\n+ }: any)\n+ )\n+ ).toThrow('Unsupported profiler export version \"0\"');\n+ });\n+});\ndiff --git a\/src\/__tests__\/setupEnv.js b\/src\/__tests__\/setupEnv.js\nnew file mode 100644\nindex 0000000000..0198427ad9\n--- \/dev\/null\n+++ b\/src\/__tests__\/setupEnv.js\n@@ -0,0 +1,15 @@\n+\/\/ @flow\n+\n+import storage from 'local-storage-fallback';\n+\n+\/\/ In case async\/await syntax is used in a test.\n+import 'regenerator-runtime\/runtime';\n+\n+\/\/ DevTools stores preferences between sessions in localStorage\n+if (!global.hasOwnProperty('localStorage')) {\n+ global.localStorage = storage;\n+}\n+\n+\/\/ Mimic the global we set with Webpack's DefinePlugin\n+global.__DEV__ = process.env.NODE_ENV !== 'production';\n+global.__TEST__ = process.env.NODE_ENV === 'test';\ndiff --git a\/src\/__tests__\/setupTests.js b\/src\/__tests__\/setupTests.js\nnew file mode 100644\nindex 0000000000..3fb0a57a2f\n--- \/dev\/null\n+++ b\/src\/__tests__\/setupTests.js\n@@ -0,0 +1,76 @@\n+\/\/ @flow\n+\n+import type { BackendBridge, FrontendBridge } from 'src\/bridge';\n+\n+const env = jasmine.getEnv();\n+env.beforeEach(() => {\n+ \/\/ These files should be required (and re-reuired) before each test,\n+ \/\/ rather than imported at the head of the module.\n+ \/\/ That's because we reset modules between tests,\n+ \/\/ which disconnects the DevTool's cache from the current dispatcher ref.\n+ const Agent = require('src\/backend\/agent').default;\n+ const { initBackend } = require('src\/backend');\n+ const Bridge = require('src\/bridge').default;\n+ const Store = require('src\/devtools\/store').default;\n+ const { installHook } = require('src\/hook');\n+ const {\n+ getDefaultComponentFilters,\n+ saveComponentFilters,\n+ } = require('src\/utils');\n+\n+ \/\/ Fake timers let us flush Bridge operations between setup and assertions.\n+ jest.useFakeTimers();\n+\n+ const originalConsoleError = console.error;\n+ \/\/ $FlowFixMe\n+ console.error = (...args) => {\n+ if (args[0] === 'Warning: React DevTools encountered an error: %s') {\n+ \/\/ Rethrow errors from React.\n+ throw args[1];\n+ }\n+ originalConsoleError.apply(console, args);\n+ };\n+\n+ \/\/ Initialize filters to a known good state.\n+ saveComponentFilters(getDefaultComponentFilters());\n+ global.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = getDefaultComponentFilters();\n+\n+ installHook(global);\n+\n+ const bridgeListeners = [];\n+ const bridge = new Bridge({\n+ listen(callback) {\n+ bridgeListeners.push(callback);\n+ return () => {\n+ const index = bridgeListeners.indexOf(callback);\n+ if (index >= 0) {\n+ bridgeListeners.splice(index, 1);\n+ }\n+ };\n+ },\n+ send(event: string, payload: any, transferable?: Array<any>) {\n+ bridgeListeners.forEach(callback => callback({ event, payload }));\n+ },\n+ });\n+\n+ const agent = new Agent(((bridge: any): BackendBridge));\n+\n+ const hook = global.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+\n+ initBackend(hook, agent, global);\n+\n+ const store = new Store(((bridge: any): FrontendBridge));\n+\n+ global.agent = agent;\n+ global.bridge = bridge;\n+ global.store = store;\n+});\n+env.afterEach(() => {\n+ delete global.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+\n+ \/\/ It's important to reset modules between test runs;\n+ \/\/ Without this, ReactDOM won't re-inject itself into the new hook.\n+ \/\/ It's also important to reset after tests, rather than before,\n+ \/\/ so that we don't disconnect the ReactCurrentDispatcher ref.\n+ jest.resetModules();\n+});\ndiff --git a\/src\/__tests__\/store-test.js b\/src\/__tests__\/store-test.js\nnew file mode 100644\nindex 0000000000..7c273a7c31\n--- \/dev\/null\n+++ b\/src\/__tests__\/store-test.js\n@@ -0,0 +1,800 @@\n+\/\/ @flow\n+\n+describe('Store', () => {\n+ let React;\n+ let ReactDOM;\n+ let agent;\n+ let act;\n+ let getRendererID;\n+ let store;\n+\n+ beforeEach(() => {\n+ agent = global.agent;\n+ store = global.store;\n+\n+ React = require('react');\n+ ReactDOM = require('react-dom');\n+\n+ const utils = require('.\/utils');\n+ act = utils.act;\n+ getRendererID = utils.getRendererID;\n+ });\n+\n+ it('should not allow a root node to be collapsed', () => {\n+ const Component = () => <div>Hi<\/div>;\n+\n+ act(() =>\n+ ReactDOM.render(<Component count={4} \/>, document.createElement('div'))\n+ );\n+ expect(store).toMatchSnapshot('1: mount');\n+\n+ expect(store.roots).toHaveLength(1);\n+\n+ const rootID = store.roots[0];\n+\n+ expect(() => store.toggleIsCollapsed(rootID, true)).toThrow(\n+ 'Root nodes cannot be collapsed'\n+ );\n+ });\n+\n+ it('should properly handle a root with no visible nodes', () => {\n+ const Root = ({ children }) => children;\n+\n+ const container = document.createElement('div');\n+\n+ act(() => ReactDOM.render(<Root>{null}<\/Root>, container));\n+ expect(store).toMatchSnapshot('1: mount');\n+\n+ act(() => ReactDOM.render(<div \/>, container));\n+ expect(store).toMatchSnapshot('2: add host nodes');\n+ });\n+\n+ describe('collapseNodesByDefault:false', () => {\n+ beforeEach(() => {\n+ store.collapseNodesByDefault = false;\n+ });\n+\n+ it('should support mount and update operations', () => {\n+ const Grandparent = ({ count }) => (\n+ <React.Fragment>\n+ <Parent count={count} \/>\n+ <Parent count={count} \/>\n+ <\/React.Fragment>\n+ );\n+ const Parent = ({ count }) =>\n+ new Array(count).fill(true).map((_, index) => <Child key={index} \/>);\n+ const Child = () => <div>Hi!<\/div>;\n+\n+ const container = document.createElement('div');\n+\n+ act(() => ReactDOM.render(<Grandparent count={4} \/>, container));\n+ expect(store).toMatchSnapshot('1: mount');\n+\n+ act(() => ReactDOM.render(<Grandparent count={2} \/>, container));\n+ expect(store).toMatchSnapshot('2: update');\n+\n+ act(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(store).toMatchSnapshot('3: unmount');\n+ });\n+\n+ it('should support mount and update operations for multiple roots', () => {\n+ const Parent = ({ count }) =>\n+ new Array(count).fill(true).map((_, index) => <Child key={index} \/>);\n+ const Child = () => <div>Hi!<\/div>;\n+\n+ const containerA = document.createElement('div');\n+ const containerB = document.createElement('div');\n+\n+ act(() => {\n+ ReactDOM.render(<Parent key=\"A\" count={3} \/>, containerA);\n+ ReactDOM.render(<Parent key=\"B\" count={2} \/>, containerB);\n+ });\n+ expect(store).toMatchSnapshot('1: mount');\n+\n+ act(() => {\n+ ReactDOM.render(<Parent key=\"A\" count={4} \/>, containerA);\n+ ReactDOM.render(<Parent key=\"B\" count={1} \/>, containerB);\n+ });\n+ expect(store).toMatchSnapshot('2: update');\n+\n+ act(() => ReactDOM.unmountComponentAtNode(containerB));\n+ expect(store).toMatchSnapshot('3: unmount B');\n+\n+ act(() => ReactDOM.unmountComponentAtNode(containerA));\n+ expect(store).toMatchSnapshot('4: unmount A');\n+ });\n+\n+ it('should filter DOM nodes from the store tree', () => {\n+ const Grandparent = () => (\n+ <div>\n+ <div>\n+ <Parent \/>\n+ <\/div>\n+ <Parent \/>\n+ <\/div>\n+ );\n+ const Parent = () => (\n+ <div>\n+ <Child \/>\n+ <\/div>\n+ );\n+ const Child = () => <div>Hi!<\/div>;\n+\n+ act(() =>\n+ ReactDOM.render(\n+ <Grandparent count={4} \/>,\n+ document.createElement('div')\n+ )\n+ );\n+ expect(store).toMatchSnapshot('1: mount');\n+ });\n+\n+ it('should display Suspense nodes properly in various states', () => {\n+ const Loading = () => <div>Loading...<\/div>;\n+ const SuspendingComponent = () => {\n+ throw new Promise(() => {});\n+ };\n+ const Component = () => {\n+ return <div>Hello<\/div>;\n+ };\n+ const Wrapper = ({ shouldSuspense }) => (\n+ <React.Fragment>\n+ <Component key=\"Outside\" \/>\n+ <React.Suspense fallback={<Loading \/>}>\n+ {shouldSuspense ? (\n+ <SuspendingComponent \/>\n+ ) : (\n+ <Component key=\"Inside\" \/>\n+ )}\n+ <\/React.Suspense>\n+ <\/React.Fragment>\n+ );\n+\n+ const container = document.createElement('div');\n+ act(() => ReactDOM.render(<Wrapper shouldSuspense={true} \/>, container));\n+ expect(store).toMatchSnapshot('1: loading');\n+\n+ act(() => {\n+ ReactDOM.render(<Wrapper shouldSuspense={false} \/>, container);\n+ });\n+ expect(store).toMatchSnapshot('2: resolved');\n+ });\n+\n+ it('should support nested Suspense nodes', () => {\n+ const Component = () => null;\n+ const Loading = () => <div>Loading...<\/div>;\n+ const Never = () => {\n+ throw new Promise(() => {});\n+ };\n+\n+ const Wrapper = ({\n+ suspendFirst = false,\n+ suspendSecond = false,\n+ suspendParent = false,\n+ }) => (\n+ <React.Fragment>\n+ <Component key=\"Outside\" \/>\n+ <React.Suspense fallback={<Loading key=\"Parent Fallback\" \/>}>\n+ <Component key=\"Unrelated at Start\" \/>\n+ <React.Suspense fallback={<Loading key=\"Suspense 1 Fallback\" \/>}>\n+ {suspendFirst ? (\n+ <Never \/>\n+ ) : (\n+ <Component key=\"Suspense 1 Content\" \/>\n+ )}\n+ <\/React.Suspense>\n+ <React.Suspense fallback={<Loading key=\"Suspense 2 Fallback\" \/>}>\n+ {suspendSecond ? (\n+ <Never \/>\n+ ) : (\n+ <Component key=\"Suspense 2 Content\" \/>\n+ )}\n+ <\/React.Suspense>\n+ <React.Suspense fallback={<Loading key=\"Suspense 3 Fallback\" \/>}>\n+ <Never \/>\n+ <\/React.Suspense>\n+ {suspendParent && <Never \/>}\n+ <Component key=\"Unrelated at End\" \/>\n+ <\/React.Suspense>\n+ <\/React.Fragment>\n+ );\n+\n+ const container = document.createElement('div');\n+ act(() =>\n+ ReactDOM.render(\n+ <Wrapper\n+ suspendParent={false}\n+ suspendFirst={false}\n+ suspendSecond={false}\n+ \/>,\n+ container\n+ )\n+ );\n+ expect(store).toMatchSnapshot('1: third child is suspended');\n+ act(() =>\n+ ReactDOM.render(\n+ <Wrapper\n+ suspendParent={false}\n+ suspendFirst={true}\n+ suspendSecond={false}\n+ \/>,\n+ container\n+ )\n+ );\n+ expect(store).toMatchSnapshot('2: first and third child are suspended');\n+ act(() =>\n+ ReactDOM.render(\n+ <Wrapper\n+ suspendParent={false}\n+ suspendFirst={false}\n+ suspendSecond={true}\n+ \/>,\n+ container\n+ )\n+ );\n+ expect(store).toMatchSnapshot('3: second and third child are suspended');\n+ act(() =>\n+ ReactDOM.render(\n+ <Wrapper\n+ suspendParent={false}\n+ suspendFirst={true}\n+ suspendSecond={false}\n+ \/>,\n+ container\n+ )\n+ );\n+ expect(store).toMatchSnapshot('4: first and third child are suspended');\n+ act(() =>\n+ ReactDOM.render(\n+ <Wrapper\n+ suspendParent={true}\n+ suspendFirst={true}\n+ suspendSecond={false}\n+ \/>,\n+ container\n+ )\n+ );\n+ expect(store).toMatchSnapshot('5: parent is suspended');\n+ act(() =>\n+ ReactDOM.render(\n+ <Wrapper\n+ suspendParent={false}\n+ suspendFirst={true}\n+ suspendSecond={true}\n+ \/>,\n+ container\n+ )\n+ );\n+ expect(store).toMatchSnapshot('6: all children are suspended');\n+ act(() =>\n+ ReactDOM.render(\n+ <Wrapper\n+ suspendParent={false}\n+ suspendFirst={false}\n+ suspendSecond={false}\n+ \/>,\n+ container\n+ )\n+ );\n+ expect(store).toMatchSnapshot('7: only third child is suspended');\n+\n+ const rendererID = getRendererID();\n+ act(() =>\n+ agent.overrideSuspense({\n+ id: store.getElementIDAtIndex(4),\n+ rendererID,\n+ forceFallback: true,\n+ })\n+ );\n+ expect(store).toMatchSnapshot('8: first and third child are suspended');\n+ act(() =>\n+ agent.overrideSuspense({\n+ id: store.getElementIDAtIndex(2),\n+ rendererID,\n+ forceFallback: true,\n+ })\n+ );\n+ expect(store).toMatchSnapshot('9: parent is suspended');\n+ act(() =>\n+ ReactDOM.render(\n+ <Wrapper\n+ suspendParent={false}\n+ suspendFirst={true}\n+ suspendSecond={true}\n+ \/>,\n+ container\n+ )\n+ );\n+ expect(store).toMatchSnapshot('10: parent is suspended');\n+ act(() =>\n+ agent.overrideSuspense({\n+ id: store.getElementIDAtIndex(2),\n+ rendererID,\n+ forceFallback: false,\n+ })\n+ );\n+ expect(store).toMatchSnapshot('11: all children are suspended');\n+ act(() =>\n+ agent.overrideSuspense({\n+ id: store.getElementIDAtIndex(4),\n+ rendererID,\n+ forceFallback: false,\n+ })\n+ );\n+ expect(store).toMatchSnapshot('12: all children are suspended');\n+ act(() =>\n+ ReactDOM.render(\n+ <Wrapper\n+ suspendParent={false}\n+ suspendFirst={false}\n+ suspendSecond={false}\n+ \/>,\n+ container\n+ )\n+ );\n+ expect(store).toMatchSnapshot('13: third child is suspended');\n+ });\n+\n+ it('should support collapsing parts of the tree', () => {\n+ const Grandparent = ({ count }) => (\n+ <React.Fragment>\n+ <Parent count={count} \/>\n+ <Parent count={count} \/>\n+ <\/React.Fragment>\n+ );\n+ const Parent = ({ count }) =>\n+ new Array(count).fill(true).map((_, index) => <Child key={index} \/>);\n+ const Child = () => <div>Hi!<\/div>;\n+\n+ act(() =>\n+ ReactDOM.render(\n+ <Grandparent count={2} \/>,\n+ document.createElement('div')\n+ )\n+ );\n+ expect(store).toMatchSnapshot('1: mount');\n+\n+ const grandparentID = store.getElementIDAtIndex(0);\n+ const parentOneID = store.getElementIDAtIndex(1);\n+ const parentTwoID = store.getElementIDAtIndex(4);\n+\n+ act(() => store.toggleIsCollapsed(parentOneID, true));\n+ expect(store).toMatchSnapshot('2: collapse first Parent');\n+\n+ act(() => store.toggleIsCollapsed(parentTwoID, true));\n+ expect(store).toMatchSnapshot('3: collapse second Parent');\n+\n+ act(() => store.toggleIsCollapsed(parentOneID, false));\n+ expect(store).toMatchSnapshot('4: expand first Parent');\n+\n+ act(() => store.toggleIsCollapsed(grandparentID, true));\n+ expect(store).toMatchSnapshot('5: collapse Grandparent');\n+\n+ act(() => store.toggleIsCollapsed(grandparentID, false));\n+ expect(store).toMatchSnapshot('6: expand Grandparent');\n+ });\n+\n+ it('should support reordering of children', () => {\n+ const Root = ({ children }) => children;\n+ const Component = () => null;\n+\n+ const Foo = () => [<Component key=\"0\" \/>];\n+ const Bar = () => [<Component key=\"0\" \/>, <Component key=\"1\" \/>];\n+ const foo = <Foo key=\"foo\" \/>;\n+ const bar = <Bar key=\"bar\" \/>;\n+\n+ const container = document.createElement('div');\n+\n+ act(() => ReactDOM.render(<Root>{[foo, bar]}<\/Root>, container));\n+ expect(store).toMatchSnapshot('1: mount');\n+\n+ act(() => ReactDOM.render(<Root>{[bar, foo]}<\/Root>, container));\n+ expect(store).toMatchSnapshot('3: reorder children');\n+\n+ act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), true));\n+ expect(store).toMatchSnapshot('4: collapse root');\n+\n+ act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));\n+ expect(store).toMatchSnapshot('5: expand root');\n+ });\n+ });\n+\n+ describe('collapseNodesByDefault:true', () => {\n+ beforeEach(() => {\n+ store.collapseNodesByDefault = true;\n+ });\n+\n+ it('should support mount and update operations', () => {\n+ const Parent = ({ count }) =>\n+ new Array(count).fill(true).map((_, index) => <Child key={index} \/>);\n+ const Child = () => <div>Hi!<\/div>;\n+\n+ const container = document.createElement('div');\n+\n+ act(() =>\n+ ReactDOM.render(\n+ <React.Fragment>\n+ <Parent count={1} \/>\n+ <Parent count={3} \/>\n+ <\/React.Fragment>,\n+ container\n+ )\n+ );\n+ expect(store).toMatchSnapshot('1: mount');\n+\n+ act(() =>\n+ ReactDOM.render(\n+ <React.Fragment>\n+ <Parent count={2} \/>\n+ <Parent count={1} \/>\n+ <\/React.Fragment>,\n+ container\n+ )\n+ );\n+ expect(store).toMatchSnapshot('2: update');\n+\n+ act(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(store).toMatchSnapshot('3: unmount');\n+ });\n+\n+ it('should support mount and update operations for multiple roots', () => {\n+ const Parent = ({ count }) =>\n+ new Array(count).fill(true).map((_, index) => <Child key={index} \/>);\n+ const Child = () => <div>Hi!<\/div>;\n+\n+ const containerA = document.createElement('div');\n+ const containerB = document.createElement('div');\n+\n+ act(() => {\n+ ReactDOM.render(<Parent key=\"A\" count={3} \/>, containerA);\n+ ReactDOM.render(<Parent key=\"B\" count={2} \/>, containerB);\n+ });\n+ expect(store).toMatchSnapshot('1: mount');\n+\n+ act(() => {\n+ ReactDOM.render(<Parent key=\"A\" count={4} \/>, containerA);\n+ ReactDOM.render(<Parent key=\"B\" count={1} \/>, containerB);\n+ });\n+ expect(store).toMatchSnapshot('2: update');\n+\n+ act(() => ReactDOM.unmountComponentAtNode(containerB));\n+ expect(store).toMatchSnapshot('3: unmount B');\n+\n+ act(() => ReactDOM.unmountComponentAtNode(containerA));\n+ expect(store).toMatchSnapshot('4: unmount A');\n+ });\n+\n+ it('should filter DOM nodes from the store tree', () => {\n+ const Grandparent = () => (\n+ <div>\n+ <div>\n+ <Parent \/>\n+ <\/div>\n+ <Parent \/>\n+ <\/div>\n+ );\n+ const Parent = () => (\n+ <div>\n+ <Child \/>\n+ <\/div>\n+ );\n+ const Child = () => <div>Hi!<\/div>;\n+\n+ act(() =>\n+ ReactDOM.render(\n+ <Grandparent count={4} \/>,\n+ document.createElement('div')\n+ )\n+ );\n+ expect(store).toMatchSnapshot('1: mount');\n+\n+ act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));\n+ expect(store).toMatchSnapshot('2: expand Grandparent');\n+\n+ act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(1), false));\n+ expect(store).toMatchSnapshot('3: expand Parent');\n+ });\n+\n+ it('should display Suspense nodes properly in various states', () => {\n+ const Loading = () => <div>Loading...<\/div>;\n+ const SuspendingComponent = () => {\n+ throw new Promise(() => {});\n+ };\n+ const Component = () => {\n+ return <div>Hello<\/div>;\n+ };\n+ const Wrapper = ({ shouldSuspense }) => (\n+ <React.Fragment>\n+ <Component key=\"Outside\" \/>\n+ <React.Suspense fallback={<Loading \/>}>\n+ {shouldSuspense ? (\n+ <SuspendingComponent \/>\n+ ) : (\n+ <Component key=\"Inside\" \/>\n+ )}\n+ <\/React.Suspense>\n+ <\/React.Fragment>\n+ );\n+\n+ const container = document.createElement('div');\n+ act(() => ReactDOM.render(<Wrapper shouldSuspense={true} \/>, container));\n+ expect(store).toMatchSnapshot('1: loading');\n+\n+ \/\/ This test isn't meaningful unless we expand the suspended tree\n+ act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));\n+ act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(2), false));\n+ expect(store).toMatchSnapshot('2: expand Wrapper and Suspense');\n+\n+ act(() => {\n+ ReactDOM.render(<Wrapper shouldSuspense={false} \/>, container);\n+ });\n+ expect(store).toMatchSnapshot('2: resolved');\n+ });\n+\n+ it('should support expanding parts of the tree', () => {\n+ const Grandparent = ({ count }) => (\n+ <React.Fragment>\n+ <Parent count={count} \/>\n+ <Parent count={count} \/>\n+ <\/React.Fragment>\n+ );\n+ const Parent = ({ count }) =>\n+ new Array(count).fill(true).map((_, index) => <Child key={index} \/>);\n+ const Child = () => <div>Hi!<\/div>;\n+\n+ act(() =>\n+ ReactDOM.render(\n+ <Grandparent count={2} \/>,\n+ document.createElement('div')\n+ )\n+ );\n+ expect(store).toMatchSnapshot('1: mount');\n+\n+ const grandparentID = store.getElementIDAtIndex(0);\n+\n+ act(() => store.toggleIsCollapsed(grandparentID, false));\n+ expect(store).toMatchSnapshot('2: expand Grandparent');\n+\n+ const parentOneID = store.getElementIDAtIndex(1);\n+ const parentTwoID = store.getElementIDAtIndex(2);\n+\n+ act(() => store.toggleIsCollapsed(parentOneID, false));\n+ expect(store).toMatchSnapshot('3: expand first Parent');\n+\n+ act(() => store.toggleIsCollapsed(parentTwoID, false));\n+ expect(store).toMatchSnapshot('4: expand second Parent');\n+\n+ act(() => store.toggleIsCollapsed(parentOneID, true));\n+ expect(store).toMatchSnapshot('5: collapse first Parent');\n+\n+ act(() => store.toggleIsCollapsed(parentTwoID, true));\n+ expect(store).toMatchSnapshot('6: collapse second Parent');\n+\n+ act(() => store.toggleIsCollapsed(grandparentID, true));\n+ expect(store).toMatchSnapshot('7: collapse Grandparent');\n+ });\n+\n+ it('should support expanding deep parts of the tree', () => {\n+ const Wrapper = ({ forwardedRef }) => (\n+ <Nested depth={3} forwardedRef={forwardedRef} \/>\n+ );\n+ const Nested = ({ depth, forwardedRef }) =>\n+ depth > 0 ? (\n+ <Nested depth={depth - 1} forwardedRef={forwardedRef} \/>\n+ ) : (\n+ <div ref={forwardedRef} \/>\n+ );\n+\n+ const ref = React.createRef();\n+\n+ act(() =>\n+ ReactDOM.render(\n+ <Wrapper forwardedRef={ref} \/>,\n+ document.createElement('div')\n+ )\n+ );\n+ expect(store).toMatchSnapshot('1: mount');\n+\n+ const deepestedNodeID = agent.getIDForNode(ref.current);\n+\n+ act(() => store.toggleIsCollapsed(deepestedNodeID, false));\n+ expect(store).toMatchSnapshot('2: expand deepest node');\n+\n+ const rootID = store.getElementIDAtIndex(0);\n+\n+ act(() => store.toggleIsCollapsed(rootID, true));\n+ expect(store).toMatchSnapshot('3: collapse root');\n+\n+ act(() => store.toggleIsCollapsed(rootID, false));\n+ expect(store).toMatchSnapshot('4: expand root');\n+\n+ const id = store.getElementIDAtIndex(1);\n+\n+ act(() => store.toggleIsCollapsed(id, true));\n+ expect(store).toMatchSnapshot('5: collapse middle node');\n+\n+ act(() => store.toggleIsCollapsed(id, false));\n+ expect(store).toMatchSnapshot('6: expand middle node');\n+ });\n+\n+ it('should support reordering of children', () => {\n+ const Root = ({ children }) => children;\n+ const Component = () => null;\n+\n+ const Foo = () => [<Component key=\"0\" \/>];\n+ const Bar = () => [<Component key=\"0\" \/>, <Component key=\"1\" \/>];\n+ const foo = <Foo key=\"foo\" \/>;\n+ const bar = <Bar key=\"bar\" \/>;\n+\n+ const container = document.createElement('div');\n+\n+ act(() => ReactDOM.render(<Root>{[foo, bar]}<\/Root>, container));\n+ expect(store).toMatchSnapshot('1: mount');\n+\n+ act(() => ReactDOM.render(<Root>{[bar, foo]}<\/Root>, container));\n+ expect(store).toMatchSnapshot('3: reorder children');\n+\n+ act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));\n+ expect(store).toMatchSnapshot('4: expand root');\n+\n+ act(() => {\n+ store.toggleIsCollapsed(store.getElementIDAtIndex(2), false);\n+ store.toggleIsCollapsed(store.getElementIDAtIndex(1), false);\n+ });\n+ expect(store).toMatchSnapshot('5: expand leaves');\n+\n+ act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), true));\n+ expect(store).toMatchSnapshot('6: collapse root');\n+ });\n+\n+ it('should not add new nodes when suspense is toggled', () => {\n+ const SuspenseTree = () => {\n+ return (\n+ <React.Suspense fallback={<Fallback>Loading outer<\/Fallback>}>\n+ <Parent \/>\n+ <\/React.Suspense>\n+ );\n+ };\n+\n+ const Fallback = () => null;\n+ const Parent = () => <Child \/>;\n+ const Child = () => null;\n+\n+ act(() =>\n+ ReactDOM.render(<SuspenseTree \/>, document.createElement('div'))\n+ );\n+ expect(store).toMatchSnapshot('1: mount');\n+\n+ act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));\n+ act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(1), false));\n+ expect(store).toMatchSnapshot('2: expand tree');\n+\n+ const rendererID = getRendererID();\n+ const suspenseID = store.getElementIDAtIndex(1);\n+\n+ act(() =>\n+ agent.overrideSuspense({\n+ id: suspenseID,\n+ rendererID,\n+ forceFallback: true,\n+ })\n+ );\n+ expect(store).toMatchSnapshot('3: toggle fallback on');\n+\n+ act(() =>\n+ agent.overrideSuspense({\n+ id: suspenseID,\n+ rendererID,\n+ forceFallback: false,\n+ })\n+ );\n+ expect(store).toMatchSnapshot('4: toggle fallback on');\n+ });\n+ });\n+\n+ describe('getIndexOfElementID', () => {\n+ beforeEach(() => {\n+ store.collapseNodesByDefault = false;\n+ });\n+\n+ it('should support a single root with a single child', () => {\n+ const Grandparent = () => (\n+ <React.Fragment>\n+ <Parent \/>\n+ <Parent \/>\n+ <\/React.Fragment>\n+ );\n+ const Parent = () => <Child \/>;\n+ const Child = () => null;\n+\n+ act(() =>\n+ ReactDOM.render(<Grandparent \/>, document.createElement('div'))\n+ );\n+\n+ for (let i = 0; i < store.numElements; i++) {\n+ expect(store.getIndexOfElementID(store.getElementIDAtIndex(i))).toBe(i);\n+ }\n+ });\n+\n+ it('should support multiple roots with one children each', () => {\n+ const Grandparent = () => <Parent \/>;\n+ const Parent = () => <Child \/>;\n+ const Child = () => null;\n+\n+ act(() => {\n+ ReactDOM.render(<Grandparent \/>, document.createElement('div'));\n+ ReactDOM.render(<Grandparent \/>, document.createElement('div'));\n+ });\n+\n+ for (let i = 0; i < store.numElements; i++) {\n+ expect(store.getIndexOfElementID(store.getElementIDAtIndex(i))).toBe(i);\n+ }\n+ });\n+\n+ it('should support a single root with multiple top level children', () => {\n+ const Grandparent = () => <Parent \/>;\n+ const Parent = () => <Child \/>;\n+ const Child = () => null;\n+\n+ act(() =>\n+ ReactDOM.render(\n+ <React.Fragment>\n+ <Grandparent \/>\n+ <Grandparent \/>\n+ <\/React.Fragment>,\n+ document.createElement('div')\n+ )\n+ );\n+\n+ for (let i = 0; i < store.numElements; i++) {\n+ expect(store.getIndexOfElementID(store.getElementIDAtIndex(i))).toBe(i);\n+ }\n+ });\n+\n+ it('should support multiple roots with multiple top level children', () => {\n+ const Grandparent = () => <Parent \/>;\n+ const Parent = () => <Child \/>;\n+ const Child = () => null;\n+\n+ act(() => {\n+ ReactDOM.render(\n+ <React.Fragment>\n+ <Grandparent \/>\n+ <Grandparent \/>\n+ <\/React.Fragment>,\n+ document.createElement('div')\n+ );\n+ ReactDOM.render(\n+ <React.Fragment>\n+ <Grandparent \/>\n+ <Grandparent \/>\n+ <\/React.Fragment>,\n+ document.createElement('div')\n+ );\n+ });\n+\n+ for (let i = 0; i < store.numElements; i++) {\n+ expect(store.getIndexOfElementID(store.getElementIDAtIndex(i))).toBe(i);\n+ }\n+ });\n+ });\n+\n+ it('detects and updates profiling support based on the attached roots', () => {\n+ const Component = () => null;\n+\n+ const containerA = document.createElement('div');\n+ const containerB = document.createElement('div');\n+\n+ expect(store.supportsProfiling).toBe(false);\n+\n+ act(() => ReactDOM.render(<Component \/>, containerA));\n+ expect(store.supportsProfiling).toBe(true);\n+\n+ act(() => ReactDOM.render(<Component \/>, containerB));\n+ act(() => ReactDOM.unmountComponentAtNode(containerA));\n+ expect(store.supportsProfiling).toBe(true);\n+\n+ act(() => ReactDOM.unmountComponentAtNode(containerB));\n+ expect(store.supportsProfiling).toBe(false);\n+ });\n+});\ndiff --git a\/src\/__tests__\/storeComponentFilters-test.js b\/src\/__tests__\/storeComponentFilters-test.js\nnew file mode 100644\nindex 0000000000..5e2385b33b\n--- \/dev\/null\n+++ b\/src\/__tests__\/storeComponentFilters-test.js\n@@ -0,0 +1,223 @@\n+\/\/ @flow\n+\n+import type { FrontendBridge } from 'src\/bridge';\n+import type Store from 'src\/devtools\/store';\n+\n+describe('Store component filters', () => {\n+ let React;\n+ let ReactDOM;\n+ let TestUtils;\n+ let Types;\n+ let bridge: FrontendBridge;\n+ let store: Store;\n+ let utils;\n+\n+ const act = (callback: Function) => {\n+ TestUtils.act(() => {\n+ callback();\n+ });\n+ jest.runAllTimers(); \/\/ Flush Bridge operations\n+ };\n+\n+ beforeEach(() => {\n+ bridge = global.bridge;\n+ store = global.store;\n+ store.collapseNodesByDefault = false;\n+ store.componentFilters = [];\n+ store.recordChangeDescriptions = true;\n+\n+ React = require('react');\n+ ReactDOM = require('react-dom');\n+ TestUtils = require('react-dom\/test-utils');\n+ Types = require('src\/types');\n+ utils = require('.\/utils');\n+ });\n+\n+ it('should throw if filters are updated while profiling', () => {\n+ act(() => store.profilerStore.startProfiling());\n+ expect(() => (store.componentFilters = [])).toThrow(\n+ 'Cannot modify filter preferences while profiling'\n+ );\n+ });\n+\n+ it('should support filtering by element type', () => {\n+ class Root extends React.Component<{| children: React$Node |}> {\n+ render() {\n+ return <div>{this.props.children}<\/div>;\n+ }\n+ }\n+ const Component = () => <div>Hi<\/div>;\n+\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <Component \/>\n+ <\/Root>,\n+ document.createElement('div')\n+ )\n+ );\n+ expect(store).toMatchSnapshot('1: mount');\n+\n+ act(\n+ () =>\n+ (store.componentFilters = [\n+ utils.createElementTypeFilter(Types.ElementTypeHostComponent),\n+ ])\n+ );\n+\n+ expect(store).toMatchSnapshot('2: hide host components');\n+\n+ act(\n+ () =>\n+ (store.componentFilters = [\n+ utils.createElementTypeFilter(Types.ElementTypeClass),\n+ ])\n+ );\n+\n+ expect(store).toMatchSnapshot('3: hide class components');\n+\n+ act(\n+ () =>\n+ (store.componentFilters = [\n+ utils.createElementTypeFilter(Types.ElementTypeClass),\n+ utils.createElementTypeFilter(Types.ElementTypeFunction),\n+ ])\n+ );\n+\n+ expect(store).toMatchSnapshot('4: hide class and function components');\n+\n+ act(\n+ () =>\n+ (store.componentFilters = [\n+ utils.createElementTypeFilter(Types.ElementTypeClass, false),\n+ utils.createElementTypeFilter(Types.ElementTypeFunction, false),\n+ ])\n+ );\n+\n+ expect(store).toMatchSnapshot('5: disable all filters');\n+ });\n+\n+ it('should ignore invalid ElementTypeRoot filter', () => {\n+ const Root = () => <div>Hi<\/div>;\n+\n+ act(() => ReactDOM.render(<Root \/>, document.createElement('div')));\n+ expect(store).toMatchSnapshot('1: mount');\n+\n+ act(\n+ () =>\n+ (store.componentFilters = [\n+ utils.createElementTypeFilter(Types.ElementTypeRoot),\n+ ])\n+ );\n+\n+ expect(store).toMatchSnapshot('2: add invalid filter');\n+ });\n+\n+ it('should filter by display name', () => {\n+ const Text = ({ label }) => label;\n+ const Foo = () => <Text label=\"foo\" \/>;\n+ const Bar = () => <Text label=\"bar\" \/>;\n+ const Baz = () => <Text label=\"baz\" \/>;\n+\n+ act(() =>\n+ ReactDOM.render(\n+ <React.Fragment>\n+ <Foo \/>\n+ <Bar \/>\n+ <Baz \/>\n+ <\/React.Fragment>,\n+ document.createElement('div')\n+ )\n+ );\n+ expect(store).toMatchSnapshot('1: mount');\n+\n+ act(\n+ () => (store.componentFilters = [utils.createDisplayNameFilter('Foo')])\n+ );\n+ expect(store).toMatchSnapshot('2: filter \"Foo\"');\n+\n+ act(() => (store.componentFilters = [utils.createDisplayNameFilter('Ba')]));\n+ expect(store).toMatchSnapshot('3: filter \"Ba\"');\n+\n+ act(\n+ () => (store.componentFilters = [utils.createDisplayNameFilter('B.z')])\n+ );\n+ expect(store).toMatchSnapshot('4: filter \"B.z\"');\n+ });\n+\n+ it('should filter by path', () => {\n+ const Component = () => <div>Hi<\/div>;\n+\n+ act(() => ReactDOM.render(<Component \/>, document.createElement('div')));\n+ expect(store).toMatchSnapshot('1: mount');\n+\n+ act(\n+ () =>\n+ (store.componentFilters = [\n+ utils.createLocationFilter(__filename.replace(__dirname, '')),\n+ ])\n+ );\n+\n+ expect(store).toMatchSnapshot(\n+ '2: hide all components declared within this test filed'\n+ );\n+\n+ act(\n+ () =>\n+ (store.componentFilters = [\n+ utils.createLocationFilter('this:is:a:made:up:path'),\n+ ])\n+ );\n+\n+ expect(store).toMatchSnapshot('3: hide components in a made up fake path');\n+ });\n+\n+ it('should filter HOCs', () => {\n+ const Component = () => <div>Hi<\/div>;\n+ const Foo = () => <Component \/>;\n+ Foo.displayName = 'Foo(Component)';\n+ const Bar = () => <Foo \/>;\n+ Bar.displayName = 'Bar(Foo(Component))';\n+\n+ act(() => ReactDOM.render(<Bar \/>, document.createElement('div')));\n+ expect(store).toMatchSnapshot('1: mount');\n+\n+ act(() => (store.componentFilters = [utils.createHOCFilter(true)]));\n+\n+ expect(store).toMatchSnapshot('2: hide all HOCs');\n+\n+ act(() => (store.componentFilters = [utils.createHOCFilter(false)]));\n+\n+ expect(store).toMatchSnapshot('3: disable HOC filter');\n+ });\n+\n+ it('should not send a bridge update if the set of enabled filters has not changed', () => {\n+ act(() => (store.componentFilters = [utils.createHOCFilter(true)]));\n+\n+ bridge.addListener('updateComponentFilters', componentFilters => {\n+ throw Error('Unexpected component update');\n+ });\n+\n+ act(\n+ () =>\n+ (store.componentFilters = [\n+ utils.createHOCFilter(false),\n+ utils.createHOCFilter(true),\n+ ])\n+ );\n+ act(\n+ () =>\n+ (store.componentFilters = [\n+ utils.createHOCFilter(true),\n+ utils.createLocationFilter('abc', false),\n+ ])\n+ );\n+ act(\n+ () =>\n+ (store.componentFilters = [\n+ utils.createHOCFilter(true),\n+ utils.createElementTypeFilter(Types.ElementTypeHostComponent, false),\n+ ])\n+ );\n+ });\n+});\ndiff --git a\/src\/__tests__\/storeOwners-test.js b\/src\/__tests__\/storeOwners-test.js\nnew file mode 100644\nindex 0000000000..9ed0e53fdc\n--- \/dev\/null\n+++ b\/src\/__tests__\/storeOwners-test.js\n@@ -0,0 +1,164 @@\n+\/\/ @flow\n+\n+const { printOwnersList } = require('.\/storeSerializer');\n+\n+describe('Store owners list', () => {\n+ let React;\n+ let ReactDOM;\n+ let act;\n+ let store;\n+\n+ beforeEach(() => {\n+ store = global.store;\n+ store.collapseNodesByDefault = false;\n+\n+ React = require('react');\n+ ReactDOM = require('react-dom');\n+ act = require('.\/utils').act;\n+ });\n+\n+ it('should drill through intermediate components', () => {\n+ const Root = () => (\n+ <Intermediate>\n+ <div>\n+ <Leaf \/>\n+ <\/div>\n+ <\/Intermediate>\n+ );\n+ const Wrapper = ({ children }) => children;\n+ const Leaf = () => <div>Leaf<\/div>;\n+ const Intermediate = ({ children }) => <Wrapper>{children}<\/Wrapper>;\n+\n+ act(() => ReactDOM.render(<Root \/>, document.createElement('div')));\n+ expect(store).toMatchSnapshot('1: mount');\n+\n+ const rootID = store.getElementIDAtIndex(0);\n+ expect(\n+ printOwnersList(store.getOwnersListForElement(rootID))\n+ ).toMatchSnapshot('2: components owned by <Root>');\n+\n+ const intermediateID = store.getElementIDAtIndex(1);\n+ expect(\n+ printOwnersList(store.getOwnersListForElement(intermediateID))\n+ ).toMatchSnapshot('3: components owned by <Intermediate>');\n+ });\n+\n+ it('should drill through interleaved intermediate components', () => {\n+ const Root = () => [\n+ <Intermediate key=\"intermediate\">\n+ <Leaf \/>\n+ <\/Intermediate>,\n+ <Leaf key=\"leaf\" \/>,\n+ ];\n+ const Wrapper = ({ children }) => children;\n+ const Leaf = () => <div>Leaf<\/div>;\n+ const Intermediate = ({ children }) => [\n+ <Leaf key=\"leaf\" \/>,\n+ <Wrapper key=\"wrapper\">{children}<\/Wrapper>,\n+ ];\n+\n+ act(() => ReactDOM.render(<Root \/>, document.createElement('div')));\n+ expect(store).toMatchSnapshot('1: mount');\n+\n+ const rootID = store.getElementIDAtIndex(0);\n+ expect(\n+ printOwnersList(store.getOwnersListForElement(rootID))\n+ ).toMatchSnapshot('2: components owned by <Root>');\n+\n+ const intermediateID = store.getElementIDAtIndex(1);\n+ expect(\n+ printOwnersList(store.getOwnersListForElement(intermediateID))\n+ ).toMatchSnapshot('3: components owned by <Intermediate>');\n+ });\n+\n+ it('should show the proper owners list order and contents after insertions and deletions', () => {\n+ const Root = ({ includeDirect, includeIndirect }) => (\n+ <div>\n+ {includeDirect ? <Leaf \/> : null}\n+ {includeIndirect ? (\n+ <Intermediate>\n+ <Leaf \/>\n+ <\/Intermediate>\n+ ) : null}\n+ <\/div>\n+ );\n+ const Wrapper = ({ children }) => children;\n+ const Leaf = () => <div>Leaf<\/div>;\n+ const Intermediate = ({ children }) => <Wrapper>{children}<\/Wrapper>;\n+\n+ const container = document.createElement('div');\n+\n+ act(() =>\n+ ReactDOM.render(\n+ <Root includeDirect={false} includeIndirect={true} \/>,\n+ container\n+ )\n+ );\n+ expect(store).toMatchSnapshot('1: mount');\n+\n+ const rootID = store.getElementIDAtIndex(0);\n+ expect(\n+ printOwnersList(store.getOwnersListForElement(rootID))\n+ ).toMatchSnapshot('2: components owned by <Root>');\n+\n+ act(() =>\n+ ReactDOM.render(\n+ <Root includeDirect={true} includeIndirect={true} \/>,\n+ container\n+ )\n+ );\n+ expect(store).toMatchSnapshot('3: update to add direct');\n+\n+ expect(\n+ printOwnersList(store.getOwnersListForElement(rootID))\n+ ).toMatchSnapshot('4: components owned by <Root>');\n+\n+ act(() =>\n+ ReactDOM.render(\n+ <Root includeDirect={true} includeIndirect={false} \/>,\n+ container\n+ )\n+ );\n+ expect(store).toMatchSnapshot('5: update to remove indirect');\n+\n+ expect(\n+ printOwnersList(store.getOwnersListForElement(rootID))\n+ ).toMatchSnapshot('6: components owned by <Root>');\n+\n+ act(() =>\n+ ReactDOM.render(\n+ <Root includeDirect={false} includeIndirect={false} \/>,\n+ container\n+ )\n+ );\n+ expect(store).toMatchSnapshot('7: update to remove both');\n+\n+ expect(\n+ printOwnersList(store.getOwnersListForElement(rootID))\n+ ).toMatchSnapshot('8: components owned by <Root>');\n+ });\n+\n+ it('should show the proper owners list ordering after reordered children', () => {\n+ const Root = ({ ascending }) =>\n+ ascending\n+ ? [<Leaf key=\"A\" \/>, <Leaf key=\"B\" \/>, <Leaf key=\"C\" \/>]\n+ : [<Leaf key=\"C\" \/>, <Leaf key=\"B\" \/>, <Leaf key=\"A\" \/>];\n+ const Leaf = () => <div>Leaf<\/div>;\n+\n+ const container = document.createElement('div');\n+ act(() => ReactDOM.render(<Root ascending={true} \/>, container));\n+ expect(store).toMatchSnapshot('1: mount (ascending)');\n+\n+ const rootID = store.getElementIDAtIndex(0);\n+ expect(\n+ printOwnersList(store.getOwnersListForElement(rootID))\n+ ).toMatchSnapshot('2: components owned by <Root>');\n+\n+ act(() => ReactDOM.render(<Root ascending={false} \/>, container));\n+ expect(store).toMatchSnapshot('3: update (descending)');\n+\n+ expect(\n+ printOwnersList(store.getOwnersListForElement(rootID))\n+ ).toMatchSnapshot('4: components owned by <Root>');\n+ });\n+});\ndiff --git a\/src\/__tests__\/storeSerializer.js b\/src\/__tests__\/storeSerializer.js\nnew file mode 100644\nindex 0000000000..fd2d4e36f8\n--- \/dev\/null\n+++ b\/src\/__tests__\/storeSerializer.js\n@@ -0,0 +1,84 @@\n+\/\/ test() is part of Jest's serializer API\n+export function test(maybeStore) {\n+ \/\/ It's important to lazy-require the Store rather than imported at the head of the module.\n+ \/\/ Because we reset modules between tests, different Store implementations will be used for each test.\n+ \/\/ Unfortunately Jest does not reset its own serializer modules.\n+ return maybeStore instanceof require('src\/devtools\/store').default;\n+}\n+\n+\/\/ print() is part of Jest's serializer API\n+export function print(store, serialize, indent) {\n+ return printStore(store);\n+}\n+\n+export function printElement(element, includeWeight = false) {\n+ let prefix = ' ';\n+ if (element.children.length > 0) {\n+ prefix = element.isCollapsed ? '▸' : '▾';\n+ }\n+\n+ let key = '';\n+ if (element.key !== null) {\n+ key = ` key=\"${element.key}\"`;\n+ }\n+\n+ let hocs = '';\n+ if (element.hocDisplayNames !== null) {\n+ hocs = ` [${element.hocDisplayNames.join('][')}]`;\n+ }\n+\n+ let suffix = '';\n+ if (includeWeight) {\n+ suffix = ` (${element.isCollapsed ? 1 : element.weight})`;\n+ }\n+\n+ return `${' '.repeat(element.depth + 1)}${prefix} <${element.displayName ||\n+ 'null'}${key}>${hocs}${suffix}`;\n+}\n+\n+export function printOwnersList(elements, includeWeight = false) {\n+ return elements\n+ .map(element => printElement(element, includeWeight))\n+ .join('\\n');\n+}\n+\n+\/\/ Used for Jest snapshot testing.\n+\/\/ May also be useful for visually debugging the tree, so it lives on the Store.\n+export function printStore(store, includeWeight = false) {\n+ const snapshotLines = [];\n+\n+ let rootWeight = 0;\n+\n+ store.roots.forEach(rootID => {\n+ const { weight } = store.getElementByID(rootID);\n+\n+ snapshotLines.push('[root]' + (includeWeight ? ` (${weight})` : ''));\n+\n+ for (let i = rootWeight; i < rootWeight + weight; i++) {\n+ const element = store.getElementAtIndex(i);\n+\n+ if (element == null) {\n+ throw Error(`Could not find element at index ${i}`);\n+ }\n+\n+ snapshotLines.push(printElement(element, includeWeight));\n+ }\n+\n+ rootWeight += weight;\n+ });\n+\n+ \/\/ Make sure the pretty-printed test align with the Store's reported number of total rows.\n+ if (rootWeight !== store.numElements) {\n+ throw Error(\n+ `Inconsistent Store state. Individual root weights (${rootWeight}) do not match total weight (${\n+ store.numElements\n+ })`\n+ );\n+ }\n+\n+ \/\/ If roots have been unmounted, verify that they've been removed from maps.\n+ \/\/ This helps ensure the Store doesn't leak memory.\n+ store.assertExpectedRootMapSizes();\n+\n+ return snapshotLines.join('\\n');\n+}\ndiff --git a\/src\/__tests__\/storeStressSync-test.js b\/src\/__tests__\/storeStressSync-test.js\nnew file mode 100644\nindex 0000000000..8877d5d999\n--- \/dev\/null\n+++ b\/src\/__tests__\/storeStressSync-test.js\n@@ -0,0 +1,1095 @@\n+\/\/ @flow\n+\n+describe('StoreStress (Sync Mode)', () => {\n+ let React;\n+ let ReactDOM;\n+ let act;\n+ let bridge;\n+ let store;\n+ let print;\n+\n+ beforeEach(() => {\n+ bridge = global.bridge;\n+ store = global.store;\n+ store.collapseNodesByDefault = false;\n+\n+ React = require('react');\n+ ReactDOM = require('react-dom');\n+ act = require('.\/utils').act;\n+\n+ print = require('.\/storeSerializer').print;\n+ });\n+\n+ \/\/ This is a stress test for the tree mount\/update\/unmount traversal.\n+ \/\/ It renders different trees that should produce the same output.\n+ it('should handle a stress test with different tree operations (Sync Mode)', () => {\n+ let setShowX;\n+ const A = () => 'a';\n+ const B = () => 'b';\n+ const C = () => {\n+ \/\/ We'll be manually flipping this component back and forth in the test.\n+ \/\/ We only do this for a single node in order to verify that DevTools\n+ \/\/ can handle a subtree switching alternates while other subtrees are memoized.\n+ let [showX, _setShowX] = React.useState(false);\n+ setShowX = _setShowX;\n+ return showX ? <X \/> : 'c';\n+ };\n+ const D = () => 'd';\n+ const E = () => 'e';\n+ const X = () => 'x';\n+ const a = <A key=\"a\" \/>;\n+ const b = <B key=\"b\" \/>;\n+ const c = <C key=\"c\" \/>;\n+ const d = <D key=\"d\" \/>;\n+ const e = <E key=\"e\" \/>;\n+\n+ function Parent({ children }) {\n+ return children;\n+ }\n+\n+ \/\/ 1. Render a normal version of [a, b, c, d, e].\n+ let container = document.createElement('div');\n+ act(() => ReactDOM.render(<Parent>{[a, b, c, d, e]}<\/Parent>, container));\n+ expect(store).toMatchSnapshot('1: abcde');\n+ expect(container.textContent).toMatch('abcde');\n+ const snapshotForABCDE = print(store);\n+\n+ \/\/ 2. Render a version where <C \/> renders an <X \/> child instead of 'c'.\n+ \/\/ This is how we'll test an update to a single component.\n+ act(() => {\n+ setShowX(true);\n+ });\n+ expect(store).toMatchSnapshot('2: abxde');\n+ expect(container.textContent).toMatch('abxde');\n+ const snapshotForABXDE = print(store);\n+\n+ \/\/ 3. Verify flipping it back produces the original result.\n+ act(() => {\n+ setShowX(false);\n+ });\n+ expect(container.textContent).toMatch('abcde');\n+ expect(print(store)).toBe(snapshotForABCDE);\n+\n+ \/\/ 4. Clean up.\n+ act(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(print(store)).toBe('');\n+\n+ \/\/ Now comes the interesting part.\n+ \/\/ All of these cases are equivalent to [a, b, c, d, e] in output.\n+ \/\/ We'll verify that DevTools produces the same snapshots for them.\n+ \/\/ These cases are picked so that rendering them sequentially in the same\n+ \/\/ container results in a combination of mounts, updates, unmounts, and reorders.\n+ \/\/ prettier-ignore\n+ let cases = [\n+ [a, b, c, d, e],\n+ [[a], b, c, d, e],\n+ [[a, b], c, d, e],\n+ [[a, b], c, [d, e]],\n+ [[a, b], c, [d, '', e]],\n+ [[a], b, c, d, [e]],\n+ [a, b, [[c]], d, e],\n+ [[a, ''], [b], [c], [d], [e]],\n+ [a, b, [c, [d, ['', e]]]],\n+ [a, b, c, d, e],\n+ [<div key=\"0\">{a}<\/div>, b, c, d, e],\n+ [<div key=\"0\">{a}{b}<\/div>, c, d, e],\n+ [<div key=\"0\">{a}{b}<\/div>, c, <div key=\"1\">{d}{e}<\/div>],\n+ [<div key=\"1\">{a}{b}<\/div>, c, <div key=\"0\">{d}{e}<\/div>],\n+ [<div key=\"0\">{a}{b}<\/div>, c, <div key=\"1\">{d}{e}<\/div>],\n+ [<div key=\"2\">{a}{b}<\/div>, c, <div key=\"3\">{d}{e}<\/div>],\n+ [<span key=\"0\">{a}<\/span>, b, c, d, [e]],\n+ [a, b, <span key=\"0\"><span>{c}<\/span><\/span>, d, e],\n+ [<div key=\"0\">{a}<\/div>, [b], <span key=\"1\">{c}<\/span>, [d], <div key=\"2\">{e}<\/div>],\n+ [a, b, [c, <div key=\"0\">{d}<span>{e}<\/span><\/div>], ''],\n+ [a, [[]], b, c, [d, [[]], e]],\n+ [[[a, b, c, d], e]],\n+ [a, b, c, d, e]\n+ ];\n+\n+ \/\/ 5. Test fresh mount for each case.\n+ for (let i = 0; i < cases.length; i++) {\n+ \/\/ Ensure fresh mount.\n+ container = document.createElement('div');\n+\n+ \/\/ Verify mounting 'abcde'.\n+ act(() => ReactDOM.render(<Parent>{cases[i]}<\/Parent>, container));\n+ expect(container.textContent).toMatch('abcde');\n+ expect(print(store)).toEqual(snapshotForABCDE);\n+\n+ \/\/ Verify switching to 'abxde'.\n+ act(() => {\n+ setShowX(true);\n+ });\n+ expect(container.textContent).toMatch('abxde');\n+ expect(print(store)).toBe(snapshotForABXDE);\n+\n+ \/\/ Verify switching back to 'abcde'.\n+ act(() => {\n+ setShowX(false);\n+ });\n+ expect(container.textContent).toMatch('abcde');\n+ expect(print(store)).toBe(snapshotForABCDE);\n+\n+ \/\/ Clean up.\n+ act(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(print(store)).toBe('');\n+ }\n+\n+ \/\/ 6. Verify *updates* by reusing the container between iterations.\n+ \/\/ There'll be no unmounting until the very end.\n+ container = document.createElement('div');\n+ for (let i = 0; i < cases.length; i++) {\n+ \/\/ Verify mounting 'abcde'.\n+ act(() => ReactDOM.render(<Parent>{cases[i]}<\/Parent>, container));\n+ expect(container.textContent).toMatch('abcde');\n+ expect(print(store)).toEqual(snapshotForABCDE);\n+\n+ \/\/ Verify switching to 'abxde'.\n+ act(() => {\n+ setShowX(true);\n+ });\n+ expect(container.textContent).toMatch('abxde');\n+ expect(print(store)).toBe(snapshotForABXDE);\n+\n+ \/\/ Verify switching back to 'abcde'.\n+ act(() => {\n+ setShowX(false);\n+ });\n+ expect(container.textContent).toMatch('abcde');\n+ expect(print(store)).toBe(snapshotForABCDE);\n+ \/\/ Don't unmount. Reuse the container between iterations.\n+ }\n+ act(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(print(store)).toBe('');\n+ });\n+\n+ it('should handle stress test with reordering (Sync Mode)', () => {\n+ const A = () => 'a';\n+ const B = () => 'b';\n+ const C = () => 'c';\n+ const D = () => 'd';\n+ const E = () => 'e';\n+ const a = <A key=\"a\" \/>;\n+ const b = <B key=\"b\" \/>;\n+ const c = <C key=\"c\" \/>;\n+ const d = <D key=\"d\" \/>;\n+ const e = <E key=\"e\" \/>;\n+\n+ \/\/ prettier-ignore\n+ let steps = [\n+ a,\n+ b,\n+ c,\n+ d,\n+ e,\n+ [a],\n+ [b],\n+ [c],\n+ [d],\n+ [e],\n+ [a, b],\n+ [b, a],\n+ [b, c],\n+ [c, b],\n+ [a, c],\n+ [c, a],\n+ ];\n+\n+ const Root = ({ children }) => {\n+ return children;\n+ };\n+\n+ \/\/ 1. Capture the expected render result.\n+ let snapshots = [];\n+ let container = document.createElement('div');\n+ for (let i = 0; i < steps.length; i++) {\n+ act(() => ReactDOM.render(<Root>{steps[i]}<\/Root>, container));\n+ \/\/ We snapshot each step once so it doesn't regress.\n+ expect(store).toMatchSnapshot();\n+ snapshots.push(print(store));\n+ act(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(print(store)).toBe('');\n+ }\n+\n+ \/\/ 2. Verify that we can update from every step to every other step and back.\n+ for (let i = 0; i < steps.length; i++) {\n+ for (let j = 0; j < steps.length; j++) {\n+ let container = document.createElement('div');\n+ act(() => ReactDOM.render(<Root>{steps[i]}<\/Root>, container));\n+ expect(print(store)).toMatch(snapshots[i]);\n+ act(() => ReactDOM.render(<Root>{steps[j]}<\/Root>, container));\n+ expect(print(store)).toMatch(snapshots[j]);\n+ act(() => ReactDOM.render(<Root>{steps[i]}<\/Root>, container));\n+ expect(print(store)).toMatch(snapshots[i]);\n+ act(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(print(store)).toBe('');\n+ }\n+ }\n+\n+ \/\/ 3. Same test as above, but this time we wrap children in a host component.\n+ for (let i = 0; i < steps.length; i++) {\n+ for (let j = 0; j < steps.length; j++) {\n+ let container = document.createElement('div');\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <div>{steps[i]}<\/div>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+ expect(print(store)).toMatch(snapshots[i]);\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <div>{steps[j]}<\/div>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+ expect(print(store)).toMatch(snapshots[j]);\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <div>{steps[i]}<\/div>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+ expect(print(store)).toMatch(snapshots[i]);\n+ act(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(print(store)).toBe('');\n+ }\n+ }\n+ });\n+\n+ it('should handle a stress test for Suspense (Sync Mode)', async () => {\n+ const A = () => 'a';\n+ const B = () => 'b';\n+ const C = () => 'c';\n+ const X = () => 'x';\n+ const Y = () => 'y';\n+ const Z = () => 'z';\n+ const a = <A key=\"a\" \/>;\n+ const b = <B key=\"b\" \/>;\n+ const c = <C key=\"c\" \/>;\n+ const z = <Z key=\"z\" \/>;\n+\n+ \/\/ prettier-ignore\n+ const steps = [\n+ a,\n+ [a],\n+ [a, b, c],\n+ [c, b, a],\n+ [c, null, a],\n+ <React.Fragment>{c}{a}<\/React.Fragment>,\n+ <div>{c}{a}<\/div>,\n+ <div><span>{a}<\/span>{b}<\/div>,\n+ [[a]],\n+ null,\n+ b,\n+ a\n+ ];\n+\n+ const Never = () => {\n+ throw new Promise(() => {});\n+ };\n+\n+ const Root = ({ children }) => {\n+ return children;\n+ };\n+\n+ \/\/ 1. For each step, check Suspense can render them as initial primary content.\n+ \/\/ This is the only step where we use Jest snapshots.\n+ let snapshots = [];\n+ let container = document.createElement('div');\n+ for (let i = 0; i < steps.length; i++) {\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={z}>{steps[i]}<\/React.Suspense>\n+ <Y \/>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+ \/\/ We snapshot each step once so it doesn't regress.\n+ expect(store).toMatchSnapshot();\n+ snapshots.push(print(store));\n+ act(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(print(store)).toBe('');\n+ }\n+\n+ \/\/ 2. Verify check Suspense can render same steps as initial fallback content.\n+ for (let i = 0; i < steps.length; i++) {\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[i]}>\n+ <Z \/>\n+ <Never \/>\n+ <Z \/>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+ expect(print(store)).toEqual(snapshots[i]);\n+ act(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(print(store)).toBe('');\n+ }\n+\n+ \/\/ 3. Verify we can update from each step to each step in primary mode.\n+ for (let i = 0; i < steps.length; i++) {\n+ for (let j = 0; j < steps.length; j++) {\n+ \/\/ Always start with a fresh container and steps[i].\n+ container = document.createElement('div');\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={z}>{steps[i]}<\/React.Suspense>\n+ <Y \/>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+ expect(print(store)).toEqual(snapshots[i]);\n+ \/\/ Re-render with steps[j].\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={z}>{steps[j]}<\/React.Suspense>\n+ <Y \/>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+ \/\/ Verify the successful transition to steps[j].\n+ expect(print(store)).toEqual(snapshots[j]);\n+ \/\/ Check that we can transition back again.\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={z}>{steps[i]}<\/React.Suspense>\n+ <Y \/>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+ expect(print(store)).toEqual(snapshots[i]);\n+ \/\/ Clean up after every iteration.\n+ act(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(print(store)).toBe('');\n+ }\n+ }\n+\n+ \/\/ 4. Verify we can update from each step to each step in fallback mode.\n+ for (let i = 0; i < steps.length; i++) {\n+ for (let j = 0; j < steps.length; j++) {\n+ \/\/ Always start with a fresh container and steps[i].\n+ container = document.createElement('div');\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[i]}>\n+ <Z \/>\n+ <Never \/>\n+ <Z \/>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+ expect(print(store)).toEqual(snapshots[i]);\n+ \/\/ Re-render with steps[j].\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[j]}>\n+ <Z \/>\n+ <Never \/>\n+ <Z \/>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+ \/\/ Verify the successful transition to steps[j].\n+ expect(print(store)).toEqual(snapshots[j]);\n+ \/\/ Check that we can transition back again.\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[i]}>\n+ <Z \/>\n+ <Never \/>\n+ <Z \/>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+ expect(print(store)).toEqual(snapshots[i]);\n+ \/\/ Clean up after every iteration.\n+ act(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(print(store)).toBe('');\n+ }\n+ }\n+\n+ \/\/ 5. Verify we can update from each step to each step when moving primary -> fallback.\n+ for (let i = 0; i < steps.length; i++) {\n+ for (let j = 0; j < steps.length; j++) {\n+ \/\/ Always start with a fresh container and steps[i].\n+ container = document.createElement('div');\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={z}>{steps[i]}<\/React.Suspense>\n+ <Y \/>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+ expect(print(store)).toEqual(snapshots[i]);\n+ \/\/ Re-render with steps[j].\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[j]}>\n+ <Z \/>\n+ <Never \/>\n+ <Z \/>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+ \/\/ Verify the successful transition to steps[j].\n+ expect(print(store)).toEqual(snapshots[j]);\n+ \/\/ Check that we can transition back again.\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={z}>{steps[i]}<\/React.Suspense>\n+ <Y \/>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+ expect(print(store)).toEqual(snapshots[i]);\n+ \/\/ Clean up after every iteration.\n+ act(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(print(store)).toBe('');\n+ }\n+ }\n+\n+ \/\/ 6. Verify we can update from each step to each step when moving fallback -> primary.\n+ for (let i = 0; i < steps.length; i++) {\n+ for (let j = 0; j < steps.length; j++) {\n+ \/\/ Always start with a fresh container and steps[i].\n+ container = document.createElement('div');\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[i]}>\n+ <Z \/>\n+ <Never \/>\n+ <Z \/>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+ expect(print(store)).toEqual(snapshots[i]);\n+ \/\/ Re-render with steps[j].\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={z}>{steps[j]}<\/React.Suspense>\n+ <Y \/>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+ \/\/ Verify the successful transition to steps[j].\n+ expect(print(store)).toEqual(snapshots[j]);\n+ \/\/ Check that we can transition back again.\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[i]}>\n+ <Z \/>\n+ <Never \/>\n+ <Z \/>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+ expect(print(store)).toEqual(snapshots[i]);\n+ \/\/ Clean up after every iteration.\n+ act(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(print(store)).toBe('');\n+ }\n+ }\n+\n+ \/\/ 7. Verify we can update from each step to each step when toggling Suspense.\n+ for (let i = 0; i < steps.length; i++) {\n+ for (let j = 0; j < steps.length; j++) {\n+ \/\/ Always start with a fresh container and steps[i].\n+ container = document.createElement('div');\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[j]}>{steps[i]}<\/React.Suspense>\n+ <Y \/>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+\n+ \/\/ We get ID from the index in the tree above:\n+ \/\/ Root, X, Suspense, ...\n+ \/\/ ^ (index is 2)\n+ const suspenseID = store.getElementIDAtIndex(2);\n+\n+ \/\/ Force fallback.\n+ expect(print(store)).toEqual(snapshots[i]);\n+ act(() => {\n+ const suspenseID = store.getElementIDAtIndex(2);\n+ bridge.send('overrideSuspense', {\n+ id: suspenseID,\n+ rendererID: store.getRendererIDForElement(suspenseID),\n+ forceFallback: true,\n+ });\n+ });\n+ expect(print(store)).toEqual(snapshots[j]);\n+\n+ \/\/ Stop forcing fallback.\n+ act(() => {\n+ bridge.send('overrideSuspense', {\n+ id: suspenseID,\n+ rendererID: store.getRendererIDForElement(suspenseID),\n+ forceFallback: false,\n+ });\n+ });\n+ expect(print(store)).toEqual(snapshots[i]);\n+\n+ \/\/ Trigger actual fallback.\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[j]}>\n+ <Z \/>\n+ <Never \/>\n+ <Z \/>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+ expect(print(store)).toEqual(snapshots[j]);\n+\n+ \/\/ Force fallback while we're in fallback mode.\n+ act(() => {\n+ bridge.send('overrideSuspense', {\n+ id: suspenseID,\n+ rendererID: store.getRendererIDForElement(suspenseID),\n+ forceFallback: true,\n+ });\n+ });\n+ \/\/ Keep seeing fallback content.\n+ expect(print(store)).toEqual(snapshots[j]);\n+\n+ \/\/ Switch to primary mode.\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[j]}>{steps[i]}<\/React.Suspense>\n+ <Y \/>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+ \/\/ Fallback is still forced though.\n+ expect(print(store)).toEqual(snapshots[j]);\n+\n+ \/\/ Stop forcing fallback. This reverts to primary content.\n+ act(() => {\n+ bridge.send('overrideSuspense', {\n+ id: suspenseID,\n+ rendererID: store.getRendererIDForElement(suspenseID),\n+ forceFallback: false,\n+ });\n+ });\n+ \/\/ Now we see primary content.\n+ expect(print(store)).toEqual(snapshots[i]);\n+\n+ \/\/ Clean up after every iteration.\n+ act(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(print(store)).toBe('');\n+ }\n+ }\n+ });\n+\n+ it('should handle a stress test for Suspense without type change (Sync Mode)', () => {\n+ const A = () => 'a';\n+ const B = () => 'b';\n+ const C = () => 'c';\n+ const X = () => 'x';\n+ const Y = () => 'y';\n+ const Z = () => 'z';\n+ const a = <A key=\"a\" \/>;\n+ const b = <B key=\"b\" \/>;\n+ const c = <C key=\"c\" \/>;\n+ const z = <Z key=\"z\" \/>;\n+\n+ \/\/ prettier-ignore\n+ const steps = [\n+ a,\n+ [a],\n+ [a, b, c],\n+ [c, b, a],\n+ [c, null, a],\n+ <React.Fragment>{c}{a}<\/React.Fragment>,\n+ <div>{c}{a}<\/div>,\n+ <div><span>{a}<\/span>{b}<\/div>,\n+ [[a]],\n+ null,\n+ b,\n+ a\n+ ];\n+\n+ const Never = () => {\n+ throw new Promise(() => {});\n+ };\n+\n+ const MaybeSuspend = ({ children, suspend }) => {\n+ if (suspend) {\n+ return (\n+ <div>\n+ {children}\n+ <Never \/>\n+ <X \/>\n+ <\/div>\n+ );\n+ }\n+ return (\n+ <div>\n+ {children}\n+ <Z \/>\n+ <\/div>\n+ );\n+ };\n+\n+ const Root = ({ children }) => {\n+ return children;\n+ };\n+\n+ \/\/ 1. For each step, check Suspense can render them as initial primary content.\n+ \/\/ This is the only step where we use Jest snapshots.\n+ let snapshots = [];\n+ let container = document.createElement('div');\n+ for (let i = 0; i < steps.length; i++) {\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={z}>\n+ <MaybeSuspend suspend={false}>{steps[i]}<\/MaybeSuspend>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+ \/\/ We snapshot each step once so it doesn't regress.\n+ expect(store).toMatchSnapshot();\n+ snapshots.push(print(store));\n+ act(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(print(store)).toBe('');\n+ }\n+\n+ \/\/ 2. Verify check Suspense can render same steps as initial fallback content.\n+ \/\/ We don't actually assert here because the tree includes <MaybeSuspend>\n+ \/\/ which is different from the snapshots above. So we take more snapshots.\n+ let fallbackSnapshots = [];\n+ for (let i = 0; i < steps.length; i++) {\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[i]}>\n+ <Z \/>\n+ <MaybeSuspend suspend={true}>{steps[i]}<\/MaybeSuspend>\n+ <Z \/>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+ \/\/ We snapshot each step once so it doesn't regress.\n+ expect(store).toMatchSnapshot();\n+ fallbackSnapshots.push(print(store));\n+ act(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(print(store)).toBe('');\n+ }\n+\n+ \/\/ 3. Verify we can update from each step to each step in primary mode.\n+ for (let i = 0; i < steps.length; i++) {\n+ for (let j = 0; j < steps.length; j++) {\n+ \/\/ Always start with a fresh container and steps[i].\n+ container = document.createElement('div');\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={z}>\n+ <MaybeSuspend suspend={false}>{steps[i]}<\/MaybeSuspend>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+ expect(print(store)).toEqual(snapshots[i]);\n+ \/\/ Re-render with steps[j].\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={z}>\n+ <MaybeSuspend suspend={false}>{steps[j]}<\/MaybeSuspend>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+ \/\/ Verify the successful transition to steps[j].\n+ expect(print(store)).toEqual(snapshots[j]);\n+ \/\/ Check that we can transition back again.\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={z}>\n+ <MaybeSuspend suspend={false}>{steps[i]}<\/MaybeSuspend>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+ expect(print(store)).toEqual(snapshots[i]);\n+ \/\/ Clean up after every iteration.\n+ act(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(print(store)).toBe('');\n+ }\n+ }\n+\n+ \/\/ 4. Verify we can update from each step to each step in fallback mode.\n+ for (let i = 0; i < steps.length; i++) {\n+ for (let j = 0; j < steps.length; j++) {\n+ \/\/ Always start with a fresh container and steps[i].\n+ container = document.createElement('div');\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[i]}>\n+ <Z \/>\n+ <MaybeSuspend suspend={true}>\n+ <X \/>\n+ <Y \/>\n+ <\/MaybeSuspend>\n+ <Z \/>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+ expect(print(store)).toEqual(fallbackSnapshots[i]);\n+ \/\/ Re-render with steps[j].\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[j]}>\n+ <Z \/>\n+ <MaybeSuspend suspend={true}>\n+ <Y \/>\n+ <X \/>\n+ <\/MaybeSuspend>\n+ <Z \/>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+ \/\/ Verify the successful transition to steps[j].\n+ expect(print(store)).toEqual(fallbackSnapshots[j]);\n+ \/\/ Check that we can transition back again.\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[i]}>\n+ <Z \/>\n+ <MaybeSuspend suspend={true}>\n+ <X \/>\n+ <Y \/>\n+ <\/MaybeSuspend>\n+ <Z \/>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+ expect(print(store)).toEqual(fallbackSnapshots[i]);\n+ \/\/ Clean up after every iteration.\n+ act(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(print(store)).toBe('');\n+ }\n+ }\n+\n+ \/\/ 5. Verify we can update from each step to each step when moving primary -> fallback.\n+ for (let i = 0; i < steps.length; i++) {\n+ for (let j = 0; j < steps.length; j++) {\n+ \/\/ Always start with a fresh container and steps[i].\n+ container = document.createElement('div');\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={z}>\n+ <MaybeSuspend suspend={false}>{steps[i]}<\/MaybeSuspend>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+ expect(print(store)).toEqual(snapshots[i]);\n+ \/\/ Re-render with steps[j].\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[j]}>\n+ <MaybeSuspend suspend={true}>{steps[i]}<\/MaybeSuspend>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+ \/\/ Verify the successful transition to steps[j].\n+ expect(print(store)).toEqual(fallbackSnapshots[j]);\n+ \/\/ Check that we can transition back again.\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={z}>\n+ <MaybeSuspend suspend={false}>{steps[i]}<\/MaybeSuspend>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+ expect(print(store)).toEqual(snapshots[i]);\n+ \/\/ Clean up after every iteration.\n+ act(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(print(store)).toBe('');\n+ }\n+ }\n+\n+ \/\/ 6. Verify we can update from each step to each step when moving fallback -> primary.\n+ for (let i = 0; i < steps.length; i++) {\n+ for (let j = 0; j < steps.length; j++) {\n+ \/\/ Always start with a fresh container and steps[i].\n+ container = document.createElement('div');\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[i]}>\n+ <MaybeSuspend suspend={true}>{steps[j]}<\/MaybeSuspend>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+ expect(print(store)).toEqual(fallbackSnapshots[i]);\n+ \/\/ Re-render with steps[j].\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[i]}>\n+ <MaybeSuspend suspend={false}>{steps[j]}<\/MaybeSuspend>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+ \/\/ Verify the successful transition to steps[j].\n+ expect(print(store)).toEqual(snapshots[j]);\n+ \/\/ Check that we can transition back again.\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[i]}>\n+ <MaybeSuspend suspend={true}>{steps[j]}<\/MaybeSuspend>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+ expect(print(store)).toEqual(fallbackSnapshots[i]);\n+ \/\/ Clean up after every iteration.\n+ act(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(print(store)).toBe('');\n+ }\n+ }\n+\n+ \/\/ 7. Verify we can update from each step to each step when toggling Suspense.\n+ for (let i = 0; i < steps.length; i++) {\n+ for (let j = 0; j < steps.length; j++) {\n+ \/\/ Always start with a fresh container and steps[i].\n+ container = document.createElement('div');\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[j]}>\n+ <MaybeSuspend suspend={false}>{steps[i]}<\/MaybeSuspend>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+\n+ \/\/ We get ID from the index in the tree above:\n+ \/\/ Root, X, Suspense, ...\n+ \/\/ ^ (index is 2)\n+ const suspenseID = store.getElementIDAtIndex(2);\n+\n+ \/\/ Force fallback.\n+ expect(print(store)).toEqual(snapshots[i]);\n+ act(() => {\n+ const suspenseID = store.getElementIDAtIndex(2);\n+ bridge.send('overrideSuspense', {\n+ id: suspenseID,\n+ rendererID: store.getRendererIDForElement(suspenseID),\n+ forceFallback: true,\n+ });\n+ });\n+ expect(print(store)).toEqual(fallbackSnapshots[j]);\n+\n+ \/\/ Stop forcing fallback.\n+ act(() => {\n+ bridge.send('overrideSuspense', {\n+ id: suspenseID,\n+ rendererID: store.getRendererIDForElement(suspenseID),\n+ forceFallback: false,\n+ });\n+ });\n+ expect(print(store)).toEqual(snapshots[i]);\n+\n+ \/\/ Trigger actual fallback.\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[j]}>\n+ <MaybeSuspend suspend={true}>{steps[i]}<\/MaybeSuspend>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+ expect(print(store)).toEqual(fallbackSnapshots[j]);\n+\n+ \/\/ Force fallback while we're in fallback mode.\n+ act(() => {\n+ bridge.send('overrideSuspense', {\n+ id: suspenseID,\n+ rendererID: store.getRendererIDForElement(suspenseID),\n+ forceFallback: true,\n+ });\n+ });\n+ \/\/ Keep seeing fallback content.\n+ expect(print(store)).toEqual(fallbackSnapshots[j]);\n+\n+ \/\/ Switch to primary mode.\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[j]}>\n+ <MaybeSuspend suspend={false}>{steps[i]}<\/MaybeSuspend>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+ \/\/ Fallback is still forced though.\n+ expect(print(store)).toEqual(fallbackSnapshots[j]);\n+\n+ \/\/ Stop forcing fallback. This reverts to primary content.\n+ act(() => {\n+ bridge.send('overrideSuspense', {\n+ id: suspenseID,\n+ rendererID: store.getRendererIDForElement(suspenseID),\n+ forceFallback: false,\n+ });\n+ });\n+ \/\/ Now we see primary content.\n+ expect(print(store)).toEqual(snapshots[i]);\n+\n+ \/\/ Clean up after every iteration.\n+ act(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(print(store)).toBe('');\n+ }\n+ }\n+ });\n+});\ndiff --git a\/src\/__tests__\/storeStressTestConcurrent-test.js b\/src\/__tests__\/storeStressTestConcurrent-test.js\nnew file mode 100644\nindex 0000000000..d2a834ca98\n--- \/dev\/null\n+++ b\/src\/__tests__\/storeStressTestConcurrent-test.js\n@@ -0,0 +1,1094 @@\n+\/\/ @flow\n+\n+describe('StoreStressConcurrent', () => {\n+ let React;\n+ let ReactDOM;\n+ let act;\n+ let bridge;\n+ let store;\n+ let print;\n+\n+ beforeEach(() => {\n+ bridge = global.bridge;\n+ store = global.store;\n+ store.collapseNodesByDefault = false;\n+\n+ React = require('react');\n+ ReactDOM = require('react-dom');\n+ act = require('.\/utils').act;\n+\n+ print = require('.\/storeSerializer').print;\n+ });\n+\n+ \/\/ This is a stress test for the tree mount\/update\/unmount traversal.\n+ \/\/ It renders different trees that should produce the same output.\n+ it('should handle a stress test with different tree operations (Concurrent Mode)', () => {\n+ let setShowX;\n+ const A = () => 'a';\n+ const B = () => 'b';\n+ const C = () => {\n+ \/\/ We'll be manually flipping this component back and forth in the test.\n+ \/\/ We only do this for a single node in order to verify that DevTools\n+ \/\/ can handle a subtree switching alternates while other subtrees are memoized.\n+ let [showX, _setShowX] = React.useState(false);\n+ setShowX = _setShowX;\n+ return showX ? <X \/> : 'c';\n+ };\n+ const D = () => 'd';\n+ const E = () => 'e';\n+ const X = () => 'x';\n+ const a = <A key=\"a\" \/>;\n+ const b = <B key=\"b\" \/>;\n+ const c = <C key=\"c\" \/>;\n+ const d = <D key=\"d\" \/>;\n+ const e = <E key=\"e\" \/>;\n+\n+ function Parent({ children }) {\n+ return children;\n+ }\n+\n+ \/\/ 1. Render a normal version of [a, b, c, d, e].\n+ let container = document.createElement('div');\n+ \/\/ $FlowFixMe\n+ let root = ReactDOM.unstable_createRoot(container);\n+ act(() => root.render(<Parent>{[a, b, c, d, e]}<\/Parent>));\n+ expect(store).toMatchSnapshot('1: abcde');\n+ expect(container.textContent).toMatch('abcde');\n+ const snapshotForABCDE = print(store);\n+\n+ \/\/ 2. Render a version where <C \/> renders an <X \/> child instead of 'c'.\n+ \/\/ This is how we'll test an update to a single component.\n+ act(() => {\n+ setShowX(true);\n+ });\n+ expect(store).toMatchSnapshot('2: abxde');\n+ expect(container.textContent).toMatch('abxde');\n+ const snapshotForABXDE = print(store);\n+\n+ \/\/ 3. Verify flipping it back produces the original result.\n+ act(() => {\n+ setShowX(false);\n+ });\n+ expect(container.textContent).toMatch('abcde');\n+ expect(print(store)).toBe(snapshotForABCDE);\n+\n+ \/\/ 4. Clean up.\n+ act(() => root.unmount());\n+ expect(print(store)).toBe('');\n+\n+ \/\/ Now comes the interesting part.\n+ \/\/ All of these cases are equivalent to [a, b, c, d, e] in output.\n+ \/\/ We'll verify that DevTools produces the same snapshots for them.\n+ \/\/ These cases are picked so that rendering them sequentially in the same\n+ \/\/ container results in a combination of mounts, updates, unmounts, and reorders.\n+ \/\/ prettier-ignore\n+ let cases = [\n+ [a, b, c, d, e],\n+ [[a], b, c, d, e],\n+ [[a, b], c, d, e],\n+ [[a, b], c, [d, e]],\n+ [[a, b], c, [d, '', e]],\n+ [[a], b, c, d, [e]],\n+ [a, b, [[c]], d, e],\n+ [[a, ''], [b], [c], [d], [e]],\n+ [a, b, [c, [d, ['', e]]]],\n+ [a, b, c, d, e],\n+ [<div key=\"0\">{a}<\/div>, b, c, d, e],\n+ [<div key=\"0\">{a}{b}<\/div>, c, d, e],\n+ [<div key=\"0\">{a}{b}<\/div>, c, <div key=\"1\">{d}{e}<\/div>],\n+ [<div key=\"1\">{a}{b}<\/div>, c, <div key=\"0\">{d}{e}<\/div>],\n+ [<div key=\"0\">{a}{b}<\/div>, c, <div key=\"1\">{d}{e}<\/div>],\n+ [<div key=\"2\">{a}{b}<\/div>, c, <div key=\"3\">{d}{e}<\/div>],\n+ [<span key=\"0\">{a}<\/span>, b, c, d, [e]],\n+ [a, b, <span key=\"0\"><span>{c}<\/span><\/span>, d, e],\n+ [<div key=\"0\">{a}<\/div>, [b], <span key=\"1\">{c}<\/span>, [d], <div key=\"2\">{e}<\/div>],\n+ [a, b, [c, <div key=\"0\">{d}<span>{e}<\/span><\/div>], ''],\n+ [a, [[]], b, c, [d, [[]], e]],\n+ [[[a, b, c, d], e]],\n+ [a, b, c, d, e]\n+ ];\n+\n+ \/\/ 5. Test fresh mount for each case.\n+ for (let i = 0; i < cases.length; i++) {\n+ \/\/ Ensure fresh mount.\n+ container = document.createElement('div');\n+ \/\/ $FlowFixMe\n+ root = ReactDOM.unstable_createRoot(container);\n+\n+ \/\/ Verify mounting 'abcde'.\n+ act(() => root.render(<Parent>{cases[i]}<\/Parent>));\n+ expect(container.textContent).toMatch('abcde');\n+ expect(print(store)).toEqual(snapshotForABCDE);\n+\n+ \/\/ Verify switching to 'abxde'.\n+ act(() => {\n+ setShowX(true);\n+ });\n+ expect(container.textContent).toMatch('abxde');\n+ expect(print(store)).toBe(snapshotForABXDE);\n+\n+ \/\/ Verify switching back to 'abcde'.\n+ act(() => {\n+ setShowX(false);\n+ });\n+ expect(container.textContent).toMatch('abcde');\n+ expect(print(store)).toBe(snapshotForABCDE);\n+\n+ \/\/ Clean up.\n+ act(() => root.unmount());\n+ expect(print(store)).toBe('');\n+ }\n+\n+ \/\/ 6. Verify *updates* by reusing the container between iterations.\n+ \/\/ There'll be no unmounting until the very end.\n+ container = document.createElement('div');\n+ \/\/ $FlowFixMe\n+ root = ReactDOM.unstable_createRoot(container);\n+ for (let i = 0; i < cases.length; i++) {\n+ \/\/ Verify mounting 'abcde'.\n+ act(() => root.render(<Parent>{cases[i]}<\/Parent>));\n+ expect(container.textContent).toMatch('abcde');\n+ expect(print(store)).toEqual(snapshotForABCDE);\n+\n+ \/\/ Verify switching to 'abxde'.\n+ act(() => {\n+ setShowX(true);\n+ });\n+ expect(container.textContent).toMatch('abxde');\n+ expect(print(store)).toBe(snapshotForABXDE);\n+\n+ \/\/ Verify switching back to 'abcde'.\n+ act(() => {\n+ setShowX(false);\n+ });\n+ expect(container.textContent).toMatch('abcde');\n+ expect(print(store)).toBe(snapshotForABCDE);\n+ \/\/ Don't unmount. Reuse the container between iterations.\n+ }\n+ act(() => root.unmount());\n+ expect(print(store)).toBe('');\n+ });\n+\n+ it('should handle stress test with reordering (Concurrent Mode)', () => {\n+ const A = () => 'a';\n+ const B = () => 'b';\n+ const C = () => 'c';\n+ const D = () => 'd';\n+ const E = () => 'e';\n+ const a = <A key=\"a\" \/>;\n+ const b = <B key=\"b\" \/>;\n+ const c = <C key=\"c\" \/>;\n+ const d = <D key=\"d\" \/>;\n+ const e = <E key=\"e\" \/>;\n+\n+ \/\/ prettier-ignore\n+ let steps = [\n+ a,\n+ b,\n+ c,\n+ d,\n+ e,\n+ [a],\n+ [b],\n+ [c],\n+ [d],\n+ [e],\n+ [a, b],\n+ [b, a],\n+ [b, c],\n+ [c, b],\n+ [a, c],\n+ [c, a],\n+ ];\n+\n+ const Root = ({ children }) => {\n+ return children;\n+ };\n+\n+ \/\/ 1. Capture the expected render result.\n+ let snapshots = [];\n+ let container = document.createElement('div');\n+ \/\/ $FlowFixMe\n+ let root = ReactDOM.unstable_createRoot(container);\n+ for (let i = 0; i < steps.length; i++) {\n+ act(() => root.render(<Root>{steps[i]}<\/Root>));\n+ \/\/ We snapshot each step once so it doesn't regress.\n+ expect(store).toMatchSnapshot();\n+ snapshots.push(print(store));\n+ act(() => root.unmount());\n+ expect(print(store)).toBe('');\n+ }\n+\n+ \/\/ 2. Verify that we can update from every step to every other step and back.\n+ for (let i = 0; i < steps.length; i++) {\n+ for (let j = 0; j < steps.length; j++) {\n+ let container = document.createElement('div');\n+ \/\/ $FlowFixMe\n+ let root = ReactDOM.unstable_createRoot(container);\n+ act(() => root.render(<Root>{steps[i]}<\/Root>));\n+ expect(print(store)).toMatch(snapshots[i]);\n+ act(() => root.render(<Root>{steps[j]}<\/Root>));\n+ expect(print(store)).toMatch(snapshots[j]);\n+ act(() => root.render(<Root>{steps[i]}<\/Root>));\n+ expect(print(store)).toMatch(snapshots[i]);\n+ act(() => root.unmount());\n+ expect(print(store)).toBe('');\n+ }\n+ }\n+\n+ \/\/ 3. Same test as above, but this time we wrap children in a host component.\n+ for (let i = 0; i < steps.length; i++) {\n+ for (let j = 0; j < steps.length; j++) {\n+ let container = document.createElement('div');\n+ \/\/ $FlowFixMe\n+ let root = ReactDOM.unstable_createRoot(container);\n+ act(() =>\n+ root.render(\n+ <Root>\n+ <div>{steps[i]}<\/div>\n+ <\/Root>\n+ )\n+ );\n+ expect(print(store)).toMatch(snapshots[i]);\n+ act(() =>\n+ root.render(\n+ <Root>\n+ <div>{steps[j]}<\/div>\n+ <\/Root>\n+ )\n+ );\n+ expect(print(store)).toMatch(snapshots[j]);\n+ act(() =>\n+ root.render(\n+ <Root>\n+ <div>{steps[i]}<\/div>\n+ <\/Root>\n+ )\n+ );\n+ expect(print(store)).toMatch(snapshots[i]);\n+ act(() => root.unmount());\n+ expect(print(store)).toBe('');\n+ }\n+ }\n+ });\n+\n+ it('should handle a stress test for Suspense (Concurrent Mode)', async () => {\n+ const A = () => 'a';\n+ const B = () => 'b';\n+ const C = () => 'c';\n+ const X = () => 'x';\n+ const Y = () => 'y';\n+ const Z = () => 'z';\n+ const a = <A key=\"a\" \/>;\n+ const b = <B key=\"b\" \/>;\n+ const c = <C key=\"c\" \/>;\n+ const z = <Z key=\"z\" \/>;\n+\n+ \/\/ prettier-ignore\n+ const steps = [\n+ a,\n+ [a],\n+ [a, b, c],\n+ [c, b, a],\n+ [c, null, a],\n+ <React.Fragment>{c}{a}<\/React.Fragment>,\n+ <div>{c}{a}<\/div>,\n+ <div><span>{a}<\/span>{b}<\/div>,\n+ [[a]],\n+ null,\n+ b,\n+ a\n+ ];\n+\n+ const Never = () => {\n+ throw new Promise(() => {});\n+ };\n+\n+ const Root = ({ children }) => {\n+ return children;\n+ };\n+\n+ \/\/ 1. For each step, check Suspense can render them as initial primary content.\n+ \/\/ This is the only step where we use Jest snapshots.\n+ let snapshots = [];\n+ let container = document.createElement('div');\n+ \/\/ $FlowFixMe\n+ let root = ReactDOM.unstable_createRoot(container);\n+ for (let i = 0; i < steps.length; i++) {\n+ act(() =>\n+ root.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={z}>{steps[i]}<\/React.Suspense>\n+ <Y \/>\n+ <\/Root>\n+ )\n+ );\n+ \/\/ We snapshot each step once so it doesn't regress.\n+ expect(store).toMatchSnapshot();\n+ snapshots.push(print(store));\n+ act(() => root.unmount());\n+ expect(print(store)).toBe('');\n+ }\n+\n+ \/\/ 2. Verify check Suspense can render same steps as initial fallback content.\n+ for (let i = 0; i < steps.length; i++) {\n+ act(() =>\n+ root.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[i]}>\n+ <Z \/>\n+ <Never \/>\n+ <Z \/>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>\n+ )\n+ );\n+ expect(print(store)).toEqual(snapshots[i]);\n+ act(() => root.unmount());\n+ expect(print(store)).toBe('');\n+ }\n+\n+ \/\/ 3. Verify we can update from each step to each step in primary mode.\n+ for (let i = 0; i < steps.length; i++) {\n+ for (let j = 0; j < steps.length; j++) {\n+ \/\/ Always start with a fresh container and steps[i].\n+ container = document.createElement('div');\n+ \/\/ $FlowFixMe\n+ root = ReactDOM.unstable_createRoot(container);\n+ act(() =>\n+ root.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={z}>{steps[i]}<\/React.Suspense>\n+ <Y \/>\n+ <\/Root>\n+ )\n+ );\n+ expect(print(store)).toEqual(snapshots[i]);\n+ \/\/ Re-render with steps[j].\n+ act(() =>\n+ root.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={z}>{steps[j]}<\/React.Suspense>\n+ <Y \/>\n+ <\/Root>\n+ )\n+ );\n+ \/\/ Verify the successful transition to steps[j].\n+ expect(print(store)).toEqual(snapshots[j]);\n+ \/\/ Check that we can transition back again.\n+ act(() =>\n+ root.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={z}>{steps[i]}<\/React.Suspense>\n+ <Y \/>\n+ <\/Root>\n+ )\n+ );\n+ expect(print(store)).toEqual(snapshots[i]);\n+ \/\/ Clean up after every iteration.\n+ act(() => root.unmount());\n+ expect(print(store)).toBe('');\n+ }\n+ }\n+\n+ \/\/ 4. Verify we can update from each step to each step in fallback mode.\n+ for (let i = 0; i < steps.length; i++) {\n+ for (let j = 0; j < steps.length; j++) {\n+ \/\/ Always start with a fresh container and steps[i].\n+ container = document.createElement('div');\n+ \/\/ $FlowFixMe\n+ root = ReactDOM.unstable_createRoot(container);\n+ act(() =>\n+ root.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[i]}>\n+ <Z \/>\n+ <Never \/>\n+ <Z \/>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>\n+ )\n+ );\n+ expect(print(store)).toEqual(snapshots[i]);\n+ \/\/ Re-render with steps[j].\n+ act(() =>\n+ root.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[j]}>\n+ <Z \/>\n+ <Never \/>\n+ <Z \/>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>\n+ )\n+ );\n+ \/\/ Verify the successful transition to steps[j].\n+ expect(print(store)).toEqual(snapshots[j]);\n+ \/\/ Check that we can transition back again.\n+ act(() =>\n+ root.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[i]}>\n+ <Z \/>\n+ <Never \/>\n+ <Z \/>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>\n+ )\n+ );\n+ expect(print(store)).toEqual(snapshots[i]);\n+ \/\/ Clean up after every iteration.\n+ act(() => root.unmount());\n+ expect(print(store)).toBe('');\n+ }\n+ }\n+\n+ \/\/ 5. Verify we can update from each step to each step when moving primary -> fallback.\n+ for (let i = 0; i < steps.length; i++) {\n+ for (let j = 0; j < steps.length; j++) {\n+ \/\/ Always start with a fresh container and steps[i].\n+ container = document.createElement('div');\n+ \/\/ $FlowFixMe\n+ root = ReactDOM.unstable_createRoot(container);\n+ act(() =>\n+ root.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={z}>{steps[i]}<\/React.Suspense>\n+ <Y \/>\n+ <\/Root>\n+ )\n+ );\n+ expect(print(store)).toEqual(snapshots[i]);\n+ \/\/ Re-render with steps[j].\n+ act(() =>\n+ root.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[j]}>\n+ <Z \/>\n+ <Never \/>\n+ <Z \/>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>\n+ )\n+ );\n+ \/\/ Verify the successful transition to steps[j].\n+ expect(print(store)).toEqual(snapshots[j]);\n+ \/\/ Check that we can transition back again.\n+ act(() =>\n+ root.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={z}>{steps[i]}<\/React.Suspense>\n+ <Y \/>\n+ <\/Root>\n+ )\n+ );\n+ expect(print(store)).toEqual(snapshots[i]);\n+ \/\/ Clean up after every iteration.\n+ act(() => root.unmount());\n+ expect(print(store)).toBe('');\n+ }\n+ }\n+\n+ \/\/ 6. Verify we can update from each step to each step when moving fallback -> primary.\n+ for (let i = 0; i < steps.length; i++) {\n+ for (let j = 0; j < steps.length; j++) {\n+ \/\/ Always start with a fresh container and steps[i].\n+ container = document.createElement('div');\n+ \/\/ $FlowFixMe\n+ root = ReactDOM.unstable_createRoot(container);\n+ act(() =>\n+ root.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[i]}>\n+ <Z \/>\n+ <Never \/>\n+ <Z \/>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>\n+ )\n+ );\n+ expect(print(store)).toEqual(snapshots[i]);\n+ \/\/ Re-render with steps[j].\n+ act(() =>\n+ root.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={z}>{steps[j]}<\/React.Suspense>\n+ <Y \/>\n+ <\/Root>\n+ )\n+ );\n+ \/\/ Verify the successful transition to steps[j].\n+ expect(print(store)).toEqual(snapshots[j]);\n+ \/\/ Check that we can transition back again.\n+ act(() =>\n+ root.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[i]}>\n+ <Z \/>\n+ <Never \/>\n+ <Z \/>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>\n+ )\n+ );\n+ expect(print(store)).toEqual(snapshots[i]);\n+ \/\/ Clean up after every iteration.\n+ act(() => root.unmount());\n+ expect(print(store)).toBe('');\n+ }\n+ }\n+\n+ \/\/ 7. Verify we can update from each step to each step when toggling Suspense.\n+ for (let i = 0; i < steps.length; i++) {\n+ for (let j = 0; j < steps.length; j++) {\n+ \/\/ Always start with a fresh container and steps[i].\n+ container = document.createElement('div');\n+ \/\/ $FlowFixMe\n+ root = ReactDOM.unstable_createRoot(container);\n+ act(() =>\n+ root.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[j]}>{steps[i]}<\/React.Suspense>\n+ <Y \/>\n+ <\/Root>\n+ )\n+ );\n+\n+ \/\/ We get ID from the index in the tree above:\n+ \/\/ Root, X, Suspense, ...\n+ \/\/ ^ (index is 2)\n+ const suspenseID = store.getElementIDAtIndex(2);\n+\n+ \/\/ Force fallback.\n+ expect(print(store)).toEqual(snapshots[i]);\n+ act(() => {\n+ const suspenseID = store.getElementIDAtIndex(2);\n+ bridge.send('overrideSuspense', {\n+ id: suspenseID,\n+ rendererID: store.getRendererIDForElement(suspenseID),\n+ forceFallback: true,\n+ });\n+ });\n+ expect(print(store)).toEqual(snapshots[j]);\n+\n+ \/\/ Stop forcing fallback.\n+ act(() => {\n+ bridge.send('overrideSuspense', {\n+ id: suspenseID,\n+ rendererID: store.getRendererIDForElement(suspenseID),\n+ forceFallback: false,\n+ });\n+ });\n+ expect(print(store)).toEqual(snapshots[i]);\n+\n+ \/\/ Trigger actual fallback.\n+ act(() =>\n+ root.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[j]}>\n+ <Z \/>\n+ <Never \/>\n+ <Z \/>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>\n+ )\n+ );\n+ expect(print(store)).toEqual(snapshots[j]);\n+\n+ \/\/ Force fallback while we're in fallback mode.\n+ act(() => {\n+ bridge.send('overrideSuspense', {\n+ id: suspenseID,\n+ rendererID: store.getRendererIDForElement(suspenseID),\n+ forceFallback: true,\n+ });\n+ });\n+ \/\/ Keep seeing fallback content.\n+ expect(print(store)).toEqual(snapshots[j]);\n+\n+ \/\/ Switch to primary mode.\n+ act(() =>\n+ root.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[j]}>{steps[i]}<\/React.Suspense>\n+ <Y \/>\n+ <\/Root>\n+ )\n+ );\n+ \/\/ Fallback is still forced though.\n+ expect(print(store)).toEqual(snapshots[j]);\n+\n+ \/\/ Stop forcing fallback. This reverts to primary content.\n+ act(() => {\n+ bridge.send('overrideSuspense', {\n+ id: suspenseID,\n+ rendererID: store.getRendererIDForElement(suspenseID),\n+ forceFallback: false,\n+ });\n+ });\n+ \/\/ Now we see primary content.\n+ expect(print(store)).toEqual(snapshots[i]);\n+\n+ \/\/ Clean up after every iteration.\n+ act(() => root.unmount());\n+ expect(print(store)).toBe('');\n+ }\n+ }\n+ });\n+\n+ it('should handle a stress test for Suspense without type change (Concurrent Mode)', () => {\n+ const A = () => 'a';\n+ const B = () => 'b';\n+ const C = () => 'c';\n+ const X = () => 'x';\n+ const Y = () => 'y';\n+ const Z = () => 'z';\n+ const a = <A key=\"a\" \/>;\n+ const b = <B key=\"b\" \/>;\n+ const c = <C key=\"c\" \/>;\n+ const z = <Z key=\"z\" \/>;\n+\n+ \/\/ prettier-ignore\n+ const steps = [\n+ a,\n+ [a],\n+ [a, b, c],\n+ [c, b, a],\n+ [c, null, a],\n+ <React.Fragment>{c}{a}<\/React.Fragment>,\n+ <div>{c}{a}<\/div>,\n+ <div><span>{a}<\/span>{b}<\/div>,\n+ [[a]],\n+ null,\n+ b,\n+ a\n+ ];\n+\n+ const Never = () => {\n+ throw new Promise(() => {});\n+ };\n+\n+ const MaybeSuspend = ({ children, suspend }) => {\n+ if (suspend) {\n+ return (\n+ <div>\n+ {children}\n+ <Never \/>\n+ <X \/>\n+ <\/div>\n+ );\n+ }\n+ return (\n+ <div>\n+ {children}\n+ <Z \/>\n+ <\/div>\n+ );\n+ };\n+\n+ const Root = ({ children }) => {\n+ return children;\n+ };\n+\n+ \/\/ 1. For each step, check Suspense can render them as initial primary content.\n+ \/\/ This is the only step where we use Jest snapshots.\n+ let snapshots = [];\n+ let container = document.createElement('div');\n+ \/\/ $FlowFixMe\n+ let root = ReactDOM.unstable_createRoot(container);\n+ for (let i = 0; i < steps.length; i++) {\n+ act(() =>\n+ root.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={z}>\n+ <MaybeSuspend suspend={false}>{steps[i]}<\/MaybeSuspend>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>\n+ )\n+ );\n+ \/\/ We snapshot each step once so it doesn't regress.\n+ expect(store).toMatchSnapshot();\n+ snapshots.push(print(store));\n+ act(() => root.unmount());\n+ expect(print(store)).toBe('');\n+ }\n+\n+ \/\/ 2. Verify check Suspense can render same steps as initial fallback content.\n+ \/\/ We don't actually assert here because the tree includes <MaybeSuspend>\n+ \/\/ which is different from the snapshots above. So we take more snapshots.\n+ let fallbackSnapshots = [];\n+ for (let i = 0; i < steps.length; i++) {\n+ act(() =>\n+ root.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[i]}>\n+ <Z \/>\n+ <MaybeSuspend suspend={true}>{steps[i]}<\/MaybeSuspend>\n+ <Z \/>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>\n+ )\n+ );\n+ \/\/ We snapshot each step once so it doesn't regress.\n+ expect(store).toMatchSnapshot();\n+ fallbackSnapshots.push(print(store));\n+ act(() => root.unmount());\n+ expect(print(store)).toBe('');\n+ }\n+\n+ \/\/ 3. Verify we can update from each step to each step in primary mode.\n+ for (let i = 0; i < steps.length; i++) {\n+ for (let j = 0; j < steps.length; j++) {\n+ \/\/ Always start with a fresh container and steps[i].\n+ container = document.createElement('div');\n+ \/\/ $FlowFixMe\n+ root = ReactDOM.unstable_createRoot(container);\n+ act(() =>\n+ root.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={z}>\n+ <MaybeSuspend suspend={false}>{steps[i]}<\/MaybeSuspend>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>\n+ )\n+ );\n+ expect(print(store)).toEqual(snapshots[i]);\n+ \/\/ Re-render with steps[j].\n+ act(() =>\n+ root.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={z}>\n+ <MaybeSuspend suspend={false}>{steps[j]}<\/MaybeSuspend>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>\n+ )\n+ );\n+ \/\/ Verify the successful transition to steps[j].\n+ expect(print(store)).toEqual(snapshots[j]);\n+ \/\/ Check that we can transition back again.\n+ act(() =>\n+ root.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={z}>\n+ <MaybeSuspend suspend={false}>{steps[i]}<\/MaybeSuspend>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>\n+ )\n+ );\n+ expect(print(store)).toEqual(snapshots[i]);\n+ \/\/ Clean up after every iteration.\n+ act(() => root.unmount());\n+ expect(print(store)).toBe('');\n+ }\n+ }\n+\n+ \/\/ 4. Verify we can update from each step to each step in fallback mode.\n+ for (let i = 0; i < steps.length; i++) {\n+ for (let j = 0; j < steps.length; j++) {\n+ \/\/ Always start with a fresh container and steps[i].\n+ container = document.createElement('div');\n+ \/\/ $FlowFixMe\n+ root = ReactDOM.unstable_createRoot(container);\n+ act(() =>\n+ root.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[i]}>\n+ <Z \/>\n+ <MaybeSuspend suspend={true}>\n+ <X \/>\n+ <Y \/>\n+ <\/MaybeSuspend>\n+ <Z \/>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>\n+ )\n+ );\n+ expect(print(store)).toEqual(fallbackSnapshots[i]);\n+ \/\/ Re-render with steps[j].\n+ act(() =>\n+ root.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[j]}>\n+ <Z \/>\n+ <MaybeSuspend suspend={true}>\n+ <Y \/>\n+ <X \/>\n+ <\/MaybeSuspend>\n+ <Z \/>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>\n+ )\n+ );\n+ \/\/ Verify the successful transition to steps[j].\n+ expect(print(store)).toEqual(fallbackSnapshots[j]);\n+ \/\/ Check that we can transition back again.\n+ act(() =>\n+ root.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[i]}>\n+ <Z \/>\n+ <MaybeSuspend suspend={true}>\n+ <X \/>\n+ <Y \/>\n+ <\/MaybeSuspend>\n+ <Z \/>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>\n+ )\n+ );\n+ expect(print(store)).toEqual(fallbackSnapshots[i]);\n+ \/\/ Clean up after every iteration.\n+ act(() => root.unmount());\n+ expect(print(store)).toBe('');\n+ }\n+ }\n+\n+ \/\/ 5. Verify we can update from each step to each step when moving primary -> fallback.\n+ for (let i = 0; i < steps.length; i++) {\n+ for (let j = 0; j < steps.length; j++) {\n+ \/\/ Always start with a fresh container and steps[i].\n+ container = document.createElement('div');\n+ \/\/ $FlowFixMe\n+ root = ReactDOM.unstable_createRoot(container);\n+ act(() =>\n+ root.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={z}>\n+ <MaybeSuspend suspend={false}>{steps[i]}<\/MaybeSuspend>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>\n+ )\n+ );\n+ expect(print(store)).toEqual(snapshots[i]);\n+ \/\/ Re-render with steps[j].\n+ act(() =>\n+ root.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[j]}>\n+ <MaybeSuspend suspend={true}>{steps[i]}<\/MaybeSuspend>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>\n+ )\n+ );\n+ \/\/ Verify the successful transition to steps[j].\n+ expect(print(store)).toEqual(fallbackSnapshots[j]);\n+ \/\/ Check that we can transition back again.\n+ act(() =>\n+ root.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={z}>\n+ <MaybeSuspend suspend={false}>{steps[i]}<\/MaybeSuspend>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>\n+ )\n+ );\n+ expect(print(store)).toEqual(snapshots[i]);\n+ \/\/ Clean up after every iteration.\n+ act(() => root.unmount());\n+ expect(print(store)).toBe('');\n+ }\n+ }\n+\n+ \/\/ 6. Verify we can update from each step to each step when moving fallback -> primary.\n+ for (let i = 0; i < steps.length; i++) {\n+ for (let j = 0; j < steps.length; j++) {\n+ \/\/ Always start with a fresh container and steps[i].\n+ container = document.createElement('div');\n+ \/\/ $FlowFixMe\n+ root = ReactDOM.unstable_createRoot(container);\n+ act(() =>\n+ root.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[i]}>\n+ <MaybeSuspend suspend={true}>{steps[j]}<\/MaybeSuspend>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>\n+ )\n+ );\n+ expect(print(store)).toEqual(fallbackSnapshots[i]);\n+ \/\/ Re-render with steps[j].\n+ act(() =>\n+ root.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[i]}>\n+ <MaybeSuspend suspend={false}>{steps[j]}<\/MaybeSuspend>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>\n+ )\n+ );\n+ \/\/ Verify the successful transition to steps[j].\n+ expect(print(store)).toEqual(snapshots[j]);\n+ \/\/ Check that we can transition back again.\n+ act(() =>\n+ root.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[i]}>\n+ <MaybeSuspend suspend={true}>{steps[j]}<\/MaybeSuspend>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>\n+ )\n+ );\n+ expect(print(store)).toEqual(fallbackSnapshots[i]);\n+ \/\/ Clean up after every iteration.\n+ act(() => root.unmount());\n+ expect(print(store)).toBe('');\n+ }\n+ }\n+\n+ \/\/ 7. Verify we can update from each step to each step when toggling Suspense.\n+ for (let i = 0; i < steps.length; i++) {\n+ for (let j = 0; j < steps.length; j++) {\n+ \/\/ Always start with a fresh container and steps[i].\n+ container = document.createElement('div');\n+ \/\/ $FlowFixMe\n+ root = ReactDOM.unstable_createRoot(container);\n+ act(() =>\n+ root.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[j]}>\n+ <MaybeSuspend suspend={false}>{steps[i]}<\/MaybeSuspend>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>\n+ )\n+ );\n+\n+ \/\/ We get ID from the index in the tree above:\n+ \/\/ Root, X, Suspense, ...\n+ \/\/ ^ (index is 2)\n+ const suspenseID = store.getElementIDAtIndex(2);\n+\n+ \/\/ Force fallback.\n+ expect(print(store)).toEqual(snapshots[i]);\n+ act(() => {\n+ const suspenseID = store.getElementIDAtIndex(2);\n+ bridge.send('overrideSuspense', {\n+ id: suspenseID,\n+ rendererID: store.getRendererIDForElement(suspenseID),\n+ forceFallback: true,\n+ });\n+ });\n+ expect(print(store)).toEqual(fallbackSnapshots[j]);\n+\n+ \/\/ Stop forcing fallback.\n+ act(() => {\n+ bridge.send('overrideSuspense', {\n+ id: suspenseID,\n+ rendererID: store.getRendererIDForElement(suspenseID),\n+ forceFallback: false,\n+ });\n+ });\n+ expect(print(store)).toEqual(snapshots[i]);\n+\n+ \/\/ Trigger actual fallback.\n+ act(() =>\n+ root.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[j]}>\n+ <MaybeSuspend suspend={true}>{steps[i]}<\/MaybeSuspend>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>\n+ )\n+ );\n+ expect(print(store)).toEqual(fallbackSnapshots[j]);\n+\n+ \/\/ Force fallback while we're in fallback mode.\n+ act(() => {\n+ bridge.send('overrideSuspense', {\n+ id: suspenseID,\n+ rendererID: store.getRendererIDForElement(suspenseID),\n+ forceFallback: true,\n+ });\n+ });\n+ \/\/ Keep seeing fallback content.\n+ expect(print(store)).toEqual(fallbackSnapshots[j]);\n+\n+ \/\/ Switch to primary mode.\n+ act(() =>\n+ root.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[j]}>\n+ <MaybeSuspend suspend={false}>{steps[i]}<\/MaybeSuspend>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>\n+ )\n+ );\n+ \/\/ Fallback is still forced though.\n+ expect(print(store)).toEqual(fallbackSnapshots[j]);\n+\n+ \/\/ Stop forcing fallback. This reverts to primary content.\n+ act(() => {\n+ bridge.send('overrideSuspense', {\n+ id: suspenseID,\n+ rendererID: store.getRendererIDForElement(suspenseID),\n+ forceFallback: false,\n+ });\n+ });\n+ \/\/ Now we see primary content.\n+ expect(print(store)).toEqual(snapshots[i]);\n+\n+ \/\/ Clean up after every iteration.\n+ act(() => root.unmount());\n+ expect(print(store)).toBe('');\n+ }\n+ }\n+ });\n+});\ndiff --git a\/src\/__tests__\/treeContext-test.js b\/src\/__tests__\/treeContext-test.js\nnew file mode 100644\nindex 0000000000..68d3ea422b\n--- \/dev\/null\n+++ b\/src\/__tests__\/treeContext-test.js\n@@ -0,0 +1,608 @@\n+\/\/ @flow\n+\n+import typeof ReactTestRenderer from 'react-test-renderer';\n+import type { FrontendBridge } from 'src\/bridge';\n+import type Store from 'src\/devtools\/store';\n+import type {\n+ DispatcherContext,\n+ StateContext,\n+} from 'src\/devtools\/views\/Components\/TreeContext';\n+\n+describe('TreeListContext', () => {\n+ let React;\n+ let ReactDOM;\n+ let TestRenderer: ReactTestRenderer;\n+ let bridge: FrontendBridge;\n+ let store: Store;\n+ let utils;\n+\n+ let BridgeContext;\n+ let StoreContext;\n+ let TreeContext;\n+\n+ let dispatch: DispatcherContext;\n+ let state: StateContext;\n+\n+ beforeEach(() => {\n+ utils = require('.\/utils');\n+ utils.beforeEachProfiling();\n+\n+ bridge = global.bridge;\n+ store = global.store;\n+ store.collapseNodesByDefault = false;\n+\n+ React = require('react');\n+ ReactDOM = require('react-dom');\n+ TestRenderer = utils.requireTestRenderer();\n+\n+ BridgeContext = require('src\/devtools\/views\/context').BridgeContext;\n+ StoreContext = require('src\/devtools\/views\/context').StoreContext;\n+ TreeContext = require('src\/devtools\/views\/Components\/TreeContext');\n+ });\n+\n+ afterEach(() => {\n+ \/\/ Reset between tests\n+ dispatch = ((null: any): DispatcherContext);\n+ state = ((null: any): StateContext);\n+ });\n+\n+ const Capture = () => {\n+ dispatch = React.useContext(TreeContext.TreeDispatcherContext);\n+ state = React.useContext(TreeContext.TreeStateContext);\n+ return null;\n+ };\n+\n+ const Contexts = () => {\n+ return (\n+ <BridgeContext.Provider value={bridge}>\n+ <StoreContext.Provider value={store}>\n+ <TreeContext.TreeContextController>\n+ <Capture \/>\n+ <\/TreeContext.TreeContextController>\n+ <\/StoreContext.Provider>\n+ <\/BridgeContext.Provider>\n+ );\n+ };\n+\n+ describe('tree state', () => {\n+ it('should select the next and previous elements in the tree', () => {\n+ const Grandparent = () => <Parent \/>;\n+ const Parent = () => (\n+ <React.Fragment>\n+ <Child \/>\n+ <Child \/>\n+ <\/React.Fragment>\n+ );\n+ const Child = () => null;\n+\n+ utils.act(() =>\n+ ReactDOM.render(<Grandparent \/>, document.createElement('div'))\n+ );\n+\n+ expect(store).toMatchSnapshot('0: mount');\n+\n+ let renderer;\n+ utils.act(() => (renderer = TestRenderer.create(<Contexts \/>)));\n+ expect(state).toMatchSnapshot('1: initial state');\n+\n+ utils.act(() => dispatch({ type: 'SELECT_NEXT_ELEMENT_IN_TREE' }));\n+ utils.act(() => renderer.update(<Contexts \/>));\n+ expect(state).toMatchSnapshot('2: select first element');\n+\n+ while (\n+ state.selectedElementIndex !== null &&\n+ state.selectedElementIndex < store.numElements - 1\n+ ) {\n+ const index = ((state.selectedElementIndex: any): number);\n+ utils.act(() => dispatch({ type: 'SELECT_NEXT_ELEMENT_IN_TREE' }));\n+ utils.act(() => renderer.update(<Contexts \/>));\n+ expect(state).toMatchSnapshot(`3: select element after (${index})`);\n+ }\n+\n+ while (\n+ state.selectedElementIndex !== null &&\n+ state.selectedElementIndex > 0\n+ ) {\n+ const index = ((state.selectedElementIndex: any): number);\n+ utils.act(() => dispatch({ type: 'SELECT_PREVIOUS_ELEMENT_IN_TREE' }));\n+ utils.act(() => renderer.update(<Contexts \/>));\n+ expect(state).toMatchSnapshot(`4: select element before (${index})`);\n+ }\n+\n+ utils.act(() => dispatch({ type: 'SELECT_PREVIOUS_ELEMENT_IN_TREE' }));\n+ utils.act(() => renderer.update(<Contexts \/>));\n+ expect(state).toMatchSnapshot('5: select previous wraps around to last');\n+\n+ utils.act(() => dispatch({ type: 'SELECT_NEXT_ELEMENT_IN_TREE' }));\n+ utils.act(() => renderer.update(<Contexts \/>));\n+ expect(state).toMatchSnapshot('6: select next wraps around to first');\n+ });\n+\n+ it('should select child elements', () => {\n+ const Grandparent = () => (\n+ <React.Fragment>\n+ <Parent \/>\n+ <Parent \/>\n+ <\/React.Fragment>\n+ );\n+ const Parent = () => (\n+ <React.Fragment>\n+ <Child \/>\n+ <Child \/>\n+ <\/React.Fragment>\n+ );\n+ const Child = () => null;\n+\n+ utils.act(() =>\n+ ReactDOM.render(<Grandparent \/>, document.createElement('div'))\n+ );\n+\n+ expect(store).toMatchSnapshot('0: mount');\n+\n+ let renderer;\n+ utils.act(() => (renderer = TestRenderer.create(<Contexts \/>)));\n+ expect(state).toMatchSnapshot('1: initial state');\n+\n+ utils.act(() =>\n+ dispatch({ type: 'SELECT_ELEMENT_AT_INDEX', payload: 0 })\n+ );\n+ utils.act(() => renderer.update(<Contexts \/>));\n+ expect(state).toMatchSnapshot('2: select first element');\n+\n+ utils.act(() => dispatch({ type: 'SELECT_CHILD_ELEMENT_IN_TREE' }));\n+ utils.act(() => renderer.update(<Contexts \/>));\n+ expect(state).toMatchSnapshot('3: select Parent');\n+\n+ utils.act(() => dispatch({ type: 'SELECT_CHILD_ELEMENT_IN_TREE' }));\n+ utils.act(() => renderer.update(<Contexts \/>));\n+ expect(state).toMatchSnapshot('4: select Child');\n+\n+ const previousState = state;\n+\n+ \/\/ There are no more children to select, so this should be a no-op\n+ utils.act(() => dispatch({ type: 'SELECT_CHILD_ELEMENT_IN_TREE' }));\n+ utils.act(() => renderer.update(<Contexts \/>));\n+ expect(state).toEqual(previousState);\n+ });\n+\n+ it('should select parent elements and then collapse', () => {\n+ const Grandparent = () => (\n+ <React.Fragment>\n+ <Parent \/>\n+ <Parent \/>\n+ <\/React.Fragment>\n+ );\n+ const Parent = () => (\n+ <React.Fragment>\n+ <Child \/>\n+ <Child \/>\n+ <\/React.Fragment>\n+ );\n+ const Child = () => null;\n+\n+ utils.act(() =>\n+ ReactDOM.render(<Grandparent \/>, document.createElement('div'))\n+ );\n+\n+ expect(store).toMatchSnapshot('0: mount');\n+\n+ let renderer;\n+ utils.act(() => (renderer = TestRenderer.create(<Contexts \/>)));\n+ expect(state).toMatchSnapshot('1: initial state');\n+\n+ const lastChildID = store.getElementIDAtIndex(store.numElements - 1);\n+\n+ utils.act(() =>\n+ dispatch({ type: 'SELECT_ELEMENT_BY_ID', payload: lastChildID })\n+ );\n+ utils.act(() => renderer.update(<Contexts \/>));\n+ expect(state).toMatchSnapshot('2: select last child');\n+\n+ utils.act(() => dispatch({ type: 'SELECT_PARENT_ELEMENT_IN_TREE' }));\n+ utils.act(() => renderer.update(<Contexts \/>));\n+ expect(state).toMatchSnapshot('3: select Parent');\n+\n+ utils.act(() => dispatch({ type: 'SELECT_PARENT_ELEMENT_IN_TREE' }));\n+ utils.act(() => renderer.update(<Contexts \/>));\n+ expect(state).toMatchSnapshot('4: select Grandparent');\n+\n+ const previousState = state;\n+\n+ \/\/ There are no more ancestors to select, so this should be a no-op\n+ utils.act(() => dispatch({ type: 'SELECT_PARENT_ELEMENT_IN_TREE' }));\n+ utils.act(() => renderer.update(<Contexts \/>));\n+ expect(state).toEqual(previousState);\n+ });\n+\n+ it('should clear selection if the selected element is unmounted', async done => {\n+ const Grandparent = props => props.children || null;\n+ const Parent = props => props.children || null;\n+ const Child = () => null;\n+\n+ const container = document.createElement('div');\n+ utils.act(() =>\n+ ReactDOM.render(\n+ <Grandparent>\n+ <Parent>\n+ <Child \/>\n+ <Child \/>\n+ <\/Parent>\n+ <\/Grandparent>,\n+ container\n+ )\n+ );\n+\n+ expect(store).toMatchSnapshot('0: mount');\n+\n+ let renderer;\n+ utils.act(() => (renderer = TestRenderer.create(<Contexts \/>)));\n+ expect(state).toMatchSnapshot('1: initial state');\n+\n+ utils.act(() =>\n+ dispatch({ type: 'SELECT_ELEMENT_AT_INDEX', payload: 3 })\n+ );\n+ utils.act(() => renderer.update(<Contexts \/>));\n+ expect(state).toMatchSnapshot('2: select second child');\n+\n+ await utils.actAsync(() =>\n+ ReactDOM.render(\n+ <Grandparent>\n+ <Parent \/>\n+ <\/Grandparent>,\n+ container\n+ )\n+ );\n+ expect(state).toMatchSnapshot(\n+ '3: remove children (parent should now be selected)'\n+ );\n+\n+ await utils.actAsync(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(state).toMatchSnapshot(\n+ '4: unmount root (nothing should be selected)'\n+ );\n+\n+ done();\n+ });\n+ });\n+\n+ describe('search state', () => {\n+ it('should find elements matching search text', () => {\n+ const Foo = () => null;\n+ const Bar = () => null;\n+ const Baz = () => null;\n+ const Qux = () => null;\n+\n+ Qux.displayName = `withHOC(${Qux.name})`;\n+\n+ utils.act(() =>\n+ ReactDOM.render(\n+ <React.Fragment>\n+ <Foo \/>\n+ <Bar \/>\n+ <Baz \/>\n+ <Qux \/>\n+ <\/React.Fragment>,\n+ document.createElement('div')\n+ )\n+ );\n+\n+ expect(store).toMatchSnapshot('0: mount');\n+\n+ let renderer;\n+ utils.act(() => (renderer = TestRenderer.create(<Contexts \/>)));\n+ expect(state).toMatchSnapshot('1: initial state');\n+\n+ \/\/ NOTE: multi-match\n+ utils.act(() => dispatch({ type: 'SET_SEARCH_TEXT', payload: 'ba' }));\n+ utils.act(() => renderer.update(<Contexts \/>));\n+ expect(state).toMatchSnapshot('2: search for \"ba\"');\n+\n+ \/\/ NOTE: single match\n+ utils.act(() => dispatch({ type: 'SET_SEARCH_TEXT', payload: 'f' }));\n+ utils.act(() => renderer.update(<Contexts \/>));\n+ expect(state).toMatchSnapshot('3: search for \"f\"');\n+\n+ \/\/ NOTE: no match\n+ utils.act(() => dispatch({ type: 'SET_SEARCH_TEXT', payload: 'y' }));\n+ utils.act(() => renderer.update(<Contexts \/>));\n+ expect(state).toMatchSnapshot('4: search for \"y\"');\n+\n+ \/\/ NOTE: HOC match\n+ utils.act(() => dispatch({ type: 'SET_SEARCH_TEXT', payload: 'w' }));\n+ utils.act(() => renderer.update(<Contexts \/>));\n+ expect(state).toMatchSnapshot('5: search for \"w\"');\n+ });\n+\n+ it('should select the next and previous items within the search results', () => {\n+ const Foo = () => null;\n+ const Bar = () => null;\n+ const Baz = () => null;\n+\n+ utils.act(() =>\n+ ReactDOM.render(\n+ <React.Fragment>\n+ <Foo \/>\n+ <Baz \/>\n+ <Bar \/>\n+ <Baz \/>\n+ <\/React.Fragment>,\n+ document.createElement('div')\n+ )\n+ );\n+\n+ expect(store).toMatchSnapshot('0: mount');\n+\n+ let renderer;\n+ utils.act(() => (renderer = TestRenderer.create(<Contexts \/>)));\n+ expect(state).toMatchSnapshot('1: initial state');\n+\n+ utils.act(() => dispatch({ type: 'SET_SEARCH_TEXT', payload: 'ba' }));\n+ utils.act(() => renderer.update(<Contexts \/>));\n+ expect(state).toMatchSnapshot('2: search for \"ba\"');\n+\n+ utils.act(() => dispatch({ type: 'GO_TO_NEXT_SEARCH_RESULT' }));\n+ utils.act(() => renderer.update(<Contexts \/>));\n+ expect(state).toMatchSnapshot('3: go to second result');\n+\n+ utils.act(() => dispatch({ type: 'GO_TO_NEXT_SEARCH_RESULT' }));\n+ utils.act(() => renderer.update(<Contexts \/>));\n+ expect(state).toMatchSnapshot('4: go to third result');\n+\n+ utils.act(() => dispatch({ type: 'GO_TO_PREVIOUS_SEARCH_RESULT' }));\n+ utils.act(() => renderer.update(<Contexts \/>));\n+ expect(state).toMatchSnapshot('5: go to second result');\n+\n+ utils.act(() => dispatch({ type: 'GO_TO_PREVIOUS_SEARCH_RESULT' }));\n+ utils.act(() => renderer.update(<Contexts \/>));\n+ expect(state).toMatchSnapshot('6: go to first result');\n+\n+ utils.act(() => dispatch({ type: 'GO_TO_PREVIOUS_SEARCH_RESULT' }));\n+ utils.act(() => renderer.update(<Contexts \/>));\n+ expect(state).toMatchSnapshot('7: wrap to last result');\n+\n+ utils.act(() => dispatch({ type: 'GO_TO_NEXT_SEARCH_RESULT' }));\n+ utils.act(() => renderer.update(<Contexts \/>));\n+ expect(state).toMatchSnapshot('8: wrap to first result');\n+ });\n+\n+ it('should add newly mounted elements to the search results set if they match the current text', async done => {\n+ const Foo = () => null;\n+ const Bar = () => null;\n+ const Baz = () => null;\n+\n+ const container = document.createElement('div');\n+\n+ utils.act(() =>\n+ ReactDOM.render(\n+ <React.Fragment>\n+ <Foo \/>\n+ <Bar \/>\n+ <\/React.Fragment>,\n+ container\n+ )\n+ );\n+\n+ expect(store).toMatchSnapshot('0: mount');\n+\n+ let renderer;\n+ utils.act(() => (renderer = TestRenderer.create(<Contexts \/>)));\n+ expect(state).toMatchSnapshot('1: initial state');\n+\n+ utils.act(() => dispatch({ type: 'SET_SEARCH_TEXT', payload: 'ba' }));\n+ utils.act(() => renderer.update(<Contexts \/>));\n+ expect(state).toMatchSnapshot('2: search for \"ba\"');\n+\n+ await utils.actAsync(() =>\n+ ReactDOM.render(\n+ <React.Fragment>\n+ <Foo \/>\n+ <Bar \/>\n+ <Baz \/>\n+ <\/React.Fragment>,\n+ container\n+ )\n+ );\n+ utils.act(() => renderer.update(<Contexts \/>));\n+ expect(state).toMatchSnapshot('3: mount Baz');\n+\n+ done();\n+ });\n+\n+ it('should remove unmounted elements from the search results set', async done => {\n+ const Foo = () => null;\n+ const Bar = () => null;\n+ const Baz = () => null;\n+\n+ const container = document.createElement('div');\n+\n+ utils.act(() =>\n+ ReactDOM.render(\n+ <React.Fragment>\n+ <Foo \/>\n+ <Bar \/>\n+ <Baz \/>\n+ <\/React.Fragment>,\n+ container\n+ )\n+ );\n+\n+ expect(store).toMatchSnapshot('0: mount');\n+\n+ let renderer;\n+ utils.act(() => (renderer = TestRenderer.create(<Contexts \/>)));\n+ expect(state).toMatchSnapshot('1: initial state');\n+\n+ utils.act(() => dispatch({ type: 'SET_SEARCH_TEXT', payload: 'ba' }));\n+ utils.act(() => renderer.update(<Contexts \/>));\n+ expect(state).toMatchSnapshot('2: search for \"ba\"');\n+\n+ utils.act(() => dispatch({ type: 'GO_TO_NEXT_SEARCH_RESULT' }));\n+ utils.act(() => renderer.update(<Contexts \/>));\n+ expect(state).toMatchSnapshot('3: go to second result');\n+\n+ await utils.actAsync(() =>\n+ ReactDOM.render(\n+ <React.Fragment>\n+ <Foo \/>\n+ <Bar \/>\n+ <\/React.Fragment>,\n+ container\n+ )\n+ );\n+ utils.act(() => renderer.update(<Contexts \/>));\n+ expect(state).toMatchSnapshot('4: unmount Baz');\n+\n+ done();\n+ });\n+ });\n+\n+ describe('owners state', () => {\n+ it('should support entering and existing the owners tree view', () => {\n+ const Grandparent = () => <Parent \/>;\n+ const Parent = () => (\n+ <React.Fragment>\n+ <Child \/>\n+ <Child \/>\n+ <\/React.Fragment>\n+ );\n+ const Child = () => null;\n+\n+ utils.act(() =>\n+ ReactDOM.render(<Grandparent \/>, document.createElement('div'))\n+ );\n+\n+ expect(store).toMatchSnapshot('0: mount');\n+\n+ let renderer;\n+ utils.act(() => (renderer = TestRenderer.create(<Contexts \/>)));\n+ expect(state).toMatchSnapshot('1: initial state');\n+\n+ let parentID = ((store.getElementIDAtIndex(1): any): number);\n+ utils.act(() => dispatch({ type: 'SELECT_OWNER', payload: parentID }));\n+ utils.act(() => renderer.update(<Contexts \/>));\n+ expect(state).toMatchSnapshot('2: parent owners tree');\n+\n+ utils.act(() => dispatch({ type: 'RESET_OWNER_STACK' }));\n+ utils.act(() => renderer.update(<Contexts \/>));\n+ expect(state).toMatchSnapshot('3: final state');\n+ });\n+\n+ it('should remove an element from the owners list if it is unmounted', async done => {\n+ const Grandparent = ({ count }) => <Parent count={count} \/>;\n+ const Parent = ({ count }) =>\n+ new Array(count).fill(true).map((_, index) => <Child key={index} \/>);\n+ const Child = () => null;\n+\n+ const container = document.createElement('div');\n+ utils.act(() => ReactDOM.render(<Grandparent count={2} \/>, container));\n+\n+ expect(store).toMatchSnapshot('0: mount');\n+\n+ let renderer;\n+ utils.act(() => (renderer = TestRenderer.create(<Contexts \/>)));\n+ expect(state).toMatchSnapshot('1: initial state');\n+\n+ let parentID = ((store.getElementIDAtIndex(1): any): number);\n+ utils.act(() => dispatch({ type: 'SELECT_OWNER', payload: parentID }));\n+ utils.act(() => renderer.update(<Contexts \/>));\n+ expect(state).toMatchSnapshot('2: parent owners tree');\n+\n+ await utils.actAsync(() =>\n+ ReactDOM.render(<Grandparent count={1} \/>, container)\n+ );\n+ expect(state).toMatchSnapshot('3: remove second child');\n+\n+ await utils.actAsync(() =>\n+ ReactDOM.render(<Grandparent count={0} \/>, container)\n+ );\n+ expect(state).toMatchSnapshot('4: remove first child');\n+\n+ done();\n+ });\n+\n+ it('should exit the owners list if the current owner is unmounted', async done => {\n+ const Parent = props => props.children || null;\n+ const Child = () => null;\n+\n+ const container = document.createElement('div');\n+ utils.act(() =>\n+ ReactDOM.render(\n+ <Parent>\n+ <Child \/>\n+ <\/Parent>,\n+ container\n+ )\n+ );\n+\n+ expect(store).toMatchSnapshot('0: mount');\n+\n+ let renderer;\n+ utils.act(() => (renderer = TestRenderer.create(<Contexts \/>)));\n+ expect(state).toMatchSnapshot('1: initial state');\n+\n+ let childID = ((store.getElementIDAtIndex(1): any): number);\n+ utils.act(() => dispatch({ type: 'SELECT_OWNER', payload: childID }));\n+ utils.act(() => renderer.update(<Contexts \/>));\n+ expect(state).toMatchSnapshot('2: child owners tree');\n+\n+ await utils.actAsync(() => ReactDOM.render(<Parent \/>, container));\n+ expect(state).toMatchSnapshot('3: remove child');\n+\n+ let parentID = ((store.getElementIDAtIndex(0): any): number);\n+ utils.act(() => dispatch({ type: 'SELECT_OWNER', payload: parentID }));\n+ utils.act(() => renderer.update(<Contexts \/>));\n+ expect(state).toMatchSnapshot('4: parent owners tree');\n+\n+ await utils.actAsync(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(state).toMatchSnapshot('5: unmount root');\n+\n+ done();\n+ });\n+\n+ \/\/ This tests ensures support for toggling Suspense boundaries outside of the active owners list.\n+ it('should exit the owners list if an element outside the list is selected', () => {\n+ const Grandchild = () => null;\n+ const Child = () => (\n+ <React.Suspense fallback=\"Loading\">\n+ <Grandchild \/>\n+ <\/React.Suspense>\n+ );\n+ const Parent = () => (\n+ <React.Suspense fallback=\"Loading\">\n+ <Child \/>\n+ <\/React.Suspense>\n+ );\n+\n+ const container = document.createElement('div');\n+ utils.act(() => ReactDOM.render(<Parent \/>, container));\n+\n+ expect(store).toMatchSnapshot('0: mount');\n+\n+ let renderer;\n+ utils.act(() => (renderer = TestRenderer.create(<Contexts \/>)));\n+ expect(state).toMatchSnapshot('1: initial state');\n+\n+ const outerSuspenseID = ((store.getElementIDAtIndex(1): any): number);\n+ const childID = ((store.getElementIDAtIndex(2): any): number);\n+ const innerSuspenseID = ((store.getElementIDAtIndex(3): any): number);\n+\n+ utils.act(() => dispatch({ type: 'SELECT_OWNER', payload: childID }));\n+ utils.act(() => renderer.update(<Contexts \/>));\n+ expect(state).toMatchSnapshot('2: child owners tree');\n+\n+ \/\/ Toggling a Suspense boundary inside of the flat list should update selected index\n+ utils.act(() =>\n+ dispatch({ type: 'SELECT_ELEMENT_BY_ID', payload: innerSuspenseID })\n+ );\n+ utils.act(() => renderer.update(<Contexts \/>));\n+ expect(state).toMatchSnapshot('3: child owners tree');\n+\n+ \/\/ Toggling a Suspense boundary outside of the flat list should exit owners list and update index\n+ utils.act(() =>\n+ dispatch({ type: 'SELECT_ELEMENT_BY_ID', payload: outerSuspenseID })\n+ );\n+ utils.act(() => renderer.update(<Contexts \/>));\n+ expect(state).toMatchSnapshot('4: main tree');\n+ });\n+ });\n+});\ndiff --git a\/src\/__tests__\/utils.js b\/src\/__tests__\/utils.js\nnew file mode 100644\nindex 0000000000..bf0c816109\n--- \/dev\/null\n+++ b\/src\/__tests__\/utils.js\n@@ -0,0 +1,203 @@\n+\/\/ @flow\n+\n+import typeof ReactTestRenderer from 'react-test-renderer';\n+\n+import type { FrontendBridge } from 'src\/bridge';\n+import type Store from 'src\/devtools\/store';\n+import type { ProfilingDataFrontend } from 'src\/devtools\/views\/Profiler\/types';\n+import type { ElementType } from 'src\/types';\n+\n+export function act(callback: Function): void {\n+ const { act: actTestRenderer } = require('react-test-renderer');\n+ const { act: actDOM } = require('react-dom\/test-utils');\n+\n+ actDOM(() => {\n+ actTestRenderer(() => {\n+ callback();\n+ });\n+ });\n+\n+ \/\/ Flush Bridge operations\n+ actDOM(() => {\n+ actTestRenderer(() => {\n+ jest.runAllTimers();\n+ });\n+ });\n+}\n+\n+export async function actAsync(\n+ cb: () => *,\n+ recursivelyFlush: boolean = true\n+): Promise<void> {\n+ const { act: actTestRenderer } = require('react-test-renderer');\n+ const { act: actDOM } = require('react-dom\/test-utils');\n+\n+ \/\/ $FlowFixMe Flow doens't know about \"await act()\" yet\n+ await actDOM(async () => {\n+ await actTestRenderer(async () => {\n+ await cb();\n+ });\n+ });\n+\n+ if (recursivelyFlush) {\n+ while (jest.getTimerCount() > 0) {\n+ \/\/ $FlowFixMe Flow doens't know about \"await act()\" yet\n+ await actDOM(async () => {\n+ await actTestRenderer(async () => {\n+ jest.runAllTimers();\n+ });\n+ });\n+ }\n+ } else {\n+ \/\/ $FlowFixMe Flow doesn't know about \"await act()\" yet\n+ await actDOM(async () => {\n+ await actTestRenderer(async () => {\n+ jest.runOnlyPendingTimers();\n+ });\n+ });\n+ }\n+}\n+\n+export function beforeEachProfiling(): void {\n+ \/\/ Mock React's timing information so that test runs are predictable.\n+ jest.mock('scheduler', () => jest.requireActual('scheduler\/unstable_mock'));\n+\n+ \/\/ DevTools itself uses performance.now() to offset commit times\n+ \/\/ so they appear relative to when profiling was started in the UI.\n+ jest\n+ .spyOn(performance, 'now')\n+ .mockImplementation(\n+ jest.requireActual('scheduler\/unstable_mock').unstable_now\n+ );\n+}\n+\n+export function createDisplayNameFilter(\n+ source: string,\n+ isEnabled: boolean = true\n+) {\n+ const Types = require('src\/types');\n+ let isValid = true;\n+ try {\n+ new RegExp(source);\n+ } catch (error) {\n+ isValid = false;\n+ }\n+ return {\n+ type: Types.ComponentFilterDisplayName,\n+ isEnabled,\n+ isValid,\n+ value: source,\n+ };\n+}\n+\n+export function createHOCFilter(isEnabled: boolean = true) {\n+ const Types = require('src\/types');\n+ return {\n+ type: Types.ComponentFilterHOC,\n+ isEnabled,\n+ isValid: true,\n+ };\n+}\n+\n+export function createElementTypeFilter(\n+ elementType: ElementType,\n+ isEnabled: boolean = true\n+) {\n+ const Types = require('src\/types');\n+ return {\n+ type: Types.ComponentFilterElementType,\n+ isEnabled,\n+ value: elementType,\n+ };\n+}\n+\n+export function createLocationFilter(\n+ source: string,\n+ isEnabled: boolean = true\n+) {\n+ const Types = require('src\/types');\n+ let isValid = true;\n+ try {\n+ new RegExp(source);\n+ } catch (error) {\n+ isValid = false;\n+ }\n+ return {\n+ type: Types.ComponentFilterLocation,\n+ isEnabled,\n+ isValid,\n+ value: source,\n+ };\n+}\n+\n+export function getRendererID(): number {\n+ if (global.agent == null) {\n+ throw Error('Agent unavailable.');\n+ }\n+ const ids = Object.keys(global.agent._rendererInterfaces);\n+\n+ const id = ids.find(id => {\n+ const rendererInterface = global.agent._rendererInterfaces[id];\n+ return rendererInterface.renderer.rendererPackageName === 'react-dom';\n+ });\n+\n+ if (ids == null) {\n+ throw Error('Could not find renderer.');\n+ }\n+\n+ return parseInt(id, 10);\n+}\n+\n+export function requireTestRenderer(): ReactTestRenderer {\n+ let hook;\n+ try {\n+ \/\/ Hide the hook before requiring TestRenderer, so we don't end up with a loop.\n+ hook = global.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+ delete global.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+\n+ return require('react-test-renderer');\n+ } finally {\n+ global.__REACT_DEVTOOLS_GLOBAL_HOOK__ = hook;\n+ }\n+}\n+\n+export function exportImportHelper(bridge: FrontendBridge, store: Store): void {\n+ const { act } = require('.\/utils');\n+ const {\n+ prepareProfilingDataExport,\n+ prepareProfilingDataFrontendFromExport,\n+ } = require('src\/devtools\/views\/Profiler\/utils');\n+\n+ const { profilerStore } = store;\n+\n+ expect(profilerStore.profilingData).not.toBeNull();\n+\n+ const profilingDataFrontendInitial = ((profilerStore.profilingData: any): ProfilingDataFrontend);\n+\n+ const profilingDataExport = prepareProfilingDataExport(\n+ profilingDataFrontendInitial\n+ );\n+\n+ \/\/ Simulate writing\/reading to disk.\n+ const serializedProfilingDataExport = JSON.stringify(\n+ profilingDataExport,\n+ null,\n+ 2\n+ );\n+ const parsedProfilingDataExport = JSON.parse(serializedProfilingDataExport);\n+\n+ const profilingDataFrontend = prepareProfilingDataFrontendFromExport(\n+ (parsedProfilingDataExport: any)\n+ );\n+\n+ \/\/ Sanity check that profiling snapshots are serialized correctly.\n+ expect(profilingDataFrontendInitial).toEqual(profilingDataFrontend);\n+\n+ \/\/ Snapshot the JSON-parsed object, rather than the raw string, because Jest formats the diff nicer.\n+ expect(parsedProfilingDataExport).toMatchSnapshot('imported data');\n+\n+ act(() => {\n+ \/\/ Apply the new exported-then-reimported data so tests can re-run assertions.\n+ profilerStore.profilingData = profilingDataFrontend;\n+ });\n+}\ndiff --git a\/src\/backend\/NativeStyleEditor\/resolveBoxStyle.js b\/src\/backend\/NativeStyleEditor\/resolveBoxStyle.js\nnew file mode 100644\nindex 0000000000..0609272dc9\n--- \/dev\/null\n+++ b\/src\/backend\/NativeStyleEditor\/resolveBoxStyle.js\n@@ -0,0 +1,85 @@\n+\/\/ @flow\n+\n+import type { BoxStyle } from '.\/types';\n+\n+\/**\n+ * This mirrors react-native\/Libraries\/Inspector\/resolveBoxStyle.js (but without RTL support).\n+ *\n+ * Resolve a style property into it's component parts, e.g.\n+ *\n+ * resolveBoxStyle('margin', {margin: 5, marginBottom: 10})\n+ * -> {top: 5, left: 5, right: 5, bottom: 10}\n+ *\/\n+export default function resolveBoxStyle(\n+ prefix: string,\n+ style: Object\n+): BoxStyle | null {\n+ let hasParts = false;\n+ const result = {\n+ bottom: 0,\n+ left: 0,\n+ right: 0,\n+ top: 0,\n+ };\n+\n+ const styleForAll = style[prefix];\n+ if (styleForAll != null) {\n+ for (const key of Object.keys(result)) {\n+ result[key] = styleForAll;\n+ }\n+ hasParts = true;\n+ }\n+\n+ const styleForHorizontal = style[prefix + 'Horizontal'];\n+ if (styleForHorizontal != null) {\n+ result.left = styleForHorizontal;\n+ result.right = styleForHorizontal;\n+ hasParts = true;\n+ } else {\n+ const styleForLeft = style[prefix + 'Left'];\n+ if (styleForLeft != null) {\n+ result.left = styleForLeft;\n+ hasParts = true;\n+ }\n+\n+ const styleForRight = style[prefix + 'Right'];\n+ if (styleForRight != null) {\n+ result.right = styleForRight;\n+ hasParts = true;\n+ }\n+\n+ const styleForEnd = style[prefix + 'End'];\n+ if (styleForEnd != null) {\n+ \/\/ TODO RTL support\n+ result.right = styleForEnd;\n+ hasParts = true;\n+ }\n+ const styleForStart = style[prefix + 'Start'];\n+ if (styleForStart != null) {\n+ \/\/ TODO RTL support\n+ result.left = styleForStart;\n+ hasParts = true;\n+ }\n+ }\n+\n+ const styleForVertical = style[prefix + 'Vertical'];\n+ if (styleForVertical != null) {\n+ result.bottom = styleForVertical;\n+ result.top = styleForVertical;\n+ hasParts = true;\n+ } else {\n+ const styleForBottom = style[prefix + 'Bottom'];\n+ if (styleForBottom != null) {\n+ result.bottom = styleForBottom;\n+ hasParts = true;\n+ }\n+\n+ const styleForTop = style[prefix + 'Top'];\n+ if (styleForTop != null) {\n+ result.top = styleForTop;\n+ hasParts = true;\n+ }\n+ }\n+\n+ return hasParts ? result : null;\n+}\ndiff --git a\/src\/backend\/NativeStyleEditor\/setupNativeStyleEditor.js b\/src\/backend\/NativeStyleEditor\/setupNativeStyleEditor.js\nnew file mode 100644\nindex 0000000000..642dbb91eb\n--- \/dev\/null\n+++ b\/src\/backend\/NativeStyleEditor\/setupNativeStyleEditor.js\n@@ -0,0 +1,315 @@\n+\/\/ @flow\n+\n+import Agent from 'src\/backend\/agent';\n+import resolveBoxStyle from '.\/resolveBoxStyle';\n+\n+import type { BackendBridge } from 'src\/bridge';\n+import type { RendererID } from '..\/types';\n+import type { StyleAndLayout } from '.\/types';\n+\n+export type ResolveNativeStyle = (stylesheetID: number) => ?Object;\n+\n+export default function setupNativeStyleEditor(\n+ bridge: BackendBridge,\n+ agent: Agent,\n+ resolveNativeStyle: ResolveNativeStyle,\n+ validAttributes?: $ReadOnlyArray<string> | null\n+) {\n+ bridge.addListener(\n+ 'NativeStyleEditor_measure',\n+ ({ id, rendererID }: {| id: number, rendererID: RendererID |}) => {\n+ measureStyle(agent, bridge, resolveNativeStyle, id, rendererID);\n+ }\n+ );\n+\n+ bridge.addListener(\n+ 'NativeStyleEditor_renameAttribute',\n+ ({\n+ id,\n+ rendererID,\n+ oldName,\n+ newName,\n+ value,\n+ }: {|\n+ id: number,\n+ rendererID: RendererID,\n+ oldName: string,\n+ newName: string,\n+ value: string,\n+ |}) => {\n+ renameStyle(agent, id, rendererID, oldName, newName, value);\n+ setTimeout(() =>\n+ measureStyle(agent, bridge, resolveNativeStyle, id, rendererID)\n+ );\n+ }\n+ );\n+\n+ bridge.addListener(\n+ 'NativeStyleEditor_setValue',\n+ ({\n+ id,\n+ rendererID,\n+ name,\n+ value,\n+ }: {|\n+ id: number,\n+ rendererID: number,\n+ name: string,\n+ value: string,\n+ |}) => {\n+ setStyle(agent, id, rendererID, name, value);\n+ setTimeout(() =>\n+ measureStyle(agent, bridge, resolveNativeStyle, id, rendererID)\n+ );\n+ }\n+ );\n+\n+ bridge.send('isNativeStyleEditorSupported', {\n+ isSupported: true,\n+ validAttributes,\n+ });\n+}\n+\n+const EMPTY_BOX_STYLE = {\n+ top: 0,\n+ left: 0,\n+ right: 0,\n+ bottom: 0,\n+};\n+\n+const componentIDToStyleOverrides: Map<number, Object> = new Map();\n+\n+function measureStyle(\n+ agent: Agent,\n+ bridge: BackendBridge,\n+ resolveNativeStyle: ResolveNativeStyle,\n+ id: number,\n+ rendererID: RendererID\n+) {\n+ const data = agent.getInstanceAndStyle({ id, rendererID });\n+ if (!data || !data.style) {\n+ bridge.send(\n+ 'NativeStyleEditor_styleAndLayout',\n+ ({\n+ id,\n+ layout: null,\n+ style: null,\n+ }: StyleAndLayout)\n+ );\n+ return;\n+ }\n+\n+ const { instance, style } = data;\n+\n+ let resolvedStyle = resolveNativeStyle(style);\n+\n+ \/\/ If it's a host component we edited before, amend styles.\n+ const styleOverrides = componentIDToStyleOverrides.get(id);\n+ if (styleOverrides != null) {\n+ resolvedStyle = Object.assign({}, resolvedStyle, styleOverrides);\n+ }\n+\n+ if (!instance || typeof instance.measure !== 'function') {\n+ bridge.send(\n+ 'NativeStyleEditor_styleAndLayout',\n+ ({\n+ id,\n+ layout: null,\n+ style: resolvedStyle || null,\n+ }: StyleAndLayout)\n+ );\n+ return;\n+ }\n+\n+ \/\/ $FlowFixMe the parameter types of an unknown function are unknown\n+ instance.measure((x, y, width, height, left, top) => {\n+ \/\/ RN Android sometimes returns undefined here. Don't send measurements in this case.\n+ \/\/ https:\/\/github.com\/jhen0409\/react-native-debugger\/issues\/84#issuecomment-304611817\n+ if (typeof x !== 'number') {\n+ bridge.send(\n+ 'NativeStyleEditor_styleAndLayout',\n+ ({\n+ id,\n+ layout: null,\n+ style: resolvedStyle || null,\n+ }: StyleAndLayout)\n+ );\n+ return;\n+ }\n+ const margin = resolveBoxStyle('margin', resolvedStyle) || EMPTY_BOX_STYLE;\n+ const padding =\n+ resolveBoxStyle('padding', resolvedStyle) || EMPTY_BOX_STYLE;\n+ bridge.send(\n+ 'NativeStyleEditor_styleAndLayout',\n+ ({\n+ id,\n+ layout: {\n+ x,\n+ y,\n+ width,\n+ height,\n+ left,\n+ top,\n+ margin,\n+ padding,\n+ },\n+ style: resolvedStyle || null,\n+ }: StyleAndLayout)\n+ );\n+ });\n+}\n+\n+function shallowClone(object: Object): Object {\n+ const cloned = {};\n+ for (let n in object) {\n+ cloned[n] = object[n];\n+ }\n+ return cloned;\n+}\n+\n+function renameStyle(\n+ agent: Agent,\n+ id: number,\n+ rendererID: RendererID,\n+ oldName: string,\n+ newName: string,\n+ value: string\n+): void {\n+ const data = agent.getInstanceAndStyle({ id, rendererID });\n+ if (!data || !data.style) {\n+ return;\n+ }\n+\n+ const { instance, style } = data;\n+\n+ const newStyle = newName\n+ ? { [oldName]: undefined, [newName]: value }\n+ : { [oldName]: undefined };\n+\n+ let customStyle;\n+\n+ \/\/ TODO It would be nice if the renderer interface abstracted this away somehow.\n+ if (instance !== null && typeof instance.setNativeProps === 'function') {\n+ \/\/ In the case of a host component, we need to use setNativeProps().\n+ \/\/ Remember to \"correct\" resolved styles when we read them next time.\n+ const styleOverrides = componentIDToStyleOverrides.get(id);\n+ if (!styleOverrides) {\n+ componentIDToStyleOverrides.set(id, newStyle);\n+ } else {\n+ Object.assign(styleOverrides, newStyle);\n+ }\n+ \/\/ TODO Fabric does not support setNativeProps; chat with Sebastian or Eli\n+ instance.setNativeProps({ style: newStyle });\n+ } else if (Array.isArray(style)) {\n+ const lastIndex = style.length - 1;\n+ if (\n+ typeof style[lastIndex] === 'object' &&\n+ !Array.isArray(style[lastIndex])\n+ ) {\n+ customStyle = shallowClone(style[lastIndex]);\n+ delete customStyle[oldName];\n+ if (newName) {\n+ customStyle[newName] = value;\n+ } else {\n+ customStyle[oldName] = undefined;\n+ }\n+\n+ agent.overrideProps({\n+ id,\n+ rendererID,\n+ path: ['style', lastIndex],\n+ value: customStyle,\n+ });\n+ } else {\n+ agent.overrideProps({\n+ id,\n+ rendererID,\n+ path: ['style'],\n+ value: style.concat([newStyle]),\n+ });\n+ }\n+ } else if (typeof style === 'object') {\n+ customStyle = shallowClone(style);\n+ delete customStyle[oldName];\n+ if (newName) {\n+ customStyle[newName] = value;\n+ } else {\n+ customStyle[oldName] = undefined;\n+ }\n+\n+ agent.overrideProps({\n+ id,\n+ rendererID,\n+ path: ['style'],\n+ value: customStyle,\n+ });\n+ } else {\n+ agent.overrideProps({\n+ id,\n+ rendererID,\n+ path: ['style'],\n+ value: [style, newStyle],\n+ });\n+ }\n+\n+ agent.emit('hideNativeHighlight');\n+}\n+\n+function setStyle(\n+ agent: Agent,\n+ id: number,\n+ rendererID: RendererID,\n+ name: string,\n+ value: string\n+) {\n+ const data = agent.getInstanceAndStyle({ id, rendererID });\n+ if (!data || !data.style) {\n+ return;\n+ }\n+\n+ const { instance, style } = data;\n+ const newStyle = { [name]: value };\n+\n+ \/\/ TODO It would be nice if the renderer interface abstracted this away somehow.\n+ if (instance !== null && typeof instance.setNativeProps === 'function') {\n+ \/\/ In the case of a host component, we need to use setNativeProps().\n+ \/\/ Remember to \"correct\" resolved styles when we read them next time.\n+ const styleOverrides = componentIDToStyleOverrides.get(id);\n+ if (!styleOverrides) {\n+ componentIDToStyleOverrides.set(id, newStyle);\n+ } else {\n+ Object.assign(styleOverrides, newStyle);\n+ }\n+ \/\/ TODO Fabric does not support setNativeProps; chat with Sebastian or Eli\n+ instance.setNativeProps({ style: newStyle });\n+ } else if (Array.isArray(style)) {\n+ const lastLength = style.length - 1;\n+ if (\n+ typeof style[lastLength] === 'object' &&\n+ !Array.isArray(style[lastLength])\n+ ) {\n+ agent.overrideProps({\n+ id,\n+ rendererID,\n+ path: ['style', lastLength, name],\n+ value,\n+ });\n+ } else {\n+ agent.overrideProps({\n+ id,\n+ rendererID,\n+ path: ['style'],\n+ value: style.concat([newStyle]),\n+ });\n+ }\n+ } else {\n+ agent.overrideProps({\n+ id,\n+ rendererID,\n+ path: ['style'],\n+ value: [style, newStyle],\n+ });\n+ }\n+\n+ agent.emit('hideNativeHighlight');\n+}\ndiff --git a\/src\/backend\/NativeStyleEditor\/types.js b\/src\/backend\/NativeStyleEditor\/types.js\nnew file mode 100644\nindex 0000000000..f7040cb8d3\n--- \/dev\/null\n+++ b\/src\/backend\/NativeStyleEditor\/types.js\n@@ -0,0 +1,27 @@\n+\/\/ @flow\n+\n+export type BoxStyle = $ReadOnly<{|\n+ bottom: number,\n+ left: number,\n+ right: number,\n+ top: number,\n+|}>;\n+\n+export type Layout = {|\n+ x: number,\n+ y: number,\n+ width: number,\n+ height: number,\n+ left: number,\n+ top: number,\n+ margin: BoxStyle,\n+ padding: BoxStyle,\n+|};\n+\n+export type Style = Object;\n+\n+export type StyleAndLayout = {|\n+ id: number,\n+ style: Style | null,\n+ layout: Layout | null,\n+|};\ndiff --git a\/src\/backend\/ReactDebugHooks.js b\/src\/backend\/ReactDebugHooks.js\nnew file mode 100644\nindex 0000000000..6baaa25300\n--- \/dev\/null\n+++ b\/src\/backend\/ReactDebugHooks.js\n@@ -0,0 +1,636 @@\n+\/\/ @flow\n+\n+\/\/ This file was forked from the React GitHub repo:\n+\/\/ https:\/\/github.com\/facebook\/react\/blob\/master\/packages\/react-debug-tools\/src\/ReactDebugHooks.js\n+\/\/ It has been modified slightly though to account for \"shared\" imports and different lint configs.\n+\/\/ I've also removed some of the Flow types that don't exist in DevTools.\n+\/\/ TODO Remove this fork and use the NPM version of this package once it's released.\n+\n+import ErrorStackParser from 'error-stack-parser';\n+\n+import type {\n+ ReactContext,\n+ ReactEventResponder,\n+ ReactEventResponderListener,\n+} from '.\/types';\n+\n+type Fiber = any;\n+type Hook = any;\n+\n+\/\/ HACK: These values are copied from attachRendererFiber\n+\/\/ In the future, the react-debug-hooks package will be published to NPM,\n+\/\/ and be locked to a specific range of react versions\n+\/\/ For now we are just hard-coding the current\/latest versions.\n+const ContextProvider = 10;\n+const ForwardRef = 11;\n+const FunctionComponent = 0;\n+const SimpleMemoComponent = 15;\n+\n+\/\/ Used to track hooks called during a render\n+\n+type HookLogEntry = {\n+ primitive: string,\n+ stackError: Error,\n+ value: mixed,\n+};\n+\n+let hookLog: Array<HookLogEntry> = [];\n+\n+\/\/ Primitives\n+\n+type BasicStateAction<S> = (S => S) | S;\n+\n+type Dispatch<A> = A => void;\n+\n+let primitiveStackCache: null | Map<string, Array<any>> = null;\n+\n+function getPrimitiveStackCache(): Map<string, Array<any>> {\n+ \/\/ This initializes a cache of all primitive hooks so that the top\n+ \/\/ most stack frames added by calling the primitive hook can be removed.\n+ if (primitiveStackCache === null) {\n+ const cache = new Map();\n+ let readHookLog;\n+ try {\n+ \/\/ Use all hooks here to add them to the hook log.\n+ Dispatcher.useContext(({ _currentValue: null }: any));\n+ Dispatcher.useState(null);\n+ Dispatcher.useReducer((s, a) => s, null);\n+ Dispatcher.useRef(null);\n+ Dispatcher.useLayoutEffect(() => {});\n+ Dispatcher.useEffect(() => {});\n+ Dispatcher.useImperativeHandle(undefined, () => null);\n+ Dispatcher.useDebugValue(null);\n+ Dispatcher.useCallback(() => {});\n+ Dispatcher.useMemo(() => null);\n+ } finally {\n+ readHookLog = hookLog;\n+ hookLog = [];\n+ }\n+ for (let i = 0; i < readHookLog.length; i++) {\n+ const hook = readHookLog[i];\n+ cache.set(hook.primitive, ErrorStackParser.parse(hook.stackError));\n+ }\n+ primitiveStackCache = cache;\n+ }\n+ return primitiveStackCache;\n+}\n+\n+let currentHook: null | Hook = null;\n+function nextHook(): null | Hook {\n+ const hook = currentHook;\n+ if (hook !== null) {\n+ currentHook = hook.next;\n+ }\n+ return hook;\n+}\n+\n+function readContext<T>(\n+ context: ReactContext<T>,\n+ observedBits: void | number | boolean\n+): T {\n+ \/\/ For now we don't expose readContext usage in the hooks debugging info.\n+ return context._currentValue;\n+}\n+\n+function useContext<T>(\n+ context: ReactContext<T>,\n+ observedBits: void | number | boolean\n+): T {\n+ hookLog.push({\n+ primitive: 'Context',\n+ stackError: new Error(),\n+ value: context._currentValue,\n+ });\n+ return context._currentValue;\n+}\n+\n+function useState<S>(\n+ initialState: (() => S) | S\n+): [S, Dispatch<BasicStateAction<S>>] {\n+ const hook = nextHook();\n+ const state: S =\n+ hook !== null\n+ ? hook.memoizedState\n+ : typeof initialState === 'function'\n+ ? (initialState: any)()\n+ : initialState;\n+ hookLog.push({ primitive: 'State', stackError: new Error(), value: state });\n+ return [state, (action: BasicStateAction<S>) => {}];\n+}\n+\n+function useReducer<S, I, A>(\n+ reducer: (S, A) => S,\n+ initialArg: I,\n+ init?: I => S\n+): [S, Dispatch<A>] {\n+ const hook = nextHook();\n+ let state;\n+ if (hook !== null) {\n+ state = hook.memoizedState;\n+ } else {\n+ state = init !== undefined ? init(initialArg) : ((initialArg: any): S);\n+ }\n+ hookLog.push({\n+ primitive: 'Reducer',\n+ stackError: new Error(),\n+ value: state,\n+ });\n+ return [state, (action: A) => {}];\n+}\n+\n+function useRef<T>(initialValue: T): { current: T } {\n+ const hook = nextHook();\n+ const ref = hook !== null ? hook.memoizedState : { current: initialValue };\n+ hookLog.push({\n+ primitive: 'Ref',\n+ stackError: new Error(),\n+ value: ref.current,\n+ });\n+ return ref;\n+}\n+\n+function useLayoutEffect(\n+ create: () => (() => void) | void,\n+ inputs: Array<mixed> | void | null\n+): void {\n+ nextHook();\n+ hookLog.push({\n+ primitive: 'LayoutEffect',\n+ stackError: new Error(),\n+ value: create,\n+ });\n+}\n+\n+function useEffect(\n+ create: () => (() => void) | void,\n+ inputs: Array<mixed> | void | null\n+): void {\n+ nextHook();\n+ hookLog.push({ primitive: 'Effect', stackError: new Error(), value: create });\n+}\n+\n+function useImperativeHandle<T>(\n+ ref: { current: T | null } | ((inst: T | null) => mixed) | null | void,\n+ create: () => T,\n+ inputs: Array<mixed> | void | null\n+): void {\n+ nextHook();\n+ \/\/ We don't actually store the instance anywhere if there is no ref callback\n+ \/\/ and if there is a ref callback it might not store it but if it does we\n+ \/\/ have no way of knowing where. So let's only enable introspection of the\n+ \/\/ ref itself if it is using the object form.\n+ let instance = undefined;\n+ if (ref !== null && typeof ref === 'object') {\n+ instance = ref.current;\n+ }\n+ hookLog.push({\n+ primitive: 'ImperativeHandle',\n+ stackError: new Error(),\n+ value: instance,\n+ });\n+}\n+\n+function useDebugValue(value: any, formatterFn: ?(value: any) => any) {\n+ hookLog.push({\n+ primitive: 'DebugValue',\n+ stackError: new Error(),\n+ value: typeof formatterFn === 'function' ? formatterFn(value) : value,\n+ });\n+}\n+\n+function useCallback<T>(callback: T, inputs: Array<mixed> | void | null): T {\n+ const hook = nextHook();\n+ hookLog.push({\n+ primitive: 'Callback',\n+ stackError: new Error(),\n+ value: hook !== null ? hook.memoizedState[0] : callback,\n+ });\n+ return callback;\n+}\n+\n+function useMemo<T>(\n+ nextCreate: () => T,\n+ inputs: Array<mixed> | void | null\n+): T {\n+ const hook = nextHook();\n+ const value = hook !== null ? hook.memoizedState[0] : nextCreate();\n+ hookLog.push({ primitive: 'Memo', stackError: new Error(), value });\n+ return value;\n+}\n+\n+function useResponder(\n+ responder: ReactEventResponder<any, any>,\n+ listenerProps: Object\n+): ReactEventResponderListener<any, any> {\n+ \/\/ Don't put the actual event responder object in, just its displayName\n+ const value = {\n+ responder: responder.displayName || 'EventResponder',\n+ props: listenerProps,\n+ };\n+ hookLog.push({ primitive: 'Responder', stackError: new Error(), value });\n+ return {\n+ responder,\n+ props: listenerProps,\n+ };\n+}\n+\n+const Dispatcher = {\n+ readContext,\n+ useCallback,\n+ useContext,\n+ useEffect,\n+ useImperativeHandle,\n+ useDebugValue,\n+ useLayoutEffect,\n+ useMemo,\n+ useReducer,\n+ useRef,\n+ useState,\n+ useResponder,\n+};\n+\n+\/\/ Inspect\n+\n+type ReactCurrentDispatcher = {\n+ current: null | typeof Dispatcher,\n+};\n+\n+type HooksNode = {\n+ id: number | null,\n+ isStateEditable: boolean,\n+ name: string,\n+ value: mixed,\n+ subHooks: Array<HooksNode>,\n+};\n+type HooksTree = Array<HooksNode>;\n+\n+\/\/ Don't assume\n+\/\/\n+\/\/ We can't assume that stack frames are nth steps away from anything.\n+\/\/ E.g. we can't assume that the root call shares all frames with the stack\n+\/\/ of a hook call. A simple way to demonstrate this is wrapping `new Error()`\n+\/\/ in a wrapper constructor like a polyfill. That'll add an extra frame.\n+\/\/ Similar things can happen with the call to the dispatcher. The top frame\n+\/\/ may not be the primitive. Likewise the primitive can have fewer stack frames\n+\/\/ such as when a call to useState got inlined to use dispatcher.useState.\n+\/\/\n+\/\/ We also can't assume that the last frame of the root call is the same\n+\/\/ frame as the last frame of the hook call because long stack traces can be\n+\/\/ truncated to a stack trace limit.\n+\n+let mostLikelyAncestorIndex = 0;\n+\n+function findSharedIndex(hookStack, rootStack, rootIndex) {\n+ const source = rootStack[rootIndex].source;\n+ hookSearch: for (let i = 0; i < hookStack.length; i++) {\n+ if (hookStack[i].source === source) {\n+ \/\/ This looks like a match. Validate that the rest of both stack match up.\n+ for (\n+ let a = rootIndex + 1, b = i + 1;\n+ a < rootStack.length && b < hookStack.length;\n+ a++, b++\n+ ) {\n+ if (hookStack[b].source !== rootStack[a].source) {\n+ \/\/ If not, give up and try a different match.\n+ continue hookSearch;\n+ }\n+ }\n+ return i;\n+ }\n+ }\n+ return -1;\n+}\n+\n+function findCommonAncestorIndex(rootStack, hookStack) {\n+ let rootIndex = findSharedIndex(\n+ hookStack,\n+ rootStack,\n+ mostLikelyAncestorIndex\n+ );\n+ if (rootIndex !== -1) {\n+ return rootIndex;\n+ }\n+ \/\/ If the most likely one wasn't a hit, try any other frame to see if it is shared.\n+ \/\/ If that takes more than 5 frames, something probably went wrong.\n+ for (let i = 0; i < rootStack.length && i < 5; i++) {\n+ rootIndex = findSharedIndex(hookStack, rootStack, i);\n+ if (rootIndex !== -1) {\n+ mostLikelyAncestorIndex = i;\n+ return rootIndex;\n+ }\n+ }\n+ return -1;\n+}\n+\n+function isReactWrapper(functionName, primitiveName) {\n+ if (!functionName) {\n+ return false;\n+ }\n+ const expectedPrimitiveName = 'use' + primitiveName;\n+ if (functionName.length < expectedPrimitiveName.length) {\n+ return false;\n+ }\n+ return (\n+ functionName.lastIndexOf(expectedPrimitiveName) ===\n+ functionName.length - expectedPrimitiveName.length\n+ );\n+}\n+\n+function findPrimitiveIndex(hookStack, hook) {\n+ const stackCache = getPrimitiveStackCache();\n+ const primitiveStack = stackCache.get(hook.primitive);\n+ if (primitiveStack === undefined) {\n+ return -1;\n+ }\n+ for (let i = 0; i < primitiveStack.length && i < hookStack.length; i++) {\n+ if (primitiveStack[i].source !== hookStack[i].source) {\n+ \/\/ If the next two frames are functions called `useX` then we assume that they're part of the\n+ \/\/ wrappers that the React packager or other packages adds around the dispatcher.\n+ if (\n+ i < hookStack.length - 1 &&\n+ isReactWrapper(hookStack[i].functionName, hook.primitive)\n+ ) {\n+ i++;\n+ }\n+ if (\n+ i < hookStack.length - 1 &&\n+ isReactWrapper(hookStack[i].functionName, hook.primitive)\n+ ) {\n+ i++;\n+ }\n+ return i;\n+ }\n+ }\n+ return -1;\n+}\n+\n+function parseTrimmedStack(rootStack, hook) {\n+ \/\/ Get the stack trace between the primitive hook function and\n+ \/\/ the root function call. I.e. the stack frames of custom hooks.\n+ const hookStack = ErrorStackParser.parse(hook.stackError);\n+ const rootIndex = findCommonAncestorIndex(rootStack, hookStack);\n+ const primitiveIndex = findPrimitiveIndex(hookStack, hook);\n+ if (\n+ rootIndex === -1 ||\n+ primitiveIndex === -1 ||\n+ rootIndex - primitiveIndex < 2\n+ ) {\n+ \/\/ Something went wrong. Give up.\n+ return null;\n+ }\n+ return hookStack.slice(primitiveIndex, rootIndex - 1);\n+}\n+\n+function parseCustomHookName(functionName: void | string): string {\n+ if (!functionName) {\n+ return '';\n+ }\n+ let startIndex = functionName.lastIndexOf('.');\n+ if (startIndex === -1) {\n+ startIndex = 0;\n+ }\n+ if (functionName.substr(startIndex, 3) === 'use') {\n+ startIndex += 3;\n+ }\n+ return functionName.substr(startIndex);\n+}\n+\n+function buildTree(rootStack, readHookLog): HooksTree {\n+ const rootChildren = [];\n+ let prevStack = null;\n+ let levelChildren = rootChildren;\n+ let nativeHookID = 0;\n+ const stackOfChildren = [];\n+ for (let i = 0; i < readHookLog.length; i++) {\n+ const hook = readHookLog[i];\n+ const stack = parseTrimmedStack(rootStack, hook);\n+ if (stack !== null) {\n+ \/\/ Note: The indices 0 <= n < length-1 will contain the names.\n+ \/\/ The indices 1 <= n < length will contain the source locations.\n+ \/\/ That's why we get the name from n - 1 and don't check the source\n+ \/\/ of index 0.\n+ let commonSteps = 0;\n+ if (prevStack !== null) {\n+ \/\/ Compare the current level's stack to the new stack.\n+ while (commonSteps < stack.length && commonSteps < prevStack.length) {\n+ const stackSource = stack[stack.length - commonSteps - 1].source;\n+ const prevSource =\n+ prevStack[prevStack.length - commonSteps - 1].source;\n+ if (stackSource !== prevSource) {\n+ break;\n+ }\n+ commonSteps++;\n+ }\n+ \/\/ Pop back the stack as many steps as were not common.\n+ for (let j = prevStack.length - 1; j > commonSteps; j--) {\n+ levelChildren = stackOfChildren.pop();\n+ }\n+ }\n+ \/\/ The remaining part of the new stack are custom hooks. Push them\n+ \/\/ to the tree.\n+ for (let j = stack.length - commonSteps - 1; j >= 1; j--) {\n+ const children = [];\n+ levelChildren.push({\n+ id: null,\n+ isStateEditable: false,\n+ name: parseCustomHookName(stack[j - 1].functionName),\n+ value: undefined,\n+ subHooks: children,\n+ });\n+ stackOfChildren.push(levelChildren);\n+ levelChildren = children;\n+ }\n+ prevStack = stack;\n+ }\n+ const { primitive } = hook;\n+\n+ \/\/ For now, the \"id\" of stateful hooks is just the stateful hook index.\n+ \/\/ Custom hooks have no ids, nor do non-stateful native hooks (e.g. Context, DebugValue).\n+ const id =\n+ primitive === 'Context' || primitive === 'DebugValue'\n+ ? null\n+ : nativeHookID++;\n+\n+ \/\/ For the time being, only State and Reducer hooks support runtime overrides.\n+ const isStateEditable = primitive === 'Reducer' || primitive === 'State';\n+\n+ levelChildren.push({\n+ id,\n+ isStateEditable,\n+ name: primitive,\n+ value: hook.value,\n+ subHooks: [],\n+ });\n+ }\n+\n+ \/\/ Associate custom hook values (useDebugValue() hook entries) with the correct hooks.\n+ processDebugValues(rootChildren, null);\n+\n+ return rootChildren;\n+}\n+\n+\/\/ Custom hooks support user-configurable labels (via the special useDebugValue() hook).\n+\/\/ That hook adds user-provided values to the hooks tree,\n+\/\/ but these values aren't intended to appear alongside of the other hooks.\n+\/\/ Instead they should be attributed to their parent custom hook.\n+\/\/ This method walks the tree and assigns debug values to their custom hook owners.\n+function processDebugValues(\n+ hooksTree: HooksTree,\n+ parentHooksNode: HooksNode | null\n+): void {\n+ const debugValueHooksNodes: Array<HooksNode> = [];\n+\n+ for (let i = 0; i < hooksTree.length; i++) {\n+ const hooksNode = hooksTree[i];\n+ if (hooksNode.name === 'DebugValue' && hooksNode.subHooks.length === 0) {\n+ hooksTree.splice(i, 1);\n+ i--;\n+ debugValueHooksNodes.push(hooksNode);\n+ } else {\n+ processDebugValues(hooksNode.subHooks, hooksNode);\n+ }\n+ }\n+\n+ \/\/ Bubble debug value labels to their custom hook owner.\n+ \/\/ If there is no parent hook, just ignore them for now.\n+ \/\/ (We may warn about this in the future.)\n+ if (parentHooksNode !== null) {\n+ if (debugValueHooksNodes.length === 1) {\n+ parentHooksNode.value = debugValueHooksNodes[0].value;\n+ } else if (debugValueHooksNodes.length > 1) {\n+ parentHooksNode.value = debugValueHooksNodes.map(({ value }) => value);\n+ }\n+ }\n+}\n+\n+export function inspectHooks<Props>(\n+ renderFunction: Props => React$Node,\n+ props: Props,\n+ currentDispatcher: ReactCurrentDispatcher\n+): HooksTree {\n+ \/\/ DevTools will pass the current renderer's injected dispatcher.\n+ \/\/ Other apps might compile debug hooks as part of their app though.\n+ \/\/if (currentDispatcher == null) {\n+ \/\/currentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;\n+ \/\/}\n+\n+ const previousDispatcher = currentDispatcher.current;\n+ let readHookLog;\n+ currentDispatcher.current = Dispatcher;\n+ let ancestorStackError;\n+ try {\n+ ancestorStackError = new Error();\n+ renderFunction(props);\n+ } finally {\n+ readHookLog = hookLog;\n+ hookLog = [];\n+ currentDispatcher.current = previousDispatcher;\n+ }\n+ const rootStack = ErrorStackParser.parse(ancestorStackError);\n+ return buildTree(rootStack, readHookLog);\n+}\n+\n+function setupContexts(contextMap: Map<any, any>, fiber: Fiber) {\n+ let current = fiber;\n+ while (current) {\n+ if (current.tag === ContextProvider) {\n+ const providerType: any = current.type;\n+ const context: any = providerType._context;\n+ if (!contextMap.has(context)) {\n+ \/\/ Store the current value that we're going to restore later.\n+ contextMap.set(context, context._currentValue);\n+ \/\/ Set the inner most provider value on the context.\n+ context._currentValue = current.memoizedProps.value;\n+ }\n+ }\n+ current = current.return;\n+ }\n+}\n+\n+function restoreContexts(contextMap: Map<any, any>) {\n+ contextMap.forEach((value, context) => (context._currentValue = value));\n+}\n+\n+function inspectHooksOfForwardRef<Props, Ref>(\n+ renderFunction: (Props, Ref) => React$Node,\n+ props: Props,\n+ ref: Ref,\n+ currentDispatcher: ReactCurrentDispatcher\n+): HooksTree {\n+ const previousDispatcher = currentDispatcher.current;\n+ let readHookLog;\n+ currentDispatcher.current = Dispatcher;\n+ let ancestorStackError;\n+ try {\n+ ancestorStackError = new Error();\n+ renderFunction(props, ref);\n+ } finally {\n+ readHookLog = hookLog;\n+ hookLog = [];\n+ currentDispatcher.current = previousDispatcher;\n+ }\n+ const rootStack = ErrorStackParser.parse(ancestorStackError);\n+ return buildTree(rootStack, readHookLog);\n+}\n+\n+function resolveDefaultProps(Component, baseProps) {\n+ if (Component && Component.defaultProps) {\n+ \/\/ Resolve default props. Taken from ReactElement\n+ const props = Object.assign({}, baseProps);\n+ const defaultProps = Component.defaultProps;\n+ for (const propName in defaultProps) {\n+ if (props[propName] === undefined) {\n+ props[propName] = defaultProps[propName];\n+ }\n+ }\n+ return props;\n+ }\n+ return baseProps;\n+}\n+\n+export function inspectHooksOfFiber(\n+ fiber: Fiber,\n+ currentDispatcher: ReactCurrentDispatcher\n+) {\n+ \/\/ DevTools will pass the current renderer's injected dispatcher.\n+ \/\/ Other apps might compile debug hooks as part of their app though.\n+ \/\/if (currentDispatcher == null) {\n+ \/\/currentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;\n+ \/\/}\n+\n+ if (\n+ fiber.tag !== FunctionComponent &&\n+ fiber.tag !== SimpleMemoComponent &&\n+ fiber.tag !== ForwardRef\n+ ) {\n+ throw new Error(\n+ 'Unknown Fiber. Needs to be a function component to inspect hooks.'\n+ );\n+ }\n+ \/\/ Warm up the cache so that it doesn't consume the currentHook.\n+ getPrimitiveStackCache();\n+ const type = fiber.type;\n+ let props = fiber.memoizedProps;\n+ if (type !== fiber.elementType) {\n+ props = resolveDefaultProps(type, props);\n+ }\n+ \/\/ Set up the current hook so that we can step through and read the\n+ \/\/ current state from them.\n+ currentHook = (fiber.memoizedState: Hook);\n+ const contextMap = new Map();\n+ try {\n+ setupContexts(contextMap, fiber);\n+ if (fiber.tag === ForwardRef) {\n+ return inspectHooksOfForwardRef(\n+ type.render,\n+ props,\n+ fiber.ref,\n+ currentDispatcher\n+ );\n+ }\n+ return inspectHooks(type, props, currentDispatcher);\n+ } finally {\n+ currentHook = null;\n+ restoreContexts(contextMap);\n+ }\n+}\ndiff --git a\/src\/backend\/agent.js b\/src\/backend\/agent.js\nnew file mode 100644\nindex 0000000000..f246934a5d\n--- \/dev\/null\n+++ b\/src\/backend\/agent.js\n@@ -0,0 +1,485 @@\n+\/\/ @flow\n+\n+import EventEmitter from 'events';\n+import throttle from 'lodash.throttle';\n+import {\n+ SESSION_STORAGE_LAST_SELECTION_KEY,\n+ SESSION_STORAGE_RELOAD_AND_PROFILE_KEY,\n+ SESSION_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY,\n+ __DEBUG__,\n+} from '..\/constants';\n+import {\n+ sessionStorageGetItem,\n+ sessionStorageRemoveItem,\n+ sessionStorageSetItem,\n+} from 'src\/storage';\n+import setupHighlighter from '.\/views\/Highlighter';\n+import { patch as patchConsole, unpatch as unpatchConsole } from '.\/console';\n+\n+import type { BackendBridge } from 'src\/bridge';\n+import type {\n+ InstanceAndStyle,\n+ NativeType,\n+ OwnersList,\n+ PathFrame,\n+ PathMatch,\n+ RendererID,\n+ RendererInterface,\n+} from '.\/types';\n+import type { ComponentFilter } from '..\/types';\n+\n+const debug = (methodName, ...args) => {\n+ if (__DEBUG__) {\n+ console.log(\n+ `%cAgent %c${methodName}`,\n+ 'color: purple; font-weight: bold;',\n+ 'font-weight: bold;',\n+ ...args\n+ );\n+ }\n+};\n+\n+type ElementAndRendererID = {|\n+ id: number,\n+ rendererID: number,\n+|};\n+\n+type InspectElementParams = {|\n+ id: number,\n+ path?: Array<string | number>,\n+ rendererID: number,\n+|};\n+\n+type OverrideHookParams = {|\n+ id: number,\n+ hookID: number,\n+ path: Array<string | number>,\n+ rendererID: number,\n+ value: any,\n+|};\n+\n+type SetInParams = {|\n+ id: number,\n+ path: Array<string | number>,\n+ rendererID: number,\n+ value: any,\n+|};\n+\n+type OverrideSuspenseParams = {|\n+ id: number,\n+ rendererID: number,\n+ forceFallback: boolean,\n+|};\n+\n+type PersistedSelection = {|\n+ rendererID: number,\n+ path: Array<PathFrame>,\n+|};\n+\n+export default class Agent extends EventEmitter<{|\n+ hideNativeHighlight: [],\n+ showNativeHighlight: [NativeType],\n+ shutdown: [],\n+|}> {\n+ _bridge: BackendBridge;\n+ _isProfiling: boolean = false;\n+ _recordChangeDescriptions: boolean = false;\n+ _rendererInterfaces: { [key: RendererID]: RendererInterface } = {};\n+ _persistedSelection: PersistedSelection | null = null;\n+ _persistedSelectionMatch: PathMatch | null = null;\n+\n+ constructor(bridge: BackendBridge) {\n+ super();\n+\n+ if (\n+ sessionStorageGetItem(SESSION_STORAGE_RELOAD_AND_PROFILE_KEY) === 'true'\n+ ) {\n+ this._recordChangeDescriptions =\n+ sessionStorageGetItem(\n+ SESSION_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY\n+ ) === 'true';\n+ this._isProfiling = true;\n+\n+ sessionStorageRemoveItem(SESSION_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY);\n+ sessionStorageRemoveItem(SESSION_STORAGE_RELOAD_AND_PROFILE_KEY);\n+ }\n+\n+ const persistedSelectionString = sessionStorageGetItem(\n+ SESSION_STORAGE_LAST_SELECTION_KEY\n+ );\n+ if (persistedSelectionString != null) {\n+ this._persistedSelection = JSON.parse(persistedSelectionString);\n+ }\n+\n+ this._bridge = bridge;\n+\n+ bridge.addListener('getProfilingData', this.getProfilingData);\n+ bridge.addListener('getProfilingStatus', this.getProfilingStatus);\n+ bridge.addListener('getOwnersList', this.getOwnersList);\n+ bridge.addListener('inspectElement', this.inspectElement);\n+ bridge.addListener('logElementToConsole', this.logElementToConsole);\n+ bridge.addListener('overrideContext', this.overrideContext);\n+ bridge.addListener('overrideHookState', this.overrideHookState);\n+ bridge.addListener('overrideProps', this.overrideProps);\n+ bridge.addListener('overrideState', this.overrideState);\n+ bridge.addListener('overrideSuspense', this.overrideSuspense);\n+ bridge.addListener('reloadAndProfile', this.reloadAndProfile);\n+ bridge.addListener('startProfiling', this.startProfiling);\n+ bridge.addListener('stopProfiling', this.stopProfiling);\n+ bridge.addListener(\n+ 'syncSelectionFromNativeElementsPanel',\n+ this.syncSelectionFromNativeElementsPanel\n+ );\n+ bridge.addListener('shutdown', this.shutdown);\n+ bridge.addListener(\n+ 'updateAppendComponentStack',\n+ this.updateAppendComponentStack\n+ );\n+ bridge.addListener('updateComponentFilters', this.updateComponentFilters);\n+ bridge.addListener('viewElementSource', this.viewElementSource);\n+\n+ if (this._isProfiling) {\n+ bridge.send('profilingStatus', true);\n+ }\n+\n+ \/\/ Notify the frontend if the backend supports the Storage API (e.g. localStorage).\n+ \/\/ If not, features like reload-and-profile will not work correctly and must be disabled.\n+ let isBackendStorageAPISupported = false;\n+ try {\n+ localStorage.getItem('test');\n+ isBackendStorageAPISupported = true;\n+ } catch (error) {}\n+ bridge.send('isBackendStorageAPISupported', isBackendStorageAPISupported);\n+\n+ setupHighlighter(bridge, this);\n+ }\n+\n+ get rendererInterfaces(): { [key: RendererID]: RendererInterface } {\n+ return this._rendererInterfaces;\n+ }\n+\n+ getInstanceAndStyle({\n+ id,\n+ rendererID,\n+ }: ElementAndRendererID): InstanceAndStyle | null {\n+ const renderer = this._rendererInterfaces[rendererID];\n+ if (renderer == null) {\n+ console.warn(`Invalid renderer id \"${rendererID}\"`);\n+ return null;\n+ }\n+ return renderer.getInstanceAndStyle(id);\n+ }\n+\n+ getIDForNode(node: Object): number | null {\n+ for (let rendererID in this._rendererInterfaces) {\n+ const renderer = ((this._rendererInterfaces[\n+ (rendererID: any)\n+ ]: any): RendererInterface);\n+\n+ try {\n+ const id = renderer.getFiberIDForNative(node, true);\n+ if (id !== null) {\n+ return id;\n+ }\n+ } catch (error) {\n+ \/\/ Some old React versions might throw if they can't find a match.\n+ \/\/ If so we should ignore it...\n+ }\n+ }\n+ return null;\n+ }\n+\n+ getProfilingData = ({ rendererID }: {| rendererID: RendererID |}) => {\n+ const renderer = this._rendererInterfaces[rendererID];\n+ if (renderer == null) {\n+ console.warn(`Invalid renderer id \"${rendererID}\"`);\n+ }\n+\n+ this._bridge.send('profilingData', renderer.getProfilingData());\n+ };\n+\n+ getProfilingStatus = () => {\n+ this._bridge.send('profilingStatus', this._isProfiling);\n+ };\n+\n+ getOwnersList = ({ id, rendererID }: ElementAndRendererID) => {\n+ const renderer = this._rendererInterfaces[rendererID];\n+ if (renderer == null) {\n+ console.warn(`Invalid renderer id \"${rendererID}\" for element \"${id}\"`);\n+ } else {\n+ const owners = renderer.getOwnersList(id);\n+ this._bridge.send('ownersList', ({ id, owners }: OwnersList));\n+ }\n+ };\n+\n+ inspectElement = ({ id, path, rendererID }: InspectElementParams) => {\n+ const renderer = this._rendererInterfaces[rendererID];\n+ if (renderer == null) {\n+ console.warn(`Invalid renderer id \"${rendererID}\" for element \"${id}\"`);\n+ } else {\n+ this._bridge.send('inspectedElement', renderer.inspectElement(id, path));\n+\n+ \/\/ When user selects an element, stop trying to restore the selection,\n+ \/\/ and instead remember the current selection for the next reload.\n+ if (\n+ this._persistedSelectionMatch === null ||\n+ this._persistedSelectionMatch.id !== id\n+ ) {\n+ this._persistedSelection = null;\n+ this._persistedSelectionMatch = null;\n+ renderer.setTrackedPath(null);\n+ this._throttledPersistSelection(rendererID, id);\n+ }\n+\n+ \/\/ TODO: If there was a way to change the selected DOM element\n+ \/\/ in native Elements tab without forcing a switch to it, we'd do it here.\n+ \/\/ For now, it doesn't seem like there is a way to do that:\n+ \/\/ https:\/\/github.com\/bvaughn\/react-devtools-experimental\/issues\/102\n+ \/\/ (Setting $0 doesn't work, and calling inspect() switches the tab.)\n+ }\n+ };\n+\n+ logElementToConsole = ({ id, rendererID }: ElementAndRendererID) => {\n+ const renderer = this._rendererInterfaces[rendererID];\n+ if (renderer == null) {\n+ console.warn(`Invalid renderer id \"${rendererID}\" for element \"${id}\"`);\n+ } else {\n+ renderer.logElementToConsole(id);\n+ }\n+ };\n+\n+ reloadAndProfile = (recordChangeDescriptions: boolean) => {\n+ sessionStorageSetItem(SESSION_STORAGE_RELOAD_AND_PROFILE_KEY, 'true');\n+ sessionStorageSetItem(\n+ SESSION_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY,\n+ recordChangeDescriptions ? 'true' : 'false'\n+ );\n+\n+ \/\/ This code path should only be hit if the shell has explicitly told the Store that it supports profiling.\n+ \/\/ In that case, the shell must also listen for this specific message to know when it needs to reload the app.\n+ \/\/ The agent can't do this in a way that is renderer agnostic.\n+ this._bridge.send('reloadAppForProfiling');\n+ };\n+\n+ overrideContext = ({ id, path, rendererID, value }: SetInParams) => {\n+ const renderer = this._rendererInterfaces[rendererID];\n+ if (renderer == null) {\n+ console.warn(`Invalid renderer id \"${rendererID}\" for element \"${id}\"`);\n+ } else {\n+ renderer.setInContext(id, path, value);\n+ }\n+ };\n+\n+ overrideHookState = ({\n+ id,\n+ hookID,\n+ path,\n+ rendererID,\n+ value,\n+ }: OverrideHookParams) => {\n+ const renderer = this._rendererInterfaces[rendererID];\n+ if (renderer == null) {\n+ console.warn(`Invalid renderer id \"${rendererID}\" for element \"${id}\"`);\n+ } else {\n+ renderer.setInHook(id, hookID, path, value);\n+ }\n+ };\n+\n+ overrideProps = ({ id, path, rendererID, value }: SetInParams) => {\n+ const renderer = this._rendererInterfaces[rendererID];\n+ if (renderer == null) {\n+ console.warn(`Invalid renderer id \"${rendererID}\" for element \"${id}\"`);\n+ } else {\n+ renderer.setInProps(id, path, value);\n+ }\n+ };\n+\n+ overrideState = ({ id, path, rendererID, value }: SetInParams) => {\n+ const renderer = this._rendererInterfaces[rendererID];\n+ if (renderer == null) {\n+ console.warn(`Invalid renderer id \"${rendererID}\" for element \"${id}\"`);\n+ } else {\n+ renderer.setInState(id, path, value);\n+ }\n+ };\n+\n+ overrideSuspense = ({\n+ id,\n+ rendererID,\n+ forceFallback,\n+ }: OverrideSuspenseParams) => {\n+ const renderer = this._rendererInterfaces[rendererID];\n+ if (renderer == null) {\n+ console.warn(`Invalid renderer id \"${rendererID}\" for element \"${id}\"`);\n+ } else {\n+ renderer.overrideSuspense(id, forceFallback);\n+ }\n+ };\n+\n+ selectNode(target: Object): void {\n+ const id = this.getIDForNode(target);\n+ if (id !== null) {\n+ this._bridge.send('selectFiber', id);\n+ }\n+ }\n+\n+ setRendererInterface(\n+ rendererID: RendererID,\n+ rendererInterface: RendererInterface\n+ ) {\n+ this._rendererInterfaces[rendererID] = rendererInterface;\n+\n+ if (this._isProfiling) {\n+ rendererInterface.startProfiling(this._recordChangeDescriptions);\n+ }\n+\n+ \/\/ When the renderer is attached, we need to tell it whether\n+ \/\/ we remember the previous selection that we'd like to restore.\n+ \/\/ It'll start tracking mounts for matches to the last selection path.\n+ const selection = this._persistedSelection;\n+ if (selection !== null && selection.rendererID === rendererID) {\n+ rendererInterface.setTrackedPath(selection.path);\n+ }\n+ }\n+\n+ syncSelectionFromNativeElementsPanel = () => {\n+ const target = window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0;\n+ if (target == null) {\n+ return;\n+ }\n+ this.selectNode(target);\n+ };\n+\n+ shutdown = () => {\n+ \/\/ Clean up the overlay if visible, and associated events.\n+ this.emit('shutdown');\n+ };\n+\n+ startProfiling = (recordChangeDescriptions: boolean) => {\n+ this._recordChangeDescriptions = recordChangeDescriptions;\n+ this._isProfiling = true;\n+ for (let rendererID in this._rendererInterfaces) {\n+ const renderer = ((this._rendererInterfaces[\n+ (rendererID: any)\n+ ]: any): RendererInterface);\n+ renderer.startProfiling(recordChangeDescriptions);\n+ }\n+ this._bridge.send('profilingStatus', this._isProfiling);\n+ };\n+\n+ stopProfiling = () => {\n+ this._isProfiling = false;\n+ this._recordChangeDescriptions = false;\n+ for (let rendererID in this._rendererInterfaces) {\n+ const renderer = ((this._rendererInterfaces[\n+ (rendererID: any)\n+ ]: any): RendererInterface);\n+ renderer.stopProfiling();\n+ }\n+ this._bridge.send('profilingStatus', this._isProfiling);\n+ };\n+\n+ updateAppendComponentStack = (appendComponentStack: boolean) => {\n+ \/\/ If the frontend preference has change,\n+ \/\/ or in the case of React Native- if the backend is just finding out the preference-\n+ \/\/ then install or uninstall the console overrides.\n+ \/\/ It's safe to call these methods multiple times, so we don't need to worry about that.\n+ if (appendComponentStack) {\n+ patchConsole();\n+ } else {\n+ unpatchConsole();\n+ }\n+ };\n+\n+ updateComponentFilters = (componentFilters: Array<ComponentFilter>) => {\n+ for (let rendererID in this._rendererInterfaces) {\n+ const renderer = ((this._rendererInterfaces[\n+ (rendererID: any)\n+ ]: any): RendererInterface);\n+ renderer.updateComponentFilters(componentFilters);\n+ }\n+ };\n+\n+ viewElementSource = ({ id, rendererID }: ElementAndRendererID) => {\n+ const renderer = this._rendererInterfaces[rendererID];\n+ if (renderer == null) {\n+ console.warn(`Invalid renderer id \"${rendererID}\" for element \"${id}\"`);\n+ } else {\n+ renderer.prepareViewElementSource(id);\n+ }\n+ };\n+\n+ onHookOperations = (operations: Array<number>) => {\n+ if (__DEBUG__) {\n+ debug('onHookOperations', operations);\n+ }\n+\n+ \/\/ TODO:\n+ \/\/ The chrome.runtime does not currently support transferables; it forces JSON serialization.\n+ \/\/ See bug https:\/\/bugs.chromium.org\/p\/chromium\/issues\/detail?id=927134\n+ \/\/\n+ \/\/ Regarding transferables, the postMessage doc states:\n+ \/\/ If the ownership of an object is transferred, it becomes unusable (neutered)\n+ \/\/ in the context it was sent from and becomes available only to the worker it was sent to.\n+ \/\/\n+ \/\/ Even though Chrome is eventually JSON serializing the array buffer,\n+ \/\/ using the transferable approach also sometimes causes it to throw:\n+ \/\/ DOMException: Failed to execute 'postMessage' on 'Window': ArrayBuffer at index 0 is already neutered.\n+ \/\/\n+ \/\/ See bug https:\/\/github.com\/bvaughn\/react-devtools-experimental\/issues\/25\n+ \/\/\n+ \/\/ The Store has a fallback in place that parses the message as JSON if the type isn't an array.\n+ \/\/ For now the simplest fix seems to be to not transfer the array.\n+ \/\/ This will negatively impact performance on Firefox so it's unfortunate,\n+ \/\/ but until we're able to fix the Chrome error mentioned above, it seems necessary.\n+ \/\/\n+ \/\/ this._bridge.send('operations', operations, [operations.buffer]);\n+ this._bridge.send('operations', operations);\n+\n+ if (this._persistedSelection !== null) {\n+ const rendererID = operations[0];\n+ if (this._persistedSelection.rendererID === rendererID) {\n+ \/\/ Check if we can select a deeper match for the persisted selection.\n+ const renderer = this._rendererInterfaces[rendererID];\n+ if (renderer == null) {\n+ console.warn(`Invalid renderer id \"${rendererID}\"`);\n+ } else {\n+ const prevMatch = this._persistedSelectionMatch;\n+ const nextMatch = renderer.getBestMatchForTrackedPath();\n+ this._persistedSelectionMatch = nextMatch;\n+ const prevMatchID = prevMatch !== null ? prevMatch.id : null;\n+ const nextMatchID = nextMatch !== null ? nextMatch.id : null;\n+ if (prevMatchID !== nextMatchID) {\n+ if (nextMatchID !== null) {\n+ \/\/ We moved forward, unlocking a deeper node.\n+ this._bridge.send('selectFiber', nextMatchID);\n+ }\n+ }\n+ if (nextMatch !== null && nextMatch.isFullMatch) {\n+ \/\/ We've just unlocked the innermost selected node.\n+ \/\/ There's no point tracking it further.\n+ this._persistedSelection = null;\n+ this._persistedSelectionMatch = null;\n+ renderer.setTrackedPath(null);\n+ }\n+ }\n+ }\n+ }\n+ };\n+\n+ _throttledPersistSelection = throttle((rendererID: number, id: number) => {\n+ \/\/ This is throttled, so both renderer and selected ID\n+ \/\/ might not be available by the time we read them.\n+ \/\/ This is why we need the defensive checks here.\n+ const renderer = this._rendererInterfaces[rendererID];\n+ const path = renderer != null ? renderer.getPathForElement(id) : null;\n+ if (path !== null) {\n+ sessionStorageSetItem(\n+ SESSION_STORAGE_LAST_SELECTION_KEY,\n+ JSON.stringify(({ rendererID, path }: PersistedSelection))\n+ );\n+ } else {\n+ sessionStorageRemoveItem(SESSION_STORAGE_LAST_SELECTION_KEY);\n+ }\n+ }, 1000);\n+}\ndiff --git a\/src\/backend\/console.js b\/src\/backend\/console.js\nnew file mode 100644\nindex 0000000000..22f5db9515\n--- \/dev\/null\n+++ b\/src\/backend\/console.js\n@@ -0,0 +1,143 @@\n+\/\/ @flow\n+\n+import { getInternalReactConstants } from '.\/renderer';\n+import describeComponentFrame from '.\/describeComponentFrame';\n+\n+import type { Fiber, ReactRenderer } from '.\/types';\n+\n+const APPEND_STACK_TO_METHODS = ['error', 'trace', 'warn'];\n+\n+const FRAME_REGEX = \/\\n {4}in \/;\n+\n+const injectedRenderers: Map<\n+ ReactRenderer,\n+ {|\n+ getCurrentFiber: () => Fiber | null,\n+ getDisplayNameForFiber: (fiber: Fiber) => string | null,\n+ |}\n+> = new Map();\n+\n+let targetConsole: Object = console;\n+let targetConsoleMethods = {};\n+for (let method in console) {\n+ targetConsoleMethods[method] = console[method];\n+}\n+\n+let unpatchFn: null | (() => void) = null;\n+\n+\/\/ Enables e.g. Jest tests to inject a mock console object.\n+export function dangerous_setTargetConsoleForTesting(\n+ targetConsoleForTesting: Object\n+): void {\n+ targetConsole = targetConsoleForTesting;\n+\n+ targetConsoleMethods = {};\n+ for (let method in targetConsole) {\n+ targetConsoleMethods[method] = console[method];\n+ }\n+}\n+\n+\/\/ v16 renderers should use this method to inject internals necessary to generate a component stack.\n+\/\/ These internals will be used if the console is patched.\n+\/\/ Injecting them separately allows the console to easily be patched or unpacted later (at runtime).\n+export function registerRenderer(renderer: ReactRenderer): void {\n+ const { getCurrentFiber, findFiberByHostInstance, version } = renderer;\n+\n+ \/\/ Ignore React v15 and older because they don't expose a component stack anyway.\n+ if (typeof findFiberByHostInstance !== 'function') {\n+ return;\n+ }\n+\n+ if (typeof getCurrentFiber === 'function') {\n+ const { getDisplayNameForFiber } = getInternalReactConstants(version);\n+\n+ injectedRenderers.set(renderer, {\n+ getCurrentFiber,\n+ getDisplayNameForFiber,\n+ });\n+ }\n+}\n+\n+\/\/ Patches whitelisted console methods to append component stack for the current fiber.\n+\/\/ Call unpatch() to remove the injected behavior.\n+export function patch(): void {\n+ if (unpatchFn !== null) {\n+ \/\/ Don't patch twice.\n+ return;\n+ }\n+\n+ const originalConsoleMethods = {};\n+\n+ unpatchFn = () => {\n+ for (let method in originalConsoleMethods) {\n+ try {\n+ \/\/ $FlowFixMe property error|warn is not writable.\n+ targetConsole[method] = originalConsoleMethods[method];\n+ } catch (error) {}\n+ }\n+ };\n+\n+ APPEND_STACK_TO_METHODS.forEach(method => {\n+ try {\n+ const originalMethod = (originalConsoleMethods[method] =\n+ targetConsole[method]);\n+\n+ const overrideMethod = (...args) => {\n+ try {\n+ \/\/ If we are ever called with a string that already has a component stack, e.g. a React error\/warning,\n+ \/\/ don't append a second stack.\n+ const alreadyHasComponentStack =\n+ args.length > 0 && FRAME_REGEX.exec(args[args.length - 1]);\n+\n+ if (!alreadyHasComponentStack) {\n+ \/\/ If there's a component stack for at least one of the injected renderers, append it.\n+ \/\/ We don't handle the edge case of stacks for more than one (e.g. interleaved renderers?)\n+ for (let {\n+ getCurrentFiber,\n+ getDisplayNameForFiber,\n+ } of injectedRenderers.values()) {\n+ let current: ?Fiber = getCurrentFiber();\n+ let ownerStack: string = '';\n+ while (current != null) {\n+ const name = getDisplayNameForFiber(current);\n+ const owner = current._debugOwner;\n+ const ownerName =\n+ owner != null ? getDisplayNameForFiber(owner) : null;\n+\n+ ownerStack += describeComponentFrame(\n+ name,\n+ current._debugSource,\n+ ownerName\n+ );\n+\n+ current = owner;\n+ }\n+\n+ if (ownerStack !== '') {\n+ args.push(ownerStack);\n+ break;\n+ }\n+ }\n+ }\n+ } catch (error) {\n+ \/\/ Don't let a DevTools or React internal error interfere with logging.\n+ }\n+\n+ originalMethod(...args);\n+ };\n+\n+ overrideMethod.__REACT_DEVTOOLS_ORIGINAL_METHOD__ = originalMethod;\n+\n+ \/\/ $FlowFixMe property error|warn is not writable.\n+ targetConsole[method] = overrideMethod;\n+ } catch (error) {}\n+ });\n+}\n+\n+\/\/ Removed component stack patch from whitelisted console methods.\n+export function unpatch(): void {\n+ if (unpatchFn !== null) {\n+ unpatchFn();\n+ unpatchFn = null;\n+ }\n+}\ndiff --git a\/src\/backend\/describeComponentFrame.js b\/src\/backend\/describeComponentFrame.js\nnew file mode 100644\nindex 0000000000..5c632471ba\n--- \/dev\/null\n+++ b\/src\/backend\/describeComponentFrame.js\n@@ -0,0 +1,41 @@\n+\/\/ @flow\n+\n+\/\/ This file was forked from the React GitHub repo:\n+\/\/ https:\/\/raw.githubusercontent.com\/facebook\/react\/master\/packages\/shared\/describeComponentFrame.js\n+\/\/\n+\/\/ It has been modified sligthly to add a zero width space as commented below.\n+\n+const BEFORE_SLASH_RE = \/^(.*)[\\\\\/]\/;\n+\n+export default function describeComponentFrame(\n+ name: null | string,\n+ source: any,\n+ ownerName: null | string\n+) {\n+ let sourceInfo = '';\n+ if (source) {\n+ let path = source.fileName;\n+ let fileName = path.replace(BEFORE_SLASH_RE, '');\n+ if (__DEV__) {\n+ \/\/ In DEV, include code for a common special case:\n+ \/\/ prefer \"folder\/index.js\" instead of just \"index.js\".\n+ if (\/^index\\.\/.test(fileName)) {\n+ const match = path.match(BEFORE_SLASH_RE);\n+ if (match) {\n+ const pathBeforeSlash = match[1];\n+ if (pathBeforeSlash) {\n+ const folderName = pathBeforeSlash.replace(BEFORE_SLASH_RE, '');\n+ \/\/ Note the below string contains a zero width space after the \"\/\" character.\n+ \/\/ This is to prevent browsers like Chrome from formatting the file name as a link.\n+ \/\/ (Since this is a source link, it would not work to open the source file anyway.)\n+ fileName = folderName + '\/' + fileName;\n+ }\n+ }\n+ }\n+ }\n+ sourceInfo = ' (at ' + fileName + ':' + source.lineNumber + ')';\n+ } else if (ownerName) {\n+ sourceInfo = ' (created by ' + ownerName + ')';\n+ }\n+ return '\\n in ' + (name || 'Unknown') + sourceInfo;\n+}\ndiff --git a\/src\/backend\/index.js b\/src\/backend\/index.js\nnew file mode 100644\nindex 0000000000..feee4c00de\n--- \/dev\/null\n+++ b\/src\/backend\/index.js\n@@ -0,0 +1,95 @@\n+\/\/ @flow\n+\n+import Agent from '.\/agent';\n+\n+import { attach } from '.\/renderer';\n+import { attach as attachLegacy } from '.\/legacy\/renderer';\n+\n+import type { DevToolsHook, ReactRenderer, RendererInterface } from '.\/types';\n+\n+export function initBackend(\n+ hook: DevToolsHook,\n+ agent: Agent,\n+ global: Object\n+): () => void {\n+ const subs = [\n+ hook.sub(\n+ 'renderer-attached',\n+ ({\n+ id,\n+ renderer,\n+ rendererInterface,\n+ }: {\n+ id: number,\n+ renderer: ReactRenderer,\n+ rendererInterface: RendererInterface,\n+ }) => {\n+ agent.setRendererInterface(id, rendererInterface);\n+\n+ \/\/ Now that the Store and the renderer interface are connected,\n+ \/\/ it's time to flush the pending operation codes to the frontend.\n+ rendererInterface.flushInitialOperations();\n+ }\n+ ),\n+\n+ hook.sub('operations', agent.onHookOperations),\n+\n+ \/\/ TODO Add additional subscriptions required for profiling mode\n+ ];\n+\n+ const attachRenderer = (id: number, renderer: ReactRenderer) => {\n+ let rendererInterface = hook.rendererInterfaces.get(id);\n+\n+ \/\/ Inject any not-yet-injected renderers (if we didn't reload-and-profile)\n+ if (!rendererInterface) {\n+ if (typeof renderer.findFiberByHostInstance === 'function') {\n+ rendererInterface = attach(hook, id, renderer, global);\n+ } else {\n+ rendererInterface = attachLegacy(hook, id, renderer, global);\n+ }\n+\n+ hook.rendererInterfaces.set(id, rendererInterface);\n+ }\n+\n+ \/\/ Notify the DevTools frontend about new renderers.\n+ \/\/ This includes any that were attached early (via __REACT_DEVTOOLS_ATTACH__).\n+ hook.emit('renderer-attached', {\n+ id,\n+ renderer,\n+ rendererInterface,\n+ });\n+ };\n+\n+ \/\/ Connect renderers that have already injected themselves.\n+ hook.renderers.forEach((renderer, id) => {\n+ attachRenderer(id, renderer);\n+ });\n+\n+ \/\/ Connect any new renderers that injected themselves.\n+ subs.push(\n+ hook.sub(\n+ 'renderer',\n+ ({ id, renderer }: { id: number, renderer: ReactRenderer }) => {\n+ attachRenderer(id, renderer);\n+ }\n+ )\n+ );\n+\n+ hook.emit('react-devtools', agent);\n+ hook.reactDevtoolsAgent = agent;\n+ const onAgentShutdown = () => {\n+ subs.forEach(fn => fn());\n+ hook.rendererInterfaces.forEach(rendererInterface => {\n+ rendererInterface.cleanup();\n+ });\n+ hook.reactDevtoolsAgent = null;\n+ };\n+ agent.addListener('shutdown', onAgentShutdown);\n+ subs.push(() => {\n+ agent.removeListener('shutdown', onAgentShutdown);\n+ });\n+\n+ return () => {\n+ subs.forEach(fn => fn());\n+ };\n+}\ndiff --git a\/src\/backend\/legacy\/renderer.js b\/src\/backend\/legacy\/renderer.js\nnew file mode 100644\nindex 0000000000..51ca6a626a\n--- \/dev\/null\n+++ b\/src\/backend\/legacy\/renderer.js\n@@ -0,0 +1,936 @@\n+\/\/ @flow\n+\n+import {\n+ ElementTypeClass,\n+ ElementTypeFunction,\n+ ElementTypeRoot,\n+ ElementTypeHostComponent,\n+ ElementTypeOtherOrUnknown,\n+} from 'src\/types';\n+import { getUID, utfEncodeString, printOperationsArray } from '..\/..\/utils';\n+import { cleanForBridge, copyWithSet } from '..\/utils';\n+import { getDisplayName } from 'src\/utils';\n+import {\n+ __DEBUG__,\n+ TREE_OPERATION_ADD,\n+ TREE_OPERATION_REMOVE,\n+ TREE_OPERATION_REORDER_CHILDREN,\n+} from '..\/..\/constants';\n+import { decorateMany, forceUpdate, restoreMany } from '.\/utils';\n+\n+import type {\n+ DevToolsHook,\n+ GetFiberIDForNative,\n+ InspectedElementPayload,\n+ InstanceAndStyle,\n+ NativeType,\n+ PathFrame,\n+ PathMatch,\n+ RendererInterface,\n+} from '..\/types';\n+import type { ComponentFilter, ElementType } from 'src\/types';\n+import type { Owner, InspectedElement } from '..\/types';\n+\n+export type InternalInstance = Object;\n+type LegacyRenderer = Object;\n+\n+function getData(internalInstance: InternalInstance) {\n+ let displayName = null;\n+ let key = null;\n+\n+ \/\/ != used deliberately here to catch undefined and null\n+ if (internalInstance._currentElement != null) {\n+ if (internalInstance._currentElement.key) {\n+ key = String(internalInstance._currentElement.key);\n+ }\n+\n+ const elementType = internalInstance._currentElement.type;\n+ if (typeof elementType === 'string') {\n+ displayName = elementType;\n+ } else if (typeof elementType === 'function') {\n+ displayName = getDisplayName(elementType);\n+ }\n+ }\n+\n+ return {\n+ displayName,\n+ key,\n+ };\n+}\n+\n+function getElementType(internalInstance: InternalInstance): ElementType {\n+ \/\/ != used deliberately here to catch undefined and null\n+ if (internalInstance._currentElement != null) {\n+ const elementType = internalInstance._currentElement.type;\n+ if (typeof elementType === 'function') {\n+ const publicInstance = internalInstance.getPublicInstance();\n+ if (publicInstance !== null) {\n+ return ElementTypeClass;\n+ } else {\n+ return ElementTypeFunction;\n+ }\n+ } else if (typeof elementType === 'string') {\n+ return ElementTypeHostComponent;\n+ }\n+ }\n+ return ElementTypeOtherOrUnknown;\n+}\n+\n+function getChildren(internalInstance: Object): Array<any> {\n+ let children = [];\n+\n+ \/\/ If the parent is a native node without rendered children, but with\n+ \/\/ multiple string children, then the `element` that gets passed in here is\n+ \/\/ a plain value -- a string or number.\n+ if (typeof internalInstance !== 'object') {\n+ \/\/ No children\n+ } else if (\n+ internalInstance._currentElement === null ||\n+ internalInstance._currentElement === false\n+ ) {\n+ \/\/ No children\n+ } else if (internalInstance._renderedComponent) {\n+ const child = internalInstance._renderedComponent;\n+ if (getElementType(child) !== ElementTypeOtherOrUnknown) {\n+ children.push(child);\n+ }\n+ } else if (internalInstance._renderedChildren) {\n+ const renderedChildren = internalInstance._renderedChildren;\n+ for (let name in renderedChildren) {\n+ const child = renderedChildren[name];\n+ if (getElementType(child) !== ElementTypeOtherOrUnknown) {\n+ children.push(child);\n+ }\n+ }\n+ }\n+ \/\/ Note: we skip the case where children are just strings or numbers\n+ \/\/ because the new DevTools skips over host text nodes anyway.\n+ return children;\n+}\n+\n+export function attach(\n+ hook: DevToolsHook,\n+ rendererID: number,\n+ renderer: LegacyRenderer,\n+ global: Object\n+): RendererInterface {\n+ const idToInternalInstanceMap: Map<number, InternalInstance> = new Map();\n+ const internalInstanceToIDMap: WeakMap<\n+ InternalInstance,\n+ number\n+ > = new WeakMap();\n+ const internalInstanceToRootIDMap: WeakMap<\n+ InternalInstance,\n+ number\n+ > = new WeakMap();\n+\n+ let getInternalIDForNative: GetFiberIDForNative = ((null: any): GetFiberIDForNative);\n+ let findNativeNodeForInternalID: (id: number) => ?NativeType;\n+\n+ if (renderer.ComponentTree) {\n+ getInternalIDForNative = (node, findNearestUnfilteredAncestor) => {\n+ const internalInstance = renderer.ComponentTree.getClosestInstanceFromNode(\n+ node\n+ );\n+ return internalInstanceToIDMap.get(internalInstance) || null;\n+ };\n+ findNativeNodeForInternalID = (id: number) => {\n+ const internalInstance = idToInternalInstanceMap.get(id);\n+ return renderer.ComponentTree.getNodeFromInstance(internalInstance);\n+ };\n+ } else if (renderer.Mount.getID && renderer.Mount.getNode) {\n+ getInternalIDForNative = (node, findNearestUnfilteredAncestor) => {\n+ \/\/ Not implemented.\n+ return null;\n+ };\n+ findNativeNodeForInternalID = (id: number) => {\n+ \/\/ Not implemented.\n+ return null;\n+ };\n+ }\n+\n+ function getID(internalInstance: InternalInstance): number {\n+ if (typeof internalInstance !== 'object') {\n+ throw new Error('Invalid internal instance: ' + internalInstance);\n+ }\n+ if (!internalInstanceToIDMap.has(internalInstance)) {\n+ const id = getUID();\n+ internalInstanceToIDMap.set(internalInstance, id);\n+ idToInternalInstanceMap.set(id, internalInstance);\n+ }\n+ return ((internalInstanceToIDMap.get(internalInstance): any): number);\n+ }\n+\n+ function areEqualArrays(a, b) {\n+ if (a.length !== b.length) {\n+ return false;\n+ }\n+ for (let i = 0; i < a.length; i++) {\n+ if (a[i] !== b[i]) {\n+ return false;\n+ }\n+ }\n+ return true;\n+ }\n+\n+ \/\/ This is shared mutable state that lets us keep track of where we are.\n+ let parentIDStack = [];\n+\n+ let oldReconcilerMethods = null;\n+ if (renderer.Reconciler) {\n+ \/\/ React 15\n+ oldReconcilerMethods = decorateMany(renderer.Reconciler, {\n+ mountComponent(fn, args) {\n+ const internalInstance = args[0];\n+ const hostContainerInfo = args[3];\n+ if (getElementType(internalInstance) === ElementTypeOtherOrUnknown) {\n+ return fn.apply(this, args);\n+ }\n+ if (hostContainerInfo._topLevelWrapper === undefined) {\n+ \/\/ SSR\n+ return fn.apply(this, args);\n+ }\n+\n+ const id = getID(internalInstance);\n+ \/\/ Push the operation.\n+ const parentID =\n+ parentIDStack.length > 0\n+ ? parentIDStack[parentIDStack.length - 1]\n+ : 0;\n+ recordMount(internalInstance, id, parentID);\n+ parentIDStack.push(id);\n+\n+ \/\/ Remember the root.\n+ internalInstanceToRootIDMap.set(\n+ internalInstance,\n+ getID(hostContainerInfo._topLevelWrapper)\n+ );\n+\n+ try {\n+ const result = fn.apply(this, args);\n+ parentIDStack.pop();\n+ return result;\n+ } catch (err) {\n+ parentIDStack = [];\n+ throw err;\n+ } finally {\n+ if (parentIDStack.length === 0) {\n+ const rootID = internalInstanceToRootIDMap.get(internalInstance);\n+ if (rootID === undefined) {\n+ throw new Error('Expected to find root ID.');\n+ }\n+ flushPendingEvents(rootID);\n+ }\n+ }\n+ },\n+ performUpdateIfNecessary(fn, args) {\n+ const internalInstance = args[0];\n+ if (getElementType(internalInstance) === ElementTypeOtherOrUnknown) {\n+ return fn.apply(this, args);\n+ }\n+\n+ const id = getID(internalInstance);\n+ parentIDStack.push(id);\n+\n+ const prevChildren = getChildren(internalInstance);\n+ try {\n+ const result = fn.apply(this, args);\n+\n+ const nextChildren = getChildren(internalInstance);\n+ if (!areEqualArrays(prevChildren, nextChildren)) {\n+ \/\/ Push the operation\n+ recordReorder(internalInstance, id, nextChildren);\n+ }\n+\n+ parentIDStack.pop();\n+ return result;\n+ } catch (err) {\n+ parentIDStack = [];\n+ throw err;\n+ } finally {\n+ if (parentIDStack.length === 0) {\n+ const rootID = internalInstanceToRootIDMap.get(internalInstance);\n+ if (rootID === undefined) {\n+ throw new Error('Expected to find root ID.');\n+ }\n+ flushPendingEvents(rootID);\n+ }\n+ }\n+ },\n+ receiveComponent(fn, args) {\n+ const internalInstance = args[0];\n+ if (getElementType(internalInstance) === ElementTypeOtherOrUnknown) {\n+ return fn.apply(this, args);\n+ }\n+\n+ const id = getID(internalInstance);\n+ parentIDStack.push(id);\n+\n+ const prevChildren = getChildren(internalInstance);\n+ try {\n+ const result = fn.apply(this, args);\n+\n+ const nextChildren = getChildren(internalInstance);\n+ if (!areEqualArrays(prevChildren, nextChildren)) {\n+ \/\/ Push the operation\n+ recordReorder(internalInstance, id, nextChildren);\n+ }\n+\n+ parentIDStack.pop();\n+ return result;\n+ } catch (err) {\n+ parentIDStack = [];\n+ throw err;\n+ } finally {\n+ if (parentIDStack.length === 0) {\n+ const rootID = internalInstanceToRootIDMap.get(internalInstance);\n+ if (rootID === undefined) {\n+ throw new Error('Expected to find root ID.');\n+ }\n+ flushPendingEvents(rootID);\n+ }\n+ }\n+ },\n+ unmountComponent(fn, args) {\n+ const internalInstance = args[0];\n+ if (getElementType(internalInstance) === ElementTypeOtherOrUnknown) {\n+ return fn.apply(this, args);\n+ }\n+\n+ const id = getID(internalInstance);\n+ parentIDStack.push(id);\n+ try {\n+ const result = fn.apply(this, args);\n+ parentIDStack.pop();\n+\n+ \/\/ Push the operation.\n+ recordUnmount(internalInstance, id);\n+\n+ return result;\n+ } catch (err) {\n+ parentIDStack = [];\n+ throw err;\n+ } finally {\n+ if (parentIDStack.length === 0) {\n+ const rootID = internalInstanceToRootIDMap.get(internalInstance);\n+ if (rootID === undefined) {\n+ throw new Error('Expected to find root ID.');\n+ }\n+ flushPendingEvents(rootID);\n+ }\n+ }\n+ },\n+ });\n+ }\n+\n+ function cleanup() {\n+ if (oldReconcilerMethods !== null) {\n+ if (renderer.Component) {\n+ restoreMany(renderer.Component.Mixin, oldReconcilerMethods);\n+ } else {\n+ restoreMany(renderer.Reconciler, oldReconcilerMethods);\n+ }\n+ }\n+ oldReconcilerMethods = null;\n+ }\n+\n+ function recordMount(\n+ internalInstance: InternalInstance,\n+ id: number,\n+ parentID: number\n+ ) {\n+ const isRoot = parentID === 0;\n+\n+ if (__DEBUG__) {\n+ console.log(\n+ '%crecordMount()',\n+ 'color: green; font-weight: bold;',\n+ id,\n+ getData(internalInstance).displayName\n+ );\n+ }\n+\n+ if (isRoot) {\n+ \/\/ TODO Is this right? For all versions?\n+ const hasOwnerMetadata =\n+ internalInstance._currentElement != null &&\n+ internalInstance._currentElement._owner != null;\n+\n+ pushOperation(TREE_OPERATION_ADD);\n+ pushOperation(id);\n+ pushOperation(ElementTypeRoot);\n+ pushOperation(0); \/\/ isProfilingSupported?\n+ pushOperation(hasOwnerMetadata ? 1 : 0);\n+ } else {\n+ const type = getElementType(internalInstance);\n+ const { displayName, key } = getData(internalInstance);\n+\n+ const ownerID =\n+ internalInstance._currentElement != null &&\n+ internalInstance._currentElement._owner != null\n+ ? getID(internalInstance._currentElement._owner)\n+ : 0;\n+\n+ let displayNameStringID = getStringID(displayName);\n+ let keyStringID = getStringID(key);\n+ pushOperation(TREE_OPERATION_ADD);\n+ pushOperation(id);\n+ pushOperation(type);\n+ pushOperation(parentID);\n+ pushOperation(ownerID);\n+ pushOperation(displayNameStringID);\n+ pushOperation(keyStringID);\n+ }\n+ }\n+\n+ function recordReorder(\n+ internalInstance: InternalInstance,\n+ id: number,\n+ nextChildren: Array<InternalInstance>\n+ ) {\n+ pushOperation(TREE_OPERATION_REORDER_CHILDREN);\n+ pushOperation(id);\n+ const nextChildIDs = nextChildren.map(getID);\n+ pushOperation(nextChildIDs.length);\n+ for (let i = 0; i < nextChildIDs.length; i++) {\n+ pushOperation(nextChildIDs[i]);\n+ }\n+ }\n+\n+ function recordUnmount(internalInstance: InternalInstance, id: number) {\n+ pendingUnmountedIDs.push(id);\n+ idToInternalInstanceMap.delete(id);\n+ }\n+\n+ function crawlAndRecordInitialMounts(\n+ id: number,\n+ parentID: number,\n+ rootID: number\n+ ) {\n+ const internalInstance = idToInternalInstanceMap.get(id);\n+\n+ if (__DEBUG__) {\n+ console.group('crawlAndRecordInitialMounts() id:', id);\n+ }\n+\n+ internalInstanceToRootIDMap.set(internalInstance, rootID);\n+ recordMount(internalInstance, id, parentID);\n+ getChildren(internalInstance).forEach(child =>\n+ crawlAndRecordInitialMounts(getID(child), id, rootID)\n+ );\n+\n+ if (__DEBUG__) {\n+ console.groupEnd();\n+ }\n+ }\n+\n+ function flushInitialOperations() {\n+ \/\/ Crawl roots though and register any nodes that mounted before we were injected.\n+\n+ const roots =\n+ renderer.Mount._instancesByReactRootID ||\n+ renderer.Mount._instancesByContainerID;\n+\n+ for (let key in roots) {\n+ const internalInstance = roots[key];\n+ const id = getID(internalInstance);\n+ crawlAndRecordInitialMounts(id, 0, id);\n+ flushPendingEvents(id);\n+ }\n+ }\n+\n+ let pendingOperations: Array<number> = [];\n+ let pendingStringTable: Map<string, number> = new Map();\n+ let pendingUnmountedIDs: Array<number> = [];\n+ let pendingStringTableLength: number = 0;\n+ let pendingUnmountedRootID: number | null = null;\n+\n+ function flushPendingEvents(rootID: number) {\n+ if (\n+ pendingOperations.length === 0 &&\n+ pendingUnmountedIDs.length === 0 &&\n+ pendingUnmountedRootID === null\n+ ) {\n+ return;\n+ }\n+\n+ const numUnmountIDs =\n+ pendingUnmountedIDs.length + (pendingUnmountedRootID === null ? 0 : 1);\n+\n+ const operations = new Array(\n+ \/\/ Identify which renderer this update is coming from.\n+ 2 + \/\/ [rendererID, rootFiberID]\n+ \/\/ How big is the string table?\n+ 1 + \/\/ [stringTableLength]\n+ \/\/ Then goes the actual string table.\n+ pendingStringTableLength +\n+ \/\/ All unmounts are batched in a single message.\n+ \/\/ [TREE_OPERATION_REMOVE, removedIDLength, ...ids]\n+ (numUnmountIDs > 0 ? 2 + numUnmountIDs : 0) +\n+ \/\/ Mount operations\n+ pendingOperations.length\n+ );\n+\n+ \/\/ Identify which renderer this update is coming from.\n+ \/\/ This enables roots to be mapped to renderers,\n+ \/\/ Which in turn enables fiber properations, states, and hooks to be inspected.\n+ let i = 0;\n+ operations[i++] = rendererID;\n+ operations[i++] = rootID;\n+\n+ \/\/ Now fill in the string table.\n+ \/\/ [stringTableLength, str1Length, ...str1, str2Length, ...str2, ...]\n+ operations[i++] = pendingStringTableLength;\n+ pendingStringTable.forEach((value, key) => {\n+ operations[i++] = key.length;\n+ const encodedKey = utfEncodeString(key);\n+ for (let j = 0; j < encodedKey.length; j++) {\n+ operations[i + j] = encodedKey[j];\n+ }\n+ i += key.length;\n+ });\n+\n+ if (numUnmountIDs > 0) {\n+ \/\/ All unmounts except roots are batched in a single message.\n+ operations[i++] = TREE_OPERATION_REMOVE;\n+ \/\/ The first number is how many unmounted IDs we're gonna send.\n+ operations[i++] = numUnmountIDs;\n+ \/\/ Fill in the unmounts\n+ for (let j = 0; j < pendingUnmountedIDs.length; j++) {\n+ operations[i++] = pendingUnmountedIDs[j];\n+ }\n+ \/\/ The root ID should always be unmounted last.\n+ if (pendingUnmountedRootID !== null) {\n+ operations[i] = pendingUnmountedRootID;\n+ i++;\n+ }\n+ }\n+\n+ \/\/ Fill in the rest of the operations.\n+ for (let j = 0; j < pendingOperations.length; j++) {\n+ operations[i + j] = pendingOperations[j];\n+ }\n+ i += pendingOperations.length;\n+\n+ if (__DEBUG__) {\n+ printOperationsArray(operations);\n+ }\n+\n+ \/\/ If we've already connected to the frontend, just pass the operations through.\n+ hook.emit('operations', operations);\n+\n+ pendingOperations.length = 0;\n+ pendingUnmountedIDs = [];\n+ pendingUnmountedRootID = null;\n+ pendingStringTable.clear();\n+ pendingStringTableLength = 0;\n+ }\n+\n+ function pushOperation(op: number): void {\n+ if (__DEV__) {\n+ if (!Number.isInteger(op)) {\n+ console.error(\n+ 'pushOperation() was called but the value is not an integer.',\n+ op\n+ );\n+ }\n+ }\n+ pendingOperations.push(op);\n+ }\n+\n+ function getStringID(str: string | null): number {\n+ if (str === null) {\n+ return 0;\n+ }\n+ const existingID = pendingStringTable.get(str);\n+ if (existingID !== undefined) {\n+ return existingID;\n+ }\n+ const stringID = pendingStringTable.size + 1;\n+ pendingStringTable.set(str, stringID);\n+ \/\/ The string table total length needs to account\n+ \/\/ both for the string length, and for the array item\n+ \/\/ that contains the length itself. Hence + 1.\n+ pendingStringTableLength += str.length + 1;\n+ return stringID;\n+ }\n+\n+ let currentlyInspectedElementID: number | null = null;\n+ let currentlyInspectedPaths: Object = {};\n+\n+ \/\/ Track the intersection of currently inspected paths,\n+ \/\/ so that we can send their data along if the element is re-rendered.\n+ function mergeInspectedPaths(path: Array<string | number>) {\n+ let current = currentlyInspectedPaths;\n+ path.forEach(key => {\n+ if (!current[key]) {\n+ current[key] = {};\n+ }\n+ current = current[key];\n+ });\n+ }\n+\n+ function createIsPathWhitelisted(key: string) {\n+ \/\/ This function helps prevent previously-inspected paths from being dehydrated in updates.\n+ \/\/ This is important to avoid a bad user experience where expanded toggles collapse on update.\n+ return function isPathWhitelisted(path: Array<string | number>): boolean {\n+ let current = currentlyInspectedPaths[key];\n+ if (!current) {\n+ return false;\n+ }\n+ for (let i = 0; i < path.length; i++) {\n+ current = current[path[i]];\n+ if (!current) {\n+ return false;\n+ }\n+ }\n+ return true;\n+ };\n+ }\n+\n+ \/\/ Fast path props lookup for React Native style editor.\n+ function getInstanceAndStyle(id: number): InstanceAndStyle {\n+ let instance = null;\n+ let style = null;\n+\n+ const internalInstance = idToInternalInstanceMap.get(id);\n+ if (internalInstance != null) {\n+ instance = internalInstance._instance || null;\n+\n+ const element = internalInstance._currentElement;\n+ if (element != null && element.props != null) {\n+ style = element.props.style || null;\n+ }\n+ }\n+\n+ return {\n+ instance,\n+ style,\n+ };\n+ }\n+\n+ function updateSelectedElement(id: number): void {\n+ const internalInstance = idToInternalInstanceMap.get(id);\n+ if (internalInstance == null) {\n+ console.warn(`Could not find instance with id \"${id}\"`);\n+ return;\n+ }\n+\n+ switch (getElementType(internalInstance)) {\n+ case ElementTypeClass:\n+ global.$r = internalInstance._instance;\n+ break;\n+ case ElementTypeFunction:\n+ const element = internalInstance._currentElement;\n+ if (element == null) {\n+ console.warn(`Could not find element with id \"${id}\"`);\n+ return;\n+ }\n+\n+ global.$r = {\n+ props: element.props,\n+ type: element.type,\n+ };\n+ break;\n+ default:\n+ global.$r = null;\n+ break;\n+ }\n+ }\n+\n+ function inspectElement(\n+ id: number,\n+ path?: Array<string | number>\n+ ): InspectedElementPayload {\n+ if (currentlyInspectedElementID !== id) {\n+ currentlyInspectedElementID = id;\n+ currentlyInspectedPaths = {};\n+ }\n+\n+ const inspectedElement = inspectElementRaw(id);\n+ if (inspectedElement === null) {\n+ return {\n+ id,\n+ type: 'not-found',\n+ };\n+ }\n+\n+ if (path != null) {\n+ mergeInspectedPaths(path);\n+ }\n+\n+ \/\/ Any time an inspected element has an update,\n+ \/\/ we should update the selected $r value as wel.\n+ \/\/ Do this before dehyration (cleanForBridge).\n+ updateSelectedElement(id);\n+\n+ inspectedElement.context = cleanForBridge(\n+ inspectedElement.context,\n+ createIsPathWhitelisted('context')\n+ );\n+ inspectedElement.props = cleanForBridge(\n+ inspectedElement.props,\n+ createIsPathWhitelisted('props')\n+ );\n+ inspectedElement.state = cleanForBridge(\n+ inspectedElement.state,\n+ createIsPathWhitelisted('state')\n+ );\n+\n+ return {\n+ id,\n+ type: 'full-data',\n+ value: inspectedElement,\n+ };\n+ }\n+\n+ function inspectElementRaw(id: number): InspectedElement | null {\n+ const internalInstance = idToInternalInstanceMap.get(id);\n+ const displayName = getData(internalInstance).displayName;\n+ const type = getElementType(internalInstance);\n+\n+ let context = null;\n+ let owners = null;\n+ let props = null;\n+ let state = null;\n+ let source = null;\n+\n+ if (internalInstance != null) {\n+ const element = internalInstance._currentElement;\n+ if (element !== null) {\n+ props = element.props;\n+ source = element._source != null ? element._source : null;\n+\n+ let owner = element._owner;\n+ if (owner) {\n+ owners = [];\n+ while (owner != null) {\n+ owners.push({\n+ displayName: getData(owner).displayName || 'Unknown',\n+ id: getID(owner),\n+ type: getElementType(owner),\n+ });\n+ if (owner._currentElement) {\n+ owner = owner._currentElement._owner;\n+ }\n+ }\n+ }\n+ }\n+\n+ const publicInstance = internalInstance._instance;\n+ if (publicInstance != null) {\n+ context = publicInstance.context || null;\n+ state = publicInstance.state || null;\n+ }\n+ }\n+\n+ return {\n+ id,\n+\n+ \/\/ Hooks did not exist in legacy versions\n+ canEditHooks: false,\n+\n+ \/\/ Does the current renderer support editable function props?\n+ canEditFunctionProps: true,\n+\n+ \/\/ Suspense did not exist in legacy versions\n+ canToggleSuspense: false,\n+\n+ \/\/ Can view component source location.\n+ canViewSource: type === ElementTypeClass || type === ElementTypeFunction,\n+\n+ displayName: displayName,\n+\n+ type: type,\n+\n+ \/\/ Inspectable properties.\n+ context,\n+ hooks: null,\n+ props,\n+ state,\n+\n+ \/\/ List of owners\n+ owners,\n+\n+ \/\/ Location of component in source coude.\n+ source,\n+ };\n+ }\n+\n+ function logElementToConsole(id: number): void {\n+ const result = inspectElementRaw(id);\n+ if (result === null) {\n+ console.warn(`Could not find element with id \"${id}\"`);\n+ return;\n+ }\n+\n+ const supportsGroup = typeof console.groupCollapsed === 'function';\n+ if (supportsGroup) {\n+ console.groupCollapsed(\n+ `[Click to expand] %c<${result.displayName || 'Component'} \/>`,\n+ \/\/ --dom-tag-name-color is the CSS variable Chrome styles HTML elements with in the console.\n+ 'color: var(--dom-tag-name-color); font-weight: normal;'\n+ );\n+ }\n+ if (result.props !== null) {\n+ console.log('Props:', result.props);\n+ }\n+ if (result.state !== null) {\n+ console.log('State:', result.state);\n+ }\n+ if (result.context !== null) {\n+ console.log('Context:', result.context);\n+ }\n+ const nativeNode = findNativeNodeForInternalID(id);\n+ if (nativeNode !== null) {\n+ console.log('Node:', nativeNode);\n+ }\n+ if (window.chrome || \/firefox\/i.test(navigator.userAgent)) {\n+ console.log(\n+ 'Right-click any value to save it as a global variable for further inspection.'\n+ );\n+ }\n+ if (supportsGroup) {\n+ console.groupEnd();\n+ }\n+ }\n+\n+ function prepareViewElementSource(id: number): void {\n+ const internalInstance = idToInternalInstanceMap.get(id);\n+ if (internalInstance == null) {\n+ console.warn(`Could not find instance with id \"${id}\"`);\n+ return;\n+ }\n+\n+ const element = internalInstance._currentElement;\n+ if (element == null) {\n+ console.warn(`Could not find element with id \"${id}\"`);\n+ return;\n+ }\n+\n+ global.$type = element.type;\n+ }\n+\n+ function setInProps(id: number, path: Array<string | number>, value: any) {\n+ const internalInstance = idToInternalInstanceMap.get(id);\n+ if (internalInstance != null) {\n+ const element = internalInstance._currentElement;\n+ internalInstance._currentElement = {\n+ ...element,\n+ props: copyWithSet(element.props, path, value),\n+ };\n+ forceUpdate(internalInstance._instance);\n+ }\n+ }\n+\n+ function setInState(id: number, path: Array<string | number>, value: any) {\n+ const internalInstance = idToInternalInstanceMap.get(id);\n+ if (internalInstance != null) {\n+ const publicInstance = internalInstance._instance;\n+ if (publicInstance != null) {\n+ setIn(publicInstance.state, path, value);\n+ forceUpdate(publicInstance);\n+ }\n+ }\n+ }\n+\n+ function setInContext(id: number, path: Array<string | number>, value: any) {\n+ const internalInstance = idToInternalInstanceMap.get(id);\n+ if (internalInstance != null) {\n+ const publicInstance = internalInstance._instance;\n+ if (publicInstance != null) {\n+ setIn(publicInstance.context, path, value);\n+ forceUpdate(publicInstance);\n+ }\n+ }\n+ }\n+\n+ function setIn(obj: Object, path: Array<string | number>, value: any) {\n+ const last = path.pop();\n+ const parent = path.reduce(\n+ \/\/ $FlowFixMe\n+ (reduced, attr) => (reduced ? reduced[attr] : null),\n+ obj\n+ );\n+ if (parent) {\n+ \/\/ $FlowFixMe\n+ parent[last] = value;\n+ }\n+ }\n+\n+ \/\/ v16+ only features\n+ const getProfilingData = () => {\n+ throw new Error('getProfilingData not supported by this renderer');\n+ };\n+ const handleCommitFiberRoot = () => {\n+ throw new Error('handleCommitFiberRoot not supported by this renderer');\n+ };\n+ const handleCommitFiberUnmount = () => {\n+ throw new Error('handleCommitFiberUnmount not supported by this renderer');\n+ };\n+ const overrideSuspense = () => {\n+ throw new Error('overrideSuspense not supported by this renderer');\n+ };\n+ const setInHook = () => {\n+ throw new Error('setInHook not supported by this renderer');\n+ };\n+ const startProfiling = () => {\n+ throw new Error('startProfiling not supported by this renderer');\n+ };\n+ const stopProfiling = () => {\n+ throw new Error('stopProfiling not supported by this renderer');\n+ };\n+\n+ function getBestMatchForTrackedPath(): PathMatch | null {\n+ \/\/ Not implemented.\n+ return null;\n+ }\n+\n+ function getPathForElement(id: number): Array<PathFrame> | null {\n+ \/\/ Not implemented.\n+ return null;\n+ }\n+\n+ function updateComponentFilters(componentFilters: Array<ComponentFilter>) {\n+ \/\/ Not implemented.\n+ }\n+\n+ function setTrackedPath(path: Array<PathFrame> | null) {\n+ \/\/ Not implemented.\n+ }\n+\n+ function getOwnersList(id: number): Array<Owner> | null {\n+ \/\/ Not implemented.\n+ return null;\n+ }\n+\n+ return {\n+ cleanup,\n+ flushInitialOperations,\n+ getBestMatchForTrackedPath,\n+ getFiberIDForNative: getInternalIDForNative,\n+ getInstanceAndStyle,\n+ findNativeNodesForFiberID: (id: number) => {\n+ const nativeNode = findNativeNodeForInternalID(id);\n+ return nativeNode == null ? null : [nativeNode];\n+ },\n+ getOwnersList,\n+ getPathForElement,\n+ getProfilingData,\n+ handleCommitFiberRoot,\n+ handleCommitFiberUnmount,\n+ inspectElement,\n+ logElementToConsole,\n+ overrideSuspense,\n+ prepareViewElementSource,\n+ renderer,\n+ setInContext,\n+ setInHook,\n+ setInProps,\n+ setInState,\n+ setTrackedPath,\n+ startProfiling,\n+ stopProfiling,\n+ updateComponentFilters,\n+ };\n+}\ndiff --git a\/src\/backend\/legacy\/utils.js b\/src\/backend\/legacy\/utils.js\nnew file mode 100644\nindex 0000000000..9fbe307935\n--- \/dev\/null\n+++ b\/src\/backend\/legacy\/utils.js\n@@ -0,0 +1,39 @@\n+\/\/ @flow\n+\n+import type { InternalInstance } from '.\/renderer';\n+\n+export function decorate(object: Object, attr: string, fn: Function): Function {\n+ const old = object[attr];\n+ object[attr] = function(instance: InternalInstance) {\n+ return fn.call(this, old, arguments);\n+ };\n+ return old;\n+}\n+\n+export function decorateMany(\n+ source: Object,\n+ fns: { [attr: string]: Function }\n+): Object {\n+ const olds = {};\n+ for (const name in fns) {\n+ olds[name] = decorate(source, name, fns[name]);\n+ }\n+ return olds;\n+}\n+\n+export function restoreMany(source: Object, olds: Object): void {\n+ for (let name in olds) {\n+ source[name] = olds[name];\n+ }\n+}\n+\n+export function forceUpdate(instance: InternalInstance): void {\n+ if (typeof instance.forceUpdate === 'function') {\n+ instance.forceUpdate();\n+ } else if (\n+ instance.updater != null &&\n+ typeof instance.updater.enqueueForceUpdate === 'function'\n+ ) {\n+ instance.updater.enqueueForceUpdate(this, () => {}, 'forceUpdate');\n+ }\n+}\ndiff --git a\/src\/backend\/renderer.js b\/src\/backend\/renderer.js\nnew file mode 100644\nindex 0000000000..63aae20c87\n--- \/dev\/null\n+++ b\/src\/backend\/renderer.js\n@@ -0,0 +1,3006 @@\n+\/\/ @flow\n+\n+import { gte } from 'semver';\n+import {\n+ ComponentFilterDisplayName,\n+ ComponentFilterElementType,\n+ ComponentFilterHOC,\n+ ComponentFilterLocation,\n+ ElementTypeClass,\n+ ElementTypeContext,\n+ ElementTypeFunction,\n+ ElementTypeForwardRef,\n+ ElementTypeHostComponent,\n+ ElementTypeMemo,\n+ ElementTypeOtherOrUnknown,\n+ ElementTypeProfiler,\n+ ElementTypeRoot,\n+ ElementTypeSuspense,\n+} from 'src\/types';\n+import {\n+ getDisplayName,\n+ getDefaultComponentFilters,\n+ getInObject,\n+ getUID,\n+ setInObject,\n+ utfEncodeString,\n+} from 'src\/utils';\n+import { sessionStorageGetItem } from 'src\/storage';\n+import { cleanForBridge, copyWithSet } from '.\/utils';\n+import {\n+ __DEBUG__,\n+ SESSION_STORAGE_RELOAD_AND_PROFILE_KEY,\n+ SESSION_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY,\n+ TREE_OPERATION_ADD,\n+ TREE_OPERATION_REMOVE,\n+ TREE_OPERATION_REORDER_CHILDREN,\n+ TREE_OPERATION_UPDATE_TREE_BASE_DURATION,\n+} from '..\/constants';\n+import { inspectHooksOfFiber } from '.\/ReactDebugHooks';\n+import {\n+ patch as patchConsole,\n+ registerRenderer as registerRendererWithConsole,\n+} from '.\/console';\n+\n+import type {\n+ ChangeDescription,\n+ CommitDataBackend,\n+ DevToolsHook,\n+ Fiber,\n+ InspectedElement,\n+ InspectedElementPayload,\n+ InstanceAndStyle,\n+ Owner,\n+ PathFrame,\n+ PathMatch,\n+ ProfilingDataBackend,\n+ ProfilingDataForRootBackend,\n+ ReactRenderer,\n+ RendererInterface,\n+} from '.\/types';\n+import type { Interaction } from 'src\/devtools\/views\/Profiler\/types';\n+import type { ComponentFilter, ElementType } from 'src\/types';\n+\n+type getDisplayNameForFiberType = (fiber: Fiber) => string | null;\n+type getTypeSymbolType = (type: any) => Symbol | number;\n+\n+type ReactSymbolsType = {\n+ CONCURRENT_MODE_NUMBER: number,\n+ CONCURRENT_MODE_SYMBOL_STRING: string,\n+ DEPRECATED_ASYNC_MODE_SYMBOL_STRING: string,\n+ CONTEXT_CONSUMER_NUMBER: number,\n+ CONTEXT_CONSUMER_SYMBOL_STRING: string,\n+ CONTEXT_PROVIDER_NUMBER: number,\n+ CONTEXT_PROVIDER_SYMBOL_STRING: string,\n+ EVENT_COMPONENT_NUMBER: number,\n+ EVENT_COMPONENT_STRING: string,\n+ EVENT_TARGET_NUMBER: number,\n+ EVENT_TARGET_STRING: string,\n+ EVENT_TARGET_TOUCH_HIT_NUMBER: number,\n+ EVENT_TARGET_TOUCH_HIT_STRING: string,\n+ FORWARD_REF_NUMBER: number,\n+ FORWARD_REF_SYMBOL_STRING: string,\n+ MEMO_NUMBER: number,\n+ MEMO_SYMBOL_STRING: string,\n+ PROFILER_NUMBER: number,\n+ PROFILER_SYMBOL_STRING: string,\n+ STRICT_MODE_NUMBER: number,\n+ STRICT_MODE_SYMBOL_STRING: string,\n+ SUSPENSE_NUMBER: number,\n+ SUSPENSE_SYMBOL_STRING: string,\n+ DEPRECATED_PLACEHOLDER_SYMBOL_STRING: string,\n+};\n+\n+type ReactPriorityLevelsType = {|\n+ ImmediatePriority: number,\n+ UserBlockingPriority: number,\n+ NormalPriority: number,\n+ LowPriority: number,\n+ IdlePriority: number,\n+ NoPriority: number,\n+|};\n+\n+type ReactTypeOfWorkType = {|\n+ ClassComponent: number,\n+ ContextConsumer: number,\n+ ContextProvider: number,\n+ CoroutineComponent: number,\n+ CoroutineHandlerPhase: number,\n+ DehydratedSuspenseComponent: number,\n+ ForwardRef: number,\n+ Fragment: number,\n+ FunctionComponent: number,\n+ HostComponent: number,\n+ HostPortal: number,\n+ HostRoot: number,\n+ HostText: number,\n+ IncompleteClassComponent: number,\n+ IndeterminateComponent: number,\n+ LazyComponent: number,\n+ MemoComponent: number,\n+ Mode: number,\n+ Profiler: number,\n+ SimpleMemoComponent: number,\n+ SuspenseComponent: number,\n+ YieldComponent: number,\n+|};\n+\n+type ReactTypeOfSideEffectType = {|\n+ NoEffect: number,\n+ PerformedWork: number,\n+ Placement: number,\n+|};\n+\n+\/\/ Some environments (e.g. React Native \/ Hermes) don't support the performace API yet.\n+const getCurrentTime =\n+ typeof performance === 'object' && typeof performance.now === 'function'\n+ ? () => performance.now()\n+ : () => Date.now();\n+\n+export function getInternalReactConstants(\n+ version: string\n+): {|\n+ getDisplayNameForFiber: getDisplayNameForFiberType,\n+ getTypeSymbol: getTypeSymbolType,\n+ ReactPriorityLevels: ReactPriorityLevelsType,\n+ ReactSymbols: ReactSymbolsType,\n+ ReactTypeOfSideEffect: ReactTypeOfSideEffectType,\n+ ReactTypeOfWork: ReactTypeOfWorkType,\n+|} {\n+ const ReactSymbols: ReactSymbolsType = {\n+ CONCURRENT_MODE_NUMBER: 0xeacf,\n+ CONCURRENT_MODE_SYMBOL_STRING: 'Symbol(react.concurrent_mode)',\n+ DEPRECATED_ASYNC_MODE_SYMBOL_STRING: 'Symbol(react.async_mode)',\n+ CONTEXT_CONSUMER_NUMBER: 0xeace,\n+ CONTEXT_CONSUMER_SYMBOL_STRING: 'Symbol(react.context)',\n+ CONTEXT_PROVIDER_NUMBER: 0xeacd,\n+ CONTEXT_PROVIDER_SYMBOL_STRING: 'Symbol(react.provider)',\n+ EVENT_COMPONENT_NUMBER: 0xead5,\n+ EVENT_COMPONENT_STRING: 'Symbol(react.event_component)',\n+ EVENT_TARGET_NUMBER: 0xead6,\n+ EVENT_TARGET_STRING: 'Symbol(react.event_target)',\n+ EVENT_TARGET_TOUCH_HIT_NUMBER: 0xead7,\n+ EVENT_TARGET_TOUCH_HIT_STRING: 'Symbol(react.event_target.touch_hit)',\n+ FORWARD_REF_NUMBER: 0xead0,\n+ FORWARD_REF_SYMBOL_STRING: 'Symbol(react.forward_ref)',\n+ MEMO_NUMBER: 0xead3,\n+ MEMO_SYMBOL_STRING: 'Symbol(react.memo)',\n+ PROFILER_NUMBER: 0xead2,\n+ PROFILER_SYMBOL_STRING: 'Symbol(react.profiler)',\n+ STRICT_MODE_NUMBER: 0xeacc,\n+ STRICT_MODE_SYMBOL_STRING: 'Symbol(react.strict_mode)',\n+ SUSPENSE_NUMBER: 0xead1,\n+ SUSPENSE_SYMBOL_STRING: 'Symbol(react.suspense)',\n+ DEPRECATED_PLACEHOLDER_SYMBOL_STRING: 'Symbol(react.placeholder)',\n+ };\n+\n+ const ReactTypeOfSideEffect: ReactTypeOfSideEffectType = {\n+ NoEffect: 0b00,\n+ PerformedWork: 0b01,\n+ Placement: 0b10,\n+ };\n+\n+ \/\/ **********************************************************\n+ \/\/ The section below is copied from files in React repo.\n+ \/\/ Keep it in sync, and add version guards if it changes.\n+ \/\/\n+ \/\/ Technically these priority levels are invalid for versions before 16.9,\n+ \/\/ but 16.9 is the first version to report priority level to DevTools,\n+ \/\/ so we can avoid checking for earlier versions and support pre-16.9 canary releases in the process.\n+ const ReactPriorityLevels: ReactPriorityLevelsType = {\n+ ImmediatePriority: 99,\n+ UserBlockingPriority: 98,\n+ NormalPriority: 97,\n+ LowPriority: 96,\n+ IdlePriority: 95,\n+ NoPriority: 90,\n+ };\n+\n+ let ReactTypeOfWork: ReactTypeOfWorkType = ((null: any): ReactTypeOfWorkType);\n+\n+ \/\/ **********************************************************\n+ \/\/ The section below is copied from files in React repo.\n+ \/\/ Keep it in sync, and add version guards if it changes.\n+ if (gte(version, '16.6.0-beta.0')) {\n+ ReactTypeOfWork = {\n+ ClassComponent: 1,\n+ ContextConsumer: 9,\n+ ContextProvider: 10,\n+ CoroutineComponent: -1, \/\/ Removed\n+ CoroutineHandlerPhase: -1, \/\/ Removed\n+ DehydratedSuspenseComponent: 18, \/\/ Behind a flag\n+ ForwardRef: 11,\n+ Fragment: 7,\n+ FunctionComponent: 0,\n+ HostComponent: 5,\n+ HostPortal: 4,\n+ HostRoot: 3,\n+ HostText: 6,\n+ IncompleteClassComponent: 17,\n+ IndeterminateComponent: 2,\n+ LazyComponent: 16,\n+ MemoComponent: 14,\n+ Mode: 8,\n+ Profiler: 12,\n+ SimpleMemoComponent: 15,\n+ SuspenseComponent: 13,\n+ YieldComponent: -1, \/\/ Removed\n+ };\n+ } else if (gte(version, '16.4.3-alpha')) {\n+ ReactTypeOfWork = {\n+ ClassComponent: 2,\n+ ContextConsumer: 11,\n+ ContextProvider: 12,\n+ CoroutineComponent: -1, \/\/ Removed\n+ CoroutineHandlerPhase: -1, \/\/ Removed\n+ DehydratedSuspenseComponent: -1, \/\/ Doesn't exist yet\n+ ForwardRef: 13,\n+ Fragment: 9,\n+ FunctionComponent: 0,\n+ HostComponent: 7,\n+ HostPortal: 6,\n+ HostRoot: 5,\n+ HostText: 8,\n+ IncompleteClassComponent: -1, \/\/ Doesn't exist yet\n+ IndeterminateComponent: 4,\n+ LazyComponent: -1, \/\/ Doesn't exist yet\n+ MemoComponent: -1, \/\/ Doesn't exist yet\n+ Mode: 10,\n+ Profiler: 15,\n+ SimpleMemoComponent: -1, \/\/ Doesn't exist yet\n+ SuspenseComponent: 16,\n+ YieldComponent: -1, \/\/ Removed\n+ };\n+ } else {\n+ ReactTypeOfWork = {\n+ ClassComponent: 2,\n+ ContextConsumer: 12,\n+ ContextProvider: 13,\n+ CoroutineComponent: 7,\n+ CoroutineHandlerPhase: 8,\n+ DehydratedSuspenseComponent: -1, \/\/ Doesn't exist yet\n+ ForwardRef: 14,\n+ Fragment: 10,\n+ FunctionComponent: 1,\n+ HostComponent: 5,\n+ HostPortal: 4,\n+ HostRoot: 3,\n+ HostText: 6,\n+ IncompleteClassComponent: -1, \/\/ Doesn't exist yet\n+ IndeterminateComponent: 0,\n+ LazyComponent: -1, \/\/ Doesn't exist yet\n+ MemoComponent: -1, \/\/ Doesn't exist yet\n+ Mode: 11,\n+ Profiler: 15,\n+ SimpleMemoComponent: -1, \/\/ Doesn't exist yet\n+ SuspenseComponent: 16,\n+ YieldComponent: 9,\n+ };\n+ }\n+ \/\/ **********************************************************\n+ \/\/ End of copied code.\n+ \/\/ **********************************************************\n+\n+ function getTypeSymbol(type: any): Symbol | number {\n+ const symbolOrNumber =\n+ typeof type === 'object' && type !== null ? type.$$typeof : type;\n+\n+ return typeof symbolOrNumber === 'symbol'\n+ ? symbolOrNumber.toString()\n+ : symbolOrNumber;\n+ }\n+\n+ const {\n+ ClassComponent,\n+ IncompleteClassComponent,\n+ FunctionComponent,\n+ IndeterminateComponent,\n+ ForwardRef,\n+ HostRoot,\n+ HostComponent,\n+ HostPortal,\n+ HostText,\n+ Fragment,\n+ MemoComponent,\n+ SimpleMemoComponent,\n+ } = ReactTypeOfWork;\n+\n+ const {\n+ CONCURRENT_MODE_NUMBER,\n+ CONCURRENT_MODE_SYMBOL_STRING,\n+ DEPRECATED_ASYNC_MODE_SYMBOL_STRING,\n+ CONTEXT_PROVIDER_NUMBER,\n+ CONTEXT_PROVIDER_SYMBOL_STRING,\n+ CONTEXT_CONSUMER_NUMBER,\n+ CONTEXT_CONSUMER_SYMBOL_STRING,\n+ STRICT_MODE_NUMBER,\n+ STRICT_MODE_SYMBOL_STRING,\n+ SUSPENSE_NUMBER,\n+ SUSPENSE_SYMBOL_STRING,\n+ DEPRECATED_PLACEHOLDER_SYMBOL_STRING,\n+ PROFILER_NUMBER,\n+ PROFILER_SYMBOL_STRING,\n+ } = ReactSymbols;\n+\n+ \/\/ NOTICE Keep in sync with shouldFilterFiber() and other get*ForFiber methods\n+ function getDisplayNameForFiber(fiber: Fiber): string | null {\n+ const { elementType, type, tag } = fiber;\n+\n+ \/\/ This is to support lazy components with a Promise as the type.\n+ \/\/ see https:\/\/github.com\/facebook\/react\/pull\/13397\n+ let resolvedType = type;\n+ if (typeof type === 'object' && type !== null) {\n+ if (typeof type.then === 'function') {\n+ resolvedType = type._reactResult;\n+ }\n+ }\n+\n+ let resolvedContext: any = null;\n+\n+ switch (tag) {\n+ case ClassComponent:\n+ case IncompleteClassComponent:\n+ return getDisplayName(resolvedType);\n+ case FunctionComponent:\n+ case IndeterminateComponent:\n+ return getDisplayName(resolvedType);\n+ case ForwardRef:\n+ return (\n+ resolvedType.displayName ||\n+ getDisplayName(resolvedType.render, 'Anonymous')\n+ );\n+ case HostRoot:\n+ return null;\n+ case HostComponent:\n+ return type;\n+ case HostPortal:\n+ case HostText:\n+ case Fragment:\n+ return null;\n+ case MemoComponent:\n+ case SimpleMemoComponent:\n+ if (elementType.displayName) {\n+ return elementType.displayName;\n+ } else {\n+ return getDisplayName(type, 'Anonymous');\n+ }\n+ default:\n+ const typeSymbol = getTypeSymbol(type);\n+\n+ switch (typeSymbol) {\n+ case CONCURRENT_MODE_NUMBER:\n+ case CONCURRENT_MODE_SYMBOL_STRING:\n+ case DEPRECATED_ASYNC_MODE_SYMBOL_STRING:\n+ return null;\n+ case CONTEXT_PROVIDER_NUMBER:\n+ case CONTEXT_PROVIDER_SYMBOL_STRING:\n+ \/\/ 16.3.0 exposed the context object as \"context\"\n+ \/\/ PR #12501 changed it to \"_context\" for 16.3.1+\n+ \/\/ NOTE Keep in sync with inspectElementRaw()\n+ resolvedContext = fiber.type._context || fiber.type.context;\n+ return `${resolvedContext.displayName || 'Context'}.Provider`;\n+ case CONTEXT_CONSUMER_NUMBER:\n+ case CONTEXT_CONSUMER_SYMBOL_STRING:\n+ \/\/ 16.3-16.5 read from \"type\" because the Consumer is the actual context object.\n+ \/\/ 16.6+ should read from \"type._context\" because Consumer can be different (in DEV).\n+ \/\/ NOTE Keep in sync with inspectElementRaw()\n+ resolvedContext = fiber.type._context || fiber.type;\n+\n+ \/\/ NOTE: TraceUpdatesBackendManager depends on the name ending in '.Consumer'\n+ \/\/ If you change the name, figure out a more resilient way to detect it.\n+ return `${resolvedContext.displayName || 'Context'}.Consumer`;\n+ case STRICT_MODE_NUMBER:\n+ case STRICT_MODE_SYMBOL_STRING:\n+ return null;\n+ case SUSPENSE_NUMBER:\n+ case SUSPENSE_SYMBOL_STRING:\n+ case DEPRECATED_PLACEHOLDER_SYMBOL_STRING:\n+ return 'Suspense';\n+ case PROFILER_NUMBER:\n+ case PROFILER_SYMBOL_STRING:\n+ return `Profiler(${fiber.memoizedProps.id})`;\n+ default:\n+ \/\/ Unknown element type.\n+ \/\/ This may mean a new element type that has not yet been added to DevTools.\n+ return null;\n+ }\n+ }\n+ }\n+\n+ return {\n+ getDisplayNameForFiber,\n+ getTypeSymbol,\n+ ReactPriorityLevels,\n+ ReactTypeOfWork,\n+ ReactSymbols,\n+ ReactTypeOfSideEffect,\n+ };\n+}\n+\n+export function attach(\n+ hook: DevToolsHook,\n+ rendererID: number,\n+ renderer: ReactRenderer,\n+ global: Object\n+): RendererInterface {\n+ const {\n+ getDisplayNameForFiber,\n+ getTypeSymbol,\n+ ReactPriorityLevels,\n+ ReactTypeOfWork,\n+ ReactSymbols,\n+ ReactTypeOfSideEffect,\n+ } = getInternalReactConstants(renderer.version);\n+ const { NoEffect, PerformedWork, Placement } = ReactTypeOfSideEffect;\n+ const {\n+ FunctionComponent,\n+ ClassComponent,\n+ ContextConsumer,\n+ DehydratedSuspenseComponent,\n+ Fragment,\n+ ForwardRef,\n+ HostRoot,\n+ HostPortal,\n+ HostComponent,\n+ HostText,\n+ IncompleteClassComponent,\n+ IndeterminateComponent,\n+ MemoComponent,\n+ SimpleMemoComponent,\n+ SuspenseComponent,\n+ } = ReactTypeOfWork;\n+ const {\n+ ImmediatePriority,\n+ UserBlockingPriority,\n+ NormalPriority,\n+ LowPriority,\n+ IdlePriority,\n+ NoPriority,\n+ } = ReactPriorityLevels;\n+ const {\n+ CONCURRENT_MODE_NUMBER,\n+ CONCURRENT_MODE_SYMBOL_STRING,\n+ DEPRECATED_ASYNC_MODE_SYMBOL_STRING,\n+ CONTEXT_CONSUMER_NUMBER,\n+ CONTEXT_CONSUMER_SYMBOL_STRING,\n+ CONTEXT_PROVIDER_NUMBER,\n+ CONTEXT_PROVIDER_SYMBOL_STRING,\n+ PROFILER_NUMBER,\n+ PROFILER_SYMBOL_STRING,\n+ STRICT_MODE_NUMBER,\n+ STRICT_MODE_SYMBOL_STRING,\n+ SUSPENSE_NUMBER,\n+ SUSPENSE_SYMBOL_STRING,\n+ DEPRECATED_PLACEHOLDER_SYMBOL_STRING,\n+ } = ReactSymbols;\n+\n+ const {\n+ overrideHookState,\n+ overrideProps,\n+ setSuspenseHandler,\n+ scheduleUpdate,\n+ } = renderer;\n+ const supportsTogglingSuspense =\n+ typeof setSuspenseHandler === 'function' &&\n+ typeof scheduleUpdate === 'function';\n+\n+ \/\/ Patching the console enables DevTools to do a few useful things:\n+ \/\/ * Append component stacks to warnings and error messages\n+ \/\/ * Disable logging during re-renders to inspect hooks (see inspectHooksOfFiber)\n+ \/\/\n+ \/\/ Don't patch in test environments because we don't want to interfere with Jest's own console overrides.\n+ if (process.env.NODE_ENV !== 'test') {\n+ registerRendererWithConsole(renderer);\n+\n+ \/\/ The renderer interface can't read this preference directly,\n+ \/\/ because it is stored in localStorage within the context of the extension.\n+ \/\/ It relies on the extension to pass the preference through via the global.\n+ if (window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ !== false) {\n+ patchConsole();\n+ }\n+ }\n+\n+ const debug = (name: string, fiber: Fiber, parentFiber: ?Fiber): void => {\n+ if (__DEBUG__) {\n+ const displayName = getDisplayNameForFiber(fiber) || 'null';\n+ const parentDisplayName =\n+ (parentFiber != null && getDisplayNameForFiber(parentFiber)) || 'null';\n+ \/\/ NOTE: calling getFiberID or getPrimaryFiber is unsafe here\n+ \/\/ because it will put them in the map. For now, we'll omit them.\n+ \/\/ TODO: better debugging story for this.\n+ console.log(\n+ `[renderer] %c${name} %c${displayName} %c${\n+ parentFiber ? parentDisplayName : ''\n+ }`,\n+ 'color: red; font-weight: bold;',\n+ 'color: blue;',\n+ 'color: purple;'\n+ );\n+ }\n+ };\n+\n+ \/\/ Configurable Components tree filters.\n+ const hideElementsWithDisplayNames: Set<RegExp> = new Set();\n+ const hideElementsWithPaths: Set<RegExp> = new Set();\n+ const hideElementsWithTypes: Set<ElementType> = new Set();\n+\n+ function applyComponentFilters(componentFilters: Array<ComponentFilter>) {\n+ hideElementsWithTypes.clear();\n+ hideElementsWithDisplayNames.clear();\n+ hideElementsWithPaths.clear();\n+\n+ componentFilters.forEach(componentFilter => {\n+ if (!componentFilter.isEnabled) {\n+ return;\n+ }\n+\n+ switch (componentFilter.type) {\n+ case ComponentFilterDisplayName:\n+ if (componentFilter.isValid && componentFilter.value !== '') {\n+ hideElementsWithDisplayNames.add(\n+ new RegExp(componentFilter.value, 'i')\n+ );\n+ }\n+ break;\n+ case ComponentFilterElementType:\n+ hideElementsWithTypes.add(componentFilter.value);\n+ break;\n+ case ComponentFilterLocation:\n+ if (componentFilter.isValid && componentFilter.value !== '') {\n+ hideElementsWithPaths.add(new RegExp(componentFilter.value, 'i'));\n+ }\n+ break;\n+ case ComponentFilterHOC:\n+ hideElementsWithDisplayNames.add(new RegExp('\\\\('));\n+ break;\n+ default:\n+ console.warn(\n+ `Invalid component filter type \"${componentFilter.type}\"`\n+ );\n+ break;\n+ }\n+ });\n+ }\n+\n+ \/\/ The renderer interface can't read saved component filters directly,\n+ \/\/ because they are stored in localStorage within the context of the extension.\n+ \/\/ Instead it relies on the extension to pass filters through.\n+ if (window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ != null) {\n+ applyComponentFilters(window.__REACT_DEVTOOLS_COMPONENT_FILTERS__);\n+ } else {\n+ \/\/ Unfortunately this feature is not expected to work for React Native for now.\n+ \/\/ It would be annoying for us to spam YellowBox warnings with unactionable stuff,\n+ \/\/ so for now just skip this message...\n+ \/\/console.warn('⚛️ DevTools: Could not locate saved component filters');\n+\n+ \/\/ Fallback to assuming the default filters in this case.\n+ applyComponentFilters(getDefaultComponentFilters());\n+ }\n+\n+ \/\/ If necessary, we can revisit optimizing this operation.\n+ \/\/ For example, we could add a new recursive unmount tree operation.\n+ \/\/ The unmount operations are already significantly smaller than mount opreations though.\n+ \/\/ This is something to keep in mind for later.\n+ function updateComponentFilters(componentFilters: Array<ComponentFilter>) {\n+ if (isProfiling) {\n+ \/\/ Re-mounting a tree while profiling is in progress might break a lot of assumptions.\n+ \/\/ If necessary, we could support this- but it doesn't seem like a necessary use case.\n+ throw Error('Cannot modify filter preferences while profiling');\n+ }\n+\n+ \/\/ Recursively unmount all roots.\n+ hook.getFiberRoots(rendererID).forEach(root => {\n+ currentRootID = getFiberID(getPrimaryFiber(root.current));\n+ unmountFiberChildrenRecursively(root.current);\n+ recordUnmount(root.current, false);\n+ currentRootID = -1;\n+ });\n+\n+ applyComponentFilters(componentFilters);\n+\n+ \/\/ Reset psuedo counters so that new path selections will be persisted.\n+ rootDisplayNameCounter.clear();\n+\n+ \/\/ Recursively re-mount all roots with new filter criteria applied.\n+ hook.getFiberRoots(rendererID).forEach(root => {\n+ currentRootID = getFiberID(getPrimaryFiber(root.current));\n+ setRootPseudoKey(currentRootID, root.current);\n+ mountFiberRecursively(root.current, null);\n+ flushPendingEvents(root);\n+ currentRootID = -1;\n+ });\n+ }\n+\n+ \/\/ NOTICE Keep in sync with get*ForFiber methods\n+ function shouldFilterFiber(fiber: Fiber): boolean {\n+ const { _debugSource, tag, type } = fiber;\n+\n+ switch (tag) {\n+ case DehydratedSuspenseComponent:\n+ \/\/ TODO: ideally we would show dehydrated Suspense immediately.\n+ \/\/ However, it has some special behavior (like disconnecting\n+ \/\/ an alternate and turning into real Suspense) which breaks DevTools.\n+ \/\/ For now, ignore it, and only show it once it gets hydrated.\n+ \/\/ https:\/\/github.com\/bvaughn\/react-devtools-experimental\/issues\/197\n+ return true;\n+ case HostPortal:\n+ case HostText:\n+ case Fragment:\n+ return true;\n+ case HostRoot:\n+ \/\/ It is never valid to filter the root element.\n+ return false;\n+ default:\n+ const typeSymbol = getTypeSymbol(type);\n+\n+ switch (typeSymbol) {\n+ case CONCURRENT_MODE_NUMBER:\n+ case CONCURRENT_MODE_SYMBOL_STRING:\n+ case DEPRECATED_ASYNC_MODE_SYMBOL_STRING:\n+ case STRICT_MODE_NUMBER:\n+ case STRICT_MODE_SYMBOL_STRING:\n+ return true;\n+ default:\n+ break;\n+ }\n+ }\n+\n+ const elementType = getElementTypeForFiber(fiber);\n+ if (hideElementsWithTypes.has(elementType)) {\n+ return true;\n+ }\n+\n+ if (hideElementsWithDisplayNames.size > 0) {\n+ const displayName = getDisplayNameForFiber(fiber);\n+ if (displayName != null) {\n+ for (let displayNameRegExp of hideElementsWithDisplayNames) {\n+ if (displayNameRegExp.test(displayName)) {\n+ return true;\n+ }\n+ }\n+ }\n+ }\n+\n+ if (_debugSource != null && hideElementsWithPaths.size > 0) {\n+ const { fileName } = _debugSource;\n+ for (let pathRegExp of hideElementsWithPaths) {\n+ if (pathRegExp.test(fileName)) {\n+ return true;\n+ }\n+ }\n+ }\n+\n+ return false;\n+ }\n+ \/\/ NOTICE Keep in sync with shouldFilterFiber() and other get*ForFiber methods\n+ function getElementTypeForFiber(fiber: Fiber): ElementType {\n+ const { type, tag } = fiber;\n+\n+ switch (tag) {\n+ case ClassComponent:\n+ case IncompleteClassComponent:\n+ return ElementTypeClass;\n+ case FunctionComponent:\n+ case IndeterminateComponent:\n+ return ElementTypeFunction;\n+ case ForwardRef:\n+ return ElementTypeForwardRef;\n+ case HostRoot:\n+ return ElementTypeRoot;\n+ case HostComponent:\n+ return ElementTypeHostComponent;\n+ case HostPortal:\n+ case HostText:\n+ case Fragment:\n+ return ElementTypeOtherOrUnknown;\n+ case MemoComponent:\n+ case SimpleMemoComponent:\n+ return ElementTypeMemo;\n+ default:\n+ const typeSymbol = getTypeSymbol(type);\n+\n+ switch (typeSymbol) {\n+ case CONCURRENT_MODE_NUMBER:\n+ case CONCURRENT_MODE_SYMBOL_STRING:\n+ case DEPRECATED_ASYNC_MODE_SYMBOL_STRING:\n+ return ElementTypeOtherOrUnknown;\n+ case CONTEXT_PROVIDER_NUMBER:\n+ case CONTEXT_PROVIDER_SYMBOL_STRING:\n+ return ElementTypeContext;\n+ case CONTEXT_CONSUMER_NUMBER:\n+ case CONTEXT_CONSUMER_SYMBOL_STRING:\n+ return ElementTypeContext;\n+ case STRICT_MODE_NUMBER:\n+ case STRICT_MODE_SYMBOL_STRING:\n+ return ElementTypeOtherOrUnknown;\n+ case SUSPENSE_NUMBER:\n+ case SUSPENSE_SYMBOL_STRING:\n+ case DEPRECATED_PLACEHOLDER_SYMBOL_STRING:\n+ return ElementTypeSuspense;\n+ case PROFILER_NUMBER:\n+ case PROFILER_SYMBOL_STRING:\n+ return ElementTypeProfiler;\n+ default:\n+ return ElementTypeOtherOrUnknown;\n+ }\n+ }\n+ }\n+\n+ \/\/ This is a slightly annoying indirection.\n+ \/\/ It is currently necessary because DevTools wants to use unique objects as keys for instances.\n+ \/\/ However fibers have two versions.\n+ \/\/ We use this set to remember first encountered fiber for each conceptual instance.\n+ function getPrimaryFiber(fiber: Fiber): Fiber {\n+ if (primaryFibers.has(fiber)) {\n+ return fiber;\n+ }\n+ const { alternate } = fiber;\n+ if (alternate != null && primaryFibers.has(alternate)) {\n+ return alternate;\n+ }\n+ primaryFibers.add(fiber);\n+ return fiber;\n+ }\n+\n+ const fiberToIDMap: Map<Fiber, number> = new Map();\n+ const idToFiberMap: Map<number, Fiber> = new Map();\n+ const primaryFibers: Set<Fiber> = new Set();\n+\n+ \/\/ When profiling is supported, we store the latest tree base durations for each Fiber.\n+ \/\/ This is so that we can quickly capture a snapshot of those values if profiling starts.\n+ \/\/ If we didn't store these values, we'd have to crawl the tree when profiling started,\n+ \/\/ and use a slow path to find each of the current Fibers.\n+ const idToTreeBaseDurationMap: Map<number, number> = new Map();\n+\n+ \/\/ When profiling is supported, we store the latest tree base durations for each Fiber.\n+ \/\/ This map enables us to filter these times by root when sending them to the frontend.\n+ const idToRootMap: Map<number, number> = new Map();\n+\n+ \/\/ When a mount or update is in progress, this value tracks the root that is being operated on.\n+ let currentRootID: number = -1;\n+\n+ function getFiberID(primaryFiber: Fiber): number {\n+ if (!fiberToIDMap.has(primaryFiber)) {\n+ const id = getUID();\n+ fiberToIDMap.set(primaryFiber, id);\n+ idToFiberMap.set(id, primaryFiber);\n+ }\n+ return ((fiberToIDMap.get(primaryFiber): any): number);\n+ }\n+\n+ function getChangeDescription(\n+ prevFiber: Fiber | null,\n+ nextFiber: Fiber\n+ ): ChangeDescription | null {\n+ switch (getElementTypeForFiber(nextFiber)) {\n+ case ElementTypeClass:\n+ case ElementTypeFunction:\n+ case ElementTypeMemo:\n+ case ElementTypeForwardRef:\n+ if (prevFiber === null) {\n+ return {\n+ context: null,\n+ didHooksChange: false,\n+ isFirstMount: true,\n+ props: null,\n+ state: null,\n+ };\n+ } else {\n+ return {\n+ context: getContextChangedKeys(nextFiber),\n+ didHooksChange: didHooksChange(\n+ prevFiber.memoizedState,\n+ nextFiber.memoizedState\n+ ),\n+ isFirstMount: false,\n+ props: getChangedKeys(\n+ prevFiber.memoizedProps,\n+ nextFiber.memoizedProps\n+ ),\n+ state: getChangedKeys(\n+ prevFiber.memoizedState,\n+ nextFiber.memoizedState\n+ ),\n+ };\n+ }\n+ default:\n+ return null;\n+ }\n+ }\n+\n+ function updateContextsForFiber(fiber: Fiber) {\n+ switch (getElementTypeForFiber(fiber)) {\n+ case ElementTypeClass:\n+ if (idToContextsMap !== null) {\n+ const id = getFiberID(getPrimaryFiber(fiber));\n+ const contexts = getContextsForFiber(fiber);\n+ if (contexts !== null) {\n+ idToContextsMap.set(id, contexts);\n+ }\n+ }\n+ break;\n+ default:\n+ break;\n+ }\n+ }\n+\n+ \/\/ Differentiates between a null context value and no context.\n+ const NO_CONTEXT = {};\n+\n+ function getContextsForFiber(fiber: Fiber): [Object, any] | null {\n+ switch (getElementTypeForFiber(fiber)) {\n+ case ElementTypeClass:\n+ const instance = fiber.stateNode;\n+ let legacyContext = NO_CONTEXT;\n+ let modernContext = NO_CONTEXT;\n+ if (instance != null) {\n+ if (\n+ instance.constructor &&\n+ instance.constructor.contextType != null\n+ ) {\n+ modernContext = instance.context;\n+ } else {\n+ legacyContext = instance.context;\n+ if (legacyContext && Object.keys(legacyContext).length === 0) {\n+ legacyContext = NO_CONTEXT;\n+ }\n+ }\n+ }\n+ return [legacyContext, modernContext];\n+ default:\n+ return null;\n+ }\n+ }\n+\n+ \/\/ Record all contexts at the time profiling is started.\n+ \/\/ Fibers only store the current context value,\n+ \/\/ so we need to track them separatenly in order to determine changed keys.\n+ function crawlToInitializeContextsMap(fiber: Fiber) {\n+ updateContextsForFiber(fiber);\n+ let current = fiber.child;\n+ while (current !== null) {\n+ crawlToInitializeContextsMap(current);\n+ current = current.sibling;\n+ }\n+ }\n+\n+ function getContextChangedKeys(fiber: Fiber): null | boolean | Array<string> {\n+ switch (getElementTypeForFiber(fiber)) {\n+ case ElementTypeClass:\n+ if (idToContextsMap !== null) {\n+ const id = getFiberID(getPrimaryFiber(fiber));\n+ const prevContexts = idToContextsMap.has(id)\n+ ? idToContextsMap.get(id)\n+ : null;\n+ const nextContexts = getContextsForFiber(fiber);\n+\n+ if (prevContexts == null || nextContexts == null) {\n+ return null;\n+ }\n+\n+ const [prevLegacyContext, prevModernContext] = prevContexts;\n+ const [nextLegacyContext, nextModernContext] = nextContexts;\n+\n+ if (nextLegacyContext !== NO_CONTEXT) {\n+ return getChangedKeys(prevLegacyContext, nextLegacyContext);\n+ } else if (nextModernContext !== NO_CONTEXT) {\n+ return prevModernContext !== nextModernContext;\n+ }\n+ }\n+ break;\n+ default:\n+ break;\n+ }\n+ return null;\n+ }\n+\n+ function didHooksChange(prev: any, next: any): boolean {\n+ if (next == null) {\n+ return false;\n+ }\n+\n+ \/\/ We can't report anything meaningful for hooks changes.\n+ if (\n+ next.hasOwnProperty('baseState') &&\n+ next.hasOwnProperty('memoizedState') &&\n+ next.hasOwnProperty('next') &&\n+ next.hasOwnProperty('queue')\n+ ) {\n+ while (next !== null) {\n+ if (next.memoizedState !== prev.memoizedState) {\n+ return true;\n+ } else {\n+ next = next.next;\n+ prev = prev.next;\n+ }\n+ }\n+ }\n+\n+ return false;\n+ }\n+\n+ function getChangedKeys(prev: any, next: any): null | Array<string> {\n+ if (prev == null || next == null) {\n+ return null;\n+ }\n+\n+ \/\/ We can't report anything meaningful for hooks changes.\n+ if (\n+ next.hasOwnProperty('baseState') &&\n+ next.hasOwnProperty('memoizedState') &&\n+ next.hasOwnProperty('next') &&\n+ next.hasOwnProperty('queue')\n+ ) {\n+ return null;\n+ }\n+\n+ const keys = new Set([...Object.keys(prev), ...Object.keys(next)]);\n+ const changedKeys = [];\n+ for (let key of keys) {\n+ if (prev[key] !== next[key]) {\n+ changedKeys.push(key);\n+ }\n+ }\n+\n+ return changedKeys;\n+ }\n+\n+ \/\/ eslint-disable-next-line no-unused-vars\n+ function didFiberRender(prevFiber: Fiber, nextFiber: Fiber): boolean {\n+ switch (nextFiber.tag) {\n+ case ClassComponent:\n+ case FunctionComponent:\n+ case ContextConsumer:\n+ case MemoComponent:\n+ case SimpleMemoComponent:\n+ \/\/ For types that execute user code, we check PerformedWork effect.\n+ \/\/ We don't reflect bailouts (either referential or sCU) in DevTools.\n+ \/\/ eslint-disable-next-line no-bitwise\n+ return (nextFiber.effectTag & PerformedWork) === PerformedWork;\n+ \/\/ Note: ContextConsumer only gets PerformedWork effect in 16.3.3+\n+ \/\/ so it won't get highlighted with React 16.3.0 to 16.3.2.\n+ default:\n+ \/\/ For host components and other types, we compare inputs\n+ \/\/ to determine whether something is an update.\n+ return (\n+ prevFiber.memoizedProps !== nextFiber.memoizedProps ||\n+ prevFiber.memoizedState !== nextFiber.memoizedState ||\n+ prevFiber.ref !== nextFiber.ref\n+ );\n+ }\n+ }\n+\n+ let pendingOperations: Array<number> = [];\n+ let pendingRealUnmountedIDs: Array<number> = [];\n+ let pendingSimulatedUnmountedIDs: Array<number> = [];\n+ let pendingOperationsQueue: Array<Array<number>> | null = [];\n+ let pendingStringTable: Map<string, number> = new Map();\n+ let pendingStringTableLength: number = 0;\n+ let pendingUnmountedRootID: number | null = null;\n+\n+ function pushOperation(op: number): void {\n+ if (__DEV__) {\n+ if (!Number.isInteger(op)) {\n+ console.error(\n+ 'pushOperation() was called but the value is not an integer.',\n+ op\n+ );\n+ }\n+ }\n+ pendingOperations.push(op);\n+ }\n+\n+ function flushPendingEvents(root: Object): void {\n+ if (\n+ pendingOperations.length === 0 &&\n+ pendingRealUnmountedIDs.length === 0 &&\n+ pendingSimulatedUnmountedIDs.length === 0 &&\n+ pendingUnmountedRootID === null\n+ ) {\n+ \/\/ If we're currently profiling, send an \"operations\" method even if there are no mutations to the tree.\n+ \/\/ The frontend needs this no-op info to know how to reconstruct the tree for each commit,\n+ \/\/ even if a particular commit didn't change the shape of the tree.\n+ if (!isProfiling) {\n+ return;\n+ }\n+ }\n+\n+ const numUnmountIDs =\n+ pendingRealUnmountedIDs.length +\n+ pendingSimulatedUnmountedIDs.length +\n+ (pendingUnmountedRootID === null ? 0 : 1);\n+\n+ const operations = new Array(\n+ \/\/ Identify which renderer this update is coming from.\n+ 2 + \/\/ [rendererID, rootFiberID]\n+ \/\/ How big is the string table?\n+ 1 + \/\/ [stringTableLength]\n+ \/\/ Then goes the actual string table.\n+ pendingStringTableLength +\n+ \/\/ All unmounts are batched in a single message.\n+ \/\/ [TREE_OPERATION_REMOVE, removedIDLength, ...ids]\n+ (numUnmountIDs > 0 ? 2 + numUnmountIDs : 0) +\n+ \/\/ Regular operations\n+ pendingOperations.length\n+ );\n+\n+ \/\/ Identify which renderer this update is coming from.\n+ \/\/ This enables roots to be mapped to renderers,\n+ \/\/ Which in turn enables fiber props, states, and hooks to be inspected.\n+ let i = 0;\n+ operations[i++] = rendererID;\n+ operations[i++] = currentRootID; \/\/ Use this ID in case the root was unmounted!\n+\n+ \/\/ Now fill in the string table.\n+ \/\/ [stringTableLength, str1Length, ...str1, str2Length, ...str2, ...]\n+ operations[i++] = pendingStringTableLength;\n+ pendingStringTable.forEach((value, key) => {\n+ operations[i++] = key.length;\n+ const encodedKey = utfEncodeString(key);\n+ for (let j = 0; j < encodedKey.length; j++) {\n+ operations[i + j] = encodedKey[j];\n+ }\n+ i += key.length;\n+ });\n+\n+ if (numUnmountIDs > 0) {\n+ \/\/ All unmounts except roots are batched in a single message.\n+ operations[i++] = TREE_OPERATION_REMOVE;\n+ \/\/ The first number is how many unmounted IDs we're gonna send.\n+ operations[i++] = numUnmountIDs;\n+ \/\/ Fill in the real unmounts in the reverse order.\n+ \/\/ They were inserted parents-first by React, but we want children-first.\n+ \/\/ So we traverse our array backwards.\n+ for (let j = pendingRealUnmountedIDs.length - 1; j >= 0; j--) {\n+ operations[i++] = pendingRealUnmountedIDs[j];\n+ }\n+ \/\/ Fill in the simulated unmounts (hidden Suspense subtrees) in their order.\n+ \/\/ (We want children to go before parents.)\n+ \/\/ They go *after* the real unmounts because we know for sure they won't be\n+ \/\/ children of already pushed \"real\" IDs. If they were, we wouldn't be able\n+ \/\/ to discover them during the traversal, as they would have been deleted.\n+ for (let j = 0; j < pendingSimulatedUnmountedIDs.length; j++) {\n+ operations[i + j] = pendingSimulatedUnmountedIDs[j];\n+ }\n+ i += pendingSimulatedUnmountedIDs.length;\n+ \/\/ The root ID should always be unmounted last.\n+ if (pendingUnmountedRootID !== null) {\n+ operations[i] = pendingUnmountedRootID;\n+ i++;\n+ }\n+ }\n+ \/\/ Fill in the rest of the operations.\n+ for (let j = 0; j < pendingOperations.length; j++) {\n+ operations[i + j] = pendingOperations[j];\n+ }\n+ i += pendingOperations.length;\n+\n+ \/\/ Let the frontend know about tree operations.\n+ \/\/ The first value in this array will identify which root it corresponds to,\n+ \/\/ so we do no longer need to dispatch a separate root-committed event.\n+ if (pendingOperationsQueue !== null) {\n+ \/\/ Until the frontend has been connected, store the tree operations.\n+ \/\/ This will let us avoid walking the tree later when the frontend connects,\n+ \/\/ and it enables the Profiler's reload-and-profile functionality to work as well.\n+ pendingOperationsQueue.push(operations);\n+ } else {\n+ \/\/ If we've already connected to the frontend, just pass the operations through.\n+ hook.emit('operations', operations);\n+ }\n+\n+ pendingOperations.length = 0;\n+ pendingRealUnmountedIDs.length = 0;\n+ pendingSimulatedUnmountedIDs.length = 0;\n+ pendingUnmountedRootID = null;\n+ pendingStringTable.clear();\n+ pendingStringTableLength = 0;\n+ }\n+\n+ function getStringID(str: string | null): number {\n+ if (str === null) {\n+ return 0;\n+ }\n+ const existingID = pendingStringTable.get(str);\n+ if (existingID !== undefined) {\n+ return existingID;\n+ }\n+ const stringID = pendingStringTable.size + 1;\n+ pendingStringTable.set(str, stringID);\n+ \/\/ The string table total length needs to account\n+ \/\/ both for the string length, and for the array item\n+ \/\/ that contains the length itself. Hence + 1.\n+ pendingStringTableLength += str.length + 1;\n+ return stringID;\n+ }\n+\n+ function recordMount(fiber: Fiber, parentFiber: Fiber | null) {\n+ const isRoot = fiber.tag === HostRoot;\n+ const id = getFiberID(getPrimaryFiber(fiber));\n+\n+ const hasOwnerMetadata = fiber.hasOwnProperty('_debugOwner');\n+ const isProfilingSupported = fiber.hasOwnProperty('treeBaseDuration');\n+\n+ if (isRoot) {\n+ pushOperation(TREE_OPERATION_ADD);\n+ pushOperation(id);\n+ pushOperation(ElementTypeRoot);\n+ pushOperation(isProfilingSupported ? 1 : 0);\n+ pushOperation(hasOwnerMetadata ? 1 : 0);\n+\n+ if (isProfiling) {\n+ if (displayNamesByRootID !== null) {\n+ displayNamesByRootID.set(id, getDisplayNameForRoot(fiber));\n+ }\n+ }\n+ } else {\n+ const { key } = fiber;\n+ const displayName = getDisplayNameForFiber(fiber);\n+ const elementType = getElementTypeForFiber(fiber);\n+ const { _debugOwner } = fiber;\n+\n+ const ownerID =\n+ _debugOwner != null ? getFiberID(getPrimaryFiber(_debugOwner)) : 0;\n+ const parentID = parentFiber\n+ ? getFiberID(getPrimaryFiber(parentFiber))\n+ : 0;\n+\n+ let displayNameStringID = getStringID(displayName);\n+ let keyStringID = getStringID(key);\n+ pushOperation(TREE_OPERATION_ADD);\n+ pushOperation(id);\n+ pushOperation(elementType);\n+ pushOperation(parentID);\n+ pushOperation(ownerID);\n+ pushOperation(displayNameStringID);\n+ pushOperation(keyStringID);\n+ }\n+\n+ if (isProfilingSupported) {\n+ idToRootMap.set(id, currentRootID);\n+\n+ recordProfilingDurations(fiber);\n+ }\n+ }\n+\n+ function recordUnmount(fiber: Fiber, isSimulated: boolean) {\n+ if (trackedPathMatchFiber !== null) {\n+ \/\/ We're in the process of trying to restore previous selection.\n+ \/\/ If this fiber matched but is being unmounted, there's no use trying.\n+ \/\/ Reset the state so we don't keep holding onto it.\n+ if (\n+ fiber === trackedPathMatchFiber ||\n+ fiber === trackedPathMatchFiber.alternate\n+ ) {\n+ setTrackedPath(null);\n+ }\n+ }\n+\n+ const isRoot = fiber.tag === HostRoot;\n+ const primaryFiber = getPrimaryFiber(fiber);\n+ if (!fiberToIDMap.has(primaryFiber)) {\n+ \/\/ If we've never seen this Fiber, it might be because\n+ \/\/ it is inside a non-current Suspense fragment tree,\n+ \/\/ and so the store is not even aware of it.\n+ \/\/ In that case we can just ignore it, or otherwise\n+ \/\/ there will be errors later on.\n+ primaryFibers.delete(primaryFiber);\n+ \/\/ TODO: this is fragile and can obscure actual bugs.\n+ return;\n+ }\n+ const id = getFiberID(primaryFiber);\n+ if (isRoot) {\n+ \/\/ Roots must be removed only after all children (pending and simultated) have been removed.\n+ \/\/ So we track it separately.\n+ pendingUnmountedRootID = id;\n+ } else if (!shouldFilterFiber(fiber)) {\n+ \/\/ To maintain child-first ordering,\n+ \/\/ we'll push it into one of these queues,\n+ \/\/ and later arrange them in the correct order.\n+ if (isSimulated) {\n+ pendingSimulatedUnmountedIDs.push(id);\n+ } else {\n+ pendingRealUnmountedIDs.push(id);\n+ }\n+ }\n+ fiberToIDMap.delete(primaryFiber);\n+ idToFiberMap.delete(id);\n+ primaryFibers.delete(primaryFiber);\n+\n+ const isProfilingSupported = fiber.hasOwnProperty('treeBaseDuration');\n+ if (isProfilingSupported) {\n+ idToRootMap.delete(id);\n+ idToTreeBaseDurationMap.delete(id);\n+ }\n+ }\n+\n+ function mountFiberRecursively(\n+ fiber: Fiber,\n+ parentFiber: Fiber | null,\n+ traverseSiblings = false\n+ ) {\n+ if (__DEBUG__) {\n+ debug('mountFiberRecursively()', fiber, parentFiber);\n+ }\n+\n+ \/\/ If we have the tree selection from previous reload, try to match this Fiber.\n+ \/\/ Also remember whether to do the same for siblings.\n+ const mightSiblingsBeOnTrackedPath = updateTrackedPathStateBeforeMount(\n+ fiber\n+ );\n+\n+ const shouldIncludeInTree = !shouldFilterFiber(fiber);\n+ if (shouldIncludeInTree) {\n+ recordMount(fiber, parentFiber);\n+ }\n+\n+ const isTimedOutSuspense =\n+ fiber.tag === ReactTypeOfWork.SuspenseComponent &&\n+ fiber.memoizedState !== null;\n+\n+ if (isTimedOutSuspense) {\n+ \/\/ Special case: if Suspense mounts in a timed-out state,\n+ \/\/ get the fallback child from the inner fragment and mount\n+ \/\/ it as if it was our own child. Updates handle this too.\n+ const primaryChildFragment = fiber.child;\n+ const fallbackChildFragment = primaryChildFragment\n+ ? primaryChildFragment.sibling\n+ : null;\n+ const fallbackChild = fallbackChildFragment\n+ ? fallbackChildFragment.child\n+ : null;\n+ if (fallbackChild !== null) {\n+ mountFiberRecursively(\n+ fallbackChild,\n+ shouldIncludeInTree ? fiber : parentFiber,\n+ true\n+ );\n+ }\n+ } else {\n+ if (fiber.child !== null) {\n+ mountFiberRecursively(\n+ fiber.child,\n+ shouldIncludeInTree ? fiber : parentFiber,\n+ true\n+ );\n+ }\n+ }\n+\n+ \/\/ We're exiting this Fiber now, and entering its siblings.\n+ \/\/ If we have selection to restore, we might need to re-activate tracking.\n+ updateTrackedPathStateAfterMount(mightSiblingsBeOnTrackedPath);\n+\n+ if (traverseSiblings && fiber.sibling !== null) {\n+ mountFiberRecursively(fiber.sibling, parentFiber, true);\n+ }\n+ }\n+\n+ \/\/ We use this to simulate unmounting for Suspense trees\n+ \/\/ when we switch from primary to fallback.\n+ function unmountFiberChildrenRecursively(fiber: Fiber) {\n+ if (__DEBUG__) {\n+ debug('unmountFiberChildrenRecursively()', fiber);\n+ }\n+\n+ \/\/ We might meet a nested Suspense on our way.\n+ const isTimedOutSuspense =\n+ fiber.tag === ReactTypeOfWork.SuspenseComponent &&\n+ fiber.memoizedState !== null;\n+\n+ let child = fiber.child;\n+ if (isTimedOutSuspense) {\n+ \/\/ If it's showing fallback tree, let's traverse it instead.\n+ const primaryChildFragment = fiber.child;\n+ const fallbackChildFragment = primaryChildFragment\n+ ? primaryChildFragment.sibling\n+ : null;\n+ \/\/ Skip over to the real Fiber child.\n+ child = fallbackChildFragment ? fallbackChildFragment.child : null;\n+ }\n+\n+ while (child !== null) {\n+ \/\/ Record simulated unmounts children-first.\n+ \/\/ We skip nodes without return because those are real unmounts.\n+ if (child.return !== null) {\n+ unmountFiberChildrenRecursively(child);\n+ recordUnmount(child, true);\n+ }\n+ child = child.sibling;\n+ }\n+ }\n+\n+ function recordProfilingDurations(fiber: Fiber) {\n+ const id = getFiberID(getPrimaryFiber(fiber));\n+ const { actualDuration, treeBaseDuration } = fiber;\n+\n+ idToTreeBaseDurationMap.set(id, fiber.treeBaseDuration || 0);\n+\n+ if (isProfiling) {\n+ const { alternate } = fiber;\n+\n+ if (\n+ alternate == null ||\n+ treeBaseDuration !== alternate.treeBaseDuration\n+ ) {\n+ \/\/ Tree base duration updates are included in the operations typed array.\n+ \/\/ So we have to convert them from milliseconds to microseconds so we can send them as ints.\n+ const treeBaseDuration = Math.floor(\n+ (fiber.treeBaseDuration || 0) * 1000\n+ );\n+ pushOperation(TREE_OPERATION_UPDATE_TREE_BASE_DURATION);\n+ pushOperation(id);\n+ pushOperation(treeBaseDuration);\n+ }\n+\n+ if (alternate == null || didFiberRender(alternate, fiber)) {\n+ if (actualDuration != null) {\n+ \/\/ The actual duration reported by React includes time spent working on children.\n+ \/\/ This is useful information, but it's also useful to be able to exclude child durations.\n+ \/\/ The frontend can't compute this, since the immediate children may have been filtered out.\n+ \/\/ So we need to do this on the backend.\n+ \/\/ Note that this calculated self duration is not the same thing as the base duration.\n+ \/\/ The two are calculated differently (tree duration does not accumulate).\n+ let selfDuration = actualDuration;\n+ let child = fiber.child;\n+ while (child !== null) {\n+ selfDuration -= child.actualDuration || 0;\n+ child = child.sibling;\n+ }\n+\n+ \/\/ If profiling is active, store durations for elements that were rendered during the commit.\n+ \/\/ Note that we should do this for any fiber we performed work on, regardless of its actualDuration value.\n+ \/\/ In some cases actualDuration might be 0 for fibers we worked on (particularly if we're using Date.now)\n+ \/\/ In other cases (e.g. Memo) actualDuration might be greater than 0 even if we \"bailed out\".\n+ const metadata = ((currentCommitProfilingMetadata: any): CommitProfilingData);\n+ metadata.durations.push(id, actualDuration, selfDuration);\n+ metadata.maxActualDuration = Math.max(\n+ metadata.maxActualDuration,\n+ actualDuration\n+ );\n+\n+ if (recordChangeDescriptions) {\n+ const changeDescription = getChangeDescription(alternate, fiber);\n+ if (changeDescription !== null) {\n+ if (metadata.changeDescriptions !== null) {\n+ metadata.changeDescriptions.set(id, changeDescription);\n+ }\n+ }\n+\n+ updateContextsForFiber(fiber);\n+ }\n+ }\n+ }\n+ }\n+ }\n+\n+ function recordResetChildren(fiber: Fiber, childSet: Fiber) {\n+ \/\/ The frontend only really cares about the displayName, key, and children.\n+ \/\/ The first two don't really change, so we are only concerned with the order of children here.\n+ \/\/ This is trickier than a simple comparison though, since certain types of fibers are filtered.\n+ const nextChildren: Array<number> = [];\n+\n+ \/\/ This is a naive implimentation that shallowly recurses children.\n+ \/\/ We might want to revisit this if it proves to be too inefficient.\n+ let child = childSet;\n+ while (child !== null) {\n+ findReorderedChildrenRecursively(child, nextChildren);\n+ child = child.sibling;\n+ }\n+\n+ const numChildren = nextChildren.length;\n+ if (numChildren < 2) {\n+ \/\/ No need to reorder.\n+ return;\n+ }\n+ pushOperation(TREE_OPERATION_REORDER_CHILDREN);\n+ pushOperation(getFiberID(getPrimaryFiber(fiber)));\n+ pushOperation(numChildren);\n+ for (let i = 0; i < nextChildren.length; i++) {\n+ pushOperation(nextChildren[i]);\n+ }\n+ }\n+\n+ function findReorderedChildrenRecursively(\n+ fiber: Fiber,\n+ nextChildren: Array<number>\n+ ) {\n+ if (!shouldFilterFiber(fiber)) {\n+ nextChildren.push(getFiberID(getPrimaryFiber(fiber)));\n+ } else {\n+ let child = fiber.child;\n+ while (child !== null) {\n+ findReorderedChildrenRecursively(child, nextChildren);\n+ child = child.sibling;\n+ }\n+ }\n+ }\n+\n+ \/\/ Returns whether closest unfiltered fiber parent needs to reset its child list.\n+ function updateFiberRecursively(\n+ nextFiber: Fiber,\n+ prevFiber: Fiber,\n+ parentFiber: Fiber | null\n+ ): boolean {\n+ if (__DEBUG__) {\n+ debug('updateFiberRecursively()', nextFiber, parentFiber);\n+ }\n+\n+ if (\n+ mostRecentlyInspectedElement !== null &&\n+ mostRecentlyInspectedElement.id ===\n+ getFiberID(getPrimaryFiber(nextFiber)) &&\n+ didFiberRender(prevFiber, nextFiber)\n+ ) {\n+ \/\/ If this Fiber has updated, clear cached inspected data.\n+ \/\/ If it is inspected again, it may need to be re-run to obtain updated hooks values.\n+ hasElementUpdatedSinceLastInspected = true;\n+ }\n+\n+ const shouldIncludeInTree = !shouldFilterFiber(nextFiber);\n+ const isSuspense = nextFiber.tag === SuspenseComponent;\n+ let shouldResetChildren = false;\n+ \/\/ The behavior of timed-out Suspense trees is unique.\n+ \/\/ Rather than unmount the timed out content (and possibly lose important state),\n+ \/\/ React re-parents this content within a hidden Fragment while the fallback is showing.\n+ \/\/ This behavior doesn't need to be observable in the DevTools though.\n+ \/\/ It might even result in a bad user experience for e.g. node selection in the Elements panel.\n+ \/\/ The easiest fix is to strip out the intermediate Fragment fibers,\n+ \/\/ so the Elements panel and Profiler don't need to special case them.\n+ \/\/ Suspense components only have a non-null memoizedState if they're timed-out.\n+ const prevDidTimeout = isSuspense && prevFiber.memoizedState !== null;\n+ const nextDidTimeOut = isSuspense && nextFiber.memoizedState !== null;\n+ \/\/ The logic below is inspired by the codepaths in updateSuspenseComponent()\n+ \/\/ inside ReactFiberBeginWork in the React source code.\n+ if (prevDidTimeout && nextDidTimeOut) {\n+ \/\/ Fallback -> Fallback:\n+ \/\/ 1. Reconcile fallback set.\n+ const nextFiberChild = nextFiber.child;\n+ const nextFallbackChildSet = nextFiberChild\n+ ? nextFiberChild.sibling\n+ : null;\n+ \/\/ Note: We can't use nextFiber.child.sibling.alternate\n+ \/\/ because the set is special and alternate may not exist.\n+ const prevFiberChild = prevFiber.child;\n+ const prevFallbackChildSet = prevFiberChild\n+ ? prevFiberChild.sibling\n+ : null;\n+ if (\n+ nextFallbackChildSet != null &&\n+ prevFallbackChildSet != null &&\n+ updateFiberRecursively(\n+ nextFallbackChildSet,\n+ prevFallbackChildSet,\n+ nextFiber\n+ )\n+ ) {\n+ shouldResetChildren = true;\n+ }\n+ } else if (prevDidTimeout && !nextDidTimeOut) {\n+ \/\/ Fallback -> Primary:\n+ \/\/ 1. Unmount fallback set\n+ \/\/ Note: don't emulate fallback unmount because React actually did it.\n+ \/\/ 2. Mount primary set\n+ const nextPrimaryChildSet = nextFiber.child;\n+ if (nextPrimaryChildSet !== null) {\n+ mountFiberRecursively(nextPrimaryChildSet, nextFiber, true);\n+ }\n+ shouldResetChildren = true;\n+ } else if (!prevDidTimeout && nextDidTimeOut) {\n+ \/\/ Primary -> Fallback:\n+ \/\/ 1. Hide primary set\n+ \/\/ This is not a real unmount, so it won't get reported by React.\n+ \/\/ We need to manually walk the previous tree and record unmounts.\n+ unmountFiberChildrenRecursively(prevFiber);\n+ \/\/ 2. Mount fallback set\n+ const nextFiberChild = nextFiber.child;\n+ const nextFallbackChildSet = nextFiberChild\n+ ? nextFiberChild.sibling\n+ : null;\n+ if (nextFallbackChildSet != null) {\n+ mountFiberRecursively(nextFallbackChildSet, nextFiber, true);\n+ shouldResetChildren = true;\n+ }\n+ } else {\n+ \/\/ Common case: Primary -> Primary.\n+ \/\/ This is the same codepath as for non-Suspense fibers.\n+ if (nextFiber.child !== prevFiber.child) {\n+ \/\/ If the first child is different, we need to traverse them.\n+ \/\/ Each next child will be either a new child (mount) or an alternate (update).\n+ let nextChild = nextFiber.child;\n+ let prevChildAtSameIndex = prevFiber.child;\n+ while (nextChild) {\n+ \/\/ We already know children will be referentially different because\n+ \/\/ they are either new mounts or alternates of previous children.\n+ \/\/ Schedule updates and mounts depending on whether alternates exist.\n+ \/\/ We don't track deletions here because they are reported separately.\n+ if (nextChild.alternate) {\n+ const prevChild = nextChild.alternate;\n+ if (\n+ updateFiberRecursively(\n+ nextChild,\n+ prevChild,\n+ shouldIncludeInTree ? nextFiber : parentFiber\n+ )\n+ ) {\n+ \/\/ If a nested tree child order changed but it can't handle its own\n+ \/\/ child order invalidation (e.g. because it's filtered out like host nodes),\n+ \/\/ propagate the need to reset child order upwards to this Fiber.\n+ shouldResetChildren = true;\n+ }\n+ \/\/ However we also keep track if the order of the children matches\n+ \/\/ the previous order. They are always different referentially, but\n+ \/\/ if the instances line up conceptually we'll want to know that.\n+ if (prevChild !== prevChildAtSameIndex) {\n+ shouldResetChildren = true;\n+ }\n+ } else {\n+ mountFiberRecursively(\n+ nextChild,\n+ shouldIncludeInTree ? nextFiber : parentFiber\n+ );\n+ shouldResetChildren = true;\n+ }\n+ \/\/ Try the next child.\n+ nextChild = nextChild.sibling;\n+ \/\/ Advance the pointer in the previous list so that we can\n+ \/\/ keep comparing if they line up.\n+ if (!shouldResetChildren && prevChildAtSameIndex !== null) {\n+ prevChildAtSameIndex = prevChildAtSameIndex.sibling;\n+ }\n+ }\n+ \/\/ If we have no more children, but used to, they don't line up.\n+ if (prevChildAtSameIndex !== null) {\n+ shouldResetChildren = true;\n+ }\n+ }\n+ }\n+ if (shouldIncludeInTree) {\n+ const isProfilingSupported = nextFiber.hasOwnProperty('treeBaseDuration');\n+ if (isProfilingSupported) {\n+ recordProfilingDurations(nextFiber);\n+ }\n+ }\n+ if (shouldResetChildren) {\n+ \/\/ We need to crawl the subtree for closest non-filtered Fibers\n+ \/\/ so that we can display them in a flat children set.\n+ if (shouldIncludeInTree) {\n+ \/\/ Normally, search for children from the rendered child.\n+ let nextChildSet = nextFiber.child;\n+ if (nextDidTimeOut) {\n+ \/\/ Special case: timed-out Suspense renders the fallback set.\n+ const nextFiberChild = nextFiber.child;\n+ nextChildSet = nextFiberChild ? nextFiberChild.sibling : null;\n+ }\n+ if (nextChildSet != null) {\n+ recordResetChildren(nextFiber, nextChildSet);\n+ }\n+ \/\/ We've handled the child order change for this Fiber.\n+ \/\/ Since it's included, there's no need to invalidate parent child order.\n+ return false;\n+ } else {\n+ \/\/ Let the closest unfiltered parent Fiber reset its child order instead.\n+ return true;\n+ }\n+ } else {\n+ return false;\n+ }\n+ }\n+\n+ function cleanup() {\n+ \/\/ We don't patch any methods so there is no cleanup.\n+ }\n+\n+ function flushInitialOperations() {\n+ const localPendingOperationsQueue = pendingOperationsQueue;\n+\n+ pendingOperationsQueue = null;\n+\n+ if (\n+ localPendingOperationsQueue !== null &&\n+ localPendingOperationsQueue.length > 0\n+ ) {\n+ \/\/ We may have already queued up some operations before the frontend connected\n+ \/\/ If so, let the frontend know about them.\n+ localPendingOperationsQueue.forEach(operations => {\n+ hook.emit('operations', operations);\n+ });\n+ } else {\n+ \/\/ Before the traversals, remember to start tracking\n+ \/\/ our path in case we have selection to restore.\n+ if (trackedPath !== null) {\n+ mightBeOnTrackedPath = true;\n+ }\n+ \/\/ If we have not been profiling, then we can just walk the tree and build up its current state as-is.\n+ hook.getFiberRoots(rendererID).forEach(root => {\n+ currentRootID = getFiberID(getPrimaryFiber(root.current));\n+ setRootPseudoKey(currentRootID, root.current);\n+\n+ if (isProfiling) {\n+ \/\/ If profiling is active, store commit time and duration, and the current interactions.\n+ \/\/ The frontend may request this information after profiling has stopped.\n+ currentCommitProfilingMetadata = {\n+ changeDescriptions: recordChangeDescriptions ? new Map() : null,\n+ durations: [],\n+ commitTime: getCurrentTime() - profilingStartTime,\n+ interactions: Array.from(root.memoizedInteractions).map(\n+ (interaction: Interaction) => ({\n+ ...interaction,\n+ timestamp: interaction.timestamp - profilingStartTime,\n+ })\n+ ),\n+ maxActualDuration: 0,\n+ priorityLevel: null,\n+ };\n+ }\n+\n+ mountFiberRecursively(root.current, null);\n+ flushPendingEvents(root);\n+ currentRootID = -1;\n+ });\n+ }\n+ }\n+\n+ function handleCommitFiberUnmount(fiber) {\n+ \/\/ This is not recursive.\n+ \/\/ We can't traverse fibers after unmounting so instead\n+ \/\/ we rely on React telling us about each unmount.\n+ recordUnmount(fiber, false);\n+ }\n+\n+ function handleCommitFiberRoot(root, priorityLevel) {\n+ const current = root.current;\n+ const alternate = current.alternate;\n+\n+ currentRootID = getFiberID(getPrimaryFiber(current));\n+\n+ \/\/ Before the traversals, remember to start tracking\n+ \/\/ our path in case we have selection to restore.\n+ if (trackedPath !== null) {\n+ mightBeOnTrackedPath = true;\n+ }\n+\n+ if (isProfiling) {\n+ \/\/ If profiling is active, store commit time and duration, and the current interactions.\n+ \/\/ The frontend may request this information after profiling has stopped.\n+ currentCommitProfilingMetadata = {\n+ changeDescriptions: recordChangeDescriptions ? new Map() : null,\n+ durations: [],\n+ commitTime: getCurrentTime() - profilingStartTime,\n+ interactions: Array.from(root.memoizedInteractions).map(\n+ (interaction: Interaction) => ({\n+ ...interaction,\n+ timestamp: interaction.timestamp - profilingStartTime,\n+ })\n+ ),\n+ maxActualDuration: 0,\n+ priorityLevel:\n+ priorityLevel == null ? null : formatPriorityLevel(priorityLevel),\n+ };\n+ }\n+\n+ if (alternate) {\n+ \/\/ TODO: relying on this seems a bit fishy.\n+ const wasMounted =\n+ alternate.memoizedState != null &&\n+ alternate.memoizedState.element != null;\n+ const isMounted =\n+ current.memoizedState != null && current.memoizedState.element != null;\n+ if (!wasMounted && isMounted) {\n+ \/\/ Mount a new root.\n+ setRootPseudoKey(currentRootID, current);\n+ mountFiberRecursively(current, null);\n+ } else if (wasMounted && isMounted) {\n+ \/\/ Update an existing root.\n+ updateFiberRecursively(current, alternate, null);\n+ } else if (wasMounted && !isMounted) {\n+ \/\/ Unmount an existing root.\n+ removeRootPseudoKey(currentRootID);\n+ recordUnmount(current, false);\n+ }\n+ } else {\n+ \/\/ Mount a new root.\n+ setRootPseudoKey(currentRootID, current);\n+ mountFiberRecursively(current, null);\n+ }\n+\n+ if (isProfiling) {\n+ const commitProfilingMetadata = ((rootToCommitProfilingMetadataMap: any): CommitProfilingMetadataMap).get(\n+ currentRootID\n+ );\n+ if (commitProfilingMetadata != null) {\n+ commitProfilingMetadata.push(\n+ ((currentCommitProfilingMetadata: any): CommitProfilingData)\n+ );\n+ } else {\n+ ((rootToCommitProfilingMetadataMap: any): CommitProfilingMetadataMap).set(\n+ currentRootID,\n+ [((currentCommitProfilingMetadata: any): CommitProfilingData)]\n+ );\n+ }\n+ }\n+\n+ \/\/ We're done here.\n+ flushPendingEvents(root);\n+\n+ currentRootID = -1;\n+ }\n+\n+ function findAllCurrentHostFibers(id: number): $ReadOnlyArray<Fiber> {\n+ const fibers = [];\n+ const fiber = findCurrentFiberUsingSlowPathById(id);\n+ if (!fiber) {\n+ return fibers;\n+ }\n+\n+ \/\/ Next we'll drill down this component to find all HostComponent\/Text.\n+ let node: Fiber = fiber;\n+ while (true) {\n+ if (node.tag === HostComponent || node.tag === HostText) {\n+ fibers.push(node);\n+ } else if (node.child) {\n+ node.child.return = node;\n+ node = node.child;\n+ continue;\n+ }\n+ if (node === fiber) {\n+ return fibers;\n+ }\n+ while (!node.sibling) {\n+ if (!node.return || node.return === fiber) {\n+ return fibers;\n+ }\n+ node = node.return;\n+ }\n+ node.sibling.return = node.return;\n+ node = node.sibling;\n+ }\n+ \/\/ Flow needs the return here, but ESLint complains about it.\n+ \/\/ eslint-disable-next-line no-unreachable\n+ return fibers;\n+ }\n+\n+ function findNativeNodesForFiberID(id: number) {\n+ try {\n+ let fiber = findCurrentFiberUsingSlowPathById(id);\n+ if (fiber === null) {\n+ return null;\n+ }\n+ \/\/ Special case for a timed-out Suspense.\n+ const isTimedOutSuspense =\n+ fiber.tag === SuspenseComponent && fiber.memoizedState !== null;\n+ if (isTimedOutSuspense) {\n+ \/\/ A timed-out Suspense's findDOMNode is useless.\n+ \/\/ Try our best to find the fallback directly.\n+ const maybeFallbackFiber = fiber.child && fiber.child.sibling;\n+ if (maybeFallbackFiber != null) {\n+ fiber = maybeFallbackFiber;\n+ }\n+ }\n+ const hostFibers = findAllCurrentHostFibers(id);\n+ return hostFibers.map(hostFiber => hostFiber.stateNode).filter(Boolean);\n+ } catch (err) {\n+ \/\/ The fiber might have unmounted by now.\n+ return null;\n+ }\n+ }\n+\n+ function getFiberIDForNative(\n+ hostInstance,\n+ findNearestUnfilteredAncestor = false\n+ ) {\n+ let fiber = renderer.findFiberByHostInstance(hostInstance);\n+ if (fiber != null) {\n+ if (findNearestUnfilteredAncestor) {\n+ while (fiber !== null && shouldFilterFiber(fiber)) {\n+ fiber = fiber.return;\n+ }\n+ }\n+ return getFiberID(getPrimaryFiber(((fiber: any): Fiber)));\n+ }\n+ return null;\n+ }\n+\n+ const MOUNTING = 1;\n+ const MOUNTED = 2;\n+ const UNMOUNTED = 3;\n+\n+ \/\/ This function is copied from React and should be kept in sync:\n+ \/\/ https:\/\/github.com\/facebook\/react\/blob\/master\/packages\/react-reconciler\/src\/ReactFiberTreeReflection.js\n+ function isFiberMountedImpl(fiber: Fiber): number {\n+ let node = fiber;\n+ if (!fiber.alternate) {\n+ \/\/ If there is no alternate, this might be a new tree that isn't inserted\n+ \/\/ yet. If it is, then it will have a pending insertion effect on it.\n+ if ((node.effectTag & Placement) !== NoEffect) {\n+ return MOUNTING;\n+ }\n+ while (node.return) {\n+ node = node.return;\n+ if ((node.effectTag & Placement) !== NoEffect) {\n+ return MOUNTING;\n+ }\n+ }\n+ } else {\n+ while (node.return) {\n+ node = node.return;\n+ }\n+ }\n+ if (node.tag === HostRoot) {\n+ \/\/ TODO: Check if this was a nested HostRoot when used with\n+ \/\/ renderContainerIntoSubtree.\n+ return MOUNTED;\n+ }\n+ \/\/ If we didn't hit the root, that means that we're in an disconnected tree\n+ \/\/ that has been unmounted.\n+ return UNMOUNTED;\n+ }\n+\n+ \/\/ This function is copied from React and should be kept in sync:\n+ \/\/ https:\/\/github.com\/facebook\/react\/blob\/master\/packages\/react-reconciler\/src\/ReactFiberTreeReflection.js\n+ \/\/ It would be nice if we updated React to inject this function directly (vs just indirectly via findDOMNode).\n+ \/\/ BEGIN copied code\n+ function findCurrentFiberUsingSlowPathById(id: number): Fiber | null {\n+ const fiber = idToFiberMap.get(id);\n+ if (fiber == null) {\n+ console.warn(`Could not find Fiber with id \"${id}\"`);\n+ return null;\n+ }\n+\n+ let alternate = fiber.alternate;\n+ if (!alternate) {\n+ \/\/ If there is no alternate, then we only need to check if it is mounted.\n+ const state = isFiberMountedImpl(fiber);\n+ if (state === UNMOUNTED) {\n+ throw Error('Unable to find node on an unmounted component.');\n+ }\n+ if (state === MOUNTING) {\n+ return null;\n+ }\n+ return fiber;\n+ }\n+ \/\/ If we have two possible branches, we'll walk backwards up to the root\n+ \/\/ to see what path the root points to. On the way we may hit one of the\n+ \/\/ special cases and we'll deal with them.\n+ let a: Fiber = fiber;\n+ let b: Fiber = alternate;\n+ while (true) {\n+ let parentA = a.return;\n+ if (parentA === null) {\n+ \/\/ We're at the root.\n+ break;\n+ }\n+ let parentB = parentA.alternate;\n+ if (parentB === null) {\n+ \/\/ There is no alternate. This is an unusual case. Currently, it only\n+ \/\/ happens when a Suspense component is hidden. An extra fragment fiber\n+ \/\/ is inserted in between the Suspense fiber and its children. Skip\n+ \/\/ over this extra fragment fiber and proceed to the next parent.\n+ const nextParent = parentA.return;\n+ if (nextParent !== null) {\n+ a = b = nextParent;\n+ continue;\n+ }\n+ \/\/ If there's no parent, we're at the root.\n+ break;\n+ }\n+\n+ \/\/ If both copies of the parent fiber point to the same child, we can\n+ \/\/ assume that the child is current. This happens when we bailout on low\n+ \/\/ priority: the bailed out fiber's child reuses the current child.\n+ if (parentA.child === parentB.child) {\n+ let child = parentA.child;\n+ while (child) {\n+ if (child === a) {\n+ \/\/ We've determined that A is the current branch.\n+ if (isFiberMountedImpl(parentA) !== MOUNTED) {\n+ throw Error('Unable to find node on an unmounted component.');\n+ }\n+ return fiber;\n+ }\n+ if (child === b) {\n+ \/\/ We've determined that B is the current branch.\n+ if (isFiberMountedImpl(parentA) !== MOUNTED) {\n+ throw Error('Unable to find node on an unmounted component.');\n+ }\n+ return alternate;\n+ }\n+ child = child.sibling;\n+ }\n+ \/\/ We should never have an alternate for any mounting node. So the only\n+ \/\/ way this could possibly happen is if this was unmounted, if at all.\n+ throw Error('Unable to find node on an unmounted component.');\n+ }\n+\n+ if (a.return !== b.return) {\n+ \/\/ The return pointer of A and the return pointer of B point to different\n+ \/\/ fibers. We assume that return pointers never criss-cross, so A must\n+ \/\/ belong to the child set of A.return, and B must belong to the child\n+ \/\/ set of B.return.\n+ a = parentA;\n+ b = parentB;\n+ } else {\n+ \/\/ The return pointers point to the same fiber. We'll have to use the\n+ \/\/ default, slow path: scan the child sets of each parent alternate to see\n+ \/\/ which child belongs to which set.\n+ \/\/\n+ \/\/ Search parent A's child set\n+ let didFindChild = false;\n+ let child = parentA.child;\n+ while (child) {\n+ if (child === a) {\n+ didFindChild = true;\n+ a = parentA;\n+ b = parentB;\n+ break;\n+ }\n+ if (child === b) {\n+ didFindChild = true;\n+ b = parentA;\n+ a = parentB;\n+ break;\n+ }\n+ child = child.sibling;\n+ }\n+ if (!didFindChild) {\n+ \/\/ Search parent B's child set\n+ child = parentB.child;\n+ while (child) {\n+ if (child === a) {\n+ didFindChild = true;\n+ a = parentB;\n+ b = parentA;\n+ break;\n+ }\n+ if (child === b) {\n+ didFindChild = true;\n+ b = parentB;\n+ a = parentA;\n+ break;\n+ }\n+ child = child.sibling;\n+ }\n+ if (!didFindChild) {\n+ throw Error(\n+ 'Child was not found in either parent set. This indicates a bug ' +\n+ 'in React related to the return pointer. Please file an issue.'\n+ );\n+ }\n+ }\n+ }\n+\n+ if (a.alternate !== b) {\n+ throw Error(\n+ \"Return fibers should always be each others' alternates. \" +\n+ 'This error is likely caused by a bug in React. Please file an issue.'\n+ );\n+ }\n+ }\n+ \/\/ If the root is not a host container, we're in a disconnected tree. I.e.\n+ \/\/ unmounted.\n+ if (a.tag !== HostRoot) {\n+ throw Error('Unable to find node on an unmounted component.');\n+ }\n+ if (a.stateNode.current === a) {\n+ \/\/ We've determined that A is the current branch.\n+ return fiber;\n+ }\n+ \/\/ Otherwise B has to be current branch.\n+ return alternate;\n+ }\n+ \/\/ END copied code\n+\n+ function prepareViewElementSource(id: number): void {\n+ let fiber = idToFiberMap.get(id);\n+ if (fiber == null) {\n+ console.warn(`Could not find Fiber with id \"${id}\"`);\n+ return;\n+ }\n+\n+ const { elementType, tag, type } = fiber;\n+\n+ switch (tag) {\n+ case ClassComponent:\n+ case IncompleteClassComponent:\n+ case IndeterminateComponent:\n+ case FunctionComponent:\n+ global.$type = type;\n+ break;\n+ case ForwardRef:\n+ global.$type = type.render;\n+ break;\n+ case MemoComponent:\n+ case SimpleMemoComponent:\n+ global.$type =\n+ elementType != null && elementType.type != null\n+ ? elementType.type\n+ : type;\n+ break;\n+ default:\n+ global.$type = null;\n+ break;\n+ }\n+ }\n+\n+ function getOwnersList(id: number): Array<Owner> | null {\n+ let fiber = findCurrentFiberUsingSlowPathById(id);\n+ if (fiber == null) {\n+ return null;\n+ }\n+\n+ const { _debugOwner } = fiber;\n+\n+ const owners = [\n+ {\n+ displayName: getDisplayNameForFiber(fiber) || 'Anonymous',\n+ id,\n+ type: getElementTypeForFiber(fiber),\n+ },\n+ ];\n+\n+ if (_debugOwner) {\n+ let owner = _debugOwner;\n+ while (owner !== null) {\n+ owners.unshift({\n+ displayName: getDisplayNameForFiber(owner) || 'Anonymous',\n+ id: getFiberID(getPrimaryFiber(owner)),\n+ type: getElementTypeForFiber(owner),\n+ });\n+ owner = owner._debugOwner || null;\n+ }\n+ }\n+\n+ return owners;\n+ }\n+\n+ \/\/ Fast path props lookup for React Native style editor.\n+ \/\/ Could use inspectElementRaw() but that would require shallow rendering hooks components,\n+ \/\/ and could also mess with memoization.\n+ function getInstanceAndStyle(id: number): InstanceAndStyle {\n+ let instance = null;\n+ let style = null;\n+\n+ let fiber = findCurrentFiberUsingSlowPathById(id);\n+ if (fiber !== null) {\n+ instance = fiber.stateNode;\n+ style = fiber.memoizedProps.style;\n+ }\n+\n+ return { instance, style };\n+ }\n+\n+ function inspectElementRaw(id: number): InspectedElement | null {\n+ let fiber = findCurrentFiberUsingSlowPathById(id);\n+ if (fiber == null) {\n+ return null;\n+ }\n+\n+ const {\n+ _debugOwner,\n+ _debugSource,\n+ stateNode,\n+ memoizedProps,\n+ memoizedState,\n+ tag,\n+ type,\n+ } = fiber;\n+\n+ const usesHooks =\n+ (tag === FunctionComponent ||\n+ tag === SimpleMemoComponent ||\n+ tag === ForwardRef) &&\n+ !!memoizedState;\n+\n+ const typeSymbol = getTypeSymbol(type);\n+\n+ let canViewSource = false;\n+ let context = null;\n+ if (\n+ tag === ClassComponent ||\n+ tag === FunctionComponent ||\n+ tag === IncompleteClassComponent ||\n+ tag === IndeterminateComponent ||\n+ tag === MemoComponent ||\n+ tag === ForwardRef ||\n+ tag === SimpleMemoComponent\n+ ) {\n+ canViewSource = true;\n+ if (stateNode && stateNode.context != null) {\n+ context = stateNode.context;\n+ }\n+ } else if (\n+ typeSymbol === CONTEXT_CONSUMER_NUMBER ||\n+ typeSymbol === CONTEXT_CONSUMER_SYMBOL_STRING\n+ ) {\n+ \/\/ 16.3-16.5 read from \"type\" because the Consumer is the actual context object.\n+ \/\/ 16.6+ should read from \"type._context\" because Consumer can be different (in DEV).\n+ \/\/ NOTE Keep in sync with getDisplayNameForFiber()\n+ const consumerResolvedContext = type._context || type;\n+\n+ \/\/ Global context value.\n+ context = consumerResolvedContext._currentValue || null;\n+\n+ \/\/ Look for overridden value.\n+ let current = ((fiber: any): Fiber).return;\n+ while (current !== null) {\n+ const currentType = current.type;\n+ const currentTypeSymbol = getTypeSymbol(currentType);\n+ if (\n+ currentTypeSymbol === CONTEXT_PROVIDER_NUMBER ||\n+ currentTypeSymbol === CONTEXT_PROVIDER_SYMBOL_STRING\n+ ) {\n+ \/\/ 16.3.0 exposed the context object as \"context\"\n+ \/\/ PR #12501 changed it to \"_context\" for 16.3.1+\n+ \/\/ NOTE Keep in sync with getDisplayNameForFiber()\n+ const providerResolvedContext =\n+ currentType._context || currentType.context;\n+ if (providerResolvedContext === consumerResolvedContext) {\n+ context = current.memoizedProps.value;\n+ break;\n+ }\n+ }\n+\n+ current = current.return;\n+ }\n+ }\n+\n+ if (context !== null) {\n+ \/\/ To simplify hydration and display logic for context, wrap in a value object.\n+ \/\/ Otherwise simple values (e.g. strings, booleans) become harder to handle.\n+ context = { value: context };\n+ }\n+\n+ let owners = null;\n+ if (_debugOwner) {\n+ owners = [];\n+ let owner = _debugOwner;\n+ while (owner !== null) {\n+ owners.push({\n+ displayName: getDisplayNameForFiber(owner) || 'Anonymous',\n+ id: getFiberID(getPrimaryFiber(owner)),\n+ type: getElementTypeForFiber(owner),\n+ });\n+ owner = owner._debugOwner || null;\n+ }\n+ }\n+\n+ const isTimedOutSuspense =\n+ tag === SuspenseComponent && memoizedState !== null;\n+\n+ let hooks = null;\n+ if (usesHooks) {\n+ const originalConsoleMethods = {};\n+\n+ \/\/ Temporarily disable all console logging before re-running the hook.\n+ for (let method in console) {\n+ try {\n+ originalConsoleMethods[method] = console[method];\n+ \/\/ $FlowFixMe property error|warn is not writable.\n+ console[method] = () => {};\n+ } catch (error) {}\n+ }\n+\n+ try {\n+ hooks = inspectHooksOfFiber(\n+ fiber,\n+ (renderer.currentDispatcherRef: any)\n+ );\n+ } finally {\n+ \/\/ Restore original console functionality.\n+ for (let method in originalConsoleMethods) {\n+ try {\n+ \/\/ $FlowFixMe property error|warn is not writable.\n+ console[method] = originalConsoleMethods[method];\n+ } catch (error) {}\n+ }\n+ }\n+ }\n+\n+ return {\n+ id,\n+\n+ \/\/ Does the current renderer support editable hooks?\n+ canEditHooks: typeof overrideHookState === 'function',\n+\n+ \/\/ Does the current renderer support editable function props?\n+ canEditFunctionProps: typeof overrideProps === 'function',\n+\n+ canToggleSuspense:\n+ supportsTogglingSuspense &&\n+ \/\/ If it's showing the real content, we can always flip fallback.\n+ (!isTimedOutSuspense ||\n+ \/\/ If it's showing fallback because we previously forced it to,\n+ \/\/ allow toggling it back to remove the fallback override.\n+ forceFallbackForSuspenseIDs.has(id)),\n+\n+ \/\/ Can view component source location.\n+ canViewSource,\n+\n+ displayName: getDisplayNameForFiber(fiber),\n+ type: getElementTypeForFiber(fiber),\n+\n+ \/\/ Inspectable properties.\n+ \/\/ TODO Review sanitization approach for the below inspectable values.\n+ context,\n+ hooks,\n+ props: memoizedProps,\n+ state: usesHooks ? null : memoizedState,\n+\n+ \/\/ List of owners\n+ owners,\n+\n+ \/\/ Location of component in source coude.\n+ source: _debugSource || null,\n+ };\n+ }\n+\n+ let mostRecentlyInspectedElement: InspectedElement | null = null;\n+ let hasElementUpdatedSinceLastInspected: boolean = false;\n+ let currentlyInspectedPaths: Object = {};\n+\n+ function isMostRecentlyInspectedElementCurrent(id: number): boolean {\n+ return (\n+ mostRecentlyInspectedElement !== null &&\n+ mostRecentlyInspectedElement.id === id &&\n+ !hasElementUpdatedSinceLastInspected\n+ );\n+ }\n+\n+ \/\/ Track the intersection of currently inspected paths,\n+ \/\/ so that we can send their data along if the element is re-rendered.\n+ function mergeInspectedPaths(path: Array<string | number>) {\n+ let current = currentlyInspectedPaths;\n+ path.forEach(key => {\n+ if (!current[key]) {\n+ current[key] = {};\n+ }\n+ current = current[key];\n+ });\n+ }\n+\n+ function createIsPathWhitelisted(\n+ key: string | null,\n+ secondaryCategory: 'hooks' | null\n+ ) {\n+ \/\/ This function helps prevent previously-inspected paths from being dehydrated in updates.\n+ \/\/ This is important to avoid a bad user experience where expanded toggles collapse on update.\n+ return function isPathWhitelisted(path: Array<string | number>): boolean {\n+ switch (secondaryCategory) {\n+ case 'hooks':\n+ if (path.length === 1) {\n+ \/\/ Never dehydrate the \"hooks\" object at the top levels.\n+ return true;\n+ }\n+ if (\n+ path[path.length - 1] === 'subHooks' ||\n+ path[path.length - 2] === 'subHooks'\n+ ) {\n+ \/\/ Dehydrating the 'subHooks' property makes the HooksTree UI a lot more complicated,\n+ \/\/ so it's easiest for now if we just don't break on this boundary.\n+ \/\/ We can always dehydrate a level deeper (in the value object).\n+ return true;\n+ }\n+ break;\n+ default:\n+ break;\n+ }\n+\n+ let current =\n+ key === null ? currentlyInspectedPaths : currentlyInspectedPaths[key];\n+ if (!current) {\n+ return false;\n+ }\n+ for (let i = 0; i < path.length; i++) {\n+ current = current[path[i]];\n+ if (!current) {\n+ return false;\n+ }\n+ }\n+ return true;\n+ };\n+ }\n+\n+ function updateSelectedElement(inspectedElement: InspectedElement): void {\n+ const { hooks, id, props } = inspectedElement;\n+\n+ let fiber = idToFiberMap.get(id);\n+ if (fiber == null) {\n+ console.warn(`Could not find Fiber with id \"${id}\"`);\n+ return;\n+ }\n+\n+ const { elementType, stateNode, tag, type } = fiber;\n+\n+ switch (tag) {\n+ case ClassComponent:\n+ case IncompleteClassComponent:\n+ case IndeterminateComponent:\n+ global.$r = stateNode;\n+ break;\n+ case FunctionComponent:\n+ global.$r = {\n+ hooks,\n+ props,\n+ type,\n+ };\n+ break;\n+ case ForwardRef:\n+ global.$r = {\n+ props,\n+ type: type.render,\n+ };\n+ break;\n+ case MemoComponent:\n+ case SimpleMemoComponent:\n+ global.$r = {\n+ props,\n+ type:\n+ elementType != null && elementType.type != null\n+ ? elementType.type\n+ : type,\n+ };\n+ break;\n+ default:\n+ global.$r = null;\n+ break;\n+ }\n+ }\n+\n+ function inspectElement(\n+ id: number,\n+ path?: Array<string | number>\n+ ): InspectedElementPayload {\n+ const isCurrent = isMostRecentlyInspectedElementCurrent(id);\n+\n+ if (isCurrent) {\n+ if (path != null) {\n+ mergeInspectedPaths(path);\n+\n+ let secondaryCategory = null;\n+ if (path[0] === 'hooks') {\n+ secondaryCategory = 'hooks';\n+ }\n+\n+ \/\/ If this element has not been updated since it was last inspected,\n+ \/\/ we can just return the subset of data in the newly-inspected path.\n+ return {\n+ id,\n+ type: 'hydrated-path',\n+ path,\n+ value: cleanForBridge(\n+ getInObject(\n+ ((mostRecentlyInspectedElement: any): InspectedElement),\n+ path\n+ ),\n+ createIsPathWhitelisted(null, secondaryCategory),\n+ path\n+ ),\n+ };\n+ } else {\n+ \/\/ If this element has not been updated since it was last inspected, we don't need to re-run it.\n+ \/\/ Instead we can just return the ID to indicate that it has not changed.\n+ return {\n+ id,\n+ type: 'no-change',\n+ };\n+ }\n+ } else {\n+ hasElementUpdatedSinceLastInspected = false;\n+\n+ if (\n+ mostRecentlyInspectedElement === null ||\n+ mostRecentlyInspectedElement.id !== id\n+ ) {\n+ currentlyInspectedPaths = {};\n+ }\n+\n+ mostRecentlyInspectedElement = inspectElementRaw(id);\n+ if (mostRecentlyInspectedElement === null) {\n+ return {\n+ id,\n+ type: 'not-found',\n+ };\n+ }\n+\n+ if (path != null) {\n+ mergeInspectedPaths(path);\n+ }\n+\n+ \/\/ Any time an inspected element has an update,\n+ \/\/ we should update the selected $r value as wel.\n+ \/\/ Do this before dehyration (cleanForBridge).\n+ updateSelectedElement(mostRecentlyInspectedElement);\n+\n+ \/\/ Clone before cleaning so that we preserve the full data.\n+ \/\/ This will enable us to send patches without re-inspecting if hydrated paths are requested.\n+ \/\/ (Reducing how often we shallow-render is a better DX for function components that use hooks.)\n+ const cleanedInspectedElement = { ...mostRecentlyInspectedElement };\n+ cleanedInspectedElement.context = cleanForBridge(\n+ cleanedInspectedElement.context,\n+ createIsPathWhitelisted('context', null)\n+ );\n+ cleanedInspectedElement.hooks = cleanForBridge(\n+ cleanedInspectedElement.hooks,\n+ createIsPathWhitelisted('hooks', 'hooks')\n+ );\n+ cleanedInspectedElement.props = cleanForBridge(\n+ cleanedInspectedElement.props,\n+ createIsPathWhitelisted('props', null)\n+ );\n+ cleanedInspectedElement.state = cleanForBridge(\n+ cleanedInspectedElement.state,\n+ createIsPathWhitelisted('state', null)\n+ );\n+\n+ return {\n+ id,\n+ type: 'full-data',\n+ value: cleanedInspectedElement,\n+ };\n+ }\n+ }\n+\n+ function logElementToConsole(id) {\n+ const result = isMostRecentlyInspectedElementCurrent(id)\n+ ? mostRecentlyInspectedElement\n+ : inspectElementRaw(id);\n+ if (result === null) {\n+ console.warn(`Could not find Fiber with id \"${id}\"`);\n+ return;\n+ }\n+\n+ const supportsGroup = typeof console.groupCollapsed === 'function';\n+ if (supportsGroup) {\n+ console.groupCollapsed(\n+ `[Click to expand] %c<${result.displayName || 'Component'} \/>`,\n+ \/\/ --dom-tag-name-color is the CSS variable Chrome styles HTML elements with in the console.\n+ 'color: var(--dom-tag-name-color); font-weight: normal;'\n+ );\n+ }\n+ if (result.props !== null) {\n+ console.log('Props:', result.props);\n+ }\n+ if (result.state !== null) {\n+ console.log('State:', result.state);\n+ }\n+ if (result.hooks !== null) {\n+ console.log('Hooks:', result.hooks);\n+ }\n+ const nativeNodes = findNativeNodesForFiberID(id);\n+ if (nativeNodes !== null) {\n+ console.log('Nodes:', nativeNodes);\n+ }\n+ if (result.source !== null) {\n+ console.log('Location:', result.source);\n+ }\n+ if (window.chrome || \/firefox\/i.test(navigator.userAgent)) {\n+ console.log(\n+ 'Right-click any value to save it as a global variable for further inspection.'\n+ );\n+ }\n+ if (supportsGroup) {\n+ console.groupEnd();\n+ }\n+ }\n+\n+ function setInHook(\n+ id: number,\n+ index: number,\n+ path: Array<string | number>,\n+ value: any\n+ ) {\n+ const fiber = findCurrentFiberUsingSlowPathById(id);\n+ if (fiber !== null) {\n+ if (typeof overrideHookState === 'function') {\n+ overrideHookState(fiber, index, path, value);\n+ }\n+ }\n+ }\n+\n+ function setInProps(id: number, path: Array<string | number>, value: any) {\n+ const fiber = findCurrentFiberUsingSlowPathById(id);\n+ if (fiber !== null) {\n+ const instance = fiber.stateNode;\n+ if (instance === null) {\n+ if (typeof overrideProps === 'function') {\n+ overrideProps(fiber, path, value);\n+ }\n+ } else {\n+ fiber.pendingProps = copyWithSet(instance.props, path, value);\n+ instance.forceUpdate();\n+ }\n+ }\n+ }\n+\n+ function setInState(id: number, path: Array<string | number>, value: any) {\n+ const fiber = findCurrentFiberUsingSlowPathById(id);\n+ if (fiber !== null) {\n+ const instance = fiber.stateNode;\n+ setInObject(instance.state, path, value);\n+ instance.forceUpdate();\n+ }\n+ }\n+\n+ function setInContext(id: number, path: Array<string | number>, value: any) {\n+ \/\/ To simplify hydration and display of primative context values (e.g. number, string)\n+ \/\/ the inspectElement() method wraps context in a {value: ...} object.\n+ \/\/ We need to remove the first part of the path (the \"value\") before continuing.\n+ path = path.slice(1);\n+\n+ const fiber = findCurrentFiberUsingSlowPathById(id);\n+ if (fiber !== null) {\n+ const instance = fiber.stateNode;\n+ if (path.length === 0) {\n+ \/\/ Simple context value\n+ instance.context = value;\n+ } else {\n+ setInObject(instance.context, path, value);\n+ }\n+ instance.forceUpdate();\n+ }\n+ }\n+\n+ type CommitProfilingData = {|\n+ changeDescriptions: Map<number, ChangeDescription> | null,\n+ commitTime: number,\n+ durations: Array<number>,\n+ interactions: Array<Interaction>,\n+ maxActualDuration: number,\n+ priorityLevel: string | null,\n+ |};\n+\n+ type CommitProfilingMetadataMap = Map<number, Array<CommitProfilingData>>;\n+ type DisplayNamesByRootID = Map<number, string>;\n+\n+ let currentCommitProfilingMetadata: CommitProfilingData | null = null;\n+ let displayNamesByRootID: DisplayNamesByRootID | null = null;\n+ let idToContextsMap: Map<number, any> | null = null;\n+ let initialTreeBaseDurationsMap: Map<number, number> | null = null;\n+ let initialIDToRootMap: Map<number, number> | null = null;\n+ let isProfiling: boolean = false;\n+ let profilingStartTime: number = 0;\n+ let recordChangeDescriptions: boolean = false;\n+ let rootToCommitProfilingMetadataMap: CommitProfilingMetadataMap | null = null;\n+\n+ function getProfilingData(): ProfilingDataBackend {\n+ const dataForRoots: Array<ProfilingDataForRootBackend> = [];\n+\n+ if (rootToCommitProfilingMetadataMap === null) {\n+ throw Error(\n+ 'getProfilingData() called before any profiling data was recorded'\n+ );\n+ }\n+\n+ rootToCommitProfilingMetadataMap.forEach(\n+ (commitProfilingMetadata, rootID) => {\n+ const commitData: Array<CommitDataBackend> = [];\n+ const initialTreeBaseDurations: Array<[number, number]> = [];\n+ const allInteractions: Map<number, Interaction> = new Map();\n+ const interactionCommits: Map<number, Array<number>> = new Map();\n+\n+ const displayName =\n+ (displayNamesByRootID !== null && displayNamesByRootID.get(rootID)) ||\n+ 'Unknown';\n+\n+ if (initialTreeBaseDurationsMap != null) {\n+ initialTreeBaseDurationsMap.forEach((treeBaseDuration, id) => {\n+ if (\n+ initialIDToRootMap != null &&\n+ initialIDToRootMap.get(id) === rootID\n+ ) {\n+ \/\/ We don't need to convert milliseconds to microseconds in this case,\n+ \/\/ because the profiling summary is JSON serialized.\n+ initialTreeBaseDurations.push([id, treeBaseDuration]);\n+ }\n+ });\n+ }\n+\n+ commitProfilingMetadata.forEach((commitProfilingData, commitIndex) => {\n+ const {\n+ changeDescriptions,\n+ durations,\n+ interactions,\n+ maxActualDuration,\n+ priorityLevel,\n+ commitTime,\n+ } = commitProfilingData;\n+\n+ const interactionIDs: Array<number> = [];\n+\n+ interactions.forEach(interaction => {\n+ if (!allInteractions.has(interaction.id)) {\n+ allInteractions.set(interaction.id, interaction);\n+ }\n+\n+ interactionIDs.push(interaction.id);\n+\n+ const commitIndices = interactionCommits.get(interaction.id);\n+ if (commitIndices != null) {\n+ commitIndices.push(commitIndex);\n+ } else {\n+ interactionCommits.set(interaction.id, [commitIndex]);\n+ }\n+ });\n+\n+ const fiberActualDurations: Array<[number, number]> = [];\n+ const fiberSelfDurations: Array<[number, number]> = [];\n+ for (let i = 0; i < durations.length; i += 3) {\n+ const fiberID = durations[i];\n+ fiberActualDurations.push([fiberID, durations[i + 1]]);\n+ fiberSelfDurations.push([fiberID, durations[i + 2]]);\n+ }\n+\n+ commitData.push({\n+ changeDescriptions:\n+ changeDescriptions !== null\n+ ? Array.from(changeDescriptions.entries())\n+ : null,\n+ duration: maxActualDuration,\n+ fiberActualDurations,\n+ fiberSelfDurations,\n+ interactionIDs,\n+ priorityLevel,\n+ timestamp: commitTime,\n+ });\n+ });\n+\n+ dataForRoots.push({\n+ commitData,\n+ displayName,\n+ initialTreeBaseDurations,\n+ interactionCommits: Array.from(interactionCommits.entries()),\n+ interactions: Array.from(allInteractions.entries()),\n+ rootID,\n+ });\n+ }\n+ );\n+\n+ return {\n+ dataForRoots,\n+ rendererID,\n+ };\n+ }\n+\n+ function startProfiling(shouldRecordChangeDescriptions: boolean) {\n+ if (isProfiling) {\n+ return;\n+ }\n+\n+ recordChangeDescriptions = shouldRecordChangeDescriptions;\n+\n+ \/\/ Capture initial values as of the time profiling starts.\n+ \/\/ It's important we snapshot both the durations and the id-to-root map,\n+ \/\/ since either of these may change during the profiling session\n+ \/\/ (e.g. when a fiber is re-rendered or when a fiber gets removed).\n+ displayNamesByRootID = new Map();\n+ initialTreeBaseDurationsMap = new Map(idToTreeBaseDurationMap);\n+ initialIDToRootMap = new Map(idToRootMap);\n+ idToContextsMap = new Map();\n+\n+ hook.getFiberRoots(rendererID).forEach(root => {\n+ const rootID = getFiberID(getPrimaryFiber(root.current));\n+ ((displayNamesByRootID: any): DisplayNamesByRootID).set(\n+ rootID,\n+ getDisplayNameForRoot(root.current)\n+ );\n+\n+ if (shouldRecordChangeDescriptions) {\n+ \/\/ Record all contexts at the time profiling is started.\n+ \/\/ Fibers only store the current context value,\n+ \/\/ so we need to track them separatenly in order to determine changed keys.\n+ crawlToInitializeContextsMap(root.current);\n+ }\n+ });\n+\n+ isProfiling = true;\n+ profilingStartTime = getCurrentTime();\n+ rootToCommitProfilingMetadataMap = new Map();\n+ }\n+\n+ function stopProfiling() {\n+ isProfiling = false;\n+ recordChangeDescriptions = false;\n+ }\n+\n+ \/\/ Automatically start profiling so that we don't miss timing info from initial \"mount\".\n+ if (\n+ sessionStorageGetItem(SESSION_STORAGE_RELOAD_AND_PROFILE_KEY) === 'true'\n+ ) {\n+ startProfiling(\n+ sessionStorageGetItem(SESSION_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY) ===\n+ 'true'\n+ );\n+ }\n+\n+ \/\/ React will switch between these implementations depending on whether\n+ \/\/ we have any manually suspended Fibers or not.\n+\n+ function shouldSuspendFiberAlwaysFalse() {\n+ return false;\n+ }\n+\n+ let forceFallbackForSuspenseIDs = new Set();\n+ function shouldSuspendFiberAccordingToSet(fiber) {\n+ const id = getFiberID(getPrimaryFiber(((fiber: any): Fiber)));\n+ return forceFallbackForSuspenseIDs.has(id);\n+ }\n+\n+ function overrideSuspense(id, forceFallback) {\n+ if (\n+ typeof setSuspenseHandler !== 'function' ||\n+ typeof scheduleUpdate !== 'function'\n+ ) {\n+ throw new Error(\n+ 'Expected overrideSuspense() to not get called for earlier React versions.'\n+ );\n+ }\n+ if (forceFallback) {\n+ forceFallbackForSuspenseIDs.add(id);\n+ if (forceFallbackForSuspenseIDs.size === 1) {\n+ \/\/ First override is added. Switch React to slower path.\n+ setSuspenseHandler(shouldSuspendFiberAccordingToSet);\n+ }\n+ } else {\n+ forceFallbackForSuspenseIDs.delete(id);\n+ if (forceFallbackForSuspenseIDs.size === 0) {\n+ \/\/ Last override is gone. Switch React back to fast path.\n+ setSuspenseHandler(shouldSuspendFiberAlwaysFalse);\n+ }\n+ }\n+ const fiber = idToFiberMap.get(id);\n+ scheduleUpdate(fiber);\n+ }\n+\n+ \/\/ Remember if we're trying to restore the selection after reload.\n+ \/\/ In that case, we'll do some extra checks for matching mounts.\n+ let trackedPath: Array<PathFrame> | null = null;\n+ let trackedPathMatchFiber: Fiber | null = null;\n+ let trackedPathMatchDepth = -1;\n+ let mightBeOnTrackedPath = false;\n+\n+ function setTrackedPath(path: Array<PathFrame> | null) {\n+ if (path === null) {\n+ trackedPathMatchFiber = null;\n+ trackedPathMatchDepth = -1;\n+ mightBeOnTrackedPath = false;\n+ }\n+ trackedPath = path;\n+ }\n+\n+ \/\/ We call this before traversing a new mount.\n+ \/\/ It remembers whether this Fiber is the next best match for tracked path.\n+ \/\/ The return value signals whether we should keep matching siblings or not.\n+ function updateTrackedPathStateBeforeMount(fiber: Fiber): boolean {\n+ if (trackedPath === null || !mightBeOnTrackedPath) {\n+ \/\/ Fast path: there's nothing to track so do nothing and ignore siblings.\n+ return false;\n+ }\n+ const returnFiber = fiber.return;\n+ const returnAlternate = returnFiber !== null ? returnFiber.alternate : null;\n+ \/\/ By now we know there's some selection to restore, and this is a new Fiber.\n+ \/\/ Is this newly mounted Fiber a direct child of the current best match?\n+ \/\/ (This will also be true for new roots if we haven't matched anything yet.)\n+ if (\n+ trackedPathMatchFiber === returnFiber ||\n+ (trackedPathMatchFiber === returnAlternate && returnAlternate !== null)\n+ ) {\n+ \/\/ Is this the next Fiber we should select? Let's compare the frames.\n+ const actualFrame = getPathFrame(fiber);\n+ const expectedFrame = trackedPath[trackedPathMatchDepth + 1];\n+ if (expectedFrame === undefined) {\n+ throw new Error('Expected to see a frame at the next depth.');\n+ }\n+ if (\n+ actualFrame.index === expectedFrame.index &&\n+ actualFrame.key === expectedFrame.key &&\n+ actualFrame.displayName === expectedFrame.displayName\n+ ) {\n+ \/\/ We have our next match.\n+ trackedPathMatchFiber = fiber;\n+ trackedPathMatchDepth++;\n+ \/\/ Are we out of frames to match?\n+ if (trackedPathMatchDepth === trackedPath.length - 1) {\n+ \/\/ There's nothing that can possibly match afterwards.\n+ \/\/ Don't check the children.\n+ mightBeOnTrackedPath = false;\n+ } else {\n+ \/\/ Check the children, as they might reveal the next match.\n+ mightBeOnTrackedPath = true;\n+ }\n+ \/\/ In either case, since we have a match, we don't need\n+ \/\/ to check the siblings. They'll never match.\n+ return false;\n+ }\n+ }\n+ \/\/ This Fiber's parent is on the path, but this Fiber itself isn't.\n+ \/\/ There's no need to check its children--they won't be on the path either.\n+ mightBeOnTrackedPath = false;\n+ \/\/ However, one of its siblings may be on the path so keep searching.\n+ return true;\n+ }\n+\n+ function updateTrackedPathStateAfterMount(mightSiblingsBeOnTrackedPath) {\n+ \/\/ updateTrackedPathStateBeforeMount() told us whether to match siblings.\n+ \/\/ Now that we're entering siblings, let's use that information.\n+ mightBeOnTrackedPath = mightSiblingsBeOnTrackedPath;\n+ }\n+\n+ \/\/ Roots don't have a real persistent identity.\n+ \/\/ A root's \"pseudo key\" is \"childDisplayName:indexWithThatName\".\n+ \/\/ For example, \"App:0\" or, in case of similar roots, \"Story:0\", \"Story:1\", etc.\n+ \/\/ We will use this to try to disambiguate roots when restoring selection between reloads.\n+ const rootPseudoKeys: Map<number, string> = new Map();\n+ const rootDisplayNameCounter: Map<string, number> = new Map();\n+\n+ function setRootPseudoKey(id: number, fiber: Fiber) {\n+ const name = getDisplayNameForRoot(fiber);\n+ const counter = rootDisplayNameCounter.get(name) || 0;\n+ rootDisplayNameCounter.set(name, counter + 1);\n+ const pseudoKey = `${name}:${counter}`;\n+ rootPseudoKeys.set(id, pseudoKey);\n+ }\n+\n+ function removeRootPseudoKey(id: number) {\n+ const pseudoKey = rootPseudoKeys.get(id);\n+ if (pseudoKey === undefined) {\n+ throw new Error('Expected root pseudo key to be known.');\n+ }\n+ const name = pseudoKey.substring(0, pseudoKey.lastIndexOf(':'));\n+ const counter = rootDisplayNameCounter.get(name);\n+ if (counter === undefined) {\n+ throw new Error('Expected counter to be known.');\n+ }\n+ if (counter > 1) {\n+ rootDisplayNameCounter.set(name, counter - 1);\n+ } else {\n+ rootDisplayNameCounter.delete(name);\n+ }\n+ rootPseudoKeys.delete(id);\n+ }\n+\n+ function getDisplayNameForRoot(fiber: Fiber): string {\n+ let preferredDisplayName = null;\n+ let fallbackDisplayName = null;\n+ let child = fiber.child;\n+ \/\/ Go at most three levels deep into direct children\n+ \/\/ while searching for a child that has a displayName.\n+ for (let i = 0; i < 3; i++) {\n+ if (child === null) {\n+ break;\n+ }\n+ const displayName = getDisplayNameForFiber(child);\n+ if (displayName !== null) {\n+ \/\/ Prefer display names that we get from user-defined components.\n+ \/\/ We want to avoid using e.g. 'Suspense' unless we find nothing else.\n+ if (typeof child.type === 'function') {\n+ \/\/ There's a few user-defined tags, but we'll prefer the ones\n+ \/\/ that are usually explicitly named (function or class components).\n+ preferredDisplayName = displayName;\n+ } else if (fallbackDisplayName === null) {\n+ fallbackDisplayName = displayName;\n+ }\n+ }\n+ if (preferredDisplayName !== null) {\n+ break;\n+ }\n+ child = child.child;\n+ }\n+ return preferredDisplayName || fallbackDisplayName || 'Anonymous';\n+ }\n+\n+ function getPathFrame(fiber: Fiber): PathFrame {\n+ const { key } = fiber;\n+ let displayName = getDisplayNameForFiber(fiber);\n+ const index = fiber.index;\n+ switch (fiber.tag) {\n+ case HostRoot:\n+ \/\/ Roots don't have a real displayName, index, or key.\n+ \/\/ Instead, we'll use the pseudo key (childDisplayName:indexWithThatName).\n+ const id = getFiberID(getPrimaryFiber(fiber));\n+ const pseudoKey = rootPseudoKeys.get(id);\n+ if (pseudoKey === undefined) {\n+ throw new Error('Expected mounted root to have known pseudo key.');\n+ }\n+ displayName = pseudoKey;\n+ break;\n+ case HostComponent:\n+ displayName = fiber.type;\n+ break;\n+ default:\n+ break;\n+ }\n+ return {\n+ displayName,\n+ key,\n+ index,\n+ };\n+ }\n+\n+ \/\/ Produces a serializable representation that does a best effort\n+ \/\/ of identifying a particular Fiber between page reloads.\n+ \/\/ The return path will contain Fibers that are \"invisible\" to the store\n+ \/\/ because their keys and indexes are important to restoring the selection.\n+ function getPathForElement(id: number): Array<PathFrame> | null {\n+ let fiber = idToFiberMap.get(id);\n+ if (fiber == null) {\n+ return null;\n+ }\n+ const keyPath = [];\n+ while (fiber !== null) {\n+ keyPath.push(getPathFrame(fiber));\n+ fiber = fiber.return;\n+ }\n+ keyPath.reverse();\n+ return keyPath;\n+ }\n+\n+ function getBestMatchForTrackedPath(): PathMatch | null {\n+ if (trackedPath === null) {\n+ \/\/ Nothing to match.\n+ return null;\n+ }\n+ if (trackedPathMatchFiber === null) {\n+ \/\/ We didn't find anything.\n+ return null;\n+ }\n+ \/\/ Find the closest Fiber store is aware of.\n+ let fiber = trackedPathMatchFiber;\n+ while (fiber !== null && shouldFilterFiber(fiber)) {\n+ fiber = fiber.return;\n+ }\n+ if (fiber === null) {\n+ return null;\n+ }\n+ return {\n+ id: getFiberID(getPrimaryFiber(fiber)),\n+ isFullMatch: trackedPathMatchDepth === trackedPath.length - 1,\n+ };\n+ }\n+\n+ const formatPriorityLevel = (priorityLevel: ?number) => {\n+ if (priorityLevel == null) {\n+ return 'Unknown';\n+ }\n+\n+ switch (priorityLevel) {\n+ case ImmediatePriority:\n+ return 'Immediate';\n+ case UserBlockingPriority:\n+ return 'User-Blocking';\n+ case NormalPriority:\n+ return 'Normal';\n+ case LowPriority:\n+ return 'Low';\n+ case IdlePriority:\n+ return 'Idle';\n+ case NoPriority:\n+ default:\n+ return 'Unknown';\n+ }\n+ };\n+\n+ return {\n+ cleanup,\n+ findNativeNodesForFiberID,\n+ flushInitialOperations,\n+ getBestMatchForTrackedPath,\n+ getFiberIDForNative,\n+ getInstanceAndStyle,\n+ getOwnersList,\n+ getPathForElement,\n+ getProfilingData,\n+ handleCommitFiberRoot,\n+ handleCommitFiberUnmount,\n+ inspectElement,\n+ logElementToConsole,\n+ prepareViewElementSource,\n+ overrideSuspense,\n+ renderer,\n+ setInContext,\n+ setInHook,\n+ setInProps,\n+ setInState,\n+ setTrackedPath,\n+ startProfiling,\n+ stopProfiling,\n+ updateComponentFilters,\n+ };\n+}\ndiff --git a\/src\/backend\/types.js b\/src\/backend\/types.js\nnew file mode 100644\nindex 0000000000..75cd1e11f5\n--- \/dev\/null\n+++ b\/src\/backend\/types.js\n@@ -0,0 +1,377 @@\n+\/\/ @flow\n+\n+import type { ComponentFilter, ElementType } from 'src\/types';\n+import type { Interaction } from 'src\/devtools\/views\/Profiler\/types';\n+import type { ResolveNativeStyle } from 'src\/backend\/NativeStyleEditor\/setupNativeStyleEditor';\n+\n+type BundleType =\n+ | 0 \/\/ PROD\n+ | 1; \/\/ DEV\n+\n+export type WorkTag = number;\n+export type SideEffectTag = number;\n+export type ExpirationTime = number;\n+export type RefObject = {|\n+ current: any,\n+|};\n+export type Source = {|\n+ fileName: string,\n+ lineNumber: number,\n+|};\n+export type HookType =\n+ | 'useState'\n+ | 'useReducer'\n+ | 'useContext'\n+ | 'useRef'\n+ | 'useEffect'\n+ | 'useLayoutEffect'\n+ | 'useCallback'\n+ | 'useMemo'\n+ | 'useImperativeHandle'\n+ | 'useDebugValue';\n+\n+\/\/ The Fiber type is copied from React and should be kept in sync:\n+\/\/ https:\/\/github.com\/facebook\/react\/blob\/master\/packages\/react-reconciler\/src\/ReactFiber.js\n+\/\/ The properties we don't use in DevTools are omitted.\n+export type Fiber = {|\n+ tag: WorkTag,\n+\n+ key: null | string,\n+\n+ elementType: any,\n+\n+ type: any,\n+\n+ stateNode: any,\n+\n+ return: Fiber | null,\n+\n+ child: Fiber | null,\n+ sibling: Fiber | null,\n+ index: number,\n+\n+ ref: null | (((handle: mixed) => void) & { _stringRef: ?string }) | RefObject,\n+\n+ pendingProps: any, \/\/ This type will be more specific once we overload the tag.\n+ memoizedProps: any, \/\/ The props used to create the output.\n+\n+ memoizedState: any,\n+\n+ effectTag: SideEffectTag,\n+\n+ alternate: Fiber | null,\n+\n+ actualDuration?: number,\n+\n+ actualStartTime?: number,\n+\n+ treeBaseDuration?: number,\n+\n+ _debugSource?: Source | null,\n+ _debugOwner?: Fiber | null,\n+|};\n+\n+\/\/ TODO: If it's useful for the frontend to know which types of data an Element has\n+\/\/ (e.g. props, state, context, hooks) then we could add a bitmask field for this\n+\/\/ to keep the number of attributes small.\n+export type FiberData = {|\n+ key: string | null,\n+ displayName: string | null,\n+ type: ElementType,\n+|};\n+\n+export type NativeType = Object;\n+export type RendererID = number;\n+\n+type Dispatcher = any;\n+\n+export type GetFiberIDForNative = (\n+ component: NativeType,\n+ findNearestUnfilteredAncestor?: boolean\n+) => number | null;\n+export type FindNativeNodesForFiberID = (id: number) => ?Array<NativeType>;\n+\n+export type ReactProviderType<T> = {\n+ $$typeof: Symbol | number,\n+ _context: ReactContext<T>,\n+};\n+\n+export type ReactContext<T> = {\n+ $$typeof: Symbol | number,\n+ Consumer: ReactContext<T>,\n+ Provider: ReactProviderType<T>,\n+\n+ _calculateChangedBits: ((a: T, b: T) => number) | null,\n+\n+ _currentValue: T,\n+ _currentValue2: T,\n+ _threadCount: number,\n+\n+ \/\/ DEV only\n+ _currentRenderer?: Object | null,\n+ _currentRenderer2?: Object | null,\n+};\n+\n+export type ReactRenderer = {\n+ findFiberByHostInstance: (hostInstance: NativeType) => ?Fiber,\n+ version: string,\n+ bundleType: BundleType,\n+\n+ \/\/ 16.9+\n+ overrideHookState?: ?(\n+ fiber: Object,\n+ id: number,\n+ path: Array<string | number>,\n+ value: any\n+ ) => void,\n+\n+ \/\/ 16.7+\n+ overrideProps?: ?(\n+ fiber: Object,\n+ path: Array<string | number>,\n+ value: any\n+ ) => void,\n+\n+ \/\/ 16.9+\n+ scheduleUpdate?: ?(fiber: Object) => void,\n+ setSuspenseHandler?: ?(shouldSuspend: (fiber: Object) => boolean) => void,\n+\n+ \/\/ Only injected by React v16.8+ in order to support hooks inspection.\n+ currentDispatcherRef?: {| current: null | Dispatcher |},\n+\n+ \/\/ Only injected by React v16.9+ in DEV mode.\n+ \/\/ Enables DevTools to append owners-only component stack to error messages.\n+ getCurrentFiber?: () => Fiber | null,\n+\n+ \/\/ <= 15\n+ Mount?: any,\n+};\n+\n+export type ChangeDescription = {|\n+ context: Array<string> | boolean | null,\n+ didHooksChange: boolean,\n+ isFirstMount: boolean,\n+ props: Array<string> | null,\n+ state: Array<string> | null,\n+|};\n+\n+export type CommitDataBackend = {|\n+ \/\/ Tuple of fiber ID and change description\n+ changeDescriptions: Array<[number, ChangeDescription]> | null,\n+ duration: number,\n+ \/\/ Tuple of fiber ID and actual duration\n+ fiberActualDurations: Array<[number, number]>,\n+ \/\/ Tuple of fiber ID and computed \"self\" duration\n+ fiberSelfDurations: Array<[number, number]>,\n+ interactionIDs: Array<number>,\n+ priorityLevel: string | null,\n+ timestamp: number,\n+|};\n+\n+export type ProfilingDataForRootBackend = {|\n+ commitData: Array<CommitDataBackend>,\n+ displayName: string,\n+ \/\/ Tuple of Fiber ID and base duration\n+ initialTreeBaseDurations: Array<[number, number]>,\n+ \/\/ Tuple of Interaction ID and commit indices\n+ interactionCommits: Array<[number, Array<number>]>,\n+ interactions: Array<[number, Interaction]>,\n+ rootID: number,\n+|};\n+\n+\/\/ Profiling data collected by the renderer interface.\n+\/\/ This information will be passed to the frontend and combined with info it collects.\n+export type ProfilingDataBackend = {|\n+ dataForRoots: Array<ProfilingDataForRootBackend>,\n+ rendererID: number,\n+|};\n+\n+export type PathFrame = {|\n+ key: string | null,\n+ index: number,\n+ displayName: string | null,\n+|};\n+\n+export type PathMatch = {|\n+ id: number,\n+ isFullMatch: boolean,\n+|};\n+\n+export type Owner = {|\n+ displayName: string | null,\n+ id: number,\n+ type: ElementType,\n+|};\n+\n+export type OwnersList = {|\n+ id: number,\n+ owners: Array<Owner> | null,\n+|};\n+\n+export type InspectedElement = {|\n+ id: number,\n+\n+ displayName: string | null,\n+\n+ \/\/ Does the current renderer support editable hooks?\n+ canEditHooks: boolean,\n+\n+ \/\/ Does the current renderer support editable function props?\n+ canEditFunctionProps: boolean,\n+\n+ \/\/ Is this Suspense, and can its value be overriden now?\n+ canToggleSuspense: boolean,\n+\n+ \/\/ Can view component source location.\n+ canViewSource: boolean,\n+\n+ \/\/ Inspectable properties.\n+ context: Object | null,\n+ hooks: Object | null,\n+ props: Object | null,\n+ state: Object | null,\n+\n+ \/\/ List of owners\n+ owners: Array<Owner> | null,\n+\n+ \/\/ Location of component in source coude.\n+ source: Source | null,\n+\n+ type: ElementType,\n+|};\n+\n+export const InspectElementFullDataType = 'full-data';\n+export const InspectElementNoChangeType = 'no-change';\n+export const InspectElementNotFoundType = 'not-found';\n+export const InspectElementHydratedPathType = 'hydrated-path';\n+\n+type InspectElementFullData = {|\n+ id: number,\n+ type: 'full-data',\n+ value: InspectedElement,\n+|};\n+\n+type InspectElementHydratedPath = {|\n+ id: number,\n+ type: 'hydrated-path',\n+ path: Array<string | number>,\n+ value: any,\n+|};\n+\n+type InspectElementNoChange = {|\n+ id: number,\n+ type: 'no-change',\n+|};\n+\n+type InspectElementNotFound = {|\n+ id: number,\n+ type: 'not-found',\n+|};\n+\n+export type InspectedElementPayload =\n+ | InspectElementFullData\n+ | InspectElementHydratedPath\n+ | InspectElementNoChange\n+ | InspectElementNotFound;\n+\n+export type InstanceAndStyle = {|\n+ instance: Object | null,\n+ style: Object | null,\n+|};\n+\n+export type RendererInterface = {\n+ cleanup: () => void,\n+ findNativeNodesForFiberID: FindNativeNodesForFiberID,\n+ flushInitialOperations: () => void,\n+ getBestMatchForTrackedPath: () => PathMatch | null,\n+ getFiberIDForNative: GetFiberIDForNative,\n+ getInstanceAndStyle(id: number): InstanceAndStyle,\n+ getProfilingData(): ProfilingDataBackend,\n+ getOwnersList: (id: number) => Array<Owner> | null,\n+ getPathForElement: (id: number) => Array<PathFrame> | null,\n+ handleCommitFiberRoot: (fiber: Object, commitPriority?: number) => void,\n+ handleCommitFiberUnmount: (fiber: Object) => void,\n+ inspectElement: (\n+ id: number,\n+ path?: Array<string | number>\n+ ) => InspectedElementPayload,\n+ logElementToConsole: (id: number) => void,\n+ overrideSuspense: (id: number, forceFallback: boolean) => void,\n+ prepareViewElementSource: (id: number) => void,\n+ renderer: ReactRenderer | null,\n+ setInContext: (id: number, path: Array<string | number>, value: any) => void,\n+ setInHook: (\n+ id: number,\n+ index: number,\n+ path: Array<string | number>,\n+ value: any\n+ ) => void,\n+ setInProps: (id: number, path: Array<string | number>, value: any) => void,\n+ setInState: (id: number, path: Array<string | number>, value: any) => void,\n+ setTrackedPath: (path: Array<PathFrame> | null) => void,\n+ startProfiling: (recordChangeDescriptions: boolean) => void,\n+ stopProfiling: () => void,\n+ updateComponentFilters: (somponentFilters: Array<ComponentFilter>) => void,\n+};\n+\n+export type Handler = (data: any) => void;\n+\n+export type DevToolsHook = {\n+ listeners: { [key: string]: Array<Handler> },\n+ rendererInterfaces: Map<RendererID, RendererInterface>,\n+ renderers: Map<RendererID, ReactRenderer>,\n+\n+ emit: (event: string, data: any) => void,\n+ getFiberRoots: (rendererID: RendererID) => Set<Object>,\n+ inject: (renderer: ReactRenderer) => number | null,\n+ on: (event: string, handler: Handler) => void,\n+ off: (event: string, handler: Handler) => void,\n+ reactDevtoolsAgent?: ?Object,\n+ sub: (event: string, handler: Handler) => () => void,\n+\n+ \/\/ Used by react-native-web and Flipper\/Inspector\n+ resolveRNStyle?: ResolveNativeStyle,\n+ nativeStyleEditorValidAttributes?: $ReadOnlyArray<string>,\n+\n+ \/\/ React uses these methods.\n+ checkDCE: (fn: Function) => void,\n+ onCommitFiberUnmount: (rendererID: RendererID, fiber: Object) => void,\n+ onCommitFiberRoot: (\n+ rendererID: RendererID,\n+ fiber: Object,\n+ commitPriority?: number\n+ ) => void,\n+};\n+\n+export type HooksNode = {\n+ id: number,\n+ isStateEditable: boolean,\n+ name: string,\n+ value: mixed,\n+ subHooks: Array<HooksNode>,\n+};\n+export type HooksTree = Array<HooksNode>;\n+\n+export type ReactEventResponder<E, C> = {\n+ $$typeof: Symbol | number,\n+ displayName: string,\n+ targetEventTypes: null | Array<string>,\n+ rootEventTypes: null | Array<string>,\n+ getInitialState: null | ((props: Object) => Object),\n+ onEvent:\n+ | null\n+ | ((event: E, context: C, props: Object, state: Object) => void),\n+ onRootEvent:\n+ | null\n+ | ((event: E, context: C, props: Object, state: Object) => void),\n+ onMount: null | ((context: C, props: Object, state: Object) => void),\n+ onUnmount: null | ((context: C, props: Object, state: Object) => void),\n+ onOwnershipChange:\n+ | null\n+ | ((context: C, props: Object, state: Object) => void),\n+};\n+\n+export type ReactEventResponderListener<E, C> = {|\n+ props: Object,\n+ responder: ReactEventResponder<E, C>,\n+|};\ndiff --git a\/src\/backend\/utils.js b\/src\/backend\/utils.js\nnew file mode 100644\nindex 0000000000..020d841d46\n--- \/dev\/null\n+++ b\/src\/backend\/utils.js\n@@ -0,0 +1,39 @@\n+\/\/ @flow\n+\n+import { dehydrate } from '..\/hydration';\n+\n+import type { DehydratedData } from 'src\/devtools\/views\/Components\/types';\n+\n+export function cleanForBridge(\n+ data: Object | null,\n+ isPathWhitelisted: (path: Array<string | number>) => boolean,\n+ path?: Array<string | number> = []\n+): DehydratedData | null {\n+ if (data !== null) {\n+ const cleaned = [];\n+\n+ return {\n+ data: dehydrate(data, cleaned, path, isPathWhitelisted),\n+ cleaned,\n+ };\n+ } else {\n+ return null;\n+ }\n+}\n+\n+export function copyWithSet(\n+ obj: Object | Array<any>,\n+ path: Array<string | number>,\n+ value: any,\n+ index: number = 0\n+): Object | Array<any> {\n+ console.log('[utils] copyWithSet()', obj, path, index, value);\n+ if (index >= path.length) {\n+ return value;\n+ }\n+ const key = path[index];\n+ const updated = Array.isArray(obj) ? obj.slice() : { ...obj };\n+ \/\/ $FlowFixMe number or string is fine here\n+ updated[key] = copyWithSet(obj[key], path, value, index + 1);\n+ return updated;\n+}\ndiff --git a\/src\/backend\/views\/Highlighter\/Highlighter.js b\/src\/backend\/views\/Highlighter\/Highlighter.js\nnew file mode 100644\nindex 0000000000..1d838f8c12\n--- \/dev\/null\n+++ b\/src\/backend\/views\/Highlighter\/Highlighter.js\n@@ -0,0 +1,46 @@\n+\/\/ @flow\n+\n+import Overlay from '.\/Overlay';\n+\n+const SHOW_DURATION = 2000;\n+\n+let timeoutID: TimeoutID | null = null;\n+let overlay: Overlay | null = null;\n+\n+export function hideOverlay() {\n+ timeoutID = null;\n+\n+ if (overlay !== null) {\n+ overlay.remove();\n+ overlay = null;\n+ }\n+}\n+\n+export function showOverlay(\n+ elements: Array<HTMLElement> | null,\n+ componentName: string | null,\n+ hideAfterTimeout: boolean\n+) {\n+ \/\/ TODO (npm-packages) Detect RN and support it somehow\n+ if (window.document == null) {\n+ return;\n+ }\n+\n+ if (timeoutID !== null) {\n+ clearTimeout(timeoutID);\n+ }\n+\n+ if (elements == null) {\n+ return;\n+ }\n+\n+ if (overlay === null) {\n+ overlay = new Overlay();\n+ }\n+\n+ overlay.inspect(elements, componentName);\n+\n+ if (hideAfterTimeout) {\n+ timeoutID = setTimeout(hideOverlay, SHOW_DURATION);\n+ }\n+}\ndiff --git a\/src\/backend\/views\/Highlighter\/Overlay.js b\/src\/backend\/views\/Highlighter\/Overlay.js\nnew file mode 100644\nindex 0000000000..5e59c2b93f\n--- \/dev\/null\n+++ b\/src\/backend\/views\/Highlighter\/Overlay.js\n@@ -0,0 +1,454 @@\n+\/\/ @flow\n+\n+import assign from 'object-assign';\n+\n+type Rect = {\n+ bottom: number,\n+ height: number,\n+ left: number,\n+ right: number,\n+ top: number,\n+ width: number,\n+};\n+\n+type Box = {| top: number, left: number, width: number, height: number |};\n+\n+\/\/ Note that the Overlay components are not affected by the active Theme,\n+\/\/ because they highlight elements in the main Chrome window (outside of devtools).\n+\/\/ The colors below were chosen to roughly match those used by Chrome devtools.\n+\n+class OverlayRect {\n+ node: HTMLElement;\n+ border: HTMLElement;\n+ padding: HTMLElement;\n+ content: HTMLElement;\n+\n+ constructor(doc: Document, container: HTMLElement) {\n+ this.node = doc.createElement('div');\n+ this.border = doc.createElement('div');\n+ this.padding = doc.createElement('div');\n+ this.content = doc.createElement('div');\n+\n+ this.border.style.borderColor = overlayStyles.border;\n+ this.padding.style.borderColor = overlayStyles.padding;\n+ this.content.style.backgroundColor = overlayStyles.background;\n+\n+ assign(this.node.style, {\n+ borderColor: overlayStyles.margin,\n+ pointerEvents: 'none',\n+ position: 'fixed',\n+ });\n+\n+ this.node.style.zIndex = '10000000';\n+\n+ this.node.appendChild(this.border);\n+ this.border.appendChild(this.padding);\n+ this.padding.appendChild(this.content);\n+ container.appendChild(this.node);\n+ }\n+\n+ remove() {\n+ if (this.node.parentNode) {\n+ this.node.parentNode.removeChild(this.node);\n+ }\n+ }\n+\n+ update(box: Rect, dims: any) {\n+ boxWrap(dims, 'margin', this.node);\n+ boxWrap(dims, 'border', this.border);\n+ boxWrap(dims, 'padding', this.padding);\n+\n+ assign(this.content.style, {\n+ height:\n+ box.height -\n+ dims.borderTop -\n+ dims.borderBottom -\n+ dims.paddingTop -\n+ dims.paddingBottom +\n+ 'px',\n+ width:\n+ box.width -\n+ dims.borderLeft -\n+ dims.borderRight -\n+ dims.paddingLeft -\n+ dims.paddingRight +\n+ 'px',\n+ });\n+\n+ assign(this.node.style, {\n+ top: box.top - dims.marginTop + 'px',\n+ left: box.left - dims.marginLeft + 'px',\n+ });\n+ }\n+}\n+\n+class OverlayTip {\n+ tip: HTMLElement;\n+ nameSpan: HTMLElement;\n+ dimSpan: HTMLElement;\n+\n+ constructor(doc: Document, container: HTMLElement) {\n+ this.tip = doc.createElement('div');\n+ assign(this.tip.style, {\n+ display: 'flex',\n+ flexFlow: 'row nowrap',\n+ backgroundColor: '#333740',\n+ borderRadius: '2px',\n+ fontFamily:\n+ '\"SFMono-Regular\", Consolas, \"Liberation Mono\", Menlo, Courier, monospace',\n+ fontWeight: 'bold',\n+ padding: '3px 5px',\n+ pointerEvents: 'none',\n+ position: 'fixed',\n+ fontSize: '12px',\n+ whiteSpace: 'nowrap',\n+ });\n+\n+ this.nameSpan = doc.createElement('span');\n+ this.tip.appendChild(this.nameSpan);\n+ assign(this.nameSpan.style, {\n+ color: '#ee78e6',\n+ borderRight: '1px solid #aaaaaa',\n+ paddingRight: '0.5rem',\n+ marginRight: '0.5rem',\n+ });\n+ this.dimSpan = doc.createElement('span');\n+ this.tip.appendChild(this.dimSpan);\n+ assign(this.dimSpan.style, {\n+ color: '#d7d7d7',\n+ });\n+\n+ this.tip.style.zIndex = '10000000';\n+ container.appendChild(this.tip);\n+ }\n+\n+ remove() {\n+ if (this.tip.parentNode) {\n+ this.tip.parentNode.removeChild(this.tip);\n+ }\n+ }\n+\n+ updateText(name: string, width: number, height: number) {\n+ this.nameSpan.textContent = name;\n+ this.dimSpan.textContent =\n+ Math.round(width) + 'px × ' + Math.round(height) + 'px';\n+ }\n+\n+ updatePosition(dims: Box, bounds: Box) {\n+ const tipRect = this.tip.getBoundingClientRect();\n+ const tipPos = findTipPos(dims, bounds, {\n+ width: tipRect.width,\n+ height: tipRect.height,\n+ });\n+ assign(this.tip.style, tipPos.style);\n+ }\n+}\n+\n+export default class Overlay {\n+ window: window;\n+ tipBoundsWindow: window;\n+ container: HTMLElement;\n+ tip: OverlayTip;\n+ rects: Array<OverlayRect>;\n+\n+ constructor() {\n+ \/\/ Find the root window, because overlays are positioned relative to it.\n+ let currentWindow = window.__REACT_DEVTOOLS_TARGET_WINDOW__ || window;\n+ this.window = currentWindow;\n+\n+ \/\/ When opened in shells\/dev, the tooltip should be bound by the app iframe, not by the topmost window.\n+ let tipBoundsWindow = window.__REACT_DEVTOOLS_TARGET_WINDOW__ || window;\n+ this.tipBoundsWindow = tipBoundsWindow;\n+\n+ const doc = currentWindow.document;\n+ this.container = doc.createElement('div');\n+ this.container.style.zIndex = '10000000';\n+\n+ this.tip = new OverlayTip(doc, this.container);\n+ this.rects = [];\n+\n+ doc.body.appendChild(this.container);\n+ }\n+\n+ remove() {\n+ this.tip.remove();\n+ this.rects.forEach(rect => {\n+ rect.remove();\n+ });\n+ this.rects.length = 0;\n+ if (this.container.parentNode) {\n+ this.container.parentNode.removeChild(this.container);\n+ }\n+ }\n+\n+ inspect(nodes: Array<HTMLElement>, name?: ?string) {\n+ \/\/ We can't get the size of text nodes or comment nodes. React as of v15\n+ \/\/ heavily uses comment nodes to delimit text.\n+ const elements = nodes.filter(node => node.nodeType === Node.ELEMENT_NODE);\n+\n+ while (this.rects.length > elements.length) {\n+ const rect = this.rects.pop();\n+ rect.remove();\n+ }\n+ if (elements.length === 0) {\n+ return;\n+ }\n+\n+ while (this.rects.length < elements.length) {\n+ this.rects.push(new OverlayRect(this.window.document, this.container));\n+ }\n+\n+ const outerBox = {\n+ top: Number.POSITIVE_INFINITY,\n+ right: Number.NEGATIVE_INFINITY,\n+ bottom: Number.NEGATIVE_INFINITY,\n+ left: Number.POSITIVE_INFINITY,\n+ };\n+ elements.forEach((element, index) => {\n+ const box = getNestedBoundingClientRect(element, this.window);\n+ const dims = getElementDimensions(element);\n+\n+ outerBox.top = Math.min(outerBox.top, box.top - dims.marginTop);\n+ outerBox.right = Math.max(\n+ outerBox.right,\n+ box.left + box.width + dims.marginRight\n+ );\n+ outerBox.bottom = Math.max(\n+ outerBox.bottom,\n+ box.top + box.height + dims.marginBottom\n+ );\n+ outerBox.left = Math.min(outerBox.left, box.left - dims.marginLeft);\n+\n+ const rect = this.rects[index];\n+ rect.update(box, dims);\n+ });\n+\n+ if (!name) {\n+ name = elements[0].nodeName.toLowerCase();\n+ const ownerName = getOwnerDisplayName(elements[0]);\n+ if (ownerName) {\n+ name += ' (in ' + ownerName + ')';\n+ }\n+ }\n+\n+ this.tip.updateText(\n+ name,\n+ outerBox.right - outerBox.left,\n+ outerBox.bottom - outerBox.top\n+ );\n+ const tipBounds = getNestedBoundingClientRect(\n+ this.tipBoundsWindow.document.documentElement,\n+ this.window\n+ );\n+\n+ this.tip.updatePosition(\n+ {\n+ top: outerBox.top,\n+ left: outerBox.left,\n+ height: outerBox.bottom - outerBox.top,\n+ width: outerBox.right - outerBox.left,\n+ },\n+ {\n+ top: tipBounds.top + this.tipBoundsWindow.scrollY,\n+ left: tipBounds.left + this.tipBoundsWindow.scrollX,\n+ height: this.tipBoundsWindow.innerHeight,\n+ width: this.tipBoundsWindow.innerWidth,\n+ }\n+ );\n+ }\n+}\n+\n+function getOwnerDisplayName(node) {\n+ const fiber = getFiber(node);\n+ if (fiber === null) {\n+ return null;\n+ }\n+ const owner = fiber._debugOwner;\n+ if (owner && owner.type) {\n+ const ownerName = owner.type.displayName || owner.type.name;\n+ return ownerName || null;\n+ }\n+ return null;\n+}\n+\n+let lastFoundInternalKey = null;\n+function getFiber(node) {\n+ if (\n+ lastFoundInternalKey !== null &&\n+ node.hasOwnProperty(lastFoundInternalKey)\n+ ) {\n+ return (node: any)[lastFoundInternalKey];\n+ }\n+ let internalKey = Object.keys(node).find(\n+ key => key.indexOf('__reactInternalInstance') === 0\n+ );\n+ if (internalKey) {\n+ lastFoundInternalKey = internalKey;\n+ return (node: any)[lastFoundInternalKey];\n+ }\n+ return null;\n+}\n+\n+function findTipPos(dims, bounds, tipSize) {\n+ const tipHeight = Math.max(tipSize.height, 20);\n+ const tipWidth = Math.max(tipSize.width, 60);\n+ const margin = 5;\n+\n+ let top;\n+ if (dims.top + dims.height + tipHeight <= bounds.top + bounds.height) {\n+ if (dims.top + dims.height < bounds.top + 0) {\n+ top = bounds.top + margin;\n+ } else {\n+ top = dims.top + dims.height + margin;\n+ }\n+ } else if (dims.top - tipHeight <= bounds.top + bounds.height) {\n+ if (dims.top - tipHeight - margin < bounds.top + margin) {\n+ top = bounds.top + margin;\n+ } else {\n+ top = dims.top - tipHeight - margin;\n+ }\n+ } else {\n+ top = bounds.top + bounds.height - tipHeight - margin;\n+ }\n+\n+ let left = dims.left + margin;\n+ if (dims.left < bounds.left) {\n+ left = bounds.left + margin;\n+ }\n+ if (dims.left + tipWidth > bounds.left + bounds.width) {\n+ left = bounds.left + bounds.width - tipWidth - margin;\n+ }\n+\n+ top += 'px';\n+ left += 'px';\n+ return {\n+ style: { top, left },\n+ };\n+}\n+\n+export function getElementDimensions(domElement: Element) {\n+ const calculatedStyle = window.getComputedStyle(domElement);\n+ return {\n+ borderLeft: parseInt(calculatedStyle.borderLeftWidth, 10),\n+ borderRight: parseInt(calculatedStyle.borderRightWidth, 10),\n+ borderTop: parseInt(calculatedStyle.borderTopWidth, 10),\n+ borderBottom: parseInt(calculatedStyle.borderBottomWidth, 10),\n+ marginLeft: parseInt(calculatedStyle.marginLeft, 10),\n+ marginRight: parseInt(calculatedStyle.marginRight, 10),\n+ marginTop: parseInt(calculatedStyle.marginTop, 10),\n+ marginBottom: parseInt(calculatedStyle.marginBottom, 10),\n+ paddingLeft: parseInt(calculatedStyle.paddingLeft, 10),\n+ paddingRight: parseInt(calculatedStyle.paddingRight, 10),\n+ paddingTop: parseInt(calculatedStyle.paddingTop, 10),\n+ paddingBottom: parseInt(calculatedStyle.paddingBottom, 10),\n+ };\n+}\n+\n+\/\/ Get the window object for the document that a node belongs to,\n+\/\/ or return null if it cannot be found (node not attached to DOM,\n+\/\/ etc).\n+function getOwnerWindow(node: HTMLElement): typeof window | null {\n+ if (!node.ownerDocument) {\n+ return null;\n+ }\n+ return node.ownerDocument.defaultView;\n+}\n+\n+\/\/ Get the iframe containing a node, or return null if it cannot\n+\/\/ be found (node not within iframe, etc).\n+function getOwnerIframe(node: HTMLElement): HTMLElement | null {\n+ const nodeWindow = getOwnerWindow(node);\n+ if (nodeWindow) {\n+ return nodeWindow.frameElement;\n+ }\n+ return null;\n+}\n+\n+\/\/ Get a bounding client rect for a node, with an\n+\/\/ offset added to compensate for its border.\n+function getBoundingClientRectWithBorderOffset(node: HTMLElement) {\n+ const dimensions = getElementDimensions(node);\n+ return mergeRectOffsets([\n+ node.getBoundingClientRect(),\n+ {\n+ top: dimensions.borderTop,\n+ left: dimensions.borderLeft,\n+ bottom: dimensions.borderBottom,\n+ right: dimensions.borderRight,\n+ \/\/ This width and height won't get used by mergeRectOffsets (since this\n+ \/\/ is not the first rect in the array), but we set them so that this\n+ \/\/ object typechecks as a ClientRect.\n+ width: 0,\n+ height: 0,\n+ },\n+ ]);\n+}\n+\n+\/\/ Add together the top, left, bottom, and right properties of\n+\/\/ each ClientRect, but keep the width and height of the first one.\n+function mergeRectOffsets(rects: Array<Rect>): Rect {\n+ return rects.reduce((previousRect, rect) => {\n+ if (previousRect == null) {\n+ return rect;\n+ }\n+\n+ return {\n+ top: previousRect.top + rect.top,\n+ left: previousRect.left + rect.left,\n+ width: previousRect.width,\n+ height: previousRect.height,\n+ bottom: previousRect.bottom + rect.bottom,\n+ right: previousRect.right + rect.right,\n+ };\n+ });\n+}\n+\n+\/\/ Calculate a boundingClientRect for a node relative to boundaryWindow,\n+\/\/ taking into account any offsets caused by intermediate iframes.\n+function getNestedBoundingClientRect(\n+ node: HTMLElement,\n+ boundaryWindow: typeof window\n+): Rect {\n+ const ownerIframe = getOwnerIframe(node);\n+ if (ownerIframe && ownerIframe !== boundaryWindow) {\n+ const rects = [node.getBoundingClientRect()];\n+ let currentIframe = ownerIframe;\n+ let onlyOneMore = false;\n+ while (currentIframe) {\n+ const rect = getBoundingClientRectWithBorderOffset(currentIframe);\n+ rects.push(rect);\n+ currentIframe = getOwnerIframe(currentIframe);\n+\n+ if (onlyOneMore) {\n+ break;\n+ }\n+ \/\/ We don't want to calculate iframe offsets upwards beyond\n+ \/\/ the iframe containing the boundaryWindow, but we\n+ \/\/ need to calculate the offset relative to the boundaryWindow.\n+ if (currentIframe && getOwnerWindow(currentIframe) === boundaryWindow) {\n+ onlyOneMore = true;\n+ }\n+ }\n+\n+ return mergeRectOffsets(rects);\n+ } else {\n+ return node.getBoundingClientRect();\n+ }\n+}\n+\n+function boxWrap(dims, what, node) {\n+ assign(node.style, {\n+ borderTopWidth: dims[what + 'Top'] + 'px',\n+ borderLeftWidth: dims[what + 'Left'] + 'px',\n+ borderRightWidth: dims[what + 'Right'] + 'px',\n+ borderBottomWidth: dims[what + 'Bottom'] + 'px',\n+ borderStyle: 'solid',\n+ });\n+}\n+\n+const overlayStyles = {\n+ background: 'rgba(120, 170, 210, 0.7)',\n+ padding: 'rgba(77, 200, 0, 0.3)',\n+ margin: 'rgba(255, 155, 0, 0.3)',\n+ border: 'rgba(255, 200, 50, 0.3)',\n+};\ndiff --git a\/src\/backend\/views\/Highlighter\/index.js b\/src\/backend\/views\/Highlighter\/index.js\nnew file mode 100644\nindex 0000000000..c50ef74c56\n--- \/dev\/null\n+++ b\/src\/backend\/views\/Highlighter\/index.js\n@@ -0,0 +1,187 @@\n+\/\/ @flow\n+\n+import memoize from 'memoize-one';\n+import throttle from 'lodash.throttle';\n+import Agent from 'src\/backend\/agent';\n+import { hideOverlay, showOverlay } from '.\/Highlighter';\n+\n+import type { BackendBridge } from 'src\/bridge';\n+\n+\/\/ This plug-in provides in-page highlighting of the selected element.\n+\/\/ It is used by the browser extension nad the standalone DevTools shell (when connected to a browser).\n+\/\/ It is not currently the mechanism used to highlight React Native views.\n+\/\/ That is done by the React Native Inspector component.\n+\n+let iframesListeningTo: Set<HTMLIFrameElement> = new Set();\n+\n+export default function setupHighlighter(\n+ bridge: BackendBridge,\n+ agent: Agent\n+): void {\n+ bridge.addListener(\n+ 'clearNativeElementHighlight',\n+ clearNativeElementHighlight\n+ );\n+ bridge.addListener('highlightNativeElement', highlightNativeElement);\n+ bridge.addListener('shutdown', stopInspectingNative);\n+ bridge.addListener('startInspectingNative', startInspectingNative);\n+ bridge.addListener('stopInspectingNative', stopInspectingNative);\n+\n+ function startInspectingNative() {\n+ registerListenersOnWindow(window);\n+ }\n+\n+ function registerListenersOnWindow(window) {\n+ \/\/ This plug-in may run in non-DOM environments (e.g. React Native).\n+ if (window && typeof window.addEventListener === 'function') {\n+ window.addEventListener('click', onClick, true);\n+ window.addEventListener('mousedown', onMouseEvent, true);\n+ window.addEventListener('mouseover', onMouseEvent, true);\n+ window.addEventListener('mouseup', onMouseEvent, true);\n+ window.addEventListener('pointerdown', onPointerDown, true);\n+ window.addEventListener('pointerover', onPointerOver, true);\n+ window.addEventListener('pointerup', onPointerUp, true);\n+ }\n+ }\n+\n+ function stopInspectingNative() {\n+ hideOverlay();\n+ removeListenersOnWindow(window);\n+ iframesListeningTo.forEach(function(frame) {\n+ try {\n+ removeListenersOnWindow(frame.contentWindow);\n+ } catch (error) {\n+ \/\/ This can error when the iframe is on a cross-origin.\n+ }\n+ });\n+ iframesListeningTo = new Set();\n+ }\n+\n+ function removeListenersOnWindow(window) {\n+ \/\/ This plug-in may run in non-DOM environments (e.g. React Native).\n+ if (window && typeof window.removeEventListener === 'function') {\n+ window.removeEventListener('click', onClick, true);\n+ window.removeEventListener('mousedown', onMouseEvent, true);\n+ window.removeEventListener('mouseover', onMouseEvent, true);\n+ window.removeEventListener('mouseup', onMouseEvent, true);\n+ window.removeEventListener('pointerdown', onPointerDown, true);\n+ window.removeEventListener('pointerover', onPointerOver, true);\n+ window.removeEventListener('pointerup', onPointerUp, true);\n+ }\n+ }\n+\n+ function clearNativeElementHighlight() {\n+ hideOverlay();\n+ }\n+\n+ function highlightNativeElement({\n+ displayName,\n+ hideAfterTimeout,\n+ id,\n+ openNativeElementsPanel,\n+ rendererID,\n+ scrollIntoView,\n+ }: {\n+ displayName: string | null,\n+ hideAfterTimeout: boolean,\n+ id: number,\n+ openNativeElementsPanel: boolean,\n+ rendererID: number,\n+ scrollIntoView: boolean,\n+ }) {\n+ const renderer = agent.rendererInterfaces[rendererID];\n+ if (renderer == null) {\n+ console.warn(`Invalid renderer id \"${rendererID}\" for element \"${id}\"`);\n+ }\n+\n+ let nodes: ?Array<HTMLElement> = null;\n+ if (renderer !== null) {\n+ nodes = ((renderer.findNativeNodesForFiberID(\n+ id\n+ ): any): ?Array<HTMLElement>);\n+ }\n+\n+ if (nodes != null && nodes[0] != null) {\n+ const node = nodes[0];\n+ if (scrollIntoView && typeof node.scrollIntoView === 'function') {\n+ \/\/ If the node isn't visible show it before highlighting it.\n+ \/\/ We may want to reconsider this; it might be a little disruptive.\n+ node.scrollIntoView({ block: 'nearest', inline: 'nearest' });\n+ }\n+\n+ showOverlay(nodes, displayName, hideAfterTimeout);\n+\n+ if (openNativeElementsPanel) {\n+ window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 = node;\n+ bridge.send('syncSelectionToNativeElementsPanel');\n+ }\n+ } else {\n+ hideOverlay();\n+ }\n+ }\n+\n+ function onClick(event: MouseEvent) {\n+ event.preventDefault();\n+ event.stopPropagation();\n+\n+ stopInspectingNative();\n+\n+ bridge.send('stopInspectingNative', true);\n+ }\n+\n+ function onMouseEvent(event: MouseEvent) {\n+ event.preventDefault();\n+ event.stopPropagation();\n+ }\n+\n+ function onPointerDown(event: MouseEvent) {\n+ event.preventDefault();\n+ event.stopPropagation();\n+\n+ selectFiberForNode(((event.target: any): HTMLElement));\n+ }\n+\n+ function onPointerOver(event: MouseEvent) {\n+ event.preventDefault();\n+ event.stopPropagation();\n+\n+ const target = ((event.target: any): HTMLElement);\n+\n+ if (target.tagName === 'IFRAME') {\n+ const iframe: HTMLIFrameElement = (target: any);\n+ try {\n+ if (!iframesListeningTo.has(iframe)) {\n+ const window = iframe.contentWindow;\n+ registerListenersOnWindow(window);\n+ iframesListeningTo.add(iframe);\n+ }\n+ } catch (error) {\n+ \/\/ This can error when the iframe is on a cross-origin.\n+ }\n+ }\n+\n+ \/\/ Don't pass the name explicitly.\n+ \/\/ It will be inferred from DOM tag and Fiber owner.\n+ showOverlay([target], null, false);\n+\n+ selectFiberForNode(target);\n+ }\n+\n+ function onPointerUp(event: MouseEvent) {\n+ event.preventDefault();\n+ event.stopPropagation();\n+ }\n+\n+ const selectFiberForNode = throttle(\n+ memoize((node: HTMLElement) => {\n+ const id = agent.getIDForNode(node);\n+ if (id !== null) {\n+ bridge.send('selectFiber', id);\n+ }\n+ }),\n+ 200,\n+ \/\/ Don't change the selection in the very first 200ms\n+ \/\/ because those are usually unintentional as you lift the cursor.\n+ { leading: false }\n+ );\n+}\ndiff --git a\/src\/bridge.js b\/src\/bridge.js\nnew file mode 100644\nindex 0000000000..cc110f8e50\n--- \/dev\/null\n+++ b\/src\/bridge.js\n@@ -0,0 +1,237 @@\n+\/\/ @flow\n+\n+import EventEmitter from 'events';\n+\n+import type { ComponentFilter, Wall } from '.\/types';\n+import type {\n+ InspectedElementPayload,\n+ OwnersList,\n+ ProfilingDataBackend,\n+ RendererID,\n+} from 'src\/backend\/types';\n+import type { StyleAndLayout as StyleAndLayoutPayload } from 'src\/backend\/NativeStyleEditor\/types';\n+\n+const BATCH_DURATION = 100;\n+\n+type ElementAndRendererID = {| id: number, rendererID: RendererID |};\n+\n+type Message = {|\n+ event: string,\n+ payload: any,\n+|};\n+\n+type HighlightElementInDOM = {|\n+ ...ElementAndRendererID,\n+ displayName: string | null,\n+ hideAfterTimeout: boolean,\n+ openNativeElementsPanel: boolean,\n+ scrollIntoView: boolean,\n+|};\n+\n+type OverrideValue = {|\n+ ...ElementAndRendererID,\n+ path: Array<string | number>,\n+ value: any,\n+|};\n+\n+type OverrideHookState = {|\n+ ...OverrideValue,\n+ hookID: number,\n+|};\n+\n+type OverrideSuspense = {|\n+ ...ElementAndRendererID,\n+ forceFallback: boolean,\n+|};\n+\n+type InspectElementParams = {|\n+ ...ElementAndRendererID,\n+ path?: Array<string | number>,\n+|};\n+\n+type NativeStyleEditor_RenameAttributeParams = {|\n+ ...ElementAndRendererID,\n+ oldName: string,\n+ newName: string,\n+ value: string,\n+|};\n+\n+type NativeStyleEditor_SetValueParams = {|\n+ ...ElementAndRendererID,\n+ name: string,\n+ value: string,\n+|};\n+\n+type BackendEvents = {|\n+ inspectedElement: [InspectedElementPayload],\n+ isBackendStorageAPISupported: [boolean],\n+ operations: [Array<number>],\n+ ownersList: [OwnersList],\n+ overrideComponentFilters: [Array<ComponentFilter>],\n+ profilingData: [ProfilingDataBackend],\n+ profilingStatus: [boolean],\n+ reloadAppForProfiling: [],\n+ selectFiber: [number],\n+ shutdown: [],\n+ stopInspectingNative: [boolean],\n+ syncSelectionFromNativeElementsPanel: [],\n+ syncSelectionToNativeElementsPanel: [],\n+\n+ \/\/ React Native style editor plug-in.\n+ isNativeStyleEditorSupported: [\n+ {| isSupported: boolean, validAttributes: ?$ReadOnlyArray<string> |},\n+ ],\n+ NativeStyleEditor_styleAndLayout: [StyleAndLayoutPayload],\n+|};\n+\n+type FrontendEvents = {|\n+ clearNativeElementHighlight: [],\n+ getOwnersList: [ElementAndRendererID],\n+ getProfilingData: [{| rendererID: RendererID |}],\n+ getProfilingStatus: [],\n+ highlightNativeElement: [HighlightElementInDOM],\n+ inspectElement: [InspectElementParams],\n+ logElementToConsole: [ElementAndRendererID],\n+ overrideContext: [OverrideValue],\n+ overrideHookState: [OverrideHookState],\n+ overrideProps: [OverrideValue],\n+ overrideState: [OverrideValue],\n+ overrideSuspense: [OverrideSuspense],\n+ profilingData: [ProfilingDataBackend],\n+ reloadAndProfile: [boolean],\n+ selectFiber: [number],\n+ shutdown: [],\n+ startInspectingNative: [],\n+ startProfiling: [boolean],\n+ stopInspectingNative: [boolean],\n+ stopProfiling: [],\n+ updateAppendComponentStack: [boolean],\n+ updateComponentFilters: [Array<ComponentFilter>],\n+ viewElementSource: [ElementAndRendererID],\n+\n+ \/\/ React Native style editor plug-in.\n+ NativeStyleEditor_measure: [ElementAndRendererID],\n+ NativeStyleEditor_renameAttribute: [NativeStyleEditor_RenameAttributeParams],\n+ NativeStyleEditor_setValue: [NativeStyleEditor_SetValueParams],\n+|};\n+\n+class Bridge<\n+ OutgoingEvents: Object,\n+ IncomingEvents: Object\n+> extends EventEmitter<{|\n+ ...IncomingEvents,\n+ ...OutgoingEvents,\n+|}> {\n+ _isShutdown: boolean = false;\n+ _messageQueue: Array<any> = [];\n+ _timeoutID: TimeoutID | null = null;\n+ _wall: Wall;\n+ _wallUnlisten: Function | null = null;\n+\n+ constructor(wall: Wall) {\n+ super();\n+\n+ this._wall = wall;\n+\n+ this._wallUnlisten =\n+ wall.listen((message: Message) => {\n+ (this: any).emit(message.event, message.payload);\n+ }) || null;\n+ }\n+\n+ \/\/ Listening directly to the wall isn't advised.\n+ \/\/ It can be used to listen for legacy (v3) messages (since they use a different format).\n+ get wall(): Wall {\n+ return this._wall;\n+ }\n+\n+ send<EventName: $Keys<OutgoingEvents>>(\n+ event: EventName,\n+ ...payload: $ElementType<OutgoingEvents, EventName>\n+ ) {\n+ if (this._isShutdown) {\n+ console.warn(\n+ `Cannot send message \"${event}\" through a Bridge that has been shutdown.`\n+ );\n+ return;\n+ }\n+\n+ \/\/ When we receive a message:\n+ \/\/ - we add it to our queue of messages to be sent\n+ \/\/ - if there hasn't been a message recently, we set a timer for 0 ms in\n+ \/\/ the future, allowing all messages created in the same tick to be sent\n+ \/\/ together\n+ \/\/ - if there *has* been a message flushed in the last BATCH_DURATION ms\n+ \/\/ (or we're waiting for our setTimeout-0 to fire), then _timeoutID will\n+ \/\/ be set, and we'll simply add to the queue and wait for that\n+ this._messageQueue.push(event, payload);\n+ if (!this._timeoutID) {\n+ this._timeoutID = setTimeout(this._flush, 0);\n+ }\n+ }\n+\n+ shutdown() {\n+ if (this._isShutdown) {\n+ console.warn('Bridge was already shutdown.');\n+ return;\n+ }\n+\n+ \/\/ Queue the shutdown outgoing message for subscribers.\n+ this.send('shutdown');\n+\n+ \/\/ Mark this bridge as destroyed, i.e. disable its public API.\n+ this._isShutdown = true;\n+\n+ \/\/ Disable the API inherited from EventEmitter that can add more listeners and send more messages.\n+ \/\/ $FlowFixMe This property is not writable.\n+ this.addListener = function() {};\n+ \/\/ $FlowFixMe This property is not writable.\n+ this.emit = function() {};\n+ \/\/ NOTE: There's also EventEmitter API like `on` and `prependListener` that we didn't add to our Flow type of EventEmitter.\n+\n+ \/\/ Unsubscribe this bridge incoming message listeners to be sure, and so they don't have to do that.\n+ this.removeAllListeners();\n+\n+ \/\/ Stop accepting and emitting incoming messages from the wall.\n+ const wallUnlisten = this._wallUnlisten;\n+ if (wallUnlisten) {\n+ wallUnlisten();\n+ }\n+\n+ \/\/ Synchronously flush all queued outgoing messages.\n+ \/\/ At this step the subscribers' code may run in this call stack.\n+ do {\n+ this._flush();\n+ } while (this._messageQueue.length);\n+\n+ \/\/ Make sure once again that there is no dangling timer.\n+ clearTimeout(this._timeoutID);\n+ this._timeoutID = null;\n+ }\n+\n+ _flush = () => {\n+ \/\/ This method is used after the bridge is marked as destroyed in shutdown sequence,\n+ \/\/ so we do not bail out if the bridge marked as destroyed.\n+ \/\/ It is a private method that the bridge ensures is only called at the right times.\n+\n+ clearTimeout(this._timeoutID);\n+ this._timeoutID = null;\n+\n+ if (this._messageQueue.length) {\n+ for (let i = 0; i < this._messageQueue.length; i += 2) {\n+ this._wall.send(this._messageQueue[i], ...this._messageQueue[i + 1]);\n+ }\n+ this._messageQueue.length = 0;\n+\n+ \/\/ Check again for queued messages in BATCH_DURATION ms. This will keep\n+ \/\/ flushing in a loop as long as messages continue to be added. Once no\n+ \/\/ more are, the timer expires.\n+ this._timeoutID = setTimeout(this._flush, BATCH_DURATION);\n+ }\n+ };\n+}\n+\n+export type BackendBridge = Bridge<BackendEvents, FrontendEvents>;\n+export type FrontendBridge = Bridge<FrontendEvents, BackendEvents>;\n+\n+export default Bridge;\ndiff --git a\/src\/constants.js b\/src\/constants.js\nnew file mode 100644\nindex 0000000000..d27de3ed5b\n--- \/dev\/null\n+++ b\/src\/constants.js\n@@ -0,0 +1,57 @@\n+\/\/ @flow\n+\n+\/\/ Flip this flag to true to enable verbose console debug logging.\n+export const __DEBUG__ = false;\n+\n+export const TREE_OPERATION_ADD = 1;\n+export const TREE_OPERATION_REMOVE = 2;\n+export const TREE_OPERATION_REORDER_CHILDREN = 3;\n+export const TREE_OPERATION_UPDATE_TREE_BASE_DURATION = 4;\n+\n+export const LOCAL_STORAGE_FILTER_PREFERENCES_KEY =\n+ 'React::DevTools::componentFilters';\n+\n+export const SESSION_STORAGE_LAST_SELECTION_KEY =\n+ 'React::DevTools::lastSelection';\n+\n+export const SESSION_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY =\n+ 'React::DevTools::recordChangeDescriptions';\n+\n+export const SESSION_STORAGE_RELOAD_AND_PROFILE_KEY =\n+ 'React::DevTools::reloadAndProfile';\n+\n+export const LOCAL_STORAGE_SHOULD_PATCH_CONSOLE_KEY =\n+ 'React::DevTools::appendComponentStack';\n+\n+export const PROFILER_EXPORT_VERSION = 4;\n+\n+export const CHANGE_LOG_URL =\n+ 'https:\/\/github.com\/bvaughn\/react-devtools-experimental\/blob\/master\/CHANGELOG.md';\n+\n+\/\/ HACK\n+\/\/\n+\/\/ Extracting during build time avoids a temporarily invalid state for the inline target.\n+\/\/ Sometimes the inline target is rendered before root styles are applied,\n+\/\/ which would result in e.g. NaN itemSize being passed to react-window list.\n+\/\/\n+\/\/ We can't use the Webpack loader syntax in the context of Jest though,\n+\/\/ so tests need some reasonably meaningful fallback value.\n+let COMFORTABLE_LINE_HEIGHT = 15;\n+let COMPACT_LINE_HEIGHT = 10;\n+\n+if (!__TEST__) {\n+ \/\/ $FlowFixMe\n+ const rawStyleString = require('!!raw-loader!src\/devtools\/views\/root.css') \/\/ eslint-disable-line import\/no-webpack-loader-syntax\n+ .default;\n+\n+ const extractVar = varName => {\n+ const regExp = new RegExp(`${varName}: ([0-9]+)`);\n+ const match = rawStyleString.match(regExp);\n+ return parseInt(match[1], 10);\n+ };\n+\n+ COMFORTABLE_LINE_HEIGHT = extractVar('comfortable-line-height-data');\n+ COMPACT_LINE_HEIGHT = extractVar('compact-line-height-data');\n+}\n+\n+export { COMFORTABLE_LINE_HEIGHT, COMPACT_LINE_HEIGHT };\ndiff --git a\/src\/devtools\/ProfilerStore.js b\/src\/devtools\/ProfilerStore.js\nnew file mode 100644\nindex 0000000000..103947ac8c\n--- \/dev\/null\n+++ b\/src\/devtools\/ProfilerStore.js\n@@ -0,0 +1,330 @@\n+\/\/ @flow\n+\n+import EventEmitter from 'events';\n+import { prepareProfilingDataFrontendFromBackendAndStore } from '.\/views\/Profiler\/utils';\n+import ProfilingCache from '.\/ProfilingCache';\n+import Store from '.\/store';\n+\n+import type { FrontendBridge } from 'src\/bridge';\n+import type { ProfilingDataBackend } from 'src\/backend\/types';\n+import type {\n+ CommitDataFrontend,\n+ ProfilingDataForRootFrontend,\n+ ProfilingDataFrontend,\n+ SnapshotNode,\n+} from '.\/views\/Profiler\/types';\n+\n+export default class ProfilerStore extends EventEmitter<{|\n+ isProcessingData: [],\n+ isProfiling: [],\n+ profilingData: [],\n+|}> {\n+ _bridge: FrontendBridge;\n+\n+ \/\/ Suspense cache for lazily calculating derived profiling data.\n+ _cache: ProfilingCache;\n+\n+ \/\/ Temporary store of profiling data from the backend renderer(s).\n+ \/\/ This data will be converted to the ProfilingDataFrontend format after being collected from all renderers.\n+ _dataBackends: Array<ProfilingDataBackend> = [];\n+\n+ \/\/ Data from the most recently completed profiling session,\n+ \/\/ or data that has been imported from a previously exported session.\n+ \/\/ This object contains all necessary data to drive the Profiler UI interface,\n+ \/\/ even though some of it is lazily parsed\/derived via the ProfilingCache.\n+ _dataFrontend: ProfilingDataFrontend | null = null;\n+\n+ \/\/ Snapshot of all attached renderer IDs.\n+ \/\/ Once profiling is finished, this snapshot will be used to query renderers for profiling data.\n+ \/\/\n+ \/\/ This map is initialized when profiling starts and updated when a new root is added while profiling;\n+ \/\/ Upon completion, it is converted into the exportable ProfilingDataFrontend format.\n+ _initialRendererIDs: Set<number> = new Set();\n+\n+ \/\/ Snapshot of the state of the main Store (including all roots) when profiling started.\n+ \/\/ Once profiling is finished, this snapshot can be used along with \"operations\" messages emitted during profiling,\n+ \/\/ to reconstruct the state of each root for each commit.\n+ \/\/ It's okay to use a single root to store this information because node IDs are unique across all roots.\n+ \/\/\n+ \/\/ This map is initialized when profiling starts and updated when a new root is added while profiling;\n+ \/\/ Upon completion, it is converted into the exportable ProfilingDataFrontend format.\n+ _initialSnapshotsByRootID: Map<number, Map<number, SnapshotNode>> = new Map();\n+\n+ \/\/ Map of root (id) to a list of tree mutation that occur during profiling.\n+ \/\/ Once profiling is finished, these mutations can be used, along with the initial tree snapshots,\n+ \/\/ to reconstruct the state of each root for each commit.\n+ \/\/\n+ \/\/ This map is only updated while profiling is in progress;\n+ \/\/ Upon completion, it is converted into the exportable ProfilingDataFrontend format.\n+ _inProgressOperationsByRootID: Map<number, Array<Array<number>>> = new Map();\n+\n+ \/\/ The backend is currently profiling.\n+ \/\/ When profiling is in progress, operations are stored so that we can later reconstruct past commit trees.\n+ _isProfiling: boolean = false;\n+\n+ \/\/ After profiling, data is requested from each attached renderer using this queue.\n+ \/\/ So long as this queue is not empty, the store is retrieving and processing profiling data from the backend.\n+ _rendererQueue: Set<number> = new Set();\n+\n+ _store: Store;\n+\n+ constructor(\n+ bridge: FrontendBridge,\n+ store: Store,\n+ defaultIsProfiling: boolean\n+ ) {\n+ super();\n+\n+ this._bridge = bridge;\n+ this._isProfiling = defaultIsProfiling;\n+ this._store = store;\n+\n+ bridge.addListener('operations', this.onBridgeOperations);\n+ bridge.addListener('profilingData', this.onBridgeProfilingData);\n+ bridge.addListener('profilingStatus', this.onProfilingStatus);\n+ bridge.addListener('shutdown', this.onBridgeShutdown);\n+\n+ \/\/ It's possible that profiling has already started (e.g. \"reload and start profiling\")\n+ \/\/ so the frontend needs to ask the backend for its status after mounting.\n+ bridge.send('getProfilingStatus');\n+\n+ this._cache = new ProfilingCache(this);\n+ }\n+\n+ getCommitData(rootID: number, commitIndex: number): CommitDataFrontend {\n+ if (this._dataFrontend !== null) {\n+ const dataForRoot = this._dataFrontend.dataForRoots.get(rootID);\n+ if (dataForRoot != null) {\n+ const commitDatum = dataForRoot.commitData[commitIndex];\n+ if (commitDatum != null) {\n+ return commitDatum;\n+ }\n+ }\n+ }\n+\n+ throw Error(\n+ `Could not find commit data for root \"${rootID}\" and commit ${commitIndex}`\n+ );\n+ }\n+\n+ getDataForRoot(rootID: number): ProfilingDataForRootFrontend {\n+ if (this._dataFrontend !== null) {\n+ const dataForRoot = this._dataFrontend.dataForRoots.get(rootID);\n+ if (dataForRoot != null) {\n+ return dataForRoot;\n+ }\n+ }\n+\n+ throw Error(`Could not find commit data for root \"${rootID}\"`);\n+ }\n+\n+ \/\/ Profiling data has been recorded for at least one root.\n+ get didRecordCommits(): boolean {\n+ return (\n+ this._dataFrontend !== null && this._dataFrontend.dataForRoots.size > 0\n+ );\n+ }\n+\n+ get isProcessingData(): boolean {\n+ return this._rendererQueue.size > 0 || this._dataBackends.length > 0;\n+ }\n+\n+ get isProfiling(): boolean {\n+ return this._isProfiling;\n+ }\n+\n+ get profilingCache(): ProfilingCache {\n+ return this._cache;\n+ }\n+\n+ get profilingData(): ProfilingDataFrontend | null {\n+ return this._dataFrontend;\n+ }\n+ set profilingData(value: ProfilingDataFrontend | null): void {\n+ if (this._isProfiling) {\n+ console.warn(\n+ 'Profiling data cannot be updated while profiling is in progress.'\n+ );\n+ return;\n+ }\n+\n+ this._dataBackends.splice(0);\n+ this._dataFrontend = value;\n+ this._initialRendererIDs.clear();\n+ this._initialSnapshotsByRootID.clear();\n+ this._inProgressOperationsByRootID.clear();\n+ this._cache.invalidate();\n+\n+ this.emit('profilingData');\n+ }\n+\n+ clear(): void {\n+ this._dataBackends.splice(0);\n+ this._dataFrontend = null;\n+ this._initialRendererIDs.clear();\n+ this._initialSnapshotsByRootID.clear();\n+ this._inProgressOperationsByRootID.clear();\n+ this._rendererQueue.clear();\n+\n+ \/\/ Invalidate suspense cache if profiling data is being (re-)recorded.\n+ \/\/ Note that we clear now because any existing data is \"stale\".\n+ this._cache.invalidate();\n+\n+ this.emit('profilingData');\n+ }\n+\n+ startProfiling(): void {\n+ this._bridge.send('startProfiling', this._store.recordChangeDescriptions);\n+\n+ \/\/ Don't actually update the local profiling boolean yet!\n+ \/\/ Wait for onProfilingStatus() to confirm the status has changed.\n+ \/\/ This ensures the frontend and backend are in sync wrt which commits were profiled.\n+ \/\/ We do this to avoid mismatches on e.g. CommitTreeBuilder that would cause errors.\n+ }\n+\n+ stopProfiling(): void {\n+ this._bridge.send('stopProfiling');\n+\n+ \/\/ Don't actually update the local profiling boolean yet!\n+ \/\/ Wait for onProfilingStatus() to confirm the status has changed.\n+ \/\/ This ensures the frontend and backend are in sync wrt which commits were profiled.\n+ \/\/ We do this to avoid mismatches on e.g. CommitTreeBuilder that would cause errors.\n+ }\n+\n+ _takeProfilingSnapshotRecursive = (\n+ elementID: number,\n+ profilingSnapshots: Map<number, SnapshotNode>\n+ ) => {\n+ const element = this._store.getElementByID(elementID);\n+ if (element !== null) {\n+ const snapshotNode: SnapshotNode = {\n+ id: elementID,\n+ children: element.children.slice(0),\n+ displayName: element.displayName,\n+ key: element.key,\n+ type: element.type,\n+ };\n+ profilingSnapshots.set(elementID, snapshotNode);\n+\n+ element.children.forEach(childID =>\n+ this._takeProfilingSnapshotRecursive(childID, profilingSnapshots)\n+ );\n+ }\n+ };\n+\n+ onBridgeOperations = (operations: Array<number>) => {\n+ \/\/ The first two values are always rendererID and rootID\n+ const rendererID = operations[0];\n+ const rootID = operations[1];\n+\n+ if (this._isProfiling) {\n+ let profilingOperations = this._inProgressOperationsByRootID.get(rootID);\n+ if (profilingOperations == null) {\n+ profilingOperations = [operations];\n+ this._inProgressOperationsByRootID.set(rootID, profilingOperations);\n+ } else {\n+ profilingOperations.push(operations);\n+ }\n+\n+ if (!this._initialRendererIDs.has(rendererID)) {\n+ this._initialRendererIDs.add(rendererID);\n+ }\n+\n+ if (!this._initialSnapshotsByRootID.has(rootID)) {\n+ this._initialSnapshotsByRootID.set(rootID, new Map());\n+ }\n+ }\n+ };\n+\n+ onBridgeProfilingData = (dataBackend: ProfilingDataBackend) => {\n+ if (this._isProfiling) {\n+ \/\/ This should never happen, but if it does- ignore previous profiling data.\n+ return;\n+ }\n+\n+ const { rendererID } = dataBackend;\n+\n+ if (!this._rendererQueue.has(rendererID)) {\n+ throw Error(\n+ `Unexpected profiling data update from renderer \"${rendererID}\"`\n+ );\n+ }\n+\n+ this._dataBackends.push(dataBackend);\n+ this._rendererQueue.delete(rendererID);\n+\n+ if (this._rendererQueue.size === 0) {\n+ this._dataFrontend = prepareProfilingDataFrontendFromBackendAndStore(\n+ this._dataBackends,\n+ this._inProgressOperationsByRootID,\n+ this._initialSnapshotsByRootID\n+ );\n+\n+ this._dataBackends.splice(0);\n+\n+ this.emit('isProcessingData');\n+ }\n+ };\n+\n+ onBridgeShutdown = () => {\n+ this._bridge.removeListener('operations', this.onBridgeOperations);\n+ this._bridge.removeListener('profilingData', this.onBridgeProfilingData);\n+ this._bridge.removeListener('profilingStatus', this.onProfilingStatus);\n+ this._bridge.removeListener('shutdown', this.onBridgeShutdown);\n+ };\n+\n+ onProfilingStatus = (isProfiling: boolean) => {\n+ if (isProfiling) {\n+ this._dataBackends.splice(0);\n+ this._dataFrontend = null;\n+ this._initialRendererIDs.clear();\n+ this._initialSnapshotsByRootID.clear();\n+ this._inProgressOperationsByRootID.clear();\n+ this._rendererQueue.clear();\n+\n+ \/\/ Record all renderer IDs initially too (in case of unmount)\n+ for (let rendererID of this._store.rootIDToRendererID.values()) {\n+ if (!this._initialRendererIDs.has(rendererID)) {\n+ this._initialRendererIDs.add(rendererID);\n+ }\n+ }\n+\n+ \/\/ Record snapshot of tree at the time profiling is started.\n+ \/\/ This info is required to handle cases of e.g. nodes being removed during profiling.\n+ this._store.roots.forEach(rootID => {\n+ const profilingSnapshots = new Map();\n+ this._initialSnapshotsByRootID.set(rootID, profilingSnapshots);\n+ this._takeProfilingSnapshotRecursive(rootID, profilingSnapshots);\n+ });\n+ }\n+\n+ if (this._isProfiling !== isProfiling) {\n+ this._isProfiling = isProfiling;\n+\n+ \/\/ Invalidate suspense cache if profiling data is being (re-)recorded.\n+ \/\/ Note that we clear again, in case any views read from the cache while profiling.\n+ \/\/ (That would have resolved a now-stale value without any profiling data.)\n+ this._cache.invalidate();\n+\n+ this.emit('isProfiling');\n+\n+ \/\/ If we've just finished a profiling session, we need to fetch data stored in each renderer interface\n+ \/\/ and re-assemble it on the front-end into a format (ProfilingDataFrontend) that can power the Profiler UI.\n+ \/\/ During this time, DevTools UI should probably not be interactive.\n+ if (!isProfiling) {\n+ this._dataBackends.splice(0);\n+ this._rendererQueue.clear();\n+\n+ this._initialRendererIDs.forEach(rendererID => {\n+ if (!this._rendererQueue.has(rendererID)) {\n+ this._rendererQueue.add(rendererID);\n+\n+ this._bridge.send('getProfilingData', { rendererID });\n+ }\n+ });\n+\n+ this.emit('isProcessingData');\n+ }\n+ }\n+ };\n+}\ndiff --git a\/src\/devtools\/ProfilingCache.js b\/src\/devtools\/ProfilingCache.js\nnew file mode 100644\nindex 0000000000..d8f1819ddb\n--- \/dev\/null\n+++ b\/src\/devtools\/ProfilingCache.js\n@@ -0,0 +1,122 @@\n+\/\/ @flow\n+\n+import ProfilerStore from '.\/ProfilerStore';\n+import {\n+ getCommitTree,\n+ invalidateCommitTrees,\n+} from 'src\/devtools\/views\/Profiler\/CommitTreeBuilder';\n+import {\n+ getChartData as getFlamegraphChartData,\n+ invalidateChartData as invalidateFlamegraphChartData,\n+} from 'src\/devtools\/views\/Profiler\/FlamegraphChartBuilder';\n+import {\n+ getChartData as getInteractionsChartData,\n+ invalidateChartData as invalidateInteractionsChartData,\n+} from 'src\/devtools\/views\/Profiler\/InteractionsChartBuilder';\n+import {\n+ getChartData as getRankedChartData,\n+ invalidateChartData as invalidateRankedChartData,\n+} from 'src\/devtools\/views\/Profiler\/RankedChartBuilder';\n+\n+import type { CommitTree } from 'src\/devtools\/views\/Profiler\/types';\n+import type { ChartData as FlamegraphChartData } from 'src\/devtools\/views\/Profiler\/FlamegraphChartBuilder';\n+import type { ChartData as InteractionsChartData } from 'src\/devtools\/views\/Profiler\/InteractionsChartBuilder';\n+import type { ChartData as RankedChartData } from 'src\/devtools\/views\/Profiler\/RankedChartBuilder';\n+\n+export default class ProfilingCache {\n+ _fiberCommits: Map<number, Array<number>> = new Map();\n+ _profilerStore: ProfilerStore;\n+\n+ constructor(profilerStore: ProfilerStore) {\n+ this._profilerStore = profilerStore;\n+ }\n+\n+ getCommitTree = ({\n+ commitIndex,\n+ rootID,\n+ }: {|\n+ commitIndex: number,\n+ rootID: number,\n+ |}) =>\n+ getCommitTree({\n+ commitIndex,\n+ profilerStore: this._profilerStore,\n+ rootID,\n+ });\n+\n+ getFiberCommits = ({\n+ fiberID,\n+ rootID,\n+ }: {|\n+ fiberID: number,\n+ rootID: number,\n+ |}): Array<number> => {\n+ const cachedFiberCommits = this._fiberCommits.get(fiberID);\n+ if (cachedFiberCommits != null) {\n+ return cachedFiberCommits;\n+ }\n+\n+ const fiberCommits = [];\n+ const dataForRoot = this._profilerStore.getDataForRoot(rootID);\n+ dataForRoot.commitData.forEach((commitDatum, commitIndex) => {\n+ if (commitDatum.fiberActualDurations.has(fiberID)) {\n+ fiberCommits.push(commitIndex);\n+ }\n+ });\n+\n+ this._fiberCommits.set(fiberID, fiberCommits);\n+\n+ return fiberCommits;\n+ };\n+\n+ getFlamegraphChartData = ({\n+ commitIndex,\n+ commitTree,\n+ rootID,\n+ }: {|\n+ commitIndex: number,\n+ commitTree: CommitTree,\n+ rootID: number,\n+ |}): FlamegraphChartData =>\n+ getFlamegraphChartData({\n+ commitIndex,\n+ commitTree,\n+ profilerStore: this._profilerStore,\n+ rootID,\n+ });\n+\n+ getInteractionsChartData = ({\n+ rootID,\n+ }: {|\n+ rootID: number,\n+ |}): InteractionsChartData =>\n+ getInteractionsChartData({\n+ profilerStore: this._profilerStore,\n+ rootID,\n+ });\n+\n+ getRankedChartData = ({\n+ commitIndex,\n+ commitTree,\n+ rootID,\n+ }: {|\n+ commitIndex: number,\n+ commitTree: CommitTree,\n+ rootID: number,\n+ |}): RankedChartData =>\n+ getRankedChartData({\n+ commitIndex,\n+ commitTree,\n+ profilerStore: this._profilerStore,\n+ rootID,\n+ });\n+\n+ invalidate() {\n+ this._fiberCommits.clear();\n+\n+ invalidateCommitTrees();\n+ invalidateFlamegraphChartData();\n+ invalidateInteractionsChartData();\n+ invalidateRankedChartData();\n+ }\n+}\ndiff --git a\/src\/devtools\/cache.js b\/src\/devtools\/cache.js\nnew file mode 100644\nindex 0000000000..1e12798030\n--- \/dev\/null\n+++ b\/src\/devtools\/cache.js\n@@ -0,0 +1,198 @@\n+\/\/ @flow\n+\n+import React, { createContext } from 'react';\n+\n+\/\/ Cache implementation was forked from the React repo:\n+\/\/ https:\/\/github.com\/facebook\/react\/blob\/master\/packages\/react-cache\/src\/ReactCache.js\n+\/\/\n+\/\/ This cache is simpler than react-cache in that:\n+\/\/ 1. Individual items don't need to be invalidated.\n+\/\/ Profiling data is invalidated as a whole.\n+\/\/ 2. We didn't need the added overhead of an LRU cache.\n+\/\/ The size of this cache is bounded by how many renders were profiled,\n+\/\/ and it will be fully reset between profiling sessions.\n+\n+export type Thenable<T> = {\n+ then(resolve: (T) => mixed, reject: (mixed) => mixed): mixed,\n+};\n+\n+type Suspender = {\n+ then(resolve: () => mixed, reject: () => mixed): mixed,\n+};\n+\n+type PendingResult = {|\n+ status: 0,\n+ value: Suspender,\n+|};\n+\n+type ResolvedResult<Value> = {|\n+ status: 1,\n+ value: Value,\n+|};\n+\n+type RejectedResult = {|\n+ status: 2,\n+ value: mixed,\n+|};\n+\n+type Result<Value> = PendingResult | ResolvedResult<Value> | RejectedResult;\n+\n+export type Resource<Input, Key, Value> = {\n+ clear(): void,\n+ invalidate(Key): void,\n+ read(Input): Value,\n+ preload(Input): void,\n+ write(Key, Value): void,\n+};\n+\n+const Pending = 0;\n+const Resolved = 1;\n+const Rejected = 2;\n+\n+const ReactCurrentDispatcher = (React: any)\n+ .__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher;\n+\n+function readContext(Context, observedBits) {\n+ const dispatcher = ReactCurrentDispatcher.current;\n+ if (dispatcher === null) {\n+ throw new Error(\n+ 'react-cache: read and preload may only be called from within a ' +\n+ \"component's render. They are not supported in event handlers or \" +\n+ 'lifecycle methods.'\n+ );\n+ }\n+ return dispatcher.readContext(Context, observedBits);\n+}\n+\n+const CacheContext = createContext(null);\n+\n+type Config = {\n+ useWeakMap?: boolean,\n+};\n+\n+const entries: Map<\n+ Resource<any, any, any>,\n+ Map<any, any> | WeakMap<any, any>\n+> = new Map();\n+const resourceConfigs: Map<Resource<any, any, any>, Config> = new Map();\n+\n+function getEntriesForResource(\n+ resource: any\n+): Map<any, any> | WeakMap<any, any> {\n+ let entriesForResource = ((entries.get(resource): any): Map<any, any>);\n+ if (entriesForResource === undefined) {\n+ const config = resourceConfigs.get(resource);\n+ entriesForResource =\n+ config !== undefined && config.useWeakMap ? new WeakMap() : new Map();\n+ entries.set(resource, entriesForResource);\n+ }\n+ return entriesForResource;\n+}\n+\n+function accessResult<Input, Key, Value>(\n+ resource: any,\n+ fetch: Input => Thenable<Value>,\n+ input: Input,\n+ key: Key\n+): Result<Value> {\n+ const entriesForResource = getEntriesForResource(resource);\n+ const entry = entriesForResource.get(key);\n+ if (entry === undefined) {\n+ const thenable = fetch(input);\n+ thenable.then(\n+ value => {\n+ if (newResult.status === Pending) {\n+ const resolvedResult: ResolvedResult<Value> = (newResult: any);\n+ resolvedResult.status = Resolved;\n+ resolvedResult.value = value;\n+ }\n+ },\n+ error => {\n+ if (newResult.status === Pending) {\n+ const rejectedResult: RejectedResult = (newResult: any);\n+ rejectedResult.status = Rejected;\n+ rejectedResult.value = error;\n+ }\n+ }\n+ );\n+ const newResult: PendingResult = {\n+ status: Pending,\n+ value: thenable,\n+ };\n+ entriesForResource.set(key, newResult);\n+ return newResult;\n+ } else {\n+ return entry;\n+ }\n+}\n+\n+export function createResource<Input, Key, Value>(\n+ fetch: Input => Thenable<Value>,\n+ hashInput: Input => Key,\n+ config?: Config = {}\n+): Resource<Input, Key, Value> {\n+ const resource = {\n+ clear(): void {\n+ entries.delete(resource);\n+ },\n+\n+ invalidate(key: Key): void {\n+ const entriesForResource = getEntriesForResource(resource);\n+ entriesForResource.delete(key);\n+ },\n+\n+ read(input: Input): Value {\n+ \/\/ Prevent access outside of render.\n+ \/\/ eslint-disable-next-line react-hooks\/rules-of-hooks\n+ readContext(CacheContext);\n+\n+ const key = hashInput(input);\n+ const result: Result<Value> = accessResult(resource, fetch, input, key);\n+ switch (result.status) {\n+ case Pending: {\n+ const suspender = result.value;\n+ throw suspender;\n+ }\n+ case Resolved: {\n+ const value = result.value;\n+ return value;\n+ }\n+ case Rejected: {\n+ const error = result.value;\n+ throw error;\n+ }\n+ default:\n+ \/\/ Should be unreachable\n+ return (undefined: any);\n+ }\n+ },\n+\n+ preload(input: Input): void {\n+ \/\/ Prevent access outside of render.\n+ \/\/ eslint-disable-next-line react-hooks\/rules-of-hooks\n+ readContext(CacheContext);\n+\n+ const key = hashInput(input);\n+ accessResult(resource, fetch, input, key);\n+ },\n+\n+ write(key: Key, value: Value): void {\n+ const entriesForResource = getEntriesForResource(resource);\n+\n+ const resolvedResult: ResolvedResult<Value> = {\n+ status: Resolved,\n+ value,\n+ };\n+\n+ entriesForResource.set(key, resolvedResult);\n+ },\n+ };\n+\n+ resourceConfigs.set(resource, config);\n+\n+ return resource;\n+}\n+\n+export function invalidateResources(): void {\n+ entries.clear();\n+}\ndiff --git a\/src\/devtools\/index.js b\/src\/devtools\/index.js\nnew file mode 100644\nindex 0000000000..33e628e965\n--- \/dev\/null\n+++ b\/src\/devtools\/index.js\n@@ -0,0 +1,14 @@\n+\/\/ @flow\n+\n+import type { FrontendBridge } from 'src\/bridge';\n+\n+type Shell = {|\n+ connect: (callback: Function) => void,\n+ onReload: (reloadFn: Function) => void,\n+|};\n+\n+export function initDevTools(shell: Shell) {\n+ shell.connect((bridge: FrontendBridge) => {\n+ \/\/ TODO ...\n+ });\n+}\ndiff --git a\/src\/devtools\/store.js b\/src\/devtools\/store.js\nnew file mode 100644\nindex 0000000000..e032463957\n--- \/dev\/null\n+++ b\/src\/devtools\/store.js\n@@ -0,0 +1,1005 @@\n+\/\/ @flow\n+\n+import EventEmitter from 'events';\n+import { inspect } from 'util';\n+import {\n+ TREE_OPERATION_ADD,\n+ TREE_OPERATION_REMOVE,\n+ TREE_OPERATION_REORDER_CHILDREN,\n+ TREE_OPERATION_UPDATE_TREE_BASE_DURATION,\n+} from '..\/constants';\n+import { ElementTypeRoot } from '..\/types';\n+import {\n+ getSavedComponentFilters,\n+ saveComponentFilters,\n+ separateDisplayNameAndHOCs,\n+ shallowDiffers,\n+ utfDecodeString,\n+} from '..\/utils';\n+import { localStorageGetItem, localStorageSetItem } from '..\/storage';\n+import { __DEBUG__ } from '..\/constants';\n+import { printStore } from 'src\/__tests__\/storeSerializer';\n+import ProfilerStore from '.\/ProfilerStore';\n+\n+import type { Element } from '.\/views\/Components\/types';\n+import type { ComponentFilter, ElementType } from '..\/types';\n+import type { FrontendBridge } from 'src\/bridge';\n+\n+const debug = (methodName, ...args) => {\n+ if (__DEBUG__) {\n+ console.log(\n+ `%cStore %c${methodName}`,\n+ 'color: green; font-weight: bold;',\n+ 'font-weight: bold;',\n+ ...args\n+ );\n+ }\n+};\n+\n+const LOCAL_STORAGE_COLLAPSE_ROOTS_BY_DEFAULT_KEY =\n+ 'React::DevTools::collapseNodesByDefault';\n+const LOCAL_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY =\n+ 'React::DevTools::recordChangeDescriptions';\n+\n+type Config = {|\n+ isProfiling?: boolean,\n+ supportsNativeInspection?: boolean,\n+ supportsReloadAndProfile?: boolean,\n+ supportsProfiling?: boolean,\n+|};\n+\n+export type Capabilities = {|\n+ hasOwnerMetadata: boolean,\n+ supportsProfiling: boolean,\n+|};\n+\n+\/**\n+ * The store is the single source of truth for updates from the backend.\n+ * ContextProviders can subscribe to the Store for specific things they want to provide.\n+ *\/\n+export default class Store extends EventEmitter<{|\n+ collapseNodesByDefault: [],\n+ componentFilters: [],\n+ mutated: [[Array<number>, Map<number, number>]],\n+ recordChangeDescriptions: [],\n+ roots: [],\n+ supportsNativeStyleEditor: [],\n+ supportsProfiling: [],\n+ supportsReloadAndProfile: [],\n+|}> {\n+ _bridge: FrontendBridge;\n+\n+ \/\/ Should new nodes be collapsed by default when added to the tree?\n+ _collapseNodesByDefault: boolean = true;\n+\n+ _componentFilters: Array<ComponentFilter>;\n+\n+ \/\/ At least one of the injected renderers contains (DEV only) owner metadata.\n+ _hasOwnerMetadata: boolean = false;\n+\n+ \/\/ Map of ID to (mutable) Element.\n+ \/\/ Elements are mutated to avoid excessive cloning during tree updates.\n+ \/\/ The InspectedElementContext also relies on this mutability for its WeakMap usage.\n+ _idToElement: Map<number, Element> = new Map();\n+\n+ \/\/ Should the React Native style editor panel be shown?\n+ _isNativeStyleEditorSupported: boolean = false;\n+\n+ \/\/ Can the backend use the Storage API (e.g. localStorage)?\n+ \/\/ If not, features like reload-and-profile will not work correctly and must be disabled.\n+ _isBackendStorageAPISupported: boolean = false;\n+\n+ _nativeStyleEditorValidAttributes: $ReadOnlyArray<string> | null = null;\n+\n+ \/\/ Map of element (id) to the set of elements (ids) it owns.\n+ \/\/ This map enables getOwnersListForElement() to avoid traversing the entire tree.\n+ _ownersMap: Map<number, Set<number>> = new Map();\n+\n+ _profilerStore: ProfilerStore;\n+\n+ _recordChangeDescriptions: boolean = false;\n+\n+ \/\/ Incremented each time the store is mutated.\n+ \/\/ This enables a passive effect to detect a mutation between render and commit phase.\n+ _revision: number = 0;\n+\n+ \/\/ This Array must be treated as immutable!\n+ \/\/ Passive effects will check it for changes between render and mount.\n+ _roots: $ReadOnlyArray<number> = [];\n+\n+ _rootIDToCapabilities: Map<number, Capabilities> = new Map();\n+\n+ \/\/ Renderer ID is needed to support inspection fiber props, state, and hooks.\n+ _rootIDToRendererID: Map<number, number> = new Map();\n+\n+ \/\/ These options may be initially set by a confiugraiton option when constructing the Store.\n+ \/\/ In the case of \"supportsProfiling\", the option may be updated based on the injected renderers.\n+ _supportsNativeInspection: boolean = true;\n+ _supportsProfiling: boolean = false;\n+ _supportsReloadAndProfile: boolean = false;\n+\n+ \/\/ Total number of visible elements (within all roots).\n+ \/\/ Used for windowing purposes.\n+ _weightAcrossRoots: number = 0;\n+\n+ constructor(bridge: FrontendBridge, config?: Config) {\n+ super();\n+\n+ if (__DEBUG__) {\n+ debug('constructor', 'subscribing to Bridge');\n+ }\n+\n+ this._collapseNodesByDefault =\n+ localStorageGetItem(LOCAL_STORAGE_COLLAPSE_ROOTS_BY_DEFAULT_KEY) ===\n+ 'true';\n+\n+ this._recordChangeDescriptions =\n+ localStorageGetItem(LOCAL_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY) ===\n+ 'true';\n+\n+ this._componentFilters = getSavedComponentFilters();\n+\n+ let isProfiling = false;\n+ if (config != null) {\n+ isProfiling = config.isProfiling === true;\n+\n+ const {\n+ supportsNativeInspection,\n+ supportsProfiling,\n+ supportsReloadAndProfile,\n+ } = config;\n+ this._supportsNativeInspection = supportsNativeInspection !== false;\n+ if (supportsProfiling) {\n+ this._supportsProfiling = true;\n+ }\n+ if (supportsReloadAndProfile) {\n+ this._supportsReloadAndProfile = true;\n+ }\n+ }\n+\n+ this._bridge = bridge;\n+ bridge.addListener('operations', this.onBridgeOperations);\n+ bridge.addListener(\n+ 'overrideComponentFilters',\n+ this.onBridgeOverrideComponentFilters\n+ );\n+ bridge.addListener('shutdown', this.onBridgeShutdown);\n+ bridge.addListener(\n+ 'isBackendStorageAPISupported',\n+ this.onBridgeStorageSupported\n+ );\n+ bridge.addListener(\n+ 'isNativeStyleEditorSupported',\n+ this.onBridgeNativeStyleEditorSupported\n+ );\n+\n+ this._profilerStore = new ProfilerStore(bridge, this, isProfiling);\n+ }\n+\n+ \/\/ This is only used in tests to avoid memory leaks.\n+ assertExpectedRootMapSizes() {\n+ if (this.roots.length === 0) {\n+ \/\/ The only safe time to assert these maps are empty is when the store is empty.\n+ this.assertMapSizeMatchesRootCount(this._idToElement, '_idToElement');\n+ this.assertMapSizeMatchesRootCount(this._ownersMap, '_ownersMap');\n+ }\n+\n+ \/\/ These maps should always be the same size as the number of roots\n+ this.assertMapSizeMatchesRootCount(\n+ this._rootIDToCapabilities,\n+ '_rootIDToCapabilities'\n+ );\n+ this.assertMapSizeMatchesRootCount(\n+ this._rootIDToRendererID,\n+ '_rootIDToRendererID'\n+ );\n+ }\n+\n+ \/\/ This is only used in tests to avoid memory leaks.\n+ assertMapSizeMatchesRootCount(map: Map<any, any>, mapName: string) {\n+ const expectedSize = this.roots.length;\n+ if (map.size !== expectedSize) {\n+ throw new Error(\n+ `Expected ${mapName} to contain ${expectedSize} items, but it contains ${\n+ map.size\n+ } items\\n\\n${inspect(map, {\n+ depth: 20,\n+ })}`\n+ );\n+ }\n+ }\n+\n+ get collapseNodesByDefault(): boolean {\n+ return this._collapseNodesByDefault;\n+ }\n+ set collapseNodesByDefault(value: boolean): void {\n+ this._collapseNodesByDefault = value;\n+\n+ localStorageSetItem(\n+ LOCAL_STORAGE_COLLAPSE_ROOTS_BY_DEFAULT_KEY,\n+ value ? 'true' : 'false'\n+ );\n+\n+ this.emit('collapseNodesByDefault');\n+ }\n+\n+ get componentFilters(): Array<ComponentFilter> {\n+ return this._componentFilters;\n+ }\n+ set componentFilters(value: Array<ComponentFilter>): void {\n+ if (this._profilerStore.isProfiling) {\n+ \/\/ Re-mounting a tree while profiling is in progress might break a lot of assumptions.\n+ \/\/ If necessary, we could support this- but it doesn't seem like a necessary use case.\n+ throw Error('Cannot modify filter preferences while profiling');\n+ }\n+\n+ \/\/ Filter updates are expensive to apply (since they impact the entire tree).\n+ \/\/ Let's determine if they've changed and avoid doing this work if they haven't.\n+ const prevEnabledComponentFilters = this._componentFilters.filter(\n+ filter => filter.isEnabled\n+ );\n+ const nextEnabledComponentFilters = value.filter(\n+ filter => filter.isEnabled\n+ );\n+ let haveEnabledFiltersChanged =\n+ prevEnabledComponentFilters.length !== nextEnabledComponentFilters.length;\n+ if (!haveEnabledFiltersChanged) {\n+ for (let i = 0; i < nextEnabledComponentFilters.length; i++) {\n+ const prevFilter = prevEnabledComponentFilters[i];\n+ const nextFilter = nextEnabledComponentFilters[i];\n+ if (shallowDiffers(prevFilter, nextFilter)) {\n+ haveEnabledFiltersChanged = true;\n+ break;\n+ }\n+ }\n+ }\n+\n+ this._componentFilters = value;\n+\n+ \/\/ Update persisted filter preferences stored in localStorage.\n+ saveComponentFilters(value);\n+\n+ \/\/ Notify the renderer that filter prefernces have changed.\n+ \/\/ This is an expensive opreation; it unmounts and remounts the entire tree,\n+ \/\/ so only do it if the set of enabled component filters has changed.\n+ if (haveEnabledFiltersChanged) {\n+ this._bridge.send('updateComponentFilters', value);\n+ }\n+\n+ this.emit('componentFilters');\n+ }\n+\n+ get hasOwnerMetadata(): boolean {\n+ return this._hasOwnerMetadata;\n+ }\n+\n+ get nativeStyleEditorValidAttributes(): $ReadOnlyArray<string> | null {\n+ return this._nativeStyleEditorValidAttributes;\n+ }\n+\n+ get numElements(): number {\n+ return this._weightAcrossRoots;\n+ }\n+\n+ get profilerStore(): ProfilerStore {\n+ return this._profilerStore;\n+ }\n+\n+ get recordChangeDescriptions(): boolean {\n+ return this._recordChangeDescriptions;\n+ }\n+ set recordChangeDescriptions(value: boolean): void {\n+ this._recordChangeDescriptions = value;\n+\n+ localStorageSetItem(\n+ LOCAL_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY,\n+ value ? 'true' : 'false'\n+ );\n+\n+ this.emit('recordChangeDescriptions');\n+ }\n+\n+ get revision(): number {\n+ return this._revision;\n+ }\n+\n+ get rootIDToRendererID(): Map<number, number> {\n+ return this._rootIDToRendererID;\n+ }\n+\n+ get roots(): $ReadOnlyArray<number> {\n+ return this._roots;\n+ }\n+\n+ get supportsNativeInspection(): boolean {\n+ return this._supportsNativeInspection;\n+ }\n+\n+ get supportsNativeStyleEditor(): boolean {\n+ return this._isNativeStyleEditorSupported;\n+ }\n+\n+ get supportsProfiling(): boolean {\n+ return this._supportsProfiling;\n+ }\n+\n+ get supportsReloadAndProfile(): boolean {\n+ \/\/ Does the DevTools shell support reloading and eagerly injecting the renderer interface?\n+ \/\/ And if so, can the backend use the localStorage API?\n+ \/\/ Both of these are required for the reload-and-profile feature to work.\n+ return this._supportsReloadAndProfile && this._isBackendStorageAPISupported;\n+ }\n+\n+ containsElement(id: number): boolean {\n+ return this._idToElement.get(id) != null;\n+ }\n+\n+ getElementAtIndex(index: number): Element | null {\n+ if (index < 0 || index >= this.numElements) {\n+ console.warn(\n+ `Invalid index ${index} specified; store contains ${\n+ this.numElements\n+ } items.`\n+ );\n+\n+ return null;\n+ }\n+\n+ \/\/ Find wich root this element is in...\n+ let rootID;\n+ let root;\n+ let rootWeight = 0;\n+ for (let i = 0; i < this._roots.length; i++) {\n+ rootID = this._roots[i];\n+ root = ((this._idToElement.get(rootID): any): Element);\n+ if (root.children.length === 0) {\n+ continue;\n+ } else if (rootWeight + root.weight > index) {\n+ break;\n+ } else {\n+ rootWeight += root.weight;\n+ }\n+ }\n+\n+ \/\/ Find the element in the tree using the weight of each node...\n+ \/\/ Skip over the root itself, because roots aren't visible in the Elements tree.\n+ let currentElement = ((root: any): Element);\n+ let currentWeight = rootWeight - 1;\n+ while (index !== currentWeight) {\n+ const numChildren = currentElement.children.length;\n+ for (let i = 0; i < numChildren; i++) {\n+ const childID = currentElement.children[i];\n+ const child = ((this._idToElement.get(childID): any): Element);\n+ const childWeight = child.isCollapsed ? 1 : child.weight;\n+\n+ if (index <= currentWeight + childWeight) {\n+ currentWeight++;\n+ currentElement = child;\n+ break;\n+ } else {\n+ currentWeight += childWeight;\n+ }\n+ }\n+ }\n+\n+ return ((currentElement: any): Element) || null;\n+ }\n+\n+ getElementIDAtIndex(index: number): number | null {\n+ const element: Element | null = this.getElementAtIndex(index);\n+ return element === null ? null : element.id;\n+ }\n+\n+ getElementByID(id: number): Element | null {\n+ const element = this._idToElement.get(id);\n+ if (element == null) {\n+ console.warn(`No element found with id \"${id}\"`);\n+ return null;\n+ }\n+\n+ return element;\n+ }\n+\n+ getIndexOfElementID(id: number): number | null {\n+ const element = this.getElementByID(id);\n+\n+ if (element === null || element.parentID === 0) {\n+ return null;\n+ }\n+\n+ \/\/ Walk up the tree to the root.\n+ \/\/ Increment the index by one for each node we encounter,\n+ \/\/ and by the weight of all nodes to the left of the current one.\n+ \/\/ This should be a relatively fast way of determining the index of a node within the tree.\n+ let previousID = id;\n+ let currentID = element.parentID;\n+ let index = 0;\n+ while (true) {\n+ const current = ((this._idToElement.get(currentID): any): Element);\n+\n+ const { children } = current;\n+ for (let i = 0; i < children.length; i++) {\n+ const childID = children[i];\n+ if (childID === previousID) {\n+ break;\n+ }\n+ const child = ((this._idToElement.get(childID): any): Element);\n+ index += child.isCollapsed ? 1 : child.weight;\n+ }\n+\n+ if (current.parentID === 0) {\n+ \/\/ We found the root; stop crawling.\n+ break;\n+ }\n+\n+ index++;\n+\n+ previousID = current.id;\n+ currentID = current.parentID;\n+ }\n+\n+ \/\/ At this point, the current ID is a root (from the previous loop).\n+ \/\/ We also need to offset the index by previous root weights.\n+ for (let i = 0; i < this._roots.length; i++) {\n+ const rootID = this._roots[i];\n+ if (rootID === currentID) {\n+ break;\n+ }\n+ const root = ((this._idToElement.get(rootID): any): Element);\n+ index += root.weight;\n+ }\n+\n+ return index;\n+ }\n+\n+ getOwnersListForElement(ownerID: number): Array<Element> {\n+ const list = [];\n+ let element = this._idToElement.get(ownerID);\n+ if (element != null) {\n+ list.push({\n+ ...element,\n+ depth: 0,\n+ });\n+\n+ const unsortedIDs = this._ownersMap.get(ownerID);\n+ if (unsortedIDs !== undefined) {\n+ const depthMap: Map<number, number> = new Map([[ownerID, 0]]);\n+\n+ \/\/ Items in a set are ordered based on insertion.\n+ \/\/ This does not correlate with their order in the tree.\n+ \/\/ So first we need to order them.\n+ \/\/ I wish we could avoid this sorting operation; we could sort at insertion time,\n+ \/\/ but then we'd have to pay sorting costs even if the owners list was never used.\n+ \/\/ Seems better to defer the cost, since the set of ids is probably pretty small.\n+ const sortedIDs = Array.from(unsortedIDs).sort(\n+ (idA, idB) =>\n+ ((this.getIndexOfElementID(idA): any): number) -\n+ ((this.getIndexOfElementID(idB): any): number)\n+ );\n+\n+ \/\/ Next we need to determine the appropriate depth for each element in the list.\n+ \/\/ The depth in the list may not correspond to the depth in the tree,\n+ \/\/ because the list has been filtered to remove intermediate components.\n+ \/\/ Perhaps the easiest way to do this is to walk up the tree until we reach either:\n+ \/\/ (1) another node that's already in the tree, or (2) the root (owner)\n+ \/\/ at which point, our depth is just the depth of that node plus one.\n+ sortedIDs.forEach(id => {\n+ const element = this._idToElement.get(id);\n+ if (element != null) {\n+ let parentID = element.parentID;\n+\n+ let depth = 0;\n+ while (parentID > 0) {\n+ if (parentID === ownerID || unsortedIDs.has(parentID)) {\n+ depth = depthMap.get(parentID) + 1;\n+ depthMap.set(id, depth);\n+ break;\n+ }\n+ const parent = this._idToElement.get(parentID);\n+ if (parent == null) {\n+ break;\n+ }\n+ parentID = parent.parentID;\n+ }\n+\n+ if (depth === 0) {\n+ throw Error('Invalid owners list');\n+ }\n+\n+ list.push({ ...element, depth });\n+ }\n+ });\n+ }\n+ }\n+\n+ return list;\n+ }\n+\n+ getRendererIDForElement(id: number): number | null {\n+ let current = this._idToElement.get(id);\n+ while (current != null) {\n+ if (current.parentID === 0) {\n+ const rendererID = this._rootIDToRendererID.get(current.id);\n+ return rendererID == null ? null : rendererID;\n+ } else {\n+ current = this._idToElement.get(current.parentID);\n+ }\n+ }\n+ return null;\n+ }\n+\n+ getRootIDForElement(id: number): number | null {\n+ let current = this._idToElement.get(id);\n+ while (current != null) {\n+ if (current.parentID === 0) {\n+ return current.id;\n+ } else {\n+ current = this._idToElement.get(current.parentID);\n+ }\n+ }\n+ return null;\n+ }\n+\n+ isInsideCollapsedSubTree(id: number): boolean {\n+ let current = this._idToElement.get(id);\n+ while (current != null) {\n+ if (current.parentID === 0) {\n+ return false;\n+ } else {\n+ current = this._idToElement.get(current.parentID);\n+ if (current != null && current.isCollapsed) {\n+ return true;\n+ }\n+ }\n+ }\n+ return false;\n+ }\n+\n+ \/\/ TODO Maybe split this into two methods: expand() and collapse()\n+ toggleIsCollapsed(id: number, isCollapsed: boolean): void {\n+ let didMutate = false;\n+\n+ const element = this.getElementByID(id);\n+ if (element !== null) {\n+ if (isCollapsed) {\n+ if (element.type === ElementTypeRoot) {\n+ throw Error('Root nodes cannot be collapsed');\n+ }\n+\n+ if (!element.isCollapsed) {\n+ didMutate = true;\n+ element.isCollapsed = true;\n+\n+ const weightDelta = 1 - element.weight;\n+\n+ let parentElement = ((this._idToElement.get(\n+ element.parentID\n+ ): any): Element);\n+ while (parentElement != null) {\n+ \/\/ We don't need to break on a collapsed parent in the same way as the expand case below.\n+ \/\/ That's because collapsing a node doesn't \"bubble\" and affect its parents.\n+ parentElement.weight += weightDelta;\n+ parentElement = this._idToElement.get(parentElement.parentID);\n+ }\n+ }\n+ } else {\n+ let currentElement = element;\n+ while (currentElement != null) {\n+ const oldWeight = currentElement.isCollapsed\n+ ? 1\n+ : currentElement.weight;\n+\n+ if (currentElement.isCollapsed) {\n+ didMutate = true;\n+ currentElement.isCollapsed = false;\n+\n+ const newWeight = currentElement.isCollapsed\n+ ? 1\n+ : currentElement.weight;\n+ const weightDelta = newWeight - oldWeight;\n+\n+ let parentElement = ((this._idToElement.get(\n+ currentElement.parentID\n+ ): any): Element);\n+ while (parentElement != null) {\n+ parentElement.weight += weightDelta;\n+ if (parentElement.isCollapsed) {\n+ \/\/ It's important to break on a collapsed parent when expanding nodes.\n+ \/\/ That's because expanding a node \"bubbles\" up and expands all parents as well.\n+ \/\/ Breaking in this case prevents us from over-incrementing the expanded weights.\n+ break;\n+ }\n+ parentElement = this._idToElement.get(parentElement.parentID);\n+ }\n+ }\n+\n+ currentElement =\n+ currentElement.parentID !== 0\n+ ? this.getElementByID(currentElement.parentID)\n+ : null;\n+ }\n+ }\n+\n+ \/\/ Only re-calculate weights and emit an \"update\" event if the store was mutated.\n+ if (didMutate) {\n+ let weightAcrossRoots = 0;\n+ this._roots.forEach(rootID => {\n+ const { weight } = ((this.getElementByID(rootID): any): Element);\n+ weightAcrossRoots += weight;\n+ });\n+ this._weightAcrossRoots = weightAcrossRoots;\n+\n+ \/\/ The Tree context's search reducer expects an explicit list of ids for nodes that were added or removed.\n+ \/\/ In this case, we can pass it empty arrays since nodes in a collapsed tree are still there (just hidden).\n+ \/\/ Updating the selected search index later may require auto-expanding a collapsed subtree though.\n+ this.emit('mutated', [[], new Map()]);\n+ }\n+ }\n+ }\n+\n+ _adjustParentTreeWeight = (\n+ parentElement: Element | null,\n+ weightDelta: number\n+ ) => {\n+ let isInsideCollapsedSubTree = false;\n+\n+ while (parentElement != null) {\n+ parentElement.weight += weightDelta;\n+\n+ \/\/ Additions and deletions within a collapsed subtree should not bubble beyond the collapsed parent.\n+ \/\/ Their weight will bubble up when the parent is expanded.\n+ if (parentElement.isCollapsed) {\n+ isInsideCollapsedSubTree = true;\n+ break;\n+ }\n+\n+ parentElement = ((this._idToElement.get(\n+ parentElement.parentID\n+ ): any): Element);\n+ }\n+\n+ \/\/ Additions and deletions within a collapsed subtree should not affect the overall number of elements.\n+ if (!isInsideCollapsedSubTree) {\n+ this._weightAcrossRoots += weightDelta;\n+ }\n+ };\n+\n+ onBridgeNativeStyleEditorSupported = ({\n+ isSupported,\n+ validAttributes,\n+ }: {|\n+ isSupported: boolean,\n+ validAttributes: ?$ReadOnlyArray<string>,\n+ |}) => {\n+ this._isNativeStyleEditorSupported = isSupported;\n+ this._nativeStyleEditorValidAttributes = validAttributes || null;\n+\n+ this.emit('supportsNativeStyleEditor');\n+ };\n+\n+ onBridgeOperations = (operations: Array<number>) => {\n+ if (__DEBUG__) {\n+ console.groupCollapsed('onBridgeOperations');\n+ debug('onBridgeOperations', operations.join(','));\n+ }\n+\n+ let haveRootsChanged = false;\n+\n+ \/\/ The first two values are always rendererID and rootID\n+ const rendererID = operations[0];\n+\n+ const addedElementIDs: Array<number> = [];\n+ \/\/ This is a mapping of removed ID -> parent ID:\n+ const removedElementIDs: Map<number, number> = new Map();\n+ \/\/ We'll use the parent ID to adjust selection if it gets deleted.\n+\n+ let i = 2;\n+\n+ \/\/ Reassemble the string table.\n+ const stringTable = [\n+ null, \/\/ ID = 0 corresponds to the null string.\n+ ];\n+ const stringTableSize = operations[i++];\n+ const stringTableEnd = i + stringTableSize;\n+ while (i < stringTableEnd) {\n+ const nextLength = operations[i++];\n+ const nextString = utfDecodeString(\n+ (operations.slice(i, i + nextLength): any)\n+ );\n+ stringTable.push(nextString);\n+ i += nextLength;\n+ }\n+\n+ while (i < operations.length) {\n+ const operation = operations[i];\n+ switch (operation) {\n+ case TREE_OPERATION_ADD: {\n+ const id = ((operations[i + 1]: any): number);\n+ const type = ((operations[i + 2]: any): ElementType);\n+\n+ i = i + 3;\n+\n+ if (this._idToElement.has(id)) {\n+ throw Error(\n+ `Cannot add node ${id} because a node with that id is already in the Store.`\n+ );\n+ }\n+\n+ let ownerID: number = 0;\n+ let parentID: number = ((null: any): number);\n+ if (type === ElementTypeRoot) {\n+ if (__DEBUG__) {\n+ debug('Add', `new root node ${id}`);\n+ }\n+\n+ const supportsProfiling = operations[i] > 0;\n+ i++;\n+\n+ const hasOwnerMetadata = operations[i] > 0;\n+ i++;\n+\n+ this._roots = this._roots.concat(id);\n+ this._rootIDToRendererID.set(id, rendererID);\n+ this._rootIDToCapabilities.set(id, {\n+ hasOwnerMetadata,\n+ supportsProfiling,\n+ });\n+\n+ this._idToElement.set(id, {\n+ children: [],\n+ depth: -1,\n+ displayName: null,\n+ hocDisplayNames: null,\n+ id,\n+ isCollapsed: false, \/\/ Never collapse roots; it would hide the entire tree.\n+ key: null,\n+ ownerID: 0,\n+ parentID: 0,\n+ type,\n+ weight: 0,\n+ });\n+\n+ haveRootsChanged = true;\n+ } else {\n+ parentID = ((operations[i]: any): number);\n+ i++;\n+\n+ ownerID = ((operations[i]: any): number);\n+ i++;\n+\n+ const displayNameStringID = operations[i];\n+ const displayName = stringTable[displayNameStringID];\n+ i++;\n+\n+ const keyStringID = operations[i];\n+ const key = stringTable[keyStringID];\n+ i++;\n+\n+ if (__DEBUG__) {\n+ debug(\n+ 'Add',\n+ `node ${id} (${displayName || 'null'}) as child of ${parentID}`\n+ );\n+ }\n+\n+ if (!this._idToElement.has(parentID)) {\n+ throw Error(\n+ `Cannot add child ${id} to parent ${parentID} because parent node was not found in the Store.`\n+ );\n+ }\n+\n+ const parentElement = ((this._idToElement.get(\n+ parentID\n+ ): any): Element);\n+ parentElement.children.push(id);\n+\n+ const [\n+ displayNameWithoutHOCs,\n+ hocDisplayNames,\n+ ] = separateDisplayNameAndHOCs(displayName, type);\n+\n+ const element: Element = {\n+ children: [],\n+ depth: parentElement.depth + 1,\n+ displayName: displayNameWithoutHOCs,\n+ hocDisplayNames,\n+ id,\n+ isCollapsed: this._collapseNodesByDefault,\n+ key,\n+ ownerID,\n+ parentID: parentElement.id,\n+ type,\n+ weight: 1,\n+ };\n+\n+ this._idToElement.set(id, element);\n+ addedElementIDs.push(id);\n+ this._adjustParentTreeWeight(parentElement, 1);\n+\n+ if (ownerID > 0) {\n+ let set = this._ownersMap.get(ownerID);\n+ if (set === undefined) {\n+ set = new Set();\n+ this._ownersMap.set(ownerID, set);\n+ }\n+ set.add(id);\n+ }\n+ }\n+ break;\n+ }\n+ case TREE_OPERATION_REMOVE: {\n+ const removeLength = ((operations[i + 1]: any): number);\n+ i = i + 2;\n+\n+ for (let removeIndex = 0; removeIndex < removeLength; removeIndex++) {\n+ const id = ((operations[i]: any): number);\n+\n+ if (!this._idToElement.has(id)) {\n+ throw Error(\n+ `Cannot remove node ${id} because no matching node was found in the Store.`\n+ );\n+ }\n+\n+ i = i + 1;\n+\n+ const element = ((this._idToElement.get(id): any): Element);\n+ const { children, ownerID, parentID, weight } = element;\n+ if (children.length > 0) {\n+ throw new Error(`Node ${id} was removed before its children.`);\n+ }\n+\n+ this._idToElement.delete(id);\n+\n+ let parentElement = null;\n+ if (parentID === 0) {\n+ if (__DEBUG__) {\n+ debug('Remove', `node ${id} root`);\n+ }\n+\n+ this._roots = this._roots.filter(rootID => rootID !== id);\n+ this._rootIDToRendererID.delete(id);\n+ this._rootIDToCapabilities.delete(id);\n+\n+ haveRootsChanged = true;\n+ } else {\n+ if (__DEBUG__) {\n+ debug('Remove', `node ${id} from parent ${parentID}`);\n+ }\n+ parentElement = ((this._idToElement.get(parentID): any): Element);\n+ if (parentElement === undefined) {\n+ throw Error(\n+ `Cannot remove node ${id} from parent ${parentID} because no matching node was found in the Store.`\n+ );\n+ }\n+ const index = parentElement.children.indexOf(id);\n+ parentElement.children.splice(index, 1);\n+ }\n+\n+ this._adjustParentTreeWeight(parentElement, -weight);\n+ removedElementIDs.set(id, parentID);\n+\n+ this._ownersMap.delete(id);\n+ if (ownerID > 0) {\n+ const set = this._ownersMap.get(ownerID);\n+ if (set !== undefined) {\n+ set.delete(id);\n+ }\n+ }\n+ }\n+ break;\n+ }\n+ case TREE_OPERATION_REORDER_CHILDREN: {\n+ const id = ((operations[i + 1]: any): number);\n+ const numChildren = ((operations[i + 2]: any): number);\n+ i = i + 3;\n+\n+ if (!this._idToElement.has(id)) {\n+ throw Error(\n+ `Cannot reorder children for node ${id} because no matching node was found in the Store.`\n+ );\n+ }\n+\n+ const element = ((this._idToElement.get(id): any): Element);\n+ const children = element.children;\n+ if (children.length !== numChildren) {\n+ throw Error(\n+ `Children cannot be added or removed during a reorder operation.`\n+ );\n+ }\n+\n+ for (let j = 0; j < numChildren; j++) {\n+ const childID = operations[i + j];\n+ children[j] = childID;\n+ if (__DEV__) {\n+ \/\/ This check is more expensive so it's gated by __DEV__.\n+ const childElement = this._idToElement.get(childID);\n+ if (childElement == null || childElement.parentID !== id) {\n+ console.error(\n+ `Children cannot be added or removed during a reorder operation.`\n+ );\n+ }\n+ }\n+ }\n+ i = i + numChildren;\n+\n+ if (__DEBUG__) {\n+ debug('Re-order', `Node ${id} children ${children.join(',')}`);\n+ }\n+ break;\n+ }\n+ case TREE_OPERATION_UPDATE_TREE_BASE_DURATION:\n+ \/\/ Base duration updates are only sent while profiling is in progress.\n+ \/\/ We can ignore them at this point.\n+ \/\/ The profiler UI uses them lazily in order to generate the tree.\n+ i = i + 3;\n+ break;\n+ default:\n+ throw Error(`Unsupported Bridge operation ${operation}`);\n+ }\n+ }\n+\n+ this._revision++;\n+\n+ if (haveRootsChanged) {\n+ const prevSupportsProfiling = this._supportsProfiling;\n+\n+ this._hasOwnerMetadata = false;\n+ this._supportsProfiling = false;\n+ this._rootIDToCapabilities.forEach(\n+ ({ hasOwnerMetadata, supportsProfiling }) => {\n+ if (hasOwnerMetadata) {\n+ this._hasOwnerMetadata = true;\n+ }\n+ if (supportsProfiling) {\n+ this._supportsProfiling = true;\n+ }\n+ }\n+ );\n+\n+ this.emit('roots');\n+\n+ if (this._supportsProfiling !== prevSupportsProfiling) {\n+ this.emit('supportsProfiling');\n+ }\n+ }\n+\n+ if (__DEBUG__) {\n+ console.log(printStore(this, true));\n+ console.groupEnd();\n+ }\n+\n+ this.emit('mutated', [addedElementIDs, removedElementIDs]);\n+ };\n+\n+ \/\/ Certain backends save filters on a per-domain basis.\n+ \/\/ In order to prevent filter preferences and applied filters from being out of sync,\n+ \/\/ this message enables the backend to override the frontend's current (\"saved\") filters.\n+ \/\/ This action should also override the saved filters too,\n+ \/\/ else reloading the frontend without reloading the backend would leave things out of sync.\n+ onBridgeOverrideComponentFilters = (\n+ componentFilters: Array<ComponentFilter>\n+ ) => {\n+ this._componentFilters = componentFilters;\n+\n+ saveComponentFilters(componentFilters);\n+ };\n+\n+ onBridgeShutdown = () => {\n+ if (__DEBUG__) {\n+ debug('onBridgeShutdown', 'unsubscribing from Bridge');\n+ }\n+\n+ this._bridge.removeListener('operations', this.onBridgeOperations);\n+ this._bridge.removeListener('shutdown', this.onBridgeShutdown);\n+ this._bridge.removeListener(\n+ 'isBackendStorageAPISupported',\n+ this.onBridgeStorageSupported\n+ );\n+ };\n+\n+ onBridgeStorageSupported = (isBackendStorageAPISupported: boolean) => {\n+ this._isBackendStorageAPISupported = isBackendStorageAPISupported;\n+\n+ this.emit('supportsReloadAndProfile');\n+ };\n+}\ndiff --git a\/src\/devtools\/views\/Button.css b\/src\/devtools\/views\/Button.css\nnew file mode 100644\nindex 0000000000..d3885372b4\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Button.css\n@@ -0,0 +1,37 @@\n+.Button {\n+ border: none;\n+ background: var(--color-button-background);\n+ color: var(--color-button);\n+ padding: 0;\n+ border-radius: 0.25rem;\n+ flex: 0 0 auto;\n+}\n+.ButtonContent {\n+ display: inline-flex;\n+ align-items: center;\n+ border-radius: 0.25rem;\n+ padding: 0.25rem;\n+}\n+\n+.Button:hover {\n+ color: var(--color-button-hover);\n+}\n+.Button:active {\n+ color: var(--color-button-focus);\n+ outline: none;\n+}\n+.Button:focus,\n+.ButtonContent:focus {\n+ outline: none;\n+}\n+\n+.Button:focus > .ButtonContent {\n+ background: var(--color-button-background-focus);\n+}\n+\n+.Button:disabled,\n+.Button:disabled:active {\n+ background: var(--color-button-background);\n+ color: var(--color-button-disabled);\n+ cursor: default;\n+}\ndiff --git a\/src\/devtools\/views\/Button.js b\/src\/devtools\/views\/Button.js\nnew file mode 100644\nindex 0000000000..bb55bca22f\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Button.js\n@@ -0,0 +1,38 @@\n+\/\/ @flow\n+\n+import React from 'react';\n+import Tooltip from '@reach\/tooltip';\n+\n+import styles from '.\/Button.css';\n+import tooltipStyles from '.\/Tooltip.css';\n+\n+type Props = {\n+ children: React$Node,\n+ className?: string,\n+ title?: string,\n+};\n+\n+export default function Button({\n+ children,\n+ className = '',\n+ title = '',\n+ ...rest\n+}: Props) {\n+ let button = (\n+ <button className={`${styles.Button} ${className}`} {...rest}>\n+ <span className={`${styles.ButtonContent} ${className}`} tabIndex={-1}>\n+ {children}\n+ <\/span>\n+ <\/button>\n+ );\n+\n+ if (title) {\n+ button = (\n+ <Tooltip className={tooltipStyles.Tooltip} label={title}>\n+ {button}\n+ <\/Tooltip>\n+ );\n+ }\n+\n+ return button;\n+}\ndiff --git a\/src\/devtools\/views\/ButtonIcon.css b\/src\/devtools\/views\/ButtonIcon.css\nnew file mode 100644\nindex 0000000000..b21c094828\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/ButtonIcon.css\n@@ -0,0 +1,5 @@\n+.ButtonIcon {\n+ width: 1rem;\n+ height: 1rem;\n+ fill: currentColor;\n+}\ndiff --git a\/src\/devtools\/views\/ButtonIcon.js b\/src\/devtools\/views\/ButtonIcon.js\nnew file mode 100644\nindex 0000000000..6c3887fe66\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/ButtonIcon.js\n@@ -0,0 +1,240 @@\n+\/\/ @flow\n+\n+import React from 'react';\n+import styles from '.\/ButtonIcon.css';\n+\n+export type IconType =\n+ | 'add'\n+ | 'cancel'\n+ | 'clear'\n+ | 'close'\n+ | 'collapsed'\n+ | 'copy'\n+ | 'delete'\n+ | 'down'\n+ | 'expanded'\n+ | 'export'\n+ | 'filter'\n+ | 'import'\n+ | 'log-data'\n+ | 'more'\n+ | 'next'\n+ | 'previous'\n+ | 'record'\n+ | 'reload'\n+ | 'save'\n+ | 'search'\n+ | 'settings'\n+ | 'suspend'\n+ | 'undo'\n+ | 'up'\n+ | 'view-dom'\n+ | 'view-source';\n+\n+type Props = {|\n+ className?: string,\n+ type: IconType,\n+|};\n+\n+export default function ButtonIcon({ className = '', type }: Props) {\n+ let pathData = null;\n+ switch (type) {\n+ case 'add':\n+ pathData = PATH_ADD;\n+ break;\n+ case 'cancel':\n+ pathData = PATH_CANCEL;\n+ break;\n+ case 'clear':\n+ pathData = PATH_CLEAR;\n+ break;\n+ case 'close':\n+ pathData = PATH_CLOSE;\n+ break;\n+ case 'collapsed':\n+ pathData = PATH_COLLAPSED;\n+ break;\n+ case 'copy':\n+ pathData = PATH_COPY;\n+ break;\n+ case 'delete':\n+ pathData = PATH_DELETE;\n+ break;\n+ case 'down':\n+ pathData = PATH_DOWN;\n+ break;\n+ case 'expanded':\n+ pathData = PATH_EXPANDED;\n+ break;\n+ case 'export':\n+ pathData = PATH_EXPORT;\n+ break;\n+ case 'filter':\n+ pathData = PATH_FILTER;\n+ break;\n+ case 'import':\n+ pathData = PATH_IMPORT;\n+ break;\n+ case 'log-data':\n+ pathData = PATH_LOG_DATA;\n+ break;\n+ case 'more':\n+ pathData = PATH_MORE;\n+ break;\n+ case 'next':\n+ pathData = PATH_NEXT;\n+ break;\n+ case 'previous':\n+ pathData = PATH_PREVIOUS;\n+ break;\n+ case 'record':\n+ pathData = PATH_RECORD;\n+ break;\n+ case 'reload':\n+ pathData = PATH_RELOAD;\n+ break;\n+ case 'save':\n+ pathData = PATH_SAVE;\n+ break;\n+ case 'search':\n+ pathData = PATH_SEARCH;\n+ break;\n+ case 'settings':\n+ pathData = PATH_SETTINGS;\n+ break;\n+ case 'suspend':\n+ pathData = PATH_SUSPEND;\n+ break;\n+ case 'undo':\n+ pathData = PATH_UNDO;\n+ break;\n+ case 'up':\n+ pathData = PATH_UP;\n+ break;\n+ case 'view-dom':\n+ pathData = PATH_VIEW_DOM;\n+ break;\n+ case 'view-source':\n+ pathData = PATH_VIEW_SOURCE;\n+ break;\n+ default:\n+ console.warn(`Unsupported type \"${type}\" specified for ButtonIcon`);\n+ break;\n+ }\n+\n+ return (\n+ <svg\n+ xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\n+ className={`${styles.ButtonIcon} ${className}`}\n+ width=\"24\"\n+ height=\"24\"\n+ viewBox=\"0 0 24 24\"\n+ >\n+ <path d=\"M0 0h24v24H0z\" fill=\"none\" \/>\n+ <path fill=\"currentColor\" d={pathData} \/>\n+ <\/svg>\n+ );\n+}\n+\n+const PATH_ADD =\n+ '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';\n+\n+const PATH_CANCEL = `\n+ 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\n+`;\n+\n+const PATH_CLEAR = `\n+ 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\n+ 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\n+`;\n+\n+const PATH_CLOSE =\n+ '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';\n+\n+const PATH_COLLAPSED = 'M10 17l5-5-5-5v10z';\n+\n+const PATH_COPY = `\n+ M3 13h2v-2H3v2zm0 4h2v-2H3v2zm2 4v-2H3a2 2 0 0 0 2 2zM3 9h2V7H3v2zm12 12h2v-2h-2v2zm4-18H9a2 2 0 0 0-2\n+ 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\n+`;\n+\n+const PATH_DELETE = `\n+ 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\n+ 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\n+`;\n+\n+const PATH_DOWN = 'M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z';\n+\n+const PATH_EXPANDED = 'M7 10l5 5 5-5z';\n+\n+const PATH_EXPORT = 'M15.82,2.14v7H21l-9,9L3,9.18H8.18v-7ZM3,20.13H21v1.73H3Z';\n+\n+const PATH_FILTER = 'M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z';\n+\n+const PATH_IMPORT = 'M8.18,18.13v-7H3l9-8.95,9,9H15.82v7ZM3,20.13H21v1.73H3Z';\n+\n+const PATH_LOG_DATA = `\n+ 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\n+ 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\n+ 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\n+ 8h-4v-2h4v2zm0-4h-4v-2h4v2z\n+`;\n+\n+const PATH_MORE = `\n+ 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 \n+ 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\n+`;\n+\n+const PATH_NEXT = 'M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z';\n+\n+const PATH_PREVIOUS =\n+ 'M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z';\n+\n+const PATH_RECORD = 'M4,12a8,8 0 1,0 16,0a8,8 0 1,0 -16,0';\n+\n+const PATH_RELOAD = `\n+ 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\n+ 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\n+ 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\n+`;\n+\n+const PATH_SAVE = `\n+ 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\n+`;\n+\n+const PATH_SEARCH = `\n+ 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\n+ 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\n+`;\n+\n+const PATH_SETTINGS = `\n+ 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\n+ 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\n+ 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\n+ 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\n+ 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\n+ 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\n+ 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z\n+`;\n+\n+const PATH_SUSPEND = `\n+ 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\n+ 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\n+`;\n+\n+const PATH_UNDO = `\n+ 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\n+ 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z\n+`;\n+\n+const PATH_UP = 'M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z';\n+\n+const PATH_VIEW_DOM = `\n+ 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\n+ 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\n+ 3-1.34 3-3-1.34-3-3-3z\n+`;\n+\n+const PATH_VIEW_SOURCE = `\n+ 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\n+ `;\ndiff --git a\/src\/devtools\/views\/Components\/Badge.css b\/src\/devtools\/views\/Components\/Badge.css\nnew file mode 100644\nindex 0000000000..22f749cc5b\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/Badge.css\n@@ -0,0 +1,17 @@\n+.Badge {\n+ display: inline-block;\n+ background-color: var(--color-component-badge-background);\n+ color: var(--color-text);\n+ padding: 0.125rem 0.25rem;\n+ line-height: normal;\n+ border-radius: 0.125rem;\n+ margin-right: 0.25rem;\n+ font-family: var(--font-family-monospace);\n+ font-size: var(--font-size-monospace-small);\n+}\n+\n+.ExtraLabel {\n+ font-family: var(--font-family-monospace);\n+ font-size: var(--font-size-monospace-small);\n+ color: var(--color-component-badge-count);\n+}\ndiff --git a\/src\/devtools\/views\/Components\/Badge.js b\/src\/devtools\/views\/Components\/Badge.js\nnew file mode 100644\nindex 0000000000..76ac7bf624\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/Badge.js\n@@ -0,0 +1,47 @@\n+\/\/ @flow\n+\n+import React, { Fragment } from 'react';\n+import { ElementTypeMemo, ElementTypeForwardRef } from 'src\/types';\n+import styles from '.\/Badge.css';\n+\n+import type { ElementType } from 'src\/types';\n+\n+type Props = {|\n+ className?: string,\n+ hocDisplayNames: Array<string> | null,\n+ type: ElementType,\n+|};\n+\n+export default function Badge({ className, hocDisplayNames, type }: Props) {\n+ let hocDisplayName = null;\n+ let totalBadgeCount = 0;\n+ let typeLabel = null;\n+\n+ if (hocDisplayNames !== null) {\n+ hocDisplayName = hocDisplayNames[0];\n+ totalBadgeCount += hocDisplayNames.length;\n+ }\n+\n+ if (type === ElementTypeMemo) {\n+ typeLabel = 'Memo';\n+ totalBadgeCount++;\n+ } else if (type === ElementTypeForwardRef) {\n+ typeLabel = 'ForwardRef';\n+ totalBadgeCount++;\n+ }\n+\n+ if (hocDisplayNames === null && typeLabel === null) {\n+ return null;\n+ }\n+\n+ return (\n+ <Fragment>\n+ <div className={`${styles.Badge} ${className || ''}`}>\n+ {hocDisplayName || typeLabel}\n+ <\/div>\n+ {totalBadgeCount > 1 && (\n+ <div className={styles.ExtraLabel}>+{totalBadgeCount - 1}<\/div>\n+ )}\n+ <\/Fragment>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/Components\/Components.css b\/src\/devtools\/views\/Components\/Components.css\nnew file mode 100644\nindex 0000000000..f37b3eaa73\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/Components.css\n@@ -0,0 +1,45 @@\n+.Components {\n+ position: relative;\n+ width: 100%;\n+ height: 100%;\n+ display: flex;\n+ flex-direction: row;\n+ background-color: var(--color-background);\n+ color: var(--color-text);\n+ font-family: var(--font-family-sans);\n+}\n+\n+.TreeWrapper {\n+ flex: 0 0 65%;\n+ overflow: auto;\n+}\n+\n+.SelectedElementWrapper {\n+ flex: 0 0 35%;\n+ overflow-x: hidden;\n+ overflow-y: auto;\n+}\n+\n+@media screen and (max-width: 600px) {\n+ .Components {\n+ flex-direction: column;\n+ }\n+\n+ .TreeWrapper {\n+ flex: 0 0 50%;\n+ }\n+\n+ .SelectedElementWrapper {\n+ flex: 0 0 50%;\n+ }\n+}\n+\n+.Loading {\n+ height: 100%;\n+ padding-left: 0.5rem;\n+ display: flex;\n+ align-items: center;\n+ justify-content: center;\n+ font-size: var(--font-size-sans-large);\n+ color: var(--color-dim);\n+}\ndiff --git a\/src\/devtools\/views\/Components\/Components.js b\/src\/devtools\/views\/Components\/Components.js\nnew file mode 100644\nindex 0000000000..2623041e0c\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/Components.js\n@@ -0,0 +1,46 @@\n+\/\/ @flow\n+\n+import React, { Suspense } from 'react';\n+import Tree from '.\/Tree';\n+import SelectedElement from '.\/SelectedElement';\n+import { InspectedElementContextController } from '.\/InspectedElementContext';\n+import { NativeStyleContextController } from '.\/NativeStyleEditor\/context';\n+import { OwnersListContextController } from '.\/OwnersListContext';\n+import portaledContent from '..\/portaledContent';\n+import { ModalDialog } from '..\/ModalDialog';\n+import SettingsModal from 'src\/devtools\/views\/Settings\/SettingsModal';\n+import { SettingsModalContextController } from 'src\/devtools\/views\/Settings\/SettingsModalContext';\n+\n+import styles from '.\/Components.css';\n+\n+function Components(_: {||}) {\n+ \/\/ TODO Flex wrappers below should be user resizable.\n+ return (\n+ <SettingsModalContextController>\n+ <OwnersListContextController>\n+ <InspectedElementContextController>\n+ <div className={styles.Components}>\n+ <div className={styles.TreeWrapper}>\n+ <Tree \/>\n+ <\/div>\n+ <div className={styles.SelectedElementWrapper}>\n+ <NativeStyleContextController>\n+ <Suspense fallback={<Loading \/>}>\n+ <SelectedElement \/>\n+ <\/Suspense>\n+ <\/NativeStyleContextController>\n+ <\/div>\n+ <ModalDialog \/>\n+ <SettingsModal \/>\n+ <\/div>\n+ <\/InspectedElementContextController>\n+ <\/OwnersListContextController>\n+ <\/SettingsModalContextController>\n+ );\n+}\n+\n+function Loading() {\n+ return <div className={styles.Loading}>Loading...<\/div>;\n+}\n+\n+export default portaledContent(Components);\ndiff --git a\/src\/devtools\/views\/Components\/EditableValue.css b\/src\/devtools\/views\/Components\/EditableValue.css\nnew file mode 100644\nindex 0000000000..3087b85261\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/EditableValue.css\n@@ -0,0 +1,30 @@\n+.CheckboxLabel {\n+ flex: 1 1 100%;\n+ display: flex;\n+}\n+.CheckboxLabel:focus-within {\n+ background-color: var(--color-button-background-focus);\n+}\n+\n+.Checkbox:focus {\n+ outline: none;\n+}\n+\n+.Input {\n+ flex: 1 1;\n+ background: none;\n+ border: 1px solid transparent;\n+ color: var(--color-attribute-editable-value);\n+ border-radius: 0.125rem;\n+ font-family: var(--font-family-monospace);\n+ font-size: var(--font-size-monospace-normal);\n+}\n+.Input:focus {\n+ background-color: var(--color-button-background-focus);\n+ outline: none;\n+}\n+\n+.ResetButton {\n+ flex: 0 0 auto;\n+ padding: 0 0.5rem;\n+}\ndiff --git a\/src\/devtools\/views\/Components\/EditableValue.js b\/src\/devtools\/views\/Components\/EditableValue.js\nnew file mode 100644\nindex 0000000000..3238315a15\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/EditableValue.js\n@@ -0,0 +1,139 @@\n+\/\/ @flow\n+\n+import React, { Fragment, useCallback, useRef, useState } from 'react';\n+import Button from '..\/Button';\n+import ButtonIcon from '..\/ButtonIcon';\n+import styles from '.\/EditableValue.css';\n+\n+type OverrideValueFn = (path: Array<string | number>, value: any) => void;\n+\n+type EditableValueProps = {|\n+ dataType: string,\n+ overrideValueFn: OverrideValueFn,\n+ path: Array<string | number>,\n+ value: any,\n+|};\n+\n+export default function EditableValue({\n+ dataType,\n+ overrideValueFn,\n+ path,\n+ value,\n+}: EditableValueProps) {\n+ const [hasPendingChanges, setHasPendingChanges] = useState(false);\n+ const [editableValue, setEditableValue] = useState(value);\n+ const inputRef = useRef<HTMLInputElement | null>(null);\n+\n+ if (hasPendingChanges && editableValue === value) {\n+ setHasPendingChanges(false);\n+ }\n+\n+ const handleChange = useCallback(\n+ ({ target }) => {\n+ if (dataType === 'boolean') {\n+ setEditableValue(target.checked);\n+ overrideValueFn(path, target.checked);\n+ } else {\n+ setEditableValue(target.value);\n+ }\n+ setHasPendingChanges(true);\n+ },\n+ [dataType, overrideValueFn, path]\n+ );\n+\n+ const handleReset = useCallback(() => {\n+ setEditableValue(value);\n+ setHasPendingChanges(false);\n+\n+ if (inputRef.current !== null) {\n+ inputRef.current.focus();\n+ }\n+ }, [value]);\n+\n+ const handleKeyDown = useCallback(\n+ event => {\n+ \/\/ Prevent keydown events from e.g. change selected element in the tree\n+ event.stopPropagation();\n+\n+ const { key } = event;\n+\n+ if (key === 'Enter') {\n+ if (dataType === 'number') {\n+ const parsedValue = parseFloat(editableValue);\n+ if (!Number.isNaN(parsedValue)) {\n+ overrideValueFn(path, parsedValue);\n+ }\n+ } else {\n+ overrideValueFn(path, editableValue);\n+ }\n+\n+ \/\/ Don't reset the pending change flag here.\n+ \/\/ The inspected fiber won't be updated until after the next \"inspectElement\" message.\n+ \/\/ We'll reset that flag during a subsequent render.\n+ } else if (key === 'Escape') {\n+ setEditableValue(value);\n+ setHasPendingChanges(false);\n+ }\n+ },\n+ [editableValue, dataType, overrideValueFn, path, value]\n+ );\n+\n+ \/\/ Render different input types based on the dataType\n+ let type = 'text';\n+ if (dataType === 'boolean') {\n+ type = 'checkbox';\n+ } else if (dataType === 'number') {\n+ type = 'number';\n+ }\n+\n+ let inputValue = value == null ? '' : value;\n+ if (hasPendingChanges) {\n+ inputValue = editableValue == null ? '' : editableValue;\n+ }\n+\n+ let placeholder = '';\n+ if (value === null) {\n+ placeholder = '(null)';\n+ } else if (value === undefined) {\n+ placeholder = '(undefined)';\n+ } else if (dataType === 'string') {\n+ placeholder = '(string)';\n+ }\n+\n+ return (\n+ <Fragment>\n+ {dataType === 'boolean' && (\n+ <label className={styles.CheckboxLabel}>\n+ <input\n+ checked={inputValue}\n+ className={styles.Checkbox}\n+ onChange={handleChange}\n+ onKeyDown={handleKeyDown}\n+ ref={inputRef}\n+ type={type}\n+ \/>\n+ <\/label>\n+ )}\n+ {dataType !== 'boolean' && (\n+ <input\n+ className={styles.Input}\n+ onChange={handleChange}\n+ onKeyDown={handleKeyDown}\n+ placeholder={placeholder}\n+ ref={inputRef}\n+ type={type}\n+ value={inputValue}\n+ \/>\n+ )}\n+ {hasPendingChanges && dataType !== 'boolean' && (\n+ <Button\n+ className={styles.ResetButton}\n+ onClick={handleReset}\n+ title=\"Reset value\"\n+ >\n+ <ButtonIcon type=\"undo\" \/>\n+ <\/Button>\n+ )}\n+ <\/Fragment>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/Components\/Element.css b\/src\/devtools\/views\/Components\/Element.css\nnew file mode 100644\nindex 0000000000..f71e9f479f\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/Element.css\n@@ -0,0 +1,75 @@\n+.Element,\n+.InactiveSelectedElement,\n+.SelectedElement,\n+.HoveredElement {\n+ color: var(--color-component-name);\n+}\n+.HoveredElement {\n+ background-color: var(--color-background-hover);\n+}\n+.InactiveSelectedElement {\n+ background-color: var(--color-background-inactive);\n+}\n+\n+.Wrapper {\n+ padding: 0 0.25rem;\n+ white-space: nowrap;\n+ height: var(--line-height-data);\n+ line-height: var(--line-height-data);\n+ display: inline-flex;\n+ align-items: center;\n+ cursor: default;\n+ user-select: none;\n+}\n+\n+.ScrollAnchor {\n+ height: 100%;\n+ width: 0;\n+}\n+\n+.SelectedElement {\n+ background-color: var(--color-background-selected);\n+ color: var(--color-text-selected);\n+\n+ \/* Invert colors *\/\n+ --color-component-name: var(--color-component-name-inverted);\n+ --color-text: var(--color-text-selected);\n+ --color-component-badge-background: var(\n+ --color-component-badge-background-inverted\n+ );\n+ --color-component-badge-count: var(--color-component-badge-count-inverted);\n+ --color-attribute-name: var(--color-attribute-name-inverted);\n+ --color-attribute-value: var(--color-attribute-value-inverted);\n+ --color-expand-collapse-toggle: var(--color-component-name-inverted);\n+}\n+\n+.KeyName {\n+ color: var(--color-attribute-name);\n+}\n+\n+.KeyValue {\n+ color: var(--color-attribute-value);\n+ user-select: text;\n+ max-width: 100px;\n+ overflow-x: hidden;\n+ text-overflow: ellipsis;\n+}\n+\n+.Highlight {\n+ background-color: var(--color-search-match);\n+}\n+.CurrentHighlight {\n+ background-color: var(--color-search-match-current);\n+}\n+\n+.ExpandCollapseToggle {\n+ display: inline-flex;\n+ width: 1rem;\n+ height: 1rem;\n+ flex: 0 0 1rem;\n+ color: var(--color-expand-collapse-toggle);\n+}\n+\n+.Badge {\n+ margin-left: 0.25rem;\n+}\ndiff --git a\/src\/devtools\/views\/Components\/Element.js b\/src\/devtools\/views\/Components\/Element.js\nnew file mode 100644\nindex 0000000000..dc7f52c065\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/Element.js\n@@ -0,0 +1,231 @@\n+\/\/ @flow\n+\n+import React, { Fragment, useContext, useMemo, useState } from 'react';\n+import Store from 'src\/devtools\/store';\n+import Badge from '.\/Badge';\n+import ButtonIcon from '..\/ButtonIcon';\n+import { createRegExp } from '..\/utils';\n+import { TreeDispatcherContext, TreeStateContext } from '.\/TreeContext';\n+import { StoreContext } from '..\/context';\n+\n+import type { ItemData } from '.\/Tree';\n+import type { Element } from '.\/types';\n+\n+import styles from '.\/Element.css';\n+\n+type Props = {\n+ data: ItemData,\n+ index: number,\n+ style: Object,\n+};\n+\n+export default function ElementView({ data, index, style }: Props) {\n+ const store = useContext(StoreContext);\n+ const { ownerFlatTree, ownerID, selectedElementID } = useContext(\n+ TreeStateContext\n+ );\n+ const dispatch = useContext(TreeDispatcherContext);\n+\n+ const element =\n+ ownerFlatTree !== null\n+ ? ownerFlatTree[index]\n+ : store.getElementAtIndex(index);\n+\n+ const [isHovered, setIsHovered] = useState(false);\n+\n+ const { isNavigatingWithKeyboard, onElementMouseEnter, treeFocused } = data;\n+ const id = element === null ? null : element.id;\n+ const isSelected = selectedElementID === id;\n+\n+ const handleDoubleClick = () => {\n+ if (id !== null) {\n+ dispatch({ type: 'SELECT_OWNER', payload: id });\n+ }\n+ };\n+\n+ const handleMouseDown = ({ metaKey }) => {\n+ if (id !== null) {\n+ dispatch({\n+ type: 'SELECT_ELEMENT_BY_ID',\n+ payload: metaKey ? null : id,\n+ });\n+ }\n+ };\n+\n+ const handleMouseEnter = () => {\n+ setIsHovered(true);\n+ if (id !== null) {\n+ onElementMouseEnter(id);\n+ }\n+ };\n+\n+ const handleMouseLeave = () => {\n+ setIsHovered(false);\n+ };\n+\n+ const handleKeyDoubleClick = event => {\n+ \/\/ Double clicks on key value are used for text selection (if the text has been truncated).\n+ \/\/ They should not enter the owners tree view.\n+ event.stopPropagation();\n+ event.preventDefault();\n+ };\n+\n+ \/\/ Handle elements that are removed from the tree while an async render is in progress.\n+ if (element == null) {\n+ console.warn(`<ElementView> Could not find element at index ${index}`);\n+\n+ \/\/ This return needs to happen after hooks, since hooks can't be conditional.\n+ return null;\n+ }\n+\n+ const {\n+ depth,\n+ displayName,\n+ hocDisplayNames,\n+ key,\n+ type,\n+ } = ((element: any): Element);\n+\n+ let className = styles.Element;\n+ if (isSelected) {\n+ className = treeFocused\n+ ? styles.SelectedElement\n+ : styles.InactiveSelectedElement;\n+ } else if (isHovered && !isNavigatingWithKeyboard) {\n+ className = styles.HoveredElement;\n+ }\n+\n+ return (\n+ <div\n+ className={className}\n+ onMouseEnter={handleMouseEnter}\n+ onMouseLeave={handleMouseLeave}\n+ onMouseDown={handleMouseDown}\n+ onDoubleClick={handleDoubleClick}\n+ style={style}\n+ data-depth={depth}\n+ >\n+ {\/* This wrapper is used by Tree for measurement purposes. *\/}\n+ <div\n+ className={styles.Wrapper}\n+ style={{\n+ \/\/ Left offset presents the appearance of a nested tree structure.\n+ \/\/ We must use padding rather than margin\/left because of the selected background color.\n+ transform: `translateX(calc(${depth} * var(--indentation-size)))`,\n+ }}\n+ >\n+ {ownerID === null ? (\n+ <ExpandCollapseToggle element={element} store={store} \/>\n+ ) : null}\n+ <DisplayName displayName={displayName} id={((id: any): number)} \/>\n+ {key && (\n+ <Fragment>\n+ <span className={styles.KeyName}>key<\/span>=\"\n+ <span\n+ className={styles.KeyValue}\n+ title={key}\n+ onDoubleClick={handleKeyDoubleClick}\n+ >\n+ {key}\n+ <\/span>\n+ \"\n+ <\/Fragment>\n+ )}\n+ <Badge\n+ className={styles.Badge}\n+ hocDisplayNames={hocDisplayNames}\n+ type={type}\n+ \/>\n+ <\/div>\n+ <\/div>\n+ );\n+}\n+\n+\/\/ Prevent double clicks on toggle from drilling into the owner list.\n+const swallowDoubleClick = event => {\n+ event.preventDefault();\n+ event.stopPropagation();\n+};\n+\n+type ExpandCollapseToggleProps = {|\n+ element: Element,\n+ store: Store,\n+|};\n+\n+function ExpandCollapseToggle({ element, store }: ExpandCollapseToggleProps) {\n+ const { children, id, isCollapsed } = element;\n+\n+ const toggleCollapsed = event => {\n+ event.preventDefault();\n+ event.stopPropagation();\n+\n+ store.toggleIsCollapsed(id, !isCollapsed);\n+ };\n+\n+ const stopPropagation = event => {\n+ \/\/ Prevent the row from selecting\n+ event.stopPropagation();\n+ };\n+\n+ if (children.length === 0) {\n+ return <div className={styles.ExpandCollapseToggle} \/>;\n+ }\n+\n+ return (\n+ <div\n+ className={styles.ExpandCollapseToggle}\n+ onMouseDown={stopPropagation}\n+ onClick={toggleCollapsed}\n+ onDoubleClick={swallowDoubleClick}\n+ >\n+ <ButtonIcon type={isCollapsed ? 'collapsed' : 'expanded'} \/>\n+ <\/div>\n+ );\n+}\n+\n+type DisplayNameProps = {|\n+ displayName: string | null,\n+ id: number,\n+|};\n+\n+function DisplayName({ displayName, id }: DisplayNameProps) {\n+ const { searchIndex, searchResults, searchText } = useContext(\n+ TreeStateContext\n+ );\n+ const isSearchResult = useMemo(() => {\n+ return searchResults.includes(id);\n+ }, [id, searchResults]);\n+ const isCurrentResult =\n+ searchIndex !== null && id === searchResults[searchIndex];\n+\n+ if (!isSearchResult || displayName === null) {\n+ return displayName;\n+ }\n+\n+ const match = createRegExp(searchText).exec(displayName);\n+\n+ if (match === null) {\n+ return displayName;\n+ }\n+\n+ const startIndex = match.index;\n+ const stopIndex = startIndex + match[0].length;\n+\n+ const children = [];\n+ if (startIndex > 0) {\n+ children.push(<span key=\"begin\">{displayName.slice(0, startIndex)}<\/span>);\n+ }\n+ children.push(\n+ <mark\n+ key=\"middle\"\n+ className={isCurrentResult ? styles.CurrentHighlight : styles.Highlight}\n+ >\n+ {displayName.slice(startIndex, stopIndex)}\n+ <\/mark>\n+ );\n+ if (stopIndex < displayName.length) {\n+ children.push(<span key=\"end\">{displayName.slice(stopIndex)}<\/span>);\n+ }\n+\n+ return children;\n+}\ndiff --git a\/src\/devtools\/views\/Components\/ExpandCollapseToggle.css b\/src\/devtools\/views\/Components\/ExpandCollapseToggle.css\nnew file mode 100644\nindex 0000000000..38b2aa6f7e\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/ExpandCollapseToggle.css\n@@ -0,0 +1,7 @@\n+.ExpandCollapseToggle {\n+ flex: 0 0 1rem;\n+ width: 1rem;\n+ height: 1rem;\n+ padding: 0;\n+ color: var(--color-expand-collapse-toggle);\n+}\ndiff --git a\/src\/devtools\/views\/Components\/ExpandCollapseToggle.js b\/src\/devtools\/views\/Components\/ExpandCollapseToggle.js\nnew file mode 100644\nindex 0000000000..61fdca7f33\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/ExpandCollapseToggle.js\n@@ -0,0 +1,27 @@\n+\/\/ @flow\n+\n+import React from 'react';\n+import Button from '..\/Button';\n+import ButtonIcon from '..\/ButtonIcon';\n+\n+import styles from '.\/ExpandCollapseToggle.css';\n+\n+type ExpandCollapseToggleProps = {|\n+ isOpen: boolean,\n+ setIsOpen: Function,\n+|};\n+\n+export default function ExpandCollapseToggle({\n+ isOpen,\n+ setIsOpen,\n+}: ExpandCollapseToggleProps) {\n+ return (\n+ <Button\n+ className={styles.ExpandCollapseToggle}\n+ onClick={() => setIsOpen(prevIsOpen => !prevIsOpen)}\n+ title={`${isOpen ? 'Collapse' : 'Expand'} prop value`}\n+ >\n+ <ButtonIcon type={isOpen ? 'expanded' : 'collapsed'} \/>\n+ <\/Button>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/Components\/HocBadges.css b\/src\/devtools\/views\/Components\/HocBadges.css\nnew file mode 100644\nindex 0000000000..4b37be0325\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/HocBadges.css\n@@ -0,0 +1,16 @@\n+.HocBadges {\n+ padding: 0.125rem 0.25rem;\n+ user-select: none;\n+}\n+\n+.Badge {\n+ display: inline-block;\n+ background-color: var(--color-component-badge-background);\n+ color: var(--color-text);\n+ padding: 0.125rem 0.25rem;\n+ line-height: normal;\n+ border-radius: 0.125rem;\n+ margin-right: 0.25rem;\n+ font-family: var(--font-family-monospace);\n+ font-size: var(--font-size-monospace-small);\n+}\ndiff --git a\/src\/devtools\/views\/Components\/HocBadges.js b\/src\/devtools\/views\/Components\/HocBadges.js\nnew file mode 100644\nindex 0000000000..6cd329e826\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/HocBadges.js\n@@ -0,0 +1,38 @@\n+\/\/ @flow\n+\n+import React from 'react';\n+import { ElementTypeForwardRef, ElementTypeMemo } from 'src\/types';\n+import styles from '.\/HocBadges.css';\n+\n+import type { Element } from '.\/types';\n+\n+type Props = {|\n+ element: Element,\n+|};\n+\n+export default function HocBadges({ element }: Props) {\n+ const { hocDisplayNames, type } = ((element: any): Element);\n+\n+ let typeBadge = null;\n+ if (type === ElementTypeMemo) {\n+ typeBadge = 'Memo';\n+ } else if (type === ElementTypeForwardRef) {\n+ typeBadge = 'ForwardRef';\n+ }\n+\n+ if (hocDisplayNames === null && typeBadge === null) {\n+ return null;\n+ }\n+\n+ return (\n+ <div className={styles.HocBadges}>\n+ {typeBadge !== null && <div className={styles.Badge}>{typeBadge}<\/div>}\n+ {hocDisplayNames !== null &&\n+ hocDisplayNames.map(hocDisplayName => (\n+ <div key={hocDisplayName} className={styles.Badge}>\n+ {hocDisplayName}\n+ <\/div>\n+ ))}\n+ <\/div>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/Components\/HooksTree.css b\/src\/devtools\/views\/Components\/HooksTree.css\nnew file mode 100644\nindex 0000000000..1304c276cc\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/HooksTree.css\n@@ -0,0 +1,69 @@\n+.HooksTreeView {\n+ padding: 0.25rem;\n+ border-top: 1px solid var(--color-border);\n+}\n+\n+.Hook {\n+}\n+\n+.Children {\n+ padding-left: 1rem;\n+}\n+\n+.HeaderRow {\n+ display: flex;\n+ align-items: center;\n+}\n+\n+.Header {\n+ flex: 1 1;\n+ font-family: var(--font-family-sans);\n+}\n+\n+.NameValueRow {\n+ display: flex;\n+}\n+\n+.Name,\n+.NameAnonymous {\n+ flex: 0 0 auto;\n+ user-select: none;\n+}\n+.Name {\n+ color: var(--color-dim);\n+}\n+.NameAnonymous {\n+ color: var(--color-dimmer);\n+}\n+\n+.EditableName {\n+ color: var(--color-attribute-name);\n+ flex: 0 0 auto;\n+ user-select: none;\n+}\n+.EditableName:after,\n+.Name:after {\n+ color: var(--color-text);\n+ content: ': ';\n+ margin-right: 0.5rem;\n+}\n+\n+.Value {\n+ color: var(--color-attribute-value);\n+ overflow: hidden;\n+ text-overflow: ellipsis;\n+}\n+\n+.None {\n+ color: var(--color-dimmer);\n+ font-style: italic;\n+}\n+\n+.TruncationIndicator {\n+ color: var(--color-dimmer);\n+}\n+\n+.ExpandCollapseToggleSpacer {\n+ flex: 0 0 1rem;\n+ width: 1rem;\n+}\ndiff --git a\/src\/devtools\/views\/Components\/HooksTree.js b\/src\/devtools\/views\/Components\/HooksTree.js\nnew file mode 100644\nindex 0000000000..10df0c470a\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/HooksTree.js\n@@ -0,0 +1,286 @@\n+\/\/ @flow\n+\n+import { copy } from 'clipboard-js';\n+import React, { useCallback, useContext, useState } from 'react';\n+import { BridgeContext, StoreContext } from '..\/context';\n+import Button from '..\/Button';\n+import ButtonIcon from '..\/ButtonIcon';\n+import EditableValue from '.\/EditableValue';\n+import ExpandCollapseToggle from '.\/ExpandCollapseToggle';\n+import { InspectedElementContext } from '.\/InspectedElementContext';\n+import KeyValue from '.\/KeyValue';\n+import { serializeHooksForCopy } from '..\/utils';\n+import styles from '.\/HooksTree.css';\n+import { meta } from '..\/..\/..\/hydration';\n+\n+import type { InspectPath } from '.\/SelectedElement';\n+import type { HooksNode, HooksTree } from 'src\/backend\/types';\n+\n+type HooksTreeViewProps = {|\n+ canEditHooks: boolean,\n+ hooks: HooksTree | null,\n+ id: number,\n+|};\n+\n+export function HooksTreeView({ canEditHooks, hooks, id }: HooksTreeViewProps) {\n+ const { getInspectedElementPath } = useContext(InspectedElementContext);\n+ const inspectPath = useCallback(\n+ (path: Array<string | number>) => {\n+ getInspectedElementPath(id, ['hooks', ...path]);\n+ },\n+ [getInspectedElementPath, id]\n+ );\n+ const handleCopy = useCallback(() => copy(serializeHooksForCopy(hooks)), [\n+ hooks,\n+ ]);\n+\n+ if (hooks === null) {\n+ return null;\n+ } else {\n+ return (\n+ <div className={styles.HooksTreeView}>\n+ <div className={styles.HeaderRow}>\n+ <div className={styles.Header}>hooks<\/div>\n+ <Button onClick={handleCopy} title=\"Copy to clipboard\">\n+ <ButtonIcon type=\"copy\" \/>\n+ <\/Button>\n+ <\/div>\n+ <InnerHooksTreeView\n+ canEditHooks={canEditHooks}\n+ hooks={hooks}\n+ id={id}\n+ inspectPath={inspectPath}\n+ path={[]}\n+ \/>\n+ <\/div>\n+ );\n+ }\n+}\n+\n+type InnerHooksTreeViewProps = {|\n+ canEditHooks: boolean,\n+ hooks: HooksTree,\n+ id: number,\n+ inspectPath: InspectPath,\n+ path: Array<string | number>,\n+|};\n+\n+export function InnerHooksTreeView({\n+ canEditHooks,\n+ hooks,\n+ id,\n+ inspectPath,\n+ path,\n+}: InnerHooksTreeViewProps) {\n+ \/\/ $FlowFixMe \"Missing type annotation for U\" whatever that means\n+ return hooks.map((hook, index) => (\n+ <HookView\n+ key={index}\n+ canEditHooks={canEditHooks}\n+ hook={hooks[index]}\n+ id={id}\n+ inspectPath={inspectPath}\n+ path={path.concat([index])}\n+ \/>\n+ ));\n+}\n+\n+type HookViewProps = {|\n+ canEditHooks: boolean,\n+ hook: HooksNode,\n+ id: number,\n+ inspectPath: InspectPath,\n+ path: Array<string | number>,\n+|};\n+\n+function HookView({\n+ canEditHooks,\n+ hook,\n+ id,\n+ inspectPath,\n+ path,\n+}: HookViewProps) {\n+ const { name, id: hookID, isStateEditable, subHooks, value } = hook;\n+\n+ const bridge = useContext(BridgeContext);\n+ const store = useContext(StoreContext);\n+\n+ const [isOpen, setIsOpen] = useState<boolean>(false);\n+\n+ const toggleIsOpen = useCallback(\n+ () => setIsOpen(prevIsOpen => !prevIsOpen),\n+ []\n+ );\n+\n+ if (hook.hasOwnProperty(meta.inspected)) {\n+ \/\/ This Hook is too deep and hasn't been hydrated.\n+ if (__DEV__) {\n+ console.warn('Unexpected dehydrated hook; this is a DevTools error.');\n+ }\n+ return (\n+ <div className={styles.Hook}>\n+ <div className={styles.NameValueRow}>\n+ <span className={styles.TruncationIndicator}>...<\/span>\n+ <\/div>\n+ <\/div>\n+ );\n+ }\n+\n+ const isCustomHook = subHooks.length > 0;\n+\n+ const type = typeof value;\n+\n+ let displayValue;\n+ let isComplexDisplayValue = false;\n+\n+ \/\/ Format data for display to mimic the props\/state\/context for now.\n+ if (type === 'string') {\n+ displayValue = `\"${((value: any): string)}\"`;\n+ } else if (type === 'boolean') {\n+ displayValue = value ? 'true' : 'false';\n+ } else if (type === 'number') {\n+ displayValue = value;\n+ } else if (value === null) {\n+ displayValue = 'null';\n+ } else if (value === undefined) {\n+ displayValue = null;\n+ } else if (Array.isArray(value)) {\n+ isComplexDisplayValue = true;\n+ displayValue = 'Array';\n+ } else if (type === 'object') {\n+ isComplexDisplayValue = true;\n+ displayValue = 'Object';\n+ }\n+\n+ if (isCustomHook) {\n+ const subHooksView = Array.isArray(subHooks) ? (\n+ <InnerHooksTreeView\n+ canEditHooks={canEditHooks}\n+ hooks={subHooks}\n+ id={id}\n+ inspectPath={inspectPath}\n+ path={path.concat(['subHooks'])}\n+ \/>\n+ ) : (\n+ <KeyValue\n+ depth={1}\n+ inspectPath={inspectPath}\n+ name=\"subHooks\"\n+ path={path.concat(['subHooks'])}\n+ value={subHooks}\n+ \/>\n+ );\n+\n+ if (isComplexDisplayValue) {\n+ return (\n+ <div className={styles.Hook}>\n+ <div className={styles.NameValueRow}>\n+ <ExpandCollapseToggle isOpen={isOpen} setIsOpen={setIsOpen} \/>\n+ <span\n+ onClick={toggleIsOpen}\n+ className={name !== '' ? styles.Name : styles.NameAnonymous}\n+ >\n+ {name || 'Anonymous'}\n+ <\/span>\n+ <\/div>\n+ <div className={styles.Children} hidden={!isOpen}>\n+ <KeyValue\n+ depth={1}\n+ inspectPath={inspectPath}\n+ name=\"DebugValue\"\n+ path={path.concat(['value'])}\n+ value={value}\n+ \/>\n+ {subHooksView}\n+ <\/div>\n+ <\/div>\n+ );\n+ } else {\n+ return (\n+ <div className={styles.Hook}>\n+ <div className={styles.NameValueRow}>\n+ <ExpandCollapseToggle isOpen={isOpen} setIsOpen={setIsOpen} \/>\n+ <span\n+ onClick={toggleIsOpen}\n+ className={name !== '' ? styles.Name : styles.NameAnonymous}\n+ >\n+ {name || 'Anonymous'}\n+ <\/span>{' '}\n+ {\/* $FlowFixMe *\/}\n+ <span className={styles.Value}>{displayValue}<\/span>\n+ <\/div>\n+ <div className={styles.Children} hidden={!isOpen}>\n+ {subHooksView}\n+ <\/div>\n+ <\/div>\n+ );\n+ }\n+ } else {\n+ let overrideValueFn = null;\n+ \/\/ TODO Maybe read editable value from debug hook?\n+ if (canEditHooks && isStateEditable) {\n+ overrideValueFn = (absolutePath: Array<string | number>, value: any) => {\n+ const rendererID = store.getRendererIDForElement(id);\n+ if (rendererID !== null) {\n+ bridge.send('overrideHookState', {\n+ id,\n+ hookID,\n+ \/\/ Hooks override function expects a relative path for the specified hook (id),\n+ \/\/ starting with its id within the (flat) hooks list structure.\n+ \/\/ This relative path does not include the fake tree structure DevTools uses for display,\n+ \/\/ so it's important that we remove that part of the path before sending the update.\n+ path: absolutePath.slice(path.length + 1),\n+ rendererID,\n+ value,\n+ });\n+ }\n+ };\n+ }\n+\n+ if (isComplexDisplayValue) {\n+ return (\n+ <div className={styles.Hook}>\n+ <KeyValue\n+ depth={1}\n+ inspectPath={inspectPath}\n+ name={name}\n+ overrideValueFn={overrideValueFn}\n+ path={path.concat(['value'])}\n+ value={value}\n+ \/>\n+ <\/div>\n+ );\n+ } else {\n+ return (\n+ <div className={styles.Hook}>\n+ <div className={styles.NameValueRow}>\n+ <span className={styles.ExpandCollapseToggleSpacer} \/>\n+ <span\n+ className={\n+ typeof overrideValueFn === 'function'\n+ ? styles.EditableName\n+ : styles.Name\n+ }\n+ >\n+ {name}\n+ <\/span>\n+ {typeof overrideValueFn === 'function' ? (\n+ <EditableValue\n+ dataType={type}\n+ overrideValueFn={overrideValueFn}\n+ path={[]}\n+ value={value}\n+ \/>\n+ ) : (\n+ \/\/ $FlowFixMe Cannot create span element because in property children\n+ <span className={styles.Value}>{displayValue}<\/span>\n+ )}\n+ <\/div>\n+ <\/div>\n+ );\n+ }\n+ }\n+}\n+\n+\/\/ $FlowFixMe\n+export default React.memo(HooksTreeView);\ndiff --git a\/src\/devtools\/views\/Components\/InspectHostNodesToggle.js b\/src\/devtools\/views\/Components\/InspectHostNodesToggle.js\nnew file mode 100644\nindex 0000000000..06fad24c10\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/InspectHostNodesToggle.js\n@@ -0,0 +1,41 @@\n+\/\/ @flow\n+\n+import React, { useCallback, useContext, useEffect, useState } from 'react';\n+import { BridgeContext } from '..\/context';\n+import Toggle from '..\/Toggle';\n+import ButtonIcon from '..\/ButtonIcon';\n+\n+export default function InspectHostNodesToggle() {\n+ const [isInspecting, setIsInspecting] = useState(false);\n+ const bridge = useContext(BridgeContext);\n+\n+ const handleChange = useCallback(\n+ (isChecked: boolean) => {\n+ setIsInspecting(isChecked);\n+\n+ if (isChecked) {\n+ bridge.send('startInspectingNative');\n+ } else {\n+ bridge.send('stopInspectingNative', false);\n+ }\n+ },\n+ [bridge]\n+ );\n+\n+ useEffect(() => {\n+ const onStopInspectingNative = () => setIsInspecting(false);\n+ bridge.addListener('stopInspectingNative', onStopInspectingNative);\n+ return () =>\n+ bridge.removeListener('stopInspectingNative', onStopInspectingNative);\n+ }, [bridge]);\n+\n+ return (\n+ <Toggle\n+ onChange={handleChange}\n+ isChecked={isInspecting}\n+ title=\"Select an element in the page to inspect it\"\n+ >\n+ <ButtonIcon type=\"search\" \/>\n+ <\/Toggle>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/Components\/InspectedElementContext.js b\/src\/devtools\/views\/Components\/InspectedElementContext.js\nnew file mode 100644\nindex 0000000000..cc9d1f5969\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/InspectedElementContext.js\n@@ -0,0 +1,309 @@\n+\/\/ @flow\n+\n+import React, {\n+ createContext,\n+ useCallback,\n+ useContext,\n+ useEffect,\n+ useMemo,\n+ useState,\n+} from 'react';\n+import { unstable_batchedUpdates as batchedUpdates } from 'react-dom';\n+import { createResource } from '..\/..\/cache';\n+import { BridgeContext, StoreContext } from '..\/context';\n+import { hydrate, fillInPath } from 'src\/hydration';\n+import { TreeStateContext } from '.\/TreeContext';\n+import { separateDisplayNameAndHOCs } from 'src\/utils';\n+\n+import type {\n+ InspectedElement as InspectedElementBackend,\n+ InspectedElementPayload,\n+} from 'src\/backend\/types';\n+import type {\n+ DehydratedData,\n+ Element,\n+ InspectedElement as InspectedElementFrontend,\n+} from 'src\/devtools\/views\/Components\/types';\n+import type { Resource, Thenable } from '..\/..\/cache';\n+\n+export type GetInspectedElementPath = (\n+ id: number,\n+ path: Array<string | number>\n+) => void;\n+export type GetInspectedElement = (\n+ id: number\n+) => InspectedElementFrontend | null;\n+\n+type Context = {|\n+ getInspectedElementPath: GetInspectedElementPath,\n+ getInspectedElement: GetInspectedElement,\n+|};\n+\n+const InspectedElementContext = createContext<Context>(((null: any): Context));\n+InspectedElementContext.displayName = 'InspectedElementContext';\n+\n+type ResolveFn = (inspectedElement: InspectedElementFrontend) => void;\n+type InProgressRequest = {|\n+ promise: Thenable<InspectedElementFrontend>,\n+ resolveFn: ResolveFn,\n+|};\n+\n+const inProgressRequests: WeakMap<Element, InProgressRequest> = new WeakMap();\n+const resource: Resource<\n+ Element,\n+ Element,\n+ InspectedElementFrontend\n+> = createResource(\n+ (element: Element) => {\n+ let request = inProgressRequests.get(element);\n+ if (request != null) {\n+ return request.promise;\n+ }\n+\n+ let resolveFn = ((null: any): ResolveFn);\n+ const promise = new Promise(resolve => {\n+ resolveFn = resolve;\n+ });\n+\n+ inProgressRequests.set(element, { promise, resolveFn });\n+\n+ return promise;\n+ },\n+ (element: Element) => element,\n+ { useWeakMap: true }\n+);\n+\n+type Props = {|\n+ children: React$Node,\n+|};\n+\n+function InspectedElementContextController({ children }: Props) {\n+ const bridge = useContext(BridgeContext);\n+ const store = useContext(StoreContext);\n+\n+ \/\/ Ask the backend to fill in a \"dehydrated\" path; this will result in a \"inspectedElement\".\n+ const getInspectedElementPath = useCallback<GetInspectedElementPath>(\n+ (id: number, path: Array<string | number>) => {\n+ const rendererID = store.getRendererIDForElement(id);\n+ if (rendererID !== null) {\n+ bridge.send('inspectElement', { id, path, rendererID });\n+ }\n+ },\n+ [bridge, store]\n+ );\n+\n+ const getInspectedElement = useCallback<GetInspectedElement>(\n+ (id: number) => {\n+ const element = store.getElementByID(id);\n+ if (element !== null) {\n+ return resource.read(element);\n+ } else {\n+ return null;\n+ }\n+ },\n+ [store]\n+ );\n+\n+ \/\/ It's very important that this context consumes selectedElementID and not inspectedElementID.\n+ \/\/ Otherwise the effect that sends the \"inspect\" message across the bridge-\n+ \/\/ would itself be blocked by the same render that suspends (waiting for the data).\n+ const { selectedElementID } = useContext(TreeStateContext);\n+\n+ const [\n+ currentlyInspectedElement,\n+ setCurrentlyInspectedElement,\n+ ] = useState<InspectedElementFrontend | null>(null);\n+\n+ \/\/ This effect handler invalidates the suspense cache and schedules rendering updates with React.\n+ useEffect(() => {\n+ const onInspectedElement = (data: InspectedElementPayload) => {\n+ const { id } = data;\n+\n+ let element;\n+\n+ switch (data.type) {\n+ case 'no-change':\n+ case 'not-found':\n+ \/\/ No-op\n+ break;\n+ case 'hydrated-path':\n+ \/\/ Merge new data into previous object and invalidate cache\n+ element = store.getElementByID(id);\n+ if (element !== null) {\n+ if (currentlyInspectedElement != null) {\n+ const value = hydrateHelper(data.value, data.path);\n+ const inspectedElement = { ...currentlyInspectedElement };\n+\n+ fillInPath(inspectedElement, data.path, value);\n+\n+ resource.write(element, inspectedElement);\n+\n+ \/\/ Schedule update with React if the curently-selected element has been invalidated.\n+ if (id === selectedElementID) {\n+ setCurrentlyInspectedElement(inspectedElement);\n+ }\n+ }\n+ }\n+ break;\n+ case 'full-data':\n+ const {\n+ canEditFunctionProps,\n+ canEditHooks,\n+ canToggleSuspense,\n+ canViewSource,\n+ source,\n+ type,\n+ owners,\n+ context,\n+ hooks,\n+ props,\n+ state,\n+ } = ((data.value: any): InspectedElementBackend);\n+\n+ const inspectedElement: InspectedElementFrontend = {\n+ canEditFunctionProps,\n+ canEditHooks,\n+ canToggleSuspense,\n+ canViewSource,\n+ id,\n+ source,\n+ type,\n+ owners:\n+ owners === null\n+ ? null\n+ : owners.map(owner => {\n+ const [\n+ displayName,\n+ hocDisplayNames,\n+ ] = separateDisplayNameAndHOCs(\n+ owner.displayName,\n+ owner.type\n+ );\n+ return {\n+ ...owner,\n+ displayName,\n+ hocDisplayNames,\n+ };\n+ }),\n+ context: hydrateHelper(context),\n+ hooks: hydrateHelper(hooks),\n+ props: hydrateHelper(props),\n+ state: hydrateHelper(state),\n+ };\n+\n+ element = store.getElementByID(id);\n+ if (element !== null) {\n+ const request = inProgressRequests.get(element);\n+ if (request != null) {\n+ inProgressRequests.delete(element);\n+ batchedUpdates(() => {\n+ request.resolveFn(inspectedElement);\n+ setCurrentlyInspectedElement(inspectedElement);\n+ });\n+ } else {\n+ resource.write(element, inspectedElement);\n+\n+ \/\/ Schedule update with React if the curently-selected element has been invalidated.\n+ if (id === selectedElementID) {\n+ setCurrentlyInspectedElement(inspectedElement);\n+ }\n+ }\n+ }\n+ break;\n+ default:\n+ break;\n+ }\n+ };\n+\n+ bridge.addListener('inspectedElement', onInspectedElement);\n+ return () => bridge.removeListener('inspectedElement', onInspectedElement);\n+ }, [bridge, currentlyInspectedElement, selectedElementID, store]);\n+\n+ \/\/ This effect handler polls for updates on the currently selected element.\n+ useEffect(() => {\n+ if (selectedElementID === null) {\n+ return () => {};\n+ }\n+\n+ const rendererID = store.getRendererIDForElement(selectedElementID);\n+\n+ let timeoutID: TimeoutID | null = null;\n+\n+ const sendRequest = () => {\n+ timeoutID = null;\n+\n+ if (rendererID !== null) {\n+ bridge.send('inspectElement', { id: selectedElementID, rendererID });\n+ }\n+ };\n+\n+ \/\/ Send the initial inspection request.\n+ \/\/ We'll poll for an update in the response handler below.\n+ sendRequest();\n+\n+ const onInspectedElement = (data: InspectedElementPayload) => {\n+ \/\/ If this is the element we requested, wait a little bit and then ask for another update.\n+ if (data.id === selectedElementID) {\n+ switch (data.type) {\n+ case 'no-change':\n+ case 'full-data':\n+ case 'hydrated-path':\n+ if (timeoutID !== null) {\n+ clearTimeout(timeoutID);\n+ }\n+ timeoutID = setTimeout(sendRequest, 1000);\n+ break;\n+ default:\n+ break;\n+ }\n+ }\n+ };\n+\n+ bridge.addListener('inspectedElement', onInspectedElement);\n+\n+ return () => {\n+ bridge.removeListener('inspectedElement', onInspectedElement);\n+\n+ if (timeoutID !== null) {\n+ clearTimeout(timeoutID);\n+ }\n+ };\n+ }, [bridge, selectedElementID, store]);\n+\n+ const value = useMemo(\n+ () => ({ getInspectedElement, getInspectedElementPath }),\n+ \/\/ InspectedElement is used to invalidate the cache and schedule an update with React.\n+ \/\/ eslint-disable-next-line react-hooks\/exhaustive-deps\n+ [currentlyInspectedElement, getInspectedElement, getInspectedElementPath]\n+ );\n+\n+ return (\n+ <InspectedElementContext.Provider value={value}>\n+ {children}\n+ <\/InspectedElementContext.Provider>\n+ );\n+}\n+\n+function hydrateHelper(\n+ dehydratedData: DehydratedData | null,\n+ path?: Array<string | number>\n+): Object | null {\n+ if (dehydratedData !== null) {\n+ let { cleaned, data } = dehydratedData;\n+\n+ if (path) {\n+ const { length } = path;\n+ if (length > 0) {\n+ \/\/ Hydration helper requires full paths, but inspection dehydrates with relative paths.\n+ \/\/ In that event it's important that we adjust the \"cleaned\" paths to match.\n+ cleaned = cleaned.map(cleanedPath => cleanedPath.slice(length));\n+ }\n+ }\n+\n+ return hydrate(data, cleaned);\n+ } else {\n+ return null;\n+ }\n+}\n+\n+export { InspectedElementContext, InspectedElementContextController };\ndiff --git a\/src\/devtools\/views\/Components\/InspectedElementTree.css b\/src\/devtools\/views\/Components\/InspectedElementTree.css\nnew file mode 100644\nindex 0000000000..620fbf412d\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/InspectedElementTree.css\n@@ -0,0 +1,48 @@\n+.InspectedElementTree {\n+ padding: 0.25rem;\n+ border-top: 1px solid var(--color-border);\n+}\n+.InspectedElementTree:first-of-type {\n+ border-top: none;\n+}\n+\n+.HeaderRow {\n+ display: flex;\n+ align-items: center;\n+}\n+\n+.Header {\n+ flex: 1 1;\n+ font-family: var(--font-family-sans);\n+}\n+\n+.Item {\n+ display: flex;\n+}\n+\n+.Name {\n+ color: var(--color-attribute-name);\n+ flex: 0 0 auto;\n+}\n+.Name:after {\n+ content: ': ';\n+ color: var(--color-text);\n+ margin-right: 0.5rem;\n+}\n+\n+.Value {\n+ color: var(--color-attribute-value);\n+ overflow: hidden;\n+ text-overflow: ellipsis;\n+}\n+\n+.None {\n+ color: var(--color-dimmer);\n+ font-style: italic;\n+}\n+\n+.Empty {\n+ color: var(--color-dimmer);\n+ font-style: italic;\n+ padding-left: 0.75rem;\n+}\ndiff --git a\/src\/devtools\/views\/Components\/InspectedElementTree.js b\/src\/devtools\/views\/Components\/InspectedElementTree.js\nnew file mode 100644\nindex 0000000000..5475b236c8\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/InspectedElementTree.js\n@@ -0,0 +1,65 @@\n+\/\/ @flow\n+\n+import { copy } from 'clipboard-js';\n+import React, { useCallback } from 'react';\n+import Button from '..\/Button';\n+import ButtonIcon from '..\/ButtonIcon';\n+import KeyValue from '.\/KeyValue';\n+import { serializeDataForCopy } from '..\/utils';\n+import styles from '.\/InspectedElementTree.css';\n+\n+import type { InspectPath } from '.\/SelectedElement';\n+\n+type OverrideValueFn = (path: Array<string | number>, value: any) => void;\n+\n+type Props = {|\n+ data: Object | null,\n+ inspectPath?: InspectPath,\n+ label: string,\n+ overrideValueFn?: ?OverrideValueFn,\n+ showWhenEmpty?: boolean,\n+|};\n+\n+export default function InspectedElementTree({\n+ data,\n+ inspectPath,\n+ label,\n+ overrideValueFn,\n+ showWhenEmpty = false,\n+}: Props) {\n+ const isEmpty = data === null || Object.keys(data).length === 0;\n+\n+ const handleCopy = useCallback(() => copy(serializeDataForCopy(data)), [\n+ data,\n+ ]);\n+\n+ if (isEmpty && !showWhenEmpty) {\n+ return null;\n+ } else {\n+ return (\n+ <div className={styles.InspectedElementTree}>\n+ <div className={styles.HeaderRow}>\n+ <div className={styles.Header}>{label}<\/div>\n+ {!isEmpty && (\n+ <Button onClick={handleCopy} title=\"Copy to clipboard\">\n+ <ButtonIcon type=\"copy\" \/>\n+ <\/Button>\n+ )}\n+ <\/div>\n+ {isEmpty && <div className={styles.Empty}>None<\/div>}\n+ {!isEmpty &&\n+ Object.keys((data: any)).map(name => (\n+ <KeyValue\n+ key={name}\n+ depth={1}\n+ inspectPath={inspectPath}\n+ name={name}\n+ overrideValueFn={overrideValueFn}\n+ path={[name]}\n+ value={(data: any)[name]}\n+ \/>\n+ ))}\n+ <\/div>\n+ );\n+ }\n+}\ndiff --git a\/src\/devtools\/views\/Components\/KeyValue.css b\/src\/devtools\/views\/Components\/KeyValue.css\nnew file mode 100644\nindex 0000000000..5ccbeb1e66\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/KeyValue.css\n@@ -0,0 +1,37 @@\n+.Item:not([hidden]) {\n+ display: flex;\n+}\n+\n+.Name {\n+ color: var(--color-dim);\n+ flex: 0 0 auto;\n+ user-select: none;\n+}\n+.EditableName {\n+ color: var(--color-attribute-name);\n+ flex: 0 0 auto;\n+ user-select: none;\n+}\n+.EditableName:after,\n+.Name:after {\n+ content: ': ';\n+ color: var(--color-text);\n+ margin-right: 0.5rem;\n+}\n+\n+.Value {\n+ color: var(--color-attribute-value);\n+ white-space: nowrap;\n+ overflow: hidden;\n+ text-overflow: ellipsis;\n+}\n+\n+.None {\n+ color: var(--color-dimmer);\n+ font-style: italic;\n+}\n+\n+.ExpandCollapseToggleSpacer {\n+ flex: 0 0 1rem;\n+ width: 1rem;\n+}\ndiff --git a\/src\/devtools\/views\/Components\/KeyValue.js b\/src\/devtools\/views\/Components\/KeyValue.js\nnew file mode 100644\nindex 0000000000..7fd333a0a8\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/KeyValue.js\n@@ -0,0 +1,194 @@\n+\/\/ @flow\n+\n+import React, { useEffect, useRef, useState } from 'react';\n+import type { Element } from 'react';\n+import EditableValue from '.\/EditableValue';\n+import ExpandCollapseToggle from '.\/ExpandCollapseToggle';\n+import { getMetaValueLabel } from '..\/utils';\n+import { meta } from '..\/..\/..\/hydration';\n+import styles from '.\/KeyValue.css';\n+\n+import type { InspectPath } from '.\/SelectedElement';\n+\n+type OverrideValueFn = (path: Array<string | number>, value: any) => void;\n+\n+type KeyValueProps = {|\n+ depth: number,\n+ hidden?: boolean,\n+ inspectPath?: InspectPath,\n+ name: string,\n+ overrideValueFn?: ?OverrideValueFn,\n+ path: Array<any>,\n+ value: any,\n+|};\n+\n+export default function KeyValue({\n+ depth,\n+ inspectPath,\n+ hidden,\n+ name,\n+ overrideValueFn,\n+ path,\n+ value,\n+}: KeyValueProps) {\n+ const [isOpen, setIsOpen] = useState<boolean>(false);\n+ const prevIsOpenRef = useRef(isOpen);\n+\n+ const isInspectable =\n+ value !== null &&\n+ typeof value === 'object' &&\n+ value[meta.inspectable] &&\n+ value[meta.size] !== 0;\n+\n+ useEffect(() => {\n+ if (\n+ isInspectable &&\n+ isOpen &&\n+ !prevIsOpenRef.current &&\n+ typeof inspectPath === 'function'\n+ ) {\n+ inspectPath(path);\n+ }\n+ prevIsOpenRef.current = isOpen;\n+ }, [inspectPath, isInspectable, isOpen, path]);\n+\n+ const toggleIsOpen = () => setIsOpen(prevIsOpen => !prevIsOpen);\n+\n+ const dataType = typeof value;\n+ const isSimpleType =\n+ dataType === 'number' ||\n+ dataType === 'string' ||\n+ dataType === 'boolean' ||\n+ value == null;\n+\n+ const style = {\n+ paddingLeft: `${(depth - 1) * 0.75}rem`,\n+ };\n+\n+ let children = null;\n+ if (isSimpleType) {\n+ let displayValue = value;\n+ if (dataType === 'string') {\n+ displayValue = `\"${value}\"`;\n+ } else if (dataType === 'boolean') {\n+ displayValue = value ? 'true' : 'false';\n+ } else if (value === null) {\n+ displayValue = 'null';\n+ } else if (value === undefined) {\n+ displayValue = 'undefined';\n+ }\n+\n+ const nameClassName =\n+ typeof overrideValueFn === 'function' ? styles.EditableName : styles.Name;\n+\n+ children = (\n+ <div key=\"root\" className={styles.Item} hidden={hidden} style={style}>\n+ <div className={styles.ExpandCollapseToggleSpacer} \/>\n+ <span className={nameClassName}>{name}<\/span>\n+ {typeof overrideValueFn === 'function' ? (\n+ <EditableValue\n+ dataType={dataType}\n+ overrideValueFn={overrideValueFn}\n+ path={path}\n+ value={value}\n+ \/>\n+ ) : (\n+ <span className={styles.Value}>{displayValue}<\/span>\n+ )}\n+ <\/div>\n+ );\n+ } else if (value.hasOwnProperty(meta.type)) {\n+ children = (\n+ <div key=\"root\" className={styles.Item} hidden={hidden} style={style}>\n+ {isInspectable ? (\n+ <ExpandCollapseToggle isOpen={isOpen} setIsOpen={setIsOpen} \/>\n+ ) : (\n+ <div className={styles.ExpandCollapseToggleSpacer} \/>\n+ )}\n+ <span\n+ className={styles.Name}\n+ onClick={isInspectable ? toggleIsOpen : undefined}\n+ >\n+ {name}\n+ <\/span>\n+ <span className={styles.Value}>{getMetaValueLabel(value)}<\/span>\n+ <\/div>\n+ );\n+ } else {\n+ if (Array.isArray(value)) {\n+ const hasChildren = value.length > 0;\n+\n+ children = value.map((innerValue, index) => (\n+ <KeyValue\n+ key={index}\n+ depth={depth + 1}\n+ inspectPath={inspectPath}\n+ hidden={hidden || !isOpen}\n+ name={index}\n+ overrideValueFn={overrideValueFn}\n+ path={path.concat(index)}\n+ value={value[index]}\n+ \/>\n+ ));\n+ children.unshift(\n+ <div\n+ key={`${depth}-root`}\n+ className={styles.Item}\n+ hidden={hidden}\n+ style={style}\n+ >\n+ {hasChildren ? (\n+ <ExpandCollapseToggle isOpen={isOpen} setIsOpen={setIsOpen} \/>\n+ ) : (\n+ <div className={styles.ExpandCollapseToggleSpacer} \/>\n+ )}\n+ <span\n+ className={styles.Name}\n+ onClick={hasChildren ? toggleIsOpen : undefined}\n+ >\n+ {name}\n+ <\/span>\n+ <span>Array<\/span>\n+ <\/div>\n+ );\n+ } else {\n+ const hasChildren = Object.entries(value).length > 0;\n+\n+ children = Object.entries(value).map<Element<any>>(([name, value]) => (\n+ <KeyValue\n+ key={name}\n+ depth={depth + 1}\n+ inspectPath={inspectPath}\n+ hidden={hidden || !isOpen}\n+ name={name}\n+ overrideValueFn={overrideValueFn}\n+ path={path.concat(name)}\n+ value={value}\n+ \/>\n+ ));\n+ children.unshift(\n+ <div\n+ key={`${depth}-root`}\n+ className={styles.Item}\n+ hidden={hidden}\n+ style={style}\n+ >\n+ {hasChildren ? (\n+ <ExpandCollapseToggle isOpen={isOpen} setIsOpen={setIsOpen} \/>\n+ ) : (\n+ <div className={styles.ExpandCollapseToggleSpacer} \/>\n+ )}\n+ <span\n+ className={styles.Name}\n+ onClick={hasChildren ? toggleIsOpen : undefined}\n+ >\n+ {name}\n+ <\/span>\n+ <span>Object<\/span>\n+ <\/div>\n+ );\n+ }\n+ }\n+\n+ return children;\n+}\ndiff --git a\/src\/devtools\/views\/Components\/NativeStyleEditor\/AutoSizeInput.css b\/src\/devtools\/views\/Components\/NativeStyleEditor\/AutoSizeInput.css\nnew file mode 100644\nindex 0000000000..d231c8b8af\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/NativeStyleEditor\/AutoSizeInput.css\n@@ -0,0 +1,26 @@\n+.Input {\n+ width: 0;\n+ min-width: 0.5rem;\n+ flex: 1 1 auto;\n+ border: none;\n+ background: transparent;\n+ outline: none;\n+ padding: 0;\n+ border: none;\n+ font-family: var(--font-family-monospace);\n+ font-size: var(--font-size-monospace-normal);\n+}\n+\n+.Input:focus {\n+ border-color: var(--color-border);\n+}\n+\n+.HiddenDiv {\n+ position: absolute;\n+ top: 0;\n+ left: 0;\n+ visibility: hidden;\n+ height: 0;\n+ overflow: scroll;\n+ white-space: pre;\n+}\ndiff --git a\/src\/devtools\/views\/Components\/NativeStyleEditor\/AutoSizeInput.js b\/src\/devtools\/views\/Components\/NativeStyleEditor\/AutoSizeInput.js\nnew file mode 100644\nindex 0000000000..b9fc9b6e0b\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/NativeStyleEditor\/AutoSizeInput.js\n@@ -0,0 +1,97 @@\n+\/\/ @flow\n+\n+import React, { Fragment, useLayoutEffect, useRef } from 'react';\n+import styles from '.\/AutoSizeInput.css';\n+\n+type Props = {\n+ className?: string,\n+ onFocus?: (event: FocusEvent) => void,\n+ placeholder?: string,\n+ value: any,\n+};\n+\n+export default function AutoSizeInput({\n+ className,\n+ onFocus,\n+ placeholder,\n+ value,\n+ ...rest\n+}: Props) {\n+ const hiddenDivRef = useRef<HTMLDivElement | null>(null);\n+ const inputRef = useRef<HTMLInputElement | null>(null);\n+\n+ const onFocusWrapper = event => {\n+ if (inputRef.current !== null) {\n+ inputRef.current.selectionStart = 0;\n+ inputRef.current.selectionEnd = value.length;\n+ }\n+\n+ if (typeof onFocus === 'function') {\n+ onFocus(event);\n+ }\n+ };\n+\n+ \/\/ Copy text stlyes from <input> to hidden sizing <div>\n+ useLayoutEffect(() => {\n+ if (\n+ typeof window.getComputedStyle !== 'function' ||\n+ inputRef.current === null\n+ ) {\n+ return;\n+ }\n+\n+ const inputStyle = window.getComputedStyle(inputRef.current);\n+ if (!inputStyle) {\n+ return;\n+ }\n+\n+ if (hiddenDivRef.current !== null) {\n+ const divStyle = hiddenDivRef.current.style;\n+ divStyle.border = inputStyle.border;\n+ divStyle.fontFamily = inputStyle.fontFamily;\n+ divStyle.fontSize = inputStyle.fontSize;\n+ divStyle.fontStyle = inputStyle.fontStyle;\n+ divStyle.fontWeight = inputStyle.fontWeight;\n+ divStyle.letterSpacing = inputStyle.letterSpacing;\n+ divStyle.padding = inputStyle.padding;\n+ }\n+ }, []);\n+\n+ \/\/ Resize input any time text changes\n+ useLayoutEffect(() => {\n+ if (hiddenDivRef.current === null) {\n+ return;\n+ }\n+\n+ const scrollWidth = hiddenDivRef.current.getBoundingClientRect().width;\n+ if (!scrollWidth) {\n+ return;\n+ }\n+\n+ \/\/ Adding an extra pixel avoids a slight horizontal scroll when changing text selection\/cursor.\n+ \/\/ Not sure why this is, but the old DevTools did a similar thing.\n+ const targetWidth = Math.ceil(scrollWidth) + 1;\n+\n+ if (inputRef.current !== null) {\n+ inputRef.current.style.width = `${targetWidth}px`;\n+ }\n+ }, [value]);\n+\n+ const isEmpty = value === '' || value === '\"\"';\n+\n+ return (\n+ <Fragment>\n+ <input\n+ ref={inputRef}\n+ className={`${className ? className : ''} ${styles.Input}`}\n+ onFocus={onFocusWrapper}\n+ placeholder={placeholder}\n+ value={isEmpty ? '' : value}\n+ {...rest}\n+ \/>\n+ <div ref={hiddenDivRef} className={styles.HiddenDiv}>\n+ {isEmpty ? placeholder : value}\n+ <\/div>\n+ <\/Fragment>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/Components\/NativeStyleEditor\/LayoutViewer.css b\/src\/devtools\/views\/Components\/NativeStyleEditor\/LayoutViewer.css\nnew file mode 100644\nindex 0000000000..d21b49197a\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/NativeStyleEditor\/LayoutViewer.css\n@@ -0,0 +1,50 @@\n+.LayoutViewer {\n+ padding: 0.25rem;\n+ border-top: 1px solid var(--color-border);\n+ font-family: var(--font-family-monospace);\n+ font-size: var(--font-size-monospace-small);\n+}\n+\n+.Header {\n+ font-family: var(--font-family-sans);\n+}\n+\n+.DashedBox,\n+.SolidBox {\n+ flex: 1 1 auto;\n+ display: flex;\n+ flex-direction: column;\n+ align-items: center;\n+ border-width: 1px;\n+ border-color: var(--color-dim);\n+ padding: 0.25rem;\n+ margin: 0.25rem;\n+}\n+.DashedBox {\n+ border-style: dashed;\n+}\n+.SolidBox {\n+ border-style: solid;\n+}\n+\n+.LabelRow {\n+ width: 100%;\n+ position: relative;\n+ display: flex;\n+ align-items: center;\n+ justify-content: center;\n+}\n+\n+.Label {\n+ position: absolute;\n+ left: 0.5rem;\n+ flex: 1 0 100px;\n+ color: var(--color-attribute-name);\n+}\n+\n+.BoxRow {\n+ width: 100%;\n+ display: flex;\n+ flex-direction: row;\n+ align-items: center;\n+}\ndiff --git a\/src\/devtools\/views\/Components\/NativeStyleEditor\/LayoutViewer.js b\/src\/devtools\/views\/Components\/NativeStyleEditor\/LayoutViewer.js\nnew file mode 100644\nindex 0000000000..1a47248011\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/NativeStyleEditor\/LayoutViewer.js\n@@ -0,0 +1,64 @@\n+\/\/ @flow\n+\n+import React from 'react';\n+import styles from '.\/LayoutViewer.css';\n+\n+import type { Layout } from '.\/types';\n+\n+type Props = {|\n+ id: number,\n+ layout: Layout,\n+|};\n+\n+export default function LayoutViewer({ id, layout }: Props) {\n+ const { height, margin, padding, y, width, x } = layout;\n+\n+ return (\n+ <div className={styles.LayoutViewer}>\n+ <div className={styles.Header}>layout<\/div>\n+ <div className={styles.DashedBox}>\n+ <div className={styles.LabelRow}>\n+ <label className={styles.Label}>margin<\/label>\n+\n+ <label>{margin.top || '-'}<\/label>\n+ <\/div>\n+\n+ <div className={styles.BoxRow}>\n+ <label>{margin.left || '-'}<\/label>\n+\n+ <div className={styles.SolidBox}>\n+ <div className={styles.LabelRow}>\n+ <label className={styles.Label}>padding<\/label>\n+\n+ <label>{padding.top || '-'}<\/label>\n+ <\/div>\n+\n+ <div className={styles.BoxRow}>\n+ <label>{padding.left || '-'}<\/label>\n+\n+ <div className={styles.DashedBox}>\n+ <div className={styles.LabelRow}>\n+ {format(width)} x {format(height)} ({format(x)}, {format(y)})\n+ <\/div>\n+ <\/div>\n+\n+ <label>{padding.right || '-'}<\/label>\n+ <\/div>\n+\n+ <label>{padding.bottom || '-'}<\/label>\n+ <\/div>\n+ <label>{margin.right || '-'}<\/label>\n+ <\/div>\n+ <label>{margin.bottom || '-'}<\/label>\n+ <\/div>\n+ <\/div>\n+ );\n+}\n+\n+function format(number: number): string | number {\n+ if (Math.round(number) === number) {\n+ return number;\n+ } else {\n+ return number.toFixed(1);\n+ }\n+}\ndiff --git a\/src\/devtools\/views\/Components\/NativeStyleEditor\/StyleEditor.css b\/src\/devtools\/views\/Components\/NativeStyleEditor\/StyleEditor.css\nnew file mode 100644\nindex 0000000000..bbaaf16ea5\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/NativeStyleEditor\/StyleEditor.css\n@@ -0,0 +1,58 @@\n+.StyleEditor {\n+ font-family: var(--font-family-monospace);\n+ font-size: var(--font-size-monospace-normal);\n+ padding: 0.25rem;\n+ border-top: 1px solid var(--color-border);\n+}\n+\n+.HeaderRow {\n+ display: flex;\n+ align-items: center;\n+}\n+\n+.Header {\n+ flex: 1 1;\n+}\n+\n+.Brackets {\n+ font-family: var(--font-family-sans);\n+ font-size: var(--font-size-sans-small);\n+}\n+\n+.Row {\n+ white-space: nowrap;\n+ padding-left: 1rem;\n+ display: flex;\n+ align-items: center;\n+}\n+\n+.Invalid {\n+ background-color: var(--color-background-invalid);\n+ color: var(--color-text-invalid);\n+\n+ --color-border: var(--color-text-invalid);\n+}\n+.Attribute {\n+ color: var(--color-attribute-name);\n+}\n+\n+.Value {\n+ color: var(--color-attribute-value);\n+}\n+\n+.Input {\n+ flex: 0 1 auto;\n+ padding: 1px;\n+ box-shadow: 0px 1px 3px transparent;\n+}\n+.Input:focus {\n+ color: var(--color-text);\n+ box-shadow: 0px 1px 3px var(--color-shadow);\n+}\n+\n+.Empty {\n+ color: var(--color-dimmer);\n+ font-style: italic;\n+ user-select: none;\n+ padding-left: 1rem;\n+}\ndiff --git a\/src\/devtools\/views\/Components\/NativeStyleEditor\/StyleEditor.js b\/src\/devtools\/views\/Components\/NativeStyleEditor\/StyleEditor.js\nnew file mode 100644\nindex 0000000000..94d6923c37\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/NativeStyleEditor\/StyleEditor.js\n@@ -0,0 +1,284 @@\n+\/\/ @flow\n+\n+import React, { useContext, useMemo, useRef, useState } from 'react';\n+import { unstable_batchedUpdates as batchedUpdates } from 'react-dom';\n+import { copy } from 'clipboard-js';\n+import { BridgeContext, StoreContext } from 'src\/devtools\/views\/context';\n+import Button from '..\/..\/Button';\n+import ButtonIcon from '..\/..\/ButtonIcon';\n+import { serializeDataForCopy } from '..\/..\/utils';\n+import AutoSizeInput from '.\/AutoSizeInput';\n+import styles from '.\/StyleEditor.css';\n+\n+import type { Style } from '.\/types';\n+\n+type Props = {|\n+ id: number,\n+ style: Style,\n+|};\n+\n+type ChangeAttributeFn = (oldName: string, newName: string, value: any) => void;\n+type ChangeValueFn = (name: string, value: any) => void;\n+\n+export default function StyleEditor({ id, style }: Props) {\n+ const bridge = useContext(BridgeContext);\n+ const store = useContext(StoreContext);\n+\n+ const changeAttribute = (oldName: string, newName: string, value: any) => {\n+ const rendererID = store.getRendererIDForElement(id);\n+ if (rendererID !== null) {\n+ bridge.send('NativeStyleEditor_renameAttribute', {\n+ id,\n+ rendererID,\n+ oldName,\n+ newName,\n+ value,\n+ });\n+ }\n+ };\n+\n+ const changeValue = (name: string, value: any) => {\n+ const rendererID = store.getRendererIDForElement(id);\n+ if (rendererID !== null) {\n+ bridge.send('NativeStyleEditor_setValue', {\n+ id,\n+ rendererID,\n+ name,\n+ value,\n+ });\n+ }\n+ };\n+\n+ const keys = useMemo(() => Array.from(Object.keys(style)), [style]);\n+\n+ const handleCopy = () => copy(serializeDataForCopy(style));\n+\n+ return (\n+ <div className={styles.StyleEditor}>\n+ <div className={styles.HeaderRow}>\n+ <div className={styles.Header}>\n+ <div className={styles.Brackets}>{'style {'}<\/div>\n+ <\/div>\n+ <Button onClick={handleCopy} title=\"Copy to clipboard\">\n+ <ButtonIcon type=\"copy\" \/>\n+ <\/Button>\n+ <\/div>\n+ {keys.length > 0 &&\n+ keys.map(attribute => (\n+ <Row\n+ key={attribute}\n+ attribute={attribute}\n+ changeAttribute={changeAttribute}\n+ changeValue={changeValue}\n+ validAttributes={store.nativeStyleEditorValidAttributes}\n+ value={style[attribute]}\n+ \/>\n+ ))}\n+ <NewRow\n+ changeAttribute={changeAttribute}\n+ changeValue={changeValue}\n+ validAttributes={store.nativeStyleEditorValidAttributes}\n+ \/>\n+ <div className={styles.Brackets}>{'}'}<\/div>\n+ <\/div>\n+ );\n+}\n+\n+type NewRowProps = {|\n+ changeAttribute: ChangeAttributeFn,\n+ changeValue: ChangeValueFn,\n+ validAttributes: $ReadOnlyArray<string> | null,\n+|};\n+\n+function NewRow({\n+ changeAttribute,\n+ changeValue,\n+ validAttributes,\n+}: NewRowProps) {\n+ const [key, setKey] = useState<number>(0);\n+ const reset = () => setKey(key + 1);\n+\n+ const newAttributeRef = useRef<string>('');\n+\n+ const changeAttributeWrapper = (\n+ oldAttribute: string,\n+ newAttribute: string,\n+ value: any\n+ ) => {\n+ \/\/ Ignore attribute changes until a value has been specified\n+ newAttributeRef.current = newAttribute;\n+ };\n+\n+ const changeValueWrapper = (attribute: string, value: any) => {\n+ \/\/ Blur events should reset\/cancel if there's no value or no attribute\n+ if (newAttributeRef.current !== '') {\n+ if (value !== '') {\n+ changeValue(newAttributeRef.current, value);\n+ }\n+ reset();\n+ }\n+ };\n+\n+ return (\n+ <Row\n+ key={key}\n+ attribute={''}\n+ attributePlaceholder=\"attribute\"\n+ changeAttribute={changeAttributeWrapper}\n+ changeValue={changeValueWrapper}\n+ validAttributes={validAttributes}\n+ value={''}\n+ valuePlaceholder=\"value\"\n+ \/>\n+ );\n+}\n+\n+type RowProps = {|\n+ attribute: string,\n+ attributePlaceholder?: string,\n+ changeAttribute: ChangeAttributeFn,\n+ changeValue: ChangeValueFn,\n+ validAttributes: $ReadOnlyArray<string> | null,\n+ value: any,\n+ valuePlaceholder?: string,\n+|};\n+\n+function Row({\n+ attribute,\n+ attributePlaceholder,\n+ changeAttribute,\n+ changeValue,\n+ validAttributes,\n+ value,\n+ valuePlaceholder,\n+}: RowProps) {\n+ \/\/ TODO (RN style editor) Use @reach\/combobox to auto-complete attributes.\n+ \/\/ The list of valid attributes would need to be injected by RN backend,\n+ \/\/ which would need to require them from ReactNativeViewViewConfig \"validAttributes.style\" keys.\n+ \/\/ This would need to degrade gracefully for react-native-web,\n+ \/\/ althoguh we could let it also inject a custom set of whitelisted attributes.\n+\n+ const [localAttribute, setLocalAttribute] = useState(attribute);\n+ const [localValue, setLocalValue] = useState(JSON.stringify(value));\n+ const [isAttributeValid, setIsAttributeValid] = useState(true);\n+ const [isValueValid, setIsValueValid] = useState(true);\n+\n+ const validateAndSetLocalAttribute = attribute => {\n+ const isValid =\n+ attribute === '' ||\n+ validAttributes === null ||\n+ validAttributes.indexOf(attribute) >= 0;\n+\n+ batchedUpdates(() => {\n+ setLocalAttribute(attribute);\n+ setIsAttributeValid(isValid);\n+ });\n+ };\n+\n+ const validateAndSetLocalValue = value => {\n+ let isValid = false;\n+ try {\n+ JSON.parse(value);\n+ isValid = true;\n+ } catch (error) {}\n+\n+ batchedUpdates(() => {\n+ setLocalValue(value);\n+ setIsValueValid(isValid);\n+ });\n+ };\n+\n+ const resetAttribute = () => {\n+ setLocalAttribute(attribute);\n+ };\n+\n+ const resetValue = () => {\n+ setLocalValue(value);\n+ };\n+\n+ const submitValueChange = () => {\n+ if (isValueValid) {\n+ const parsedLocalValue = JSON.parse(localValue);\n+ if (value !== parsedLocalValue) {\n+ changeValue(attribute, parsedLocalValue);\n+ }\n+ }\n+ };\n+\n+ const submitAttributeChange = () => {\n+ if (isAttributeValid && attribute !== localAttribute) {\n+ changeAttribute(attribute, localAttribute, value);\n+ }\n+ };\n+\n+ return (\n+ <div className={styles.Row}>\n+ <Field\n+ className={isAttributeValid ? styles.Attribute : styles.Invalid}\n+ onChange={validateAndSetLocalAttribute}\n+ onReset={resetAttribute}\n+ onSubmit={submitAttributeChange}\n+ placeholder={attributePlaceholder}\n+ value={localAttribute}\n+ \/>\n+ : \n+ <Field\n+ className={isValueValid ? styles.Value : styles.Invalid}\n+ onChange={validateAndSetLocalValue}\n+ onReset={resetValue}\n+ onSubmit={submitValueChange}\n+ placeholder={valuePlaceholder}\n+ value={localValue}\n+ \/>\n+ ;\n+ <\/div>\n+ );\n+}\n+\n+type FieldProps = {|\n+ className: string,\n+ onChange: (value: any) => void,\n+ onReset: () => void,\n+ onSubmit: () => void,\n+ placeholder?: string,\n+ value: any,\n+|};\n+\n+function Field({\n+ className,\n+ onChange,\n+ onReset,\n+ onSubmit,\n+ placeholder,\n+ value,\n+}: FieldProps) {\n+ const onKeyDown = event => {\n+ switch (event.key) {\n+ case 'Enter':\n+ onSubmit();\n+ break;\n+ case 'Escape':\n+ onReset();\n+ break;\n+ case 'ArrowDown':\n+ case 'ArrowLeft':\n+ case 'ArrowRight':\n+ case 'ArrowUp':\n+ event.stopPropagation();\n+ break;\n+ default:\n+ break;\n+ }\n+ };\n+\n+ return (\n+ <AutoSizeInput\n+ className={`${className} ${styles.Input}`}\n+ onBlur={onSubmit}\n+ onChange={event => onChange(event.target.value)}\n+ onKeyDown={onKeyDown}\n+ placeholder={placeholder}\n+ value={value}\n+ \/>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/Components\/NativeStyleEditor\/context.js b\/src\/devtools\/views\/Components\/NativeStyleEditor\/context.js\nnew file mode 100644\nindex 0000000000..f062fef43e\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/NativeStyleEditor\/context.js\n@@ -0,0 +1,189 @@\n+\/\/ @flow\n+\n+import React, {\n+ createContext,\n+ useCallback,\n+ useContext,\n+ useEffect,\n+ useMemo,\n+ useState,\n+} from 'react';\n+import { unstable_batchedUpdates as batchedUpdates } from 'react-dom';\n+import { createResource } from 'src\/devtools\/cache';\n+import { BridgeContext, StoreContext } from 'src\/devtools\/views\/context';\n+import { TreeStateContext } from '..\/TreeContext';\n+\n+import type { StyleAndLayout as StyleAndLayoutBackend } from 'src\/backend\/NativeStyleEditor\/types';\n+import type { StyleAndLayout as StyleAndLayoutFrontend } from '.\/types';\n+import type { Element } from 'src\/devtools\/views\/Components\/types';\n+import type { Resource, Thenable } from 'src\/devtools\/cache';\n+\n+export type GetStyleAndLayout = (id: number) => StyleAndLayoutFrontend | null;\n+\n+type Context = {|\n+ getStyleAndLayout: GetStyleAndLayout,\n+|};\n+\n+const NativeStyleContext = createContext<Context>(((null: any): Context));\n+NativeStyleContext.displayName = 'NativeStyleContext';\n+\n+type ResolveFn = (styleAndLayout: StyleAndLayoutFrontend) => void;\n+type InProgressRequest = {|\n+ promise: Thenable<StyleAndLayoutFrontend>,\n+ resolveFn: ResolveFn,\n+|};\n+\n+const inProgressRequests: WeakMap<Element, InProgressRequest> = new WeakMap();\n+const resource: Resource<\n+ Element,\n+ Element,\n+ StyleAndLayoutFrontend\n+> = createResource(\n+ (element: Element) => {\n+ let request = inProgressRequests.get(element);\n+ if (request != null) {\n+ return request.promise;\n+ }\n+\n+ let resolveFn = ((null: any): ResolveFn);\n+ const promise = new Promise(resolve => {\n+ resolveFn = resolve;\n+ });\n+\n+ inProgressRequests.set(element, { promise, resolveFn });\n+\n+ return promise;\n+ },\n+ (element: Element) => element,\n+ { useWeakMap: true }\n+);\n+\n+type Props = {|\n+ children: React$Node,\n+|};\n+\n+function NativeStyleContextController({ children }: Props) {\n+ const bridge = useContext(BridgeContext);\n+ const store = useContext(StoreContext);\n+\n+ const getStyleAndLayout = useCallback<GetStyleAndLayout>(\n+ (id: number) => {\n+ const element = store.getElementByID(id);\n+ if (element !== null) {\n+ return resource.read(element);\n+ } else {\n+ return null;\n+ }\n+ },\n+ [store]\n+ );\n+\n+ \/\/ It's very important that this context consumes selectedElementID and not NativeStyleID.\n+ \/\/ Otherwise the effect that sends the \"inspect\" message across the bridge-\n+ \/\/ would itself be blocked by the same render that suspends (waiting for the data).\n+ const { selectedElementID } = useContext(TreeStateContext);\n+\n+ const [\n+ currentStyleAndLayout,\n+ setCurrentStyleAndLayout,\n+ ] = useState<StyleAndLayoutFrontend | null>(null);\n+\n+ \/\/ This effect handler invalidates the suspense cache and schedules rendering updates with React.\n+ useEffect(() => {\n+ const onStyleAndLayout = ({ id, layout, style }: StyleAndLayoutBackend) => {\n+ let element = store.getElementByID(id);\n+ if (element !== null) {\n+ const styleAndLayout: StyleAndLayoutFrontend = {\n+ layout,\n+ style,\n+ };\n+ const request = inProgressRequests.get(element);\n+ if (request != null) {\n+ inProgressRequests.delete(element);\n+ batchedUpdates(() => {\n+ request.resolveFn(styleAndLayout);\n+ setCurrentStyleAndLayout(styleAndLayout);\n+ });\n+ } else {\n+ resource.write(element, styleAndLayout);\n+\n+ \/\/ Schedule update with React if the curently-selected element has been invalidated.\n+ if (id === selectedElementID) {\n+ setCurrentStyleAndLayout(styleAndLayout);\n+ }\n+ }\n+ }\n+ };\n+\n+ bridge.addListener('NativeStyleEditor_styleAndLayout', onStyleAndLayout);\n+ return () =>\n+ bridge.removeListener(\n+ 'NativeStyleEditor_styleAndLayout',\n+ onStyleAndLayout\n+ );\n+ }, [bridge, currentStyleAndLayout, selectedElementID, store]);\n+\n+ \/\/ This effect handler polls for updates on the currently selected element.\n+ useEffect(() => {\n+ if (selectedElementID === null) {\n+ return () => {};\n+ }\n+\n+ const rendererID = store.getRendererIDForElement(selectedElementID);\n+\n+ let timeoutID: TimeoutID | null = null;\n+\n+ const sendRequest = () => {\n+ timeoutID = null;\n+\n+ if (rendererID !== null) {\n+ bridge.send('NativeStyleEditor_measure', {\n+ id: selectedElementID,\n+ rendererID,\n+ });\n+ }\n+ };\n+\n+ \/\/ Send the initial measurement request.\n+ \/\/ We'll poll for an update in the response handler below.\n+ sendRequest();\n+\n+ const onStyleAndLayout = ({ id }: StyleAndLayoutBackend) => {\n+ \/\/ If this is the element we requested, wait a little bit and then ask for another update.\n+ if (id === selectedElementID) {\n+ if (timeoutID !== null) {\n+ clearTimeout(timeoutID);\n+ }\n+ timeoutID = setTimeout(sendRequest, 1000);\n+ }\n+ };\n+\n+ bridge.addListener('NativeStyleEditor_styleAndLayout', onStyleAndLayout);\n+\n+ return () => {\n+ bridge.removeListener(\n+ 'NativeStyleEditor_styleAndLayout',\n+ onStyleAndLayout\n+ );\n+\n+ if (timeoutID !== null) {\n+ clearTimeout(timeoutID);\n+ }\n+ };\n+ }, [bridge, selectedElementID, store]);\n+\n+ const value = useMemo(\n+ () => ({ getStyleAndLayout }),\n+ \/\/ NativeStyle is used to invalidate the cache and schedule an update with React.\n+ \/\/ eslint-disable-next-line react-hooks\/exhaustive-deps\n+ [currentStyleAndLayout, getStyleAndLayout]\n+ );\n+\n+ return (\n+ <NativeStyleContext.Provider value={value}>\n+ {children}\n+ <\/NativeStyleContext.Provider>\n+ );\n+}\n+\n+export { NativeStyleContext, NativeStyleContextController };\ndiff --git a\/src\/devtools\/views\/Components\/NativeStyleEditor\/index.js b\/src\/devtools\/views\/Components\/NativeStyleEditor\/index.js\nnew file mode 100644\nindex 0000000000..def85e5610\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/NativeStyleEditor\/index.js\n@@ -0,0 +1,68 @@\n+\/\/ @flow\n+\n+import React, { Fragment, useContext, useMemo } from 'react';\n+import Store from 'src\/devtools\/store';\n+import { StoreContext } from 'src\/devtools\/views\/context';\n+import { useSubscription } from 'src\/devtools\/views\/hooks';\n+import { NativeStyleContext } from '.\/context';\n+import LayoutViewer from '.\/LayoutViewer';\n+import StyleEditor from '.\/StyleEditor';\n+import { TreeStateContext } from '..\/TreeContext';\n+\n+type Props = {||};\n+\n+export default function NativeStyleEditorWrapper(_: Props) {\n+ const store = useContext(StoreContext);\n+\n+ const subscription = useMemo(\n+ () => ({\n+ getCurrentValue: () => store.supportsNativeStyleEditor,\n+ subscribe: (callback: Function) => {\n+ store.addListener('supportsNativeStyleEditor', callback);\n+ return () => {\n+ store.removeListener('supportsNativeStyleEditor', callback);\n+ };\n+ },\n+ }),\n+ [store]\n+ );\n+ const supportsNativeStyleEditor = useSubscription<boolean, Store>(\n+ subscription\n+ );\n+\n+ if (!supportsNativeStyleEditor) {\n+ return null;\n+ }\n+\n+ return <NativeStyleEditor \/>;\n+}\n+\n+function NativeStyleEditor(_: Props) {\n+ const { getStyleAndLayout } = useContext(NativeStyleContext);\n+\n+ const { inspectedElementID } = useContext(TreeStateContext);\n+ if (inspectedElementID === null) {\n+ return null;\n+ }\n+\n+ const maybeStyleAndLayout = getStyleAndLayout(inspectedElementID);\n+ if (maybeStyleAndLayout === null) {\n+ return null;\n+ }\n+\n+ const { layout, style } = maybeStyleAndLayout;\n+\n+ return (\n+ <Fragment>\n+ {layout !== null && (\n+ <LayoutViewer id={inspectedElementID} layout={layout} \/>\n+ )}\n+ {style !== null && (\n+ <StyleEditor\n+ id={inspectedElementID}\n+ style={style !== null ? style : {}}\n+ \/>\n+ )}\n+ <\/Fragment>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/Components\/NativeStyleEditor\/types.js b\/src\/devtools\/views\/Components\/NativeStyleEditor\/types.js\nnew file mode 100644\nindex 0000000000..882412af3a\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/NativeStyleEditor\/types.js\n@@ -0,0 +1,13 @@\n+\/\/ @flow\n+\n+import type {\n+ Layout as LayoutBackend,\n+ Style as StyleBackend,\n+} from 'src\/backend\/NativeStyleEditor\/types';\n+\n+export type Layout = LayoutBackend;\n+export type Style = StyleBackend;\n+export type StyleAndLayout = {|\n+ layout: LayoutBackend | null,\n+ style: StyleBackend | null,\n+|};\ndiff --git a\/src\/devtools\/views\/Components\/OwnersListContext.js b\/src\/devtools\/views\/Components\/OwnersListContext.js\nnew file mode 100644\nindex 0000000000..6da02d3546\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/OwnersListContext.js\n@@ -0,0 +1,124 @@\n+\/\/ @flow\n+\n+import React, {\n+ createContext,\n+ useCallback,\n+ useContext,\n+ useEffect,\n+} from 'react';\n+import { createResource } from '..\/..\/cache';\n+import { BridgeContext, StoreContext } from '..\/context';\n+import { TreeStateContext } from '.\/TreeContext';\n+import { separateDisplayNameAndHOCs } from 'src\/utils';\n+\n+import type { OwnersList } from 'src\/backend\/types';\n+import type { Element, Owner } from 'src\/devtools\/views\/Components\/types';\n+import type { Resource, Thenable } from '..\/..\/cache';\n+\n+type Context = (id: number) => Array<Owner> | null;\n+\n+const OwnersListContext = createContext<Context>(((null: any): Context));\n+OwnersListContext.displayName = 'OwnersListContext';\n+\n+type ResolveFn = (ownersList: Array<Owner> | null) => void;\n+type InProgressRequest = {|\n+ promise: Thenable<Array<Owner>>,\n+ resolveFn: ResolveFn,\n+|};\n+\n+const inProgressRequests: WeakMap<Element, InProgressRequest> = new WeakMap();\n+const resource: Resource<Element, Element, Array<Owner>> = createResource(\n+ (element: Element) => {\n+ let request = inProgressRequests.get(element);\n+ if (request != null) {\n+ return request.promise;\n+ }\n+\n+ let resolveFn = ((null: any): ResolveFn);\n+ const promise = new Promise(resolve => {\n+ resolveFn = resolve;\n+ });\n+\n+ inProgressRequests.set(element, { promise, resolveFn });\n+\n+ return promise;\n+ },\n+ (element: Element) => element,\n+ { useWeakMap: true }\n+);\n+\n+type Props = {|\n+ children: React$Node,\n+|};\n+\n+function OwnersListContextController({ children }: Props) {\n+ const bridge = useContext(BridgeContext);\n+ const store = useContext(StoreContext);\n+ const { ownerID } = useContext(TreeStateContext);\n+\n+ const read = useCallback(\n+ (id: number) => {\n+ const element = store.getElementByID(id);\n+ if (element !== null) {\n+ return resource.read(element);\n+ } else {\n+ return null;\n+ }\n+ },\n+ [store]\n+ );\n+\n+ useEffect(() => {\n+ const onOwnersList = (ownersList: OwnersList) => {\n+ const id = ownersList.id;\n+\n+ const element = store.getElementByID(id);\n+ if (element !== null) {\n+ const request = inProgressRequests.get(element);\n+ if (request != null) {\n+ inProgressRequests.delete(element);\n+\n+ request.resolveFn(\n+ ownersList.owners === null\n+ ? null\n+ : ownersList.owners.map(owner => {\n+ const [\n+ displayNameWithoutHOCs,\n+ hocDisplayNames,\n+ ] = separateDisplayNameAndHOCs(owner.displayName, owner.type);\n+\n+ return {\n+ ...owner,\n+ displayName: displayNameWithoutHOCs,\n+ hocDisplayNames,\n+ };\n+ })\n+ );\n+ }\n+ }\n+ };\n+\n+ bridge.addListener('ownersList', onOwnersList);\n+ return () => bridge.removeListener('ownersList', onOwnersList);\n+ }, [bridge, store]);\n+\n+ \/\/ This effect requests an updated owners list any time the selected owner changes\n+ useEffect(() => {\n+ if (ownerID !== null) {\n+ const rendererID = store.getRendererIDForElement(ownerID);\n+ if (rendererID !== null) {\n+ bridge.send('getOwnersList', { id: ownerID, rendererID });\n+ }\n+ }\n+\n+ return () => {};\n+ }, [bridge, ownerID, store]);\n+\n+ return (\n+ <OwnersListContext.Provider value={read}>\n+ {children}\n+ <\/OwnersListContext.Provider>\n+ );\n+}\n+\n+export { OwnersListContext, OwnersListContextController };\ndiff --git a\/src\/devtools\/views\/Components\/OwnersStack.css b\/src\/devtools\/views\/Components\/OwnersStack.css\nnew file mode 100644\nindex 0000000000..5fed9e61d4\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/OwnersStack.css\n@@ -0,0 +1,104 @@\n+.OwnerStack {\n+ max-width: 100%;\n+ overflow-x: auto;\n+ flex: 1;\n+ display: flex;\n+ align-items: center;\n+ position: relative;\n+}\n+\n+.Component,\n+.Component[data-reach-menu-item] {\n+ font-family: var(--font-family-monospace);\n+ font-size: var(--font-size-monospace-normal);\n+ user-select: none;\n+ white-space: nowrap;\n+ display: flex;\n+ align-items: center;\n+}\n+\n+.Component[data-reach-menu-item][data-selected],\n+.Component[data-reach-menu-item][data-selected]:hover {\n+ color: var(--color-text-selected);\n+ background: var(--color-background-selected);\n+}\n+.Component[data-reach-menu-item][data-selected]:focus {\n+ outline: none;\n+}\n+\n+.Bar {\n+ display: flex;\n+ flex: 1 1 auto;\n+ overflow-x: auto;\n+}\n+\n+.VRule {\n+ flex: 0 0 auto;\n+ height: 20px;\n+ width: 1px;\n+ background-color: var(--color-border);\n+ margin: 0 0.5rem;\n+}\n+\n+.MenuButton {\n+ border-radius: 0.25rem;\n+ display: inline-flex;\n+ align-items: center;\n+ padding: 0;\n+ flex: 0 0 auto;\n+ border: none;\n+ background: var(--color-button-background);\n+ color: var(--color-button);\n+}\n+.MenuButtonContent {\n+ display: inline-flex;\n+ align-items: center;\n+ border-radius: 0.25rem;\n+ padding: 0.25rem;\n+}\n+.MenuButton:hover {\n+ color: var(--color-button-hover);\n+}\n+.MenuButton[aria-expanded='true'],\n+.MenuButton[aria-expanded='true']:active {\n+ color: var(--color-button-active);\n+ outline: none;\n+}\n+\n+.MenuButton:focus,\n+.MenuButtonContent:focus {\n+ outline: none;\n+}\n+.MenuButton:focus > .MenuButtonContent {\n+ background: var(--color-button-background-focus);\n+}\n+\n+.Modal[data-reach-menu-list] {\n+ display: inline-flex;\n+ flex-direction: column;\n+ background-color: var(--color-background);\n+ color: var(--color-button);\n+ padding: 0.25rem 0;\n+ padding-right: 0;\n+ border: 1px solid var(--color-border);\n+ border-radius: 0.25rem;\n+ max-height: 10rem;\n+ overflow: auto;\n+\n+ \/* Make sure this is above the DevTools, which are above the Overlay *\/\n+ z-index: 10000002;\n+ position: relative;\n+\n+ \/* Reach UI tries to set its own :( *\/\n+ font-family: var(--font-family-monospace);\n+ font-size: var(--font-size-monospace-normal);\n+}\n+\n+.NotInStore,\n+.NotInStore:hover {\n+ color: var(--color-dimmest);\n+}\n+\n+.Badge {\n+ margin-left: 0.25rem;\n+}\ndiff --git a\/src\/devtools\/views\/Components\/OwnersStack.js b\/src\/devtools\/views\/Components\/OwnersStack.js\nnew file mode 100644\nindex 0000000000..befae507de\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/OwnersStack.js\n@@ -0,0 +1,304 @@\n+\/\/ @flow\n+import React, {\n+ Fragment,\n+ useCallback,\n+ useContext,\n+ useLayoutEffect,\n+ useReducer,\n+ useRef,\n+ useState,\n+} from 'react';\n+import Tooltip from '@reach\/tooltip';\n+import { Menu, MenuList, MenuButton, MenuItem } from '@reach\/menu-button';\n+import Button from '..\/Button';\n+import ButtonIcon from '..\/ButtonIcon';\n+import Toggle from '..\/Toggle';\n+import Badge from '.\/Badge';\n+import { OwnersListContext } from '.\/OwnersListContext';\n+import { TreeDispatcherContext, TreeStateContext } from '.\/TreeContext';\n+import { useIsOverflowing } from '..\/hooks';\n+import { StoreContext } from '..\/context';\n+\n+import type { Owner } from '.\/types';\n+\n+import styles from '.\/OwnersStack.css';\n+\n+type SelectOwner = (owner: Owner | null) => void;\n+\n+type ACTION_UPDATE_OWNER_ID = {|\n+ type: 'UPDATE_OWNER_ID',\n+ ownerID: number | null,\n+ owners: Array<Owner>,\n+|};\n+type ACTION_UPDATE_SELECTED_INDEX = {|\n+ type: 'UPDATE_SELECTED_INDEX',\n+ selectedIndex: number,\n+|};\n+\n+type Action = ACTION_UPDATE_OWNER_ID | ACTION_UPDATE_SELECTED_INDEX;\n+\n+type State = {|\n+ ownerID: number | null,\n+ owners: Array<Owner>,\n+ selectedIndex: number,\n+|};\n+\n+function dialogReducer(state, action) {\n+ switch (action.type) {\n+ case 'UPDATE_OWNER_ID':\n+ const selectedIndex = action.owners.findIndex(\n+ owner => owner.id === action.ownerID\n+ );\n+ return {\n+ ownerID: action.ownerID,\n+ owners: action.owners,\n+ selectedIndex,\n+ };\n+ case 'UPDATE_SELECTED_INDEX':\n+ return {\n+ ...state,\n+ selectedIndex: action.selectedIndex,\n+ };\n+ default:\n+ throw new Error(`Invalid action \"${action.type}\"`);\n+ }\n+}\n+\n+export default function OwnerStack() {\n+ const read = useContext(OwnersListContext);\n+ const { ownerID } = useContext(TreeStateContext);\n+ const treeDispatch = useContext(TreeDispatcherContext);\n+\n+ const [state, dispatch] = useReducer<State, Action>(dialogReducer, {\n+ ownerID: null,\n+ owners: [],\n+ selectedIndex: 0,\n+ });\n+\n+ \/\/ When an owner is selected, we either need to update the selected index, or we need to fetch a new list of owners.\n+ \/\/ We use a reducer here so that we can avoid fetching a new list unless the owner ID has actually changed.\n+ if (ownerID === null) {\n+ dispatch({\n+ type: 'UPDATE_OWNER_ID',\n+ ownerID: null,\n+ owners: [],\n+ });\n+ } else if (ownerID !== state.ownerID) {\n+ const isInStore =\n+ state.owners.findIndex(owner => owner.id === ownerID) >= 0;\n+ dispatch({\n+ type: 'UPDATE_OWNER_ID',\n+ ownerID,\n+ owners: isInStore ? state.owners : read(ownerID) || [],\n+ });\n+ }\n+\n+ const { owners, selectedIndex } = state;\n+\n+ const selectOwner = useCallback<SelectOwner>(\n+ (owner: Owner | null) => {\n+ if (owner !== null) {\n+ const index = owners.indexOf(owner);\n+ dispatch({\n+ type: 'UPDATE_SELECTED_INDEX',\n+ selectedIndex: index >= 0 ? index : 0,\n+ });\n+ treeDispatch({ type: 'SELECT_OWNER', payload: owner.id });\n+ } else {\n+ dispatch({\n+ type: 'UPDATE_SELECTED_INDEX',\n+ selectedIndex: 0,\n+ });\n+ treeDispatch({ type: 'RESET_OWNER_STACK' });\n+ }\n+ },\n+ [owners, treeDispatch]\n+ );\n+\n+ const [elementsTotalWidth, setElementsTotalWidth] = useState(0);\n+ const elementsBarRef = useRef<HTMLDivElement | null>(null);\n+ const isOverflowing = useIsOverflowing(elementsBarRef, elementsTotalWidth);\n+\n+ const selectedOwner = owners[selectedIndex];\n+\n+ useLayoutEffect(() => {\n+ \/\/ If we're already overflowing, then we don't need to re-measure items.\n+ \/\/ That's because once the owners stack is open, it can only get larger (by driling in).\n+ \/\/ A totally new stack can only be reached by exiting this mode and re-entering it.\n+ if (elementsBarRef.current === null || isOverflowing) {\n+ return () => {};\n+ }\n+\n+ let elementsTotalWidth = 0;\n+ for (let i = 0; i < owners.length; i++) {\n+ const element = elementsBarRef.current.children[i];\n+ const computedStyle = getComputedStyle(element);\n+\n+ elementsTotalWidth +=\n+ element.offsetWidth +\n+ parseInt(computedStyle.marginLeft, 10) +\n+ parseInt(computedStyle.marginRight, 10);\n+ }\n+\n+ setElementsTotalWidth(elementsTotalWidth);\n+ }, [elementsBarRef, isOverflowing, owners.length]);\n+\n+ return (\n+ <div className={styles.OwnerStack}>\n+ <div className={styles.Bar} ref={elementsBarRef}>\n+ {isOverflowing && (\n+ <Fragment>\n+ <ElementsDropdown\n+ owners={owners}\n+ selectedIndex={selectedIndex}\n+ selectOwner={selectOwner}\n+ \/>\n+ <BackToOwnerButton\n+ owners={owners}\n+ selectedIndex={selectedIndex}\n+ selectOwner={selectOwner}\n+ \/>\n+ {selectedOwner != null && (\n+ <ElementView\n+ owner={selectedOwner}\n+ isSelected\n+ selectOwner={selectOwner}\n+ \/>\n+ )}\n+ <\/Fragment>\n+ )}\n+ {!isOverflowing &&\n+ owners.map((owner, index) => (\n+ <ElementView\n+ key={index}\n+ owner={owner}\n+ isSelected={index === selectedIndex}\n+ selectOwner={selectOwner}\n+ \/>\n+ ))}\n+ <\/div>\n+ <div className={styles.VRule} \/>\n+ <Button\n+ className={styles.IconButton}\n+ onClick={() => selectOwner(null)}\n+ title=\"Back to tree view\"\n+ >\n+ <ButtonIcon type=\"close\" \/>\n+ <\/Button>\n+ <\/div>\n+ );\n+}\n+\n+type ElementsDropdownProps = {\n+ owners: Array<Owner>,\n+ selectedIndex: number,\n+ selectOwner: SelectOwner,\n+};\n+function ElementsDropdown({\n+ owners,\n+ selectedIndex,\n+ selectOwner,\n+}: ElementsDropdownProps) {\n+ const store = useContext(StoreContext);\n+\n+ const menuItems = [];\n+ for (let index = owners.length - 1; index >= 0; index--) {\n+ const owner = owners[index];\n+ const isInStore = store.containsElement(owner.id);\n+ menuItems.push(\n+ <MenuItem\n+ key={owner.id}\n+ className={`${styles.Component} ${isInStore ? '' : styles.NotInStore}`}\n+ onSelect={() => (isInStore ? selectOwner(owner) : null)}\n+ >\n+ {owner.displayName}\n+\n+ <Badge\n+ className={styles.Badge}\n+ hocDisplayNames={owner.hocDisplayNames}\n+ type={owner.type}\n+ \/>\n+ <\/MenuItem>\n+ );\n+ }\n+\n+ return (\n+ <Menu>\n+ <MenuButton className={styles.MenuButton}>\n+ <Tooltip label=\"Open elements dropdown\">\n+ <span className={styles.MenuButtonContent} tabIndex={-1}>\n+ <ButtonIcon type=\"more\" \/>\n+ <\/span>\n+ <\/Tooltip>\n+ <\/MenuButton>\n+ <MenuList className={styles.Modal}>{menuItems}<\/MenuList>\n+ <\/Menu>\n+ );\n+}\n+\n+type ElementViewProps = {\n+ isSelected: boolean,\n+ owner: Owner,\n+ selectOwner: SelectOwner,\n+};\n+function ElementView({ isSelected, owner, selectOwner }: ElementViewProps) {\n+ const store = useContext(StoreContext);\n+\n+ const { displayName, hocDisplayNames, type } = owner;\n+ const isInStore = store.containsElement(owner.id);\n+\n+ const handleChange = useCallback(() => {\n+ if (isInStore) {\n+ selectOwner(owner);\n+ }\n+ }, [isInStore, selectOwner, owner]);\n+\n+ return (\n+ <Toggle\n+ className={`${styles.Component} ${isInStore ? '' : styles.NotInStore}`}\n+ isChecked={isSelected}\n+ onChange={handleChange}\n+ >\n+ {displayName}\n+\n+ <Badge\n+ className={styles.Badge}\n+ hocDisplayNames={hocDisplayNames}\n+ type={type}\n+ \/>\n+ <\/Toggle>\n+ );\n+}\n+\n+type BackToOwnerButtonProps = {|\n+ owners: Array<Owner>,\n+ selectedIndex: number,\n+ selectOwner: SelectOwner,\n+|};\n+function BackToOwnerButton({\n+ owners,\n+ selectedIndex,\n+ selectOwner,\n+}: BackToOwnerButtonProps) {\n+ const store = useContext(StoreContext);\n+\n+ if (selectedIndex <= 0) {\n+ return null;\n+ }\n+\n+ const owner = owners[selectedIndex - 1];\n+ if (owner == null) {\n+ debugger;\n+ }\n+ const isInStore = store.containsElement(owner.id);\n+\n+ return (\n+ <Button\n+ className={isInStore ? undefined : styles.NotInStore}\n+ onClick={() => (isInStore ? selectOwner(owner) : null)}\n+ title={`Up to ${owner.displayName || 'owner'}`}\n+ >\n+ <ButtonIcon type=\"previous\" \/>\n+ <\/Button>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/Components\/SearchInput.css b\/src\/devtools\/views\/Components\/SearchInput.css\nnew file mode 100644\nindex 0000000000..5db009aa13\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/SearchInput.css\n@@ -0,0 +1,42 @@\n+.SearchInput {\n+ flex: 1 1;\n+ display: flex;\n+ align-items: center;\n+}\n+\n+.Input {\n+ flex: 1 1 100px;\n+ width: 100px;\n+ font-size: var(--font-size-sans-large);\n+ outline: none;\n+ border: none;\n+ background-color: var(--color-background);\n+ color: var(--color-text);\n+ padding-left: 1.5rem;\n+ margin-left: -1rem;\n+}\n+\n+.InputIcon {\n+ pointer-events: none;\n+ z-index: 2;\n+ color: var(--color-dimmer);\n+}\n+\n+.IndexLabel {\n+ color: var(--color-dim);\n+ font-size: var(--font-size-sans-normal);\n+ white-space: pre;\n+}\n+\n+.LeftVRule,\n+.RightVRule {\n+ height: 20px;\n+ width: 1px;\n+ background-color: var(--color-border);\n+}\n+.LeftVRule {\n+ margin: 0 0.25rem 0 0.5rem;\n+}\n+.RightVRule {\n+ margin: 0 0.5rem 0 0.25rem;\n+}\ndiff --git a\/src\/devtools\/views\/Components\/SearchInput.js b\/src\/devtools\/views\/Components\/SearchInput.js\nnew file mode 100644\nindex 0000000000..ecae6beb2e\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/SearchInput.js\n@@ -0,0 +1,130 @@\n+\/\/ @flow\n+\n+import React, { useCallback, useContext, useEffect, useRef } from 'react';\n+import { TreeDispatcherContext, TreeStateContext } from '.\/TreeContext';\n+import Button from '..\/Button';\n+import ButtonIcon from '..\/ButtonIcon';\n+import Icon from '..\/Icon';\n+\n+import styles from '.\/SearchInput.css';\n+\n+type Props = {||};\n+\n+export default function SearchInput(props: Props) {\n+ const { searchIndex, searchResults, searchText } = useContext(\n+ TreeStateContext\n+ );\n+ const dispatch = useContext(TreeDispatcherContext);\n+\n+ const inputRef = useRef<HTMLInputElement | null>(null);\n+\n+ const handleTextChange = useCallback(\n+ ({ currentTarget }) =>\n+ dispatch({ type: 'SET_SEARCH_TEXT', payload: currentTarget.value }),\n+ [dispatch]\n+ );\n+ const resetSearch = useCallback(\n+ () => dispatch({ type: 'SET_SEARCH_TEXT', payload: '' }),\n+ [dispatch]\n+ );\n+\n+ const handleKeyDown = useCallback(\n+ event => {\n+ \/\/ For convenience, let up\/down arrow keys change Tree selection.\n+ switch (event.key) {\n+ case 'ArrowDown':\n+ dispatch({ type: 'SELECT_NEXT_ELEMENT_IN_TREE' });\n+ event.preventDefault();\n+ break;\n+ case 'ArrowUp':\n+ dispatch({ type: 'SELECT_PREVIOUS_ELEMENT_IN_TREE' });\n+ event.preventDefault();\n+ break;\n+ default:\n+ break;\n+ }\n+ },\n+ [dispatch]\n+ );\n+\n+ const handleInputKeyPress = useCallback(\n+ ({ key }) => {\n+ if (key === 'Enter') {\n+ dispatch({ type: 'GO_TO_NEXT_SEARCH_RESULT' });\n+ }\n+ },\n+ [dispatch]\n+ );\n+\n+ \/\/ Auto-focus search input\n+ useEffect(() => {\n+ if (inputRef.current === null) {\n+ return () => {};\n+ }\n+\n+ const handleWindowKey = (event: KeyboardEvent) => {\n+ const { key, metaKey } = event;\n+ if (key === 'f' && metaKey) {\n+ if (inputRef.current !== null) {\n+ inputRef.current.focus();\n+ event.preventDefault();\n+ event.stopPropagation();\n+ }\n+ }\n+ };\n+\n+ \/\/ It's important to listen to the ownerDocument to support the browser extension.\n+ \/\/ Here we use portals to render individual tabs (e.g. Profiler),\n+ \/\/ and the root document might belong to a different window.\n+ const ownerDocument = inputRef.current.ownerDocument;\n+ ownerDocument.addEventListener('keydown', handleWindowKey);\n+\n+ return () => ownerDocument.removeEventListener('keydown', handleWindowKey);\n+ }, [inputRef]);\n+\n+ return (\n+ <div className={styles.SearchInput}>\n+ <Icon className={styles.InputIcon} type=\"search\" \/>\n+ <input\n+ className={styles.Input}\n+ onChange={handleTextChange}\n+ onKeyDown={handleKeyDown}\n+ onKeyPress={handleInputKeyPress}\n+ placeholder=\"Search (text or \/regex\/)\"\n+ ref={inputRef}\n+ value={searchText}\n+ \/>\n+ {!!searchText && (\n+ <span className={styles.IndexLabel}>\n+ {Math.min(searchIndex + 1, searchResults.length)} |{' '}\n+ {searchResults.length}\n+ <\/span>\n+ )}\n+ <div className={styles.LeftVRule} \/>\n+ <Button\n+ className={styles.IconButton}\n+ disabled={!searchText}\n+ onClick={() => dispatch({ type: 'GO_TO_PREVIOUS_SEARCH_RESULT' })}\n+ title=\"Scroll to previous search result\"\n+ >\n+ <ButtonIcon type=\"up\" \/>\n+ <\/Button>\n+ <Button\n+ className={styles.IconButton}\n+ disabled={!searchText}\n+ onClick={() => dispatch({ type: 'GO_TO_NEXT_SEARCH_RESULT' })}\n+ title=\"Scroll to next search result\"\n+ >\n+ <ButtonIcon type=\"down\" \/>\n+ <\/Button>\n+ <Button\n+ className={styles.IconButton}\n+ disabled={!searchText}\n+ onClick={resetSearch}\n+ title=\"Reset search\"\n+ >\n+ <ButtonIcon type=\"close\" \/>\n+ <\/Button>\n+ <\/div>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/Components\/SelectedElement.css b\/src\/devtools\/views\/Components\/SelectedElement.css\nnew file mode 100644\nindex 0000000000..c6fa68ddb7\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/SelectedElement.css\n@@ -0,0 +1,89 @@\n+.SelectedElement {\n+ display: flex;\n+ flex-direction: column;\n+ height: 100%;\n+ width: 100%;\n+ border-left: 1px solid var(--color-border);\n+ border-top: 1px solid var(--color-border);\n+}\n+\n+.TitleRow {\n+ flex: 0 0 42px;\n+ display: flex;\n+ align-items: center;\n+ font-size: var(--font-size-monospace-large);\n+ border-bottom: 1px solid var(--color-border);\n+ padding: 0.5rem;\n+}\n+\n+.SelectedComponentName {\n+ flex: 1 1 auto;\n+ overflow: hidden;\n+ text-overflow: ellipsis;\n+}\n+\n+.Owners {\n+ padding: 0.25rem;\n+ border-top: 1px solid var(--color-border);\n+}\n+\n+.OwnersHeader {\n+ font-family: var(--font-family-sans);\n+}\n+\n+.Component,\n+.Owner {\n+ color: var(--color-component-name);\n+ font-family: var(--font-family-monospace);\n+ font-size: var(--font-size-monospace-normal);\n+ white-space: nowrap;\n+ overflow: hidden;\n+ text-overflow: ellipsis;\n+ max-width: 100%;\n+}\n+\n+.Component {\n+ flex: 1 1 auto;\n+}\n+\n+.InspectedElement {\n+ overflow-x: hidden;\n+ overflow-y: auto;\n+ font-family: var(--font-family-monospace);\n+ font-size: var(--font-size-monospace-normal);\n+ line-height: var(--line-height-data);\n+}\n+\n+.Owner {\n+ border-radius: 0.25rem;\n+ padding: 0.125rem 0.25rem;\n+ cursor: pointer;\n+ background: none;\n+ border: none;\n+ display: block;\n+}\n+.Owner:focus {\n+ outline: none;\n+ background-color: var(--color-button-background-focus);\n+}\n+\n+.Loading {\n+ padding: 0.25rem;\n+ color: var(--color-dimmer);\n+ font-style: italic;\n+}\n+\n+.CannotSuspendWarningMessage {\n+}\n+\n+.NotInStore {\n+ color: var(--color-dim);\n+ cursor: default;\n+}\n+\n+.OwnerButton {\n+ display: flex;\n+ align-items: center;\n+ margin-left: 0.5rem;\n+ padding: 0;\n+}\ndiff --git a\/src\/devtools\/views\/Components\/SelectedElement.js b\/src\/devtools\/views\/Components\/SelectedElement.js\nnew file mode 100644\nindex 0000000000..30e9bd5270\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/SelectedElement.js\n@@ -0,0 +1,462 @@\n+\/\/ @flow\n+\n+import React, { useCallback, useContext } from 'react';\n+import { TreeDispatcherContext, TreeStateContext } from '.\/TreeContext';\n+import { BridgeContext, StoreContext } from '..\/context';\n+import Button from '..\/Button';\n+import ButtonIcon from '..\/ButtonIcon';\n+import HooksTree from '.\/HooksTree';\n+import { ModalDialogContext } from '..\/ModalDialog';\n+import HocBadges from '.\/HocBadges';\n+import InspectedElementTree from '.\/InspectedElementTree';\n+import { InspectedElementContext } from '.\/InspectedElementContext';\n+import ViewElementSourceContext from '.\/ViewElementSourceContext';\n+import NativeStyleEditor from '.\/NativeStyleEditor';\n+import Toggle from '..\/Toggle';\n+import Badge from '.\/Badge';\n+import {\n+ ComponentFilterElementType,\n+ ElementTypeClass,\n+ ElementTypeForwardRef,\n+ ElementTypeFunction,\n+ ElementTypeMemo,\n+ ElementTypeSuspense,\n+} from 'src\/types';\n+\n+import styles from '.\/SelectedElement.css';\n+\n+import type { GetInspectedElementPath } from '.\/InspectedElementContext';\n+import type { Element, InspectedElement } from '.\/types';\n+import type { ElementType } from 'src\/types';\n+\n+export type Props = {||};\n+\n+export default function SelectedElement(_: Props) {\n+ const { inspectedElementID } = useContext(TreeStateContext);\n+ const dispatch = useContext(TreeDispatcherContext);\n+ const {\n+ canViewElementSourceFunction,\n+ viewElementSourceFunction,\n+ } = useContext(ViewElementSourceContext);\n+ const bridge = useContext(BridgeContext);\n+ const store = useContext(StoreContext);\n+ const { dispatch: modalDialogDispatch } = useContext(ModalDialogContext);\n+\n+ const { getInspectedElementPath, getInspectedElement } = useContext(\n+ InspectedElementContext\n+ );\n+\n+ const element =\n+ inspectedElementID !== null\n+ ? store.getElementByID(inspectedElementID)\n+ : null;\n+\n+ const inspectedElement =\n+ inspectedElementID != null ? getInspectedElement(inspectedElementID) : null;\n+\n+ const highlightElement = useCallback(() => {\n+ if (element !== null && inspectedElementID !== null) {\n+ const rendererID = store.getRendererIDForElement(inspectedElementID);\n+ if (rendererID !== null) {\n+ bridge.send('highlightNativeElement', {\n+ displayName: element.displayName,\n+ hideAfterTimeout: true,\n+ id: inspectedElementID,\n+ openNativeElementsPanel: true,\n+ rendererID,\n+ scrollIntoView: true,\n+ });\n+ }\n+ }\n+ }, [bridge, element, inspectedElementID, store]);\n+\n+ const logElement = useCallback(() => {\n+ if (inspectedElementID !== null) {\n+ const rendererID = store.getRendererIDForElement(inspectedElementID);\n+ if (rendererID !== null) {\n+ bridge.send('logElementToConsole', {\n+ id: inspectedElementID,\n+ rendererID,\n+ });\n+ }\n+ }\n+ }, [bridge, inspectedElementID, store]);\n+\n+ const viewSource = useCallback(() => {\n+ if (viewElementSourceFunction != null && inspectedElement !== null) {\n+ viewElementSourceFunction(\n+ inspectedElement.id,\n+ ((inspectedElement: any): InspectedElement)\n+ );\n+ }\n+ }, [inspectedElement, viewElementSourceFunction]);\n+\n+ \/\/ In some cases (e.g. FB internal usage) the standalone shell might not be able to view the source.\n+ \/\/ To detect this case, we defer to an injected helper function (if present).\n+ const canViewSource =\n+ inspectedElement !== null &&\n+ inspectedElement.canViewSource &&\n+ viewElementSourceFunction !== null &&\n+ (canViewElementSourceFunction === null ||\n+ canViewElementSourceFunction(inspectedElement));\n+\n+ const isSuspended =\n+ element !== null &&\n+ element.type === ElementTypeSuspense &&\n+ inspectedElement != null &&\n+ inspectedElement.state != null;\n+\n+ const canToggleSuspense =\n+ inspectedElement != null && inspectedElement.canToggleSuspense;\n+\n+ \/\/ TODO (suspense toggle) Would be nice to eventually use a two setState pattern here as well.\n+ const toggleSuspended = useCallback(() => {\n+ let nearestSuspenseElement = null;\n+ let currentElement = element;\n+ while (currentElement !== null) {\n+ if (currentElement.type === ElementTypeSuspense) {\n+ nearestSuspenseElement = currentElement;\n+ break;\n+ } else if (currentElement.parentID > 0) {\n+ currentElement = store.getElementByID(currentElement.parentID);\n+ } else {\n+ currentElement = null;\n+ }\n+ }\n+\n+ \/\/ If we didn't find a Suspense ancestor, we can't suspend.\n+ \/\/ Instead we can show a warning to the user.\n+ if (nearestSuspenseElement === null) {\n+ modalDialogDispatch({\n+ type: 'SHOW',\n+ content: <CannotSuspendWarningMessage \/>,\n+ });\n+ } else {\n+ const nearestSuspenseElementID = nearestSuspenseElement.id;\n+\n+ \/\/ If we're suspending from an arbitary (non-Suspense) component, select the nearest Suspense element in the Tree.\n+ \/\/ This way when the fallback UI is shown and the current element is hidden, something meaningful is selected.\n+ if (nearestSuspenseElement !== element) {\n+ dispatch({\n+ type: 'SELECT_ELEMENT_BY_ID',\n+ payload: nearestSuspenseElementID,\n+ });\n+ }\n+\n+ const rendererID = store.getRendererIDForElement(\n+ nearestSuspenseElementID\n+ );\n+\n+ \/\/ Toggle suspended\n+ if (rendererID !== null) {\n+ bridge.send('overrideSuspense', {\n+ id: nearestSuspenseElementID,\n+ rendererID,\n+ forceFallback: !isSuspended,\n+ });\n+ }\n+ }\n+ }, [bridge, dispatch, element, isSuspended, modalDialogDispatch, store]);\n+\n+ if (element === null) {\n+ return (\n+ <div className={styles.SelectedElement}>\n+ <div className={styles.TitleRow} \/>\n+ <\/div>\n+ );\n+ }\n+\n+ return (\n+ <div className={styles.SelectedElement}>\n+ <div className={styles.TitleRow}>\n+ <div className={styles.SelectedComponentName}>\n+ <div className={styles.Component} title={element.displayName}>\n+ {element.displayName}\n+ <\/div>\n+ <\/div>\n+\n+ {canToggleSuspense && (\n+ <Toggle\n+ className={styles.IconButton}\n+ isChecked={isSuspended}\n+ onChange={toggleSuspended}\n+ title={\n+ isSuspended\n+ ? 'Unsuspend the selected component'\n+ : 'Suspend the selected component'\n+ }\n+ >\n+ <ButtonIcon type=\"suspend\" \/>\n+ <\/Toggle>\n+ )}\n+ {store.supportsNativeInspection && (\n+ <Button\n+ className={styles.IconButton}\n+ onClick={highlightElement}\n+ title=\"Inspect the matching DOM element\"\n+ >\n+ <ButtonIcon type=\"view-dom\" \/>\n+ <\/Button>\n+ )}\n+ <Button\n+ className={styles.IconButton}\n+ onClick={logElement}\n+ title=\"Log this component data to the console\"\n+ >\n+ <ButtonIcon type=\"log-data\" \/>\n+ <\/Button>\n+ <Button\n+ className={styles.IconButton}\n+ disabled={!canViewSource}\n+ onClick={viewSource}\n+ title=\"View source for this element\"\n+ >\n+ <ButtonIcon type=\"view-source\" \/>\n+ <\/Button>\n+ <\/div>\n+\n+ {inspectedElement === null && (\n+ <div className={styles.Loading}>Loading...<\/div>\n+ )}\n+\n+ {inspectedElement !== null && (\n+ <InspectedElementView\n+ key={\n+ inspectedElementID \/* Force reset when seleted Element changes *\/\n+ }\n+ element={element}\n+ getInspectedElementPath={getInspectedElementPath}\n+ inspectedElement={inspectedElement}\n+ \/>\n+ )}\n+ <\/div>\n+ );\n+}\n+\n+export type InspectPath = (path: Array<string | number>) => void;\n+\n+type InspectedElementViewProps = {|\n+ element: Element,\n+ getInspectedElementPath: GetInspectedElementPath,\n+ inspectedElement: InspectedElement,\n+|};\n+\n+const IS_SUSPENDED = 'Suspended';\n+\n+function InspectedElementView({\n+ element,\n+ getInspectedElementPath,\n+ inspectedElement,\n+}: InspectedElementViewProps) {\n+ const { id, type } = element;\n+ const {\n+ canEditFunctionProps,\n+ canEditHooks,\n+ canToggleSuspense,\n+ context,\n+ hooks,\n+ owners,\n+ props,\n+ state,\n+ } = inspectedElement;\n+\n+ const { ownerID } = useContext(TreeStateContext);\n+ const bridge = useContext(BridgeContext);\n+ const store = useContext(StoreContext);\n+\n+ const inspectContextPath = useCallback(\n+ (path: Array<string | number>) => {\n+ getInspectedElementPath(id, ['context', ...path]);\n+ },\n+ [getInspectedElementPath, id]\n+ );\n+ const inspectPropsPath = useCallback(\n+ (path: Array<string | number>) => {\n+ getInspectedElementPath(id, ['props', ...path]);\n+ },\n+ [getInspectedElementPath, id]\n+ );\n+ const inspectStatePath = useCallback(\n+ (path: Array<string | number>) => {\n+ getInspectedElementPath(id, ['state', ...path]);\n+ },\n+ [getInspectedElementPath, id]\n+ );\n+\n+ let overrideContextFn = null;\n+ let overridePropsFn = null;\n+ let overrideStateFn = null;\n+ let overrideSuspenseFn = null;\n+ if (type === ElementTypeClass) {\n+ overrideContextFn = (path: Array<string | number>, value: any) => {\n+ const rendererID = store.getRendererIDForElement(id);\n+ if (rendererID !== null) {\n+ bridge.send('overrideContext', { id, path, rendererID, value });\n+ }\n+ };\n+ overridePropsFn = (path: Array<string | number>, value: any) => {\n+ const rendererID = store.getRendererIDForElement(id);\n+ if (rendererID !== null) {\n+ bridge.send('overrideProps', { id, path, rendererID, value });\n+ }\n+ };\n+ overrideStateFn = (path: Array<string | number>, value: any) => {\n+ const rendererID = store.getRendererIDForElement(id);\n+ if (rendererID !== null) {\n+ bridge.send('overrideState', { id, path, rendererID, value });\n+ }\n+ };\n+ } else if (\n+ (type === ElementTypeFunction ||\n+ type === ElementTypeMemo ||\n+ type === ElementTypeForwardRef) &&\n+ canEditFunctionProps\n+ ) {\n+ overridePropsFn = (path: Array<string | number>, value: any) => {\n+ const rendererID = store.getRendererIDForElement(id);\n+ if (rendererID !== null) {\n+ bridge.send('overrideProps', { id, path, rendererID, value });\n+ }\n+ };\n+ } else if (type === ElementTypeSuspense && canToggleSuspense) {\n+ overrideSuspenseFn = (path: Array<string | number>, value: boolean) => {\n+ if (path.length !== 1 && path !== IS_SUSPENDED) {\n+ throw new Error('Unexpected path.');\n+ }\n+ const rendererID = store.getRendererIDForElement(id);\n+ if (rendererID !== null) {\n+ bridge.send('overrideSuspense', {\n+ id,\n+ rendererID,\n+ forceFallback: value,\n+ });\n+ }\n+ };\n+ }\n+\n+ return (\n+ <div className={styles.InspectedElement}>\n+ <HocBadges element={element} \/>\n+ <InspectedElementTree\n+ label=\"props\"\n+ data={props}\n+ inspectPath={inspectPropsPath}\n+ overrideValueFn={overridePropsFn}\n+ showWhenEmpty\n+ \/>\n+ {type === ElementTypeSuspense ? (\n+ <InspectedElementTree\n+ label=\"suspense\"\n+ data={{\n+ [IS_SUSPENDED]: state !== null,\n+ }}\n+ overrideValueFn={overrideSuspenseFn}\n+ \/>\n+ ) : (\n+ <InspectedElementTree\n+ label=\"state\"\n+ data={state}\n+ inspectPath={inspectStatePath}\n+ overrideValueFn={overrideStateFn}\n+ \/>\n+ )}\n+ <HooksTree canEditHooks={canEditHooks} hooks={hooks} id={id} \/>\n+ <InspectedElementTree\n+ label=\"context\"\n+ data={context}\n+ inspectPath={inspectContextPath}\n+ overrideValueFn={overrideContextFn}\n+ \/>\n+\n+ <NativeStyleEditor \/>\n+\n+ {ownerID === null && owners !== null && owners.length > 0 && (\n+ <div className={styles.Owners}>\n+ <div className={styles.OwnersHeader}>rendered by<\/div>\n+ {owners.map(owner => (\n+ <OwnerView\n+ key={owner.id}\n+ displayName={owner.displayName || 'Anonymous'}\n+ hocDisplayNames={owner.hocDisplayNames}\n+ id={owner.id}\n+ isInStore={store.containsElement(owner.id)}\n+ type={owner.type}\n+ \/>\n+ ))}\n+ <\/div>\n+ )}\n+ <\/div>\n+ );\n+}\n+\n+type OwnerViewProps = {|\n+ displayName: string,\n+ hocDisplayNames: Array<string> | null,\n+ id: number,\n+ isInStore: boolean,\n+ type: ElementType,\n+|};\n+\n+function OwnerView({\n+ displayName,\n+ hocDisplayNames,\n+ id,\n+ isInStore,\n+ type,\n+}: OwnerViewProps) {\n+ const dispatch = useContext(TreeDispatcherContext);\n+\n+ const handleClick = useCallback(\n+ () =>\n+ dispatch({\n+ type: 'SELECT_ELEMENT_BY_ID',\n+ payload: id,\n+ }),\n+ [dispatch, id]\n+ );\n+\n+ return (\n+ <Button\n+ key={id}\n+ className={styles.OwnerButton}\n+ disabled={!isInStore}\n+ onClick={handleClick}\n+ >\n+ <span\n+ className={`${styles.Owner} ${isInStore ? '' : styles.NotInStore}`}\n+ title={displayName}\n+ >\n+ {displayName}\n+ <\/span>\n+ <Badge hocDisplayNames={hocDisplayNames} type={type} \/>\n+ <\/Button>\n+ );\n+}\n+\n+function CannotSuspendWarningMessage() {\n+ const store = useContext(StoreContext);\n+ const areSuspenseElementsHidden = !!store.componentFilters.find(\n+ filter =>\n+ filter.type === ComponentFilterElementType &&\n+ filter.value === ElementTypeSuspense &&\n+ filter.isEnabled\n+ );\n+\n+ \/\/ Has the user filted out Suspense nodes from the tree?\n+ \/\/ If so, the selected element might actually be in a Suspense tree after all.\n+ if (areSuspenseElementsHidden) {\n+ return (\n+ <div className={styles.CannotSuspendWarningMessage}>\n+ Suspended state cannot be toggled while Suspense components are hidden.\n+ Disable the filter and try agan.\n+ <\/div>\n+ );\n+ } else {\n+ return (\n+ <div className={styles.CannotSuspendWarningMessage}>\n+ The selected element is not within a Suspense container. Suspending it\n+ would cause an error.\n+ <\/div>\n+ );\n+ }\n+}\ndiff --git a\/src\/devtools\/views\/Components\/SelectedTreeHighlight.css b\/src\/devtools\/views\/Components\/SelectedTreeHighlight.css\nnew file mode 100644\nindex 0000000000..19b64a8ef4\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/SelectedTreeHighlight.css\n@@ -0,0 +1,16 @@\n+.Active,\n+.Inactive {\n+ position: absolute;\n+ left: 0;\n+ width: 100%;\n+ z-index: 0;\n+ pointer-events: none;\n+}\n+\n+.Active {\n+ background-color: var(--color-selected-tree-highlight-active);\n+}\n+\n+.Inactive {\n+ background-color: var(--color-selected-tree-highlight-inactive);\n+}\ndiff --git a\/src\/devtools\/views\/Components\/SelectedTreeHighlight.js b\/src\/devtools\/views\/Components\/SelectedTreeHighlight.js\nnew file mode 100644\nindex 0000000000..9260784384\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/SelectedTreeHighlight.js\n@@ -0,0 +1,101 @@\n+\/\/ @flow\n+\n+import React, { useContext, useMemo } from 'react';\n+import { TreeStateContext } from '.\/TreeContext';\n+import { SettingsContext } from '..\/Settings\/SettingsContext';\n+import TreeFocusedContext from '.\/TreeFocusedContext';\n+import { StoreContext } from '..\/context';\n+import { useSubscription } from '..\/hooks';\n+import Store from '..\/..\/store';\n+\n+import styles from '.\/SelectedTreeHighlight.css';\n+\n+type Data = {|\n+ startIndex: number,\n+ stopIndex: number,\n+|};\n+\n+export default function SelectedTreeHighlight(_: {||}) {\n+ const { lineHeight } = useContext(SettingsContext);\n+ const store = useContext(StoreContext);\n+ const treeFocused = useContext(TreeFocusedContext);\n+ const { ownerID, selectedElementID } = useContext(TreeStateContext);\n+\n+ const subscription = useMemo(\n+ () => ({\n+ getCurrentValue: () => {\n+ if (\n+ selectedElementID === null ||\n+ store.isInsideCollapsedSubTree(selectedElementID)\n+ ) {\n+ return null;\n+ }\n+\n+ const element = store.getElementByID(selectedElementID);\n+ if (\n+ element === null ||\n+ element.isCollapsed ||\n+ element.children.length === 0\n+ ) {\n+ return null;\n+ }\n+\n+ const startIndex = store.getIndexOfElementID(element.children[0]);\n+ if (startIndex === null) {\n+ return null;\n+ }\n+\n+ let stopIndex = null;\n+ let current = element;\n+ while (current !== null) {\n+ if (current.isCollapsed || current.children.length === 0) {\n+ \/\/ We've found the last\/deepest descendant.\n+ stopIndex = store.getIndexOfElementID(current.id);\n+ current = null;\n+ } else {\n+ const lastChildID = current.children[current.children.length - 1];\n+ current = store.getElementByID(lastChildID);\n+ }\n+ }\n+\n+ if (stopIndex === null) {\n+ return null;\n+ }\n+\n+ return {\n+ startIndex,\n+ stopIndex,\n+ };\n+ },\n+ subscribe: (callback: Function) => {\n+ store.addListener('mutated', callback);\n+ return () => {\n+ store.removeListener('mutated', callback);\n+ };\n+ },\n+ }),\n+ [selectedElementID, store]\n+ );\n+ const data = useSubscription<Data | null, Store>(subscription);\n+\n+ if (ownerID !== null) {\n+ return null;\n+ }\n+\n+ if (data === null) {\n+ return null;\n+ }\n+\n+ const { startIndex, stopIndex } = data;\n+\n+ return (\n+ <div\n+ className={treeFocused ? styles.Active : styles.Inactive}\n+ style={{\n+ position: 'absolute',\n+ top: `${startIndex * lineHeight}px`,\n+ height: `${(stopIndex + 1 - startIndex) * lineHeight}px`,\n+ }}\n+ \/>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/Components\/Tree.css b\/src\/devtools\/views\/Components\/Tree.css\nnew file mode 100644\nindex 0000000000..64a5983ee0\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/Tree.css\n@@ -0,0 +1,60 @@\n+.Tree {\n+ position: relative;\n+ height: 100%;\n+ width: 100%;\n+ display: flex;\n+ flex-direction: column;\n+ border-top: 1px solid var(--color-border);\n+\n+ \/* Default size will be adjusted by Tree after scrolling *\/\n+ --indentation-size: 12px;\n+}\n+\n+.List {\n+ overflow-x: hidden !important;\n+}\n+\n+.InnerElementType {\n+ overflow-x: hidden;\n+}\n+\n+.SearchInput {\n+ flex: 0 0 42px;\n+ display: flex;\n+ align-items: center;\n+ border-bottom: 1px solid var(--color-border);\n+ padding: 0.5rem;\n+}\n+\n+.AutoSizerWrapper {\n+ width: 100%;\n+ overflow: hidden;\n+ flex: 1 0 auto;\n+}\n+.AutoSizerWrapper:focus {\n+ outline: none;\n+}\n+\n+.List {\n+ font-family: var(--font-family-monospace);\n+ font-size: var(--font-size-monospace-normal);\n+ line-height: var(--line-height-data);\n+}\n+\n+.VRule {\n+ height: 20px;\n+ width: 1px;\n+ margin: 0 0.5rem;\n+ background-color: var(--color-border);\n+}\n+\n+.Loading {\n+ height: 100%;\n+ padding-left: 0.5rem;\n+ display: flex;\n+ align-items: center;\n+ flex: 1;\n+ justify-content: flex-start;\n+ font-size: var(--font-size-sans-large);\n+ color: var(--color-dim);\n+}\ndiff --git a\/src\/devtools\/views\/Components\/Tree.js b\/src\/devtools\/views\/Components\/Tree.js\nnew file mode 100644\nindex 0000000000..7c575e450a\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/Tree.js\n@@ -0,0 +1,495 @@\n+\/\/ @flow\n+\n+import React, {\n+ Fragment,\n+ Suspense,\n+ useCallback,\n+ useContext,\n+ useEffect,\n+ useMemo,\n+ useRef,\n+ useState,\n+} from 'react';\n+import AutoSizer from 'react-virtualized-auto-sizer';\n+import { FixedSizeList } from 'react-window';\n+import { TreeDispatcherContext, TreeStateContext } from '.\/TreeContext';\n+import { SettingsContext } from '..\/Settings\/SettingsContext';\n+import { BridgeContext, StoreContext } from '..\/context';\n+import ElementView from '.\/Element';\n+import InspectHostNodesToggle from '.\/InspectHostNodesToggle';\n+import OwnersStack from '.\/OwnersStack';\n+import SearchInput from '.\/SearchInput';\n+import SettingsModalContextToggle from 'src\/devtools\/views\/Settings\/SettingsModalContextToggle';\n+import SelectedTreeHighlight from '.\/SelectedTreeHighlight';\n+import TreeFocusedContext from '.\/TreeFocusedContext';\n+\n+import styles from '.\/Tree.css';\n+\n+\/\/ Never indent more than this number of pixels (even if we have the room).\n+const DEFAULT_INDENTATION_SIZE = 12;\n+\n+export type ItemData = {|\n+ numElements: number,\n+ isNavigatingWithKeyboard: boolean,\n+ lastScrolledIDRef: { current: number | null },\n+ onElementMouseEnter: (id: number) => void,\n+ treeFocused: boolean,\n+|};\n+\n+type Props = {||};\n+\n+export default function Tree(props: Props) {\n+ const dispatch = useContext(TreeDispatcherContext);\n+ const {\n+ numElements,\n+ ownerID,\n+ searchIndex,\n+ searchResults,\n+ selectedElementID,\n+ selectedElementIndex,\n+ } = useContext(TreeStateContext);\n+ const bridge = useContext(BridgeContext);\n+ const store = useContext(StoreContext);\n+ const [isNavigatingWithKeyboard, setIsNavigatingWithKeyboard] = useState(\n+ false\n+ );\n+ const treeRef = useRef<HTMLDivElement | null>(null);\n+ const focusTargetRef = useRef<HTMLDivElement | null>(null);\n+\n+ const [treeFocused, setTreeFocused] = useState<boolean>(false);\n+\n+ const { lineHeight } = useContext(SettingsContext);\n+\n+ \/\/ Make sure a newly selected element is visible in the list.\n+ \/\/ This is helpful for things like the owners list and search.\n+ \/\/\n+ \/\/ TRICKY:\n+ \/\/ It's important to use a callback ref for this, rather than a ref object and an effect.\n+ \/\/ As an optimization, the AutoSizer component does not render children when their size would be 0.\n+ \/\/ This means that in some cases (if the browser panel size is initially really small),\n+ \/\/ the Tree component might render without rendering an inner List.\n+ \/\/ In this case, the list ref would be null on mount (when the scroll effect runs),\n+ \/\/ meaning the scroll action would be skipped (since ref updates don't re-run effects).\n+ \/\/ Using a callback ref accounts for this case...\n+ const listCallbackRef = useCallback(\n+ list => {\n+ if (list != null && selectedElementIndex !== null) {\n+ list.scrollToItem(selectedElementIndex, 'smart');\n+ }\n+ },\n+ [selectedElementIndex]\n+ );\n+\n+ \/\/ Picking an element in the inspector should put focus into the tree.\n+ \/\/ This ensures that keyboard navigation works right after picking a node.\n+ useEffect(() => {\n+ function handleStopInspectingNative(didSelectNode) {\n+ if (didSelectNode && focusTargetRef.current !== null) {\n+ focusTargetRef.current.focus();\n+ }\n+ }\n+ bridge.addListener('stopInspectingNative', handleStopInspectingNative);\n+ return () =>\n+ bridge.removeListener('stopInspectingNative', handleStopInspectingNative);\n+ }, [bridge]);\n+\n+ \/\/ This ref is passed down the context to elements.\n+ \/\/ It lets them avoid autoscrolling to the same item many times\n+ \/\/ when a selected virtual row goes in and out of the viewport.\n+ const lastScrolledIDRef = useRef<number | null>(null);\n+\n+ \/\/ Navigate the tree with up\/down arrow keys.\n+ useEffect(() => {\n+ if (treeRef.current === null) {\n+ return () => {};\n+ }\n+\n+ const handleKeyDown = (event: KeyboardEvent) => {\n+ if ((event: any).target.tagName === 'INPUT' || event.defaultPrevented) {\n+ return;\n+ }\n+\n+ \/\/ TODO We should ignore arrow keys if the focus is outside of DevTools.\n+ \/\/ Otherwise the inline (embedded) DevTools might change selection unexpectedly,\n+ \/\/ e.g. when a text input or a select has focus.\n+\n+ let element;\n+ switch (event.key) {\n+ case 'ArrowDown':\n+ event.preventDefault();\n+ dispatch({ type: 'SELECT_NEXT_ELEMENT_IN_TREE' });\n+ break;\n+ case 'ArrowLeft':\n+ event.preventDefault();\n+ element =\n+ selectedElementID !== null\n+ ? store.getElementByID(selectedElementID)\n+ : null;\n+ if (element !== null) {\n+ if (element.children.length > 0 && !element.isCollapsed) {\n+ store.toggleIsCollapsed(element.id, true);\n+ } else {\n+ dispatch({ type: 'SELECT_PARENT_ELEMENT_IN_TREE' });\n+ }\n+ }\n+ break;\n+ case 'ArrowRight':\n+ event.preventDefault();\n+ element =\n+ selectedElementID !== null\n+ ? store.getElementByID(selectedElementID)\n+ : null;\n+ if (element !== null) {\n+ if (element.children.length > 0 && element.isCollapsed) {\n+ store.toggleIsCollapsed(element.id, false);\n+ } else {\n+ dispatch({ type: 'SELECT_CHILD_ELEMENT_IN_TREE' });\n+ }\n+ }\n+ break;\n+ case 'ArrowUp':\n+ event.preventDefault();\n+ dispatch({ type: 'SELECT_PREVIOUS_ELEMENT_IN_TREE' });\n+ break;\n+ default:\n+ return;\n+ }\n+ setIsNavigatingWithKeyboard(true);\n+ };\n+\n+ \/\/ It's important to listen to the ownerDocument to support the browser extension.\n+ \/\/ Here we use portals to render individual tabs (e.g. Profiler),\n+ \/\/ and the root document might belong to a different window.\n+ const ownerDocument = treeRef.current.ownerDocument;\n+ ownerDocument.addEventListener('keydown', handleKeyDown);\n+\n+ return () => {\n+ ownerDocument.removeEventListener('keydown', handleKeyDown);\n+ };\n+ }, [dispatch, selectedElementID, store]);\n+\n+ \/\/ Focus management.\n+ const handleBlur = useCallback(() => setTreeFocused(false), []);\n+ const handleFocus = useCallback(() => {\n+ setTreeFocused(true);\n+\n+ if (selectedElementIndex === null && numElements > 0) {\n+ dispatch({\n+ type: 'SELECT_ELEMENT_AT_INDEX',\n+ payload: 0,\n+ });\n+ }\n+ }, [dispatch, numElements, selectedElementIndex]);\n+\n+ const handleKeyPress = useCallback(\n+ event => {\n+ switch (event.key) {\n+ case 'Enter':\n+ case ' ':\n+ if (selectedElementID !== null) {\n+ dispatch({ type: 'SELECT_OWNER', payload: selectedElementID });\n+ }\n+ break;\n+ default:\n+ break;\n+ }\n+ },\n+ [dispatch, selectedElementID]\n+ );\n+\n+ const highlightNativeElement = useCallback(\n+ (id: number) => {\n+ const element = store.getElementByID(id);\n+ const rendererID = store.getRendererIDForElement(id);\n+ if (element !== null && rendererID !== null) {\n+ bridge.send('highlightNativeElement', {\n+ displayName: element.displayName,\n+ hideAfterTimeout: false,\n+ id,\n+ openNativeElementsPanel: false,\n+ rendererID,\n+ scrollIntoView: false,\n+ });\n+ }\n+ },\n+ [store, bridge]\n+ );\n+\n+ \/\/ If we switch the selected element while using the keyboard,\n+ \/\/ start highlighting it in the DOM instead of the last hovered node.\n+ const searchRef = useRef({ searchIndex, searchResults });\n+ useEffect(() => {\n+ let didSelectNewSearchResult = false;\n+ if (\n+ searchRef.current.searchIndex !== searchIndex ||\n+ searchRef.current.searchResults !== searchResults\n+ ) {\n+ searchRef.current.searchIndex = searchIndex;\n+ searchRef.current.searchResults = searchResults;\n+ didSelectNewSearchResult = true;\n+ }\n+ if (isNavigatingWithKeyboard || didSelectNewSearchResult) {\n+ if (selectedElementID !== null) {\n+ highlightNativeElement(selectedElementID);\n+ } else {\n+ bridge.send('clearNativeElementHighlight');\n+ }\n+ }\n+ }, [\n+ bridge,\n+ isNavigatingWithKeyboard,\n+ highlightNativeElement,\n+ searchIndex,\n+ searchResults,\n+ selectedElementID,\n+ ]);\n+\n+ \/\/ Highlight last hovered element.\n+ const handleElementMouseEnter = useCallback(\n+ id => {\n+ \/\/ Ignore hover while we're navigating with keyboard.\n+ \/\/ This avoids flicker from the hovered nodes under the mouse.\n+ if (!isNavigatingWithKeyboard) {\n+ highlightNativeElement(id);\n+ }\n+ },\n+ [isNavigatingWithKeyboard, highlightNativeElement]\n+ );\n+\n+ const handleMouseMove = useCallback(() => {\n+ \/\/ We started using the mouse again.\n+ \/\/ This will enable hover styles in individual rows.\n+ setIsNavigatingWithKeyboard(false);\n+ }, []);\n+\n+ const handleMouseLeave = useCallback(() => {\n+ bridge.send('clearNativeElementHighlight');\n+ }, [bridge]);\n+\n+ \/\/ Let react-window know to re-render any time the underlying tree data changes.\n+ \/\/ This includes the owner context, since it controls a filtered view of the tree.\n+ const itemData = useMemo<ItemData>(\n+ () => ({\n+ numElements,\n+ isNavigatingWithKeyboard,\n+ onElementMouseEnter: handleElementMouseEnter,\n+ lastScrolledIDRef,\n+ treeFocused,\n+ }),\n+ [\n+ numElements,\n+ isNavigatingWithKeyboard,\n+ handleElementMouseEnter,\n+ lastScrolledIDRef,\n+ treeFocused,\n+ ]\n+ );\n+\n+ const itemKey = useCallback(\n+ (index: number) => store.getElementIDAtIndex(index),\n+ [store]\n+ );\n+\n+ return (\n+ <TreeFocusedContext.Provider value={treeFocused}>\n+ <div className={styles.Tree} ref={treeRef}>\n+ <div className={styles.SearchInput}>\n+ {store.supportsNativeInspection && (\n+ <Fragment>\n+ <InspectHostNodesToggle \/>\n+ <div className={styles.VRule} \/>\n+ <\/Fragment>\n+ )}\n+ <Suspense fallback={<Loading \/>}>\n+ {ownerID !== null ? <OwnersStack \/> : <SearchInput \/>}\n+ <\/Suspense>\n+ <div className={styles.VRule} \/>\n+ <SettingsModalContextToggle \/>\n+ <\/div>\n+ <div\n+ className={styles.AutoSizerWrapper}\n+ onBlur={handleBlur}\n+ onFocus={handleFocus}\n+ onKeyPress={handleKeyPress}\n+ onMouseMove={handleMouseMove}\n+ onMouseLeave={handleMouseLeave}\n+ ref={focusTargetRef}\n+ tabIndex={0}\n+ >\n+ <AutoSizer>\n+ {({ height, width }) => (\n+ \/\/ $FlowFixMe https:\/\/github.com\/facebook\/flow\/issues\/7341\n+ <FixedSizeList\n+ className={styles.List}\n+ height={height}\n+ innerElementType={InnerElementType}\n+ itemCount={numElements}\n+ itemData={itemData}\n+ itemKey={itemKey}\n+ itemSize={lineHeight}\n+ ref={listCallbackRef}\n+ width={width}\n+ >\n+ {ElementView}\n+ <\/FixedSizeList>\n+ )}\n+ <\/AutoSizer>\n+ <\/div>\n+ <\/div>\n+ <\/TreeFocusedContext.Provider>\n+ );\n+}\n+\n+\/\/ Indentation size can be adjusted but child width is fixed.\n+\/\/ We need to adjust indentations so the widest child can fit without overflowing.\n+\/\/ Sometimes the widest child is also the deepest in the tree:\n+\/\/ ┏----------------------┓\n+\/\/ ┆ <Foo> ┆\n+\/\/ ┆ ••••<Foobar> ┆\n+\/\/ ┆ ••••••••<Baz> ┆\n+\/\/ ┗----------------------┛\n+\/\/\n+\/\/ But this is not always the case.\n+\/\/ Even with the above example, a change in indentation may change the overall widest child:\n+\/\/ ┏----------------------┓\n+\/\/ ┆ <Foo> ┆\n+\/\/ ┆ ••<Foobar> ┆\n+\/\/ ┆ ••••<Baz> ┆\n+\/\/ ┗----------------------┛\n+\/\/\n+\/\/ In extreme cases this difference can be important:\n+\/\/ ┏----------------------┓\n+\/\/ ┆ <ReallyLongName> ┆\n+\/\/ ┆ ••<Foo> ┆\n+\/\/ ┆ ••••<Bar> ┆\n+\/\/ ┆ ••••••<Baz> ┆\n+\/\/ ┆ ••••••••<Qux> ┆\n+\/\/ ┗----------------------┛\n+\/\/\n+\/\/ In the above example, the current indentation is fine,\n+\/\/ but if we naively assumed that the widest element is also the deepest element,\n+\/\/ we would end up compressing the indentation unnecessarily:\n+\/\/ ┏----------------------┓\n+\/\/ ┆ <ReallyLongName> ┆\n+\/\/ ┆ •<Foo> ┆\n+\/\/ ┆ ••<Bar> ┆\n+\/\/ ┆ •••<Baz> ┆\n+\/\/ ┆ ••••<Qux> ┆\n+\/\/ ┗----------------------┛\n+\/\/\n+\/\/ The way we deal with this is to compute the max indentation size that can fit each child,\n+\/\/ given the child's fixed width and depth within the tree.\n+\/\/ Then we take the smallest of these indentation sizes...\n+function updateIndentationSizeVar(\n+ innerDiv: HTMLDivElement,\n+ cachedChildWidths: WeakMap<HTMLElement, number>,\n+ indentationSizeRef: {| current: number |},\n+ prevListWidthRef: {| current: number |}\n+): void {\n+ const list = ((innerDiv.parentElement: any): HTMLDivElement);\n+ const listWidth = list.clientWidth;\n+\n+ \/\/ Skip measurements when the Components panel is hidden.\n+ if (listWidth === 0) {\n+ return;\n+ }\n+\n+ \/\/ Reset the max indentation size if the width of the tree has increased.\n+ if (listWidth > prevListWidthRef.current) {\n+ indentationSizeRef.current = DEFAULT_INDENTATION_SIZE;\n+ }\n+ prevListWidthRef.current = listWidth;\n+\n+ let maxIndentationSize: number = indentationSizeRef.current;\n+\n+ for (let child of innerDiv.children) {\n+ const depth = parseInt(child.getAttribute('data-depth'), 10) || 0;\n+\n+ let childWidth: number = 0;\n+\n+ const cachedChildWidth = cachedChildWidths.get(child);\n+ if (cachedChildWidth != null) {\n+ childWidth = cachedChildWidth;\n+ } else {\n+ const { firstElementChild } = child;\n+\n+ \/\/ Skip over e.g. the guideline element\n+ if (firstElementChild != null) {\n+ childWidth = firstElementChild.clientWidth;\n+ cachedChildWidths.set(child, childWidth);\n+ }\n+ }\n+\n+ const remainingWidth = Math.max(0, listWidth - childWidth);\n+\n+ maxIndentationSize = Math.min(maxIndentationSize, remainingWidth \/ depth);\n+ }\n+\n+ indentationSizeRef.current = maxIndentationSize;\n+\n+ list.style.setProperty('--indentation-size', `${maxIndentationSize}px`);\n+}\n+\n+function InnerElementType({ children, style, ...rest }) {\n+ const { ownerID } = useContext(TreeStateContext);\n+\n+ const cachedChildWidths = useMemo<WeakMap<HTMLElement, number>>(\n+ () => new WeakMap(),\n+ []\n+ );\n+\n+ \/\/ This ref tracks the current indentation size.\n+ \/\/ We decrease indentation to fit wider\/deeper trees.\n+ \/\/ We indentionally do not increase it again afterward, to avoid the perception of content \"jumping\"\n+ \/\/ e.g. clicking to toggle\/collapse a row might otherwise jump horizontally beneath your cursor,\n+ \/\/ e.g. scrolling a wide row off screen could cause narrower rows to jump to the right some.\n+ \/\/\n+ \/\/ There are two exceptions for this:\n+ \/\/ 1. The first is when the width of the tree increases.\n+ \/\/ The user may have resized the window specifically to make more room for DevTools.\n+ \/\/ In either case, this should reset our max indentation size logic.\n+ \/\/ 2. The second is when the user enters or exits an owner tree.\n+ const indentationSizeRef = useRef<number>(DEFAULT_INDENTATION_SIZE);\n+ const prevListWidthRef = useRef<number>(0);\n+ const prevOwnerIDRef = useRef<number | null>(ownerID);\n+ const divRef = useRef<HTMLDivElement | null>(null);\n+\n+ \/\/ We shouldn't retain this width across different conceptual trees though,\n+ \/\/ so when the user opens the \"owners tree\" view, we should discard the previous width.\n+ if (ownerID !== prevOwnerIDRef.current) {\n+ prevOwnerIDRef.current = ownerID;\n+ indentationSizeRef.current = DEFAULT_INDENTATION_SIZE;\n+ }\n+\n+ \/\/ When we render new content, measure to see if we need to shrink indentation to fit it.\n+ useEffect(() => {\n+ if (divRef.current !== null) {\n+ updateIndentationSizeVar(\n+ divRef.current,\n+ cachedChildWidths,\n+ indentationSizeRef,\n+ prevListWidthRef\n+ );\n+ }\n+ });\n+\n+ \/\/ This style override enables the background color to fill the full visible width,\n+ \/\/ when combined with the CSS tweaks in Element.\n+ \/\/ A lot of options were considered; this seemed the one that requires the least code.\n+ \/\/ See https:\/\/github.com\/bvaughn\/react-devtools-experimental\/issues\/9\n+ return (\n+ <div\n+ className={styles.InnerElementType}\n+ ref={divRef}\n+ style={style}\n+ {...rest}\n+ >\n+ <SelectedTreeHighlight \/>\n+ {children}\n+ <\/div>\n+ );\n+}\n+\n+function Loading() {\n+ return <div className={styles.Loading}>Loading...<\/div>;\n+}\ndiff --git a\/src\/devtools\/views\/Components\/TreeContext.js b\/src\/devtools\/views\/Components\/TreeContext.js\nnew file mode 100644\nindex 0000000000..9ae209da69\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/TreeContext.js\n@@ -0,0 +1,808 @@\n+\/\/ @flow\n+\n+\/\/ This context combines tree\/selection state, search, and the owners stack.\n+\/\/ These values are managed together because changes in one often impact the others.\n+\/\/ Combining them enables us to avoid cascading renders.\n+\/\/\n+\/\/ Changes to search state may impact tree state.\n+\/\/ For example, updating the selected search result also updates the tree's selected value.\n+\/\/ Search does not fundamanetally change the tree though.\n+\/\/ It is also possible to update the selected tree value independently.\n+\/\/\n+\/\/ Changes to owners state mask search and tree values.\n+\/\/ When owners statck is not empty, search is temporarily disabnled,\n+\/\/ and tree values (e.g. num elements, selected element) are masked.\n+\/\/ Both tree and search values are restored when the owners stack is cleared.\n+\/\/\n+\/\/ For this reason, changes to the tree context are processed in sequence: tree -> search -> owners\n+\/\/ This enables each section to potentially override (or mask) previous values.\n+\n+import React, {\n+ createContext,\n+ useCallback,\n+ useContext,\n+ useEffect,\n+ useLayoutEffect,\n+ useMemo,\n+ useReducer,\n+ useRef,\n+} from 'react';\n+import {\n+ unstable_next as next,\n+ unstable_runWithPriority as runWithPriority,\n+ unstable_UserBlockingPriority as UserBlockingPriority,\n+} from 'scheduler';\n+import { createRegExp } from '..\/utils';\n+import { BridgeContext, StoreContext } from '..\/context';\n+import Store from '..\/..\/store';\n+\n+import type { Element } from '.\/types';\n+\n+export type StateContext = {|\n+ \/\/ Tree\n+ numElements: number,\n+ selectedElementID: number | null,\n+ selectedElementIndex: number | null,\n+\n+ \/\/ Search\n+ searchIndex: number | null,\n+ searchResults: Array<number>,\n+ searchText: string,\n+\n+ \/\/ Owners\n+ ownerID: number | null,\n+ ownerFlatTree: Array<Element> | null,\n+\n+ \/\/ Inspection element panel\n+ inspectedElementID: number | null,\n+|};\n+\n+type ACTION_GO_TO_NEXT_SEARCH_RESULT = {|\n+ type: 'GO_TO_NEXT_SEARCH_RESULT',\n+|};\n+type ACTION_GO_TO_PREVIOUS_SEARCH_RESULT = {|\n+ type: 'GO_TO_PREVIOUS_SEARCH_RESULT',\n+|};\n+type ACTION_HANDLE_STORE_MUTATION = {|\n+ type: 'HANDLE_STORE_MUTATION',\n+ payload: [Array<number>, Map<number, number>],\n+|};\n+type ACTION_RESET_OWNER_STACK = {|\n+ type: 'RESET_OWNER_STACK',\n+|};\n+type ACTION_SELECT_CHILD_ELEMENT_IN_TREE = {|\n+ type: 'SELECT_CHILD_ELEMENT_IN_TREE',\n+|};\n+type ACTION_SELECT_ELEMENT_AT_INDEX = {|\n+ type: 'SELECT_ELEMENT_AT_INDEX',\n+ payload: number | null,\n+|};\n+type ACTION_SELECT_ELEMENT_BY_ID = {|\n+ type: 'SELECT_ELEMENT_BY_ID',\n+ payload: number | null,\n+|};\n+type ACTION_SELECT_NEXT_ELEMENT_IN_TREE = {|\n+ type: 'SELECT_NEXT_ELEMENT_IN_TREE',\n+|};\n+type ACTION_SELECT_PARENT_ELEMENT_IN_TREE = {|\n+ type: 'SELECT_PARENT_ELEMENT_IN_TREE',\n+|};\n+type ACTION_SELECT_PREVIOUS_ELEMENT_IN_TREE = {|\n+ type: 'SELECT_PREVIOUS_ELEMENT_IN_TREE',\n+|};\n+type ACTION_SELECT_OWNER = {|\n+ type: 'SELECT_OWNER',\n+ payload: number,\n+|};\n+type ACTION_SET_SEARCH_TEXT = {|\n+ type: 'SET_SEARCH_TEXT',\n+ payload: string,\n+|};\n+type ACTION_UPDATE_INSPECTED_ELEMENT_ID = {|\n+ type: 'UPDATE_INSPECTED_ELEMENT_ID',\n+|};\n+\n+type Action =\n+ | ACTION_GO_TO_NEXT_SEARCH_RESULT\n+ | ACTION_GO_TO_PREVIOUS_SEARCH_RESULT\n+ | ACTION_HANDLE_STORE_MUTATION\n+ | ACTION_RESET_OWNER_STACK\n+ | ACTION_SELECT_CHILD_ELEMENT_IN_TREE\n+ | ACTION_SELECT_ELEMENT_AT_INDEX\n+ | ACTION_SELECT_ELEMENT_BY_ID\n+ | ACTION_SELECT_NEXT_ELEMENT_IN_TREE\n+ | ACTION_SELECT_PARENT_ELEMENT_IN_TREE\n+ | ACTION_SELECT_PREVIOUS_ELEMENT_IN_TREE\n+ | ACTION_SELECT_OWNER\n+ | ACTION_SET_SEARCH_TEXT\n+ | ACTION_UPDATE_INSPECTED_ELEMENT_ID;\n+\n+export type DispatcherContext = (action: Action) => void;\n+\n+const TreeStateContext = createContext<StateContext>(\n+ ((null: any): StateContext)\n+);\n+TreeStateContext.displayName = 'TreeStateContext';\n+\n+const TreeDispatcherContext = createContext<DispatcherContext>(\n+ ((null: any): DispatcherContext)\n+);\n+TreeDispatcherContext.displayName = 'TreeDispatcherContext';\n+\n+type State = {|\n+ \/\/ Tree\n+ numElements: number,\n+ selectedElementID: number | null,\n+ selectedElementIndex: number | null,\n+\n+ \/\/ Search\n+ searchIndex: number | null,\n+ searchResults: Array<number>,\n+ searchText: string,\n+\n+ \/\/ Owners\n+ ownerID: number | null,\n+ ownerFlatTree: Array<Element> | null,\n+\n+ \/\/ Inspection element panel\n+ inspectedElementID: number | null,\n+|};\n+\n+function reduceTreeState(store: Store, state: State, action: Action): State {\n+ let { numElements, ownerID, selectedElementIndex, selectedElementID } = state;\n+\n+ let lookupIDForIndex = true;\n+\n+ \/\/ Base tree should ignore selected element changes when the owner's tree is active.\n+ if (ownerID === null) {\n+ switch (action.type) {\n+ case 'HANDLE_STORE_MUTATION':\n+ numElements = store.numElements;\n+\n+ \/\/ If the currently-selected Element has been removed from the tree, update selection state.\n+ const removedIDs = action.payload[1];\n+ \/\/ Find the closest parent that wasn't removed during this batch.\n+ \/\/ We deduce the parent-child mapping from removedIDs (id -> parentID)\n+ \/\/ because by now it's too late to read them from the store.\n+ while (\n+ selectedElementID !== null &&\n+ removedIDs.has(selectedElementID)\n+ ) {\n+ selectedElementID = ((removedIDs.get(\n+ selectedElementID\n+ ): any): number);\n+ }\n+ if (selectedElementID === 0) {\n+ \/\/ The whole root was removed.\n+ selectedElementIndex = null;\n+ }\n+ break;\n+ case 'SELECT_CHILD_ELEMENT_IN_TREE':\n+ if (selectedElementIndex !== null) {\n+ const selectedElement = store.getElementAtIndex(\n+ ((selectedElementIndex: any): number)\n+ );\n+ if (\n+ selectedElement !== null &&\n+ selectedElement.children.length > 0 &&\n+ !selectedElement.isCollapsed\n+ ) {\n+ const firstChildID = selectedElement.children[0];\n+ const firstChildIndex = store.getIndexOfElementID(firstChildID);\n+ if (firstChildIndex !== null) {\n+ selectedElementIndex = firstChildIndex;\n+ }\n+ }\n+ }\n+ break;\n+ case 'SELECT_ELEMENT_AT_INDEX':\n+ selectedElementIndex = (action: ACTION_SELECT_ELEMENT_AT_INDEX).payload;\n+ break;\n+ case 'SELECT_ELEMENT_BY_ID':\n+ \/\/ Skip lookup in this case; it would be redundant.\n+ \/\/ It might also cause problems if the specified element was inside of a (not yet expanded) subtree.\n+ lookupIDForIndex = false;\n+\n+ selectedElementID = (action: ACTION_SELECT_ELEMENT_BY_ID).payload;\n+ selectedElementIndex =\n+ selectedElementID === null\n+ ? null\n+ : store.getIndexOfElementID(selectedElementID);\n+ break;\n+ case 'SELECT_NEXT_ELEMENT_IN_TREE':\n+ if (\n+ selectedElementIndex === null ||\n+ selectedElementIndex + 1 >= numElements\n+ ) {\n+ selectedElementIndex = 0;\n+ } else {\n+ selectedElementIndex++;\n+ }\n+ break;\n+ case 'SELECT_PARENT_ELEMENT_IN_TREE':\n+ if (selectedElementIndex !== null) {\n+ const selectedElement = store.getElementAtIndex(\n+ ((selectedElementIndex: any): number)\n+ );\n+ if (selectedElement !== null && selectedElement.parentID !== null) {\n+ const parentIndex = store.getIndexOfElementID(\n+ selectedElement.parentID\n+ );\n+ if (parentIndex !== null) {\n+ selectedElementIndex = parentIndex;\n+ }\n+ }\n+ }\n+ break;\n+ case 'SELECT_PREVIOUS_ELEMENT_IN_TREE':\n+ if (selectedElementIndex === null || selectedElementIndex === 0) {\n+ selectedElementIndex = numElements - 1;\n+ } else {\n+ selectedElementIndex--;\n+ }\n+ break;\n+ default:\n+ \/\/ React can bailout of no-op updates.\n+ return state;\n+ }\n+ }\n+\n+ \/\/ Keep selected item ID and index in sync.\n+ if (lookupIDForIndex && selectedElementIndex !== state.selectedElementIndex) {\n+ if (selectedElementIndex === null) {\n+ selectedElementID = null;\n+ } else {\n+ selectedElementID = store.getElementIDAtIndex(\n+ ((selectedElementIndex: any): number)\n+ );\n+ }\n+ }\n+\n+ return {\n+ ...state,\n+\n+ numElements,\n+ selectedElementIndex,\n+ selectedElementID,\n+ };\n+}\n+\n+function reduceSearchState(store: Store, state: State, action: Action): State {\n+ let {\n+ ownerID,\n+ searchIndex,\n+ searchResults,\n+ searchText,\n+ selectedElementID,\n+ selectedElementIndex,\n+ } = state;\n+\n+ const prevSearchIndex = searchIndex;\n+ const prevSearchText = searchText;\n+ const numPrevSearchResults = searchResults.length;\n+\n+ \/\/ We track explicitly whether search was requested because\n+ \/\/ we might want to search even if search index didn't change.\n+ \/\/ For example, if you press \"next result\" on a search with a single\n+ \/\/ result but a different current selection, we'll set this to true.\n+ let didRequestSearch = false;\n+\n+ \/\/ Search isn't supported when the owner's tree is active.\n+ if (ownerID === null) {\n+ switch (action.type) {\n+ case 'GO_TO_NEXT_SEARCH_RESULT':\n+ if (numPrevSearchResults > 0) {\n+ didRequestSearch = true;\n+ searchIndex =\n+ searchIndex + 1 < numPrevSearchResults ? searchIndex + 1 : 0;\n+ }\n+ break;\n+ case 'GO_TO_PREVIOUS_SEARCH_RESULT':\n+ if (numPrevSearchResults > 0) {\n+ didRequestSearch = true;\n+ searchIndex =\n+ ((searchIndex: any): number) > 0\n+ ? ((searchIndex: any): number) - 1\n+ : numPrevSearchResults - 1;\n+ }\n+ break;\n+ case 'HANDLE_STORE_MUTATION':\n+ if (searchText !== '') {\n+ const [\n+ addedElementIDs,\n+ removedElementIDs,\n+ ] = (action: ACTION_HANDLE_STORE_MUTATION).payload;\n+\n+ removedElementIDs.forEach((parentID, id) => {\n+ \/\/ Prune this item from the search results.\n+ const index = searchResults.indexOf(id);\n+ if (index >= 0) {\n+ searchResults = searchResults\n+ .slice(0, index)\n+ .concat(searchResults.slice(index + 1));\n+\n+ \/\/ If the results are now empty, also deselect things.\n+ if (searchResults.length === 0) {\n+ searchIndex = null;\n+ } else if (((searchIndex: any): number) >= searchResults.length) {\n+ searchIndex = searchResults.length - 1;\n+ }\n+ }\n+ });\n+\n+ addedElementIDs.forEach(id => {\n+ const element = ((store.getElementByID(id): any): Element);\n+\n+ \/\/ It's possible that multiple tree operations will fire before this action has run.\n+ \/\/ So it's important to check for elements that may have been added and then removed.\n+ if (element !== null) {\n+ const { displayName } = element;\n+\n+ \/\/ Add this item to the search results if it matches.\n+ const regExp = createRegExp(searchText);\n+ if (displayName !== null && regExp.test(displayName)) {\n+ const newElementIndex = ((store.getIndexOfElementID(\n+ id\n+ ): any): number);\n+\n+ let foundMatch = false;\n+ for (let index = 0; index < searchResults.length; index++) {\n+ const id = searchResults[index];\n+ if (\n+ newElementIndex <\n+ ((store.getIndexOfElementID(id): any): number)\n+ ) {\n+ foundMatch = true;\n+ searchResults = searchResults\n+ .slice(0, index)\n+ .concat(id)\n+ .concat(searchResults.slice(index));\n+ break;\n+ }\n+ }\n+ if (!foundMatch) {\n+ searchResults = searchResults.concat(id);\n+ }\n+\n+ searchIndex = searchIndex === null ? 0 : searchIndex;\n+ }\n+ }\n+ });\n+ }\n+ break;\n+ case 'SET_SEARCH_TEXT':\n+ searchIndex = null;\n+ searchResults = [];\n+ searchText = (action: ACTION_SET_SEARCH_TEXT).payload;\n+\n+ if (searchText !== '') {\n+ const regExp = createRegExp(searchText);\n+ store.roots.forEach(rootID => {\n+ recursivelySearchTree(store, rootID, regExp, searchResults);\n+ });\n+ if (searchResults.length > 0) {\n+ if (prevSearchIndex === null) {\n+ if (selectedElementIndex !== null) {\n+ searchIndex = getNearestResultIndex(\n+ store,\n+ searchResults,\n+ selectedElementIndex\n+ );\n+ } else {\n+ searchIndex = 0;\n+ }\n+ } else {\n+ searchIndex = Math.min(\n+ ((prevSearchIndex: any): number),\n+ searchResults.length - 1\n+ );\n+ }\n+ }\n+ }\n+ break;\n+ default:\n+ \/\/ React can bailout of no-op updates.\n+ return state;\n+ }\n+ }\n+\n+ if (searchText !== prevSearchText) {\n+ const newSearchIndex = searchResults.indexOf(selectedElementID);\n+ if (newSearchIndex === -1) {\n+ \/\/ Only move the selection if the new query\n+ \/\/ doesn't match the current selection anymore.\n+ didRequestSearch = true;\n+ } else {\n+ \/\/ Selected item still matches the new search query.\n+ \/\/ Adjust the index to reflect its position in new results.\n+ searchIndex = newSearchIndex;\n+ }\n+ }\n+ if (didRequestSearch && searchIndex !== null) {\n+ selectedElementID = ((searchResults[searchIndex]: any): number);\n+ selectedElementIndex = store.getIndexOfElementID(\n+ ((selectedElementID: any): number)\n+ );\n+ }\n+\n+ return {\n+ ...state,\n+\n+ selectedElementID,\n+ selectedElementIndex,\n+\n+ searchIndex,\n+ searchResults,\n+ searchText,\n+ };\n+}\n+\n+function reduceOwnersState(store: Store, state: State, action: Action): State {\n+ let {\n+ numElements,\n+ selectedElementID,\n+ selectedElementIndex,\n+ ownerID,\n+ ownerFlatTree,\n+ searchIndex,\n+ searchResults,\n+ searchText,\n+ } = state;\n+\n+ let prevSelectedElementIndex = selectedElementIndex;\n+\n+ switch (action.type) {\n+ case 'HANDLE_STORE_MUTATION':\n+ if (ownerID !== null) {\n+ if (!store.containsElement(ownerID)) {\n+ ownerID = null;\n+ ownerFlatTree = null;\n+ selectedElementID = null;\n+ } else {\n+ ownerFlatTree = store.getOwnersListForElement(ownerID);\n+ if (selectedElementID !== null) {\n+ \/\/ Mutation might have caused the index of this ID to shift.\n+ selectedElementIndex = ownerFlatTree.findIndex(\n+ element => element.id === selectedElementID\n+ );\n+ }\n+ }\n+ } else {\n+ if (selectedElementID !== null) {\n+ \/\/ Mutation might have caused the index of this ID to shift.\n+ selectedElementIndex = store.getIndexOfElementID(selectedElementID);\n+ }\n+ }\n+ if (selectedElementIndex === -1) {\n+ \/\/ If we couldn't find this ID after mutation, unselect it.\n+ selectedElementIndex = null;\n+ selectedElementID = null;\n+ }\n+ break;\n+ case 'RESET_OWNER_STACK':\n+ ownerID = null;\n+ ownerFlatTree = null;\n+ selectedElementIndex =\n+ selectedElementID !== null\n+ ? store.getIndexOfElementID(selectedElementID)\n+ : null;\n+ break;\n+ case 'SELECT_ELEMENT_AT_INDEX':\n+ if (ownerFlatTree !== null) {\n+ selectedElementIndex = (action: ACTION_SELECT_ELEMENT_AT_INDEX).payload;\n+ }\n+ break;\n+ case 'SELECT_ELEMENT_BY_ID':\n+ if (ownerFlatTree !== null) {\n+ const payload = (action: ACTION_SELECT_ELEMENT_BY_ID).payload;\n+ if (payload === null) {\n+ selectedElementIndex = null;\n+ } else {\n+ selectedElementIndex = ownerFlatTree.findIndex(\n+ element => element.id === payload\n+ );\n+\n+ \/\/ If the selected element is outside of the current owners list,\n+ \/\/ exit the list and select the element in the main tree.\n+ \/\/ This supports features like toggling Suspense.\n+ if (selectedElementIndex !== null && selectedElementIndex < 0) {\n+ ownerID = null;\n+ ownerFlatTree = null;\n+ selectedElementIndex = store.getIndexOfElementID(payload);\n+ }\n+ }\n+ }\n+ break;\n+ case 'SELECT_NEXT_ELEMENT_IN_TREE':\n+ if (ownerFlatTree !== null && ownerFlatTree.length > 0) {\n+ if (selectedElementIndex === null) {\n+ selectedElementIndex = 0;\n+ } else if (selectedElementIndex + 1 < ownerFlatTree.length) {\n+ selectedElementIndex++;\n+ }\n+ }\n+ break;\n+ case 'SELECT_PREVIOUS_ELEMENT_IN_TREE':\n+ if (ownerFlatTree !== null && ownerFlatTree.length > 0) {\n+ if (selectedElementIndex !== null && selectedElementIndex > 0) {\n+ selectedElementIndex--;\n+ }\n+ }\n+ break;\n+ case 'SELECT_OWNER':\n+ \/\/ If the Store doesn't have any owners metadata, don't drill into an empty stack.\n+ \/\/ This is a confusing user experience.\n+ if (store.hasOwnerMetadata) {\n+ ownerID = (action: ACTION_SELECT_OWNER).payload;\n+ ownerFlatTree = store.getOwnersListForElement(ownerID);\n+\n+ \/\/ Always force reset selection to be the top of the new owner tree.\n+ selectedElementIndex = 0;\n+ prevSelectedElementIndex = null;\n+ }\n+ break;\n+ default:\n+ \/\/ React can bailout of no-op updates.\n+ return state;\n+ }\n+\n+ \/\/ Changes in the selected owner require re-calculating the owners tree.\n+ if (\n+ ownerFlatTree !== state.ownerFlatTree ||\n+ action.type === 'HANDLE_STORE_MUTATION'\n+ ) {\n+ if (ownerFlatTree === null) {\n+ numElements = store.numElements;\n+ } else {\n+ numElements = ownerFlatTree.length;\n+ }\n+ }\n+\n+ \/\/ Keep selected item ID and index in sync.\n+ if (selectedElementIndex !== prevSelectedElementIndex) {\n+ if (selectedElementIndex === null) {\n+ selectedElementID = null;\n+ } else {\n+ if (ownerFlatTree !== null) {\n+ selectedElementID = ownerFlatTree[selectedElementIndex].id;\n+ }\n+ }\n+ }\n+\n+ return {\n+ ...state,\n+\n+ numElements,\n+ selectedElementID,\n+ selectedElementIndex,\n+\n+ searchIndex,\n+ searchResults,\n+ searchText,\n+\n+ ownerID,\n+ ownerFlatTree,\n+ };\n+}\n+\n+function reduceSuspenseState(\n+ store: Store,\n+ state: State,\n+ action: Action\n+): State {\n+ const { type } = action;\n+ switch (type) {\n+ case 'UPDATE_INSPECTED_ELEMENT_ID':\n+ if (state.inspectedElementID !== state.selectedElementID) {\n+ return {\n+ ...state,\n+ inspectedElementID: state.selectedElementID,\n+ };\n+ }\n+ break;\n+ default:\n+ break;\n+ }\n+\n+ \/\/ React can bailout of no-op updates.\n+ return state;\n+}\n+\n+type Props = {|\n+ children: React$Node,\n+\n+ \/\/ Used for automated testing\n+ defaultOwnerID?: ?number,\n+ defaultSelectedElementID?: ?number,\n+ defaultSelectedElementIndex?: ?number,\n+|};\n+\n+\/\/ TODO Remove TreeContextController wrapper element once global ConsearchText.write API exists.\n+function TreeContextController({\n+ children,\n+ defaultOwnerID,\n+ defaultSelectedElementID,\n+ defaultSelectedElementIndex,\n+}: Props) {\n+ const bridge = useContext(BridgeContext);\n+ const store = useContext(StoreContext);\n+\n+ const initialRevision = useMemo(() => store.revision, [store]);\n+\n+ \/\/ This reducer is created inline because it needs access to the Store.\n+ \/\/ The store is mutable, but the Store itself is global and lives for the lifetime of the DevTools,\n+ \/\/ so it's okay for the reducer to have an empty dependencies array.\n+ const reducer = useMemo(\n+ () => (state: State, action: Action): State => {\n+ const { type } = action;\n+ switch (type) {\n+ case 'GO_TO_NEXT_SEARCH_RESULT':\n+ case 'GO_TO_PREVIOUS_SEARCH_RESULT':\n+ case 'HANDLE_STORE_MUTATION':\n+ case 'RESET_OWNER_STACK':\n+ case 'SELECT_ELEMENT_AT_INDEX':\n+ case 'SELECT_ELEMENT_BY_ID':\n+ case 'SELECT_CHILD_ELEMENT_IN_TREE':\n+ case 'SELECT_NEXT_ELEMENT_IN_TREE':\n+ case 'SELECT_PARENT_ELEMENT_IN_TREE':\n+ case 'SELECT_PREVIOUS_ELEMENT_IN_TREE':\n+ case 'SELECT_OWNER':\n+ case 'UPDATE_INSPECTED_ELEMENT_ID':\n+ case 'SET_SEARCH_TEXT':\n+ state = reduceTreeState(store, state, action);\n+ state = reduceSearchState(store, state, action);\n+ state = reduceOwnersState(store, state, action);\n+ state = reduceSuspenseState(store, state, action);\n+\n+ \/\/ If the selected ID is in a collapsed subtree, reset the selected index to null.\n+ \/\/ We'll know the correct index after the layout effect will toggle the tree,\n+ \/\/ and the store tree is mutated to account for that.\n+ if (\n+ state.selectedElementID !== null &&\n+ store.isInsideCollapsedSubTree(state.selectedElementID)\n+ ) {\n+ return {\n+ ...state,\n+ selectedElementIndex: null,\n+ };\n+ }\n+\n+ return state;\n+ default:\n+ throw new Error(`Unrecognized action \"${type}\"`);\n+ }\n+ },\n+ [store]\n+ );\n+\n+ const [state, dispatch] = useReducer(reducer, {\n+ \/\/ Tree\n+ numElements: store.numElements,\n+ selectedElementID:\n+ defaultSelectedElementID == null ? null : defaultSelectedElementID,\n+ selectedElementIndex:\n+ defaultSelectedElementIndex == null ? null : defaultSelectedElementIndex,\n+\n+ \/\/ Search\n+ searchIndex: null,\n+ searchResults: [],\n+ searchText: '',\n+\n+ \/\/ Owners\n+ ownerID: defaultOwnerID == null ? null : defaultOwnerID,\n+ ownerFlatTree: null,\n+\n+ \/\/ Inspection element panel\n+ inspectedElementID: null,\n+ });\n+\n+ const dispatchWrapper = useCallback(\n+ (action: Action) => {\n+ \/\/ Run the first update at \"user-blocking\" priority in case dispatch is called from a non-React event.\n+ \/\/ In this case, the current (and \"next\") priorities would both be \"normal\",\n+ \/\/ and suspense would potentially block both updates.\n+ runWithPriority(UserBlockingPriority, () => dispatch(action));\n+ next(() => dispatch({ type: 'UPDATE_INSPECTED_ELEMENT_ID' }));\n+ },\n+ [dispatch]\n+ );\n+\n+ \/\/ Listen for host element selections.\n+ useEffect(() => {\n+ const handleSelectFiber = (id: number) =>\n+ dispatchWrapper({ type: 'SELECT_ELEMENT_BY_ID', payload: id });\n+ bridge.addListener('selectFiber', handleSelectFiber);\n+ return () => bridge.removeListener('selectFiber', handleSelectFiber);\n+ }, [bridge, dispatchWrapper]);\n+\n+ \/\/ If a newly-selected search result or inspection selection is inside of a collapsed subtree, auto expand it.\n+ \/\/ This needs to be a layout effect to avoid temporarily flashing an incorrect selection.\n+ const prevSelectedElementID = useRef<number | null>(null);\n+ useLayoutEffect(() => {\n+ if (state.selectedElementID !== prevSelectedElementID.current) {\n+ prevSelectedElementID.current = state.selectedElementID;\n+\n+ if (state.selectedElementID !== null) {\n+ let element = store.getElementByID(state.selectedElementID);\n+ if (element !== null && element.parentID > 0) {\n+ store.toggleIsCollapsed(element.parentID, false);\n+ }\n+ }\n+ }\n+ }, [state.selectedElementID, store]);\n+\n+ \/\/ Mutations to the underlying tree may impact this context (e.g. search results, selection state).\n+ useEffect(() => {\n+ const handleStoreMutated = ([addedElementIDs, removedElementIDs]: [\n+ Array<number>,\n+ Map<number, number>,\n+ ]) => {\n+ dispatchWrapper({\n+ type: 'HANDLE_STORE_MUTATION',\n+ payload: [addedElementIDs, removedElementIDs],\n+ });\n+ };\n+\n+ \/\/ Since this is a passive effect, the tree may have been mutated before our initial subscription.\n+ if (store.revision !== initialRevision) {\n+ \/\/ At the moment, we can treat this as a mutation.\n+ \/\/ We don't know which Elements were newly added\/removed, but that should be okay in this case.\n+ \/\/ It would only impact the search state, which is unlikely to exist yet at this point.\n+ dispatchWrapper({\n+ type: 'HANDLE_STORE_MUTATION',\n+ payload: [[], new Map()],\n+ });\n+ }\n+\n+ store.addListener('mutated', handleStoreMutated);\n+\n+ return () => store.removeListener('mutated', handleStoreMutated);\n+ }, [dispatchWrapper, initialRevision, store]);\n+\n+ return (\n+ <TreeStateContext.Provider value={state}>\n+ <TreeDispatcherContext.Provider value={dispatchWrapper}>\n+ {children}\n+ <\/TreeDispatcherContext.Provider>\n+ <\/TreeStateContext.Provider>\n+ );\n+}\n+function recursivelySearchTree(\n+ store: Store,\n+ elementID: number,\n+ regExp: RegExp,\n+ searchResults: Array<number>\n+): void {\n+ const { children, displayName, hocDisplayNames } = ((store.getElementByID(\n+ elementID\n+ ): any): Element);\n+\n+ if (displayName != null && regExp.test(displayName) === true) {\n+ searchResults.push(elementID);\n+ } else if (\n+ hocDisplayNames != null &&\n+ hocDisplayNames.length > 0 &&\n+ hocDisplayNames.some(name => regExp.test(name)) === true\n+ ) {\n+ searchResults.push(elementID);\n+ }\n+\n+ children.forEach(childID =>\n+ recursivelySearchTree(store, childID, regExp, searchResults)\n+ );\n+}\n+\n+function getNearestResultIndex(\n+ store: Store,\n+ searchResults: Array<number>,\n+ selectedElementIndex: number\n+): number {\n+ const index = searchResults.findIndex(id => {\n+ const index = store.getIndexOfElementID(id);\n+ return index !== null && index >= selectedElementIndex;\n+ });\n+\n+ return index === -1 ? 0 : index;\n+}\n+\n+export { TreeDispatcherContext, TreeStateContext, TreeContextController };\ndiff --git a\/src\/devtools\/views\/Components\/TreeFocusedContext.js b\/src\/devtools\/views\/Components\/TreeFocusedContext.js\nnew file mode 100644\nindex 0000000000..7851db1316\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/TreeFocusedContext.js\n@@ -0,0 +1,7 @@\n+\/\/ @flow\n+\n+import { createContext } from 'react';\n+\n+const TreeFocusedContext = createContext<boolean>(false);\n+\n+export default TreeFocusedContext;\ndiff --git a\/src\/devtools\/views\/Components\/ViewElementSourceContext.js b\/src\/devtools\/views\/Components\/ViewElementSourceContext.js\nnew file mode 100644\nindex 0000000000..30a3f017af\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/ViewElementSourceContext.js\n@@ -0,0 +1,18 @@\n+\/\/ @flow\n+\n+import { createContext } from 'react';\n+\n+import type {\n+ CanViewElementSource,\n+ ViewElementSource,\n+} from 'src\/devtools\/views\/DevTools';\n+\n+export type Context = {|\n+ canViewElementSourceFunction: CanViewElementSource | null,\n+ viewElementSourceFunction: ViewElementSource | null,\n+|};\n+\n+const ViewElementSourceContext = createContext<Context>(((null: any): Context));\n+ViewElementSourceContext.displayName = 'ViewElementSourceContext';\n+\n+export default ViewElementSourceContext;\ndiff --git a\/src\/devtools\/views\/Components\/types.js b\/src\/devtools\/views\/Components\/types.js\nnew file mode 100644\nindex 0000000000..bba0b300c9\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/types.js\n@@ -0,0 +1,87 @@\n+\/\/ @flow\n+\n+import type { ElementType } from 'src\/types';\n+\n+\/\/ Each element on the frontend corresponds to a Fiber on the backend.\n+\/\/ Some of its information (e.g. id, type, displayName) come from the backend.\n+\/\/ Other bits (e.g. weight and depth) are computed on the frontend for windowing and display purposes.\n+\/\/ Elements are udpated on a push basis– meaning the backend pushes updates to the frontend when needed.\n+export type Element = {|\n+ id: number,\n+ parentID: number,\n+ children: Array<number>,\n+ type: ElementType,\n+ displayName: string | null,\n+ key: number | string | null,\n+\n+ hocDisplayNames: null | Array<string>,\n+\n+ \/\/ Should the elements children be visible in the tree?\n+ isCollapsed: boolean,\n+\n+ \/\/ Owner (if available)\n+ ownerID: number,\n+\n+ \/\/ How many levels deep within the tree is this element?\n+ \/\/ This determines how much indentation (left padding) should be used in the Elements tree.\n+ depth: number,\n+\n+ \/\/ How many nodes (including itself) are below this Element within the tree.\n+ \/\/ This property is used to quickly determine the total number of Elements,\n+ \/\/ and the Element at any given index (for windowing purposes).\n+ weight: number,\n+|};\n+\n+export type Owner = {|\n+ displayName: string | null,\n+ id: number,\n+ hocDisplayNames: Array<string> | null,\n+ type: ElementType,\n+|};\n+\n+export type OwnersList = {|\n+ id: number,\n+ owners: Array<Owner> | null,\n+|};\n+\n+export type Source = {|\n+ fileName: string,\n+ lineNumber: number,\n+|};\n+\n+export type InspectedElement = {|\n+ id: number,\n+\n+ \/\/ Does the current renderer support editable hooks?\n+ canEditHooks: boolean,\n+\n+ \/\/ Does the current renderer support editable function props?\n+ canEditFunctionProps: boolean,\n+\n+ \/\/ Is this Suspense, and can its value be overriden now?\n+ canToggleSuspense: boolean,\n+\n+ \/\/ Can view component source location.\n+ canViewSource: boolean,\n+\n+ \/\/ Inspectable properties.\n+ context: Object | null,\n+ hooks: Object | null,\n+ props: Object | null,\n+ state: Object | null,\n+\n+ \/\/ List of owners\n+ owners: Array<Owner> | null,\n+\n+ \/\/ Location of component in source coude.\n+ source: Source | null,\n+\n+ type: ElementType,\n+|};\n+\n+\/\/ TODO: Add profiling type\n+\n+export type DehydratedData = {|\n+ cleaned: Array<Array<string | number>>,\n+ data: Object,\n+|};\ndiff --git a\/src\/devtools\/views\/DevTools.css b\/src\/devtools\/views\/DevTools.css\nnew file mode 100644\nindex 0000000000..efc59b78db\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/DevTools.css\n@@ -0,0 +1,54 @@\n+.DevTools {\n+ width: 100%;\n+ height: 100%;\n+ display: flex;\n+ flex-direction: column;\n+ background-color: var(--color-background);\n+ color: var(--color-text);\n+}\n+\n+.TabBar {\n+ flex: 0 0 auto;\n+ display: flex;\n+ align-items: center;\n+ padding: 0 0.5rem;\n+ background-color: var(--color-background);\n+ border-top: 1px solid var(--color-border);\n+ font-family: var(--font-family-sans);\n+ font-size: var(--font-size-sans-large);\n+ user-select: none;\n+\n+ \/* Electron drag area *\/\n+ -webkit-app-region: drag;\n+}\n+\n+.Spacer {\n+ flex: 1;\n+}\n+\n+.TabContent {\n+ flex: 1 1 100%;\n+ overflow: auto;\n+}\n+\n+.DevToolsVersion {\n+ font-size: var(--font-size-sans-normal);\n+ margin-right: 0.5rem;\n+}\n+\n+.DevToolsVersion:before {\n+ font-size: var(--font-size-sans-large);\n+ content: 'DevTools ';\n+}\n+\n+@media screen and (max-width: 400px) {\n+ .DevToolsVersion:before {\n+ content: '';\n+ }\n+}\n+\n+@media screen and (max-width: 300px) {\n+ .DevToolsVersion {\n+ display: none;\n+ }\n+}\ndiff --git a\/src\/devtools\/views\/DevTools.js b\/src\/devtools\/views\/DevTools.js\nnew file mode 100644\nindex 0000000000..44d48b6131\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/DevTools.js\n@@ -0,0 +1,160 @@\n+\/\/ @flow\n+\n+\/\/ Reach styles need to come before any component styles.\n+\/\/ This makes overridding the styles simpler.\n+import '@reach\/menu-button\/styles.css';\n+import '@reach\/tooltip\/styles.css';\n+\n+import React, { useMemo, useState } from 'react';\n+import Store from '..\/store';\n+import { BridgeContext, StoreContext } from '.\/context';\n+import Components from '.\/Components\/Components';\n+import Profiler from '.\/Profiler\/Profiler';\n+import TabBar from '.\/TabBar';\n+import { SettingsContextController } from '.\/Settings\/SettingsContext';\n+import { TreeContextController } from '.\/Components\/TreeContext';\n+import ViewElementSourceContext from '.\/Components\/ViewElementSourceContext';\n+import { ProfilerContextController } from '.\/Profiler\/ProfilerContext';\n+import { ModalDialogContextController } from '.\/ModalDialog';\n+import ReactLogo from '.\/ReactLogo';\n+import WarnIfLegacyBackendDetected from '.\/WarnIfLegacyBackendDetected';\n+import ShowWelcomeToTheNewDevToolsDialog from '.\/ShowWelcomeToTheNewDevToolsDialog';\n+\n+import styles from '.\/DevTools.css';\n+\n+import '.\/root.css';\n+\n+import type { InspectedElement } from 'src\/devtools\/views\/Components\/types';\n+import type { FrontendBridge } from 'src\/bridge';\n+\n+export type BrowserTheme = 'dark' | 'light';\n+export type TabID = 'components' | 'profiler';\n+export type ViewElementSource = (\n+ id: number,\n+ inspectedElement: InspectedElement\n+) => void;\n+export type CanViewElementSource = (\n+ inspectedElement: InspectedElement\n+) => boolean;\n+\n+export type Props = {|\n+ bridge: FrontendBridge,\n+ browserTheme?: BrowserTheme,\n+ canViewElementSourceFunction?: ?CanViewElementSource,\n+ defaultTab?: TabID,\n+ showTabBar?: boolean,\n+ showWelcomeToTheNewDevToolsDialog?: boolean,\n+ store: Store,\n+ warnIfLegacyBackendDetected?: boolean,\n+ viewElementSourceFunction?: ?ViewElementSource,\n+\n+ \/\/ This property is used only by the web extension target.\n+ \/\/ The built-in tab UI is hidden in that case, in favor of the browser's own panel tabs.\n+ \/\/ This is done to save space within the app.\n+ \/\/ Because of this, the extension needs to be able to change which tab is active\/rendered.\n+ overrideTab?: TabID,\n+\n+ \/\/ To avoid potential multi-root trickiness, the web extension uses portals to render tabs.\n+ \/\/ The root <DevTools> app is rendered in the top-level extension window,\n+ \/\/ but individual tabs (e.g. Components, Profiling) can be rendered into portals within their browser panels.\n+ componentsPortalContainer?: Element,\n+ profilerPortalContainer?: Element,\n+|};\n+\n+const componentsTab = {\n+ id: ('components': TabID),\n+ icon: 'components',\n+ label: 'Components',\n+ title: 'React Components',\n+};\n+const profilerTab = {\n+ id: ('profiler': TabID),\n+ icon: 'profiler',\n+ label: 'Profiler',\n+ title: 'React Profiler',\n+};\n+\n+const tabs = [componentsTab, profilerTab];\n+\n+export default function DevTools({\n+ bridge,\n+ browserTheme = 'light',\n+ canViewElementSourceFunction = null,\n+ defaultTab = 'components',\n+ componentsPortalContainer,\n+ overrideTab,\n+ profilerPortalContainer,\n+ showTabBar = false,\n+ showWelcomeToTheNewDevToolsDialog = false,\n+ store,\n+ warnIfLegacyBackendDetected = false,\n+ viewElementSourceFunction = null,\n+}: Props) {\n+ const [tab, setTab] = useState(defaultTab);\n+ if (overrideTab != null && overrideTab !== tab) {\n+ setTab(overrideTab);\n+ }\n+\n+ const viewElementSource = useMemo(\n+ () => ({\n+ canViewElementSourceFunction,\n+ viewElementSourceFunction,\n+ }),\n+ [canViewElementSourceFunction, viewElementSourceFunction]\n+ );\n+\n+ return (\n+ <BridgeContext.Provider value={bridge}>\n+ <StoreContext.Provider value={store}>\n+ <ModalDialogContextController>\n+ <SettingsContextController\n+ browserTheme={browserTheme}\n+ componentsPortalContainer={componentsPortalContainer}\n+ profilerPortalContainer={profilerPortalContainer}\n+ >\n+ <ViewElementSourceContext.Provider value={viewElementSource}>\n+ <TreeContextController>\n+ <ProfilerContextController>\n+ <div className={styles.DevTools}>\n+ {showTabBar && (\n+ <div className={styles.TabBar}>\n+ <ReactLogo \/>\n+ <span className={styles.DevToolsVersion}>\n+ {process.env.DEVTOOLS_VERSION}\n+ <\/span>\n+ <div className={styles.Spacer} \/>\n+ <TabBar\n+ currentTab={tab}\n+ id=\"DevTools\"\n+ selectTab={setTab}\n+ tabs={tabs}\n+ type=\"navigation\"\n+ \/>\n+ <\/div>\n+ )}\n+ <div\n+ className={styles.TabContent}\n+ hidden={tab !== 'components'}\n+ >\n+ <Components portalContainer={componentsPortalContainer} \/>\n+ <\/div>\n+ <div\n+ className={styles.TabContent}\n+ hidden={tab !== 'profiler'}\n+ >\n+ <Profiler portalContainer={profilerPortalContainer} \/>\n+ <\/div>\n+ <\/div>\n+ <\/ProfilerContextController>\n+ <\/TreeContextController>\n+ <\/ViewElementSourceContext.Provider>\n+ <\/SettingsContextController>\n+ {warnIfLegacyBackendDetected && <WarnIfLegacyBackendDetected \/>}\n+ {showWelcomeToTheNewDevToolsDialog && (\n+ <ShowWelcomeToTheNewDevToolsDialog \/>\n+ )}\n+ <\/ModalDialogContextController>\n+ <\/StoreContext.Provider>\n+ <\/BridgeContext.Provider>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/ErrorBoundary.css b\/src\/devtools\/views\/ErrorBoundary.css\nnew file mode 100644\nindex 0000000000..8a4b506c85\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/ErrorBoundary.css\n@@ -0,0 +1,24 @@\n+.ErrorBoundary {\n+ height: 100%;\n+ width: 100%;\n+ background-color: white;\n+ color: red;\n+ padding: 0.5rem;\n+ overflow: auto;\n+}\n+\n+.Header {\n+ font-size: var(--font-size-sans-large);\n+ font-weight: bold;\n+}\n+\n+.Stack {\n+ margin-top: 0.5rem;\n+ white-space: pre-wrap;\n+ font-family: var(--font-family-monospace);\n+ font-size: var(--font-size-monospace-small);\n+ background-color: hsl(0, 100%, 97%);\n+ border: 1px solid hsl(0, 100%, 92%);\n+ border-radius: 0.25rem;\n+ padding: 0.5rem;\n+}\ndiff --git a\/src\/devtools\/views\/ErrorBoundary.js b\/src\/devtools\/views\/ErrorBoundary.js\nnew file mode 100644\nindex 0000000000..c6cd9b16c1\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/ErrorBoundary.js\n@@ -0,0 +1,105 @@\n+\/\/ @flow\n+\n+import React, { Component } from 'react';\n+import styles from '.\/ErrorBoundary.css';\n+\n+type Props = {|\n+ children: React$Node,\n+|};\n+\n+type State = {|\n+ callStack: string | null,\n+ componentStack: string | null,\n+ errorMessage: string | null,\n+ hasError: boolean,\n+|};\n+\n+export default class ErrorBoundary extends Component<Props, State> {\n+ state: State = {\n+ callStack: null,\n+ componentStack: null,\n+ errorMessage: null,\n+ hasError: false,\n+ };\n+\n+ componentDidCatch(error: any, { componentStack }: any) {\n+ const errorMessage =\n+ typeof error === 'object' && error.hasOwnProperty('message')\n+ ? error.message\n+ : error;\n+\n+ const callStack =\n+ typeof error === 'object' && error.hasOwnProperty('stack')\n+ ? error.stack\n+ .split('\\n')\n+ .slice(1)\n+ .join('\\n')\n+ : null;\n+\n+ this.setState({\n+ callStack,\n+ componentStack,\n+ errorMessage,\n+ hasError: true,\n+ });\n+ }\n+\n+ render() {\n+ const { children } = this.props;\n+ const { callStack, componentStack, errorMessage, hasError } = this.state;\n+\n+ let bugURL = process.env.GITHUB_URL;\n+ if (bugURL) {\n+ const title = `Error: \"${errorMessage || ''}\"`;\n+ const label = '😭 bug';\n+\n+ let body = '\\n';\n+ body += '\\n---------------------------------------------';\n+ body += '\\nPlease do not remove the text below this line';\n+ body += '\\n---------------------------------------------';\n+ body += `\\n\\nDevTools version: ${process.env.DEVTOOLS_VERSION || ''}`;\n+ if (callStack) {\n+ body += `\\n\\nCall stack: ${callStack.trim()}`;\n+ }\n+ if (componentStack) {\n+ body += `\\n\\nComponent stack: ${componentStack.trim()}`;\n+ }\n+\n+ bugURL += `\/issues\/new?labels=${encodeURI(label)}&title=${encodeURI(\n+ title\n+ )}&body=${encodeURI(body)}`;\n+ }\n+\n+ if (hasError) {\n+ return (\n+ <div className={styles.ErrorBoundary}>\n+ <div className={styles.Header}>\n+ An error was thrown: \"{errorMessage}\"\n+ <\/div>\n+ {bugURL && (\n+ <a\n+ href={bugURL}\n+ rel=\"noopener noreferrer\"\n+ target=\"_blank\"\n+ title=\"Report bug\"\n+ >\n+ Report this issue\n+ <\/a>\n+ )}\n+ {!!callStack && (\n+ <div className={styles.Stack}>\n+ The error was thrown {callStack.trim()}\n+ <\/div>\n+ )}\n+ {!!componentStack && (\n+ <div className={styles.Stack}>\n+ The error occurred {componentStack.trim()}\n+ <\/div>\n+ )}\n+ <\/div>\n+ );\n+ }\n+\n+ return children;\n+ }\n+}\ndiff --git a\/src\/devtools\/views\/Icon.css b\/src\/devtools\/views\/Icon.css\nnew file mode 100644\nindex 0000000000..2141ede58b\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Icon.css\n@@ -0,0 +1,5 @@\n+.Icon {\n+ width: 1rem;\n+ height: 1rem;\n+ fill: currentColor;\n+}\ndiff --git a\/src\/devtools\/views\/Icon.js b\/src\/devtools\/views\/Icon.js\nnew file mode 100644\nindex 0000000000..b3b1c2c45c\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Icon.js\n@@ -0,0 +1,111 @@\n+\/\/ @flow\n+\n+import React from 'react';\n+import styles from '.\/Icon.css';\n+\n+export type IconType =\n+ | 'arrow'\n+ | 'components'\n+ | 'flame-chart'\n+ | 'interactions'\n+ | 'profiler'\n+ | 'ranked-chart'\n+ | 'search'\n+ | 'settings';\n+\n+type Props = {|\n+ className?: string,\n+ type: IconType,\n+|};\n+\n+export default function Icon({ className = '', type }: Props) {\n+ let pathData = null;\n+ switch (type) {\n+ case 'arrow':\n+ pathData = PATH_ARROW;\n+ break;\n+ case 'components':\n+ pathData = PATH_COMPONENTS;\n+ break;\n+ case 'flame-chart':\n+ pathData = PATH_FLAME_CHART;\n+ break;\n+ case 'interactions':\n+ pathData = PATH_INTERACTIONS;\n+ break;\n+ case 'profiler':\n+ pathData = PATH_PROFILER;\n+ break;\n+ case 'ranked-chart':\n+ pathData = PATH_RANKED_CHART;\n+ break;\n+ case 'search':\n+ pathData = PATH_SEARCH;\n+ break;\n+ case 'settings':\n+ pathData = PATH_SETTINGS;\n+ break;\n+ default:\n+ console.warn(`Unsupported type \"${type}\" specified for Icon`);\n+ break;\n+ }\n+\n+ return (\n+ <svg\n+ xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\n+ className={`${styles.Icon} ${className}`}\n+ width=\"24\"\n+ height=\"24\"\n+ viewBox=\"0 0 24 24\"\n+ >\n+ <path d=\"M0 0h24v24H0z\" fill=\"none\" \/>\n+ <path fill=\"currentColor\" d={pathData} \/>\n+ <\/svg>\n+ );\n+}\n+\n+const PATH_ARROW = 'M8 5v14l11-7z';\n+\n+const PATH_COMPONENTS =\n+ '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';\n+\n+const PATH_FLAME_CHART = `\n+ M10.0650893,21.5040462 C7.14020814,20.6850349 5,18.0558698 5,14.9390244 C5,14.017627\n+ 5,9.81707317 7.83333333,7.37804878 C7.83333333,7.37804878 7.58333333,11.199187 10,\n+ 10.6300813 C11.125,10.326087 13.0062497,7.63043487 8.91666667,2.5 C14.1666667,3.06910569\n+ 19,9.32926829 19,14.9390244 C19,18.0558698 16.8597919,20.6850349 13.9349107,21.5040462\n+ C14.454014,21.0118505 14.7765152,20.3233394 14.7765152,19.5613412 C14.7765152,17.2826087\n+ 12,15.0875871 12,15.0875871 C12,15.0875871 9.22348485,17.2826087 9.22348485,19.5613412\n+ C9.22348485,20.3233394 9.54598603,21.0118505 10.0650893,21.5040462 Z M12.0833333,20.6514763\n+ C11.3814715,20.6514763 10.8125,20.1226027 10.8125,19.4702042 C10.8125,18.6069669\n+ 12.0833333,16.9347829 12.0833333,16.9347829 C12.0833333,16.9347829 13.3541667,18.6069669\n+ 13.3541667,19.4702042 C13.3541667,20.1226027 12.7851952,20.6514763 12.0833333,20.6514763 Z\n+`;\n+\n+const PATH_INTERACTIONS = `\n+ 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\n+ 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\n+ 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\n+ 9.36 8 9.18 8 9c0-1.1.9-2 2-2s2 .9 2 2c0 .18-.02.36-.07.52l2.55\n+ 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\n+`;\n+\n+const PATH_PROFILER = 'M5 9.2h3V19H5zM10.6 5h2.8v14h-2.8zm5.6 8H19v6h-2.8z';\n+\n+const PATH_SEARCH = `\n+ 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\n+ 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\n+ 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\n+`;\n+\n+const PATH_RANKED_CHART = 'M3 5h18v3H3zM3 10.5h13v3H3zM3 16h8v3H3z';\n+\n+const PATH_SETTINGS = `\n+ 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\n+ 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\n+ 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\n+ 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\n+ 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\n+ 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\n+ 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z\n+`;\ndiff --git a\/src\/devtools\/views\/ModalDialog.css b\/src\/devtools\/views\/ModalDialog.css\nnew file mode 100644\nindex 0000000000..378e8e73b4\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/ModalDialog.css\n@@ -0,0 +1,40 @@\n+.Background {\n+ position: absolute;\n+ width: 100%;\n+ height: 100%;\n+ display: flex;\n+ align-items: flex-start;\n+ justify-content: center;\n+ padding: 1rem;\n+ background-color: var(--color-modal-background);\n+ overflow: auto;\n+}\n+\n+.Dialog {\n+ position: relative;\n+ z-index: 3;\n+ width: 25rem;\n+ min-width: 20rem;\n+ max-width: 100%;\n+ display: inline-block;\n+ background-color: var(--color-background);\n+ box-shadow: 0 2px 4px var(--color-shadow);\n+ padding: 0.5rem;\n+ border: 1px solid var(--color-border);\n+ border-radius: 0.25rem;\n+ font-size: var(--font-size-sans-normal);\n+}\n+\n+.Title {\n+ font-size: var(--font-size-sans-large);\n+ margin-bottom: 0.5rem;\n+}\n+\n+.Buttons {\n+ text-align: right;\n+ margin-top: 0.5rem;\n+}\n+\n+.Button {\n+ font-size: var(--font-size-sans-large);\n+}\ndiff --git a\/src\/devtools\/views\/ModalDialog.js b\/src\/devtools\/views\/ModalDialog.js\nnew file mode 100644\nindex 0000000000..e8fd44c93a\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/ModalDialog.js\n@@ -0,0 +1,150 @@\n+\/\/ @flow\n+\n+import React, {\n+ createContext,\n+ useCallback,\n+ useContext,\n+ useMemo,\n+ useReducer,\n+ useRef,\n+} from 'react';\n+import Button from '.\/Button';\n+import { useModalDismissSignal } from '.\/hooks';\n+\n+import styles from '.\/ModalDialog.css';\n+\n+type DIALOG_ACTION_HIDE = {|\n+ type: 'HIDE',\n+|};\n+type DIALOG_ACTION_SHOW = {|\n+ type: 'SHOW',\n+ canBeDismissed?: boolean,\n+ content: React$Node,\n+ title?: React$Node | null,\n+|};\n+\n+type Action = DIALOG_ACTION_HIDE | DIALOG_ACTION_SHOW;\n+\n+type Dispatch = (action: Action) => void;\n+\n+type State = {|\n+ canBeDismissed: boolean,\n+ content: React$Node | null,\n+ isVisible: boolean,\n+ title: React$Node | null,\n+|};\n+\n+type ModalDialogContextType = {|\n+ ...State,\n+ dispatch: Dispatch,\n+|};\n+\n+const ModalDialogContext = createContext<ModalDialogContextType>(\n+ ((null: any): ModalDialogContextType)\n+);\n+ModalDialogContext.displayName = 'ModalDialogContext';\n+\n+function dialogReducer(state, action) {\n+ switch (action.type) {\n+ case 'HIDE':\n+ return {\n+ canBeDismissed: true,\n+ content: null,\n+ isVisible: false,\n+ title: null,\n+ };\n+ case 'SHOW':\n+ return {\n+ canBeDismissed: action.canBeDismissed !== false,\n+ content: action.content,\n+ isVisible: true,\n+ title: action.title || null,\n+ };\n+ default:\n+ throw new Error(`Invalid action \"${action.type}\"`);\n+ }\n+}\n+\n+type Props = {|\n+ children: React$Node,\n+|};\n+\n+function ModalDialogContextController({ children }: Props) {\n+ const [state, dispatch] = useReducer<State, Action>(dialogReducer, {\n+ canBeDismissed: true,\n+ content: null,\n+ isVisible: false,\n+ title: null,\n+ });\n+\n+ const value = useMemo<ModalDialogContextType>(\n+ () => ({\n+ canBeDismissed: state.canBeDismissed,\n+ content: state.content,\n+ isVisible: state.isVisible,\n+ title: state.title,\n+ dispatch,\n+ }),\n+ [state, dispatch]\n+ );\n+\n+ return (\n+ <ModalDialogContext.Provider value={value}>\n+ {children}\n+ <\/ModalDialogContext.Provider>\n+ );\n+}\n+\n+function ModalDialog(_: {||}) {\n+ const { isVisible } = useContext(ModalDialogContext);\n+ return isVisible ? <ModalDialogImpl \/> : null;\n+}\n+\n+function ModalDialogImpl(_: {||}) {\n+ const { canBeDismissed, content, dispatch, title } = useContext(\n+ ModalDialogContext\n+ );\n+ const dismissModal = useCallback(() => {\n+ if (canBeDismissed) {\n+ dispatch({ type: 'HIDE' });\n+ }\n+ }, [canBeDismissed, dispatch]);\n+ const dialogRef = useRef<HTMLDivElement | null>(null);\n+\n+ \/\/ It's important to trap click events within the dialog,\n+ \/\/ so the dismiss hook will use it for click hit detection.\n+ \/\/ Because multiple tabs may be showing this ModalDialog,\n+ \/\/ the normal `dialog.contains(target)` check would fail on a background tab.\n+ useModalDismissSignal(dialogRef, dismissModal, false);\n+\n+ \/\/ Clicks on the dialog should not bubble.\n+ \/\/ This way we can dismiss by listening to clicks on the background.\n+ const handleDialogClick = (event: any) => {\n+ event.stopPropagation();\n+\n+ \/\/ It is important that we don't also prevent default,\n+ \/\/ or clicks within the dialog (e.g. on links) won't work.\n+ };\n+\n+ return (\n+ <div className={styles.Background} onClick={dismissModal}>\n+ <div\n+ ref={dialogRef}\n+ className={styles.Dialog}\n+ onClick={handleDialogClick}\n+ >\n+ {title !== null && <div className={styles.Title}>{title}<\/div>}\n+ {content}\n+ {canBeDismissed && (\n+ <div className={styles.Buttons}>\n+ <Button autoFocus className={styles.Button} onClick={dismissModal}>\n+ Okay\n+ <\/Button>\n+ <\/div>\n+ )}\n+ <\/div>\n+ <\/div>\n+ );\n+}\n+\n+export { ModalDialog, ModalDialogContext, ModalDialogContextController };\ndiff --git a\/src\/devtools\/views\/Profiler\/ChartNode.css b\/src\/devtools\/views\/Profiler\/ChartNode.css\nnew file mode 100644\nindex 0000000000..3117ea1932\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/ChartNode.css\n@@ -0,0 +1,31 @@\n+.Group {\n+ transition: all ease-in-out 250ms;\n+}\n+\n+.Rect {\n+ cursor: pointer;\n+ stroke: var(--color-background);\n+ transition: all ease-in-out 250ms;\n+}\n+\n+.ForeignObject {\n+ pointer-events: none;\n+ transition: all ease-in-out 250ms;\n+}\n+\n+.Div {\n+ pointer-events: none;\n+ white-space: nowrap;\n+ text-overflow: ellipsis;\n+ overflow: hidden;\n+ font-family: var(--font-family-sans);\n+ font-size: var(--font-size-sans-normal);\n+ margin-left: 0.25rem;\n+ margin-right: 0.25rem;\n+ line-height: 1.5;\n+ padding: 0 0 0;\n+ font-weight: 400;\n+ color: var(--color-commit-gradient-text);\n+ text-align: left;\n+ transition: all ease-in-out 250ms;\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/ChartNode.js b\/src\/devtools\/views\/Profiler\/ChartNode.js\nnew file mode 100644\nindex 0000000000..a85f7702a3\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/ChartNode.js\n@@ -0,0 +1,68 @@\n+\/\/ @flow\n+\n+import React from 'react';\n+\n+import styles from '.\/ChartNode.css';\n+\n+type Props = {|\n+ color: string,\n+ height: number,\n+ isDimmed?: boolean,\n+ label: string,\n+ onClick: (event: SyntheticMouseEvent<*>) => mixed,\n+ onDoubleClick?: (event: SyntheticMouseEvent<*>) => mixed,\n+ placeLabelAboveNode?: boolean,\n+ textStyle?: Object,\n+ width: number,\n+ x: number,\n+ y: number,\n+|};\n+\n+const minWidthToDisplay = 35;\n+\n+export default function ChartNode({\n+ color,\n+ height,\n+ isDimmed = false,\n+ label,\n+ onClick,\n+ onDoubleClick,\n+ textStyle,\n+ width,\n+ x,\n+ y,\n+}: Props) {\n+ return (\n+ <g className={styles.Group} transform={`translate(${x},${y})`}>\n+ <title>{label}<\/title>\n+ <rect\n+ width={width}\n+ height={height}\n+ fill={color}\n+ onClick={onClick}\n+ onDoubleClick={onDoubleClick}\n+ className={styles.Rect}\n+ style={{\n+ opacity: isDimmed ? 0.5 : 1,\n+ }}\n+ \/>\n+ {width >= minWidthToDisplay && (\n+ <foreignObject\n+ width={width}\n+ height={height}\n+ className={styles.ForeignObject}\n+ style={{\n+ paddingLeft: x < 0 ? -x : 0,\n+ opacity: isDimmed ? 0.75 : 1,\n+ display: width < minWidthToDisplay ? 'none' : 'block',\n+ }}\n+ y={0}\n+ >\n+ <div className={styles.Div} style={textStyle}>\n+ {label}\n+ <\/div>\n+ <\/foreignObject>\n+ )}\n+ <\/g>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/ClearProfilingDataButton.js b\/src\/devtools\/views\/Profiler\/ClearProfilingDataButton.js\nnew file mode 100644\nindex 0000000000..d3223eb8de\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/ClearProfilingDataButton.js\n@@ -0,0 +1,25 @@\n+\/\/ @flow\n+\n+import React, { useCallback, useContext } from 'react';\n+import { ProfilerContext } from '.\/ProfilerContext';\n+import Button from '..\/Button';\n+import ButtonIcon from '..\/ButtonIcon';\n+import { StoreContext } from '..\/context';\n+\n+export default function ClearProfilingDataButton() {\n+ const store = useContext(StoreContext);\n+ const { didRecordCommits, isProfiling } = useContext(ProfilerContext);\n+ const { profilerStore } = store;\n+\n+ const clear = useCallback(() => profilerStore.clear(), [profilerStore]);\n+\n+ return (\n+ <Button\n+ disabled={isProfiling || !didRecordCommits}\n+ onClick={clear}\n+ title=\"Clear profiling data\"\n+ >\n+ <ButtonIcon type=\"clear\" \/>\n+ <\/Button>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/CommitFlamegraph.css b\/src\/devtools\/views\/Profiler\/CommitFlamegraph.css\nnew file mode 100644\nindex 0000000000..143f83b043\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/CommitFlamegraph.css\n@@ -0,0 +1,10 @@\n+.Container {\n+ width: 100%;\n+ flex: 1;\n+ padding: 0.5rem;\n+}\n+\n+.PatternPath {\n+ stroke: var(--color-commit-did-not-render-pattern);\n+ stroke-width: 1;\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/CommitFlamegraph.js b\/src\/devtools\/views\/Profiler\/CommitFlamegraph.js\nnew file mode 100644\nindex 0000000000..676a2f1334\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/CommitFlamegraph.js\n@@ -0,0 +1,164 @@\n+\/\/ @flow\n+\n+import React, { forwardRef, useCallback, useContext, useMemo } from 'react';\n+import AutoSizer from 'react-virtualized-auto-sizer';\n+import { FixedSizeList } from 'react-window';\n+import { ProfilerContext } from '.\/ProfilerContext';\n+import NoCommitData from '.\/NoCommitData';\n+import CommitFlamegraphListItem from '.\/CommitFlamegraphListItem';\n+import { scale } from '.\/utils';\n+import { StoreContext } from '..\/context';\n+import { SettingsContext } from '..\/Settings\/SettingsContext';\n+\n+import styles from '.\/CommitFlamegraph.css';\n+\n+import type { ChartData, ChartNode } from '.\/FlamegraphChartBuilder';\n+import type { CommitTree } from '.\/types';\n+\n+export type ItemData = {|\n+ chartData: ChartData,\n+ scaleX: (value: number, fallbackValue: number) => number,\n+ selectedChartNode: ChartNode | null,\n+ selectedChartNodeIndex: number,\n+ selectFiber: (id: number | null, name: string | null) => void,\n+ width: number,\n+|};\n+\n+export default function CommitFlamegraphAutoSizer(_: {||}) {\n+ const { profilerStore } = useContext(StoreContext);\n+ const { rootID, selectedCommitIndex, selectFiber } = useContext(\n+ ProfilerContext\n+ );\n+ const { profilingCache } = profilerStore;\n+\n+ const deselectCurrentFiber = useCallback(\n+ event => {\n+ event.stopPropagation();\n+ selectFiber(null, null);\n+ },\n+ [selectFiber]\n+ );\n+\n+ let commitTree: CommitTree | null = null;\n+ let chartData: ChartData | null = null;\n+ if (selectedCommitIndex !== null) {\n+ commitTree = profilingCache.getCommitTree({\n+ commitIndex: selectedCommitIndex,\n+ rootID: ((rootID: any): number),\n+ });\n+\n+ chartData = profilingCache.getFlamegraphChartData({\n+ commitIndex: selectedCommitIndex,\n+ commitTree,\n+ rootID: ((rootID: any): number),\n+ });\n+ }\n+\n+ if (commitTree != null && chartData != null && chartData.depth > 0) {\n+ return (\n+ <div className={styles.Container} onClick={deselectCurrentFiber}>\n+ <AutoSizer>\n+ {({ height, width }) => (\n+ \/\/ Force Flow types to avoid checking for `null` here because there's no static proof that\n+ \/\/ by the time this render prop function is called, the values of the `let` variables have not changed.\n+ <CommitFlamegraph\n+ chartData={((chartData: any): ChartData)}\n+ commitTree={((commitTree: any): CommitTree)}\n+ height={height}\n+ width={width}\n+ \/>\n+ )}\n+ <\/AutoSizer>\n+ <\/div>\n+ );\n+ } else {\n+ return <NoCommitData \/>;\n+ }\n+}\n+\n+type Props = {|\n+ chartData: ChartData,\n+ commitTree: CommitTree,\n+ height: number,\n+ width: number,\n+|};\n+\n+function CommitFlamegraph({ chartData, commitTree, height, width }: Props) {\n+ const { lineHeight } = useContext(SettingsContext);\n+ const { selectFiber, selectedFiberID } = useContext(ProfilerContext);\n+\n+ const selectedChartNodeIndex = useMemo<number>(() => {\n+ if (selectedFiberID === null) {\n+ return 0;\n+ }\n+ \/\/ The selected node might not be in the tree for this commit,\n+ \/\/ so it's important that we have a fallback plan.\n+ const depth = chartData.idToDepthMap.get(selectedFiberID);\n+ return depth !== undefined ? depth - 1 : 0;\n+ }, [chartData, selectedFiberID]);\n+\n+ const selectedChartNode = useMemo(() => {\n+ let chartNode = null;\n+ if (selectedFiberID !== null) {\n+ const foundChartNode = chartData.rows[selectedChartNodeIndex].find(\n+ chartNode => chartNode.id === selectedFiberID\n+ );\n+\n+ if (foundChartNode !== undefined) {\n+ chartNode = foundChartNode;\n+ }\n+ }\n+ return chartNode;\n+ }, [chartData, selectedFiberID, selectedChartNodeIndex]);\n+\n+ const itemData = useMemo<ItemData>(\n+ () => ({\n+ chartData,\n+ scaleX: scale(\n+ 0,\n+ selectedChartNode !== null\n+ ? selectedChartNode.treeBaseDuration\n+ : chartData.baseDuration,\n+ 0,\n+ width\n+ ),\n+ selectedChartNode,\n+ selectedChartNodeIndex,\n+ selectFiber,\n+ width,\n+ }),\n+ [chartData, selectedChartNode, selectedChartNodeIndex, selectFiber, width]\n+ );\n+\n+ return (\n+ <FixedSizeList\n+ height={height}\n+ innerElementType={InnerElementType}\n+ itemCount={chartData.depth}\n+ itemData={itemData}\n+ itemSize={lineHeight}\n+ width={width}\n+ >\n+ {CommitFlamegraphListItem}\n+ <\/FixedSizeList>\n+ );\n+}\n+\n+const InnerElementType = forwardRef(({ children, ...rest }, ref) => (\n+ <svg ref={ref} {...rest}>\n+ <defs>\n+ <pattern\n+ id=\"didNotRenderPattern\"\n+ patternUnits=\"userSpaceOnUse\"\n+ width=\"4\"\n+ height=\"4\"\n+ >\n+ <path\n+ d=\"M-1,1 l2,-2 M0,4 l4,-4 M3,5 l2,-2\"\n+ className={styles.PatternPath}\n+ \/>\n+ <\/pattern>\n+ <\/defs>\n+ {children}\n+ <\/svg>\n+));\ndiff --git a\/src\/devtools\/views\/Profiler\/CommitFlamegraphListItem.js b\/src\/devtools\/views\/Profiler\/CommitFlamegraphListItem.js\nnew file mode 100644\nindex 0000000000..00566d272b\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/CommitFlamegraphListItem.js\n@@ -0,0 +1,110 @@\n+\/\/ @flow\n+\n+import React, { Fragment, memo, useCallback, useContext } from 'react';\n+import { areEqual } from 'react-window';\n+import { barWidthThreshold } from '.\/constants';\n+import { getGradientColor } from '.\/utils';\n+import ChartNode from '.\/ChartNode';\n+import { SettingsContext } from '..\/Settings\/SettingsContext';\n+\n+import type { ItemData } from '.\/CommitFlamegraph';\n+\n+type Props = {\n+ data: ItemData,\n+ index: number,\n+ style: Object,\n+};\n+\n+function CommitFlamegraphListItem({ data, index, style }: Props) {\n+ const {\n+ chartData,\n+ scaleX,\n+ selectedChartNode,\n+ selectedChartNodeIndex,\n+ selectFiber,\n+ width,\n+ } = data;\n+ const { renderPathNodes, maxSelfDuration, rows } = chartData;\n+\n+ const { lineHeight } = useContext(SettingsContext);\n+ const handleClick = useCallback(\n+ (event: SyntheticMouseEvent<*>, id: number, name: string) => {\n+ event.stopPropagation();\n+ selectFiber(id, name);\n+ },\n+ [selectFiber]\n+ );\n+\n+ \/\/ List items are absolutely positioned using the CSS \"top\" attribute.\n+ \/\/ The \"left\" value will always be 0.\n+ \/\/ Since height is fixed, and width is based on the node's duration,\n+ \/\/ We can ignore those values as well.\n+ const top = parseInt(style.top, 10);\n+\n+ const row = rows[index];\n+\n+ let selectedNodeOffset = scaleX(\n+ selectedChartNode !== null ? selectedChartNode.offset : 0,\n+ width\n+ );\n+\n+ return (\n+ <Fragment>\n+ {row.map(chartNode => {\n+ const {\n+ didRender,\n+ id,\n+ label,\n+ name,\n+ offset,\n+ selfDuration,\n+ treeBaseDuration,\n+ } = chartNode;\n+\n+ const nodeOffset = scaleX(offset, width);\n+ const nodeWidth = scaleX(treeBaseDuration, width);\n+\n+ \/\/ Filter out nodes that are too small to see or click.\n+ \/\/ This also helps render large trees faster.\n+ if (nodeWidth < barWidthThreshold) {\n+ return null;\n+ }\n+\n+ \/\/ Filter out nodes that are outside of the horizontal window.\n+ if (\n+ nodeOffset + nodeWidth < selectedNodeOffset ||\n+ nodeOffset > selectedNodeOffset + width\n+ ) {\n+ return null;\n+ }\n+\n+ let color = 'url(#didNotRenderPattern)';\n+ let textColor = 'var(--color-commit-did-not-render-pattern-text)';\n+ if (didRender) {\n+ color = getGradientColor(selfDuration \/ maxSelfDuration);\n+ textColor = 'var(--color-commit-gradient-text)';\n+ } else if (renderPathNodes.has(id)) {\n+ color = 'var(--color-commit-did-not-render-fill)';\n+ textColor = 'var(--color-commit-did-not-render-fill-text)';\n+ }\n+\n+ return (\n+ <ChartNode\n+ color={color}\n+ height={lineHeight}\n+ isDimmed={index < selectedChartNodeIndex}\n+ key={id}\n+ label={label}\n+ onClick={event => handleClick(event, id, name)}\n+ textStyle={{ color: textColor }}\n+ width={nodeWidth}\n+ x={nodeOffset - selectedNodeOffset}\n+ y={top}\n+ \/>\n+ );\n+ })}\n+ <\/Fragment>\n+ );\n+}\n+\n+export default memo<Props>(CommitFlamegraphListItem, areEqual);\ndiff --git a\/src\/devtools\/views\/Profiler\/CommitRanked.css b\/src\/devtools\/views\/Profiler\/CommitRanked.css\nnew file mode 100644\nindex 0000000000..c226f30486\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/CommitRanked.css\n@@ -0,0 +1,5 @@\n+.Container {\n+ width: 100%;\n+ flex: 1;\n+ padding: 0.5rem;\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/CommitRanked.js b\/src\/devtools\/views\/Profiler\/CommitRanked.js\nnew file mode 100644\nindex 0000000000..379dab481d\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/CommitRanked.js\n@@ -0,0 +1,130 @@\n+\/\/ @flow\n+\n+import React, { useCallback, useContext, useMemo } from 'react';\n+import AutoSizer from 'react-virtualized-auto-sizer';\n+import { FixedSizeList } from 'react-window';\n+import { ProfilerContext } from '.\/ProfilerContext';\n+import NoCommitData from '.\/NoCommitData';\n+import CommitRankedListItem from '.\/CommitRankedListItem';\n+import { scale } from '.\/utils';\n+import { StoreContext } from '..\/context';\n+import { SettingsContext } from '..\/Settings\/SettingsContext';\n+\n+import styles from '.\/CommitRanked.css';\n+\n+import type { ChartData } from '.\/RankedChartBuilder';\n+import type { CommitTree } from '.\/types';\n+\n+export type ItemData = {|\n+ chartData: ChartData,\n+ scaleX: (value: number, fallbackValue: number) => number,\n+ selectedFiberID: number | null,\n+ selectedFiberIndex: number,\n+ selectFiber: (id: number | null, name: string | null) => void,\n+ width: number,\n+|};\n+\n+export default function CommitRankedAutoSizer(_: {||}) {\n+ const { profilerStore } = useContext(StoreContext);\n+ const { rootID, selectedCommitIndex, selectFiber } = useContext(\n+ ProfilerContext\n+ );\n+ const { profilingCache } = profilerStore;\n+\n+ const deselectCurrentFiber = useCallback(\n+ event => {\n+ event.stopPropagation();\n+ selectFiber(null, null);\n+ },\n+ [selectFiber]\n+ );\n+\n+ let commitTree: CommitTree | null = null;\n+ let chartData: ChartData | null = null;\n+ if (selectedCommitIndex !== null) {\n+ commitTree = profilingCache.getCommitTree({\n+ commitIndex: selectedCommitIndex,\n+ rootID: ((rootID: any): number),\n+ });\n+\n+ chartData = profilingCache.getRankedChartData({\n+ commitIndex: selectedCommitIndex,\n+ commitTree,\n+ rootID: ((rootID: any): number),\n+ });\n+ }\n+\n+ if (commitTree != null && chartData != null && chartData.nodes.length > 0) {\n+ return (\n+ <div className={styles.Container} onClick={deselectCurrentFiber}>\n+ <AutoSizer>\n+ {({ height, width }) => (\n+ <CommitRanked\n+ chartData={((chartData: any): ChartData)}\n+ commitTree={((commitTree: any): CommitTree)}\n+ height={height}\n+ width={width}\n+ \/>\n+ )}\n+ <\/AutoSizer>\n+ <\/div>\n+ );\n+ } else {\n+ return <NoCommitData \/>;\n+ }\n+}\n+\n+type Props = {|\n+ chartData: ChartData,\n+ commitTree: CommitTree,\n+ height: number,\n+ width: number,\n+|};\n+\n+function CommitRanked({ chartData, commitTree, height, width }: Props) {\n+ const { lineHeight } = useContext(SettingsContext);\n+ const { selectedFiberID, selectFiber } = useContext(ProfilerContext);\n+\n+ const selectedFiberIndex = useMemo(\n+ () => getNodeIndex(chartData, selectedFiberID),\n+ [chartData, selectedFiberID]\n+ );\n+\n+ const itemData = useMemo<ItemData>(\n+ () => ({\n+ chartData,\n+ scaleX: scale(0, chartData.nodes[selectedFiberIndex].value, 0, width),\n+ selectedFiberID,\n+ selectedFiberIndex,\n+ selectFiber,\n+ width,\n+ }),\n+ [chartData, selectedFiberID, selectedFiberIndex, selectFiber, width]\n+ );\n+\n+ return (\n+ <FixedSizeList\n+ height={height}\n+ innerElementType=\"svg\"\n+ itemCount={chartData.nodes.length}\n+ itemData={itemData}\n+ itemSize={lineHeight}\n+ width={width}\n+ >\n+ {CommitRankedListItem}\n+ <\/FixedSizeList>\n+ );\n+}\n+\n+const getNodeIndex = (chartData: ChartData, id: number | null): number => {\n+ if (id === null) {\n+ return 0;\n+ }\n+ const { nodes } = chartData;\n+ for (let index = 0; index < nodes.length; index++) {\n+ if (nodes[index].id === id) {\n+ return index;\n+ }\n+ }\n+ return 0;\n+};\ndiff --git a\/src\/devtools\/views\/Profiler\/CommitRankedListItem.js b\/src\/devtools\/views\/Profiler\/CommitRankedListItem.js\nnew file mode 100644\nindex 0000000000..5a25b3c49d\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/CommitRankedListItem.js\n@@ -0,0 +1,54 @@\n+\/\/ @flow\n+\n+import React, { memo, useCallback, useContext } from 'react';\n+import { areEqual } from 'react-window';\n+import { minBarWidth } from '.\/constants';\n+import { getGradientColor } from '.\/utils';\n+import ChartNode from '.\/ChartNode';\n+import { SettingsContext } from '..\/Settings\/SettingsContext';\n+\n+import type { ItemData } from '.\/CommitRanked';\n+\n+type Props = {\n+ data: ItemData,\n+ index: number,\n+ style: Object,\n+};\n+\n+function CommitRankedListItem({ data, index, style }: Props) {\n+ const { chartData, scaleX, selectedFiberIndex, selectFiber, width } = data;\n+\n+ const node = chartData.nodes[index];\n+\n+ const { lineHeight } = useContext(SettingsContext);\n+\n+ const handleClick = useCallback(\n+ event => {\n+ event.stopPropagation();\n+ selectFiber(node.id, node.name);\n+ },\n+ [node, selectFiber]\n+ );\n+\n+ \/\/ List items are absolutely positioned using the CSS \"top\" attribute.\n+ \/\/ The \"left\" value will always be 0.\n+ \/\/ Since height is fixed, and width is based on the node's duration,\n+ \/\/ We can ignore those values as well.\n+ const top = parseInt(style.top, 10);\n+\n+ return (\n+ <ChartNode\n+ color={getGradientColor(node.value \/ chartData.maxValue)}\n+ height={lineHeight}\n+ isDimmed={index < selectedFiberIndex}\n+ key={node.id}\n+ label={node.label}\n+ onClick={handleClick}\n+ width={Math.max(minBarWidth, scaleX(node.value, width))}\n+ x={0}\n+ y={top}\n+ \/>\n+ );\n+}\n+\n+export default memo<Props>(CommitRankedListItem, areEqual);\ndiff --git a\/src\/devtools\/views\/Profiler\/CommitTreeBuilder.js b\/src\/devtools\/views\/Profiler\/CommitTreeBuilder.js\nnew file mode 100644\nindex 0000000000..d805f92b1c\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/CommitTreeBuilder.js\n@@ -0,0 +1,363 @@\n+\/\/ @flow\n+\n+import {\n+ __DEBUG__,\n+ TREE_OPERATION_ADD,\n+ TREE_OPERATION_REMOVE,\n+ TREE_OPERATION_REORDER_CHILDREN,\n+ TREE_OPERATION_UPDATE_TREE_BASE_DURATION,\n+} from 'src\/constants';\n+import { utfDecodeString } from 'src\/utils';\n+import { ElementTypeRoot } from 'src\/types';\n+import ProfilerStore from 'src\/devtools\/ProfilerStore';\n+\n+import type { ElementType } from 'src\/types';\n+import type {\n+ CommitTree,\n+ CommitTreeNode,\n+ ProfilingDataForRootFrontend,\n+} from 'src\/devtools\/views\/Profiler\/types';\n+\n+const debug = (methodName, ...args) => {\n+ if (__DEBUG__) {\n+ console.log(\n+ `%cCommitTreeBuilder %c${methodName}`,\n+ 'color: pink; font-weight: bold;',\n+ 'font-weight: bold;',\n+ ...args\n+ );\n+ }\n+};\n+\n+const rootToCommitTreeMap: Map<number, Array<CommitTree>> = new Map();\n+\n+export function getCommitTree({\n+ commitIndex,\n+ profilerStore,\n+ rootID,\n+}: {|\n+ commitIndex: number,\n+ profilerStore: ProfilerStore,\n+ rootID: number,\n+|}): CommitTree {\n+ if (!rootToCommitTreeMap.has(rootID)) {\n+ rootToCommitTreeMap.set(rootID, []);\n+ }\n+\n+ const commitTrees = ((rootToCommitTreeMap.get(\n+ rootID\n+ ): any): Array<CommitTree>);\n+\n+ if (commitIndex < commitTrees.length) {\n+ return commitTrees[commitIndex];\n+ }\n+\n+ const { profilingData } = profilerStore;\n+ if (profilingData === null) {\n+ throw Error(`No profiling data available`);\n+ }\n+\n+ const dataForRoot = profilingData.dataForRoots.get(rootID);\n+ if (dataForRoot == null) {\n+ throw Error(`Could not find profiling data for root \"${rootID}\"`);\n+ }\n+\n+ const { operations } = dataForRoot;\n+\n+ \/\/ Commits are generated sequentially and cached.\n+ \/\/ If this is the very first commit, start with the cached snapshot and apply the first mutation.\n+ \/\/ Otherwise load (or generate) the previous commit and append a mutation to it.\n+ if (commitIndex === 0) {\n+ const nodes = new Map();\n+\n+ \/\/ Construct the initial tree.\n+ recursivelyInitializeTree(rootID, 0, nodes, dataForRoot);\n+\n+ \/\/ Mutate the tree\n+ if (operations != null && commitIndex < operations.length) {\n+ const commitTree = updateTree({ nodes, rootID }, operations[commitIndex]);\n+\n+ if (__DEBUG__) {\n+ __printTree(commitTree);\n+ }\n+\n+ commitTrees.push(commitTree);\n+ return commitTree;\n+ }\n+ } else {\n+ const previousCommitTree = getCommitTree({\n+ commitIndex: commitIndex - 1,\n+ profilerStore,\n+ rootID,\n+ });\n+\n+ if (operations != null && commitIndex < operations.length) {\n+ const commitTree = updateTree(\n+ previousCommitTree,\n+ operations[commitIndex]\n+ );\n+\n+ if (__DEBUG__) {\n+ __printTree(commitTree);\n+ }\n+\n+ commitTrees.push(commitTree);\n+ return commitTree;\n+ }\n+ }\n+\n+ throw Error(\n+ `getCommitTree(): Unable to reconstruct tree for root \"${rootID}\" and commit ${commitIndex}`\n+ );\n+}\n+\n+function recursivelyInitializeTree(\n+ id: number,\n+ parentID: number,\n+ nodes: Map<number, CommitTreeNode>,\n+ dataForRoot: ProfilingDataForRootFrontend\n+): void {\n+ const node = dataForRoot.snapshots.get(id);\n+ if (node != null) {\n+ nodes.set(id, {\n+ id,\n+ children: node.children,\n+ displayName: node.displayName,\n+ key: node.key,\n+ parentID,\n+ treeBaseDuration: ((dataForRoot.initialTreeBaseDurations.get(\n+ id\n+ ): any): number),\n+ type: node.type,\n+ });\n+\n+ node.children.forEach(childID =>\n+ recursivelyInitializeTree(childID, id, nodes, dataForRoot)\n+ );\n+ }\n+}\n+\n+function updateTree(\n+ commitTree: CommitTree,\n+ operations: Array<number>\n+): CommitTree {\n+ \/\/ Clone the original tree so edits don't affect it.\n+ const nodes = new Map(commitTree.nodes);\n+\n+ \/\/ Clone nodes before mutating them so edits don't affect them.\n+ const getClonedNode = (id: number): CommitTreeNode => {\n+ const clonedNode = ((Object.assign(\n+ {},\n+ nodes.get(id)\n+ ): any): CommitTreeNode);\n+ nodes.set(id, clonedNode);\n+ return clonedNode;\n+ };\n+\n+ let i = 2;\n+\n+ \/\/ Reassemble the string table.\n+ const stringTable = [\n+ null, \/\/ ID = 0 corresponds to the null string.\n+ ];\n+ const stringTableSize = operations[i++];\n+ const stringTableEnd = i + stringTableSize;\n+ while (i < stringTableEnd) {\n+ const nextLength = operations[i++];\n+ const nextString = utfDecodeString(\n+ (operations.slice(i, i + nextLength): any)\n+ );\n+ stringTable.push(nextString);\n+ i += nextLength;\n+ }\n+\n+ while (i < operations.length) {\n+ const operation = operations[i];\n+\n+ switch (operation) {\n+ case TREE_OPERATION_ADD:\n+ const id = ((operations[i + 1]: any): number);\n+ const type = ((operations[i + 2]: any): ElementType);\n+\n+ i = i + 3;\n+\n+ if (nodes.has(id)) {\n+ throw new Error(\n+ 'Commit tree already contains fiber ' +\n+ id +\n+ '. This is a bug in React DevTools.'\n+ );\n+ }\n+\n+ if (type === ElementTypeRoot) {\n+ i++; \/\/ supportsProfiling flag\n+ i++; \/\/ hasOwnerMetadata flag\n+\n+ if (__DEBUG__) {\n+ debug('Add', `new root fiber ${id}`);\n+ }\n+\n+ const node: CommitTreeNode = {\n+ children: [],\n+ displayName: null,\n+ id,\n+ key: null,\n+ parentID: 0,\n+ treeBaseDuration: 0, \/\/ This will be updated by a subsequent operation\n+ type,\n+ };\n+\n+ nodes.set(id, node);\n+ } else {\n+ const parentID = ((operations[i]: any): number);\n+ i++;\n+\n+ i++; \/\/ ownerID\n+\n+ const displayNameStringID = operations[i];\n+ const displayName = stringTable[displayNameStringID];\n+ i++;\n+\n+ const keyStringID = operations[i];\n+ const key = stringTable[keyStringID];\n+ i++;\n+\n+ if (__DEBUG__) {\n+ debug(\n+ 'Add',\n+ `fiber ${id} (${displayName || 'null'}) as child of ${parentID}`\n+ );\n+ }\n+\n+ const parentNode = getClonedNode(parentID);\n+ parentNode.children = parentNode.children.concat(id);\n+\n+ const node: CommitTreeNode = {\n+ children: [],\n+ displayName,\n+ id,\n+ key,\n+ parentID,\n+ treeBaseDuration: 0, \/\/ This will be updated by a subsequent operation\n+ type,\n+ };\n+\n+ nodes.set(id, node);\n+ }\n+\n+ break;\n+ case TREE_OPERATION_REMOVE: {\n+ const removeLength = ((operations[i + 1]: any): number);\n+ i = i + 2;\n+\n+ for (let removeIndex = 0; removeIndex < removeLength; removeIndex++) {\n+ const id = ((operations[i]: any): number);\n+ i = i + 1;\n+\n+ if (!nodes.has(id)) {\n+ throw new Error(\n+ 'Commit tree does not contain fiber ' +\n+ id +\n+ '. This is a bug in React DevTools.'\n+ );\n+ }\n+\n+ const node = getClonedNode(id);\n+ const parentID = node.parentID;\n+\n+ nodes.delete(id);\n+\n+ if (!nodes.has(parentID)) {\n+ \/\/ No-op\n+ } else {\n+ const parentNode = getClonedNode(parentID);\n+\n+ if (__DEBUG__) {\n+ debug('Remove', `fiber ${id} from parent ${parentID}`);\n+ }\n+\n+ parentNode.children = parentNode.children.filter(\n+ childID => childID !== id\n+ );\n+ }\n+ }\n+ break;\n+ }\n+ case TREE_OPERATION_REORDER_CHILDREN: {\n+ const id = ((operations[i + 1]: any): number);\n+ const numChildren = ((operations[i + 2]: any): number);\n+ const children = ((operations.slice(\n+ i + 3,\n+ i + 3 + numChildren\n+ ): any): Array<number>);\n+\n+ i = i + 3 + numChildren;\n+\n+ if (__DEBUG__) {\n+ debug('Re-order', `fiber ${id} children ${children.join(',')}`);\n+ }\n+\n+ const node = getClonedNode(id);\n+ node.children = Array.from(children);\n+\n+ break;\n+ }\n+ case TREE_OPERATION_UPDATE_TREE_BASE_DURATION: {\n+ const id = operations[i + 1];\n+\n+ const node = getClonedNode(id);\n+ node.treeBaseDuration = operations[i + 2] \/ 1000; \/\/ Convert microseconds back to milliseconds;\n+\n+ if (__DEBUG__) {\n+ debug(\n+ 'Update',\n+ `fiber ${id} treeBaseDuration to ${node.treeBaseDuration}`\n+ );\n+ }\n+\n+ i = i + 3;\n+ break;\n+ }\n+ default:\n+ throw Error(`Unsupported Bridge operation ${operation}`);\n+ }\n+ }\n+\n+ return {\n+ nodes,\n+ rootID: commitTree.rootID,\n+ };\n+}\n+\n+export function invalidateCommitTrees(): void {\n+ rootToCommitTreeMap.clear();\n+}\n+\n+\/\/ DEBUG\n+const __printTree = (commitTree: CommitTree) => {\n+ if (__DEBUG__) {\n+ const { nodes, rootID } = commitTree;\n+ console.group('__printTree()');\n+ const queue = [rootID, 0];\n+ while (queue.length > 0) {\n+ const id = queue.shift();\n+ const depth = queue.shift();\n+\n+ const node = nodes.get(id);\n+ if (node == null) {\n+ throw Error(`Could not find node with id \"${id}\" in commit tree`);\n+ }\n+\n+ console.log(\n+ `${'•'.repeat(depth)}${node.id}:${node.displayName || ''} ${\n+ node.key ? `key:\"${node.key}\"` : ''\n+ } (${node.treeBaseDuration})`\n+ );\n+\n+ node.children.forEach(childID => {\n+ queue.push(childID, depth + 1);\n+ });\n+ }\n+ console.groupEnd();\n+ }\n+};\ndiff --git a\/src\/devtools\/views\/Profiler\/FlamegraphChartBuilder.js b\/src\/devtools\/views\/Profiler\/FlamegraphChartBuilder.js\nnew file mode 100644\nindex 0000000000..9530febfc7\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/FlamegraphChartBuilder.js\n@@ -0,0 +1,179 @@\n+\/\/ @flow\n+\n+import { ElementTypeForwardRef, ElementTypeMemo } from 'src\/types';\n+import { formatDuration } from '.\/utils';\n+import ProfilerStore from 'src\/devtools\/ProfilerStore';\n+\n+import type { CommitTree } from '.\/types';\n+\n+export type ChartNode = {|\n+ actualDuration: number,\n+ didRender: boolean,\n+ id: number,\n+ label: string,\n+ name: string,\n+ offset: number,\n+ selfDuration: number,\n+ treeBaseDuration: number,\n+|};\n+\n+export type ChartData = {|\n+ baseDuration: number,\n+ depth: number,\n+ idToDepthMap: Map<number, number>,\n+ maxSelfDuration: number,\n+ renderPathNodes: Set<number>,\n+ rows: Array<Array<ChartNode>>,\n+|};\n+\n+const cachedChartData: Map<string, ChartData> = new Map();\n+\n+export function getChartData({\n+ commitIndex,\n+ commitTree,\n+ profilerStore,\n+ rootID,\n+}: {|\n+ commitIndex: number,\n+ commitTree: CommitTree,\n+ profilerStore: ProfilerStore,\n+ rootID: number,\n+|}): ChartData {\n+ const commitDatum = profilerStore.getCommitData(rootID, commitIndex);\n+\n+ const { fiberActualDurations, fiberSelfDurations } = commitDatum;\n+ const { nodes } = commitTree;\n+\n+ const key = `${rootID}-${commitIndex}`;\n+ if (cachedChartData.has(key)) {\n+ return ((cachedChartData.get(key): any): ChartData);\n+ }\n+\n+ const idToDepthMap: Map<number, number> = new Map();\n+ const renderPathNodes: Set<number> = new Set();\n+ const rows: Array<Array<ChartNode>> = [];\n+\n+ let maxDepth = 0;\n+ let maxSelfDuration = 0;\n+\n+ \/\/ Generate flame graph structure using tree base durations.\n+ const walkTree = (id: number, rightOffset: number, currentDepth: number) => {\n+ idToDepthMap.set(id, currentDepth);\n+\n+ const node = nodes.get(id);\n+ if (node == null) {\n+ throw Error(`Could not find node with id \"${id}\" in commit tree`);\n+ }\n+\n+ const { children, displayName, key, treeBaseDuration, type } = node;\n+\n+ const actualDuration = fiberActualDurations.get(id) || 0;\n+ const selfDuration = fiberSelfDurations.get(id) || 0;\n+ const didRender = fiberActualDurations.has(id);\n+\n+ const name = displayName || 'Anonymous';\n+ const maybeKey = key !== null ? ` key=\"${key}\"` : '';\n+\n+ let maybeBadge = '';\n+ if (type === ElementTypeForwardRef) {\n+ maybeBadge = ' (ForwardRef)';\n+ } else if (type === ElementTypeMemo) {\n+ maybeBadge = ' (Memo)';\n+ }\n+\n+ let label = `${name}${maybeBadge}${maybeKey}`;\n+ if (didRender) {\n+ label += ` (${formatDuration(selfDuration)}ms of ${formatDuration(\n+ actualDuration\n+ )}ms)`;\n+ }\n+\n+ maxDepth = Math.max(maxDepth, currentDepth);\n+ maxSelfDuration = Math.max(maxSelfDuration, selfDuration);\n+\n+ const chartNode: ChartNode = {\n+ actualDuration,\n+ didRender,\n+ id,\n+ label,\n+ name,\n+ offset: rightOffset - treeBaseDuration,\n+ selfDuration,\n+ treeBaseDuration,\n+ };\n+\n+ if (currentDepth > rows.length) {\n+ rows.push([chartNode]);\n+ } else {\n+ rows[currentDepth - 1].push(chartNode);\n+ }\n+\n+ for (let i = children.length - 1; i >= 0; i--) {\n+ const childID = children[i];\n+ const childChartNode = walkTree(childID, rightOffset, currentDepth + 1);\n+ rightOffset -= childChartNode.treeBaseDuration;\n+ }\n+\n+ return chartNode;\n+ };\n+\n+ let baseDuration = 0;\n+\n+ \/\/ Special case to handle unmounted roots.\n+ if (nodes.size > 0) {\n+ \/\/ Skip over the root; we don't want to show it in the flamegraph.\n+ const root = nodes.get(rootID);\n+ if (root == null) {\n+ throw Error(\n+ `Could not find root node with id \"${rootID}\" in commit tree`\n+ );\n+ }\n+\n+ \/\/ Don't assume a single root.\n+ \/\/ Component filters or Fragments might lead to multiple \"roots\" in a flame graph.\n+ for (let i = root.children.length - 1; i >= 0; i--) {\n+ const id = root.children[i];\n+ const node = nodes.get(id);\n+ if (node == null) {\n+ throw Error(`Could not find node with id \"${id}\" in commit tree`);\n+ }\n+ baseDuration += node.treeBaseDuration;\n+ walkTree(id, baseDuration, 1);\n+ }\n+\n+ fiberActualDurations.forEach((duration, id) => {\n+ const node = nodes.get(id);\n+ if (node != null) {\n+ let currentID = node.parentID;\n+ while (currentID !== 0) {\n+ if (renderPathNodes.has(currentID)) {\n+ \/\/ We've already walked this path; we can skip it.\n+ break;\n+ } else {\n+ renderPathNodes.add(currentID);\n+ }\n+\n+ const node = nodes.get(currentID);\n+ currentID = node != null ? node.parentID : 0;\n+ }\n+ }\n+ });\n+ }\n+\n+ const chartData = {\n+ baseDuration,\n+ depth: maxDepth,\n+ idToDepthMap,\n+ maxSelfDuration,\n+ renderPathNodes,\n+ rows,\n+ };\n+\n+ cachedChartData.set(key, chartData);\n+\n+ return chartData;\n+}\n+\n+export function invalidateChartData(): void {\n+ cachedChartData.clear();\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/InteractionListItem.css b\/src\/devtools\/views\/Profiler\/InteractionListItem.css\nnew file mode 100644\nindex 0000000000..62784d3333\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/InteractionListItem.css\n@@ -0,0 +1,43 @@\n+.Interaction,\n+.SelectedInteraction {\n+ display: flex;\n+ align-items: center;\n+ padding: 0 0.25rem;\n+ border-bottom: 1px solid var(--color-border);\n+}\n+\n+.Interaction:hover {\n+ background-color: var(--color-background-hover);\n+}\n+\n+.SelectedInteraction {\n+ background-color: var(--color-background-hover);\n+}\n+\n+.Name {\n+ white-space: nowrap;\n+ overflow-x: hidden;\n+ text-overflow: ellipsis;\n+}\n+\n+.Timeline {\n+ position: relative;\n+ height: 100%;\n+}\n+\n+.InteractionLine {\n+ position: absolute;\n+ height: 3px;\n+ background-color: var(--color-commit-did-not-render-fill);\n+ color: var(--color-commit-did-not-render-fill-text);\n+ border-radius: 0.125rem;\n+}\n+\n+.CommitBox {\n+ position: absolute;\n+ width: var(--interaction-commit-size);\n+ height: var(--interaction-commit-size);\n+ background-color: var(--color-commit-did-not-render-fill);\n+ color: var(--color-commit-did-not-render-fill-text);\n+ cursor: pointer;\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/InteractionListItem.js b\/src\/devtools\/views\/Profiler\/InteractionListItem.js\nnew file mode 100644\nindex 0000000000..4e6d8c746b\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/InteractionListItem.js\n@@ -0,0 +1,98 @@\n+\/\/ @flow\n+\n+import React, { memo, useCallback } from 'react';\n+import { areEqual } from 'react-window';\n+import { getGradientColor } from '.\/utils';\n+\n+import styles from '.\/InteractionListItem.css';\n+\n+import type { ItemData } from '.\/Interactions';\n+\n+type Props = {\n+ data: ItemData,\n+ index: number,\n+ style: Object,\n+};\n+\n+function InteractionListItem({ data: itemData, index, style }: Props) {\n+ const {\n+ chartData,\n+ dataForRoot,\n+ labelWidth,\n+ scaleX,\n+ selectedInteractionID,\n+ selectCommitIndex,\n+ selectInteraction,\n+ selectTab,\n+ } = itemData;\n+\n+ const { commitData, interactionCommits } = dataForRoot;\n+ const { interactions, lastInteractionTime, maxCommitDuration } = chartData;\n+\n+ const interaction = interactions[index];\n+ if (interaction == null) {\n+ throw Error(`Could not find interaction #${index}`);\n+ }\n+\n+ const handleClick = useCallback(() => {\n+ selectInteraction(interaction.id);\n+ }, [interaction, selectInteraction]);\n+\n+ const commits = interactionCommits.get(interaction.id) || [];\n+\n+ const startTime = interaction.timestamp;\n+ const stopTime = lastInteractionTime;\n+\n+ const viewCommit = (commitIndex: number) => {\n+ selectTab('flame-chart');\n+ selectCommitIndex(commitIndex);\n+ };\n+\n+ return (\n+ <div\n+ className={\n+ selectedInteractionID === interaction.id\n+ ? styles.SelectedInteraction\n+ : styles.Interaction\n+ }\n+ onClick={handleClick}\n+ style={style}\n+ >\n+ <div\n+ className={styles.Name}\n+ style={{ maxWidth: labelWidth }}\n+ title={interaction.name}\n+ >\n+ {interaction.name}\n+ <\/div>\n+ <div\n+ className={styles.InteractionLine}\n+ style={{\n+ left: labelWidth + scaleX(startTime, 0),\n+ width: scaleX(stopTime - startTime, 0),\n+ }}\n+ \/>\n+ {commits.map(commitIndex => (\n+ <div\n+ className={styles.CommitBox}\n+ key={commitIndex}\n+ onClick={() => viewCommit(commitIndex)}\n+ style={{\n+ backgroundColor: getGradientColor(\n+ Math.min(\n+ 1,\n+ Math.max(\n+ 0,\n+ commitData[commitIndex].duration \/ maxCommitDuration\n+ )\n+ ) || 0\n+ ),\n+ left: labelWidth + scaleX(commitData[commitIndex].timestamp, 0),\n+ }}\n+ \/>\n+ ))}\n+ <\/div>\n+ );\n+}\n+\n+export default memo<Props>(InteractionListItem, areEqual);\ndiff --git a\/src\/devtools\/views\/Profiler\/Interactions.css b\/src\/devtools\/views\/Profiler\/Interactions.css\nnew file mode 100644\nindex 0000000000..81fd9da918\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/Interactions.css\n@@ -0,0 +1,9 @@\n+.Container {\n+ width: 100%;\n+ flex: 1;\n+ padding: 0.5rem;\n+}\n+\n+.FocusTarget:focus {\n+ outline: none;\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/Interactions.js b\/src\/devtools\/views\/Profiler\/Interactions.js\nnew file mode 100644\nindex 0000000000..1ec5597603\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/Interactions.js\n@@ -0,0 +1,139 @@\n+\/\/ @flow\n+\n+import React, { useCallback, useContext, useMemo } from 'react';\n+import AutoSizer from 'react-virtualized-auto-sizer';\n+import { FixedSizeList } from 'react-window';\n+import { ProfilerContext } from '.\/ProfilerContext';\n+import InteractionListItem from '.\/InteractionListItem';\n+import NoInteractions from '.\/NoInteractions';\n+import { StoreContext } from '..\/context';\n+import { scale } from '.\/utils';\n+\n+import styles from '.\/Interactions.css';\n+\n+import type { ProfilingDataForRootFrontend } from '.\/types';\n+import type { ChartData } from '.\/InteractionsChartBuilder';\n+import type { TabID } from '.\/ProfilerContext';\n+\n+export type ItemData = {|\n+ chartData: ChartData,\n+ dataForRoot: ProfilingDataForRootFrontend,\n+ labelWidth: number,\n+ scaleX: (value: number, fallbackValue: number) => number,\n+ selectedInteractionID: number | null,\n+ selectCommitIndex: (id: number | null) => void,\n+ selectInteraction: (id: number | null) => void,\n+ selectTab: (id: TabID) => void,\n+|};\n+\n+export default function InteractionsAutoSizer(_: {||}) {\n+ return (\n+ <div className={styles.Container}>\n+ <AutoSizer>\n+ {({ height, width }) => <Interactions height={height} width={width} \/>}\n+ <\/AutoSizer>\n+ <\/div>\n+ );\n+}\n+\n+function Interactions({ height, width }: {| height: number, width: number |}) {\n+ const {\n+ rootID,\n+ selectedInteractionID,\n+ selectInteraction,\n+ selectCommitIndex,\n+ selectTab,\n+ } = useContext(ProfilerContext);\n+ const { profilerStore } = useContext(StoreContext);\n+ const { profilingCache } = profilerStore;\n+\n+ const dataForRoot = profilerStore.getDataForRoot(((rootID: any): number));\n+\n+ const chartData = profilingCache.getInteractionsChartData({\n+ rootID: ((rootID: any): number),\n+ });\n+\n+ const { interactions } = chartData;\n+\n+ const handleKeyDown = useCallback(\n+ event => {\n+ let index;\n+ switch (event.key) {\n+ case 'ArrowDown':\n+ index = interactions.findIndex(\n+ interaction => interaction.id === selectedInteractionID\n+ );\n+ selectInteraction(Math.min(interactions.length - 1, index + 1));\n+ event.stopPropagation();\n+ break;\n+ case 'ArrowUp':\n+ index = interactions.findIndex(\n+ interaction => interaction.id === selectedInteractionID\n+ );\n+ selectInteraction(Math.max(0, index - 1));\n+ event.stopPropagation();\n+ break;\n+ default:\n+ break;\n+ }\n+ },\n+ [interactions, selectedInteractionID, selectInteraction]\n+ );\n+\n+ const itemData = useMemo<ItemData>(() => {\n+ const interactionCommitSize = parseInt(\n+ getComputedStyle((document.body: any)).getPropertyValue(\n+ '--interaction-commit-size'\n+ ),\n+ 10\n+ );\n+ const interactionLabelWidth = parseInt(\n+ getComputedStyle((document.body: any)).getPropertyValue(\n+ '--interaction-label-width'\n+ ),\n+ 10\n+ );\n+\n+ const labelWidth = Math.min(interactionLabelWidth, width \/ 5);\n+ const timelineWidth = width - labelWidth - interactionCommitSize;\n+\n+ return {\n+ chartData,\n+ dataForRoot,\n+ labelWidth,\n+ scaleX: scale(0, chartData.lastInteractionTime, 0, timelineWidth),\n+ selectedInteractionID,\n+ selectCommitIndex,\n+ selectInteraction,\n+ selectTab,\n+ };\n+ }, [\n+ chartData,\n+ dataForRoot,\n+ selectedInteractionID,\n+ selectCommitIndex,\n+ selectInteraction,\n+ selectTab,\n+ width,\n+ ]);\n+\n+ \/\/ If a commit contains no fibers with an actualDuration > 0,\n+ \/\/ Display a fallback message.\n+ if (interactions.length === 0) {\n+ return <NoInteractions height={height} width={width} \/>;\n+ }\n+\n+ return (\n+ <div className={styles.FocusTarget} onKeyDown={handleKeyDown} tabIndex={0}>\n+ <FixedSizeList\n+ height={height}\n+ itemCount={interactions.length}\n+ itemData={itemData}\n+ itemSize={30}\n+ width={width}\n+ >\n+ {InteractionListItem}\n+ <\/FixedSizeList>\n+ <\/div>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/InteractionsChartBuilder.js b\/src\/devtools\/views\/Profiler\/InteractionsChartBuilder.js\nnew file mode 100644\nindex 0000000000..6171749ef0\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/InteractionsChartBuilder.js\n@@ -0,0 +1,55 @@\n+\/\/ @flow\n+\n+import ProfilerStore from 'src\/devtools\/ProfilerStore';\n+\n+import type { Interaction } from '.\/types';\n+\n+export type ChartData = {|\n+ interactions: Array<Interaction>,\n+ lastInteractionTime: number,\n+ maxCommitDuration: number,\n+|};\n+\n+const cachedChartData: Map<number, ChartData> = new Map();\n+\n+export function getChartData({\n+ profilerStore,\n+ rootID,\n+}: {|\n+ profilerStore: ProfilerStore,\n+ rootID: number,\n+|}): ChartData {\n+ if (cachedChartData.has(rootID)) {\n+ return ((cachedChartData.get(rootID): any): ChartData);\n+ }\n+\n+ const dataForRoot = profilerStore.getDataForRoot(rootID);\n+ if (dataForRoot == null) {\n+ throw Error(`Could not find profiling data for root \"${rootID}\"`);\n+ }\n+\n+ const { commitData, interactions } = dataForRoot;\n+\n+ const lastInteractionTime =\n+ commitData.length > 0 ? commitData[commitData.length - 1].timestamp : 0;\n+\n+ let maxCommitDuration = 0;\n+\n+ commitData.forEach(commitDatum => {\n+ maxCommitDuration = Math.max(maxCommitDuration, commitDatum.duration);\n+ });\n+\n+ const chartData = {\n+ interactions: Array.from(interactions.values()),\n+ lastInteractionTime,\n+ maxCommitDuration,\n+ };\n+\n+ cachedChartData.set(rootID, chartData);\n+\n+ return chartData;\n+}\n+\n+export function invalidateChartData(): void {\n+ cachedChartData.clear();\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/NoCommitData.css b\/src\/devtools\/views\/Profiler\/NoCommitData.css\nnew file mode 100644\nindex 0000000000..059e7c9938\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/NoCommitData.css\n@@ -0,0 +1,18 @@\n+.NoCommitData {\n+ width: 100%;\n+ height: 100%;\n+ display: flex;\n+ flex-direction: column;\n+ align-items: center;\n+ justify-content: center;\n+}\n+\n+.Header {\n+ font-size: var(--font-size-sans-large);\n+ margin-bottom: 0.5rem;\n+}\n+\n+.FilterMessage {\n+ display: flex;\n+ align-items: center;\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/NoCommitData.js b\/src\/devtools\/views\/Profiler\/NoCommitData.js\nnew file mode 100644\nindex 0000000000..32b2860fbc\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/NoCommitData.js\n@@ -0,0 +1,18 @@\n+\/\/ @flow\n+\n+import React from 'react';\n+\n+import styles from '.\/NoCommitData.css';\n+\n+export default function NoCommitData(_: {||}) {\n+ return (\n+ <div className={styles.NoCommitData}>\n+ <div className={styles.Header}>\n+ There is no data matching the current filter criteria.\n+ <\/div>\n+ <div className={styles.FilterMessage}>\n+ Try adjusting the commit filter in Profiler settings.\n+ <\/div>\n+ <\/div>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/NoInteractions.css b\/src\/devtools\/views\/Profiler\/NoInteractions.css\nnew file mode 100644\nindex 0000000000..6c6872058a\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/NoInteractions.css\n@@ -0,0 +1,16 @@\n+.NoInteractions {\n+ width: 100%;\n+ height: 100%;\n+ display: flex;\n+ flex-direction: column;\n+ align-items: center;\n+ justify-content: center;\n+}\n+\n+.Header {\n+ font-size: var(--font-size-sans-large);\n+}\n+\n+.Link {\n+ color: var(--color-button);\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/NoInteractions.js b\/src\/devtools\/views\/Profiler\/NoInteractions.js\nnew file mode 100644\nindex 0000000000..f317aa2b62\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/NoInteractions.js\n@@ -0,0 +1,29 @@\n+\/\/ @flow\n+\n+import React from 'react';\n+\n+import styles from '.\/NoInteractions.css';\n+\n+export default function NoInteractions({\n+ height,\n+ width,\n+}: {|\n+ height: number,\n+ width: number,\n+|}) {\n+ return (\n+ <div className={styles.NoInteractions} style={{ height, width }}>\n+ <p className={styles.Header}>No interactions were recorded.<\/p>\n+ <p>\n+ <a\n+ className={styles.Link}\n+ href=\"http:\/\/fb.me\/react-interaction-tracing\"\n+ rel=\"noopener noreferrer\"\n+ target=\"_blank\"\n+ >\n+ Learn more about the interaction tracing API here.\n+ <\/a>\n+ <\/p>\n+ <\/div>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/Profiler.css b\/src\/devtools\/views\/Profiler\/Profiler.css\nnew file mode 100644\nindex 0000000000..e9157aa35c\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/Profiler.css\n@@ -0,0 +1,112 @@\n+.Profiler {\n+ width: 100%;\n+ height: 100%;\n+ position: relative;\n+ display: flex;\n+ flex-direction: row;\n+ align-items: stretch;\n+ font-family: var(--font-family-sans);\n+ font-size: var(--font-size-sans-normal);\n+ background-color: var(--color-background);\n+ color: var(--color-text);\n+}\n+\n+.LeftColumn {\n+ display: flex;\n+ flex-direction: column;\n+ flex: 2 1 200px;\n+ border-top: 1px solid var(--color-border);\n+}\n+\n+.RightColumn {\n+ display: flex;\n+ flex-direction: column;\n+ flex: 1 1 100px;\n+ max-width: 300px;\n+ overflow-x: hidden;\n+ border-left: 1px solid var(--color-border);\n+ border-top: 1px solid var(--color-border);\n+}\n+\n+.Content {\n+ position: relative;\n+ flex: 1 1 auto;\n+ display: flex;\n+ flex-direction: column;\n+ align-items: center;\n+ justify-content: center;\n+}\n+\n+.Column {\n+ display: flex;\n+ flex-direction: column;\n+ align-items: center;\n+ justify-content: center;\n+ padding: 0 1rem;\n+}\n+\n+.Paragraph {\n+ text-align: center;\n+}\n+\n+.Row {\n+ display: flex;\n+ flex-direction: row;\n+ align-items: center;\n+ justify-content: center;\n+}\n+\n+.Header {\n+ font-size: var(--font-size-sans-large);\n+ margin-bottom: 0.5rem;\n+}\n+\n+.Toolbar {\n+ height: 2.25rem;\n+ padding: 0 0.25rem;\n+ flex: 0 0 auto;\n+ display: flex;\n+ align-items: center;\n+ border-bottom: 1px solid var(--color-border);\n+}\n+\n+.VRule {\n+ height: 20px;\n+ width: 1px;\n+ border-left: 1px solid var(--color-border);\n+ padding-left: 0.25rem;\n+ margin-left: 0.25rem;\n+}\n+\n+.Spacer {\n+ flex: 1;\n+}\n+\n+.StopRecordingButton {\n+ font-size: var(--font-size-sans-large);\n+ padding: 0.5rem;\n+}\n+\n+.ContentFallback {\n+ width: 100%;\n+ height: 100%;\n+ display: flex;\n+ align-items: center;\n+ justify-content: center;\n+ font-size: var(--font-size-sans-large);\n+ color: var(--color-dim);\n+}\n+\n+.SnapshotSelectorFallback {\n+ height: 100%;\n+ padding-left: 0.5rem;\n+ display: flex;\n+ align-items: center;\n+ justify-content: center;\n+ font-size: var(--font-size-sans-large);\n+ color: var(--color-dim);\n+}\n+\n+.Link {\n+ color: var(--color-button);\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/Profiler.js b\/src\/devtools\/views\/Profiler\/Profiler.js\nnew file mode 100644\nindex 0000000000..a4a5ce935f\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/Profiler.js\n@@ -0,0 +1,188 @@\n+\/\/ @flow\n+\n+import React, { Fragment, useContext } from 'react';\n+import { ModalDialog } from '..\/ModalDialog';\n+import { ProfilerContext } from '.\/ProfilerContext';\n+import TabBar from '..\/TabBar';\n+import ClearProfilingDataButton from '.\/ClearProfilingDataButton';\n+import CommitFlamegraph from '.\/CommitFlamegraph';\n+import CommitRanked from '.\/CommitRanked';\n+import Interactions from '.\/Interactions';\n+import RootSelector from '.\/RootSelector';\n+import RecordToggle from '.\/RecordToggle';\n+import ReloadAndProfileButton from '.\/ReloadAndProfileButton';\n+import ProfilingImportExportButtons from '.\/ProfilingImportExportButtons';\n+import SnapshotSelector from '.\/SnapshotSelector';\n+import SidebarCommitInfo from '.\/SidebarCommitInfo';\n+import SidebarInteractions from '.\/SidebarInteractions';\n+import SidebarSelectedFiberInfo from '.\/SidebarSelectedFiberInfo';\n+import SettingsModal from 'src\/devtools\/views\/Settings\/SettingsModal';\n+import SettingsModalContextToggle from 'src\/devtools\/views\/Settings\/SettingsModalContextToggle';\n+import { SettingsModalContextController } from 'src\/devtools\/views\/Settings\/SettingsModalContext';\n+import portaledContent from '..\/portaledContent';\n+\n+import styles from '.\/Profiler.css';\n+\n+function Profiler(_: {||}) {\n+ const {\n+ didRecordCommits,\n+ isProcessingData,\n+ isProfiling,\n+ selectedFiberID,\n+ selectedTabID,\n+ selectTab,\n+ supportsProfiling,\n+ } = useContext(ProfilerContext);\n+\n+ let view = null;\n+ if (didRecordCommits) {\n+ switch (selectedTabID) {\n+ case 'flame-chart':\n+ view = <CommitFlamegraph \/>;\n+ break;\n+ case 'ranked-chart':\n+ view = <CommitRanked \/>;\n+ break;\n+ case 'interactions':\n+ view = <Interactions \/>;\n+ break;\n+ default:\n+ break;\n+ }\n+ } else if (isProfiling) {\n+ view = <RecordingInProgress \/>;\n+ } else if (isProcessingData) {\n+ view = <ProcessingData \/>;\n+ } else if (supportsProfiling) {\n+ view = <NoProfilingData \/>;\n+ } else {\n+ view = <ProfilingNotSupported \/>;\n+ }\n+\n+ let sidebar = null;\n+ if (!isProfiling && !isProcessingData && didRecordCommits) {\n+ switch (selectedTabID) {\n+ case 'interactions':\n+ sidebar = <SidebarInteractions \/>;\n+ break;\n+ case 'flame-chart':\n+ case 'ranked-chart':\n+ if (selectedFiberID !== null) {\n+ sidebar = <SidebarSelectedFiberInfo \/>;\n+ } else {\n+ sidebar = <SidebarCommitInfo \/>;\n+ }\n+ break;\n+ default:\n+ break;\n+ }\n+ }\n+\n+ return (\n+ <SettingsModalContextController>\n+ <div className={styles.Profiler}>\n+ <div className={styles.LeftColumn}>\n+ <div className={styles.Toolbar}>\n+ <RecordToggle disabled={!supportsProfiling} \/>\n+ <ReloadAndProfileButton \/>\n+ <ClearProfilingDataButton \/>\n+ <ProfilingImportExportButtons \/>\n+ <div className={styles.VRule} \/>\n+ <TabBar\n+ currentTab={selectedTabID}\n+ id=\"Profiler\"\n+ selectTab={selectTab}\n+ tabs={tabs}\n+ type=\"profiler\"\n+ \/>\n+ <RootSelector \/>\n+ <div className={styles.Spacer} \/>\n+ <SettingsModalContextToggle \/>\n+ {didRecordCommits && (\n+ <Fragment>\n+ <div className={styles.VRule} \/>\n+ <SnapshotSelector \/>\n+ <\/Fragment>\n+ )}\n+ <\/div>\n+ <div className={styles.Content}>\n+ {view}\n+ <ModalDialog \/>\n+ <\/div>\n+ <\/div>\n+ <div className={styles.RightColumn}>{sidebar}<\/div>\n+ <SettingsModal \/>\n+ <\/div>\n+ <\/SettingsModalContextController>\n+ );\n+}\n+\n+const tabs = [\n+ {\n+ id: 'flame-chart',\n+ icon: 'flame-chart',\n+ label: 'Flamegraph',\n+ title: 'Flamegraph chart',\n+ },\n+ {\n+ id: 'ranked-chart',\n+ icon: 'ranked-chart',\n+ label: 'Ranked',\n+ title: 'Ranked chart',\n+ },\n+ {\n+ id: 'interactions',\n+ icon: 'interactions',\n+ label: 'Interactions',\n+ title: 'Profiled interactions',\n+ },\n+];\n+\n+const NoProfilingData = () => (\n+ <div className={styles.Column}>\n+ <div className={styles.Header}>No profiling data has been recorded.<\/div>\n+ <div className={styles.Row}>\n+ Click the record button <RecordToggle \/> to start recording.\n+ <\/div>\n+ <\/div>\n+);\n+\n+const ProfilingNotSupported = () => (\n+ <div className={styles.Column}>\n+ <div className={styles.Header}>Profiling not supported.<\/div>\n+ <p className={styles.Paragraph}>\n+ Profiling support requires either a development or production-profiling\n+ build of React v16.5+.\n+ <\/p>\n+ <p className={styles.Paragraph}>\n+ Learn more at{' '}\n+ <a\n+ className={styles.Link}\n+ href=\"https:\/\/fb.me\/react-profiling\"\n+ rel=\"noopener noreferrer\"\n+ target=\"_blank\"\n+ >\n+ fb.me\/react-profiling\n+ <\/a>\n+ .\n+ <\/p>\n+ <\/div>\n+);\n+\n+const ProcessingData = () => (\n+ <div className={styles.Column}>\n+ <div className={styles.Header}>Processing data...<\/div>\n+ <div className={styles.Row}>This should only take a minute.<\/div>\n+ <\/div>\n+);\n+\n+const RecordingInProgress = () => (\n+ <div className={styles.Column}>\n+ <div className={styles.Header}>Profiling is in progress...<\/div>\n+ <div className={styles.Row}>\n+ Click the record button <RecordToggle \/> to stop recording.\n+ <\/div>\n+ <\/div>\n+);\n+\n+export default portaledContent(Profiler);\ndiff --git a\/src\/devtools\/views\/Profiler\/ProfilerContext.js b\/src\/devtools\/views\/Profiler\/ProfilerContext.js\nnew file mode 100644\nindex 0000000000..f50947e1cf\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/ProfilerContext.js\n@@ -0,0 +1,288 @@\n+\/\/ @flow\n+\n+import React, {\n+ createContext,\n+ useCallback,\n+ useContext,\n+ useMemo,\n+ useState,\n+} from 'react';\n+import { unstable_batchedUpdates as batchedUpdates } from 'react-dom';\n+import { useLocalStorage, useSubscription } from '..\/hooks';\n+import {\n+ TreeDispatcherContext,\n+ TreeStateContext,\n+} from '..\/Components\/TreeContext';\n+import { StoreContext } from '..\/context';\n+import Store from '..\/..\/store';\n+\n+import type { ProfilingDataFrontend } from '.\/types';\n+\n+export type TabID = 'flame-chart' | 'ranked-chart' | 'interactions';\n+\n+export type Context = {|\n+ \/\/ Which tab is selexted in the Profiler UI?\n+ selectedTabID: TabID,\n+ selectTab(id: TabID): void,\n+\n+ \/\/ Store subscription based values.\n+ \/\/ The isProfiling value may be modified by the record button in the Profiler toolbar,\n+ \/\/ or from the backend itself (after a reload-and-profile action).\n+ \/\/ It is synced between the backend and frontend via a Store subscription.\n+ didRecordCommits: boolean,\n+ isProcessingData: boolean,\n+ isProfiling: boolean,\n+ profilingData: ProfilingDataFrontend | null,\n+ startProfiling(): void,\n+ stopProfiling(): void,\n+ supportsProfiling: boolean,\n+\n+ \/\/ Which root should profiling data be shown for?\n+ \/\/ This value should be initialized to either:\n+ \/\/ 1. The selected root in the Components tree (if it has any profiling data) or\n+ \/\/ 2. The first root in the list with profiling data.\n+ rootID: number | null,\n+ setRootID: (id: number) => void,\n+\n+ \/\/ Controls whether commits are filtered by duration.\n+ \/\/ This value is controlled by a filter toggle UI in the Profiler toolbar.\n+ \/\/ It impacts the commit selector UI as well as the fiber commits bar chart.\n+ isCommitFilterEnabled: boolean,\n+ setIsCommitFilterEnabled: (value: boolean) => void,\n+ minCommitDuration: number,\n+ setMinCommitDuration: (value: number) => void,\n+\n+ \/\/ Which commit is currently selected in the commit selector UI.\n+ \/\/ Note that this is the index of the commit in all commits (non-filtered) that were profiled.\n+ \/\/ This value is controlled by the commit selector UI in the Profiler toolbar.\n+ \/\/ It impacts the flame graph and ranked charts.\n+ selectedCommitIndex: number | null,\n+ selectCommitIndex: (value: number | null) => void,\n+\n+ \/\/ Which fiber is currently selected in the Ranked or Flamegraph charts?\n+ selectedFiberID: number | null,\n+ selectedFiberName: string | null,\n+ selectFiber: (id: number | null, name: string | null) => void,\n+\n+ \/\/ Which interaction is currently selected in the Interactions graph?\n+ selectedInteractionID: number | null,\n+ selectInteraction: (id: number | null) => void,\n+|};\n+\n+const ProfilerContext = createContext<Context>(((null: any): Context));\n+ProfilerContext.displayName = 'ProfilerContext';\n+\n+type StoreProfilingState = {|\n+ didRecordCommits: boolean,\n+ isProcessingData: boolean,\n+ isProfiling: boolean,\n+ profilingData: ProfilingDataFrontend | null,\n+ supportsProfiling: boolean,\n+|};\n+\n+type Props = {|\n+ children: React$Node,\n+|};\n+\n+function ProfilerContextController({ children }: Props) {\n+ const store = useContext(StoreContext);\n+ const { selectedElementID } = useContext(TreeStateContext);\n+ const dispatch = useContext(TreeDispatcherContext);\n+\n+ const { profilerStore } = store;\n+\n+ const subscription = useMemo(\n+ () => ({\n+ getCurrentValue: () => ({\n+ didRecordCommits: profilerStore.didRecordCommits,\n+ isProcessingData: profilerStore.isProcessingData,\n+ isProfiling: profilerStore.isProfiling,\n+ profilingData: profilerStore.profilingData,\n+ supportsProfiling: store.supportsProfiling,\n+ }),\n+ subscribe: (callback: Function) => {\n+ profilerStore.addListener('profilingData', callback);\n+ profilerStore.addListener('isProcessingData', callback);\n+ profilerStore.addListener('isProfiling', callback);\n+ store.addListener('supportsProfiling', callback);\n+ return () => {\n+ profilerStore.removeListener('profilingData', callback);\n+ profilerStore.removeListener('isProcessingData', callback);\n+ profilerStore.removeListener('isProfiling', callback);\n+ store.removeListener('supportsProfiling', callback);\n+ };\n+ },\n+ }),\n+ [profilerStore, store]\n+ );\n+ const {\n+ didRecordCommits,\n+ isProcessingData,\n+ isProfiling,\n+ profilingData,\n+ supportsProfiling,\n+ } = useSubscription<StoreProfilingState, Store>(subscription);\n+\n+ const [prevProfilingData, setPrevProfilingData] = useState();\n+ const [rootID, setRootID] = useState<number | null>(null);\n+\n+ if (prevProfilingData !== profilingData) {\n+ setPrevProfilingData(profilingData);\n+\n+ const dataForRoots =\n+ profilingData !== null ? profilingData.dataForRoots : null;\n+ if (dataForRoots != null) {\n+ const firstRootID = dataForRoots.keys().next().value || null;\n+\n+ if (rootID === null || !dataForRoots.has(rootID)) {\n+ let selectedElementRootID = null;\n+ if (selectedElementID !== null) {\n+ selectedElementRootID = store.getRootIDForElement(selectedElementID);\n+ }\n+ if (\n+ selectedElementRootID !== null &&\n+ dataForRoots.has(selectedElementRootID)\n+ ) {\n+ setRootID(selectedElementRootID);\n+ } else {\n+ setRootID(firstRootID);\n+ }\n+ }\n+ }\n+ }\n+\n+ const startProfiling = useCallback(\n+ () => store.profilerStore.startProfiling(),\n+ [store]\n+ );\n+ const stopProfiling = useCallback(() => store.profilerStore.stopProfiling(), [\n+ store,\n+ ]);\n+\n+ const [\n+ isCommitFilterEnabled,\n+ setIsCommitFilterEnabled,\n+ ] = useLocalStorage<boolean>('React::DevTools::isCommitFilterEnabled', false);\n+ const [minCommitDuration, setMinCommitDuration] = useLocalStorage<number>(\n+ 'minCommitDuration',\n+ 0\n+ );\n+\n+ const [selectedCommitIndex, selectCommitIndex] = useState<number | null>(\n+ null\n+ );\n+ const [selectedTabID, selectTab] = useState<TabID>('flame-chart');\n+ const [selectedFiberID, selectFiberID] = useState<number | null>(null);\n+ const [selectedFiberName, selectFiberName] = useState<string | null>(null);\n+ const [selectedInteractionID, selectInteraction] = useState<number | null>(\n+ null\n+ );\n+\n+ const selectFiber = useCallback(\n+ (id: number | null, name: string | null) => {\n+ selectFiberID(id);\n+ selectFiberName(name);\n+\n+ \/\/ Sync selection to the Components tab for convenience.\n+ if (id !== null) {\n+ const element = store.getElementByID(id);\n+\n+ \/\/ Keep in mind that profiling data may be from a previous session.\n+ \/\/ In that case, IDs may match up arbitrarily; to be safe, compare both ID and display name.\n+ if (element !== null && element.displayName === name) {\n+ dispatch({\n+ type: 'SELECT_ELEMENT_BY_ID',\n+ payload: id,\n+ });\n+ }\n+ }\n+ },\n+ [dispatch, selectFiberID, selectFiberName, store]\n+ );\n+\n+ if (isProfiling) {\n+ batchedUpdates(() => {\n+ if (selectedCommitIndex !== null) {\n+ selectCommitIndex(null);\n+ }\n+ if (selectedFiberID !== null) {\n+ selectFiberID(null);\n+ selectFiberName(null);\n+ }\n+ if (selectedInteractionID !== null) {\n+ selectInteraction(null);\n+ }\n+ });\n+ }\n+\n+ const value = useMemo(\n+ () => ({\n+ selectedTabID,\n+ selectTab,\n+\n+ didRecordCommits,\n+ isProcessingData,\n+ isProfiling,\n+ profilingData,\n+ startProfiling,\n+ stopProfiling,\n+ supportsProfiling,\n+\n+ rootID,\n+ setRootID,\n+\n+ isCommitFilterEnabled,\n+ setIsCommitFilterEnabled,\n+ minCommitDuration,\n+ setMinCommitDuration,\n+\n+ selectedCommitIndex,\n+ selectCommitIndex,\n+\n+ selectedFiberID,\n+ selectedFiberName,\n+ selectFiber,\n+\n+ selectedInteractionID,\n+ selectInteraction,\n+ }),\n+ [\n+ selectedTabID,\n+ selectTab,\n+\n+ didRecordCommits,\n+ isProcessingData,\n+ isProfiling,\n+ profilingData,\n+ startProfiling,\n+ stopProfiling,\n+ supportsProfiling,\n+\n+ rootID,\n+ setRootID,\n+\n+ isCommitFilterEnabled,\n+ setIsCommitFilterEnabled,\n+ minCommitDuration,\n+ setMinCommitDuration,\n+\n+ selectedCommitIndex,\n+ selectCommitIndex,\n+\n+ selectedFiberID,\n+ selectedFiberName,\n+ selectFiber,\n+\n+ selectedInteractionID,\n+ selectInteraction,\n+ ]\n+ );\n+\n+ return (\n+ <ProfilerContext.Provider value={value}>\n+ {children}\n+ <\/ProfilerContext.Provider>\n+ );\n+}\n+\n+export { ProfilerContext, ProfilerContextController };\ndiff --git a\/src\/devtools\/views\/Profiler\/ProfilingImportExportButtons.css b\/src\/devtools\/views\/Profiler\/ProfilingImportExportButtons.css\nnew file mode 100644\nindex 0000000000..8d24f56505\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/ProfilingImportExportButtons.css\n@@ -0,0 +1,25 @@\n+.VRule {\n+ height: 20px;\n+ width: 1px;\n+ border-left: 1px solid var(--color-border);\n+ padding-left: 0.25rem;\n+ margin-left: 0.25rem;\n+}\n+\n+\/**\n+ * https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/File\/Using_files_from_web_applications\n+ *\/\n+.Input {\n+ position: absolute !important;\n+ height: 1px;\n+ width: 1px;\n+ overflow: hidden;\n+ clip: rect(1px, 1px, 1px, 1px);\n+}\n+\n+.ErrorMessage {\n+ margin: 0.5rem 0;\n+ color: var(--color-dim);\n+ font-family: var(--font-family-monospace);\n+ font-size: var(--font-size-monospace-normal);\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/ProfilingImportExportButtons.js b\/src\/devtools\/views\/Profiler\/ProfilingImportExportButtons.js\nnew file mode 100644\nindex 0000000000..50a31fe897\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/ProfilingImportExportButtons.js\n@@ -0,0 +1,120 @@\n+\/\/ @flow\n+\n+import React, { Fragment, useContext, useCallback, useRef } from 'react';\n+import { ProfilerContext } from '.\/ProfilerContext';\n+import { ModalDialogContext } from '..\/ModalDialog';\n+import Button from '..\/Button';\n+import ButtonIcon from '..\/ButtonIcon';\n+import { StoreContext } from '..\/context';\n+import {\n+ prepareProfilingDataExport,\n+ prepareProfilingDataFrontendFromExport,\n+} from '.\/utils';\n+import { downloadFile } from '..\/utils';\n+\n+import styles from '.\/ProfilingImportExportButtons.css';\n+\n+import type { ProfilingDataExport } from '.\/types';\n+\n+export default function ProfilingImportExportButtons() {\n+ const { isProfiling, profilingData, rootID } = useContext(ProfilerContext);\n+ const store = useContext(StoreContext);\n+ const { profilerStore } = store;\n+\n+ const inputRef = useRef<HTMLInputElement | null>(null);\n+\n+ const { dispatch: modalDialogDispatch } = useContext(ModalDialogContext);\n+\n+ const downloadData = useCallback(() => {\n+ if (rootID === null) {\n+ return;\n+ }\n+\n+ if (profilingData !== null) {\n+ const profilingDataExport = prepareProfilingDataExport(profilingData);\n+ const date = new Date();\n+ const dateString = date\n+ .toLocaleDateString(undefined, {\n+ year: 'numeric',\n+ month: '2-digit',\n+ day: '2-digit',\n+ })\n+ .replace(\/\\\/\/g, '-');\n+ const timeString = date\n+ .toLocaleTimeString(undefined, {\n+ hour12: false,\n+ })\n+ .replace(\/:\/g, '-');\n+ downloadFile(\n+ `profiling-data.${dateString}.${timeString}.json`,\n+ JSON.stringify(profilingDataExport, null, 2)\n+ );\n+ }\n+ }, [rootID, profilingData]);\n+\n+ const uploadData = useCallback(() => {\n+ if (inputRef.current !== null) {\n+ inputRef.current.click();\n+ }\n+ }, []);\n+\n+ const handleFiles = useCallback(() => {\n+ const input = inputRef.current;\n+ if (input !== null && input.files.length > 0) {\n+ const fileReader = new FileReader();\n+ fileReader.addEventListener('load', () => {\n+ try {\n+ const raw = ((fileReader.result: any): string);\n+ const profilingDataExport = ((JSON.parse(\n+ raw\n+ ): any): ProfilingDataExport);\n+ profilerStore.profilingData = prepareProfilingDataFrontendFromExport(\n+ profilingDataExport\n+ );\n+ } catch (error) {\n+ modalDialogDispatch({\n+ type: 'SHOW',\n+ title: 'Import failed',\n+ content: (\n+ <Fragment>\n+ <div>The profiling data you selected cannot be imported.<\/div>\n+ {error !== null && (\n+ <div className={styles.ErrorMessage}>{error.message}<\/div>\n+ )}\n+ <\/Fragment>\n+ ),\n+ });\n+ }\n+ });\n+ \/\/ TODO (profiling) Handle fileReader errors.\n+ fileReader.readAsText(input.files[0]);\n+ }\n+ }, [modalDialogDispatch, profilerStore]);\n+\n+ return (\n+ <Fragment>\n+ <div className={styles.VRule} \/>\n+ <input\n+ ref={inputRef}\n+ className={styles.Input}\n+ type=\"file\"\n+ onChange={handleFiles}\n+ tabIndex={-1}\n+ \/>\n+ <Button\n+ disabled={isProfiling}\n+ onClick={uploadData}\n+ title=\"Load profile...\"\n+ >\n+ <ButtonIcon type=\"import\" \/>\n+ <\/Button>\n+ <Button\n+ disabled={isProfiling || !profilerStore.didRecordCommits}\n+ onClick={downloadData}\n+ title=\"Save profile...\"\n+ >\n+ <ButtonIcon type=\"export\" \/>\n+ <\/Button>\n+ <\/Fragment>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/RankedChartBuilder.js b\/src\/devtools\/views\/Profiler\/RankedChartBuilder.js\nnew file mode 100644\nindex 0000000000..67b38fccbf\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/RankedChartBuilder.js\n@@ -0,0 +1,96 @@\n+\/\/ @flow\n+\n+import { ElementTypeForwardRef, ElementTypeMemo } from 'src\/types';\n+import { formatDuration } from '.\/utils';\n+import ProfilerStore from 'src\/devtools\/ProfilerStore';\n+\n+import type { CommitTree } from '.\/types';\n+\n+export type ChartNode = {|\n+ id: number,\n+ label: string,\n+ name: string,\n+ value: number,\n+|};\n+\n+export type ChartData = {|\n+ maxValue: number,\n+ nodes: Array<ChartNode>,\n+|};\n+\n+const cachedChartData: Map<string, ChartData> = new Map();\n+\n+export function getChartData({\n+ commitIndex,\n+ commitTree,\n+ profilerStore,\n+ rootID,\n+}: {|\n+ commitIndex: number,\n+ commitTree: CommitTree,\n+ profilerStore: ProfilerStore,\n+ rootID: number,\n+|}): ChartData {\n+ const commitDatum = profilerStore.getCommitData(rootID, commitIndex);\n+\n+ const { fiberActualDurations, fiberSelfDurations } = commitDatum;\n+ const { nodes } = commitTree;\n+\n+ const key = `${rootID}-${commitIndex}`;\n+ if (cachedChartData.has(key)) {\n+ return ((cachedChartData.get(key): any): ChartData);\n+ }\n+\n+ let maxSelfDuration = 0;\n+\n+ const chartNodes: Array<ChartNode> = [];\n+ fiberActualDurations.forEach((actualDuration, id) => {\n+ const node = nodes.get(id);\n+\n+ if (node == null) {\n+ throw Error(`Could not find node with id \"${id}\" in commit tree`);\n+ }\n+\n+ const { displayName, key, parentID, type } = node;\n+\n+ \/\/ Don't show the root node in this chart.\n+ if (parentID === 0) {\n+ return;\n+ }\n+ const selfDuration = fiberSelfDurations.get(id) || 0;\n+ maxSelfDuration = Math.max(maxSelfDuration, selfDuration);\n+\n+ const name = displayName || 'Anonymous';\n+ const maybeKey = key !== null ? ` key=\"${key}\"` : '';\n+\n+ let maybeBadge = '';\n+ if (type === ElementTypeForwardRef) {\n+ maybeBadge = ' (ForwardRef)';\n+ } else if (type === ElementTypeMemo) {\n+ maybeBadge = ' (Memo)';\n+ }\n+\n+ const label = `${name}${maybeBadge}${maybeKey} (${formatDuration(\n+ selfDuration\n+ )}ms)`;\n+ chartNodes.push({\n+ id,\n+ label,\n+ name,\n+ value: selfDuration,\n+ });\n+ });\n+\n+ const chartData = {\n+ maxValue: maxSelfDuration,\n+ nodes: chartNodes.sort((a, b) => b.value - a.value),\n+ };\n+\n+ cachedChartData.set(key, chartData);\n+\n+ return chartData;\n+}\n+\n+export function invalidateChartData(): void {\n+ cachedChartData.clear();\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/RecordToggle.css b\/src\/devtools\/views\/Profiler\/RecordToggle.css\nnew file mode 100644\nindex 0000000000..467bca27e3\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/RecordToggle.css\n@@ -0,0 +1,38 @@\n+.ActiveRecordToggle {\n+ color: var(--color-record-active);\n+}\n+.ActiveRecordToggle:hover {\n+ color: var(--color-record-active);\n+}\n+.ActiveRecordToggle:focus {\n+ color: var(--color-record-active);\n+}\n+.ActiveRecordToggle:active {\n+ color: var(--color-record-hover);\n+}\n+\n+.InactiveRecordToggle {\n+ color: var(--color-record-inactive);\n+}\n+.InactiveRecordToggle:hover {\n+ color: var(--color-record-hover);\n+}\n+.InactiveRecordToggle:focus {\n+ color: var(--color-record-inactive);\n+}\n+.InactiveRecordToggle:active {\n+ color: var(--color-record-hover);\n+}\n+\n+.DisabledRecordToggle {\n+ color: var(--color-button-disabled);\n+}\n+.DisabledRecordToggle:hover {\n+ color: var(--color-button-disabled);\n+}\n+.DisabledRecordToggle:focus {\n+ color: var(--color-button-disabled);\n+}\n+.DisabledRecordToggle:active {\n+ color: var(--color-button-disabled);\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/RecordToggle.js b\/src\/devtools\/views\/Profiler\/RecordToggle.js\nnew file mode 100644\nindex 0000000000..a3d494c716\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/RecordToggle.js\n@@ -0,0 +1,36 @@\n+\/\/ @flow\n+\n+import React, { useContext } from 'react';\n+import Button from '..\/Button';\n+import ButtonIcon from '..\/ButtonIcon';\n+import { ProfilerContext } from '.\/ProfilerContext';\n+\n+import styles from '.\/RecordToggle.css';\n+\n+export type Props = {|\n+ disabled?: boolean,\n+|};\n+\n+export default function RecordToggle({ disabled }: Props) {\n+ const { isProfiling, startProfiling, stopProfiling } = useContext(\n+ ProfilerContext\n+ );\n+\n+ let className = styles.InactiveRecordToggle;\n+ if (disabled) {\n+ className = styles.DisabledRecordToggle;\n+ } else if (isProfiling) {\n+ className = styles.ActiveRecordToggle;\n+ }\n+\n+ return (\n+ <Button\n+ className={className}\n+ disabled={disabled}\n+ onClick={isProfiling ? stopProfiling : startProfiling}\n+ title={isProfiling ? 'Stop profiling' : 'Start profiling'}\n+ >\n+ <ButtonIcon type=\"record\" \/>\n+ <\/Button>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/ReloadAndProfileButton.js b\/src\/devtools\/views\/Profiler\/ReloadAndProfileButton.js\nnew file mode 100644\nindex 0000000000..0c92ae6efe\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/ReloadAndProfileButton.js\n@@ -0,0 +1,64 @@\n+\/\/ @flow\n+\n+import React, { useCallback, useContext, useMemo } from 'react';\n+import Button from '..\/Button';\n+import ButtonIcon from '..\/ButtonIcon';\n+import { BridgeContext, StoreContext } from '..\/context';\n+import { useSubscription } from '..\/hooks';\n+import Store from 'src\/devtools\/store';\n+\n+type SubscriptionData = {|\n+ recordChangeDescriptions: boolean,\n+ supportsReloadAndProfile: boolean,\n+|};\n+\n+export default function ReloadAndProfileButton() {\n+ const bridge = useContext(BridgeContext);\n+ const store = useContext(StoreContext);\n+\n+ const subscription = useMemo(\n+ () => ({\n+ getCurrentValue: () => ({\n+ recordChangeDescriptions: store.recordChangeDescriptions,\n+ supportsReloadAndProfile: store.supportsReloadAndProfile,\n+ }),\n+ subscribe: (callback: Function) => {\n+ store.addListener('recordChangeDescriptions', callback);\n+ store.addListener('supportsReloadAndProfile', callback);\n+ return () => {\n+ store.removeListener('recordChangeDescriptions', callback);\n+ store.removeListener('supportsReloadAndProfile', callback);\n+ };\n+ },\n+ }),\n+ [store]\n+ );\n+ const {\n+ recordChangeDescriptions,\n+ supportsReloadAndProfile,\n+ } = useSubscription<SubscriptionData, Store>(subscription);\n+\n+ const reloadAndProfile = useCallback(() => {\n+ \/\/ TODO If we want to support reload-and-profile for e.g. React Native,\n+ \/\/ we might need to also start profiling here before reloading the app (since DevTools itself isn't reloaded).\n+ \/\/ We'd probably want to do this before reloading though, to avoid sending a message on a disconnected port in the browser.\n+ \/\/ For now, let's just skip doing it entirely to avoid paying snapshot costs for data we don't need.\n+ \/\/ startProfiling();\n+\n+ bridge.send('reloadAndProfile', recordChangeDescriptions);\n+ }, [bridge, recordChangeDescriptions]);\n+\n+ if (!supportsReloadAndProfile) {\n+ return null;\n+ }\n+\n+ return (\n+ <Button\n+ disabled={!store.supportsProfiling}\n+ onClick={reloadAndProfile}\n+ title=\"Reload and start profiling\"\n+ >\n+ <ButtonIcon type=\"reload\" \/>\n+ <\/Button>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/RootSelector.css b\/src\/devtools\/views\/Profiler\/RootSelector.css\nnew file mode 100644\nindex 0000000000..ff1a970d46\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/RootSelector.css\n@@ -0,0 +1,3 @@\n+.Spacer {\n+ flex: 1;\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/RootSelector.js b\/src\/devtools\/views\/Profiler\/RootSelector.js\nnew file mode 100644\nindex 0000000000..b4e89af824\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/RootSelector.js\n@@ -0,0 +1,42 @@\n+\/\/ @flow\n+\n+import React, { Fragment, useCallback, useContext } from 'react';\n+import { ProfilerContext } from '.\/ProfilerContext';\n+\n+import styles from '.\/RootSelector.css';\n+\n+export default function RootSelector(_: {||}) {\n+ const { profilingData, rootID, setRootID } = useContext(ProfilerContext);\n+\n+ const options = [];\n+ if (profilingData !== null) {\n+ profilingData.dataForRoots.forEach((dataForRoot, rootID) => {\n+ options.push(\n+ <option key={rootID} value={rootID}>\n+ {dataForRoot.displayName}\n+ <\/option>\n+ );\n+ });\n+ }\n+\n+ const handleChange = useCallback(\n+ ({ currentTarget }) => {\n+ setRootID(parseInt(currentTarget.value, 10));\n+ },\n+ [setRootID]\n+ );\n+\n+ if (profilingData === null || profilingData.dataForRoots.size <= 1) {\n+ \/\/ Don't take up visual space if there's only one root.\n+ return null;\n+ }\n+\n+ return (\n+ <Fragment>\n+ <div className={styles.Spacer} \/>\n+ <select value={rootID} onChange={handleChange}>\n+ {options}\n+ <\/select>\n+ <\/Fragment>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/SidebarCommitInfo.css b\/src\/devtools\/views\/Profiler\/SidebarCommitInfo.css\nnew file mode 100644\nindex 0000000000..c0564e0d8c\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/SidebarCommitInfo.css\n@@ -0,0 +1,65 @@\n+.Toolbar {\n+ height: 2.25rem;\n+ padding: 0 0.5rem;\n+ flex: 0 0 auto;\n+ display: flex;\n+ align-items: center;\n+ border-bottom: 1px solid var(--color-border);\n+}\n+\n+.Content {\n+ padding: 0.5rem;\n+ user-select: none;\n+ overflow: auto;\n+}\n+\n+.List {\n+ list-style: none;\n+ margin: 0;\n+ padding: 0;\n+}\n+\n+.ListItem {\n+ margin: 0 0 0.5rem;\n+}\n+\n+.NoInteractions {\n+ color: var(--color-dim);\n+}\n+\n+.Interactions {\n+ margin: 0 0 0.5rem;\n+}\n+.Interaction {\n+ display: block;\n+ width: 100%;\n+ text-align: left;\n+ background: none;\n+ border: none;\n+ padding: 0.25rem 0.5rem;\n+ color: var(--color-text);\n+}\n+.Interaction:focus,\n+.Interaction:hover {\n+ outline: none;\n+ background-color: var(--color-background-hover);\n+}\n+\n+.Label {\n+ overflow: hidden;\n+ text-overflow: ellipsis;\n+ font-weight: bold;\n+}\n+\n+.Value {\n+ font-family: var(--font-family-monospace);\n+ font-size: var(--font-size-monospace-normal);\n+}\n+\n+.NothingSelected {\n+ display: flex;\n+ align-items: center;\n+ justify-content: center;\n+ height: 100%;\n+ color: var(--color-dim);\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/SidebarCommitInfo.js b\/src\/devtools\/views\/Profiler\/SidebarCommitInfo.js\nnew file mode 100644\nindex 0000000000..527d0ebffa\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/SidebarCommitInfo.js\n@@ -0,0 +1,85 @@\n+\/\/ @flow\n+\n+import React, { Fragment, useContext } from 'react';\n+import { ProfilerContext } from '.\/ProfilerContext';\n+import { formatDuration, formatTime } from '.\/utils';\n+import { StoreContext } from '..\/context';\n+\n+import styles from '.\/SidebarCommitInfo.css';\n+\n+export type Props = {||};\n+\n+export default function SidebarCommitInfo(_: Props) {\n+ const {\n+ selectedCommitIndex,\n+ rootID,\n+ selectInteraction,\n+ selectTab,\n+ } = useContext(ProfilerContext);\n+\n+ const { profilerStore } = useContext(StoreContext);\n+\n+ if (rootID === null || selectedCommitIndex === null) {\n+ return <div className={styles.NothingSelected}>Nothing selected<\/div>;\n+ }\n+\n+ const { interactions } = profilerStore.getDataForRoot(rootID);\n+ const {\n+ duration,\n+ interactionIDs,\n+ priorityLevel,\n+ timestamp,\n+ } = profilerStore.getCommitData(rootID, selectedCommitIndex);\n+\n+ const viewInteraction = interactionID => {\n+ selectTab('interactions');\n+ selectInteraction(interactionID);\n+ };\n+\n+ return (\n+ <Fragment>\n+ <div className={styles.Toolbar}>Commit information<\/div>\n+ <div className={styles.Content}>\n+ <ul className={styles.List}>\n+ {priorityLevel !== null && (\n+ <li className={styles.ListItem}>\n+ <label className={styles.Label}>Priority<\/label>:{' '}\n+ <span className={styles.Value}>{priorityLevel}<\/span>\n+ <\/li>\n+ )}\n+ <li className={styles.ListItem}>\n+ <label className={styles.Label}>Committed at<\/label>:{' '}\n+ <span className={styles.Value}>{formatTime(timestamp)}s<\/span>\n+ <\/li>\n+ <li className={styles.ListItem}>\n+ <label className={styles.Label}>Render duration<\/label>:{' '}\n+ <span className={styles.Value}>{formatDuration(duration)}ms<\/span>\n+ <\/li>\n+ <li className={styles.Interactions}>\n+ <label className={styles.Label}>Interactions<\/label>:\n+ <div className={styles.InteractionList}>\n+ {interactionIDs.length === 0 ? (\n+ <div className={styles.NoInteractions}>None<\/div>\n+ ) : null}\n+ {interactionIDs.map(interactionID => {\n+ const interaction = interactions.get(interactionID);\n+ if (interaction == null) {\n+ throw Error(`Invalid interaction \"${interactionID}\"`);\n+ }\n+ return (\n+ <button\n+ key={interactionID}\n+ className={styles.Interaction}\n+ onClick={() => viewInteraction(interactionID)}\n+ >\n+ {interaction.name}\n+ <\/button>\n+ );\n+ })}\n+ <\/div>\n+ <\/li>\n+ <\/ul>\n+ <\/div>\n+ <\/Fragment>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/SidebarInteractions.css b\/src\/devtools\/views\/Profiler\/SidebarInteractions.css\nnew file mode 100644\nindex 0000000000..c5643dfcd7\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/SidebarInteractions.css\n@@ -0,0 +1,55 @@\n+.Toolbar {\n+ height: 2.25rem;\n+ padding: 0 0.5rem;\n+ flex: 0 0 auto;\n+ display: flex;\n+ align-items: center;\n+}\n+\n+.Content {\n+ padding: 0.5rem;\n+ user-select: none;\n+ border-top: 1px solid var(--color-border);\n+ overflow: auto;\n+}\n+\n+.Name {\n+ font-size: var(--font-size-sans-large);\n+ white-space: nowrap;\n+ overflow-x: hidden;\n+ text-overflow: ellipsis;\n+}\n+\n+.NothingSelected {\n+ display: flex;\n+ align-items: center;\n+ justify-content: center;\n+ height: 100%;\n+ color: var(--color-dim);\n+}\n+\n+.Commits {\n+ font-weight: bold;\n+}\n+\n+.List {\n+ list-style: none;\n+ margin: 0;\n+ padding: 0;\n+}\n+\n+.ListItem {\n+ display: flex;\n+ flex-direction: row;\n+ align-items: center;\n+ padding: 0.25rem 0.5rem;\n+}\n+.ListItem:hover {\n+ background-color: var(--color-background-hover);\n+}\n+\n+.CommitBox {\n+ width: 20px;\n+ height: 20px;\n+ margin-right: 0.5rem;\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/SidebarInteractions.js b\/src\/devtools\/views\/Profiler\/SidebarInteractions.js\nnew file mode 100644\nindex 0000000000..c23a2106fc\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/SidebarInteractions.js\n@@ -0,0 +1,91 @@\n+\/\/ @flow\n+\n+import React, { Fragment, useContext } from 'react';\n+import { ProfilerContext } from '.\/ProfilerContext';\n+import { formatDuration, formatTime } from '.\/utils';\n+import { StoreContext } from '..\/context';\n+import { getGradientColor } from '.\/utils';\n+\n+import styles from '.\/SidebarInteractions.css';\n+\n+export type Props = {||};\n+\n+export default function SidebarInteractions(_: Props) {\n+ const {\n+ selectedInteractionID,\n+ rootID,\n+ selectCommitIndex,\n+ selectTab,\n+ } = useContext(ProfilerContext);\n+\n+ const { profilerStore } = useContext(StoreContext);\n+ const { profilingCache } = profilerStore;\n+\n+ if (selectedInteractionID === null) {\n+ return <div className={styles.NothingSelected}>Nothing selected<\/div>;\n+ }\n+\n+ const { interactionCommits, interactions } = profilerStore.getDataForRoot(\n+ ((rootID: any): number)\n+ );\n+ const interaction = interactions.get(selectedInteractionID);\n+ if (interaction == null) {\n+ throw Error(\n+ `Could not find interaction by selected interaction id \"${selectedInteractionID}\"`\n+ );\n+ }\n+\n+ const { maxCommitDuration } = profilingCache.getInteractionsChartData({\n+ rootID: ((rootID: any): number),\n+ });\n+\n+ const viewCommit = (commitIndex: number) => {\n+ selectTab('flame-chart');\n+ selectCommitIndex(commitIndex);\n+ };\n+\n+ const listItems: Array<React$Node> = [];\n+ const commitIndices = interactionCommits.get(selectedInteractionID);\n+ if (commitIndices != null) {\n+ commitIndices.forEach(commitIndex => {\n+ const { duration, timestamp } = profilerStore.getCommitData(\n+ ((rootID: any): number),\n+ commitIndex\n+ );\n+\n+ listItems.push(\n+ <li\n+ key={commitIndex}\n+ className={styles.ListItem}\n+ onClick={() => viewCommit(commitIndex)}\n+ >\n+ <div\n+ className={styles.CommitBox}\n+ style={{\n+ backgroundColor: getGradientColor(\n+ Math.min(1, Math.max(0, duration \/ maxCommitDuration)) || 0\n+ ),\n+ }}\n+ \/>\n+ <div>\n+ timestamp: {formatTime(timestamp)}s\n+ <br \/>\n+ duration: {formatDuration(duration)}ms\n+ <\/div>\n+ <\/li>\n+ );\n+ });\n+ }\n+\n+ return (\n+ <Fragment>\n+ <div className={styles.Toolbar}>\n+ <div className={styles.Name}>{interaction.name}<\/div>\n+ <\/div>\n+ <div className={styles.Content}>\n+ <div className={styles.Commits}>Commits:<\/div>\n+ <ul className={styles.List}>{listItems}<\/ul>\n+ <\/div>\n+ <\/Fragment>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/SidebarSelectedFiberInfo.css b\/src\/devtools\/views\/Profiler\/SidebarSelectedFiberInfo.css\nnew file mode 100644\nindex 0000000000..2ea9526d96\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/SidebarSelectedFiberInfo.css\n@@ -0,0 +1,76 @@\n+.Toolbar {\n+ height: 2.25rem;\n+ padding: 0 0.5rem;\n+ flex: 0 0 auto;\n+ display: flex;\n+ align-items: center;\n+ border-bottom: 1px solid var(--color-border);\n+}\n+\n+.Content {\n+ padding: 0.5rem;\n+ user-select: none;\n+ overflow-y: auto;\n+}\n+\n+.WhatChanged {\n+ margin-bottom: 1rem;\n+}\n+\n+.Component {\n+ flex: 1;\n+ color: var(--color-component-name);\n+ font-family: var(--font-family-monospace);\n+ font-size: var(--font-size-monospace-normal);\n+ white-space: nowrap;\n+ overflow-x: hidden;\n+ text-overflow: ellipsis;\n+}\n+\n+.Label {\n+ font-weight: bold;\n+ margin-bottom: 0.5rem;\n+}\n+\n+.CurrentCommit,\n+.Commit {\n+ display: block;\n+ width: 100%;\n+ text-align: left;\n+ background: none;\n+ border: none;\n+ padding: 0.25rem 0.5rem;\n+ color: var(--color-text);\n+}\n+.Commit:focus,\n+.Commit:hover {\n+ outline: none;\n+ background-color: var(--color-background-hover);\n+}\n+\n+.CurrentCommit {\n+ background-color: var(--color-background-selected);\n+ color: var(--color-text-selected);\n+}\n+.CurrentCommit:focus {\n+ outline: none;\n+}\n+\n+.WhatChangedItem {\n+ margin-top: 0.25rem;\n+}\n+\n+.WhatChangedKey {\n+ font-family: var(--font-family-monospace);\n+ font-size: var(--font-size-monospace-small);\n+ line-height: 1;\n+}\n+.WhatChangedKey:first-of-type::before {\n+ content: ' (';\n+}\n+.WhatChangedKey::after {\n+ content: ', ';\n+}\n+.WhatChangedKey:last-of-type::after {\n+ content: ')';\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/SidebarSelectedFiberInfo.js b\/src\/devtools\/views\/Profiler\/SidebarSelectedFiberInfo.js\nnew file mode 100644\nindex 0000000000..9a34361a17\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/SidebarSelectedFiberInfo.js\n@@ -0,0 +1,207 @@\n+\/\/ @flow\n+\n+import React, { Fragment, useContext } from 'react';\n+import ProfilerStore from 'src\/devtools\/ProfilerStore';\n+import { ProfilerContext } from '.\/ProfilerContext';\n+import { formatDuration, formatTime } from '.\/utils';\n+import { StoreContext } from '..\/context';\n+import Button from '..\/Button';\n+import ButtonIcon from '..\/ButtonIcon';\n+\n+import styles from '.\/SidebarSelectedFiberInfo.css';\n+\n+export type Props = {||};\n+\n+export default function SidebarSelectedFiberInfo(_: Props) {\n+ const { profilerStore } = useContext(StoreContext);\n+ const {\n+ rootID,\n+ selectCommitIndex,\n+ selectedCommitIndex,\n+ selectedFiberID,\n+ selectedFiberName,\n+ selectFiber,\n+ } = useContext(ProfilerContext);\n+ const { profilingCache } = profilerStore;\n+\n+ const commitIndices = profilingCache.getFiberCommits({\n+ fiberID: ((selectedFiberID: any): number),\n+ rootID: ((rootID: any): number),\n+ });\n+\n+ const listItems = [];\n+ for (let i = 0; i < commitIndices.length; i++) {\n+ const commitIndex = commitIndices[i];\n+\n+ const { duration, timestamp } = profilerStore.getCommitData(\n+ ((rootID: any): number),\n+ commitIndex\n+ );\n+\n+ listItems.push(\n+ <button\n+ key={commitIndex}\n+ className={\n+ selectedCommitIndex === commitIndex\n+ ? styles.CurrentCommit\n+ : styles.Commit\n+ }\n+ onClick={() => selectCommitIndex(commitIndex)}\n+ >\n+ {formatTime(timestamp)}s for {formatDuration(duration)}ms\n+ <\/button>\n+ );\n+ }\n+\n+ return (\n+ <Fragment>\n+ <div className={styles.Toolbar}>\n+ <div className={styles.Component}>\n+ {selectedFiberName || 'Selected component'}\n+ <\/div>\n+\n+ <Button\n+ className={styles.IconButton}\n+ onClick={() => selectFiber(null, null)}\n+ title=\"Back to commit view\"\n+ >\n+ <ButtonIcon type=\"close\" \/>\n+ <\/Button>\n+ <\/div>\n+ <div className={styles.Content}>\n+ <WhatChanged\n+ commitIndex={((selectedCommitIndex: any): number)}\n+ fiberID={((selectedFiberID: any): number)}\n+ profilerStore={profilerStore}\n+ rootID={((rootID: any): number)}\n+ \/>\n+ {listItems.length > 0 && (\n+ <Fragment>\n+ <label className={styles.Label}>Rendered at<\/label>: {listItems}\n+ <\/Fragment>\n+ )}\n+ {listItems.length === 0 && (\n+ <div>Did not render during this profiling session.<\/div>\n+ )}\n+ <\/div>\n+ <\/Fragment>\n+ );\n+}\n+\n+type WhatChangedProps = {|\n+ commitIndex: number,\n+ fiberID: number,\n+ profilerStore: ProfilerStore,\n+ rootID: number,\n+|};\n+\n+function WhatChanged({\n+ commitIndex,\n+ fiberID,\n+ profilerStore,\n+ rootID,\n+}: WhatChangedProps) {\n+ const { changeDescriptions } = profilerStore.getCommitData(\n+ ((rootID: any): number),\n+ commitIndex\n+ );\n+ if (changeDescriptions === null) {\n+ return null;\n+ }\n+\n+ const changeDescription = changeDescriptions.get(fiberID);\n+ if (changeDescription == null) {\n+ return null;\n+ }\n+\n+ if (changeDescription.isFirstMount) {\n+ return (\n+ <div className={styles.WhatChanged}>\n+ <label className={styles.Label}>Why did this render?<\/label>\n+ <div className={styles.WhatChangedItem}>\n+ This is the first time the component rendered.\n+ <\/div>\n+ <\/div>\n+ );\n+ }\n+\n+ const changes = [];\n+\n+ if (changeDescription.context === true) {\n+ changes.push(\n+ <div key=\"context\" className={styles.WhatChangedItem}>\n+ • Context changed\n+ <\/div>\n+ );\n+ } else if (\n+ typeof changeDescription.context === 'object' &&\n+ changeDescription.context !== null &&\n+ changeDescription.context.length !== 0\n+ ) {\n+ changes.push(\n+ <div key=\"context\" className={styles.WhatChangedItem}>\n+ • Context changed:\n+ {changeDescription.context.map(key => (\n+ <span key={key} className={styles.WhatChangedKey}>\n+ {key}\n+ <\/span>\n+ ))}\n+ <\/div>\n+ );\n+ }\n+\n+ if (changeDescription.didHooksChange) {\n+ changes.push(\n+ <div key=\"hooks\" className={styles.WhatChangedItem}>\n+ • Hooks changed\n+ <\/div>\n+ );\n+ }\n+\n+ if (\n+ changeDescription.props !== null &&\n+ changeDescription.props.length !== 0\n+ ) {\n+ changes.push(\n+ <div key=\"props\" className={styles.WhatChangedItem}>\n+ • Props changed:\n+ {changeDescription.props.map(key => (\n+ <span key={key} className={styles.WhatChangedKey}>\n+ {key}\n+ <\/span>\n+ ))}\n+ <\/div>\n+ );\n+ }\n+\n+ if (\n+ changeDescription.state !== null &&\n+ changeDescription.state.length !== 0\n+ ) {\n+ changes.push(\n+ <div key=\"state\" className={styles.WhatChangedItem}>\n+ • State changed:\n+ {changeDescription.state.map(key => (\n+ <span key={key} className={styles.WhatChangedKey}>\n+ {key}\n+ <\/span>\n+ ))}\n+ <\/div>\n+ );\n+ }\n+\n+ if (changes.length === 0) {\n+ changes.push(\n+ <div key=\"nothing\" className={styles.WhatChangedItem}>\n+ The parent component rendered.\n+ <\/div>\n+ );\n+ }\n+\n+ return (\n+ <div className={styles.WhatChanged}>\n+ <label className={styles.Label}>Why did this render?<\/label>\n+ {changes}\n+ <\/div>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/SnapshotCommitList.css b\/src\/devtools\/views\/Profiler\/SnapshotCommitList.css\nnew file mode 100644\nindex 0000000000..53faae5c38\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/SnapshotCommitList.css\n@@ -0,0 +1,9 @@\n+.List {\n+ \/**\n+ * The decision to suppress the default (horizontal) scroll bars is intentional.\n+ * The snapshot selector is small enough that the scrollbar renders it essentially useless.\n+ * There are two alternative navigation mechanisms (arrow keys and arrow buttons).\n+ * If necessary, we could also expand the click-and-drag mechanism to scroll.\n+ *\/\n+ overflow-x: hidden !important;\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/SnapshotCommitList.js b\/src\/devtools\/views\/Profiler\/SnapshotCommitList.js\nnew file mode 100644\nindex 0000000000..433750fdd8\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/SnapshotCommitList.js\n@@ -0,0 +1,178 @@\n+\/\/ @flow\n+\n+import React, {\n+ useCallback,\n+ useEffect,\n+ useMemo,\n+ useRef,\n+ useState,\n+} from 'react';\n+import AutoSizer from 'react-virtualized-auto-sizer';\n+import { FixedSizeList } from 'react-window';\n+import SnapshotCommitListItem from '.\/SnapshotCommitListItem';\n+import { minBarWidth } from '.\/constants';\n+\n+import styles from '.\/SnapshotCommitList.css';\n+\n+export type ItemData = {|\n+ commitDurations: Array<number>,\n+ commitTimes: Array<number>,\n+ filteredCommitIndices: Array<number>,\n+ isMouseDown: boolean,\n+ maxDuration: number,\n+ selectedCommitIndex: number | null,\n+ selectedFilteredCommitIndex: number | null,\n+ selectCommitIndex: (index: number) => void,\n+|};\n+\n+type Props = {|\n+ commitDurations: Array<number>,\n+ commitTimes: Array<number>,\n+ filteredCommitIndices: Array<number>,\n+ selectedCommitIndex: number | null,\n+ selectedFilteredCommitIndex: number | null,\n+ selectCommitIndex: (index: number) => void,\n+|};\n+\n+export default function SnapshotCommitList({\n+ commitDurations,\n+ commitTimes,\n+ filteredCommitIndices,\n+ selectedCommitIndex,\n+ selectedFilteredCommitIndex,\n+ selectCommitIndex,\n+}: Props) {\n+ return (\n+ <AutoSizer>\n+ {({ height, width }) => (\n+ <List\n+ commitDurations={commitDurations}\n+ commitTimes={commitTimes}\n+ height={height}\n+ filteredCommitIndices={filteredCommitIndices}\n+ selectedCommitIndex={selectedCommitIndex}\n+ selectedFilteredCommitIndex={selectedFilteredCommitIndex}\n+ selectCommitIndex={selectCommitIndex}\n+ width={width}\n+ \/>\n+ )}\n+ <\/AutoSizer>\n+ );\n+}\n+\n+type ListProps = {|\n+ commitDurations: Array<number>,\n+ commitTimes: Array<number>,\n+ height: number,\n+ filteredCommitIndices: Array<number>,\n+ selectedCommitIndex: number | null,\n+ selectedFilteredCommitIndex: number | null,\n+ selectCommitIndex: (index: number) => void,\n+ width: number,\n+|};\n+\n+function List({\n+ commitDurations,\n+ selectedCommitIndex,\n+ commitTimes,\n+ height,\n+ filteredCommitIndices,\n+ selectedFilteredCommitIndex,\n+ selectCommitIndex,\n+ width,\n+}: ListProps) {\n+ const listRef = useRef<FixedSizeList<ItemData> | null>(null);\n+ const divRef = useRef<HTMLDivElement | null>(null);\n+ const prevCommitIndexRef = useRef<number | null>(null);\n+\n+ \/\/ Make sure a newly selected snapshot is fully visible within the list.\n+ useEffect(() => {\n+ if (selectedFilteredCommitIndex !== prevCommitIndexRef.current) {\n+ prevCommitIndexRef.current = selectedFilteredCommitIndex;\n+ if (selectedFilteredCommitIndex !== null && listRef.current !== null) {\n+ listRef.current.scrollToItem(selectedFilteredCommitIndex);\n+ }\n+ }\n+ }, [listRef, selectedFilteredCommitIndex]);\n+\n+ \/\/ When the mouse is down, dragging over a commit should auto-select it.\n+ \/\/ This provides a nice way for users to swipe across a range of commits to compare them.\n+ const [isMouseDown, setIsMouseDown] = useState(false);\n+ const handleMouseDown = useCallback(() => {\n+ setIsMouseDown(true);\n+ }, []);\n+ const handleMouseUp = useCallback(() => {\n+ setIsMouseDown(false);\n+ }, []);\n+ useEffect(() => {\n+ if (divRef.current === null) {\n+ return () => {};\n+ }\n+\n+ \/\/ It's important to listen to the ownerDocument to support the browser extension.\n+ \/\/ Here we use portals to render individual tabs (e.g. Profiler),\n+ \/\/ and the root document might belong to a different window.\n+ const ownerDocument = divRef.current.ownerDocument;\n+ ownerDocument.addEventListener('mouseup', handleMouseUp);\n+ return () => ownerDocument.removeEventListener('mouseup', handleMouseUp);\n+ }, [divRef, handleMouseUp]);\n+\n+ const itemSize = useMemo(\n+ () => Math.max(minBarWidth, width \/ filteredCommitIndices.length),\n+ [filteredCommitIndices, width]\n+ );\n+ const maxDuration = useMemo(\n+ () =>\n+ commitDurations.reduce(\n+ (maxDuration, duration) => Math.max(maxDuration, duration),\n+ 0\n+ ),\n+ [commitDurations]\n+ );\n+\n+ \/\/ Pass required contextual data down to the ListItem renderer.\n+ const itemData = useMemo<ItemData>(\n+ () => ({\n+ commitDurations,\n+ commitTimes,\n+ filteredCommitIndices,\n+ isMouseDown,\n+ maxDuration,\n+ selectedCommitIndex,\n+ selectedFilteredCommitIndex,\n+ selectCommitIndex,\n+ }),\n+ [\n+ commitDurations,\n+ commitTimes,\n+ filteredCommitIndices,\n+ isMouseDown,\n+ maxDuration,\n+ selectedCommitIndex,\n+ selectedFilteredCommitIndex,\n+ selectCommitIndex,\n+ ]\n+ );\n+\n+ return (\n+ <div\n+ onMouseDown={handleMouseDown}\n+ onMouseUp={handleMouseUp}\n+ ref={divRef}\n+ style={{ height, width }}\n+ >\n+ <FixedSizeList\n+ className={styles.List}\n+ layout=\"horizontal\"\n+ height={height}\n+ itemCount={filteredCommitIndices.length}\n+ itemData={itemData}\n+ itemSize={itemSize}\n+ ref={(listRef: any) \/* Flow bug? *\/}\n+ width={width}\n+ >\n+ {SnapshotCommitListItem}\n+ <\/FixedSizeList>\n+ <\/div>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/SnapshotCommitListItem.css b\/src\/devtools\/views\/Profiler\/SnapshotCommitListItem.css\nnew file mode 100644\nindex 0000000000..dc6592a931\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/SnapshotCommitListItem.css\n@@ -0,0 +1,16 @@\n+.Outer {\n+ user-select: none;\n+ cursor: pointer;\n+ border-bottom: 3px solid transparent;\n+ padding-top: 4px;\n+ padding-bottom: 1px;\n+ display: flex;\n+ align-items: flex-end;\n+}\n+\n+.Inner {\n+ width: 100%;\n+ min-height: 5px;\n+ background-color: var(--color-commit-did-not-render-fill);\n+ color: var(--color-commit-did-not-render-fill-text);\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/SnapshotCommitListItem.js b\/src\/devtools\/views\/Profiler\/SnapshotCommitListItem.js\nnew file mode 100644\nindex 0000000000..4116d41f36\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/SnapshotCommitListItem.js\n@@ -0,0 +1,74 @@\n+\/\/ @flow\n+\n+import React, { memo, useCallback } from 'react';\n+import { areEqual } from 'react-window';\n+import { getGradientColor, formatDuration, formatTime } from '.\/utils';\n+\n+import styles from '.\/SnapshotCommitListItem.css';\n+\n+import type { ItemData } from '.\/SnapshotCommitList';\n+\n+type Props = {\n+ data: ItemData,\n+ index: number,\n+ style: Object,\n+};\n+\n+function SnapshotCommitListItem({ data: itemData, index, style }: Props) {\n+ const {\n+ commitDurations,\n+ commitTimes,\n+ filteredCommitIndices,\n+ isMouseDown,\n+ maxDuration,\n+ selectedCommitIndex,\n+ selectCommitIndex,\n+ } = itemData;\n+\n+ index = filteredCommitIndices[index];\n+\n+ const commitDuration = commitDurations[index];\n+ const commitTime = commitTimes[index];\n+\n+ const handleClick = useCallback(() => selectCommitIndex(index), [\n+ index,\n+ selectCommitIndex,\n+ ]);\n+\n+ \/\/ Guard against commits with duration 0\n+ const percentage =\n+ Math.min(1, Math.max(0, commitDuration \/ maxDuration)) || 0;\n+ const isSelected = selectedCommitIndex === index;\n+\n+ \/\/ Leave a 1px gap between snapshots\n+ const width = parseFloat(style.width) - 1;\n+\n+ return (\n+ <div\n+ className={styles.Outer}\n+ onClick={handleClick}\n+ onMouseEnter={isMouseDown ? handleClick : null}\n+ style={{\n+ ...style,\n+ width,\n+ borderBottom: isSelected\n+ ? '3px solid var(--color-tab-selected-border)'\n+ : undefined,\n+ }}\n+ title={`Duration ${formatDuration(commitDuration)}ms at ${formatTime(\n+ commitTime\n+ )}s`}\n+ >\n+ <div\n+ className={styles.Inner}\n+ style={{\n+ height: `${Math.round(percentage * 100)}%`,\n+ backgroundColor:\n+ percentage > 0 ? getGradientColor(percentage) : undefined,\n+ }}\n+ \/>\n+ <\/div>\n+ );\n+}\n+\n+export default memo<Props>(SnapshotCommitListItem, areEqual);\ndiff --git a\/src\/devtools\/views\/Profiler\/SnapshotSelector.css b\/src\/devtools\/views\/Profiler\/SnapshotSelector.css\nnew file mode 100644\nindex 0000000000..e4f8aec57d\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/SnapshotSelector.css\n@@ -0,0 +1,30 @@\n+.Button {\n+ flex: 0 0 auto;\n+ margin-left: 0.25rem;\n+}\n+\n+.Commits {\n+ height: 100%;\n+ min-width: 30px;\n+ margin-left: 0.25rem;\n+ overflow: hidden;\n+}\n+.Commits:focus {\n+ outline: none;\n+ background-color: var(--color-button-background-focus);\n+}\n+\n+.IndexLabel {\n+ flex: 0 0 auto;\n+ white-space: nowrap;\n+ font-family: var(--font-family-monospace);\n+ margin-left: 0.25rem;\n+}\n+\n+.NoCommits {\n+ height: 100%;\n+ display: flex;\n+ align-items: center;\n+ justify-content: center;\n+ color: var(--color-dim);\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/SnapshotSelector.js b\/src\/devtools\/views\/Profiler\/SnapshotSelector.js\nnew file mode 100644\nindex 0000000000..a41187d89d\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/SnapshotSelector.js\n@@ -0,0 +1,173 @@\n+\/\/ @flow\n+\n+import React, { Fragment, useCallback, useContext, useMemo } from 'react';\n+import Button from '..\/Button';\n+import ButtonIcon from '..\/ButtonIcon';\n+import { ProfilerContext } from '.\/ProfilerContext';\n+import SnapshotCommitList from '.\/SnapshotCommitList';\n+import { maxBarWidth } from '.\/constants';\n+import { StoreContext } from '..\/context';\n+\n+import styles from '.\/SnapshotSelector.css';\n+\n+export type Props = {||};\n+\n+export default function SnapshotSelector(_: Props) {\n+ const {\n+ isCommitFilterEnabled,\n+ minCommitDuration,\n+ rootID,\n+ selectedCommitIndex,\n+ selectCommitIndex,\n+ } = useContext(ProfilerContext);\n+\n+ const { profilerStore } = useContext(StoreContext);\n+ const { commitData } = profilerStore.getDataForRoot(((rootID: any): number));\n+\n+ const commitDurations: Array<number> = [];\n+ const commitTimes: Array<number> = [];\n+ commitData.forEach(commitDatum => {\n+ commitDurations.push(commitDatum.duration);\n+ commitTimes.push(commitDatum.timestamp);\n+ });\n+\n+ const filteredCommitIndices = useMemo(\n+ () =>\n+ commitData.reduce((reduced, commitDatum, index) => {\n+ if (\n+ !isCommitFilterEnabled ||\n+ commitDatum.duration >= minCommitDuration\n+ ) {\n+ reduced.push(index);\n+ }\n+ return reduced;\n+ }, []),\n+ [commitData, isCommitFilterEnabled, minCommitDuration]\n+ );\n+\n+ const numFilteredCommits = filteredCommitIndices.length;\n+\n+ \/\/ Map the (unfiltered) selected commit index to an index within the filtered data.\n+ const selectedFilteredCommitIndex = useMemo(() => {\n+ if (selectedCommitIndex !== null) {\n+ for (let i = 0; i < filteredCommitIndices.length; i++) {\n+ if (filteredCommitIndices[i] === selectedCommitIndex) {\n+ return i;\n+ }\n+ }\n+ }\n+ return null;\n+ }, [filteredCommitIndices, selectedCommitIndex]);\n+\n+ \/\/ TODO (profiling) This should be managed by the context controller (reducer).\n+ \/\/ It doesn't currently know about the filtered commits though (since it doesn't suspend).\n+ \/\/ Maybe this component should pass filteredCommitIndices up?\n+ if (selectedFilteredCommitIndex === null) {\n+ if (numFilteredCommits > 0) {\n+ selectCommitIndex(0);\n+ } else {\n+ selectCommitIndex(null);\n+ }\n+ } else if (selectedFilteredCommitIndex >= numFilteredCommits) {\n+ selectCommitIndex(numFilteredCommits === 0 ? null : numFilteredCommits - 1);\n+ }\n+\n+ let label = null;\n+ if (numFilteredCommits > 0) {\n+ label =\n+ `${selectedFilteredCommitIndex + 1}`.padStart(\n+ `${numFilteredCommits}`.length,\n+ '0'\n+ ) +\n+ ' \/ ' +\n+ numFilteredCommits;\n+ }\n+\n+ const viewNextCommit = useCallback(() => {\n+ const nextCommitIndex = Math.min(\n+ ((selectedFilteredCommitIndex: any): number) + 1,\n+ filteredCommitIndices.length - 1\n+ );\n+ selectCommitIndex(filteredCommitIndices[nextCommitIndex]);\n+ }, [selectedFilteredCommitIndex, filteredCommitIndices, selectCommitIndex]);\n+ const viewPrevCommit = useCallback(() => {\n+ const nextCommitIndex = Math.max(\n+ ((selectedFilteredCommitIndex: any): number) - 1,\n+ 0\n+ );\n+ selectCommitIndex(filteredCommitIndices[nextCommitIndex]);\n+ }, [selectedFilteredCommitIndex, filteredCommitIndices, selectCommitIndex]);\n+\n+ const handleKeyDown = useCallback(\n+ event => {\n+ switch (event.key) {\n+ case 'ArrowLeft':\n+ viewPrevCommit();\n+ event.stopPropagation();\n+ break;\n+ case 'ArrowRight':\n+ viewNextCommit();\n+ event.stopPropagation();\n+ break;\n+ default:\n+ break;\n+ }\n+ },\n+ [viewNextCommit, viewPrevCommit]\n+ );\n+\n+ if (commitData.length === 0) {\n+ return null;\n+ }\n+\n+ return (\n+ <Fragment>\n+ <span className={styles.IndexLabel}>{label}<\/span>\n+ <Button\n+ className={styles.Button}\n+ disabled={selectedFilteredCommitIndex === 0 || numFilteredCommits === 0}\n+ onClick={viewPrevCommit}\n+ title=\"Select previous commit\"\n+ >\n+ <ButtonIcon type=\"previous\" \/>\n+ <\/Button>\n+ <div\n+ className={styles.Commits}\n+ onKeyDown={handleKeyDown}\n+ style={{\n+ flex: numFilteredCommits > 0 ? '1 1 auto' : '0 0 auto',\n+ maxWidth:\n+ numFilteredCommits > 0\n+ ? numFilteredCommits * maxBarWidth\n+ : undefined,\n+ }}\n+ tabIndex={0}\n+ >\n+ {numFilteredCommits > 0 && (\n+ <SnapshotCommitList\n+ commitDurations={commitDurations}\n+ commitTimes={commitTimes}\n+ filteredCommitIndices={filteredCommitIndices}\n+ selectedCommitIndex={selectedCommitIndex}\n+ selectedFilteredCommitIndex={selectedFilteredCommitIndex}\n+ selectCommitIndex={selectCommitIndex}\n+ \/>\n+ )}\n+ {numFilteredCommits === 0 && (\n+ <div className={styles.NoCommits}>No commits<\/div>\n+ )}\n+ <\/div>\n+ <Button\n+ className={styles.Button}\n+ disabled={\n+ selectedFilteredCommitIndex === null ||\n+ selectedFilteredCommitIndex >= numFilteredCommits - 1\n+ }\n+ onClick={viewNextCommit}\n+ title=\"Select next commit\"\n+ >\n+ <ButtonIcon type=\"next\" \/>\n+ <\/Button>\n+ <\/Fragment>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/constants.js b\/src\/devtools\/views\/Profiler\/constants.js\nnew file mode 100644\nindex 0000000000..664dfe354b\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/constants.js\n@@ -0,0 +1,7 @@\n+\/\/ @flow\n+\n+export const barWidthThreshold = 2;\n+export const interactionCommitSize = 10;\n+export const interactionLabelWidth = 200;\n+export const maxBarWidth = 30;\n+export const minBarWidth = 5;\ndiff --git a\/src\/devtools\/views\/Profiler\/types.js b\/src\/devtools\/views\/Profiler\/types.js\nnew file mode 100644\nindex 0000000000..d8c954e5b7\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/types.js\n@@ -0,0 +1,132 @@\n+\/\/ @flow\n+\n+import type { ElementType } from 'src\/types';\n+\n+export type CommitTreeNode = {|\n+ id: number,\n+ children: Array<number>,\n+ displayName: string | null,\n+ key: number | string | null,\n+ parentID: number,\n+ treeBaseDuration: number,\n+ type: ElementType,\n+|};\n+\n+export type CommitTree = {|\n+ nodes: Map<number, CommitTreeNode>,\n+ rootID: number,\n+|};\n+\n+export type Interaction = {|\n+ id: number,\n+ name: string,\n+ timestamp: number,\n+|};\n+\n+export type SnapshotNode = {|\n+ id: number,\n+ children: Array<number>,\n+ displayName: string | null,\n+ key: number | string | null,\n+ type: ElementType,\n+|};\n+\n+export type ChangeDescription = {|\n+ context: Array<string> | boolean | null,\n+ didHooksChange: boolean,\n+ isFirstMount: boolean,\n+ props: Array<string> | null,\n+ state: Array<string> | null,\n+|};\n+\n+export type CommitDataFrontend = {|\n+ \/\/ Map of Fiber (ID) to a description of what changed in this commit.\n+ changeDescriptions: Map<number, ChangeDescription> | null,\n+\n+ \/\/ How long was this commit?\n+ duration: number,\n+\n+ \/\/ Map of Fiber (ID) to actual duration for this commit;\n+ \/\/ Fibers that did not render will not have entries in this Map.\n+ fiberActualDurations: Map<number, number>,\n+\n+ \/\/ Map of Fiber (ID) to \"self duration\" for this commit;\n+ \/\/ Fibers that did not render will not have entries in this Map.\n+ fiberSelfDurations: Map<number, number>,\n+\n+ \/\/ Which interactions (IDs) were associated with this commit.\n+ interactionIDs: Array<number>,\n+\n+ \/\/ Priority level of the commit (if React provided this info)\n+ priorityLevel: string | null,\n+\n+ \/\/ When did this commit occur (relative to the start of profiling)\n+ timestamp: number,\n+|};\n+\n+export type ProfilingDataForRootFrontend = {|\n+ \/\/ Timing, duration, and other metadata about each commit.\n+ commitData: Array<CommitDataFrontend>,\n+\n+ \/\/ Display name of the nearest descendant component (ideally a function or class component).\n+ \/\/ This value is used by the root selector UI.\n+ displayName: string,\n+\n+ \/\/ Map of fiber id to (initial) tree base duration when Profiling session was started.\n+ \/\/ This info can be used along with commitOperations to reconstruct the tree for any commit.\n+ initialTreeBaseDurations: Map<number, number>,\n+\n+ \/\/ All interactions recorded (for this root) during the current session.\n+ interactionCommits: Map<number, Array<number>>,\n+\n+ \/\/ All interactions recorded (for this root) during the current session.\n+ interactions: Map<number, Interaction>,\n+\n+ \/\/ List of tree mutation that occur during profiling.\n+ \/\/ These mutations can be used along with initial snapshots to reconstruct the tree for any commit.\n+ operations: Array<Array<number>>,\n+\n+ \/\/ Identifies the root this profiler data corresponds to.\n+ rootID: number,\n+\n+ \/\/ Map of fiber id to node when the Profiling session was started.\n+ \/\/ This info can be used along with commitOperations to reconstruct the tree for any commit.\n+ snapshots: Map<number, SnapshotNode>,\n+|};\n+\n+\/\/ Combination of profiling data collected by the renderer interface (backend) and Store (frontend).\n+export type ProfilingDataFrontend = {|\n+ \/\/ Profiling data per root.\n+ dataForRoots: Map<number, ProfilingDataForRootFrontend>,\n+|};\n+\n+export type CommitDataExport = {|\n+ changeDescriptions: Array<[number, ChangeDescription]> | null,\n+ duration: number,\n+ \/\/ Tuple of fiber ID and actual duration\n+ fiberActualDurations: Array<[number, number]>,\n+ \/\/ Tuple of fiber ID and computed \"self\" duration\n+ fiberSelfDurations: Array<[number, number]>,\n+ interactionIDs: Array<number>,\n+ priorityLevel: string | null,\n+ timestamp: number,\n+|};\n+\n+export type ProfilingDataForRootExport = {|\n+ commitData: Array<CommitDataExport>,\n+ displayName: string,\n+ \/\/ Tuple of Fiber ID and base duration\n+ initialTreeBaseDurations: Array<[number, number]>,\n+ \/\/ Tuple of Interaction ID and commit indices\n+ interactionCommits: Array<[number, Array<number>]>,\n+ interactions: Array<[number, Interaction]>,\n+ operations: Array<Array<number>>,\n+ rootID: number,\n+ snapshots: Array<[number, SnapshotNode]>,\n+|};\n+\n+\/\/ Serializable vefrsion of ProfilingDataFrontend data.\n+export type ProfilingDataExport = {|\n+ version: 4,\n+ dataForRoots: Array<ProfilingDataForRootExport>,\n+|};\ndiff --git a\/src\/devtools\/views\/Profiler\/utils.js b\/src\/devtools\/views\/Profiler\/utils.js\nnew file mode 100644\nindex 0000000000..973d5ba2d5\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/utils.js\n@@ -0,0 +1,229 @@\n+\/\/ @flow\n+\n+import { PROFILER_EXPORT_VERSION } from 'src\/constants';\n+\n+import type { ProfilingDataBackend } from 'src\/backend\/types';\n+import type {\n+ ProfilingDataExport,\n+ ProfilingDataForRootExport,\n+ ProfilingDataForRootFrontend,\n+ ProfilingDataFrontend,\n+ SnapshotNode,\n+} from '.\/types';\n+\n+const commitGradient = [\n+ 'var(--color-commit-gradient-0)',\n+ 'var(--color-commit-gradient-1)',\n+ 'var(--color-commit-gradient-2)',\n+ 'var(--color-commit-gradient-3)',\n+ 'var(--color-commit-gradient-4)',\n+ 'var(--color-commit-gradient-5)',\n+ 'var(--color-commit-gradient-6)',\n+ 'var(--color-commit-gradient-7)',\n+ 'var(--color-commit-gradient-8)',\n+ 'var(--color-commit-gradient-9)',\n+];\n+\n+\/\/ Combines info from the Store (frontend) and renderer interfaces (backend) into the format required by the Profiler UI.\n+\/\/ This format can then be quickly exported (and re-imported).\n+export function prepareProfilingDataFrontendFromBackendAndStore(\n+ dataBackends: Array<ProfilingDataBackend>,\n+ operationsByRootID: Map<number, Array<Array<number>>>,\n+ snapshotsByRootID: Map<number, Map<number, SnapshotNode>>\n+): ProfilingDataFrontend {\n+ const dataForRoots: Map<number, ProfilingDataForRootFrontend> = new Map();\n+\n+ dataBackends.forEach(dataBackend => {\n+ dataBackend.dataForRoots.forEach(\n+ ({\n+ commitData,\n+ displayName,\n+ initialTreeBaseDurations,\n+ interactionCommits,\n+ interactions,\n+ rootID,\n+ }) => {\n+ const operations = operationsByRootID.get(rootID);\n+ if (operations == null) {\n+ throw Error(`Could not find profiling operations for root ${rootID}`);\n+ }\n+\n+ const snapshots = snapshotsByRootID.get(rootID);\n+ if (snapshots == null) {\n+ throw Error(`Could not find profiling snapshots for root ${rootID}`);\n+ }\n+\n+ dataForRoots.set(rootID, {\n+ commitData: commitData.map((commitDataBackend, commitIndex) => ({\n+ changeDescriptions:\n+ commitDataBackend.changeDescriptions != null\n+ ? new Map(commitDataBackend.changeDescriptions)\n+ : null,\n+ duration: commitDataBackend.duration,\n+ fiberActualDurations: new Map(\n+ commitDataBackend.fiberActualDurations\n+ ),\n+ fiberSelfDurations: new Map(commitDataBackend.fiberSelfDurations),\n+ interactionIDs: commitDataBackend.interactionIDs,\n+ priorityLevel: commitDataBackend.priorityLevel,\n+ timestamp: commitDataBackend.timestamp,\n+ })),\n+ displayName,\n+ initialTreeBaseDurations: new Map(initialTreeBaseDurations),\n+ interactionCommits: new Map(interactionCommits),\n+ interactions: new Map(interactions),\n+ operations,\n+ rootID,\n+ snapshots,\n+ });\n+ }\n+ );\n+ });\n+\n+ return { dataForRoots };\n+}\n+\n+\/\/ Converts a Profiling data export into the format required by the Store.\n+export function prepareProfilingDataFrontendFromExport(\n+ profilingDataExport: ProfilingDataExport\n+): ProfilingDataFrontend {\n+ const { version } = profilingDataExport;\n+\n+ if (version !== PROFILER_EXPORT_VERSION) {\n+ throw Error(`Unsupported profiler export version \"${version}\"`);\n+ }\n+\n+ const dataForRoots: Map<number, ProfilingDataForRootFrontend> = new Map();\n+ profilingDataExport.dataForRoots.forEach(\n+ ({\n+ commitData,\n+ displayName,\n+ initialTreeBaseDurations,\n+ interactionCommits,\n+ interactions,\n+ operations,\n+ rootID,\n+ snapshots,\n+ }) => {\n+ dataForRoots.set(rootID, {\n+ commitData: commitData.map(\n+ ({\n+ changeDescriptions,\n+ duration,\n+ fiberActualDurations,\n+ fiberSelfDurations,\n+ interactionIDs,\n+ priorityLevel,\n+ timestamp,\n+ }) => ({\n+ changeDescriptions:\n+ changeDescriptions != null ? new Map(changeDescriptions) : null,\n+ duration,\n+ fiberActualDurations: new Map(fiberActualDurations),\n+ fiberSelfDurations: new Map(fiberSelfDurations),\n+ interactionIDs,\n+ priorityLevel,\n+ timestamp,\n+ })\n+ ),\n+ displayName,\n+ initialTreeBaseDurations: new Map(initialTreeBaseDurations),\n+ interactionCommits: new Map(interactionCommits),\n+ interactions: new Map(interactions),\n+ operations,\n+ rootID,\n+ snapshots: new Map(snapshots),\n+ });\n+ }\n+ );\n+\n+ return { dataForRoots };\n+}\n+\n+\/\/ Converts a Store Profiling data into a format that can be safely (JSON) serialized for export.\n+export function prepareProfilingDataExport(\n+ profilingDataFrontend: ProfilingDataFrontend\n+): ProfilingDataExport {\n+ const dataForRoots: Array<ProfilingDataForRootExport> = [];\n+ profilingDataFrontend.dataForRoots.forEach(\n+ ({\n+ commitData,\n+ displayName,\n+ initialTreeBaseDurations,\n+ interactionCommits,\n+ interactions,\n+ operations,\n+ rootID,\n+ snapshots,\n+ }) => {\n+ dataForRoots.push({\n+ commitData: commitData.map(\n+ ({\n+ changeDescriptions,\n+ duration,\n+ fiberActualDurations,\n+ fiberSelfDurations,\n+ interactionIDs,\n+ priorityLevel,\n+ timestamp,\n+ }) => ({\n+ changeDescriptions:\n+ changeDescriptions != null\n+ ? Array.from(changeDescriptions.entries())\n+ : null,\n+ duration,\n+ fiberActualDurations: Array.from(fiberActualDurations.entries()),\n+ fiberSelfDurations: Array.from(fiberSelfDurations.entries()),\n+ interactionIDs,\n+ priorityLevel,\n+ timestamp,\n+ })\n+ ),\n+ displayName,\n+ initialTreeBaseDurations: Array.from(\n+ initialTreeBaseDurations.entries()\n+ ),\n+ interactionCommits: Array.from(interactionCommits.entries()),\n+ interactions: Array.from(interactions.entries()),\n+ operations,\n+ rootID,\n+ snapshots: Array.from(snapshots.entries()),\n+ });\n+ }\n+ );\n+\n+ return {\n+ version: PROFILER_EXPORT_VERSION,\n+ dataForRoots,\n+ };\n+}\n+\n+export const getGradientColor = (value: number) => {\n+ const maxIndex = commitGradient.length - 1;\n+ let index;\n+ if (Number.isNaN(value)) {\n+ index = 0;\n+ } else if (!Number.isFinite(value)) {\n+ index = maxIndex;\n+ } else {\n+ index = Math.max(0, Math.min(maxIndex, value)) * maxIndex;\n+ }\n+ return commitGradient[Math.round(index)];\n+};\n+\n+export const formatDuration = (duration: number) =>\n+ Math.round(duration * 10) \/ 10 || '<0.1';\n+export const formatPercentage = (percentage: number) =>\n+ Math.round(percentage * 100);\n+export const formatTime = (timestamp: number) =>\n+ Math.round(Math.round(timestamp) \/ 100) \/ 10;\n+\n+export const scale = (\n+ minValue: number,\n+ maxValue: number,\n+ minRange: number,\n+ maxRange: number\n+) => (value: number, fallbackValue: number) =>\n+ maxValue - minValue === 0\n+ ? fallbackValue\n+ : ((value - minValue) \/ (maxValue - minValue)) * (maxRange - minRange);\ndiff --git a\/src\/devtools\/views\/ReactLogo.css b\/src\/devtools\/views\/ReactLogo.css\nnew file mode 100644\nindex 0000000000..a209f908d7\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/ReactLogo.css\n@@ -0,0 +1,6 @@\n+.ReactLogo {\n+ width: 1.75rem;\n+ height: 1.75rem;\n+ margin: 0 0.75rem 0 0.25rem;\n+ color: var(--color-button-active);\n+}\ndiff --git a\/src\/devtools\/views\/ReactLogo.js b\/src\/devtools\/views\/ReactLogo.js\nnew file mode 100644\nindex 0000000000..358a3a8ec8\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/ReactLogo.js\n@@ -0,0 +1,26 @@\n+\/\/ @flow\n+\n+import React from 'react';\n+\n+import styles from '.\/ReactLogo.css';\n+\n+type Props = {|\n+ className?: string,\n+|};\n+\n+export default function ReactLogo({ className }: Props) {\n+ return (\n+ <svg\n+ xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\n+ className={`${styles.ReactLogo} ${className || ''}`}\n+ viewBox=\"-11.5 -10.23174 23 20.46348\"\n+ >\n+ <circle cx=\"0\" cy=\"0\" r=\"2.05\" fill=\"currentColor\" \/>\n+ <g stroke=\"currentColor\" strokeWidth=\"1\" fill=\"none\">\n+ <ellipse rx=\"11\" ry=\"4.2\" \/>\n+ <ellipse rx=\"11\" ry=\"4.2\" transform=\"rotate(60)\" \/>\n+ <ellipse rx=\"11\" ry=\"4.2\" transform=\"rotate(120)\" \/>\n+ <\/g>\n+ <\/svg>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/Settings\/ComponentsSettings.js b\/src\/devtools\/views\/Settings\/ComponentsSettings.js\nnew file mode 100644\nindex 0000000000..6b62b935f1\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Settings\/ComponentsSettings.js\n@@ -0,0 +1,396 @@\n+\/\/ @flow\n+\n+import React, {\n+ useCallback,\n+ useContext,\n+ useEffect,\n+ useMemo,\n+ useRef,\n+ useState,\n+} from 'react';\n+import { useSubscription } from '..\/hooks';\n+import { StoreContext } from '..\/context';\n+import Store from 'src\/devtools\/store';\n+import Button from '..\/Button';\n+import ButtonIcon from '..\/ButtonIcon';\n+import Toggle from '..\/Toggle';\n+import {\n+ ComponentFilterDisplayName,\n+ ComponentFilterElementType,\n+ ComponentFilterHOC,\n+ ComponentFilterLocation,\n+ ElementTypeClass,\n+ ElementTypeContext,\n+ ElementTypeFunction,\n+ ElementTypeForwardRef,\n+ ElementTypeHostComponent,\n+ ElementTypeMemo,\n+ ElementTypeOtherOrUnknown,\n+ ElementTypeProfiler,\n+ ElementTypeSuspense,\n+} from 'src\/types';\n+\n+import styles from '.\/SettingsShared.css';\n+\n+import type {\n+ BooleanComponentFilter,\n+ ComponentFilter,\n+ ComponentFilterType,\n+ ElementType,\n+ ElementTypeComponentFilter,\n+ RegExpComponentFilter,\n+} from 'src\/types';\n+\n+export default function ComponentsSettings(_: {||}) {\n+ const store = useContext(StoreContext);\n+\n+ const collapseNodesByDefaultSubscription = useMemo(\n+ () => ({\n+ getCurrentValue: () => store.collapseNodesByDefault,\n+ subscribe: (callback: Function) => {\n+ store.addListener('collapseNodesByDefault', callback);\n+ return () => store.removeListener('collapseNodesByDefault', callback);\n+ },\n+ }),\n+ [store]\n+ );\n+ const collapseNodesByDefault = useSubscription<boolean, Store>(\n+ collapseNodesByDefaultSubscription\n+ );\n+\n+ const updateCollapseNodesByDefault = useCallback(\n+ ({ currentTarget }) => {\n+ store.collapseNodesByDefault = !currentTarget.checked;\n+ },\n+ [store]\n+ );\n+\n+ const [componentFilters, setComponentFilters] = useState<\n+ Array<ComponentFilter>\n+ >(() => [...store.componentFilters]);\n+\n+ const addFilter = useCallback(() => {\n+ setComponentFilters(componentFilters => {\n+ return [\n+ ...componentFilters,\n+ {\n+ type: ComponentFilterElementType,\n+ value: ElementTypeHostComponent,\n+ isEnabled: true,\n+ },\n+ ];\n+ });\n+ }, []);\n+\n+ const changeFilterType = useCallback(\n+ (componentFilter: ComponentFilter, type: ComponentFilterType) => {\n+ setComponentFilters(componentFilters => {\n+ const cloned: Array<ComponentFilter> = [...componentFilters];\n+ const index = componentFilters.indexOf(componentFilter);\n+ if (index >= 0) {\n+ if (type === ComponentFilterElementType) {\n+ cloned[index] = {\n+ type: ComponentFilterElementType,\n+ isEnabled: componentFilter.isEnabled,\n+ value: ElementTypeHostComponent,\n+ };\n+ } else if (type === ComponentFilterDisplayName) {\n+ cloned[index] = {\n+ type: ComponentFilterDisplayName,\n+ isEnabled: componentFilter.isEnabled,\n+ isValid: true,\n+ value: '',\n+ };\n+ } else if (type === ComponentFilterLocation) {\n+ cloned[index] = {\n+ type: ComponentFilterLocation,\n+ isEnabled: componentFilter.isEnabled,\n+ isValid: true,\n+ value: '',\n+ };\n+ } else if (type === ComponentFilterHOC) {\n+ cloned[index] = {\n+ type: ComponentFilterHOC,\n+ isEnabled: componentFilter.isEnabled,\n+ isValid: true,\n+ };\n+ }\n+ }\n+ return cloned;\n+ });\n+ },\n+ []\n+ );\n+\n+ const updateFilterValueElementType = useCallback(\n+ (componentFilter: ComponentFilter, value: ElementType) => {\n+ if (componentFilter.type !== ComponentFilterElementType) {\n+ throw Error('Invalid value for element type filter');\n+ }\n+\n+ setComponentFilters(componentFilters => {\n+ const cloned: Array<ComponentFilter> = [...componentFilters];\n+ if (componentFilter.type === ComponentFilterElementType) {\n+ const index = componentFilters.indexOf(componentFilter);\n+ if (index >= 0) {\n+ cloned[index] = {\n+ ...componentFilter,\n+ value,\n+ };\n+ }\n+ }\n+ return cloned;\n+ });\n+ },\n+ []\n+ );\n+\n+ const updateFilterValueRegExp = useCallback(\n+ (componentFilter: ComponentFilter, value: string) => {\n+ if (componentFilter.type === ComponentFilterElementType) {\n+ throw Error('Invalid value for element type filter');\n+ }\n+\n+ setComponentFilters(componentFilters => {\n+ const cloned: Array<ComponentFilter> = [...componentFilters];\n+ if (\n+ componentFilter.type === ComponentFilterDisplayName ||\n+ componentFilter.type === ComponentFilterLocation\n+ ) {\n+ const index = componentFilters.indexOf(componentFilter);\n+ if (index >= 0) {\n+ let isValid = true;\n+ try {\n+ new RegExp(value);\n+ } catch (error) {\n+ isValid = false;\n+ }\n+ cloned[index] = {\n+ ...componentFilter,\n+ isValid,\n+ value,\n+ };\n+ }\n+ }\n+ return cloned;\n+ });\n+ },\n+ []\n+ );\n+\n+ const removeFilter = useCallback((index: number) => {\n+ setComponentFilters(componentFilters => {\n+ const cloned: Array<ComponentFilter> = [...componentFilters];\n+ cloned.splice(index, 1);\n+ return cloned;\n+ });\n+ }, []);\n+\n+ const toggleFilterIsEnabled = useCallback(\n+ (componentFilter: ComponentFilter, isEnabled: boolean) => {\n+ setComponentFilters(componentFilters => {\n+ const cloned: Array<ComponentFilter> = [...componentFilters];\n+ const index = componentFilters.indexOf(componentFilter);\n+ if (index >= 0) {\n+ if (componentFilter.type === ComponentFilterElementType) {\n+ cloned[index] = {\n+ ...((cloned[index]: any): ElementTypeComponentFilter),\n+ isEnabled,\n+ };\n+ } else if (\n+ componentFilter.type === ComponentFilterDisplayName ||\n+ componentFilter.type === ComponentFilterLocation\n+ ) {\n+ cloned[index] = {\n+ ...((cloned[index]: any): RegExpComponentFilter),\n+ isEnabled,\n+ };\n+ } else if (componentFilter.type === ComponentFilterHOC) {\n+ cloned[index] = {\n+ ...((cloned[index]: any): BooleanComponentFilter),\n+ isEnabled,\n+ };\n+ }\n+ }\n+ return cloned;\n+ });\n+ },\n+ []\n+ );\n+\n+ \/\/ Filter updates are expensive to apply (since they impact the entire tree).\n+ \/\/ Only apply them on unmount.\n+ \/\/ The Store will avoid doing any expensive work unless they've changed.\n+ \/\/ We just want to batch the work in the event that they do change.\n+ const componentFiltersRef = useRef<Array<ComponentFilter>>(componentFilters);\n+ useEffect(() => {\n+ componentFiltersRef.current = componentFilters;\n+ return () => {};\n+ }, [componentFilters]);\n+ useEffect(\n+ () => () => {\n+ store.componentFilters = [...componentFiltersRef.current];\n+ },\n+ [store]\n+ );\n+\n+ return (\n+ <div className={styles.Settings}>\n+ <label className={styles.Setting}>\n+ <input\n+ type=\"checkbox\"\n+ checked={!collapseNodesByDefault}\n+ onChange={updateCollapseNodesByDefault}\n+ \/>{' '}\n+ Expand component tree by default\n+ <\/label>\n+\n+ <div className={styles.Header}>Hide components where...<\/div>\n+\n+ <table className={styles.Table}>\n+ <tbody>\n+ {componentFilters.length === 0 && (\n+ <tr className={styles.TableRow}>\n+ <td className={styles.NoFiltersCell}>\n+ No filters have been added.\n+ <\/td>\n+ <\/tr>\n+ )}\n+ {componentFilters.map((componentFilter, index) => (\n+ <tr className={styles.TableRow} key={index}>\n+ <td className={styles.TableCell}>\n+ <Toggle\n+ className={\n+ componentFilter.isValid !== false\n+ ? ''\n+ : styles.InvalidRegExp\n+ }\n+ isChecked={componentFilter.isEnabled}\n+ onChange={isEnabled =>\n+ toggleFilterIsEnabled(componentFilter, isEnabled)\n+ }\n+ title={\n+ componentFilter.isValid === false\n+ ? 'Filter invalid'\n+ : componentFilter.isEnabled\n+ ? 'Filter enabled'\n+ : 'Filter disabled'\n+ }\n+ >\n+ <ToggleIcon\n+ isEnabled={componentFilter.isEnabled}\n+ isValid={\n+ componentFilter.isValid == null ||\n+ componentFilter.isValid === true\n+ }\n+ \/>\n+ <\/Toggle>\n+ <\/td>\n+ <td className={styles.TableCell}>\n+ <select\n+ className={styles.Select}\n+ value={componentFilter.type}\n+ onChange={({ currentTarget }) =>\n+ changeFilterType(\n+ componentFilter,\n+ ((parseInt(\n+ currentTarget.value,\n+ 10\n+ ): any): ComponentFilterType)\n+ )\n+ }\n+ >\n+ <option value={ComponentFilterLocation}>location<\/option>\n+ <option value={ComponentFilterDisplayName}>name<\/option>\n+ <option value={ComponentFilterElementType}>type<\/option>\n+ <option value={ComponentFilterHOC}>hoc<\/option>\n+ <\/select>\n+ <\/td>\n+ <td className={styles.TableCell}>\n+ {componentFilter.type === ComponentFilterElementType &&\n+ 'equals'}\n+ {(componentFilter.type === ComponentFilterLocation ||\n+ componentFilter.type === ComponentFilterDisplayName) &&\n+ 'matches'}\n+ <\/td>\n+ <td className={styles.TableCell}>\n+ {componentFilter.type === ComponentFilterElementType && (\n+ <select\n+ className={styles.Select}\n+ value={componentFilter.value}\n+ onChange={({ currentTarget }) =>\n+ updateFilterValueElementType(\n+ componentFilter,\n+ ((parseInt(currentTarget.value, 10): any): ElementType)\n+ )\n+ }\n+ >\n+ <option value={ElementTypeClass}>class<\/option>\n+ <option value={ElementTypeContext}>context<\/option>\n+ <option value={ElementTypeFunction}>function<\/option>\n+ <option value={ElementTypeForwardRef}>forward ref<\/option>\n+ <option value={ElementTypeHostComponent}>\n+ host (e.g. <div>)\n+ <\/option>\n+ <option value={ElementTypeMemo}>memo<\/option>\n+ <option value={ElementTypeOtherOrUnknown}>other<\/option>\n+ <option value={ElementTypeProfiler}>profiler<\/option>\n+ <option value={ElementTypeSuspense}>suspense<\/option>\n+ <\/select>\n+ )}\n+ {(componentFilter.type === ComponentFilterLocation ||\n+ componentFilter.type === ComponentFilterDisplayName) && (\n+ <input\n+ className={styles.Input}\n+ type=\"text\"\n+ placeholder=\"Regular expression\"\n+ onChange={({ currentTarget }) =>\n+ updateFilterValueRegExp(\n+ componentFilter,\n+ currentTarget.value\n+ )\n+ }\n+ value={componentFilter.value}\n+ \/>\n+ )}\n+ <\/td>\n+ <td className={styles.TableCell}>\n+ <Button\n+ onClick={() => removeFilter(index)}\n+ title=\"Delete filter\"\n+ >\n+ <ButtonIcon type=\"delete\" \/>\n+ <\/Button>\n+ <\/td>\n+ <\/tr>\n+ ))}\n+ <\/tbody>\n+ <\/table>\n+\n+ <Button onClick={addFilter}>\n+ <ButtonIcon className={styles.ButtonIcon} type=\"add\" \/>\n+ Add filter\n+ <\/Button>\n+ <\/div>\n+ );\n+}\n+\n+type ToggleIconProps = {|\n+ isEnabled: boolean,\n+ isValid: boolean,\n+|};\n+function ToggleIcon({ isEnabled, isValid }: ToggleIconProps) {\n+ let className;\n+ if (isValid) {\n+ className = isEnabled ? styles.ToggleOn : styles.ToggleOff;\n+ } else {\n+ className = isEnabled ? styles.ToggleOnInvalid : styles.ToggleOffInvalid;\n+ }\n+ return (\n+ <div className={className}>\n+ <div\n+ className={isEnabled ? styles.ToggleInsideOn : styles.ToggleInsideOff}\n+ \/>\n+ <\/div>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/Settings\/GeneralSettings.js b\/src\/devtools\/views\/Settings\/GeneralSettings.js\nnew file mode 100644\nindex 0000000000..8b8692d739\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Settings\/GeneralSettings.js\n@@ -0,0 +1,72 @@\n+\/\/ @flow\n+\n+import React, { useContext } from 'react';\n+import { SettingsContext } from '.\/SettingsContext';\n+import { CHANGE_LOG_URL } from 'src\/constants';\n+\n+import styles from '.\/SettingsShared.css';\n+\n+export default function GeneralSettings(_: {||}) {\n+ const {\n+ displayDensity,\n+ setDisplayDensity,\n+ theme,\n+ setTheme,\n+ appendComponentStack,\n+ setAppendComponentStack,\n+ } = useContext(SettingsContext);\n+\n+ const updateDisplayDensity = ({ currentTarget }) =>\n+ setDisplayDensity(currentTarget.value);\n+ const updateTheme = ({ currentTarget }) => setTheme(currentTarget.value);\n+ const updateappendComponentStack = ({ currentTarget }) =>\n+ setAppendComponentStack(currentTarget.checked);\n+\n+ return (\n+ <div className={styles.Settings}>\n+ <div className={styles.Setting}>\n+ <div className={styles.RadioLabel}>Theme<\/div>\n+ <select className={styles.Select} value={theme} onChange={updateTheme}>\n+ <option value=\"auto\">Auto<\/option>\n+ <option value=\"light\">Light<\/option>\n+ <option value=\"dark\">Dark<\/option>\n+ <\/select>\n+ <\/div>\n+\n+ <div className={styles.Setting}>\n+ <div className={styles.RadioLabel}>Display density<\/div>\n+ <select\n+ className={styles.Select}\n+ value={displayDensity}\n+ onChange={updateDisplayDensity}\n+ >\n+ <option value=\"compact\">Compact<\/option>\n+ <option value=\"comfortable\">Comfortable<\/option>\n+ <\/select>\n+ <\/div>\n+\n+ <div className={styles.Setting}>\n+ <label>\n+ <input\n+ type=\"checkbox\"\n+ checked={appendComponentStack}\n+ onChange={updateappendComponentStack}\n+ \/>{' '}\n+ Append component stacks to console warnings and errors.\n+ <\/label>\n+ <\/div>\n+\n+ <div className={styles.ReleaseNotes}>\n+ <a\n+ className={styles.ReleaseNotesLink}\n+ target=\"_blank\"\n+ rel=\"noopener noreferrer\"\n+ href={CHANGE_LOG_URL}\n+ >\n+ View release notes\n+ <\/a>{' '}\n+ for DevTools version {process.env.DEVTOOLS_VERSION}\n+ <\/div>\n+ <\/div>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/Settings\/ProfilerSettings.js b\/src\/devtools\/views\/Settings\/ProfilerSettings.js\nnew file mode 100644\nindex 0000000000..b13f7ad6e8\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Settings\/ProfilerSettings.js\n@@ -0,0 +1,97 @@\n+\/\/ @flow\n+\n+import React, { useCallback, useContext, useMemo, useRef } from 'react';\n+import { useSubscription } from '..\/hooks';\n+import { StoreContext } from '..\/context';\n+import { ProfilerContext } from 'src\/devtools\/views\/Profiler\/ProfilerContext';\n+import Store from 'src\/devtools\/store';\n+\n+import styles from '.\/SettingsShared.css';\n+\n+export default function ProfilerSettings(_: {||}) {\n+ const {\n+ isCommitFilterEnabled,\n+ minCommitDuration,\n+ setIsCommitFilterEnabled,\n+ setMinCommitDuration,\n+ } = useContext(ProfilerContext);\n+ const store = useContext(StoreContext);\n+\n+ const recordChangeDescriptionsSubscription = useMemo(\n+ () => ({\n+ getCurrentValue: () => store.recordChangeDescriptions,\n+ subscribe: (callback: Function) => {\n+ store.addListener('recordChangeDescriptions', callback);\n+ return () => store.removeListener('recordChangeDescriptions', callback);\n+ },\n+ }),\n+ [store]\n+ );\n+ const recordChangeDescriptions = useSubscription<boolean, Store>(\n+ recordChangeDescriptionsSubscription\n+ );\n+\n+ const updateRecordChangeDescriptions = useCallback(\n+ ({ currentTarget }) => {\n+ store.recordChangeDescriptions = currentTarget.checked;\n+ },\n+ [store]\n+ );\n+ const updateMinCommitDuration = useCallback(\n+ (event: SyntheticEvent<HTMLInputElement>) => {\n+ const newValue = parseFloat(event.currentTarget.value);\n+ setMinCommitDuration(\n+ Number.isNaN(newValue) || newValue <= 0 ? 0 : newValue\n+ );\n+ },\n+ [setMinCommitDuration]\n+ );\n+ const updateIsCommitFilterEnabled = useCallback(\n+ (event: SyntheticEvent<HTMLInputElement>) => {\n+ const checked = event.currentTarget.checked;\n+ setIsCommitFilterEnabled(checked);\n+ if (checked) {\n+ if (minCommitDurationInputRef.current !== null) {\n+ minCommitDurationInputRef.current.focus();\n+ }\n+ }\n+ },\n+ [setIsCommitFilterEnabled]\n+ );\n+\n+ const minCommitDurationInputRef = useRef<HTMLInputElement | null>(null);\n+\n+ return (\n+ <div className={styles.Settings}>\n+ <div className={styles.Setting}>\n+ <label>\n+ <input\n+ type=\"checkbox\"\n+ checked={recordChangeDescriptions}\n+ onChange={updateRecordChangeDescriptions}\n+ \/>{' '}\n+ Record why each component rendered while profiling.\n+ <\/label>\n+ <\/div>\n+\n+ <div className={styles.Setting}>\n+ <label>\n+ <input\n+ checked={isCommitFilterEnabled}\n+ onChange={updateIsCommitFilterEnabled}\n+ type=\"checkbox\"\n+ \/>{' '}\n+ Hide commits below\n+ <\/label>{' '}\n+ <input\n+ className={styles.Input}\n+ onChange={updateMinCommitDuration}\n+ ref={minCommitDurationInputRef}\n+ type=\"number\"\n+ value={minCommitDuration}\n+ \/>{' '}\n+ (ms)\n+ <\/div>\n+ <\/div>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/Settings\/SettingsContext.js b\/src\/devtools\/views\/Settings\/SettingsContext.js\nnew file mode 100644\nindex 0000000000..62f3ae01da\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Settings\/SettingsContext.js\n@@ -0,0 +1,327 @@\n+\/\/ @flow\n+\n+import React, {\n+ createContext,\n+ useContext,\n+ useEffect,\n+ useLayoutEffect,\n+ useMemo,\n+} from 'react';\n+import {\n+ COMFORTABLE_LINE_HEIGHT,\n+ COMPACT_LINE_HEIGHT,\n+ LOCAL_STORAGE_SHOULD_PATCH_CONSOLE_KEY,\n+} from 'src\/constants';\n+import { useLocalStorage } from '..\/hooks';\n+import { BridgeContext } from '..\/context';\n+\n+import type { BrowserTheme } from '..\/DevTools';\n+\n+export type DisplayDensity = 'comfortable' | 'compact';\n+export type Theme = 'auto' | 'light' | 'dark';\n+\n+type Context = {|\n+ displayDensity: DisplayDensity,\n+ setDisplayDensity(value: DisplayDensity): void,\n+\n+ \/\/ Derived from display density.\n+ \/\/ Specified as a separate prop so it can trigger a re-render of FixedSizeList.\n+ lineHeight: number,\n+\n+ appendComponentStack: boolean,\n+ setAppendComponentStack: (value: boolean) => void,\n+\n+ theme: Theme,\n+ setTheme(value: Theme): void,\n+|};\n+\n+const SettingsContext = createContext<Context>(((null: any): Context));\n+SettingsContext.displayName = 'SettingsContext';\n+\n+type DocumentElements = Array<HTMLElement>;\n+\n+type Props = {|\n+ browserTheme: BrowserTheme,\n+ children: React$Node,\n+ componentsPortalContainer?: Element,\n+ profilerPortalContainer?: Element,\n+|};\n+\n+function SettingsContextController({\n+ browserTheme,\n+ children,\n+ componentsPortalContainer,\n+ profilerPortalContainer,\n+}: Props) {\n+ const bridge = useContext(BridgeContext);\n+\n+ const [displayDensity, setDisplayDensity] = useLocalStorage<DisplayDensity>(\n+ 'React::DevTools::displayDensity',\n+ 'compact'\n+ );\n+ const [theme, setTheme] = useLocalStorage<Theme>(\n+ 'React::DevTools::theme',\n+ 'auto'\n+ );\n+ const [\n+ appendComponentStack,\n+ setAppendComponentStack,\n+ ] = useLocalStorage<boolean>(LOCAL_STORAGE_SHOULD_PATCH_CONSOLE_KEY, true);\n+\n+ const documentElements = useMemo<DocumentElements>(() => {\n+ const array: Array<HTMLElement> = [\n+ ((document.documentElement: any): HTMLElement),\n+ ];\n+ if (componentsPortalContainer != null) {\n+ array.push(\n+ ((componentsPortalContainer.ownerDocument\n+ .documentElement: any): HTMLElement)\n+ );\n+ }\n+ if (profilerPortalContainer != null) {\n+ array.push(\n+ ((profilerPortalContainer.ownerDocument\n+ .documentElement: any): HTMLElement)\n+ );\n+ }\n+ return array;\n+ }, [componentsPortalContainer, profilerPortalContainer]);\n+\n+ useLayoutEffect(() => {\n+ switch (displayDensity) {\n+ case 'comfortable':\n+ updateDisplayDensity('comfortable', documentElements);\n+ break;\n+ case 'compact':\n+ updateDisplayDensity('compact', documentElements);\n+ break;\n+ default:\n+ throw Error(`Unsupported displayDensity value \"${displayDensity}\"`);\n+ }\n+ }, [displayDensity, documentElements]);\n+\n+ useLayoutEffect(() => {\n+ switch (theme) {\n+ case 'light':\n+ updateThemeVariables('light', documentElements);\n+ break;\n+ case 'dark':\n+ updateThemeVariables('dark', documentElements);\n+ break;\n+ case 'auto':\n+ updateThemeVariables(browserTheme, documentElements);\n+ break;\n+ default:\n+ throw Error(`Unsupported theme value \"${theme}\"`);\n+ }\n+ }, [browserTheme, theme, documentElements]);\n+\n+ useEffect(() => {\n+ bridge.send('updateAppendComponentStack', appendComponentStack);\n+ }, [bridge, appendComponentStack]);\n+\n+ const value = useMemo(\n+ () => ({\n+ displayDensity,\n+ setDisplayDensity,\n+ theme,\n+ setTheme,\n+ appendComponentStack,\n+ setAppendComponentStack,\n+ lineHeight:\n+ displayDensity === 'compact'\n+ ? COMPACT_LINE_HEIGHT\n+ : COMFORTABLE_LINE_HEIGHT,\n+ }),\n+ [\n+ displayDensity,\n+ setDisplayDensity,\n+ setTheme,\n+ appendComponentStack,\n+ setAppendComponentStack,\n+ theme,\n+ ]\n+ );\n+\n+ return (\n+ <SettingsContext.Provider value={value}>\n+ {children}\n+ <\/SettingsContext.Provider>\n+ );\n+}\n+\n+function setStyleVariable(\n+ name: string,\n+ value: string,\n+ documentElements: DocumentElements\n+) {\n+ documentElements.forEach(documentElement =>\n+ documentElement.style.setProperty(name, value)\n+ );\n+}\n+\n+function updateStyleHelper(\n+ themeKey: string,\n+ style: string,\n+ documentElements: DocumentElements\n+) {\n+ setStyleVariable(\n+ `--${style}`,\n+ `var(--${themeKey}-${style})`,\n+ documentElements\n+ );\n+}\n+\n+function updateDisplayDensity(\n+ displayDensity: DisplayDensity,\n+ documentElements: DocumentElements\n+): void {\n+ updateStyleHelper(\n+ displayDensity,\n+ 'font-size-monospace-normal',\n+ documentElements\n+ );\n+ updateStyleHelper(\n+ displayDensity,\n+ 'font-size-monospace-large',\n+ documentElements\n+ );\n+ updateStyleHelper(\n+ displayDensity,\n+ 'font-size-monospace-small',\n+ documentElements\n+ );\n+ updateStyleHelper(displayDensity, 'font-size-sans-normal', documentElements);\n+ updateStyleHelper(displayDensity, 'font-size-sans-large', documentElements);\n+ updateStyleHelper(displayDensity, 'font-size-sans-small', documentElements);\n+ updateStyleHelper(displayDensity, 'line-height-data', documentElements);\n+\n+ \/\/ Sizes and paddings\/margins are all rem-based,\n+ \/\/ so update the root font-size as well when the display preference changes.\n+ const computedStyle = getComputedStyle((document.body: any));\n+ const fontSize = computedStyle.getPropertyValue(\n+ `--${displayDensity}-root-font-size`\n+ );\n+ const root = ((document.querySelector(':root'): any): HTMLElement);\n+ root.style.fontSize = fontSize;\n+}\n+\n+function updateThemeVariables(\n+ theme: Theme,\n+ documentElements: DocumentElements\n+): void {\n+ updateStyleHelper(theme, 'color-attribute-name', documentElements);\n+ updateStyleHelper(theme, 'color-attribute-name-inverted', documentElements);\n+ updateStyleHelper(theme, 'color-attribute-value', documentElements);\n+ updateStyleHelper(theme, 'color-attribute-value-inverted', documentElements);\n+ updateStyleHelper(theme, 'color-attribute-editable-value', documentElements);\n+ updateStyleHelper(theme, 'color-background', documentElements);\n+ updateStyleHelper(theme, 'color-background-hover', documentElements);\n+ updateStyleHelper(theme, 'color-background-inactive', documentElements);\n+ updateStyleHelper(theme, 'color-background-invalid', documentElements);\n+ updateStyleHelper(theme, 'color-background-selected', documentElements);\n+ updateStyleHelper(theme, 'color-border', documentElements);\n+ updateStyleHelper(theme, 'color-button-background', documentElements);\n+ updateStyleHelper(theme, 'color-button-background-focus', documentElements);\n+ updateStyleHelper(theme, 'color-button', documentElements);\n+ updateStyleHelper(theme, 'color-button-active', documentElements);\n+ updateStyleHelper(theme, 'color-button-disabled', documentElements);\n+ updateStyleHelper(theme, 'color-button-focus', documentElements);\n+ updateStyleHelper(theme, 'color-button-hover', documentElements);\n+ updateStyleHelper(\n+ theme,\n+ 'color-commit-did-not-render-fill',\n+ documentElements\n+ );\n+ updateStyleHelper(\n+ theme,\n+ 'color-commit-did-not-render-fill-text',\n+ documentElements\n+ );\n+ updateStyleHelper(\n+ theme,\n+ 'color-commit-did-not-render-pattern',\n+ documentElements\n+ );\n+ updateStyleHelper(\n+ theme,\n+ 'color-commit-did-not-render-pattern-text',\n+ documentElements\n+ );\n+ updateStyleHelper(theme, 'color-commit-gradient-0', documentElements);\n+ updateStyleHelper(theme, 'color-commit-gradient-1', documentElements);\n+ updateStyleHelper(theme, 'color-commit-gradient-2', documentElements);\n+ updateStyleHelper(theme, 'color-commit-gradient-3', documentElements);\n+ updateStyleHelper(theme, 'color-commit-gradient-4', documentElements);\n+ updateStyleHelper(theme, 'color-commit-gradient-5', documentElements);\n+ updateStyleHelper(theme, 'color-commit-gradient-6', documentElements);\n+ updateStyleHelper(theme, 'color-commit-gradient-7', documentElements);\n+ updateStyleHelper(theme, 'color-commit-gradient-8', documentElements);\n+ updateStyleHelper(theme, 'color-commit-gradient-9', documentElements);\n+ updateStyleHelper(theme, 'color-commit-gradient-text', documentElements);\n+ updateStyleHelper(theme, 'color-component-name', documentElements);\n+ updateStyleHelper(theme, 'color-component-name-inverted', documentElements);\n+ updateStyleHelper(\n+ theme,\n+ 'color-component-badge-background',\n+ documentElements\n+ );\n+ updateStyleHelper(\n+ theme,\n+ 'color-component-badge-background-inverted',\n+ documentElements\n+ );\n+ updateStyleHelper(theme, 'color-component-badge-count', documentElements);\n+ updateStyleHelper(\n+ theme,\n+ 'color-component-badge-count-inverted',\n+ documentElements\n+ );\n+ updateStyleHelper(theme, 'color-dim', documentElements);\n+ updateStyleHelper(theme, 'color-dimmer', documentElements);\n+ updateStyleHelper(theme, 'color-dimmest', documentElements);\n+ updateStyleHelper(theme, 'color-expand-collapse-toggle', documentElements);\n+ updateStyleHelper(theme, 'color-modal-background', documentElements);\n+ updateStyleHelper(theme, 'color-record-active', documentElements);\n+ updateStyleHelper(theme, 'color-record-hover', documentElements);\n+ updateStyleHelper(theme, 'color-record-inactive', documentElements);\n+ updateStyleHelper(theme, 'color-color-scroll-thumb', documentElements);\n+ updateStyleHelper(theme, 'color-color-scroll-track', documentElements);\n+ updateStyleHelper(theme, 'color-search-match', documentElements);\n+ updateStyleHelper(theme, 'color-shadow', documentElements);\n+ updateStyleHelper(theme, 'color-search-match-current', documentElements);\n+ updateStyleHelper(\n+ theme,\n+ 'color-selected-tree-highlight-active',\n+ documentElements\n+ );\n+ updateStyleHelper(\n+ theme,\n+ 'color-selected-tree-highlight-inactive',\n+ documentElements\n+ );\n+ updateStyleHelper(theme, 'color-tab-selected-border', documentElements);\n+ updateStyleHelper(theme, 'color-text', documentElements);\n+ updateStyleHelper(theme, 'color-text-invalid', documentElements);\n+ updateStyleHelper(theme, 'color-text-selected', documentElements);\n+ updateStyleHelper(theme, 'color-toggle-background-invalid', documentElements);\n+ updateStyleHelper(theme, 'color-toggle-background-on', documentElements);\n+ updateStyleHelper(theme, 'color-toggle-background-off', documentElements);\n+ updateStyleHelper(theme, 'color-toggle-text', documentElements);\n+ updateStyleHelper(theme, 'color-tooltip-background', documentElements);\n+ updateStyleHelper(theme, 'color-tooltip-text', documentElements);\n+\n+ \/\/ Font smoothing varies based on the theme.\n+ updateStyleHelper(theme, 'font-smoothing', documentElements);\n+\n+ \/\/ Update scrollbar color to match theme.\n+ \/\/ this CSS property is currently only supported in Firefox,\n+ \/\/ but it makes a significant UI improvement in dark mode.\n+ \/\/ https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/scrollbar-color\n+ documentElements.forEach(documentElement => {\n+ \/\/ $FlowFixMe scrollbarColor is missing in CSSStyleDeclaration\n+ documentElement.style.scrollbarColor = `var(${`--${theme}-color-scroll-thumb`}) var(${`--${theme}-color-scroll-track`})`;\n+ });\n+}\n+\n+export { SettingsContext, SettingsContextController };\ndiff --git a\/src\/devtools\/views\/Settings\/SettingsModal.css b\/src\/devtools\/views\/Settings\/SettingsModal.css\nnew file mode 100644\nindex 0000000000..af400ba916\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Settings\/SettingsModal.css\n@@ -0,0 +1,45 @@\n+.Background {\n+ position: absolute;\n+ z-index: 3;\n+ width: 100%;\n+ top: 0;\n+ bottom: 0;\n+ background-color: var(--color-modal-background);\n+ display: flex;\n+ align-items: flex-start;\n+ justify-content: center;\n+ font-size: var(--font-size-sans-normal);\n+ padding: 1rem;\n+}\n+\n+.Modal {\n+ display: flex;\n+ flex-direction: column;\n+ flex: 0 1 auto;\n+ max-height: 100%;\n+ background-color: var(--color-background);\n+ border: 1px solid var(--color-border);\n+ box-shadow: 0 2px 4px var(--color-shadow);\n+ border-radius: 0.25rem;\n+ overflow: auto;\n+ width: 400px;\n+ max-width: 100%;\n+}\n+\n+.Spacer {\n+ flex: 1;\n+}\n+\n+.Tabs {\n+ display: flex;\n+ flex-direction: row;\n+ border-bottom: 1px solid var(--color-border);\n+ padding-right: 0.25rem;\n+ flex: 0 0 auto;\n+}\n+\n+.Content {\n+ padding: 0.5rem;\n+ flex: 0 1 auto;\n+ overflow: auto;\n+}\ndiff --git a\/src\/devtools\/views\/Settings\/SettingsModal.js b\/src\/devtools\/views\/Settings\/SettingsModal.js\nnew file mode 100644\nindex 0000000000..ae972e70f4\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Settings\/SettingsModal.js\n@@ -0,0 +1,133 @@\n+\/\/ @flow\n+\n+import React, {\n+ useCallback,\n+ useContext,\n+ useEffect,\n+ useMemo,\n+ useRef,\n+} from 'react';\n+import { SettingsModalContext } from '.\/SettingsModalContext';\n+import Store from 'src\/devtools\/store';\n+import Button from '..\/Button';\n+import ButtonIcon from '..\/ButtonIcon';\n+import TabBar from '..\/TabBar';\n+import { StoreContext } from '..\/context';\n+import {\n+ useLocalStorage,\n+ useModalDismissSignal,\n+ useSubscription,\n+} from '..\/hooks';\n+import ComponentsSettings from '.\/ComponentsSettings';\n+import GeneralSettings from '.\/GeneralSettings';\n+import ProfilerSettings from '.\/ProfilerSettings';\n+\n+import styles from '.\/SettingsModal.css';\n+\n+type TabID = 'general' | 'components' | 'profiler';\n+\n+export default function SettingsModal(_: {||}) {\n+ const { isModalShowing, setIsModalShowing } = useContext(\n+ SettingsModalContext\n+ );\n+ const store = useContext(StoreContext);\n+ const { profilerStore } = store;\n+\n+ \/\/ Updating preferences while profiling is in progress could break things (e.g. filtering)\n+ \/\/ Explicitly disallow it for now.\n+ const isProfilingSubscription = useMemo(\n+ () => ({\n+ getCurrentValue: () => profilerStore.isProfiling,\n+ subscribe: (callback: Function) => {\n+ profilerStore.addListener('isProfiling', callback);\n+ return () => profilerStore.removeListener('isProfiling', callback);\n+ },\n+ }),\n+ [profilerStore]\n+ );\n+ const isProfiling = useSubscription<boolean, Store>(isProfilingSubscription);\n+ if (isProfiling && isModalShowing) {\n+ setIsModalShowing(false);\n+ }\n+\n+ if (!isModalShowing) {\n+ return null;\n+ }\n+\n+ return <SettingsModalImpl \/>;\n+}\n+\n+function SettingsModalImpl(_: {||}) {\n+ const { setIsModalShowing } = useContext(SettingsModalContext);\n+ const dismissModal = useCallback(() => setIsModalShowing(false), [\n+ setIsModalShowing,\n+ ]);\n+\n+ const [selectedTabID, selectTab] = useLocalStorage<TabID>(\n+ 'React::DevTools::selectedSettingsTabID',\n+ 'general'\n+ );\n+\n+ const modalRef = useRef<HTMLDivElement | null>(null);\n+ useModalDismissSignal(modalRef, dismissModal);\n+\n+ useEffect(() => {\n+ if (modalRef.current !== null) {\n+ modalRef.current.focus();\n+ }\n+ }, [modalRef]);\n+\n+ let view = null;\n+ switch (selectedTabID) {\n+ case 'general':\n+ view = <GeneralSettings \/>;\n+ break;\n+ case 'profiler':\n+ view = <ProfilerSettings \/>;\n+ break;\n+ case 'components':\n+ view = <ComponentsSettings \/>;\n+ break;\n+ default:\n+ break;\n+ }\n+\n+ return (\n+ <div className={styles.Background}>\n+ <div className={styles.Modal} ref={modalRef}>\n+ <div className={styles.Tabs}>\n+ <TabBar\n+ currentTab={selectedTabID}\n+ id=\"Settings\"\n+ selectTab={selectTab}\n+ tabs={tabs}\n+ type=\"settings\"\n+ \/>\n+ <div className={styles.Spacer} \/>\n+ <Button onClick={dismissModal} title=\"Close settings dialog\">\n+ <ButtonIcon type=\"close\" \/>\n+ <\/Button>\n+ <\/div>\n+ <div className={styles.Content}>{view}<\/div>\n+ <\/div>\n+ <\/div>\n+ );\n+}\n+\n+const tabs = [\n+ {\n+ id: 'general',\n+ icon: 'settings',\n+ label: 'General',\n+ },\n+ {\n+ id: 'components',\n+ icon: 'components',\n+ label: 'Components',\n+ },\n+ {\n+ id: 'profiler',\n+ icon: 'profiler',\n+ label: 'Profiler',\n+ },\n+];\ndiff --git a\/src\/devtools\/views\/Settings\/SettingsModalContext.js b\/src\/devtools\/views\/Settings\/SettingsModalContext.js\nnew file mode 100644\nindex 0000000000..1b214f37f6\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Settings\/SettingsModalContext.js\n@@ -0,0 +1,35 @@\n+\/\/ @flow\n+\n+import React, { createContext, useMemo, useState } from 'react';\n+\n+export type DisplayDensity = 'comfortable' | 'compact';\n+export type Theme = 'auto' | 'light' | 'dark';\n+\n+type Context = {\n+ isModalShowing: boolean,\n+ setIsModalShowing: (value: boolean) => void,\n+};\n+\n+const SettingsModalContext = createContext<Context>(((null: any): Context));\n+SettingsModalContext.displayName = 'SettingsModalContext';\n+\n+function SettingsModalContextController({\n+ children,\n+}: {|\n+ children: React$Node,\n+|}) {\n+ const [isModalShowing, setIsModalShowing] = useState<boolean>(false);\n+\n+ const value = useMemo(() => ({ isModalShowing, setIsModalShowing }), [\n+ isModalShowing,\n+ setIsModalShowing,\n+ ]);\n+\n+ return (\n+ <SettingsModalContext.Provider value={value}>\n+ {children}\n+ <\/SettingsModalContext.Provider>\n+ );\n+}\n+\n+export { SettingsModalContext, SettingsModalContextController };\ndiff --git a\/src\/devtools\/views\/Settings\/SettingsModalContextToggle.js b\/src\/devtools\/views\/Settings\/SettingsModalContextToggle.js\nnew file mode 100644\nindex 0000000000..5124cdb168\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Settings\/SettingsModalContextToggle.js\n@@ -0,0 +1,43 @@\n+\/\/ @flow\n+\n+import React, { useCallback, useContext, useMemo } from 'react';\n+import { SettingsModalContext } from '.\/SettingsModalContext';\n+import Button from '..\/Button';\n+import ButtonIcon from '..\/ButtonIcon';\n+import { StoreContext } from '..\/context';\n+import { useSubscription } from '..\/hooks';\n+import Store from 'src\/devtools\/store';\n+\n+export default function SettingsModalContextToggle() {\n+ const { setIsModalShowing } = useContext(SettingsModalContext);\n+ const store = useContext(StoreContext);\n+ const { profilerStore } = store;\n+\n+ const showFilterModal = useCallback(() => setIsModalShowing(true), [\n+ setIsModalShowing,\n+ ]);\n+\n+ \/\/ Updating preferences while profiling is in progress could break things (e.g. filtering)\n+ \/\/ Explicitly disallow it for now.\n+ const isProfilingSubscription = useMemo(\n+ () => ({\n+ getCurrentValue: () => profilerStore.isProfiling,\n+ subscribe: (callback: Function) => {\n+ profilerStore.addListener('isProfiling', callback);\n+ return () => profilerStore.removeListener('isProfiling', callback);\n+ },\n+ }),\n+ [profilerStore]\n+ );\n+ const isProfiling = useSubscription<boolean, Store>(isProfilingSubscription);\n+\n+ return (\n+ <Button\n+ disabled={isProfiling}\n+ onClick={showFilterModal}\n+ title=\"View settings\"\n+ >\n+ <ButtonIcon type=\"settings\" \/>\n+ <\/Button>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/Settings\/SettingsShared.css b\/src\/devtools\/views\/Settings\/SettingsShared.css\nnew file mode 100644\nindex 0000000000..bcdc427668\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Settings\/SettingsShared.css\n@@ -0,0 +1,140 @@\n+.Settings {\n+ display: flex;\n+ flex-direction: column;\n+ align-items: flex-start;\n+ justify-content: flex-start;\n+ font-family: var(--font-family-sans);\n+ font-size: var(--font-size-sans-normal);\n+}\n+\n+.Setting {\n+ margin-bottom: 0.5rem;\n+}\n+.Setting:last-of-type {\n+ margin-bottom: 0;\n+}\n+\n+.OptionGroup {\n+ display: inline-flex;\n+ flex-direction: row;\n+ align-items: center;\n+ user-select: none;\n+ margin: 0 1rem 0.5rem 0;\n+}\n+.OptionGroup:last-of-type {\n+ margin-right: 0;\n+}\n+\n+.RadioLabel {\n+ display: inline;\n+ margin-right: 0.5rem;\n+}\n+\n+.Select {\n+}\n+\n+.CheckboxOption {\n+ display: block;\n+ padding: 0 0 0.5rem;\n+}\n+\n+.HRule {\n+ height: 1px;\n+ background-color: var(--color-border);\n+ width: 100%;\n+ border: none;\n+ margin: 0.5rem 0;\n+}\n+\n+.Header {\n+ font-size: var(--font-size-sans-large);\n+ margin-top: 0.5rem;\n+}\n+\n+.ButtonIcon {\n+ margin-right: 0.25rem;\n+}\n+\n+.NoFiltersCell {\n+ padding: 0.25rem 0;\n+ color: var(--color-dim);\n+}\n+\n+.Table {\n+ min-width: 20rem;\n+ margin-top: 0.5rem;\n+ border-spacing: 0;\n+}\n+\n+.TableRow {\n+ padding-bottom: 0.5rem;\n+}\n+\n+.TableCell {\n+ padding: 0;\n+ padding-right: 0.5rem;\n+}\n+.TableCell:last-of-type {\n+ text-align: right;\n+ padding-right: 0;\n+}\n+\n+.Input {\n+ border: 1px solid var(--color-border);\n+ border-radius: 0.125rem;\n+ padding: 0.125rem;\n+}\n+\n+.InvalidRegExp,\n+.InvalidRegExp:active,\n+.InvalidRegExp:focus,\n+.InvalidRegExp:hover {\n+ color: var(--color-value-invalid);\n+}\n+\n+.ToggleOffInvalid,\n+.ToggleOnInvalid,\n+.ToggleOff,\n+.ToggleOn {\n+ border-radius: 0.75rem;\n+ width: 1rem;\n+ height: 0.625rem;\n+ display: flex;\n+ align-items: center;\n+ padding: 0.125rem;\n+}\n+.ToggleOffInvalid {\n+ background-color: var(--color-toggle-background-invalid);\n+ justify-content: flex-start;\n+}\n+.ToggleOnInvalid {\n+ background-color: var(--color-toggle-background-invalid);\n+ justify-content: flex-end;\n+}\n+.ToggleOff {\n+ background-color: var(--color-toggle-background-off);\n+ justify-content: flex-start;\n+}\n+.ToggleOn {\n+ background-color: var(--color-toggle-background-on);\n+ justify-content: flex-end;\n+}\n+\n+.ToggleInsideOff,\n+.ToggleInsideOn {\n+ border-radius: 0.375rem;\n+ width: 0.375rem;\n+ height: 0.375rem;\n+ background-color: var(--color-toggle-text);\n+}\n+\n+.ReleaseNotes {\n+ width: 100%;\n+ background-color: var(--color-background-hover);\n+ padding: 0.25rem 0.5rem;\n+ border-radius: 0.25rem;\n+}\n+\n+.ReleaseNotesLink {\n+ color: var(--color-button-active);\n+}\ndiff --git a\/src\/devtools\/views\/ShowWelcomeToTheNewDevToolsDialog.css b\/src\/devtools\/views\/ShowWelcomeToTheNewDevToolsDialog.css\nnew file mode 100644\nindex 0000000000..8168d947d2\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/ShowWelcomeToTheNewDevToolsDialog.css\n@@ -0,0 +1,26 @@\n+.Row {\n+ display: flex;\n+ flex-direction: row;\n+ align-items: center;\n+}\n+\n+.Column {\n+ display: flex;\n+ flex-direction: column;\n+ align-items: center;\n+}\n+\n+.Logo {\n+ height: 4rem;\n+ width: 4rem;\n+ margin: 1rem;\n+}\n+\n+.Title {\n+ font-size: var(--font-size-sans-large);\n+ margin-bottom: 0.5rem;\n+}\n+\n+.ReleaseNotesLink {\n+ color: var(--color-button-active);\n+}\ndiff --git a\/src\/devtools\/views\/ShowWelcomeToTheNewDevToolsDialog.js b\/src\/devtools\/views\/ShowWelcomeToTheNewDevToolsDialog.js\nnew file mode 100644\nindex 0000000000..025c3f338c\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/ShowWelcomeToTheNewDevToolsDialog.js\n@@ -0,0 +1,64 @@\n+\/\/ @flow\n+\n+import React, { Fragment, useContext, useEffect } from 'react';\n+import { unstable_batchedUpdates as batchedUpdates } from 'react-dom';\n+import { useLocalStorage } from '.\/hooks';\n+import { ModalDialogContext } from '.\/ModalDialog';\n+import ReactLogo from '.\/ReactLogo';\n+import { CHANGE_LOG_URL } from 'src\/constants';\n+\n+import styles from '.\/ShowWelcomeToTheNewDevToolsDialog.css';\n+\n+const LOCAL_STORAGE_KEY =\n+ 'React::DevTools::hasShownWelcomeToTheNewDevToolsDialog';\n+\n+export default function ShowWelcomeToTheNewDevToolsDialog(_: {||}) {\n+ const { dispatch } = useContext(ModalDialogContext);\n+ const [\n+ hasShownWelcomeToTheNewDevToolsDialog,\n+ setHasShownWelcomeToTheNewDevToolsDialog,\n+ ] = useLocalStorage<boolean>(LOCAL_STORAGE_KEY, false);\n+\n+ useEffect(() => {\n+ if (!hasShownWelcomeToTheNewDevToolsDialog) {\n+ batchedUpdates(() => {\n+ setHasShownWelcomeToTheNewDevToolsDialog(true);\n+ dispatch({\n+ canBeDismissed: true,\n+ type: 'SHOW',\n+ content: <DialogContent \/>,\n+ });\n+ });\n+ }\n+ }, [\n+ dispatch,\n+ hasShownWelcomeToTheNewDevToolsDialog,\n+ setHasShownWelcomeToTheNewDevToolsDialog,\n+ ]);\n+\n+ return null;\n+}\n+\n+function DialogContent(_: {||}) {\n+ return (\n+ <Fragment>\n+ <div className={styles.Row}>\n+ <ReactLogo className={styles.Logo} \/>\n+ <div>\n+ <div className={styles.Title}>Welcome to the new React DevTools!<\/div>\n+ <div>\n+ <a\n+ className={styles.ReleaseNotesLink}\n+ target=\"_blank\"\n+ rel=\"noopener noreferrer\"\n+ href={CHANGE_LOG_URL}\n+ >\n+ Learn more\n+ <\/a>{' '}\n+ about changes in this version.\n+ <\/div>\n+ <\/div>\n+ <\/div>\n+ <\/Fragment>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/TabBar.css b\/src\/devtools\/views\/TabBar.css\nnew file mode 100644\nindex 0000000000..a29770a0d0\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/TabBar.css\n@@ -0,0 +1,110 @@\n+.Tab,\n+.TabCurrent,\n+.TabDisabled {\n+ height: 100%;\n+ display: flex;\n+ align-items: center;\n+ cursor: pointer;\n+ border-top: 3px solid transparent;\n+ border-bottom: 3px solid transparent;\n+ user-select: none;\n+ color: var(--color-text);\n+\n+ \/* Electron drag area *\/\n+ -webkit-app-region: no-drag;\n+}\n+.Tab:hover,\n+.TabCurrent:hover {\n+ background-color: var(--color-background-hover);\n+}\n+.Tab:focus-within,\n+.TabCurrent:focus-within {\n+ background-color: var(--color-background-hover);\n+}\n+\n+.TabCurrent {\n+ border-bottom: 3px solid var(--color-tab-selected-border);\n+}\n+\n+.TabDisabled {\n+ color: var(--color-dim);\n+ cursor: default;\n+}\n+\n+.TabSizeNavigation {\n+ font-size: var(--font-size-sans-large);\n+ padding: 0.5rem 1rem;\n+}\n+.TabSizeProfiler {\n+ font-size: var(--font-size-sans-normal);\n+ padding: 0.25rem 0.5rem;\n+}\n+.TabSizeSettings {\n+ font-size: var(--font-size-sans-normal);\n+ padding: 0.25rem 0.5rem;\n+}\n+\n+.Input {\n+ width: 0;\n+ margin: 0;\n+ opacity: 0;\n+}\n+\n+.IconSizeNavigation,\n+.IconSizeProfiler,\n+.IconSizeSettings {\n+ margin-right: 0.5rem;\n+ color: var(--color-button-active);\n+}\n+\n+.IconDisabled {\n+ color: var(--color-dim);\n+}\n+\n+.IconSizeNavigation {\n+ width: 1.5rem;\n+ height: 1.5rem;\n+}\n+.IconSizeProfiler {\n+ width: 1rem;\n+ height: 1rem;\n+}\n+.IconSizeSettings {\n+ width: 1rem;\n+ height: 1rem;\n+}\n+\n+.TabLabelNavigation,\n+.TabLabelProfiler,\n+.TabLabelSettings {\n+}\n+\n+@media screen and (max-width: 525px) {\n+ .IconSizeNavigation {\n+ margin-right: 0;\n+ }\n+\n+ .TabLabelNavigation {\n+ display: none;\n+ }\n+}\n+\n+@media screen and (max-width: 900px) {\n+ .TabLabelProfiler {\n+ display: none;\n+ }\n+\n+ .IconSizeProfiler {\n+ margin-right: 0;\n+ }\n+}\n+\n+@media screen and (max-width: 400px) {\n+ .TabLabelSettings {\n+ display: none;\n+ }\n+\n+ .IconSizeSettings {\n+ margin-right: 0;\n+ }\n+}\ndiff --git a\/src\/devtools\/views\/TabBar.js b\/src\/devtools\/views\/TabBar.js\nnew file mode 100644\nindex 0000000000..e8bc6eab07\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/TabBar.js\n@@ -0,0 +1,127 @@\n+\/\/ @flow\n+\n+import classNames from 'classnames';\n+import React, { Fragment, useCallback } from 'react';\n+import Tooltip from '@reach\/tooltip';\n+import Icon from '.\/Icon';\n+\n+import styles from '.\/TabBar.css';\n+import tooltipStyles from '.\/Tooltip.css';\n+\n+import type { IconType } from '.\/Icon';\n+\n+type TabInfo = {|\n+ icon: IconType,\n+ id: string,\n+ label: string,\n+ title?: string,\n+|};\n+\n+export type Props = {|\n+ currentTab: any,\n+ disabled?: boolean,\n+ id: string,\n+ selectTab: (tabID: any) => void,\n+ tabs: Array<TabInfo>,\n+ type: 'navigation' | 'profiler' | 'settings',\n+|};\n+\n+export default function TabBar({\n+ currentTab,\n+ disabled = false,\n+ id: groupName,\n+ selectTab,\n+ tabs,\n+ type,\n+}: Props) {\n+ if (!tabs.some(tab => tab.id === currentTab)) {\n+ selectTab(tabs[0].id);\n+ }\n+\n+ const onChange = useCallback(\n+ ({ currentTarget }) => selectTab(currentTarget.value),\n+ [selectTab]\n+ );\n+\n+ const handleKeyDown = useCallback(event => {\n+ switch (event.key) {\n+ case 'ArrowDown':\n+ case 'ArrowLeft':\n+ case 'ArrowRight':\n+ case 'ArrowUp':\n+ event.stopPropagation();\n+ break;\n+ default:\n+ break;\n+ }\n+ }, []);\n+\n+ let iconSizeClassName;\n+ let tabLabelClassName;\n+ let tabSizeClassName;\n+ switch (type) {\n+ case 'navigation':\n+ iconSizeClassName = styles.IconSizeNavigation;\n+ tabLabelClassName = styles.TabLabelNavigation;\n+ tabSizeClassName = styles.TabSizeNavigation;\n+ break;\n+ case 'profiler':\n+ iconSizeClassName = styles.IconSizeProfiler;\n+ tabLabelClassName = styles.TabLabelProfiler;\n+ tabSizeClassName = styles.TabSizeProfiler;\n+ break;\n+ case 'settings':\n+ iconSizeClassName = styles.IconSizeSettings;\n+ tabLabelClassName = styles.TabLabelSettings;\n+ tabSizeClassName = styles.TabSizeSettings;\n+ break;\n+ default:\n+ throw Error(`Unsupported type \"${type}\"`);\n+ }\n+\n+ return (\n+ <Fragment>\n+ {tabs.map(({ icon, id, label, title }) => {\n+ let button = (\n+ <label\n+ className={classNames(\n+ tabSizeClassName,\n+ disabled ? styles.TabDisabled : styles.Tab,\n+ !disabled && currentTab === id ? styles.TabCurrent : null\n+ )}\n+ key={id}\n+ onKeyDown={handleKeyDown}\n+ onMouseDown={() => selectTab(id)}\n+ >\n+ <input\n+ type=\"radio\"\n+ className={styles.Input}\n+ checked={currentTab === id}\n+ disabled={disabled}\n+ name={groupName}\n+ value={id}\n+ onChange={onChange}\n+ \/>\n+ <Icon\n+ className={`${\n+ disabled ? styles.IconDisabled : ''\n+ } ${iconSizeClassName}`}\n+ type={icon}\n+ \/>\n+ <span className={tabLabelClassName}>{label}<\/span>\n+ <\/label>\n+ );\n+\n+ if (title) {\n+ button = (\n+ <Tooltip key={id} className={tooltipStyles.Tooltip} label={title}>\n+ {button}\n+ <\/Tooltip>\n+ );\n+ }\n+\n+ return button;\n+ })}\n+ <\/Fragment>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/Toggle.css b\/src\/devtools\/views\/Toggle.css\nnew file mode 100644\nindex 0000000000..a5f273bda4\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Toggle.css\n@@ -0,0 +1,54 @@\n+.ToggleDisabled,\n+.ToggleOn,\n+.ToggleOff {\n+ background: var(--color-button-background);\n+ border: none;\n+ border-radius: 0.25rem;\n+ padding: 0;\n+ flex: 0 0 auto;\n+}\n+\n+.ToggleContent {\n+ display: inline-flex;\n+ align-items: center;\n+ border-radius: 0.25rem;\n+ padding: 0.25rem;\n+}\n+\n+.ToggleOff {\n+ border: none;\n+ background: var(--color-button-background);\n+ color: var(--color-button);\n+}\n+.ToggleOff:hover {\n+ color: var(--color-button-hover);\n+}\n+\n+.ToggleOn,\n+.ToggleOn:active {\n+ color: var(--color-button-active);\n+ outline: none;\n+}\n+\n+.ToggleOn:focus,\n+.ToggleOff:focus,\n+.ToggleContent:focus {\n+ outline: none;\n+}\n+\n+.ToggleOn:focus > .ToggleContent,\n+.ToggleOff:focus > .ToggleContent {\n+ background: var(--color-button-background-focus);\n+}\n+\n+.ToggleDisabled {\n+ background: var(--color-button-background);\n+ color: var(--color-button-disabled);\n+ cursor: default;\n+}\n+\n+.Input {\n+ width: 0;\n+ margin: 0;\n+ opacity: 0;\n+}\ndiff --git a\/src\/devtools\/views\/Toggle.js b\/src\/devtools\/views\/Toggle.js\nnew file mode 100644\nindex 0000000000..5780c7f28c\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Toggle.js\n@@ -0,0 +1,61 @@\n+\/\/ @flow\n+\n+import React, { useCallback } from 'react';\n+import Tooltip from '@reach\/tooltip';\n+\n+import styles from '.\/Toggle.css';\n+import tooltipStyles from '.\/Tooltip.css';\n+\n+type Props = {\n+ children: React$Node,\n+ className?: string,\n+ isChecked: boolean,\n+ isDisabled?: boolean,\n+ onChange: (isChecked: boolean) => void,\n+ title?: string,\n+};\n+\n+export default function Toggle({\n+ children,\n+ className = '',\n+ isDisabled = false,\n+ isChecked,\n+ onChange,\n+ title,\n+}: Props) {\n+ let defaultClassName;\n+ if (isDisabled) {\n+ defaultClassName = styles.ToggleDisabled;\n+ } else if (isChecked) {\n+ defaultClassName = styles.ToggleOn;\n+ } else {\n+ defaultClassName = styles.ToggleOff;\n+ }\n+\n+ const handleClick = useCallback(() => onChange(!isChecked), [\n+ isChecked,\n+ onChange,\n+ ]);\n+\n+ let toggle = (\n+ <button\n+ className={`${defaultClassName} ${className}`}\n+ disabled={isDisabled}\n+ onClick={handleClick}\n+ >\n+ <span className={styles.ToggleContent} tabIndex={-1}>\n+ {children}\n+ <\/span>\n+ <\/button>\n+ );\n+\n+ if (title) {\n+ toggle = (\n+ <Tooltip className={tooltipStyles.Tooltip} label={title}>\n+ {toggle}\n+ <\/Tooltip>\n+ );\n+ }\n+\n+ return toggle;\n+}\ndiff --git a\/src\/devtools\/views\/Tooltip.css b\/src\/devtools\/views\/Tooltip.css\nnew file mode 100644\nindex 0000000000..e8724b3855\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Tooltip.css\n@@ -0,0 +1,11 @@\n+.Tooltip {\n+ border: none;\n+ border-radius: 0.25rem;\n+ padding: 0.25rem 0.5rem;\n+ font-size: 12px;\n+ background-color: var(--color-tooltip-background);\n+ color: var(--color-tooltip-text);\n+\n+ \/* Make sure this is above the DevTools, which are above the Overlay *\/\n+ z-index: 10000002;\n+}\ndiff --git a\/src\/devtools\/views\/WarnIfLegacyBackendDetected.css b\/src\/devtools\/views\/WarnIfLegacyBackendDetected.css\nnew file mode 100644\nindex 0000000000..e1c3817309\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/WarnIfLegacyBackendDetected.css\n@@ -0,0 +1,6 @@\n+.Command {\n+ background-color: var(--color-dimmest);\n+ padding: 0.25rem 0.5rem;\n+ display: block;\n+ border-radius: 0.125rem;\n+}\ndiff --git a\/src\/devtools\/views\/WarnIfLegacyBackendDetected.js b\/src\/devtools\/views\/WarnIfLegacyBackendDetected.js\nnew file mode 100644\nindex 0000000000..466c9ba1bd\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/WarnIfLegacyBackendDetected.js\n@@ -0,0 +1,76 @@\n+\/\/ @flow\n+\n+import React, { Fragment, useContext, useEffect } from 'react';\n+import { BridgeContext } from '.\/context';\n+import { ModalDialogContext } from '.\/ModalDialog';\n+\n+import styles from '.\/WarnIfLegacyBackendDetected.css';\n+\n+export default function WarnIfLegacyBackendDetected(_: {||}) {\n+ const bridge = useContext(BridgeContext);\n+ const { dispatch } = useContext(ModalDialogContext);\n+\n+ \/\/ Detect pairing with legacy v3 backend.\n+ \/\/ We do this by listening to a message that it broadcasts but the v4 backend doesn't.\n+ \/\/ In this case the frontend should show upgrade instructions.\n+ useEffect(() => {\n+ \/\/ Wall.listen returns a cleanup function\n+ let unlisten = bridge.wall.listen(message => {\n+ switch (message.type) {\n+ case 'call':\n+ case 'event':\n+ case 'many-events':\n+ \/\/ Any of these types indicate the v3 backend.\n+ dispatch({\n+ canBeDismissed: false,\n+ type: 'SHOW',\n+ title: 'DevTools v4 is incompatible with this version of React',\n+ content: <InvalidBackendDetected \/>,\n+ });\n+\n+ \/\/ Once we've identified the backend version, it's safe to unsubscribe.\n+ if (typeof unlisten === 'function') {\n+ unlisten();\n+ unlisten = null;\n+ }\n+ break;\n+ default:\n+ break;\n+ }\n+\n+ switch (message.event) {\n+ case 'isBackendStorageAPISupported':\n+ case 'isNativeStyleEditorSupported':\n+ case 'operations':\n+ case 'overrideComponentFilters':\n+ \/\/ Any of these is sufficient to indicate a v4 backend.\n+ \/\/ Once we've identified the backend version, it's safe to unsubscribe.\n+ if (typeof unlisten === 'function') {\n+ unlisten();\n+ unlisten = null;\n+ }\n+ break;\n+ default:\n+ break;\n+ }\n+ });\n+\n+ return () => {\n+ if (typeof unlisten === 'function') {\n+ unlisten();\n+ unlisten = null;\n+ }\n+ };\n+ }, [bridge, dispatch]);\n+\n+ return null;\n+}\n+\n+function InvalidBackendDetected(_: {||}) {\n+ return (\n+ <Fragment>\n+ <p>Either upgrade React or install React DevTools v3:<\/p>\n+ <code className={styles.Command}>npm install -d react-devtools@^3<\/code>\n+ <\/Fragment>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/context.js b\/src\/devtools\/views\/context.js\nnew file mode 100644\nindex 0000000000..96c654a943\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/context.js\n@@ -0,0 +1,14 @@\n+\/\/ @flow\n+\n+import { createContext } from 'react';\n+import Store from '..\/store';\n+\n+import type { FrontendBridge } from 'src\/bridge';\n+\n+export const BridgeContext = createContext<FrontendBridge>(\n+ ((null: any): FrontendBridge)\n+);\n+BridgeContext.displayName = 'BridgeContext';\n+\n+export const StoreContext = createContext<Store>(((null: any): Store));\n+StoreContext.displayName = 'StoreContext';\ndiff --git a\/src\/devtools\/views\/hooks.js b\/src\/devtools\/views\/hooks.js\nnew file mode 100644\nindex 0000000000..abbf5bcdde\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/hooks.js\n@@ -0,0 +1,201 @@\n+\/\/ @flow\n+\n+import throttle from 'lodash.throttle';\n+import { useCallback, useEffect, useLayoutEffect, useState } from 'react';\n+import { localStorageGetItem, localStorageSetItem } from 'src\/storage';\n+\n+export function useIsOverflowing(\n+ containerRef: { current: HTMLDivElement | null },\n+ totalChildWidth: number\n+): boolean {\n+ const [isOverflowing, setIsOverflowing] = useState<boolean>(false);\n+\n+ \/\/ It's important to use a layout effect, so that we avoid showing a flash of overflowed content.\n+ useLayoutEffect(() => {\n+ if (containerRef.current === null) {\n+ return () => {};\n+ }\n+\n+ const container = ((containerRef.current: any): HTMLDivElement);\n+\n+ const handleResize = throttle(\n+ () => setIsOverflowing(container.clientWidth <= totalChildWidth),\n+ 100\n+ );\n+\n+ handleResize();\n+\n+ \/\/ It's important to listen to the ownerDocument.defaultView to support the browser extension.\n+ \/\/ Here we use portals to render individual tabs (e.g. Profiler),\n+ \/\/ and the root document might belong to a different window.\n+ const ownerWindow = container.ownerDocument.defaultView;\n+ ownerWindow.addEventListener('resize', handleResize);\n+ return () => ownerWindow.removeEventListener('resize', handleResize);\n+ }, [containerRef, totalChildWidth]);\n+\n+ return isOverflowing;\n+}\n+\n+\/\/ Forked from https:\/\/usehooks.com\/useLocalStorage\/\n+export function useLocalStorage<T>(\n+ key: string,\n+ initialValue: T | (() => T)\n+): [T, (value: T | (() => T)) => void] {\n+ const getValueFromLocalStorage = useCallback(() => {\n+ try {\n+ const item = localStorageGetItem(key);\n+ if (item != null) {\n+ return JSON.parse(item);\n+ }\n+ } catch (error) {\n+ console.log(error);\n+ }\n+ if (typeof initialValue === 'function') {\n+ return ((initialValue: any): () => T)();\n+ } else {\n+ return initialValue;\n+ }\n+ }, [initialValue, key]);\n+\n+ const [storedValue, setStoredValue] = useState(getValueFromLocalStorage);\n+\n+ const setValue = useCallback(\n+ value => {\n+ try {\n+ const valueToStore =\n+ value instanceof Function ? (value: any)(storedValue) : value;\n+ setStoredValue(valueToStore);\n+ localStorageSetItem(key, JSON.stringify(valueToStore));\n+ } catch (error) {\n+ console.log(error);\n+ }\n+ },\n+ [key, storedValue]\n+ );\n+\n+ \/\/ Listen for changes to this local storage value made from other windows.\n+ \/\/ This enables the e.g. \"⚛️ Elements\" tab to update in response to changes from \"⚛️ Settings\".\n+ useLayoutEffect(() => {\n+ const onStorage = event => {\n+ const newValue = getValueFromLocalStorage();\n+ if (key === event.key && storedValue !== newValue) {\n+ setValue(newValue);\n+ }\n+ };\n+\n+ window.addEventListener('storage', onStorage);\n+\n+ return () => {\n+ window.removeEventListener('storage', onStorage);\n+ };\n+ }, [getValueFromLocalStorage, key, storedValue, setValue]);\n+\n+ return [storedValue, setValue];\n+}\n+\n+export function useModalDismissSignal(\n+ modalRef: { current: HTMLDivElement | null },\n+ dismissCallback: () => void,\n+ dismissOnClickOutside?: boolean = true\n+): void {\n+ useEffect(() => {\n+ if (modalRef.current === null) {\n+ return () => {};\n+ }\n+\n+ const handleDocumentKeyDown = ({ key }: any) => {\n+ if (key === 'Escape') {\n+ dismissCallback();\n+ }\n+ };\n+\n+ const handleDocumentClick = (event: any) => {\n+ \/\/ $FlowFixMe\n+ if (\n+ modalRef.current !== null &&\n+ !modalRef.current.contains(event.target)\n+ ) {\n+ event.stopPropagation();\n+ event.preventDefault();\n+\n+ dismissCallback();\n+ }\n+ };\n+\n+ \/\/ It's important to listen to the ownerDocument to support the browser extension.\n+ \/\/ Here we use portals to render individual tabs (e.g. Profiler),\n+ \/\/ and the root document might belong to a different window.\n+ const ownerDocument = modalRef.current.ownerDocument;\n+ ownerDocument.addEventListener('keydown', handleDocumentKeyDown);\n+ if (dismissOnClickOutside) {\n+ ownerDocument.addEventListener('click', handleDocumentClick);\n+ }\n+\n+ return () => {\n+ ownerDocument.removeEventListener('keydown', handleDocumentKeyDown);\n+ ownerDocument.removeEventListener('click', handleDocumentClick);\n+ };\n+ }, [modalRef, dismissCallback, dismissOnClickOutside]);\n+}\n+\n+\/\/ Copied from https:\/\/github.com\/facebook\/react\/pull\/15022\n+export function useSubscription<Value>({\n+ getCurrentValue,\n+ subscribe,\n+}: {|\n+ getCurrentValue: () => Value,\n+ subscribe: (callback: Function) => () => void,\n+|}): Value {\n+ const [state, setState] = useState({\n+ getCurrentValue,\n+ subscribe,\n+ value: getCurrentValue(),\n+ });\n+\n+ if (\n+ state.getCurrentValue !== getCurrentValue ||\n+ state.subscribe !== subscribe\n+ ) {\n+ setState({\n+ getCurrentValue,\n+ subscribe,\n+ value: getCurrentValue(),\n+ });\n+ }\n+\n+ useEffect(() => {\n+ let didUnsubscribe = false;\n+\n+ const checkForUpdates = () => {\n+ if (didUnsubscribe) {\n+ return;\n+ }\n+\n+ setState(prevState => {\n+ if (\n+ prevState.getCurrentValue !== getCurrentValue ||\n+ prevState.subscribe !== subscribe\n+ ) {\n+ return prevState;\n+ }\n+\n+ const value = getCurrentValue();\n+ if (prevState.value === value) {\n+ return prevState;\n+ }\n+\n+ return { ...prevState, value };\n+ });\n+ };\n+ const unsubscribe = subscribe(checkForUpdates);\n+\n+ checkForUpdates();\n+\n+ return () => {\n+ didUnsubscribe = true;\n+ unsubscribe();\n+ };\n+ }, [getCurrentValue, subscribe]);\n+\n+ return state.value;\n+}\ndiff --git a\/src\/devtools\/views\/portaledContent.js b\/src\/devtools\/views\/portaledContent.js\nnew file mode 100644\nindex 0000000000..546524b695\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/portaledContent.js\n@@ -0,0 +1,25 @@\n+\/\/ @flow\n+\n+import React from 'react';\n+import { createPortal } from 'react-dom';\n+import ErrorBoundary from '.\/ErrorBoundary';\n+\n+export type Props = {\n+ portalContainer?: Element,\n+};\n+\n+export default function portaledContent(\n+ Component: React$StatelessFunctionalComponent<any>\n+): React$StatelessFunctionalComponent<any> {\n+ return function PortaledContent({ portalContainer, ...rest }: Props) {\n+ const children = (\n+ <ErrorBoundary>\n+ <Component {...rest} \/>\n+ <\/ErrorBoundary>\n+ );\n+\n+ return portalContainer != null\n+ ? createPortal(children, portalContainer)\n+ : children;\n+ };\n+}\ndiff --git a\/src\/devtools\/views\/root.css b\/src\/devtools\/views\/root.css\nnew file mode 100644\nindex 0000000000..eb5812ca6c\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/root.css\n@@ -0,0 +1,178 @@\n+:root {\n+ \/**\n+ * IMPORTANT: When new theme variables are added below– also add them to SettingsContext updateThemeVariables()\n+ *\/\n+\n+ \/* Light theme *\/\n+ --light-color-attribute-name: #ef6632;\n+ --light-color-attribute-name-inverted: rgba(255, 255, 255, 0.7);\n+ --light-color-attribute-value: #1a1aa6;\n+ --light-color-attribute-value-inverted: #ffffff;\n+ --light-color-attribute-editable-value: #1a1aa6;\n+ --light-color-background: #ffffff;\n+ --light-color-background-hover: rgba(0, 136, 250, 0.1);\n+ --light-color-background-inactive: #e5e5e5;\n+ --light-color-background-invalid: #fff0f0;\n+ --light-color-background-selected: #0088fa;\n+ --light-color-button-background: #ffffff;\n+ --light-color-button-background-focus: #ededed;\n+ --light-color-button: #5f6673;\n+ --light-color-button-disabled: #cfd1d5;\n+ --light-color-button-active: #0088fa;\n+ --light-color-button-focus: #23272f;\n+ --light-color-button-hover: #23272f;\n+ --light-color-border: #eeeeee;\n+ --light-color-commit-did-not-render-fill: #cfd1d5;\n+ --light-color-commit-did-not-render-fill-text: #000000;\n+ --light-color-commit-did-not-render-pattern: #cfd1d5;\n+ --light-color-commit-did-not-render-pattern-text: #333333;\n+ --light-color-commit-gradient-0: #37afa9;\n+ --light-color-commit-gradient-1: #63b19e;\n+ --light-color-commit-gradient-2: #80b393;\n+ --light-color-commit-gradient-3: #97b488;\n+ --light-color-commit-gradient-4: #abb67d;\n+ --light-color-commit-gradient-5: #beb771;\n+ --light-color-commit-gradient-6: #cfb965;\n+ --light-color-commit-gradient-7: #dfba57;\n+ --light-color-commit-gradient-8: #efbb49;\n+ --light-color-commit-gradient-9: #febc38;\n+ --light-color-commit-gradient-text: #000000;\n+ --light-color-component-name: #6a51b2;\n+ --light-color-component-name-inverted: #ffffff;\n+ --light-color-component-badge-background: rgba(0, 0, 0, 0.1);\n+ --light-color-component-badge-background-inverted: rgba(255, 255, 255, 0.25);\n+ --light-color-component-badge-count: #777d88;\n+ --light-color-component-badge-count-inverted: rgba(255, 255, 255, 0.7);\n+ --light-color-dim: #777d88;\n+ --light-color-dimmer: #cfd1d5;\n+ --light-color-dimmest: #eff0f1;\n+ --light-color-expand-collapse-toggle: #777d88;\n+ --light-color-modal-background: rgba(255, 255, 255, 0.75);\n+ --light-color-record-active: #fc3a4b;\n+ --light-color-record-hover: #3578e5;\n+ --light-color-record-inactive: #0088fa;\n+ --light-color-scroll-thumb: #c2c2c2;\n+ --light-color-scroll-track: #fafafa;\n+ --light-color-search-match: yellow;\n+ --light-color-search-match-current: #f7923b;\n+ --light-color-selected-tree-highlight-active: rgba(0, 136, 250, 0.1);\n+ --light-color-selected-tree-highlight-inactive: rgba(0, 0, 0, 0.05);\n+ --light-color-shadow: rgba(0, 0, 0, 0.25);\n+ --light-color-tab-selected-border: #0088fa;\n+ --light-color-text: #000000;\n+ --light-color-text-invalid: #ff0000;\n+ --light-color-text-selected: #ffffff;\n+ --light-color-toggle-background-invalid: #fc3a4b;\n+ --light-color-toggle-background-on: #0088fa;\n+ --light-color-toggle-background-off: #cfd1d5;\n+ --light-color-toggle-text: #ffffff;\n+ --light-color-tooltip-background: rgba(0, 0, 0, 0.9);\n+ --light-color-tooltip-text: #ffffff;\n+\n+ \/* Dark theme *\/\n+ --dark-color-attribute-name: #9d87d2;\n+ --dark-color-attribute-name-inverted: #282828;\n+ --dark-color-attribute-value: #cedae0;\n+ --dark-color-attribute-value-inverted: #ffffff;\n+ --dark-color-attribute-editable-value: yellow;\n+ --dark-color-background: #282c34;\n+ --dark-color-background-hover: rgba(255, 255, 255, 0.1);\n+ --dark-color-background-inactive: #3d424a;\n+ --dark-color-background-invalid: #5c0000;\n+ --dark-color-background-selected: #178fb9;\n+ --dark-color-button-background: #282c34;\n+ --dark-color-button-background-focus: #3d424a;\n+ --dark-color-button: #afb3b9;\n+ --dark-color-button-active: #61dafb;\n+ --dark-color-button-disabled: #4f5766;\n+ --dark-color-button-focus: #a2e9fc;\n+ --dark-color-button-hover: #ededed;\n+ --dark-color-border: #3d424a;\n+ --dark-color-commit-did-not-render-fill: #777d88;\n+ --dark-color-commit-did-not-render-fill-text: #000000;\n+ --dark-color-commit-did-not-render-pattern: #666c77;\n+ --dark-color-commit-did-not-render-pattern-text: #ffffff;\n+ --dark-color-commit-gradient-0: #37afa9;\n+ --dark-color-commit-gradient-1: #63b19e;\n+ --dark-color-commit-gradient-2: #80b393;\n+ --dark-color-commit-gradient-3: #97b488;\n+ --dark-color-commit-gradient-4: #abb67d;\n+ --dark-color-commit-gradient-5: #beb771;\n+ --dark-color-commit-gradient-6: #cfb965;\n+ --dark-color-commit-gradient-7: #dfba57;\n+ --dark-color-commit-gradient-8: #efbb49;\n+ --dark-color-commit-gradient-9: #febc38;\n+ --dark-color-commit-gradient-text: #000000;\n+ --dark-color-component-name: #61dafb;\n+ --dark-color-component-name-inverted: #282828;\n+ --dark-color-component-badge-background: rgba(255, 255, 255, 0.25);\n+ --dark-color-component-badge-background-inverted: rgba(0, 0, 0, 0.25);\n+ --dark-color-component-badge-count: #8f949d;\n+ --dark-color-component-badge-count-inverted: rgba(255, 255, 255, 0.7);\n+ --dark-color-dim: #8f949d;\n+ --dark-color-dimmer: #777d88;\n+ --dark-color-dimmest: #4f5766;\n+ --dark-color-expand-collapse-toggle: #8f949d;\n+ --dark-color-modal-background: rgba(0, 0, 0, 0.75);\n+ --dark-color-record-active: #fc3a4b;\n+ --dark-color-record-hover: #a2e9fc;\n+ --dark-color-record-inactive: #61dafb;\n+ --dark-color-scroll-thumb: #afb3b9;\n+ --dark-color-scroll-track: #313640;\n+ --dark-color-search-match: yellow;\n+ --dark-color-search-match-current: #f7923b;\n+ --dark-color-selected-tree-highlight-active: rgba(23, 143, 185, 0.15);\n+ --dark-color-selected-tree-highlight-inactive: rgba(255, 255, 255, 0.05);\n+ --dark-color-shadow: rgba(0, 0, 0, 0.5);\n+ --dark-color-tab-selected-border: #178fb9;\n+ --dark-color-text: #ffffff;\n+ --dark-color-text-invalid: #ff8080;\n+ --dark-color-text-selected: #ffffff;\n+ --dark-color-toggle-background-invalid: #fc3a4b;\n+ --dark-color-toggle-background-on: #178fb9;\n+ --dark-color-toggle-background-off: #777d88;\n+ --dark-color-toggle-text: #ffffff;\n+ --dark-color-tooltip-background: rgba(255, 255, 255, 0.9);\n+ --dark-color-tooltip-text: #000000;\n+\n+ \/* Font smoothing *\/\n+ --light-font-smoothing: auto;\n+ --dark-font-smoothing: antialiased;\n+ --font-smoothing: auto;\n+\n+ \/* Compact density *\/\n+ --compact-font-size-monospace-small: 9px;\n+ --compact-font-size-monospace-normal: 11px;\n+ --compact-font-size-monospace-large: 15px;\n+ --compact-font-size-sans-small: 10px;\n+ --compact-font-size-sans-normal: 12px;\n+ --compact-font-size-sans-large: 14px;\n+ --compact-line-height-data: 18px;\n+ --compact-root-font-size: 16px;\n+\n+ \/* Comfortable density *\/\n+ --comfortable-font-size-monospace-small: 10px;\n+ --comfortable-font-size-monospace-normal: 13px;\n+ --comfortable-font-size-monospace-large: 17px;\n+ --comfortable-font-size-sans-small: 12px;\n+ --comfortable-font-size-sans-normal: 14px;\n+ --comfortable-font-size-sans-large: 16px;\n+ --comfortable-line-height-data: 22px;\n+ --comfortable-root-font-size: 20px;\n+\n+ \/* GitHub.com system fonts *\/\n+ --font-family-monospace: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo,\n+ Courier, monospace;\n+ --font-family-sans: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica,\n+ Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;\n+\n+ \/* Constant values shared between JS and CSS *\/\n+ --interaction-commit-size: 10px;\n+ --interaction-label-width: 200px;\n+}\n+\n+* {\n+ box-sizing: border-box;\n+\n+ -webkit-font-smoothing: var(--font-smoothing);\n+}\ndiff --git a\/src\/devtools\/views\/utils.js b\/src\/devtools\/views\/utils.js\nnew file mode 100644\nindex 0000000000..f5bf15371f\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/utils.js\n@@ -0,0 +1,190 @@\n+\/\/ @flow\n+\n+import escapeStringRegExp from 'escape-string-regexp';\n+import { meta } from '..\/..\/hydration';\n+\n+import type { HooksTree } from 'src\/backend\/types';\n+\n+export function createRegExp(string: string): RegExp {\n+ \/\/ Allow \/regex\/ syntax with optional last \/\n+ if (string[0] === '\/') {\n+ \/\/ Cut off first slash\n+ string = string.substring(1);\n+ \/\/ Cut off last slash, but only if it's there\n+ if (string[string.length - 1] === '\/') {\n+ string = string.substring(0, string.length - 1);\n+ }\n+ try {\n+ return new RegExp(string, 'i');\n+ } catch (err) {\n+ \/\/ Bad regex. Make it not match anything.\n+ \/\/ TODO: maybe warn in console?\n+ return new RegExp('.^');\n+ }\n+ }\n+\n+ function isLetter(char: string) {\n+ return char.toLowerCase() !== char.toUpperCase();\n+ }\n+\n+ function matchAnyCase(char: string) {\n+ if (!isLetter(char)) {\n+ \/\/ Don't mess with special characters like [.\n+ return char;\n+ }\n+ return '[' + char.toLowerCase() + char.toUpperCase() + ']';\n+ }\n+\n+ \/\/ 'item' should match 'Item' and 'ListItem', but not 'InviteMom'.\n+ \/\/ To do this, we'll slice off 'tem' and check first letter separately.\n+ const escaped = escapeStringRegExp(string);\n+ const firstChar = escaped[0];\n+ let restRegex = '';\n+ \/\/ For 'item' input, restRegex becomes '[tT][eE][mM]'\n+ \/\/ We can't simply make it case-insensitive because first letter case matters.\n+ for (let i = 1; i < escaped.length; i++) {\n+ restRegex += matchAnyCase(escaped[i]);\n+ }\n+\n+ if (!isLetter(firstChar)) {\n+ \/\/ We can't put a non-character like [ in a group\n+ \/\/ so we fall back to the simple case.\n+ return new RegExp(firstChar + restRegex);\n+ }\n+\n+ \/\/ Construct a smarter regex.\n+ return new RegExp(\n+ \/\/ For example:\n+ \/\/ (^[iI]|I)[tT][eE][mM]\n+ \/\/ Matches:\n+ \/\/ 'Item'\n+ \/\/ 'ListItem'\n+ \/\/ but not 'InviteMom'\n+ '(^' +\n+ matchAnyCase(firstChar) +\n+ '|' +\n+ firstChar.toUpperCase() +\n+ ')' +\n+ restRegex\n+ );\n+}\n+\n+export function getMetaValueLabel(data: Object): string | null {\n+ const name = data[meta.name];\n+ const type = data[meta.type];\n+\n+ switch (type) {\n+ case 'html_element':\n+ return name ? `<${name.toLowerCase()} \/>` : '';\n+ case 'react_element':\n+ return `<${name} \/>`;\n+ case 'function':\n+ return `${name || 'fn'}()`;\n+ case 'object':\n+ return 'Object';\n+ case 'date':\n+ case 'symbol':\n+ return name;\n+ case 'iterator':\n+ return `${name}(…)`;\n+ case 'array_buffer':\n+ case 'data_view':\n+ case 'array':\n+ case 'typed_array':\n+ return `${name}[${data[meta.size]}]`;\n+ default:\n+ return null;\n+ }\n+}\n+\n+function sanitize(data: Object): void {\n+ for (const key in data) {\n+ const value = data[key];\n+\n+ if (value && value[meta.type]) {\n+ data[key] = getMetaValueLabel(value);\n+ } else if (value != null) {\n+ if (Array.isArray(value)) {\n+ sanitize(value);\n+ } else if (typeof value === 'object') {\n+ sanitize(value);\n+ }\n+ }\n+ }\n+}\n+\n+export function serializeDataForCopy(props: Object): string {\n+ const cloned = Object.assign({}, props);\n+\n+ sanitize(cloned);\n+\n+ try {\n+ return JSON.stringify(cloned, null, 2);\n+ } catch (error) {\n+ return '';\n+ }\n+}\n+\n+export function serializeHooksForCopy(hooks: HooksTree | null): string {\n+ \/\/ $FlowFixMe \"HooksTree is not an object\"\n+ const cloned = Object.assign([], hooks);\n+\n+ const queue = [...cloned];\n+\n+ while (queue.length > 0) {\n+ const current = queue.pop();\n+\n+ \/\/ These aren't meaningful\n+ delete current.id;\n+ delete current.isStateEditable;\n+\n+ if (current.subHooks.length > 0) {\n+ queue.push(...current.subHooks);\n+ }\n+ }\n+\n+ sanitize(cloned);\n+\n+ try {\n+ return JSON.stringify(cloned, null, 2);\n+ } catch (error) {\n+ return '';\n+ }\n+}\n+\n+\/\/ Keeping this in memory seems to be enough to enable the browser to download larger profiles.\n+\/\/ Without this, we would see a \"Download failed: network error\" failure.\n+let downloadUrl = null;\n+\n+export function downloadFile(filename: string, text: string): void {\n+ const blob = new Blob([text], { type: 'text\/plain;charset=utf-8' });\n+\n+ if (downloadUrl !== null) {\n+ URL.revokeObjectURL(downloadUrl);\n+ }\n+\n+ downloadUrl = URL.createObjectURL(blob);\n+\n+ const element = document.createElement('a');\n+ element.setAttribute('href', downloadUrl);\n+ element.setAttribute('download', filename);\n+ element.style.display = 'none';\n+ ((document.body: any): HTMLBodyElement).appendChild(element);\n+\n+ element.click();\n+\n+ ((document.body: any): HTMLBodyElement).removeChild(element);\n+}\n+\n+export function truncateText(text: string, maxLength: number): string {\n+ const { length } = text;\n+ if (length > maxLength) {\n+ return (\n+ text.substr(0, Math.floor(maxLength \/ 2)) +\n+ '…' +\n+ text.substr(length - Math.ceil(maxLength \/ 2) - 1)\n+ );\n+ } else {\n+ return text;\n+ }\n+}\ndiff --git a\/src\/hook.js b\/src\/hook.js\nnew file mode 100644\nindex 0000000000..3e9e55d035\n--- \/dev\/null\n+++ b\/src\/hook.js\n@@ -0,0 +1,312 @@\n+\/**\n+ * Install the hook on window, which is an event emitter.\n+ * Note because Chrome content scripts cannot directly modify the window object,\n+ * we are evaling this function by inserting a script tag.\n+ * That's why we have to inline the whole event emitter implementation here.\n+ *\n+ * @flow\n+ *\/\n+\n+import {\n+ patch as patchConsole,\n+ registerRenderer as registerRendererWithConsole,\n+} from '.\/backend\/console';\n+\n+import type { DevToolsHook } from 'src\/backend\/types';\n+\n+declare var window: any;\n+\n+export function installHook(target: any): DevToolsHook | null {\n+ if (target.hasOwnProperty('__REACT_DEVTOOLS_GLOBAL_HOOK__')) return null;\n+\n+ function detectReactBuildType(renderer) {\n+ try {\n+ if (typeof renderer.version === 'string') {\n+ \/\/ React DOM Fiber (16+)\n+ if (renderer.bundleType > 0) {\n+ \/\/ This is not a production build.\n+ \/\/ We are currently only using 0 (PROD) and 1 (DEV)\n+ \/\/ but might add 2 (PROFILE) in the future.\n+ return 'development';\n+ }\n+\n+ \/\/ React 16 uses flat bundles. If we report the bundle as production\n+ \/\/ version, it means we also minified and envified it ourselves.\n+ return 'production';\n+ \/\/ Note: There is still a risk that the CommonJS entry point has not\n+ \/\/ been envified or uglified. In this case the user would have *both*\n+ \/\/ development and production bundle, but only the prod one would run.\n+ \/\/ This would be really bad. We have a separate check for this because\n+ \/\/ it happens *outside* of the renderer injection. See `checkDCE` below.\n+ }\n+\n+ const toString = Function.prototype.toString;\n+ if (renderer.Mount && renderer.Mount._renderNewRootComponent) {\n+ \/\/ React DOM Stack\n+ const renderRootCode = toString.call(\n+ renderer.Mount._renderNewRootComponent\n+ );\n+ \/\/ Filter out bad results (if that is even possible):\n+ if (renderRootCode.indexOf('function') !== 0) {\n+ \/\/ Hope for the best if we're not sure.\n+ return 'production';\n+ }\n+ \/\/ Check for React DOM Stack < 15.1.0 in development.\n+ \/\/ If it contains \"storedMeasure\" call, it's wrapped in ReactPerf (DEV only).\n+ \/\/ This would be true even if it's minified, as method name still matches.\n+ if (renderRootCode.indexOf('storedMeasure') !== -1) {\n+ return 'development';\n+ }\n+ \/\/ For other versions (and configurations) it's not so easy.\n+ \/\/ Let's quickly exclude proper production builds.\n+ \/\/ If it contains a warning message, it's either a DEV build,\n+ \/\/ or an PROD build without proper dead code elimination.\n+ if (renderRootCode.indexOf('should be a pure function') !== -1) {\n+ \/\/ Now how do we tell a DEV build from a bad PROD build?\n+ \/\/ If we see NODE_ENV, we're going to assume this is a dev build\n+ \/\/ because most likely it is referring to an empty shim.\n+ if (renderRootCode.indexOf('NODE_ENV') !== -1) {\n+ return 'development';\n+ }\n+ \/\/ If we see \"development\", we're dealing with an envified DEV build\n+ \/\/ (such as the official React DEV UMD).\n+ if (renderRootCode.indexOf('development') !== -1) {\n+ return 'development';\n+ }\n+ \/\/ I've seen process.env.NODE_ENV !== 'production' being smartly\n+ \/\/ replaced by `true` in DEV by Webpack. I don't know how that\n+ \/\/ works but we can safely guard against it because `true` was\n+ \/\/ never used in the function source since it was written.\n+ if (renderRootCode.indexOf('true') !== -1) {\n+ return 'development';\n+ }\n+ \/\/ By now either it is a production build that has not been minified,\n+ \/\/ or (worse) this is a minified development build using non-standard\n+ \/\/ environment (e.g. \"staging\"). We're going to look at whether\n+ \/\/ the function argument name is mangled:\n+ if (\n+ \/\/ 0.13 to 15\n+ renderRootCode.indexOf('nextElement') !== -1 ||\n+ \/\/ 0.12\n+ renderRootCode.indexOf('nextComponent') !== -1\n+ ) {\n+ \/\/ We can't be certain whether this is a development build or not,\n+ \/\/ but it is definitely unminified.\n+ return 'unminified';\n+ } else {\n+ \/\/ This is likely a minified development build.\n+ return 'development';\n+ }\n+ }\n+ \/\/ By now we know that it's envified and dead code elimination worked,\n+ \/\/ but what if it's still not minified? (Is this even possible?)\n+ \/\/ Let's check matches for the first argument name.\n+ if (\n+ \/\/ 0.13 to 15\n+ renderRootCode.indexOf('nextElement') !== -1 ||\n+ \/\/ 0.12\n+ renderRootCode.indexOf('nextComponent') !== -1\n+ ) {\n+ return 'unminified';\n+ }\n+ \/\/ Seems like we're using the production version.\n+ \/\/ However, the branch above is Stack-only so this is 15 or earlier.\n+ return 'outdated';\n+ }\n+ } catch (err) {\n+ \/\/ Weird environments may exist.\n+ \/\/ This code needs a higher fault tolerance\n+ \/\/ because it runs even with closed DevTools.\n+ \/\/ TODO: should we catch errors in all injected code, and not just this part?\n+ }\n+ return 'production';\n+ }\n+\n+ function checkDCE(fn: Function) {\n+ \/\/ This runs for production versions of React.\n+ \/\/ Needs to be super safe.\n+ try {\n+ const toString = Function.prototype.toString;\n+ const code = toString.call(fn);\n+\n+ \/\/ This is a string embedded in the passed function under DEV-only\n+ \/\/ condition. However the function executes only in PROD. Therefore,\n+ \/\/ if we see it, dead code elimination did not work.\n+ if (code.indexOf('^_^') > -1) {\n+ \/\/ Remember to report during next injection.\n+ hasDetectedBadDCE = true;\n+\n+ \/\/ Bonus: throw an exception hoping that it gets picked up by a reporting system.\n+ \/\/ Not synchronously so that it doesn't break the calling code.\n+ setTimeout(function() {\n+ throw new Error(\n+ 'React is running in production mode, but dead code ' +\n+ 'elimination has not been applied. Read how to correctly ' +\n+ 'configure React for production: ' +\n+ 'https:\/\/fb.me\/react-perf-use-the-production-build'\n+ );\n+ });\n+ }\n+ } catch (err) {}\n+ }\n+\n+ let uidCounter = 0;\n+\n+ function inject(renderer) {\n+ const id = ++uidCounter;\n+ renderers.set(id, renderer);\n+\n+ const reactBuildType = hasDetectedBadDCE\n+ ? 'deadcode'\n+ : detectReactBuildType(renderer);\n+\n+ \/\/ Patching the console enables DevTools to do a few useful things:\n+ \/\/ * Append component stacks to warnings and error messages\n+ \/\/ * Disable logging during re-renders to inspect hooks (see inspectHooksOfFiber)\n+ \/\/\n+ \/\/ For React Native, we intentionally patch early (during injection).\n+ \/\/ This provides React Native developers with components stacks even if they don't run DevTools.\n+ \/\/ This won't work for DOM though, since this entire file is eval'ed and inserted as a script tag.\n+ \/\/ In that case, we'll patch later (when the frontend attaches).\n+ \/\/\n+ \/\/ Don't patch in test environments because we don't want to interfere with Jest's own console overrides.\n+ if (process.env.NODE_ENV !== 'test') {\n+ try {\n+ \/\/ The installHook() function is injected by being stringified in the browser,\n+ \/\/ so imports outside of this function do not get included.\n+ \/\/\n+ \/\/ Normally we could check \"typeof patchConsole === 'function'\",\n+ \/\/ but Webpack wraps imports with an object (e.g. _backend_console__WEBPACK_IMPORTED_MODULE_0__)\n+ \/\/ and the object itself will be undefined as well for the reasons mentioned above,\n+ \/\/ so we use try\/catch instead.\n+ if (window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ !== false) {\n+ registerRendererWithConsole(renderer);\n+ patchConsole();\n+ }\n+ } catch (error) {}\n+ }\n+\n+ \/\/ If we have just reloaded to profile, we need to inject the renderer interface before the app loads.\n+ \/\/ Otherwise the renderer won't yet exist and we can skip this step.\n+ const attach = target.__REACT_DEVTOOLS_ATTACH__;\n+ if (typeof attach === 'function') {\n+ const rendererInterface = attach(hook, id, renderer, target);\n+ hook.rendererInterfaces.set(id, rendererInterface);\n+ }\n+\n+ hook.emit('renderer', { id, renderer, reactBuildType });\n+\n+ return id;\n+ }\n+\n+ let hasDetectedBadDCE = false;\n+\n+ function sub(event, fn) {\n+ hook.on(event, fn);\n+ return () => hook.off(event, fn);\n+ }\n+\n+ function on(event, fn) {\n+ if (!listeners[event]) {\n+ listeners[event] = [];\n+ }\n+ listeners[event].push(fn);\n+ }\n+\n+ function off(event, fn) {\n+ if (!listeners[event]) {\n+ return;\n+ }\n+ const index = listeners[event].indexOf(fn);\n+ if (index !== -1) {\n+ listeners[event].splice(index, 1);\n+ }\n+ if (!listeners[event].length) {\n+ delete listeners[event];\n+ }\n+ }\n+\n+ function emit(event, data) {\n+ if (listeners[event]) {\n+ listeners[event].map(fn => fn(data));\n+ }\n+ }\n+\n+ function getFiberRoots(rendererID) {\n+ const roots = fiberRoots;\n+ if (!roots[rendererID]) {\n+ roots[rendererID] = new Set();\n+ }\n+ return roots[rendererID];\n+ }\n+\n+ function onCommitFiberUnmount(rendererID, fiber) {\n+ const rendererInterface = rendererInterfaces.get(rendererID);\n+ if (rendererInterface != null) {\n+ rendererInterface.handleCommitFiberUnmount(fiber);\n+ }\n+ }\n+\n+ function onCommitFiberRoot(rendererID, root, priorityLevel) {\n+ const mountedRoots = hook.getFiberRoots(rendererID);\n+ const current = root.current;\n+ const isKnownRoot = mountedRoots.has(root);\n+ const isUnmounting =\n+ current.memoizedState == null || current.memoizedState.element == null;\n+\n+ \/\/ Keep track of mounted roots so we can hydrate when DevTools connect.\n+ if (!isKnownRoot && !isUnmounting) {\n+ mountedRoots.add(root);\n+ } else if (isKnownRoot && isUnmounting) {\n+ mountedRoots.delete(root);\n+ }\n+ const rendererInterface = rendererInterfaces.get(rendererID);\n+ if (rendererInterface != null) {\n+ rendererInterface.handleCommitFiberRoot(root, priorityLevel);\n+ }\n+ }\n+\n+ \/\/ TODO: More meaningful names for \"rendererInterfaces\" and \"renderers\".\n+ const fiberRoots = {};\n+ const rendererInterfaces = new Map();\n+ const listeners = {};\n+ const renderers = new Map();\n+\n+ const hook: DevToolsHook = {\n+ rendererInterfaces,\n+ listeners,\n+ renderers,\n+\n+ emit,\n+ getFiberRoots,\n+ inject,\n+ on,\n+ off,\n+ sub,\n+\n+ \/\/ This is a legacy flag.\n+ \/\/ React v16 checks the hook for this to ensure DevTools is new enough.\n+ supportsFiber: true,\n+\n+ \/\/ React calls these methods.\n+ checkDCE,\n+ onCommitFiberUnmount,\n+ onCommitFiberRoot,\n+ };\n+\n+ Object.defineProperty(\n+ target,\n+ '__REACT_DEVTOOLS_GLOBAL_HOOK__',\n+ ({\n+ \/\/ This property needs to be configurable for the test environment,\n+ \/\/ else we won't be able to delete and recreate it beween tests.\n+ configurable: __DEV__,\n+ enumerable: false,\n+ get() {\n+ return hook;\n+ },\n+ }: Object)\n+ );\n+\n+ return hook;\n+}\ndiff --git a\/src\/hydration.js b\/src\/hydration.js\nnew file mode 100644\nindex 0000000000..ac94f73d1c\n--- \/dev\/null\n+++ b\/src\/hydration.js\n@@ -0,0 +1,382 @@\n+\/\/ @flow\n+\n+import {\n+ isElement,\n+ typeOf,\n+ AsyncMode,\n+ ConcurrentMode,\n+ ContextConsumer,\n+ ContextProvider,\n+ ForwardRef,\n+ Fragment,\n+ Lazy,\n+ Memo,\n+ Portal,\n+ Profiler,\n+ StrictMode,\n+ Suspense,\n+} from 'react-is';\n+import { getDisplayName, getInObject, setInObject } from '.\/utils';\n+\n+export const meta = {\n+ inspectable: Symbol('inspectable'),\n+ inspected: Symbol('inspected'),\n+ name: Symbol('name'),\n+ readonly: Symbol('readonly'),\n+ size: Symbol('size'),\n+ type: Symbol('type'),\n+};\n+\n+type Dehydrated = {|\n+ inspectable: boolean,\n+ name: string | null,\n+ readonly?: boolean,\n+ size?: number,\n+ type: string,\n+|};\n+\n+\/\/ This threshold determines the depth at which the bridge \"dehydrates\" nested data.\n+\/\/ Dehydration means that we don't serialize the data for e.g. postMessage or stringify,\n+\/\/ unless the frontend explicitly requests it (e.g. a user clicks to expand a props object).\n+\/\/\n+\/\/ Reducing this threshold will improve the speed of initial component inspection,\n+\/\/ but may decrease the responsiveness of expanding objects\/arrays to inspect further.\n+const LEVEL_THRESHOLD = 2;\n+\n+type PropType =\n+ | 'array'\n+ | 'array_buffer'\n+ | 'boolean'\n+ | 'data_view'\n+ | 'date'\n+ | 'function'\n+ | 'html_element'\n+ | 'infinity'\n+ | 'iterator'\n+ | 'nan'\n+ | 'null'\n+ | 'number'\n+ | 'object'\n+ | 'react_element'\n+ | 'string'\n+ | 'symbol'\n+ | 'typed_array'\n+ | 'undefined'\n+ | 'unknown';\n+\n+\/**\n+ * Get a enhanced\/artificial type string based on the object instance\n+ *\/\n+function getDataType(data: Object): PropType {\n+ if (data === null) {\n+ return 'null';\n+ } else if (data === undefined) {\n+ return 'undefined';\n+ }\n+\n+ if (isElement(data)) {\n+ return 'react_element';\n+ }\n+\n+ if (typeof HTMLElement !== 'undefined' && data instanceof HTMLElement) {\n+ return 'html_element';\n+ }\n+\n+ const type = typeof data;\n+ switch (type) {\n+ case 'boolean':\n+ return 'boolean';\n+ case 'function':\n+ return 'function';\n+ case 'number':\n+ if (Number.isNaN(data)) {\n+ return 'nan';\n+ } else if (!Number.isFinite(data)) {\n+ return 'infinity';\n+ } else {\n+ return 'number';\n+ }\n+ case 'object':\n+ if (Array.isArray(data)) {\n+ return 'array';\n+ } else if (ArrayBuffer.isView(data)) {\n+ return data instanceof DataView ? 'data_view' : 'typed_array';\n+ } else if (data instanceof ArrayBuffer) {\n+ return 'array_buffer';\n+ } else if (typeof data[Symbol.iterator] === 'function') {\n+ return 'iterator';\n+ } else if (Object.prototype.toString.call(data) === '[object Date]') {\n+ return 'date';\n+ }\n+ return 'object';\n+ case 'string':\n+ return 'string';\n+ case 'symbol':\n+ return 'symbol';\n+ default:\n+ return 'unknown';\n+ }\n+}\n+\n+\/**\n+ * Generate the dehydrated metadata for complex object instances\n+ *\/\n+function createDehydrated(\n+ type: string,\n+ inspectable: boolean,\n+ data: Object,\n+ cleaned: Array<Array<string | number>>,\n+ path: Array<string | number>\n+): Dehydrated {\n+ cleaned.push(path);\n+\n+ const dehydrated: Dehydrated = {\n+ inspectable,\n+ type,\n+ name:\n+ !data.constructor || data.constructor.name === 'Object'\n+ ? ''\n+ : data.constructor.name,\n+ };\n+\n+ if (type === 'array' || type === 'typed_array') {\n+ dehydrated.size = data.length;\n+ } else if (type === 'object') {\n+ dehydrated.size = Object.keys(data).length;\n+ }\n+\n+ if (type === 'iterator' || type === 'typed_array') {\n+ dehydrated.readonly = true;\n+ }\n+\n+ return dehydrated;\n+}\n+\n+\/**\n+ * Strip out complex data (instances, functions, and data nested > LEVEL_THRESHOLD levels deep).\n+ * The paths of the stripped out objects are appended to the `cleaned` list.\n+ * On the other side of the barrier, the cleaned list is used to \"re-hydrate\" the cleaned representation into\n+ * an object with symbols as attributes, so that a sanitized object can be distinguished from a normal object.\n+ *\n+ * Input: {\"some\": {\"attr\": fn()}, \"other\": AnInstance}\n+ * Output: {\n+ * \"some\": {\n+ * \"attr\": {\"name\": the fn.name, type: \"function\"}\n+ * },\n+ * \"other\": {\n+ * \"name\": \"AnInstance\",\n+ * \"type\": \"object\",\n+ * },\n+ * }\n+ * and cleaned = [[\"some\", \"attr\"], [\"other\"]]\n+ *\/\n+export function dehydrate(\n+ data: Object,\n+ cleaned: Array<Array<string | number>>,\n+ path: Array<string | number>,\n+ isPathWhitelisted: (path: Array<string | number>) => boolean,\n+ level?: number = 0\n+): string | Dehydrated | { [key: string]: string | Dehydrated } {\n+ const type = getDataType(data);\n+\n+ switch (type) {\n+ case 'html_element':\n+ cleaned.push(path);\n+ return {\n+ inspectable: false,\n+ name: data.tagName,\n+ type,\n+ };\n+\n+ case 'function':\n+ cleaned.push(path);\n+ return {\n+ inspectable: false,\n+ name: data.name,\n+ type,\n+ };\n+\n+ case 'string':\n+ return data.length <= 500 ? data : data.slice(0, 500) + '...';\n+\n+ case 'symbol':\n+ cleaned.push(path);\n+ return {\n+ inspectable: false,\n+ name: data.toString(),\n+ type,\n+ };\n+\n+ \/\/ React Elements aren't very inspector-friendly,\n+ \/\/ and often contain private fields or circular references.\n+ case 'react_element':\n+ cleaned.push(path);\n+ return {\n+ inspectable: false,\n+ name: getDisplayNameForReactElement(data),\n+ type,\n+ };\n+\n+ \/\/ ArrayBuffers error if you try to inspect them.\n+ case 'array_buffer':\n+ case 'data_view':\n+ cleaned.push(path);\n+ return {\n+ inspectable: false,\n+ name: type === 'data_view' ? 'DataView' : 'ArrayBuffer',\n+ size: data.byteLength,\n+ type,\n+ };\n+\n+ case 'array':\n+ const arrayPathCheck = isPathWhitelisted(path);\n+ if (level >= LEVEL_THRESHOLD && !arrayPathCheck) {\n+ return createDehydrated(type, true, data, cleaned, path);\n+ }\n+ return data.map((item, i) =>\n+ dehydrate(\n+ item,\n+ cleaned,\n+ path.concat([i]),\n+ isPathWhitelisted,\n+ arrayPathCheck ? 1 : level + 1\n+ )\n+ );\n+\n+ case 'typed_array':\n+ case 'iterator':\n+ return createDehydrated(type, false, data, cleaned, path);\n+\n+ case 'date':\n+ cleaned.push(path);\n+ return {\n+ inspectable: false,\n+ name: data.toString(),\n+ type,\n+ };\n+\n+ case 'object':\n+ const objectPathCheck = isPathWhitelisted(path);\n+ if (level >= LEVEL_THRESHOLD && !objectPathCheck) {\n+ return createDehydrated(type, true, data, cleaned, path);\n+ } else {\n+ const object = {};\n+ for (let name in data) {\n+ object[name] = dehydrate(\n+ data[name],\n+ cleaned,\n+ path.concat([name]),\n+ isPathWhitelisted,\n+ objectPathCheck ? 1 : level + 1\n+ );\n+ }\n+ return object;\n+ }\n+\n+ case 'infinity':\n+ case 'nan':\n+ case 'undefined':\n+ \/\/ Some values are lossy when sent through a WebSocket.\n+ \/\/ We dehydrate+rehydrate them to preserve their type.\n+ cleaned.push(path);\n+ return {\n+ type,\n+ };\n+\n+ default:\n+ return data;\n+ }\n+}\n+\n+export function fillInPath(\n+ object: Object,\n+ path: Array<string | number>,\n+ value: any\n+) {\n+ const target = getInObject(object, path);\n+ if (target != null) {\n+ delete target[meta.inspectable];\n+ delete target[meta.inspected];\n+ delete target[meta.name];\n+ delete target[meta.readonly];\n+ delete target[meta.size];\n+ delete target[meta.type];\n+ }\n+ setInObject(object, path, value);\n+}\n+\n+export function hydrate(\n+ object: Object,\n+ cleaned: Array<Array<string | number>>\n+): Object {\n+ cleaned.forEach((path: Array<string | number>) => {\n+ const length = path.length;\n+ const last = path[length - 1];\n+ const parent = getInObject(object, path.slice(0, length - 1));\n+ if (!parent || !parent.hasOwnProperty(last)) {\n+ return;\n+ }\n+\n+ const value = parent[last];\n+\n+ if (value.type === 'infinity') {\n+ parent[last] = Infinity;\n+ } else if (value.type === 'nan') {\n+ parent[last] = NaN;\n+ } else if (value.type === 'undefined') {\n+ parent[last] = undefined;\n+ } else {\n+ \/\/ Replace the string keys with Symbols so they're non-enumerable.\n+ const replaced: { [key: Symbol]: boolean | string } = {};\n+ replaced[meta.inspectable] = !!value.inspectable;\n+ replaced[meta.inspected] = false;\n+ replaced[meta.name] = value.name;\n+ replaced[meta.size] = value.size;\n+ replaced[meta.readonly] = !!value.readonly;\n+ replaced[meta.type] = value.type;\n+\n+ parent[last] = replaced;\n+ }\n+ });\n+ return object;\n+}\n+\n+export function getDisplayNameForReactElement(\n+ element: React$Element<any>\n+): string | null {\n+ const elementType = typeOf(element);\n+ switch (elementType) {\n+ case AsyncMode:\n+ case ConcurrentMode:\n+ return 'ConcurrentMode';\n+ case ContextConsumer:\n+ return 'ContextConsumer';\n+ case ContextProvider:\n+ return 'ContextProvider';\n+ case ForwardRef:\n+ return 'ForwardRef';\n+ case Fragment:\n+ return 'Fragment';\n+ case Lazy:\n+ return 'Lazy';\n+ case Memo:\n+ return 'Memo';\n+ case Portal:\n+ return 'Portal';\n+ case Profiler:\n+ return 'Profiler';\n+ case StrictMode:\n+ return 'StrictMode';\n+ case Suspense:\n+ return 'Suspense';\n+ default:\n+ const { type } = element;\n+ if (typeof type === 'string') {\n+ return type;\n+ } else if (type != null) {\n+ return getDisplayName(type, 'Anonymous');\n+ } else {\n+ return 'Element';\n+ }\n+ }\n+}\ndiff --git a\/src\/node_modules\/react-window\/CHANGELOG.md b\/src\/node_modules\/react-window\/CHANGELOG.md\nnew file mode 100644\nindex 0000000000..7030d4ee8e\n--- \/dev\/null\n+++ b\/src\/node_modules\/react-window\/CHANGELOG.md\n@@ -0,0 +1,96 @@\n+Changelog\n+------------\n+\n+### 1.8.0\n+* 🎉 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))\n+\n+### 1.7.2\n+* 🐛 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).\n+\n+### 1.7.1\n+* 🐛 Fix SSR regression introduced in 1.7.0 - ([Betree](https:\/\/github.com\/Betree) - [#185](https:\/\/github.com\/bvaughn\/react-window\/pull\/185))\n+\n+### 1.7.0\n+* 🎉 Grid `scrollToItem` supports optional `rowIndex` and `columnIndex` params ([jgoz](https:\/\/github.com\/jgoz) - [#174](https:\/\/github.com\/bvaughn\/react-window\/pull\/174))\n+* 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))\n+\n+### 1.6.2\n+* 🐛 Bugfix for RTL when scrolling back towards the beginning (right) of the list.\n+\n+### 1.6.1\n+* 🐛 Bugfix to account for differences between Chrome and non-Chrome browsers with regard to RTL and \"scroll\" events.\n+\n+### 1.6.0\n+* 🎉 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)\n+* 🐛 Grid `scrollToItem` methods take scrollbar size into account when aligning items - [#153](https:\/\/github.com\/bvaughn\/react-window\/issues\/153)\n+\n+### 1.5.2\n+* 🐛 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))\n+\n+### 1.5.1\n+* 🐛 Updated `getDerivedState` Flow annotations to address a warning in a newer version of Flow.\n+\n+### 1.5.0\n+* 🎉 Added advanced memoization helpers methods `areEqual` and `shouldComponentUpdate` for item renderers. - [#114](https:\/\/github.com\/bvaughn\/react-window\/issues\/114)\n+\n+### 1.4.0\n+* 🎉 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).\n+* 🎉 Grid components now support separate `overscanColumnsCount` and `overscanRowsCount` props. Legacy `overscanCount` prop will continue to work, but with a deprecation warning in DEV mode.\n+* 🐛 Replaced `setTimeout` with `requestAnimationFrame` based timer, to avoid starvation issue for `isScrolling` reset. - [#106](https:\/\/github.com\/bvaughn\/react-window\/issues\/106)\n+* 🎉 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.\n+* 🐛 List re-renders items if `direction` prop changes. - [#104](https:\/\/github.com\/bvaughn\/react-window\/issues\/104)\n+\n+### 1.3.1\n+* 🎉 Pass `itemData` value to custom `itemKey` callbacks when present - [#90](https:\/\/github.com\/bvaughn\/react-window\/issues\/90))\n+\n+### 1.3.0\n+* (Skipped)\n+\n+### 1.2.4\n+* 🐛 Added Flow annotations to memoized methods to avoid a Flow warning for newer versions of Flow\n+\n+### 1.2.3\n+* 🐛 Relaxed `children` validation checks. They were too strict and didn't support new React APIs like `memo`.\n+\n+### 1.2.2\n+* 🐛 Improved Flow types for class component item renderers - ([nicholas-l](https:\/\/github.com\/nicholas-l) - [#77](https:\/\/github.com\/bvaughn\/react-window\/pull\/77))\n+\n+### 1.2.1\n+* 🎉 Improved Flow types to include optional `itemData` parameter. ([TrySound](https:\/\/github.com\/TrySound) - [#66](https:\/\/github.com\/bvaughn\/react-window\/pull\/66))\n+* 🐛 `VariableSizeList` and `VariableSizeGrid` no longer call size getter functions with invalid index when item count is zero.\n+\n+### 1.2.0\n+* 🎉 Flow types added to NPM package. ([TrySound](https:\/\/github.com\/TrySound) - [#40](https:\/\/github.com\/bvaughn\/react-window\/pull\/40))\n+* 🎉 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))\n+* 🐛 Fixed invalid `this` pointer in `VariableSizeGrid` that broke the `resetAfter*` methods - [#58](https:\/\/github.com\/bvaughn\/react-window\/pull\/58))\n+* 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))\n+* Remove `overflow:hidden` from inner container ([souporserious](https:\/\/github.com\/souporserious) - [#56](https:\/\/github.com\/bvaughn\/react-window\/pull\/56))\n+\n+### 1.1.2\n+* 🐛 Fixed edge case `scrollToItem` bug that caused lists\/grids with very few items to have negative scroll offsets.\n+\n+### 1.1.1\n+* 🐛 `FixedSizeGrid` and `FixedSizeList` automatically clear style cache when item size props change.\n+\n+### 1.1.0\n+* 🎉 Use explicit `constructor` and `super` to generate cleaner component code. ([Andarist](https:\/\/github.com\/Andarist) - [#26](https:\/\/github.com\/bvaughn\/react-window\/pull\/26))\n+* 🎉 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))\n+\n+### 1.0.3\n+* 🐛 Avoid unnecessary scrollbars for lists (e.g. no horizontal scrollbar for a vertical list) unless content requires them.\n+\n+### 1.0.2\n+\n+* 🎉 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))\n+* 🎉 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))\n+* 🎉 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))\n+\n+### 1.0.1\n+Updated `README.md` file to remove `@alpha` tag from NPM installation instructions.\n+\n+# 1.0.0\n+Initial release of library. Includes the following components:\n+* `FixedSizeGrid`\n+* `FixedSizeList`\n+* `VariableSizeGrid`\n+* `VariableSizeList`\ndiff --git a\/src\/node_modules\/react-window\/LICENSE.md b\/src\/node_modules\/react-window\/LICENSE.md\nnew file mode 100644\nindex 0000000000..0569d0a7b8\n--- \/dev\/null\n+++ b\/src\/node_modules\/react-window\/LICENSE.md\n@@ -0,0 +1,21 @@\n+The MIT License (MIT)\n+\n+Copyright (c) 2018 Brian Vaughn\n+\n+Permission is hereby granted, free of charge, to any person obtaining a copy\n+of this software and associated documentation files (the \"Software\"), to deal\n+in the Software without restriction, including without limitation the rights\n+to use, copy, modify, merge, publish, distribute, sublicense, and\/or sell\n+copies of the Software, and to permit persons to whom the Software is\n+furnished to do so, subject to the following conditions:\n+\n+The above copyright notice and this permission notice shall be included in all\n+copies or substantial portions of the Software.\n+\n+THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n+SOFTWARE.\ndiff --git a\/src\/node_modules\/react-window\/README.md b\/src\/node_modules\/react-window\/README.md\nnew file mode 100644\nindex 0000000000..8603c9c5bc\n--- \/dev\/null\n+++ b\/src\/node_modules\/react-window\/README.md\n@@ -0,0 +1,88 @@\n+# react-window\n+\n+> React components for efficiently rendering large lists and tabular data\n+\n+[![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)\n+\n+## Install\n+\n+```bash\n+# Yarn\n+yarn add react-window\n+\n+# NPM\n+npm install --save react-window\n+```\n+\n+## Usage\n+\n+Learn more at [react-window.now.sh](https:\/\/react-window.now.sh\/):\n+\n+## Related libraries\n+\n+* [`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.\n+* [`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).\n+\n+## Frequently asked questions\n+\n+### How is `react-window` different from `react-virtualized`?\n+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.\n+\n+`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).\n+\n+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:\n+\n+1. Use `react-virtualized`. (It's still widely used by a lot of successful projects!)\n+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)! 🙂\n+\n+<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 <2 KB.<\/sup>\n+\n+### Can a list or a grid fill 100% the width or height of a page?\n+\n+Yes. I recommend using the [`react-virtualized-auto-sizer` package](https:\/\/npmjs.com\/package\/react-virtualized-auto-sizer):\n+\n+<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\">\n+\n+Here's a [Code Sandbox demo](https:\/\/codesandbox.io\/s\/3vnx878jk5).\n+\n+### Why is my list blank when I scroll?\n+\n+If your list looks something like this...\n+\n+<img src=\"https:\/\/user-images.githubusercontent.com\/29597\/54005352-eb535c80-410d-11e9-80b2-d3d02db1f599.gif\" width=\"302\" height=\"152\">\n+\n+...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!\n+\n+<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\">\n+\n+### Can I lazy load data for my list?\n+\n+Yes. I recommend using the [`react-window-infinite-loader` package](https:\/\/npmjs.com\/package\/react-window-infinite-loader):\n+\n+<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\">\n+\n+Here's a [Code Sandbox demo](https:\/\/codesandbox.io\/s\/5wqo7z2np4).\n+\n+### Can I attach custom properties or event handlers?\n+\n+Yes, using the `outerElementType` prop.\n+\n+<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\">\n+\n+Here's a [Code Sandbox demo](https:\/\/codesandbox.io\/s\/4zqx79nww0).\n+\n+### Can I add gutter or padding between items?\n+\n+Yes, although it requires a bit of inline styling.\n+\n+<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\">\n+\n+Here's a [Code Sandbox demo](https:\/\/codesandbox.io\/s\/2w8wmlm89p).\n+\n+### Does this library support \"sticky\" items?\n+\n+Yes, although it requires a small amount of user code. Here's a [Code Sandbox demo](https:\/\/codesandbox.io\/s\/0mk3qwpl4l).\n+\n+## License\n+\n+MIT © [bvaughn](https:\/\/github.com\/bvaughn)\ndiff --git a\/src\/node_modules\/react-window\/dist\/index-dev.umd.js b\/src\/node_modules\/react-window\/dist\/index-dev.umd.js\nnew file mode 100644\nindex 0000000000..96dc2ae17a\n--- \/dev\/null\n+++ b\/src\/node_modules\/react-window\/dist\/index-dev.umd.js\n@@ -0,0 +1,2 @@\n+!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})});\n+\/\/# sourceMappingURL=index-dev.umd.js.map\ndiff --git a\/src\/node_modules\/react-window\/dist\/index-prod.umd.js b\/src\/node_modules\/react-window\/dist\/index-prod.umd.js\nnew file mode 100644\nindex 0000000000..ca33541ed5\n--- \/dev\/null\n+++ b\/src\/node_modules\/react-window\/dist\/index-prod.umd.js\n@@ -0,0 +1,2 @@\n+!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})});\n+\/\/# sourceMappingURL=index-prod.umd.js.map\ndiff --git a\/src\/node_modules\/react-window\/dist\/index.cjs.js b\/src\/node_modules\/react-window\/dist\/index.cjs.js\nnew file mode 100644\nindex 0000000000..83875b5ee0\n--- \/dev\/null\n+++ b\/src\/node_modules\/react-window\/dist\/index.cjs.js\n@@ -0,0 +1,2079 @@\n+'use strict';\n+\n+Object.defineProperty(exports, '__esModule', { value: true });\n+\n+function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }\n+\n+var _extends = _interopDefault(require('@babel\/runtime\/helpers\/extends'));\n+var _inheritsLoose = _interopDefault(require('@babel\/runtime\/helpers\/inheritsLoose'));\n+var _assertThisInitialized = _interopDefault(require('@babel\/runtime\/helpers\/assertThisInitialized'));\n+var memoizeOne = _interopDefault(require('memoize-one'));\n+var react = require('react');\n+var _objectWithoutPropertiesLoose = _interopDefault(require('@babel\/runtime\/helpers\/objectWithoutPropertiesLoose'));\n+\n+\/\/ Animation frame based implementation of setTimeout.\n+\/\/ Inspired by Joe Lambert, https:\/\/gist.github.com\/joelambert\/1002116#file-requesttimeout-js\n+var hasNativePerformanceNow = typeof performance === 'object' && typeof performance.now === 'function';\n+var now = hasNativePerformanceNow ? function () {\n+ return performance.now();\n+} : function () {\n+ return Date.now();\n+};\n+function cancelTimeout(timeoutID) {\n+ cancelAnimationFrame(timeoutID.id);\n+}\n+function requestTimeout(callback, delay) {\n+ var start = now();\n+\n+ function tick() {\n+ if (now() - start >= delay) {\n+ callback.call(null);\n+ } else {\n+ timeoutID.id = requestAnimationFrame(tick);\n+ }\n+ }\n+\n+ var timeoutID = {\n+ id: requestAnimationFrame(tick)\n+ };\n+ return timeoutID;\n+}\n+\n+var size = -1; \/\/ This utility copied from \"dom-helpers\" package.\n+\n+function getScrollbarSize(recalculate) {\n+ if (recalculate === void 0) {\n+ recalculate = false;\n+ }\n+\n+ if (size === -1 || recalculate) {\n+ var div = document.createElement('div');\n+ var style = div.style;\n+ style.width = '50px';\n+ style.height = '50px';\n+ style.overflow = 'scroll';\n+ document.body.appendChild(div);\n+ size = div.offsetWidth - div.clientWidth;\n+ document.body.removeChild(div);\n+ }\n+\n+ return size;\n+}\n+var cachedRTLResult = null; \/\/ TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.\n+\/\/ Chrome does not seem to adhere; its scrollLeft values are positive (measured relative to the left).\n+\/\/ Safari's elastic bounce makes detecting this even more complicated wrt potential false positives.\n+\/\/ The safest way to check this is to intentionally set a negative offset,\n+\/\/ and then verify that the subsequent \"scroll\" event matches the negative offset.\n+\/\/ If it does not match, then we can assume a non-standard RTL scroll implementation.\n+\n+function getRTLOffsetType(recalculate) {\n+ if (recalculate === void 0) {\n+ recalculate = false;\n+ }\n+\n+ if (cachedRTLResult === null || recalculate) {\n+ var outerDiv = document.createElement('div');\n+ var outerStyle = outerDiv.style;\n+ outerStyle.width = '50px';\n+ outerStyle.height = '50px';\n+ outerStyle.overflow = 'scroll';\n+ outerStyle.direction = 'rtl';\n+ var innerDiv = document.createElement('div');\n+ var innerStyle = innerDiv.style;\n+ innerStyle.width = '100px';\n+ innerStyle.height = '100px';\n+ outerDiv.appendChild(innerDiv);\n+ document.body.appendChild(outerDiv);\n+\n+ if (outerDiv.scrollLeft > 0) {\n+ cachedRTLResult = 'positive-descending';\n+ } else {\n+ outerDiv.scrollLeft = 1;\n+\n+ if (outerDiv.scrollLeft === 0) {\n+ cachedRTLResult = 'negative';\n+ } else {\n+ cachedRTLResult = 'positive-ascending';\n+ }\n+ }\n+\n+ document.body.removeChild(outerDiv);\n+ return cachedRTLResult;\n+ }\n+\n+ return cachedRTLResult;\n+}\n+\n+var IS_SCROLLING_DEBOUNCE_INTERVAL = 150;\n+\n+var defaultItemKey = function defaultItemKey(_ref) {\n+ var columnIndex = _ref.columnIndex,\n+ data = _ref.data,\n+ rowIndex = _ref.rowIndex;\n+ return rowIndex + \":\" + columnIndex;\n+}; \/\/ In DEV mode, this Set helps us only log a warning once per component instance.\n+\/\/ This avoids spamming the console every time a render happens.\n+\n+\n+var devWarningsOverscanCount = null;\n+var devWarningsOverscanRowsColumnsCount = null;\n+var devWarningsTagName = null;\n+\n+if (process.env.NODE_ENV !== 'production') {\n+ if (typeof window !== 'undefined' && typeof window.WeakSet !== 'undefined') {\n+ devWarningsOverscanCount =\n+ \/*#__PURE__*\/\n+ new WeakSet();\n+ devWarningsOverscanRowsColumnsCount =\n+ \/*#__PURE__*\/\n+ new WeakSet();\n+ devWarningsTagName =\n+ \/*#__PURE__*\/\n+ new WeakSet();\n+ }\n+}\n+\n+function createGridComponent(_ref2) {\n+ var _class, _temp;\n+\n+ var getColumnOffset = _ref2.getColumnOffset,\n+ getColumnStartIndexForOffset = _ref2.getColumnStartIndexForOffset,\n+ getColumnStopIndexForStartIndex = _ref2.getColumnStopIndexForStartIndex,\n+ getColumnWidth = _ref2.getColumnWidth,\n+ getEstimatedTotalHeight = _ref2.getEstimatedTotalHeight,\n+ getEstimatedTotalWidth = _ref2.getEstimatedTotalWidth,\n+ getOffsetForColumnAndAlignment = _ref2.getOffsetForColumnAndAlignment,\n+ getOffsetForRowAndAlignment = _ref2.getOffsetForRowAndAlignment,\n+ getRowHeight = _ref2.getRowHeight,\n+ getRowOffset = _ref2.getRowOffset,\n+ getRowStartIndexForOffset = _ref2.getRowStartIndexForOffset,\n+ getRowStopIndexForStartIndex = _ref2.getRowStopIndexForStartIndex,\n+ initInstanceProps = _ref2.initInstanceProps,\n+ shouldResetStyleCacheOnItemSizeChange = _ref2.shouldResetStyleCacheOnItemSizeChange,\n+ validateProps = _ref2.validateProps;\n+ return _temp = _class =\n+ \/*#__PURE__*\/\n+ function (_PureComponent) {\n+ _inheritsLoose(Grid, _PureComponent);\n+\n+ \/\/ Always use explicit constructor for React components.\n+ \/\/ It produces less code after transpilation. (#26)\n+ \/\/ eslint-disable-next-line no-useless-constructor\n+ function Grid(props) {\n+ var _this;\n+\n+ _this = _PureComponent.call(this, props) || this;\n+ _this._instanceProps = initInstanceProps(_this.props, _assertThisInitialized(_assertThisInitialized(_this)));\n+ _this._resetIsScrollingTimeoutId = null;\n+ _this._outerRef = void 0;\n+ _this.state = {\n+ instance: _assertThisInitialized(_assertThisInitialized(_this)),\n+ isScrolling: false,\n+ horizontalScrollDirection: 'forward',\n+ scrollLeft: typeof _this.props.initialScrollLeft === 'number' ? _this.props.initialScrollLeft : 0,\n+ scrollTop: typeof _this.props.initialScrollTop === 'number' ? _this.props.initialScrollTop : 0,\n+ scrollUpdateWasRequested: false,\n+ verticalScrollDirection: 'forward'\n+ };\n+ _this._callOnItemsRendered = void 0;\n+ _this._callOnItemsRendered = memoizeOne(function (overscanColumnStartIndex, overscanColumnStopIndex, overscanRowStartIndex, overscanRowStopIndex, visibleColumnStartIndex, visibleColumnStopIndex, visibleRowStartIndex, visibleRowStopIndex) {\n+ return _this.props.onItemsRendered({\n+ overscanColumnStartIndex: overscanColumnStartIndex,\n+ overscanColumnStopIndex: overscanColumnStopIndex,\n+ overscanRowStartIndex: overscanRowStartIndex,\n+ overscanRowStopIndex: overscanRowStopIndex,\n+ visibleColumnStartIndex: visibleColumnStartIndex,\n+ visibleColumnStopIndex: visibleColumnStopIndex,\n+ visibleRowStartIndex: visibleRowStartIndex,\n+ visibleRowStopIndex: visibleRowStopIndex\n+ });\n+ });\n+ _this._callOnScroll = void 0;\n+ _this._callOnScroll = memoizeOne(function (scrollLeft, scrollTop, horizontalScrollDirection, verticalScrollDirection, scrollUpdateWasRequested) {\n+ return _this.props.onScroll({\n+ horizontalScrollDirection: horizontalScrollDirection,\n+ scrollLeft: scrollLeft,\n+ scrollTop: scrollTop,\n+ verticalScrollDirection: verticalScrollDirection,\n+ scrollUpdateWasRequested: scrollUpdateWasRequested\n+ });\n+ });\n+ _this._getItemStyle = void 0;\n+\n+ _this._getItemStyle = function (rowIndex, columnIndex) {\n+ var _this$props = _this.props,\n+ columnWidth = _this$props.columnWidth,\n+ direction = _this$props.direction,\n+ rowHeight = _this$props.rowHeight;\n+\n+ var itemStyleCache = _this._getItemStyleCache(shouldResetStyleCacheOnItemSizeChange && columnWidth, shouldResetStyleCacheOnItemSizeChange && direction, shouldResetStyleCacheOnItemSizeChange && rowHeight);\n+\n+ var key = rowIndex + \":\" + columnIndex;\n+ var style;\n+\n+ if (itemStyleCache.hasOwnProperty(key)) {\n+ style = itemStyleCache[key];\n+ } else {\n+ var _style;\n+\n+ itemStyleCache[key] = style = (_style = {\n+ position: 'absolute'\n+ }, _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);\n+ }\n+\n+ return style;\n+ };\n+\n+ _this._getItemStyleCache = void 0;\n+ _this._getItemStyleCache = memoizeOne(function (_, __, ___) {\n+ return {};\n+ });\n+\n+ _this._onScroll = function (event) {\n+ var _event$currentTarget = event.currentTarget,\n+ clientHeight = _event$currentTarget.clientHeight,\n+ clientWidth = _event$currentTarget.clientWidth,\n+ scrollLeft = _event$currentTarget.scrollLeft,\n+ scrollTop = _event$currentTarget.scrollTop,\n+ scrollHeight = _event$currentTarget.scrollHeight,\n+ scrollWidth = _event$currentTarget.scrollWidth;\n+\n+ _this.setState(function (prevState) {\n+ if (prevState.scrollLeft === scrollLeft && prevState.scrollTop === scrollTop) {\n+ \/\/ Scroll position may have been updated by cDM\/cDU,\n+ \/\/ In which case we don't need to trigger another render,\n+ \/\/ And we don't want to update state.isScrolling.\n+ return null;\n+ }\n+\n+ var direction = _this.props.direction; \/\/ TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.\n+ \/\/ This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).\n+ \/\/ It's also easier for this component if we convert offsets to the same format as they would be in for ltr.\n+ \/\/ So the simplest solution is to determine which browser behavior we're dealing with, and convert based on it.\n+\n+ var calculatedScrollLeft = scrollLeft;\n+\n+ if (direction === 'rtl') {\n+ switch (getRTLOffsetType()) {\n+ case 'negative':\n+ calculatedScrollLeft = -scrollLeft;\n+ break;\n+\n+ case 'positive-descending':\n+ calculatedScrollLeft = scrollWidth - clientWidth - scrollLeft;\n+ break;\n+ }\n+ } \/\/ Prevent Safari's elastic scrolling from causing visual shaking when scrolling past bounds.\n+\n+\n+ calculatedScrollLeft = Math.max(0, Math.min(calculatedScrollLeft, scrollWidth - clientWidth));\n+ var calculatedScrollTop = Math.max(0, Math.min(scrollTop, scrollHeight - clientHeight));\n+ return {\n+ isScrolling: true,\n+ horizontalScrollDirection: prevState.scrollLeft < scrollLeft ? 'forward' : 'backward',\n+ scrollLeft: calculatedScrollLeft,\n+ scrollTop: calculatedScrollTop,\n+ verticalScrollDirection: prevState.scrollTop < scrollTop ? 'forward' : 'backward',\n+ scrollUpdateWasRequested: false\n+ };\n+ }, _this._resetIsScrollingDebounced);\n+ };\n+\n+ _this._outerRefSetter = function (ref) {\n+ var outerRef = _this.props.outerRef;\n+ _this._outerRef = ref;\n+\n+ if (typeof outerRef === 'function') {\n+ outerRef(ref);\n+ } else if (outerRef != null && typeof outerRef === 'object' && outerRef.hasOwnProperty('current')) {\n+ outerRef.current = ref;\n+ }\n+ };\n+\n+ _this._resetIsScrollingDebounced = function () {\n+ if (_this._resetIsScrollingTimeoutId !== null) {\n+ cancelTimeout(_this._resetIsScrollingTimeoutId);\n+ }\n+\n+ _this._resetIsScrollingTimeoutId = requestTimeout(_this._resetIsScrolling, IS_SCROLLING_DEBOUNCE_INTERVAL);\n+ };\n+\n+ _this._resetIsScrolling = function () {\n+ _this._resetIsScrollingTimeoutId = null;\n+\n+ _this.setState({\n+ isScrolling: false\n+ }, function () {\n+ \/\/ Clear style cache after state update has been committed.\n+ \/\/ This way we don't break pure sCU for items that don't use isScrolling param.\n+ _this._getItemStyleCache(-1);\n+ });\n+ };\n+\n+ return _this;\n+ }\n+\n+ Grid.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {\n+ validateSharedProps(nextProps, prevState);\n+ validateProps(nextProps);\n+ return null;\n+ };\n+\n+ var _proto = Grid.prototype;\n+\n+ _proto.scrollTo = function scrollTo(_ref3) {\n+ var scrollLeft = _ref3.scrollLeft,\n+ scrollTop = _ref3.scrollTop;\n+\n+ if (scrollLeft !== undefined) {\n+ scrollLeft = Math.max(0, scrollLeft);\n+ }\n+\n+ if (scrollTop !== undefined) {\n+ scrollTop = Math.max(0, scrollTop);\n+ }\n+\n+ this.setState(function (prevState) {\n+ if (scrollLeft === undefined) {\n+ scrollLeft = prevState.scrollLeft;\n+ }\n+\n+ if (scrollTop === undefined) {\n+ scrollTop = prevState.scrollTop;\n+ }\n+\n+ if (prevState.scrollLeft === scrollLeft && prevState.scrollTop === scrollTop) {\n+ return null;\n+ }\n+\n+ return {\n+ horizontalScrollDirection: prevState.scrollLeft < scrollLeft ? 'forward' : 'backward',\n+ scrollLeft: scrollLeft,\n+ scrollTop: scrollTop,\n+ scrollUpdateWasRequested: true,\n+ verticalScrollDirection: prevState.scrollTop < scrollTop ? 'forward' : 'backward'\n+ };\n+ }, this._resetIsScrollingDebounced);\n+ };\n+\n+ _proto.scrollToItem = function scrollToItem(_ref4) {\n+ var _ref4$align = _ref4.align,\n+ align = _ref4$align === void 0 ? 'auto' : _ref4$align,\n+ columnIndex = _ref4.columnIndex,\n+ rowIndex = _ref4.rowIndex;\n+ var _this$props2 = this.props,\n+ columnCount = _this$props2.columnCount,\n+ height = _this$props2.height,\n+ rowCount = _this$props2.rowCount,\n+ width = _this$props2.width;\n+ var _this$state = this.state,\n+ scrollLeft = _this$state.scrollLeft,\n+ scrollTop = _this$state.scrollTop;\n+ var scrollbarSize = getScrollbarSize();\n+\n+ if (columnIndex !== undefined) {\n+ columnIndex = Math.max(0, Math.min(columnIndex, columnCount - 1));\n+ }\n+\n+ if (rowIndex !== undefined) {\n+ rowIndex = Math.max(0, Math.min(rowIndex, rowCount - 1));\n+ }\n+\n+ var estimatedTotalHeight = getEstimatedTotalHeight(this.props, this._instanceProps);\n+ var estimatedTotalWidth = getEstimatedTotalWidth(this.props, this._instanceProps); \/\/ The scrollbar size should be considered when scrolling an item into view,\n+ \/\/ to ensure it's fully visible.\n+ \/\/ But we only need to account for its size when it's actually visible.\n+\n+ var horizontalScrollbarSize = estimatedTotalWidth > width ? scrollbarSize : 0;\n+ var verticalScrollbarSize = estimatedTotalHeight > height ? scrollbarSize : 0;\n+ this.scrollTo({\n+ scrollLeft: columnIndex !== undefined ? getOffsetForColumnAndAlignment(this.props, columnIndex, align, scrollLeft, this._instanceProps, verticalScrollbarSize) : scrollLeft,\n+ scrollTop: rowIndex !== undefined ? getOffsetForRowAndAlignment(this.props, rowIndex, align, scrollTop, this._instanceProps, horizontalScrollbarSize) : scrollTop\n+ });\n+ };\n+\n+ _proto.componentDidMount = function componentDidMount() {\n+ var _this$props3 = this.props,\n+ initialScrollLeft = _this$props3.initialScrollLeft,\n+ initialScrollTop = _this$props3.initialScrollTop;\n+\n+ if (this._outerRef != null) {\n+ var outerRef = this._outerRef;\n+\n+ if (typeof initialScrollLeft === 'number') {\n+ outerRef.scrollLeft = initialScrollLeft;\n+ }\n+\n+ if (typeof initialScrollTop === 'number') {\n+ outerRef.scrollTop = initialScrollTop;\n+ }\n+ }\n+\n+ this._callPropsCallbacks();\n+ };\n+\n+ _proto.componentDidUpdate = function componentDidUpdate() {\n+ var direction = this.props.direction;\n+ var _this$state2 = this.state,\n+ scrollLeft = _this$state2.scrollLeft,\n+ scrollTop = _this$state2.scrollTop,\n+ scrollUpdateWasRequested = _this$state2.scrollUpdateWasRequested;\n+\n+ if (scrollUpdateWasRequested && this._outerRef != null) {\n+ \/\/ TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.\n+ \/\/ This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).\n+ \/\/ So we need to determine which browser behavior we're dealing with, and mimic it.\n+ var outerRef = this._outerRef;\n+\n+ if (direction === 'rtl') {\n+ switch (getRTLOffsetType()) {\n+ case 'negative':\n+ outerRef.scrollLeft = -scrollLeft;\n+ break;\n+\n+ case 'positive-ascending':\n+ outerRef.scrollLeft = scrollLeft;\n+ break;\n+\n+ default:\n+ var clientWidth = outerRef.clientWidth,\n+ scrollWidth = outerRef.scrollWidth;\n+ outerRef.scrollLeft = scrollWidth - clientWidth - scrollLeft;\n+ break;\n+ }\n+ } else {\n+ outerRef.scrollLeft = Math.max(0, scrollLeft);\n+ }\n+\n+ outerRef.scrollTop = Math.max(0, scrollTop);\n+ }\n+\n+ this._callPropsCallbacks();\n+ };\n+\n+ _proto.componentWillUnmount = function componentWillUnmount() {\n+ if (this._resetIsScrollingTimeoutId !== null) {\n+ cancelTimeout(this._resetIsScrollingTimeoutId);\n+ }\n+ };\n+\n+ _proto.render = function render() {\n+ var _this$props4 = this.props,\n+ children = _this$props4.children,\n+ className = _this$props4.className,\n+ columnCount = _this$props4.columnCount,\n+ direction = _this$props4.direction,\n+ height = _this$props4.height,\n+ innerRef = _this$props4.innerRef,\n+ innerElementType = _this$props4.innerElementType,\n+ innerTagName = _this$props4.innerTagName,\n+ itemData = _this$props4.itemData,\n+ _this$props4$itemKey = _this$props4.itemKey,\n+ itemKey = _this$props4$itemKey === void 0 ? defaultItemKey : _this$props4$itemKey,\n+ outerElementType = _this$props4.outerElementType,\n+ outerTagName = _this$props4.outerTagName,\n+ rowCount = _this$props4.rowCount,\n+ style = _this$props4.style,\n+ useIsScrolling = _this$props4.useIsScrolling,\n+ width = _this$props4.width;\n+ var isScrolling = this.state.isScrolling;\n+\n+ var _this$_getHorizontalR = this._getHorizontalRangeToRender(),\n+ columnStartIndex = _this$_getHorizontalR[0],\n+ columnStopIndex = _this$_getHorizontalR[1];\n+\n+ var _this$_getVerticalRan = this._getVerticalRangeToRender(),\n+ rowStartIndex = _this$_getVerticalRan[0],\n+ rowStopIndex = _this$_getVerticalRan[1];\n+\n+ var items = [];\n+\n+ if (columnCount > 0 && rowCount) {\n+ for (var _rowIndex = rowStartIndex; _rowIndex <= rowStopIndex; _rowIndex++) {\n+ for (var _columnIndex = columnStartIndex; _columnIndex <= columnStopIndex; _columnIndex++) {\n+ items.push(react.createElement(children, {\n+ columnIndex: _columnIndex,\n+ data: itemData,\n+ isScrolling: useIsScrolling ? isScrolling : undefined,\n+ key: itemKey({\n+ columnIndex: _columnIndex,\n+ data: itemData,\n+ rowIndex: _rowIndex\n+ }),\n+ rowIndex: _rowIndex,\n+ style: this._getItemStyle(_rowIndex, _columnIndex)\n+ }));\n+ }\n+ }\n+ } \/\/ Read this value AFTER items have been created,\n+ \/\/ So their actual sizes (if variable) are taken into consideration.\n+\n+\n+ var estimatedTotalHeight = getEstimatedTotalHeight(this.props, this._instanceProps);\n+ var estimatedTotalWidth = getEstimatedTotalWidth(this.props, this._instanceProps);\n+ return react.createElement(outerElementType || outerTagName || 'div', {\n+ className: className,\n+ onScroll: this._onScroll,\n+ ref: this._outerRefSetter,\n+ style: _extends({\n+ position: 'relative',\n+ height: height,\n+ width: width,\n+ overflow: 'auto',\n+ WebkitOverflowScrolling: 'touch',\n+ willChange: 'transform',\n+ direction: direction\n+ }, style)\n+ }, react.createElement(innerElementType || innerTagName || 'div', {\n+ children: items,\n+ ref: innerRef,\n+ style: {\n+ height: estimatedTotalHeight,\n+ pointerEvents: isScrolling ? 'none' : undefined,\n+ width: estimatedTotalWidth\n+ }\n+ }));\n+ };\n+\n+ _proto._callPropsCallbacks = function _callPropsCallbacks() {\n+ var _this$props5 = this.props,\n+ columnCount = _this$props5.columnCount,\n+ onItemsRendered = _this$props5.onItemsRendered,\n+ onScroll = _this$props5.onScroll,\n+ rowCount = _this$props5.rowCount;\n+\n+ if (typeof onItemsRendered === 'function') {\n+ if (columnCount > 0 && rowCount > 0) {\n+ var _this$_getHorizontalR2 = this._getHorizontalRangeToRender(),\n+ _overscanColumnStartIndex = _this$_getHorizontalR2[0],\n+ _overscanColumnStopIndex = _this$_getHorizontalR2[1],\n+ _visibleColumnStartIndex = _this$_getHorizontalR2[2],\n+ _visibleColumnStopIndex = _this$_getHorizontalR2[3];\n+\n+ var _this$_getVerticalRan2 = this._getVerticalRangeToRender(),\n+ _overscanRowStartIndex = _this$_getVerticalRan2[0],\n+ _overscanRowStopIndex = _this$_getVerticalRan2[1],\n+ _visibleRowStartIndex = _this$_getVerticalRan2[2],\n+ _visibleRowStopIndex = _this$_getVerticalRan2[3];\n+\n+ this._callOnItemsRendered(_overscanColumnStartIndex, _overscanColumnStopIndex, _overscanRowStartIndex, _overscanRowStopIndex, _visibleColumnStartIndex, _visibleColumnStopIndex, _visibleRowStartIndex, _visibleRowStopIndex);\n+ }\n+ }\n+\n+ if (typeof onScroll === 'function') {\n+ var _this$state3 = this.state,\n+ _horizontalScrollDirection = _this$state3.horizontalScrollDirection,\n+ _scrollLeft = _this$state3.scrollLeft,\n+ _scrollTop = _this$state3.scrollTop,\n+ _scrollUpdateWasRequested = _this$state3.scrollUpdateWasRequested,\n+ _verticalScrollDirection = _this$state3.verticalScrollDirection;\n+\n+ this._callOnScroll(_scrollLeft, _scrollTop, _horizontalScrollDirection, _verticalScrollDirection, _scrollUpdateWasRequested);\n+ }\n+ }; \/\/ Lazily create and cache item styles while scrolling,\n+ \/\/ So that pure component sCU will prevent re-renders.\n+ \/\/ We maintain this cache, and pass a style prop rather than index,\n+ \/\/ So that List can clear cached styles and force item re-render if necessary.\n+\n+\n+ _proto._getHorizontalRangeToRender = function _getHorizontalRangeToRender() {\n+ var _this$props6 = this.props,\n+ columnCount = _this$props6.columnCount,\n+ overscanColumnCount = _this$props6.overscanColumnCount,\n+ overscanColumnsCount = _this$props6.overscanColumnsCount,\n+ overscanCount = _this$props6.overscanCount,\n+ rowCount = _this$props6.rowCount;\n+ var _this$state4 = this.state,\n+ horizontalScrollDirection = _this$state4.horizontalScrollDirection,\n+ isScrolling = _this$state4.isScrolling,\n+ scrollLeft = _this$state4.scrollLeft;\n+ var overscanCountResolved = overscanColumnCount || overscanColumnsCount || overscanCount || 1;\n+\n+ if (columnCount === 0 || rowCount === 0) {\n+ return [0, 0, 0, 0];\n+ }\n+\n+ var startIndex = getColumnStartIndexForOffset(this.props, scrollLeft, this._instanceProps);\n+ var stopIndex = getColumnStopIndexForStartIndex(this.props, startIndex, scrollLeft, this._instanceProps); \/\/ Overscan by one item in each direction so that tab\/focus works.\n+ \/\/ If there isn't at least one extra item, tab loops back around.\n+\n+ var overscanBackward = !isScrolling || horizontalScrollDirection === 'backward' ? Math.max(1, overscanCountResolved) : 1;\n+ var overscanForward = !isScrolling || horizontalScrollDirection === 'forward' ? Math.max(1, overscanCountResolved) : 1;\n+ return [Math.max(0, startIndex - overscanBackward), Math.max(0, Math.min(columnCount - 1, stopIndex + overscanForward)), startIndex, stopIndex];\n+ };\n+\n+ _proto._getVerticalRangeToRender = function _getVerticalRangeToRender() {\n+ var _this$props7 = this.props,\n+ columnCount = _this$props7.columnCount,\n+ overscanCount = _this$props7.overscanCount,\n+ overscanRowCount = _this$props7.overscanRowCount,\n+ overscanRowsCount = _this$props7.overscanRowsCount,\n+ rowCount = _this$props7.rowCount;\n+ var _this$state5 = this.state,\n+ isScrolling = _this$state5.isScrolling,\n+ verticalScrollDirection = _this$state5.verticalScrollDirection,\n+ scrollTop = _this$state5.scrollTop;\n+ var overscanCountResolved = overscanRowCount || overscanRowsCount || overscanCount || 1;\n+\n+ if (columnCount === 0 || rowCount === 0) {\n+ return [0, 0, 0, 0];\n+ }\n+\n+ var startIndex = getRowStartIndexForOffset(this.props, scrollTop, this._instanceProps);\n+ var stopIndex = getRowStopIndexForStartIndex(this.props, startIndex, scrollTop, this._instanceProps); \/\/ Overscan by one item in each direction so that tab\/focus works.\n+ \/\/ If there isn't at least one extra item, tab loops back around.\n+\n+ var overscanBackward = !isScrolling || verticalScrollDirection === 'backward' ? Math.max(1, overscanCountResolved) : 1;\n+ var overscanForward = !isScrolling || verticalScrollDirection === 'forward' ? Math.max(1, overscanCountResolved) : 1;\n+ return [Math.max(0, startIndex - overscanBackward), Math.max(0, Math.min(rowCount - 1, stopIndex + overscanForward)), startIndex, stopIndex];\n+ };\n+\n+ return Grid;\n+ }(react.PureComponent), _class.defaultProps = {\n+ direction: 'ltr',\n+ itemData: undefined,\n+ useIsScrolling: false\n+ }, _temp;\n+}\n+\n+var validateSharedProps = function validateSharedProps(_ref5, _ref6) {\n+ var children = _ref5.children,\n+ direction = _ref5.direction,\n+ height = _ref5.height,\n+ innerTagName = _ref5.innerTagName,\n+ outerTagName = _ref5.outerTagName,\n+ overscanColumnsCount = _ref5.overscanColumnsCount,\n+ overscanCount = _ref5.overscanCount,\n+ overscanRowsCount = _ref5.overscanRowsCount,\n+ width = _ref5.width;\n+ var instance = _ref6.instance;\n+\n+ if (process.env.NODE_ENV !== 'production') {\n+ if (typeof overscanCount === 'number') {\n+ if (devWarningsOverscanCount && !devWarningsOverscanCount.has(instance)) {\n+ devWarningsOverscanCount.add(instance);\n+ console.warn('The overscanCount prop has been deprecated. ' + 'Please use the overscanColumnCount and overscanRowCount props instead.');\n+ }\n+ }\n+\n+ if (typeof overscanColumnsCount === 'number' || typeof overscanRowsCount === 'number') {\n+ if (devWarningsOverscanRowsColumnsCount && !devWarningsOverscanRowsColumnsCount.has(instance)) {\n+ devWarningsOverscanRowsColumnsCount.add(instance);\n+ console.warn('The overscanColumnsCount and overscanRowsCount props have been deprecated. ' + 'Please use the overscanColumnCount and overscanRowCount props instead.');\n+ }\n+ }\n+\n+ if (innerTagName != null || outerTagName != null) {\n+ if (devWarningsTagName && !devWarningsTagName.has(instance)) {\n+ devWarningsTagName.add(instance);\n+ console.warn('The innerTagName and outerTagName props have been deprecated. ' + 'Please use the innerElementType and outerElementType props instead.');\n+ }\n+ }\n+\n+ if (children == null) {\n+ throw Error('An invalid \"children\" prop has been specified. ' + 'Value should be a React component. ' + (\"\\\"\" + (children === null ? 'null' : typeof children) + \"\\\" was specified.\"));\n+ }\n+\n+ switch (direction) {\n+ case 'ltr':\n+ case 'rtl':\n+ \/\/ Valid values\n+ break;\n+\n+ default:\n+ throw Error('An invalid \"direction\" prop has been specified. ' + 'Value should be either \"ltr\" or \"rtl\". ' + (\"\\\"\" + direction + \"\\\" was specified.\"));\n+ }\n+\n+ if (typeof width !== 'number') {\n+ throw Error('An invalid \"width\" prop has been specified. ' + 'Grids must specify a number for width. ' + (\"\\\"\" + (width === null ? 'null' : typeof width) + \"\\\" was specified.\"));\n+ }\n+\n+ if (typeof height !== 'number') {\n+ throw Error('An invalid \"height\" prop has been specified. ' + 'Grids must specify a number for height. ' + (\"\\\"\" + (height === null ? 'null' : typeof height) + \"\\\" was specified.\"));\n+ }\n+ }\n+};\n+\n+var DEFAULT_ESTIMATED_ITEM_SIZE = 50;\n+\n+var getEstimatedTotalHeight = function getEstimatedTotalHeight(_ref, _ref2) {\n+ var rowCount = _ref.rowCount;\n+ var rowMetadataMap = _ref2.rowMetadataMap,\n+ estimatedRowHeight = _ref2.estimatedRowHeight,\n+ lastMeasuredRowIndex = _ref2.lastMeasuredRowIndex;\n+ var totalSizeOfMeasuredRows = 0; \/\/ Edge case check for when the number of items decreases while a scroll is in progress.\n+ \/\/ https:\/\/github.com\/bvaughn\/react-window\/pull\/138\n+\n+ if (lastMeasuredRowIndex >= rowCount) {\n+ lastMeasuredRowIndex = rowCount - 1;\n+ }\n+\n+ if (lastMeasuredRowIndex >= 0) {\n+ var itemMetadata = rowMetadataMap[lastMeasuredRowIndex];\n+ totalSizeOfMeasuredRows = itemMetadata.offset + itemMetadata.size;\n+ }\n+\n+ var numUnmeasuredItems = rowCount - lastMeasuredRowIndex - 1;\n+ var totalSizeOfUnmeasuredItems = numUnmeasuredItems * estimatedRowHeight;\n+ return totalSizeOfMeasuredRows + totalSizeOfUnmeasuredItems;\n+};\n+\n+var getEstimatedTotalWidth = function getEstimatedTotalWidth(_ref3, _ref4) {\n+ var columnCount = _ref3.columnCount;\n+ var columnMetadataMap = _ref4.columnMetadataMap,\n+ estimatedColumnWidth = _ref4.estimatedColumnWidth,\n+ lastMeasuredColumnIndex = _ref4.lastMeasuredColumnIndex;\n+ var totalSizeOfMeasuredRows = 0; \/\/ Edge case check for when the number of items decreases while a scroll is in progress.\n+ \/\/ https:\/\/github.com\/bvaughn\/react-window\/pull\/138\n+\n+ if (lastMeasuredColumnIndex >= columnCount) {\n+ lastMeasuredColumnIndex = columnCount - 1;\n+ }\n+\n+ if (lastMeasuredColumnIndex >= 0) {\n+ var itemMetadata = columnMetadataMap[lastMeasuredColumnIndex];\n+ totalSizeOfMeasuredRows = itemMetadata.offset + itemMetadata.size;\n+ }\n+\n+ var numUnmeasuredItems = columnCount - lastMeasuredColumnIndex - 1;\n+ var totalSizeOfUnmeasuredItems = numUnmeasuredItems * estimatedColumnWidth;\n+ return totalSizeOfMeasuredRows + totalSizeOfUnmeasuredItems;\n+};\n+\n+var getItemMetadata = function getItemMetadata(itemType, props, index, instanceProps) {\n+ var itemMetadataMap, itemSize, lastMeasuredIndex;\n+\n+ if (itemType === 'column') {\n+ itemMetadataMap = instanceProps.columnMetadataMap;\n+ itemSize = props.columnWidth;\n+ lastMeasuredIndex = instanceProps.lastMeasuredColumnIndex;\n+ } else {\n+ itemMetadataMap = instanceProps.rowMetadataMap;\n+ itemSize = props.rowHeight;\n+ lastMeasuredIndex = instanceProps.lastMeasuredRowIndex;\n+ }\n+\n+ if (index > lastMeasuredIndex) {\n+ var offset = 0;\n+\n+ if (lastMeasuredIndex >= 0) {\n+ var itemMetadata = itemMetadataMap[lastMeasuredIndex];\n+ offset = itemMetadata.offset + itemMetadata.size;\n+ }\n+\n+ for (var i = lastMeasuredIndex + 1; i <= index; i++) {\n+ var size = itemSize(i);\n+ itemMetadataMap[i] = {\n+ offset: offset,\n+ size: size\n+ };\n+ offset += size;\n+ }\n+\n+ if (itemType === 'column') {\n+ instanceProps.lastMeasuredColumnIndex = index;\n+ } else {\n+ instanceProps.lastMeasuredRowIndex = index;\n+ }\n+ }\n+\n+ return itemMetadataMap[index];\n+};\n+\n+var findNearestItem = function findNearestItem(itemType, props, instanceProps, offset) {\n+ var itemMetadataMap, lastMeasuredIndex;\n+\n+ if (itemType === 'column') {\n+ itemMetadataMap = instanceProps.columnMetadataMap;\n+ lastMeasuredIndex = instanceProps.lastMeasuredColumnIndex;\n+ } else {\n+ itemMetadataMap = instanceProps.rowMetadataMap;\n+ lastMeasuredIndex = instanceProps.lastMeasuredRowIndex;\n+ }\n+\n+ var lastMeasuredItemOffset = lastMeasuredIndex > 0 ? itemMetadataMap[lastMeasuredIndex].offset : 0;\n+\n+ if (lastMeasuredItemOffset >= offset) {\n+ \/\/ If we've already measured items within this range just use a binary search as it's faster.\n+ return findNearestItemBinarySearch(itemType, props, instanceProps, lastMeasuredIndex, 0, offset);\n+ } else {\n+ \/\/ If we haven't yet measured this high, fallback to an exponential search with an inner binary search.\n+ \/\/ The exponential search avoids pre-computing sizes for the full set of items as a binary search would.\n+ \/\/ The overall complexity for this approach is O(log n).\n+ return findNearestItemExponentialSearch(itemType, props, instanceProps, Math.max(0, lastMeasuredIndex), offset);\n+ }\n+};\n+\n+var findNearestItemBinarySearch = function findNearestItemBinarySearch(itemType, props, instanceProps, high, low, offset) {\n+ while (low <= high) {\n+ var middle = low + Math.floor((high - low) \/ 2);\n+ var currentOffset = getItemMetadata(itemType, props, middle, instanceProps).offset;\n+\n+ if (currentOffset === offset) {\n+ return middle;\n+ } else if (currentOffset < offset) {\n+ low = middle + 1;\n+ } else if (currentOffset > offset) {\n+ high = middle - 1;\n+ }\n+ }\n+\n+ if (low > 0) {\n+ return low - 1;\n+ } else {\n+ return 0;\n+ }\n+};\n+\n+var findNearestItemExponentialSearch = function findNearestItemExponentialSearch(itemType, props, instanceProps, index, offset) {\n+ var itemCount = itemType === 'column' ? props.columnCount : props.rowCount;\n+ var interval = 1;\n+\n+ while (index < itemCount && getItemMetadata(itemType, props, index, instanceProps).offset < offset) {\n+ index += interval;\n+ interval *= 2;\n+ }\n+\n+ return findNearestItemBinarySearch(itemType, props, instanceProps, Math.min(index, itemCount - 1), Math.floor(index \/ 2), offset);\n+};\n+\n+var getOffsetForIndexAndAlignment = function getOffsetForIndexAndAlignment(itemType, props, index, align, scrollOffset, instanceProps, scrollbarSize) {\n+ var size = itemType === 'column' ? props.width : props.height;\n+ var itemMetadata = getItemMetadata(itemType, props, index, instanceProps); \/\/ Get estimated total size after ItemMetadata is computed,\n+ \/\/ To ensure it reflects actual measurements instead of just estimates.\n+\n+ var estimatedTotalSize = itemType === 'column' ? getEstimatedTotalWidth(props, instanceProps) : getEstimatedTotalHeight(props, instanceProps);\n+ var maxOffset = Math.max(0, Math.min(estimatedTotalSize - size, itemMetadata.offset));\n+ var minOffset = Math.max(0, itemMetadata.offset - size + scrollbarSize + itemMetadata.size);\n+\n+ if (align === 'smart') {\n+ if (scrollOffset >= minOffset - size && scrollOffset <= maxOffset + size) {\n+ align = 'auto';\n+ } else {\n+ align = 'center';\n+ }\n+ }\n+\n+ switch (align) {\n+ case 'start':\n+ return maxOffset;\n+\n+ case 'end':\n+ return minOffset;\n+\n+ case 'center':\n+ return Math.round(minOffset + (maxOffset - minOffset) \/ 2);\n+\n+ case 'auto':\n+ default:\n+ if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {\n+ return scrollOffset;\n+ } else if (minOffset > maxOffset) {\n+ \/\/ Because we only take into account the scrollbar size when calculating minOffset\n+ \/\/ this value can be larger than maxOffset when at the end of the list\n+ return minOffset;\n+ } else if (scrollOffset < minOffset) {\n+ return minOffset;\n+ } else {\n+ return maxOffset;\n+ }\n+\n+ }\n+};\n+\n+var VariableSizeGrid =\n+\/*#__PURE__*\/\n+createGridComponent({\n+ getColumnOffset: function getColumnOffset(props, index, instanceProps) {\n+ return getItemMetadata('column', props, index, instanceProps).offset;\n+ },\n+ getColumnStartIndexForOffset: function getColumnStartIndexForOffset(props, scrollLeft, instanceProps) {\n+ return findNearestItem('column', props, instanceProps, scrollLeft);\n+ },\n+ getColumnStopIndexForStartIndex: function getColumnStopIndexForStartIndex(props, startIndex, scrollLeft, instanceProps) {\n+ var columnCount = props.columnCount,\n+ width = props.width;\n+ var itemMetadata = getItemMetadata('column', props, startIndex, instanceProps);\n+ var maxOffset = scrollLeft + width;\n+ var offset = itemMetadata.offset + itemMetadata.size;\n+ var stopIndex = startIndex;\n+\n+ while (stopIndex < columnCount - 1 && offset < maxOffset) {\n+ stopIndex++;\n+ offset += getItemMetadata('column', props, stopIndex, instanceProps).size;\n+ }\n+\n+ return stopIndex;\n+ },\n+ getColumnWidth: function getColumnWidth(props, index, instanceProps) {\n+ return instanceProps.columnMetadataMap[index].size;\n+ },\n+ getEstimatedTotalHeight: getEstimatedTotalHeight,\n+ getEstimatedTotalWidth: getEstimatedTotalWidth,\n+ getOffsetForColumnAndAlignment: function getOffsetForColumnAndAlignment(props, index, align, scrollOffset, instanceProps, scrollbarSize) {\n+ return getOffsetForIndexAndAlignment('column', props, index, align, scrollOffset, instanceProps, scrollbarSize);\n+ },\n+ getOffsetForRowAndAlignment: function getOffsetForRowAndAlignment(props, index, align, scrollOffset, instanceProps, scrollbarSize) {\n+ return getOffsetForIndexAndAlignment('row', props, index, align, scrollOffset, instanceProps, scrollbarSize);\n+ },\n+ getRowOffset: function getRowOffset(props, index, instanceProps) {\n+ return getItemMetadata('row', props, index, instanceProps).offset;\n+ },\n+ getRowHeight: function getRowHeight(props, index, instanceProps) {\n+ return instanceProps.rowMetadataMap[index].size;\n+ },\n+ getRowStartIndexForOffset: function getRowStartIndexForOffset(props, scrollTop, instanceProps) {\n+ return findNearestItem('row', props, instanceProps, scrollTop);\n+ },\n+ getRowStopIndexForStartIndex: function getRowStopIndexForStartIndex(props, startIndex, scrollTop, instanceProps) {\n+ var rowCount = props.rowCount,\n+ height = props.height;\n+ var itemMetadata = getItemMetadata('row', props, startIndex, instanceProps);\n+ var maxOffset = scrollTop + height;\n+ var offset = itemMetadata.offset + itemMetadata.size;\n+ var stopIndex = startIndex;\n+\n+ while (stopIndex < rowCount - 1 && offset < maxOffset) {\n+ stopIndex++;\n+ offset += getItemMetadata('row', props, stopIndex, instanceProps).size;\n+ }\n+\n+ return stopIndex;\n+ },\n+ initInstanceProps: function initInstanceProps(props, instance) {\n+ var _ref5 = props,\n+ estimatedColumnWidth = _ref5.estimatedColumnWidth,\n+ estimatedRowHeight = _ref5.estimatedRowHeight;\n+ var instanceProps = {\n+ columnMetadataMap: {},\n+ estimatedColumnWidth: estimatedColumnWidth || DEFAULT_ESTIMATED_ITEM_SIZE,\n+ estimatedRowHeight: estimatedRowHeight || DEFAULT_ESTIMATED_ITEM_SIZE,\n+ lastMeasuredColumnIndex: -1,\n+ lastMeasuredRowIndex: -1,\n+ rowMetadataMap: {}\n+ };\n+\n+ instance.resetAfterColumnIndex = function (columnIndex, shouldForceUpdate) {\n+ if (shouldForceUpdate === void 0) {\n+ shouldForceUpdate = true;\n+ }\n+\n+ instance.resetAfterIndices({\n+ columnIndex: columnIndex,\n+ shouldForceUpdate: shouldForceUpdate\n+ });\n+ };\n+\n+ instance.resetAfterRowIndex = function (rowIndex, shouldForceUpdate) {\n+ if (shouldForceUpdate === void 0) {\n+ shouldForceUpdate = true;\n+ }\n+\n+ instance.resetAfterIndices({\n+ rowIndex: rowIndex,\n+ shouldForceUpdate: shouldForceUpdate\n+ });\n+ };\n+\n+ instance.resetAfterIndices = function (_ref6) {\n+ var columnIndex = _ref6.columnIndex,\n+ rowIndex = _ref6.rowIndex,\n+ _ref6$shouldForceUpda = _ref6.shouldForceUpdate,\n+ shouldForceUpdate = _ref6$shouldForceUpda === void 0 ? true : _ref6$shouldForceUpda;\n+\n+ if (typeof columnIndex === 'number') {\n+ instanceProps.lastMeasuredColumnIndex = Math.min(instanceProps.lastMeasuredColumnIndex, columnIndex - 1);\n+ }\n+\n+ if (typeof rowIndex === 'number') {\n+ instanceProps.lastMeasuredRowIndex = Math.min(instanceProps.lastMeasuredRowIndex, rowIndex - 1);\n+ } \/\/ We could potentially optimize further by only evicting styles after this index,\n+ \/\/ But since styles are only cached while scrolling is in progress-\n+ \/\/ It seems an unnecessary optimization.\n+ \/\/ It's unlikely that resetAfterIndex() will be called while a user is scrolling.\n+\n+\n+ instance._getItemStyleCache(-1);\n+\n+ if (shouldForceUpdate) {\n+ instance.forceUpdate();\n+ }\n+ };\n+\n+ return instanceProps;\n+ },\n+ shouldResetStyleCacheOnItemSizeChange: false,\n+ validateProps: function validateProps(_ref7) {\n+ var columnWidth = _ref7.columnWidth,\n+ rowHeight = _ref7.rowHeight;\n+\n+ if (process.env.NODE_ENV !== 'production') {\n+ if (typeof columnWidth !== 'function') {\n+ throw Error('An invalid \"columnWidth\" prop has been specified. ' + 'Value should be a function. ' + (\"\\\"\" + (columnWidth === null ? 'null' : typeof columnWidth) + \"\\\" was specified.\"));\n+ } else if (typeof rowHeight !== 'function') {\n+ throw Error('An invalid \"rowHeight\" prop has been specified. ' + 'Value should be a function. ' + (\"\\\"\" + (rowHeight === null ? 'null' : typeof rowHeight) + \"\\\" was specified.\"));\n+ }\n+ }\n+ }\n+});\n+\n+var IS_SCROLLING_DEBOUNCE_INTERVAL$1 = 150;\n+\n+var defaultItemKey$1 = function defaultItemKey(index, data) {\n+ return index;\n+}; \/\/ In DEV mode, this Set helps us only log a warning once per component instance.\n+\/\/ This avoids spamming the console every time a render happens.\n+\n+\n+var devWarningsDirection = null;\n+var devWarningsTagName$1 = null;\n+\n+if (process.env.NODE_ENV !== 'production') {\n+ if (typeof window !== 'undefined' && typeof window.WeakSet !== 'undefined') {\n+ devWarningsDirection =\n+ \/*#__PURE__*\/\n+ new WeakSet();\n+ devWarningsTagName$1 =\n+ \/*#__PURE__*\/\n+ new WeakSet();\n+ }\n+}\n+\n+function createListComponent(_ref) {\n+ var _class, _temp;\n+\n+ var getItemOffset = _ref.getItemOffset,\n+ getEstimatedTotalSize = _ref.getEstimatedTotalSize,\n+ getItemSize = _ref.getItemSize,\n+ getOffsetForIndexAndAlignment = _ref.getOffsetForIndexAndAlignment,\n+ getStartIndexForOffset = _ref.getStartIndexForOffset,\n+ getStopIndexForStartIndex = _ref.getStopIndexForStartIndex,\n+ initInstanceProps = _ref.initInstanceProps,\n+ shouldResetStyleCacheOnItemSizeChange = _ref.shouldResetStyleCacheOnItemSizeChange,\n+ validateProps = _ref.validateProps;\n+ return _temp = _class =\n+ \/*#__PURE__*\/\n+ function (_PureComponent) {\n+ _inheritsLoose(List, _PureComponent);\n+\n+ \/\/ Always use explicit constructor for React components.\n+ \/\/ It produces less code after transpilation. (#26)\n+ \/\/ eslint-disable-next-line no-useless-constructor\n+ function List(props) {\n+ var _this;\n+\n+ _this = _PureComponent.call(this, props) || this;\n+ _this._instanceProps = initInstanceProps(_this.props, _assertThisInitialized(_assertThisInitialized(_this)));\n+ _this._outerRef = void 0;\n+ _this._resetIsScrollingTimeoutId = null;\n+ _this.state = {\n+ instance: _assertThisInitialized(_assertThisInitialized(_this)),\n+ isScrolling: false,\n+ scrollDirection: 'forward',\n+ scrollOffset: typeof _this.props.initialScrollOffset === 'number' ? _this.props.initialScrollOffset : 0,\n+ scrollUpdateWasRequested: false\n+ };\n+ _this._callOnItemsRendered = void 0;\n+ _this._callOnItemsRendered = memoizeOne(function (overscanStartIndex, overscanStopIndex, visibleStartIndex, visibleStopIndex) {\n+ return _this.props.onItemsRendered({\n+ overscanStartIndex: overscanStartIndex,\n+ overscanStopIndex: overscanStopIndex,\n+ visibleStartIndex: visibleStartIndex,\n+ visibleStopIndex: visibleStopIndex\n+ });\n+ });\n+ _this._callOnScroll = void 0;\n+ _this._callOnScroll = memoizeOne(function (scrollDirection, scrollOffset, scrollUpdateWasRequested) {\n+ return _this.props.onScroll({\n+ scrollDirection: scrollDirection,\n+ scrollOffset: scrollOffset,\n+ scrollUpdateWasRequested: scrollUpdateWasRequested\n+ });\n+ });\n+ _this._getItemStyle = void 0;\n+\n+ _this._getItemStyle = function (index) {\n+ var _this$props = _this.props,\n+ direction = _this$props.direction,\n+ itemSize = _this$props.itemSize,\n+ layout = _this$props.layout;\n+\n+ var itemStyleCache = _this._getItemStyleCache(shouldResetStyleCacheOnItemSizeChange && itemSize, shouldResetStyleCacheOnItemSizeChange && layout, shouldResetStyleCacheOnItemSizeChange && direction);\n+\n+ var style;\n+\n+ if (itemStyleCache.hasOwnProperty(index)) {\n+ style = itemStyleCache[index];\n+ } else {\n+ var _style;\n+\n+ var _offset = getItemOffset(_this.props, index, _this._instanceProps);\n+\n+ var size = getItemSize(_this.props, index, _this._instanceProps); \/\/ TODO Deprecate direction \"horizontal\"\n+\n+ var isHorizontal = direction === 'horizontal' || layout === 'horizontal';\n+ itemStyleCache[index] = style = (_style = {\n+ position: 'absolute'\n+ }, _style[direction === 'rtl' ? 'right' : 'left'] = isHorizontal ? _offset : 0, _style.top = !isHorizontal ? _offset : 0, _style.height = !isHorizontal ? size : '100%', _style.width = isHorizontal ? size : '100%', _style);\n+ }\n+\n+ return style;\n+ };\n+\n+ _this._getItemStyleCache = void 0;\n+ _this._getItemStyleCache = memoizeOne(function (_, __, ___) {\n+ return {};\n+ });\n+\n+ _this._onScrollHorizontal = function (event) {\n+ var _event$currentTarget = event.currentTarget,\n+ clientWidth = _event$currentTarget.clientWidth,\n+ scrollLeft = _event$currentTarget.scrollLeft,\n+ scrollWidth = _event$currentTarget.scrollWidth;\n+\n+ _this.setState(function (prevState) {\n+ if (prevState.scrollOffset === scrollLeft) {\n+ \/\/ Scroll position may have been updated by cDM\/cDU,\n+ \/\/ In which case we don't need to trigger another render,\n+ \/\/ And we don't want to update state.isScrolling.\n+ return null;\n+ }\n+\n+ var direction = _this.props.direction;\n+ var scrollOffset = scrollLeft;\n+\n+ if (direction === 'rtl') {\n+ \/\/ TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.\n+ \/\/ This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).\n+ \/\/ It's also easier for this component if we convert offsets to the same format as they would be in for ltr.\n+ \/\/ So the simplest solution is to determine which browser behavior we're dealing with, and convert based on it.\n+ switch (getRTLOffsetType()) {\n+ case 'negative':\n+ scrollOffset = -scrollLeft;\n+ break;\n+\n+ case 'positive-descending':\n+ scrollOffset = scrollWidth - clientWidth - scrollLeft;\n+ break;\n+ }\n+ } \/\/ Prevent Safari's elastic scrolling from causing visual shaking when scrolling past bounds.\n+\n+\n+ scrollOffset = Math.max(0, Math.min(scrollOffset, scrollWidth - clientWidth));\n+ return {\n+ isScrolling: true,\n+ scrollDirection: prevState.scrollOffset < scrollLeft ? 'forward' : 'backward',\n+ scrollOffset: scrollOffset,\n+ scrollUpdateWasRequested: false\n+ };\n+ }, _this._resetIsScrollingDebounced);\n+ };\n+\n+ _this._onScrollVertical = function (event) {\n+ var _event$currentTarget2 = event.currentTarget,\n+ clientHeight = _event$currentTarget2.clientHeight,\n+ scrollHeight = _event$currentTarget2.scrollHeight,\n+ scrollTop = _event$currentTarget2.scrollTop;\n+\n+ _this.setState(function (prevState) {\n+ if (prevState.scrollOffset === scrollTop) {\n+ \/\/ Scroll position may have been updated by cDM\/cDU,\n+ \/\/ In which case we don't need to trigger another render,\n+ \/\/ And we don't want to update state.isScrolling.\n+ return null;\n+ } \/\/ Prevent Safari's elastic scrolling from causing visual shaking when scrolling past bounds.\n+\n+\n+ var scrollOffset = Math.max(0, Math.min(scrollTop, scrollHeight - clientHeight));\n+ return {\n+ isScrolling: true,\n+ scrollDirection: prevState.scrollOffset < scrollOffset ? 'forward' : 'backward',\n+ scrollOffset: scrollOffset,\n+ scrollUpdateWasRequested: false\n+ };\n+ }, _this._resetIsScrollingDebounced);\n+ };\n+\n+ _this._outerRefSetter = function (ref) {\n+ var outerRef = _this.props.outerRef;\n+ _this._outerRef = ref;\n+\n+ if (typeof outerRef === 'function') {\n+ outerRef(ref);\n+ } else if (outerRef != null && typeof outerRef === 'object' && outerRef.hasOwnProperty('current')) {\n+ outerRef.current = ref;\n+ }\n+ };\n+\n+ _this._resetIsScrollingDebounced = function () {\n+ if (_this._resetIsScrollingTimeoutId !== null) {\n+ cancelTimeout(_this._resetIsScrollingTimeoutId);\n+ }\n+\n+ _this._resetIsScrollingTimeoutId = requestTimeout(_this._resetIsScrolling, IS_SCROLLING_DEBOUNCE_INTERVAL$1);\n+ };\n+\n+ _this._resetIsScrolling = function () {\n+ _this._resetIsScrollingTimeoutId = null;\n+\n+ _this.setState({\n+ isScrolling: false\n+ }, function () {\n+ \/\/ Clear style cache after state update has been committed.\n+ \/\/ This way we don't break pure sCU for items that don't use isScrolling param.\n+ _this._getItemStyleCache(-1, null);\n+ });\n+ };\n+\n+ return _this;\n+ }\n+\n+ List.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {\n+ validateSharedProps$1(nextProps, prevState);\n+ validateProps(nextProps);\n+ return null;\n+ };\n+\n+ var _proto = List.prototype;\n+\n+ _proto.scrollTo = function scrollTo(scrollOffset) {\n+ scrollOffset = Math.max(0, scrollOffset);\n+ this.setState(function (prevState) {\n+ if (prevState.scrollOffset === scrollOffset) {\n+ return null;\n+ }\n+\n+ return {\n+ scrollDirection: prevState.scrollOffset < scrollOffset ? 'forward' : 'backward',\n+ scrollOffset: scrollOffset,\n+ scrollUpdateWasRequested: true\n+ };\n+ }, this._resetIsScrollingDebounced);\n+ };\n+\n+ _proto.scrollToItem = function scrollToItem(index, align) {\n+ if (align === void 0) {\n+ align = 'auto';\n+ }\n+\n+ var itemCount = this.props.itemCount;\n+ var scrollOffset = this.state.scrollOffset;\n+ index = Math.max(0, Math.min(index, itemCount - 1));\n+ this.scrollTo(getOffsetForIndexAndAlignment(this.props, index, align, scrollOffset, this._instanceProps));\n+ };\n+\n+ _proto.componentDidMount = function componentDidMount() {\n+ var _this$props2 = this.props,\n+ direction = _this$props2.direction,\n+ initialScrollOffset = _this$props2.initialScrollOffset,\n+ layout = _this$props2.layout;\n+\n+ if (typeof initialScrollOffset === 'number' && this._outerRef != null) {\n+ var outerRef = this._outerRef; \/\/ TODO Deprecate direction \"horizontal\"\n+\n+ if (direction === 'horizontal' || layout === 'horizontal') {\n+ outerRef.scrollLeft = initialScrollOffset;\n+ } else {\n+ outerRef.scrollTop = initialScrollOffset;\n+ }\n+ }\n+\n+ this._callPropsCallbacks();\n+ };\n+\n+ _proto.componentDidUpdate = function componentDidUpdate() {\n+ var _this$props3 = this.props,\n+ direction = _this$props3.direction,\n+ layout = _this$props3.layout;\n+ var _this$state = this.state,\n+ scrollOffset = _this$state.scrollOffset,\n+ scrollUpdateWasRequested = _this$state.scrollUpdateWasRequested;\n+\n+ if (scrollUpdateWasRequested && this._outerRef != null) {\n+ var outerRef = this._outerRef; \/\/ TODO Deprecate direction \"horizontal\"\n+\n+ if (direction === 'horizontal' || layout === 'horizontal') {\n+ if (direction === 'rtl') {\n+ \/\/ TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.\n+ \/\/ This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).\n+ \/\/ So we need to determine which browser behavior we're dealing with, and mimic it.\n+ switch (getRTLOffsetType()) {\n+ case 'negative':\n+ outerRef.scrollLeft = -scrollOffset;\n+ break;\n+\n+ case 'positive-ascending':\n+ outerRef.scrollLeft = scrollOffset;\n+ break;\n+\n+ default:\n+ var clientWidth = outerRef.clientWidth,\n+ scrollWidth = outerRef.scrollWidth;\n+ outerRef.scrollLeft = scrollWidth - clientWidth - scrollOffset;\n+ break;\n+ }\n+ } else {\n+ outerRef.scrollLeft = scrollOffset;\n+ }\n+ } else {\n+ outerRef.scrollTop = scrollOffset;\n+ }\n+ }\n+\n+ this._callPropsCallbacks();\n+ };\n+\n+ _proto.componentWillUnmount = function componentWillUnmount() {\n+ if (this._resetIsScrollingTimeoutId !== null) {\n+ cancelTimeout(this._resetIsScrollingTimeoutId);\n+ }\n+ };\n+\n+ _proto.render = function render() {\n+ var _this$props4 = this.props,\n+ children = _this$props4.children,\n+ className = _this$props4.className,\n+ direction = _this$props4.direction,\n+ height = _this$props4.height,\n+ innerRef = _this$props4.innerRef,\n+ innerElementType = _this$props4.innerElementType,\n+ innerTagName = _this$props4.innerTagName,\n+ itemCount = _this$props4.itemCount,\n+ itemData = _this$props4.itemData,\n+ _this$props4$itemKey = _this$props4.itemKey,\n+ itemKey = _this$props4$itemKey === void 0 ? defaultItemKey$1 : _this$props4$itemKey,\n+ layout = _this$props4.layout,\n+ outerElementType = _this$props4.outerElementType,\n+ outerTagName = _this$props4.outerTagName,\n+ style = _this$props4.style,\n+ useIsScrolling = _this$props4.useIsScrolling,\n+ width = _this$props4.width;\n+ var isScrolling = this.state.isScrolling; \/\/ TODO Deprecate direction \"horizontal\"\n+\n+ var isHorizontal = direction === 'horizontal' || layout === 'horizontal';\n+ var onScroll = isHorizontal ? this._onScrollHorizontal : this._onScrollVertical;\n+\n+ var _this$_getRangeToRend = this._getRangeToRender(),\n+ startIndex = _this$_getRangeToRend[0],\n+ stopIndex = _this$_getRangeToRend[1];\n+\n+ var items = [];\n+\n+ if (itemCount > 0) {\n+ for (var _index = startIndex; _index <= stopIndex; _index++) {\n+ items.push(react.createElement(children, {\n+ data: itemData,\n+ key: itemKey(_index, itemData),\n+ index: _index,\n+ isScrolling: useIsScrolling ? isScrolling : undefined,\n+ style: this._getItemStyle(_index)\n+ }));\n+ }\n+ } \/\/ Read this value AFTER items have been created,\n+ \/\/ So their actual sizes (if variable) are taken into consideration.\n+\n+\n+ var estimatedTotalSize = getEstimatedTotalSize(this.props, this._instanceProps);\n+ return react.createElement(outerElementType || outerTagName || 'div', {\n+ className: className,\n+ onScroll: onScroll,\n+ ref: this._outerRefSetter,\n+ style: _extends({\n+ position: 'relative',\n+ height: height,\n+ width: width,\n+ overflow: 'auto',\n+ WebkitOverflowScrolling: 'touch',\n+ willChange: 'transform',\n+ direction: direction\n+ }, style)\n+ }, react.createElement(innerElementType || innerTagName || 'div', {\n+ children: items,\n+ ref: innerRef,\n+ style: {\n+ height: isHorizontal ? '100%' : estimatedTotalSize,\n+ pointerEvents: isScrolling ? 'none' : undefined,\n+ width: isHorizontal ? estimatedTotalSize : '100%'\n+ }\n+ }));\n+ };\n+\n+ _proto._callPropsCallbacks = function _callPropsCallbacks() {\n+ if (typeof this.props.onItemsRendered === 'function') {\n+ var itemCount = this.props.itemCount;\n+\n+ if (itemCount > 0) {\n+ var _this$_getRangeToRend2 = this._getRangeToRender(),\n+ _overscanStartIndex = _this$_getRangeToRend2[0],\n+ _overscanStopIndex = _this$_getRangeToRend2[1],\n+ _visibleStartIndex = _this$_getRangeToRend2[2],\n+ _visibleStopIndex = _this$_getRangeToRend2[3];\n+\n+ this._callOnItemsRendered(_overscanStartIndex, _overscanStopIndex, _visibleStartIndex, _visibleStopIndex);\n+ }\n+ }\n+\n+ if (typeof this.props.onScroll === 'function') {\n+ var _this$state2 = this.state,\n+ _scrollDirection = _this$state2.scrollDirection,\n+ _scrollOffset = _this$state2.scrollOffset,\n+ _scrollUpdateWasRequested = _this$state2.scrollUpdateWasRequested;\n+\n+ this._callOnScroll(_scrollDirection, _scrollOffset, _scrollUpdateWasRequested);\n+ }\n+ }; \/\/ Lazily create and cache item styles while scrolling,\n+ \/\/ So that pure component sCU will prevent re-renders.\n+ \/\/ We maintain this cache, and pass a style prop rather than index,\n+ \/\/ So that List can clear cached styles and force item re-render if necessary.\n+\n+\n+ _proto._getRangeToRender = function _getRangeToRender() {\n+ var _this$props5 = this.props,\n+ itemCount = _this$props5.itemCount,\n+ overscanCount = _this$props5.overscanCount;\n+ var _this$state3 = this.state,\n+ isScrolling = _this$state3.isScrolling,\n+ scrollDirection = _this$state3.scrollDirection,\n+ scrollOffset = _this$state3.scrollOffset;\n+\n+ if (itemCount === 0) {\n+ return [0, 0, 0, 0];\n+ }\n+\n+ var startIndex = getStartIndexForOffset(this.props, scrollOffset, this._instanceProps);\n+ var stopIndex = getStopIndexForStartIndex(this.props, startIndex, scrollOffset, this._instanceProps); \/\/ Overscan by one item in each direction so that tab\/focus works.\n+ \/\/ If there isn't at least one extra item, tab loops back around.\n+\n+ var overscanBackward = !isScrolling || scrollDirection === 'backward' ? Math.max(1, overscanCount) : 1;\n+ var overscanForward = !isScrolling || scrollDirection === 'forward' ? Math.max(1, overscanCount) : 1;\n+ return [Math.max(0, startIndex - overscanBackward), Math.max(0, Math.min(itemCount - 1, stopIndex + overscanForward)), startIndex, stopIndex];\n+ };\n+\n+ return List;\n+ }(react.PureComponent), _class.defaultProps = {\n+ direction: 'ltr',\n+ itemData: undefined,\n+ layout: 'vertical',\n+ overscanCount: 2,\n+ useIsScrolling: false\n+ }, _temp;\n+} \/\/ NOTE: I considered further wrapping individual items with a pure ListItem component.\n+\/\/ This would avoid ever calling the render function for the same index more than once,\n+\/\/ But it would also add the overhead of a lot of components\/fibers.\n+\/\/ I assume people already do this (render function returning a class component),\n+\/\/ So my doing it would just unnecessarily double the wrappers.\n+\n+var validateSharedProps$1 = function validateSharedProps(_ref2, _ref3) {\n+ var children = _ref2.children,\n+ direction = _ref2.direction,\n+ height = _ref2.height,\n+ layout = _ref2.layout,\n+ innerTagName = _ref2.innerTagName,\n+ outerTagName = _ref2.outerTagName,\n+ width = _ref2.width;\n+ var instance = _ref3.instance;\n+\n+ if (process.env.NODE_ENV !== 'production') {\n+ if (innerTagName != null || outerTagName != null) {\n+ if (devWarningsTagName$1 && !devWarningsTagName$1.has(instance)) {\n+ devWarningsTagName$1.add(instance);\n+ console.warn('The innerTagName and outerTagName props have been deprecated. ' + 'Please use the innerElementType and outerElementType props instead.');\n+ }\n+ } \/\/ TODO Deprecate direction \"horizontal\"\n+\n+\n+ var isHorizontal = direction === 'horizontal' || layout === 'horizontal';\n+\n+ switch (direction) {\n+ case 'horizontal':\n+ case 'vertical':\n+ if (devWarningsDirection && !devWarningsDirection.has(instance)) {\n+ devWarningsDirection.add(instance);\n+ console.warn('The direction prop should be either \"ltr\" (default) or \"rtl\". ' + 'Please use the layout prop to specify \"vertical\" (default) or \"horizontal\" orientation.');\n+ }\n+\n+ break;\n+\n+ case 'ltr':\n+ case 'rtl':\n+ \/\/ Valid values\n+ break;\n+\n+ default:\n+ throw Error('An invalid \"direction\" prop has been specified. ' + 'Value should be either \"ltr\" or \"rtl\". ' + (\"\\\"\" + direction + \"\\\" was specified.\"));\n+ }\n+\n+ switch (layout) {\n+ case 'horizontal':\n+ case 'vertical':\n+ \/\/ Valid values\n+ break;\n+\n+ default:\n+ throw Error('An invalid \"layout\" prop has been specified. ' + 'Value should be either \"horizontal\" or \"vertical\". ' + (\"\\\"\" + layout + \"\\\" was specified.\"));\n+ }\n+\n+ if (children == null) {\n+ throw Error('An invalid \"children\" prop has been specified. ' + 'Value should be a React component. ' + (\"\\\"\" + (children === null ? 'null' : typeof children) + \"\\\" was specified.\"));\n+ }\n+\n+ if (isHorizontal && typeof width !== 'number') {\n+ throw Error('An invalid \"width\" prop has been specified. ' + 'Horizontal lists must specify a number for width. ' + (\"\\\"\" + (width === null ? 'null' : typeof width) + \"\\\" was specified.\"));\n+ } else if (!isHorizontal && typeof height !== 'number') {\n+ throw Error('An invalid \"height\" prop has been specified. ' + 'Vertical lists must specify a number for height. ' + (\"\\\"\" + (height === null ? 'null' : typeof height) + \"\\\" was specified.\"));\n+ }\n+ }\n+};\n+\n+var DEFAULT_ESTIMATED_ITEM_SIZE$1 = 50;\n+\n+var getItemMetadata$1 = function getItemMetadata(props, index, instanceProps) {\n+ var _ref = props,\n+ itemSize = _ref.itemSize;\n+ var itemMetadataMap = instanceProps.itemMetadataMap,\n+ lastMeasuredIndex = instanceProps.lastMeasuredIndex;\n+\n+ if (index > lastMeasuredIndex) {\n+ var offset = 0;\n+\n+ if (lastMeasuredIndex >= 0) {\n+ var itemMetadata = itemMetadataMap[lastMeasuredIndex];\n+ offset = itemMetadata.offset + itemMetadata.size;\n+ }\n+\n+ for (var i = lastMeasuredIndex + 1; i <= index; i++) {\n+ var size = itemSize(i);\n+ itemMetadataMap[i] = {\n+ offset: offset,\n+ size: size\n+ };\n+ offset += size;\n+ }\n+\n+ instanceProps.lastMeasuredIndex = index;\n+ }\n+\n+ return itemMetadataMap[index];\n+};\n+\n+var findNearestItem$1 = function findNearestItem(props, instanceProps, offset) {\n+ var itemMetadataMap = instanceProps.itemMetadataMap,\n+ lastMeasuredIndex = instanceProps.lastMeasuredIndex;\n+ var lastMeasuredItemOffset = lastMeasuredIndex > 0 ? itemMetadataMap[lastMeasuredIndex].offset : 0;\n+\n+ if (lastMeasuredItemOffset >= offset) {\n+ \/\/ If we've already measured items within this range just use a binary search as it's faster.\n+ return findNearestItemBinarySearch$1(props, instanceProps, lastMeasuredIndex, 0, offset);\n+ } else {\n+ \/\/ If we haven't yet measured this high, fallback to an exponential search with an inner binary search.\n+ \/\/ The exponential search avoids pre-computing sizes for the full set of items as a binary search would.\n+ \/\/ The overall complexity for this approach is O(log n).\n+ return findNearestItemExponentialSearch$1(props, instanceProps, Math.max(0, lastMeasuredIndex), offset);\n+ }\n+};\n+\n+var findNearestItemBinarySearch$1 = function findNearestItemBinarySearch(props, instanceProps, high, low, offset) {\n+ while (low <= high) {\n+ var middle = low + Math.floor((high - low) \/ 2);\n+ var currentOffset = getItemMetadata$1(props, middle, instanceProps).offset;\n+\n+ if (currentOffset === offset) {\n+ return middle;\n+ } else if (currentOffset < offset) {\n+ low = middle + 1;\n+ } else if (currentOffset > offset) {\n+ high = middle - 1;\n+ }\n+ }\n+\n+ if (low > 0) {\n+ return low - 1;\n+ } else {\n+ return 0;\n+ }\n+};\n+\n+var findNearestItemExponentialSearch$1 = function findNearestItemExponentialSearch(props, instanceProps, index, offset) {\n+ var itemCount = props.itemCount;\n+ var interval = 1;\n+\n+ while (index < itemCount && getItemMetadata$1(props, index, instanceProps).offset < offset) {\n+ index += interval;\n+ interval *= 2;\n+ }\n+\n+ return findNearestItemBinarySearch$1(props, instanceProps, Math.min(index, itemCount - 1), Math.floor(index \/ 2), offset);\n+};\n+\n+var getEstimatedTotalSize = function getEstimatedTotalSize(_ref2, _ref3) {\n+ var itemCount = _ref2.itemCount;\n+ var itemMetadataMap = _ref3.itemMetadataMap,\n+ estimatedItemSize = _ref3.estimatedItemSize,\n+ lastMeasuredIndex = _ref3.lastMeasuredIndex;\n+ var totalSizeOfMeasuredItems = 0; \/\/ Edge case check for when the number of items decreases while a scroll is in progress.\n+ \/\/ https:\/\/github.com\/bvaughn\/react-window\/pull\/138\n+\n+ if (lastMeasuredIndex >= itemCount) {\n+ lastMeasuredIndex = itemCount - 1;\n+ }\n+\n+ if (lastMeasuredIndex >= 0) {\n+ var itemMetadata = itemMetadataMap[lastMeasuredIndex];\n+ totalSizeOfMeasuredItems = itemMetadata.offset + itemMetadata.size;\n+ }\n+\n+ var numUnmeasuredItems = itemCount - lastMeasuredIndex - 1;\n+ var totalSizeOfUnmeasuredItems = numUnmeasuredItems * estimatedItemSize;\n+ return totalSizeOfMeasuredItems + totalSizeOfUnmeasuredItems;\n+};\n+\n+var VariableSizeList =\n+\/*#__PURE__*\/\n+createListComponent({\n+ getItemOffset: function getItemOffset(props, index, instanceProps) {\n+ return getItemMetadata$1(props, index, instanceProps).offset;\n+ },\n+ getItemSize: function getItemSize(props, index, instanceProps) {\n+ return instanceProps.itemMetadataMap[index].size;\n+ },\n+ getEstimatedTotalSize: getEstimatedTotalSize,\n+ getOffsetForIndexAndAlignment: function getOffsetForIndexAndAlignment(props, index, align, scrollOffset, instanceProps) {\n+ var direction = props.direction,\n+ height = props.height,\n+ layout = props.layout,\n+ width = props.width; \/\/ TODO Deprecate direction \"horizontal\"\n+\n+ var isHorizontal = direction === 'horizontal' || layout === 'horizontal';\n+ var size = isHorizontal ? width : height;\n+ var itemMetadata = getItemMetadata$1(props, index, instanceProps); \/\/ Get estimated total size after ItemMetadata is computed,\n+ \/\/ To ensure it reflects actual measurements instead of just estimates.\n+\n+ var estimatedTotalSize = getEstimatedTotalSize(props, instanceProps);\n+ var maxOffset = Math.max(0, Math.min(estimatedTotalSize - size, itemMetadata.offset));\n+ var minOffset = Math.max(0, itemMetadata.offset - size + itemMetadata.size);\n+\n+ if (align === 'smart') {\n+ if (scrollOffset >= minOffset - size && scrollOffset <= maxOffset + size) {\n+ align = 'auto';\n+ } else {\n+ align = 'center';\n+ }\n+ }\n+\n+ switch (align) {\n+ case 'start':\n+ return maxOffset;\n+\n+ case 'end':\n+ return minOffset;\n+\n+ case 'center':\n+ return Math.round(minOffset + (maxOffset - minOffset) \/ 2);\n+\n+ case 'auto':\n+ default:\n+ if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {\n+ return scrollOffset;\n+ } else if (scrollOffset < minOffset) {\n+ return minOffset;\n+ } else {\n+ return maxOffset;\n+ }\n+\n+ }\n+ },\n+ getStartIndexForOffset: function getStartIndexForOffset(props, offset, instanceProps) {\n+ return findNearestItem$1(props, instanceProps, offset);\n+ },\n+ getStopIndexForStartIndex: function getStopIndexForStartIndex(props, startIndex, scrollOffset, instanceProps) {\n+ var direction = props.direction,\n+ height = props.height,\n+ itemCount = props.itemCount,\n+ layout = props.layout,\n+ width = props.width; \/\/ TODO Deprecate direction \"horizontal\"\n+\n+ var isHorizontal = direction === 'horizontal' || layout === 'horizontal';\n+ var size = isHorizontal ? width : height;\n+ var itemMetadata = getItemMetadata$1(props, startIndex, instanceProps);\n+ var maxOffset = scrollOffset + size;\n+ var offset = itemMetadata.offset + itemMetadata.size;\n+ var stopIndex = startIndex;\n+\n+ while (stopIndex < itemCount - 1 && offset < maxOffset) {\n+ stopIndex++;\n+ offset += getItemMetadata$1(props, stopIndex, instanceProps).size;\n+ }\n+\n+ return stopIndex;\n+ },\n+ initInstanceProps: function initInstanceProps(props, instance) {\n+ var _ref4 = props,\n+ estimatedItemSize = _ref4.estimatedItemSize;\n+ var instanceProps = {\n+ itemMetadataMap: {},\n+ estimatedItemSize: estimatedItemSize || DEFAULT_ESTIMATED_ITEM_SIZE$1,\n+ lastMeasuredIndex: -1\n+ };\n+\n+ instance.resetAfterIndex = function (index, shouldForceUpdate) {\n+ if (shouldForceUpdate === void 0) {\n+ shouldForceUpdate = true;\n+ }\n+\n+ instanceProps.lastMeasuredIndex = Math.min(instanceProps.lastMeasuredIndex, index - 1); \/\/ We could potentially optimize further by only evicting styles after this index,\n+ \/\/ But since styles are only cached while scrolling is in progress-\n+ \/\/ It seems an unnecessary optimization.\n+ \/\/ It's unlikely that resetAfterIndex() will be called while a user is scrolling.\n+\n+ instance._getItemStyleCache(-1);\n+\n+ if (shouldForceUpdate) {\n+ instance.forceUpdate();\n+ }\n+ };\n+\n+ return instanceProps;\n+ },\n+ shouldResetStyleCacheOnItemSizeChange: false,\n+ validateProps: function validateProps(_ref5) {\n+ var itemSize = _ref5.itemSize;\n+\n+ if (process.env.NODE_ENV !== 'production') {\n+ if (typeof itemSize !== 'function') {\n+ throw Error('An invalid \"itemSize\" prop has been specified. ' + 'Value should be a function. ' + (\"\\\"\" + (itemSize === null ? 'null' : typeof itemSize) + \"\\\" was specified.\"));\n+ }\n+ }\n+ }\n+});\n+\n+var FixedSizeGrid =\n+\/*#__PURE__*\/\n+createGridComponent({\n+ getColumnOffset: function getColumnOffset(_ref, index) {\n+ var columnWidth = _ref.columnWidth;\n+ return index * columnWidth;\n+ },\n+ getColumnWidth: function getColumnWidth(_ref2, index) {\n+ var columnWidth = _ref2.columnWidth;\n+ return columnWidth;\n+ },\n+ getRowOffset: function getRowOffset(_ref3, index) {\n+ var rowHeight = _ref3.rowHeight;\n+ return index * rowHeight;\n+ },\n+ getRowHeight: function getRowHeight(_ref4, index) {\n+ var rowHeight = _ref4.rowHeight;\n+ return rowHeight;\n+ },\n+ getEstimatedTotalHeight: function getEstimatedTotalHeight(_ref5) {\n+ var rowCount = _ref5.rowCount,\n+ rowHeight = _ref5.rowHeight;\n+ return rowHeight * rowCount;\n+ },\n+ getEstimatedTotalWidth: function getEstimatedTotalWidth(_ref6) {\n+ var columnCount = _ref6.columnCount,\n+ columnWidth = _ref6.columnWidth;\n+ return columnWidth * columnCount;\n+ },\n+ getOffsetForColumnAndAlignment: function getOffsetForColumnAndAlignment(_ref7, columnIndex, align, scrollLeft, instanceProps, scrollbarSize) {\n+ var columnCount = _ref7.columnCount,\n+ columnWidth = _ref7.columnWidth,\n+ width = _ref7.width;\n+ var lastColumnOffset = Math.max(0, columnCount * columnWidth - width);\n+ var maxOffset = Math.min(lastColumnOffset, columnIndex * columnWidth);\n+ var minOffset = Math.max(0, columnIndex * columnWidth - width + scrollbarSize + columnWidth);\n+\n+ if (align === 'smart') {\n+ if (scrollLeft >= minOffset - width && scrollLeft <= maxOffset + width) {\n+ align = 'auto';\n+ } else {\n+ align = 'center';\n+ }\n+ }\n+\n+ switch (align) {\n+ case 'start':\n+ return maxOffset;\n+\n+ case 'end':\n+ return minOffset;\n+\n+ case 'center':\n+ \/\/ \"Centered\" offset is usually the average of the min and max.\n+ \/\/ But near the edges of the list, this doesn't hold true.\n+ var middleOffset = Math.round(minOffset + (maxOffset - minOffset) \/ 2);\n+\n+ if (middleOffset < Math.ceil(width \/ 2)) {\n+ return 0; \/\/ near the beginning\n+ } else if (middleOffset > lastColumnOffset + Math.floor(width \/ 2)) {\n+ return lastColumnOffset; \/\/ near the end\n+ } else {\n+ return middleOffset;\n+ }\n+\n+ case 'auto':\n+ default:\n+ if (scrollLeft >= minOffset && scrollLeft <= maxOffset) {\n+ return scrollLeft;\n+ } else if (minOffset > maxOffset) {\n+ \/\/ Because we only take into account the scrollbar size when calculating minOffset\n+ \/\/ this value can be larger than maxOffset when at the end of the list\n+ return minOffset;\n+ } else if (scrollLeft < minOffset) {\n+ return minOffset;\n+ } else {\n+ return maxOffset;\n+ }\n+\n+ }\n+ },\n+ getOffsetForRowAndAlignment: function getOffsetForRowAndAlignment(_ref8, rowIndex, align, scrollTop, instanceProps, scrollbarSize) {\n+ var rowHeight = _ref8.rowHeight,\n+ height = _ref8.height,\n+ rowCount = _ref8.rowCount;\n+ var lastRowOffset = Math.max(0, rowCount * rowHeight - height);\n+ var maxOffset = Math.min(lastRowOffset, rowIndex * rowHeight);\n+ var minOffset = Math.max(0, rowIndex * rowHeight - height + scrollbarSize + rowHeight);\n+\n+ if (align === 'smart') {\n+ if (scrollTop >= minOffset - height && scrollTop <= maxOffset + height) {\n+ align = 'auto';\n+ } else {\n+ align = 'center';\n+ }\n+ }\n+\n+ switch (align) {\n+ case 'start':\n+ return maxOffset;\n+\n+ case 'end':\n+ return minOffset;\n+\n+ case 'center':\n+ \/\/ \"Centered\" offset is usually the average of the min and max.\n+ \/\/ But near the edges of the list, this doesn't hold true.\n+ var middleOffset = Math.round(minOffset + (maxOffset - minOffset) \/ 2);\n+\n+ if (middleOffset < Math.ceil(height \/ 2)) {\n+ return 0; \/\/ near the beginning\n+ } else if (middleOffset > lastRowOffset + Math.floor(height \/ 2)) {\n+ return lastRowOffset; \/\/ near the end\n+ } else {\n+ return middleOffset;\n+ }\n+\n+ case 'auto':\n+ default:\n+ if (scrollTop >= minOffset && scrollTop <= maxOffset) {\n+ return scrollTop;\n+ } else if (minOffset > maxOffset) {\n+ \/\/ Because we only take into account the scrollbar size when calculating minOffset\n+ \/\/ this value can be larger than maxOffset when at the end of the list\n+ return minOffset;\n+ } else if (scrollTop < minOffset) {\n+ return minOffset;\n+ } else {\n+ return maxOffset;\n+ }\n+\n+ }\n+ },\n+ getColumnStartIndexForOffset: function getColumnStartIndexForOffset(_ref9, scrollLeft) {\n+ var columnWidth = _ref9.columnWidth,\n+ columnCount = _ref9.columnCount;\n+ return Math.max(0, Math.min(columnCount - 1, Math.floor(scrollLeft \/ columnWidth)));\n+ },\n+ getColumnStopIndexForStartIndex: function getColumnStopIndexForStartIndex(_ref10, startIndex, scrollLeft) {\n+ var columnWidth = _ref10.columnWidth,\n+ columnCount = _ref10.columnCount,\n+ width = _ref10.width;\n+ var left = startIndex * columnWidth;\n+ var numVisibleColumns = Math.ceil((width + scrollLeft - left) \/ columnWidth);\n+ return Math.max(0, Math.min(columnCount - 1, startIndex + numVisibleColumns - 1 \/\/ -1 is because stop index is inclusive\n+ ));\n+ },\n+ getRowStartIndexForOffset: function getRowStartIndexForOffset(_ref11, scrollTop) {\n+ var rowHeight = _ref11.rowHeight,\n+ rowCount = _ref11.rowCount;\n+ return Math.max(0, Math.min(rowCount - 1, Math.floor(scrollTop \/ rowHeight)));\n+ },\n+ getRowStopIndexForStartIndex: function getRowStopIndexForStartIndex(_ref12, startIndex, scrollTop) {\n+ var rowHeight = _ref12.rowHeight,\n+ rowCount = _ref12.rowCount,\n+ height = _ref12.height;\n+ var top = startIndex * rowHeight;\n+ var numVisibleRows = Math.ceil((height + scrollTop - top) \/ rowHeight);\n+ return Math.max(0, Math.min(rowCount - 1, startIndex + numVisibleRows - 1 \/\/ -1 is because stop index is inclusive\n+ ));\n+ },\n+ initInstanceProps: function initInstanceProps(props) {\/\/ Noop\n+ },\n+ shouldResetStyleCacheOnItemSizeChange: true,\n+ validateProps: function validateProps(_ref13) {\n+ var columnWidth = _ref13.columnWidth,\n+ rowHeight = _ref13.rowHeight;\n+\n+ if (process.env.NODE_ENV !== 'production') {\n+ if (typeof columnWidth !== 'number') {\n+ throw Error('An invalid \"columnWidth\" prop has been specified. ' + 'Value should be a number. ' + (\"\\\"\" + (columnWidth === null ? 'null' : typeof columnWidth) + \"\\\" was specified.\"));\n+ }\n+\n+ if (typeof rowHeight !== 'number') {\n+ throw Error('An invalid \"rowHeight\" prop has been specified. ' + 'Value should be a number. ' + (\"\\\"\" + (rowHeight === null ? 'null' : typeof rowHeight) + \"\\\" was specified.\"));\n+ }\n+ }\n+ }\n+});\n+\n+var FixedSizeList =\n+\/*#__PURE__*\/\n+createListComponent({\n+ getItemOffset: function getItemOffset(_ref, index) {\n+ var itemSize = _ref.itemSize;\n+ return index * itemSize;\n+ },\n+ getItemSize: function getItemSize(_ref2, index) {\n+ var itemSize = _ref2.itemSize;\n+ return itemSize;\n+ },\n+ getEstimatedTotalSize: function getEstimatedTotalSize(_ref3) {\n+ var itemCount = _ref3.itemCount,\n+ itemSize = _ref3.itemSize;\n+ return itemSize * itemCount;\n+ },\n+ getOffsetForIndexAndAlignment: function getOffsetForIndexAndAlignment(_ref4, index, align, scrollOffset) {\n+ var direction = _ref4.direction,\n+ height = _ref4.height,\n+ itemCount = _ref4.itemCount,\n+ itemSize = _ref4.itemSize,\n+ layout = _ref4.layout,\n+ width = _ref4.width;\n+ \/\/ TODO Deprecate direction \"horizontal\"\n+ var isHorizontal = direction === 'horizontal' || layout === 'horizontal';\n+ var size = isHorizontal ? width : height;\n+ var lastItemOffset = Math.max(0, itemCount * itemSize - size);\n+ var maxOffset = Math.min(lastItemOffset, index * itemSize);\n+ var minOffset = Math.max(0, index * itemSize - size + itemSize);\n+\n+ if (align === 'smart') {\n+ if (scrollOffset >= minOffset - size && scrollOffset <= maxOffset + size) {\n+ align = 'auto';\n+ } else {\n+ align = 'center';\n+ }\n+ }\n+\n+ switch (align) {\n+ case 'start':\n+ return maxOffset;\n+\n+ case 'end':\n+ return minOffset;\n+\n+ case 'center':\n+ {\n+ \/\/ \"Centered\" offset is usually the average of the min and max.\n+ \/\/ But near the edges of the list, this doesn't hold true.\n+ var middleOffset = Math.round(minOffset + (maxOffset - minOffset) \/ 2);\n+\n+ if (middleOffset < Math.ceil(size \/ 2)) {\n+ return 0; \/\/ near the beginning\n+ } else if (middleOffset > lastItemOffset + Math.floor(size \/ 2)) {\n+ return lastItemOffset; \/\/ near the end\n+ } else {\n+ return middleOffset;\n+ }\n+ }\n+\n+ case 'auto':\n+ default:\n+ if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {\n+ return scrollOffset;\n+ } else if (scrollOffset < minOffset) {\n+ return minOffset;\n+ } else {\n+ return maxOffset;\n+ }\n+\n+ }\n+ },\n+ getStartIndexForOffset: function getStartIndexForOffset(_ref5, offset) {\n+ var itemCount = _ref5.itemCount,\n+ itemSize = _ref5.itemSize;\n+ return Math.max(0, Math.min(itemCount - 1, Math.floor(offset \/ itemSize)));\n+ },\n+ getStopIndexForStartIndex: function getStopIndexForStartIndex(_ref6, startIndex, scrollOffset) {\n+ var direction = _ref6.direction,\n+ height = _ref6.height,\n+ itemCount = _ref6.itemCount,\n+ itemSize = _ref6.itemSize,\n+ layout = _ref6.layout,\n+ width = _ref6.width;\n+ \/\/ TODO Deprecate direction \"horizontal\"\n+ var isHorizontal = direction === 'horizontal' || layout === 'horizontal';\n+ var offset = startIndex * itemSize;\n+ var size = isHorizontal ? width : height;\n+ var numVisibleItems = Math.ceil((size + scrollOffset - offset) \/ itemSize);\n+ return Math.max(0, Math.min(itemCount - 1, startIndex + numVisibleItems - 1 \/\/ -1 is because stop index is inclusive\n+ ));\n+ },\n+ initInstanceProps: function initInstanceProps(props) {\/\/ Noop\n+ },\n+ shouldResetStyleCacheOnItemSizeChange: true,\n+ validateProps: function validateProps(_ref7) {\n+ var itemSize = _ref7.itemSize;\n+\n+ if (process.env.NODE_ENV !== 'production') {\n+ if (typeof itemSize !== 'number') {\n+ throw Error('An invalid \"itemSize\" prop has been specified. ' + 'Value should be a number. ' + (\"\\\"\" + (itemSize === null ? 'null' : typeof itemSize) + \"\\\" was specified.\"));\n+ }\n+ }\n+ }\n+});\n+\n+\/\/ Pulled from react-compat\n+\/\/ https:\/\/github.com\/developit\/preact-compat\/blob\/7c5de00e7c85e2ffd011bf3af02899b63f699d3a\/src\/index.js#L349\n+function shallowDiffers(prev, next) {\n+ for (var attribute in prev) {\n+ if (!(attribute in next)) {\n+ return true;\n+ }\n+ }\n+\n+ for (var _attribute in next) {\n+ if (prev[_attribute] !== next[_attribute]) {\n+ return true;\n+ }\n+ }\n+\n+ return false;\n+}\n+\n+\/\/ It knows to compare individual style props and ignore the wrapper object.\n+\/\/ See https:\/\/reactjs.org\/docs\/react-api.html#reactmemo\n+\n+function areEqual(prevProps, nextProps) {\n+ var prevStyle = prevProps.style,\n+ prevRest = _objectWithoutPropertiesLoose(prevProps, [\"style\"]);\n+\n+ var nextStyle = nextProps.style,\n+ nextRest = _objectWithoutPropertiesLoose(nextProps, [\"style\"]);\n+\n+ return !shallowDiffers(prevStyle, nextStyle) && !shallowDiffers(prevRest, nextRest);\n+}\n+\n+\/\/ It knows to compare individual style props and ignore the wrapper object.\n+\/\/ See https:\/\/reactjs.org\/docs\/react-component.html#shouldcomponentupdate\n+\n+function shouldComponentUpdate(nextProps, nextState) {\n+ return !areEqual(this.props, nextProps) || shallowDiffers(this.state, nextState);\n+}\n+\n+exports.VariableSizeGrid = VariableSizeGrid;\n+exports.VariableSizeList = VariableSizeList;\n+exports.FixedSizeGrid = FixedSizeGrid;\n+exports.FixedSizeList = FixedSizeList;\n+exports.areEqual = areEqual;\n+exports.shouldComponentUpdate = shouldComponentUpdate;\n+\/\/# sourceMappingURL=index.cjs.js.map\ndiff --git a\/src\/node_modules\/react-window\/dist\/index.cjs.js.flow b\/src\/node_modules\/react-window\/dist\/index.cjs.js.flow\nnew file mode 100644\nindex 0000000000..6a6528bbe5\n--- \/dev\/null\n+++ b\/src\/node_modules\/react-window\/dist\/index.cjs.js.flow\n@@ -0,0 +1,3 @@\n+\/\/ @flow\n+\n+export * from '..\/src';\ndiff --git a\/src\/node_modules\/react-window\/dist\/index.esm.js b\/src\/node_modules\/react-window\/dist\/index.esm.js\nnew file mode 100644\nindex 0000000000..fed3a77c2c\n--- \/dev\/null\n+++ b\/src\/node_modules\/react-window\/dist\/index.esm.js\n@@ -0,0 +1,2078 @@\n+import _extends from '@babel\/runtime\/helpers\/esm\/extends';\n+import _inheritsLoose from '@babel\/runtime\/helpers\/esm\/inheritsLoose';\n+import _assertThisInitialized from '@babel\/runtime\/helpers\/esm\/assertThisInitialized';\n+import memoizeOne from 'memoize-one';\n+import { createElement, PureComponent } from 'react';\n+import { flushSync } from 'react-dom';\n+import _objectWithoutPropertiesLoose from '@babel\/runtime\/helpers\/esm\/objectWithoutPropertiesLoose';\n+\n+\/\/ Animation frame based implementation of setTimeout.\n+\/\/ Inspired by Joe Lambert, https:\/\/gist.github.com\/joelambert\/1002116#file-requesttimeout-js\n+var hasNativePerformanceNow = typeof performance === 'object' && typeof performance.now === 'function';\n+var now = hasNativePerformanceNow ? function () {\n+ return performance.now();\n+} : function () {\n+ return Date.now();\n+};\n+function cancelTimeout(timeoutID) {\n+ cancelAnimationFrame(timeoutID.id);\n+}\n+function requestTimeout(callback, delay) {\n+ var start = now();\n+\n+ function tick() {\n+ if (now() - start >= delay) {\n+ callback.call(null);\n+ } else {\n+ timeoutID.id = requestAnimationFrame(tick);\n+ }\n+ }\n+\n+ var timeoutID = {\n+ id: requestAnimationFrame(tick)\n+ };\n+ return timeoutID;\n+}\n+\n+var size = -1; \/\/ This utility copied from \"dom-helpers\" package.\n+\n+function getScrollbarSize(recalculate) {\n+ if (recalculate === void 0) {\n+ recalculate = false;\n+ }\n+\n+ if (size === -1 || recalculate) {\n+ var div = document.createElement('div');\n+ var style = div.style;\n+ style.width = '50px';\n+ style.height = '50px';\n+ style.overflow = 'scroll';\n+ document.body.appendChild(div);\n+ size = div.offsetWidth - div.clientWidth;\n+ document.body.removeChild(div);\n+ }\n+\n+ return size;\n+}\n+var cachedRTLResult = null; \/\/ TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.\n+\/\/ Chrome does not seem to adhere; its scrollLeft values are positive (measured relative to the left).\n+\/\/ Safari's elastic bounce makes detecting this even more complicated wrt potential false positives.\n+\/\/ The safest way to check this is to intentionally set a negative offset,\n+\/\/ and then verify that the subsequent \"scroll\" event matches the negative offset.\n+\/\/ If it does not match, then we can assume a non-standard RTL scroll implementation.\n+\n+function getRTLOffsetType(recalculate) {\n+ if (recalculate === void 0) {\n+ recalculate = false;\n+ }\n+\n+ if (cachedRTLResult === null || recalculate) {\n+ var outerDiv = document.createElement('div');\n+ var outerStyle = outerDiv.style;\n+ outerStyle.width = '50px';\n+ outerStyle.height = '50px';\n+ outerStyle.overflow = 'scroll';\n+ outerStyle.direction = 'rtl';\n+ var innerDiv = document.createElement('div');\n+ var innerStyle = innerDiv.style;\n+ innerStyle.width = '100px';\n+ innerStyle.height = '100px';\n+ outerDiv.appendChild(innerDiv);\n+ document.body.appendChild(outerDiv);\n+\n+ if (outerDiv.scrollLeft > 0) {\n+ cachedRTLResult = 'positive-descending';\n+ } else {\n+ outerDiv.scrollLeft = 1;\n+\n+ if (outerDiv.scrollLeft === 0) {\n+ cachedRTLResult = 'negative';\n+ } else {\n+ cachedRTLResult = 'positive-ascending';\n+ }\n+ }\n+\n+ document.body.removeChild(outerDiv);\n+ return cachedRTLResult;\n+ }\n+\n+ return cachedRTLResult;\n+}\n+\n+var IS_SCROLLING_DEBOUNCE_INTERVAL = 150;\n+\n+var defaultItemKey = function defaultItemKey(_ref) {\n+ var columnIndex = _ref.columnIndex,\n+ data = _ref.data,\n+ rowIndex = _ref.rowIndex;\n+ return rowIndex + \":\" + columnIndex;\n+}; \/\/ In DEV mode, this Set helps us only log a warning once per component instance.\n+\/\/ This avoids spamming the console every time a render happens.\n+\n+\n+var devWarningsOverscanCount = null;\n+var devWarningsOverscanRowsColumnsCount = null;\n+var devWarningsTagName = null;\n+\n+if (process.env.NODE_ENV !== 'production') {\n+ if (typeof window !== 'undefined' && typeof window.WeakSet !== 'undefined') {\n+ devWarningsOverscanCount =\n+ \/*#__PURE__*\/\n+ new WeakSet();\n+ devWarningsOverscanRowsColumnsCount =\n+ \/*#__PURE__*\/\n+ new WeakSet();\n+ devWarningsTagName =\n+ \/*#__PURE__*\/\n+ new WeakSet();\n+ }\n+}\n+\n+function createGridComponent(_ref2) {\n+ var _class, _temp;\n+\n+ var getColumnOffset = _ref2.getColumnOffset,\n+ getColumnStartIndexForOffset = _ref2.getColumnStartIndexForOffset,\n+ getColumnStopIndexForStartIndex = _ref2.getColumnStopIndexForStartIndex,\n+ getColumnWidth = _ref2.getColumnWidth,\n+ getEstimatedTotalHeight = _ref2.getEstimatedTotalHeight,\n+ getEstimatedTotalWidth = _ref2.getEstimatedTotalWidth,\n+ getOffsetForColumnAndAlignment = _ref2.getOffsetForColumnAndAlignment,\n+ getOffsetForRowAndAlignment = _ref2.getOffsetForRowAndAlignment,\n+ getRowHeight = _ref2.getRowHeight,\n+ getRowOffset = _ref2.getRowOffset,\n+ getRowStartIndexForOffset = _ref2.getRowStartIndexForOffset,\n+ getRowStopIndexForStartIndex = _ref2.getRowStopIndexForStartIndex,\n+ initInstanceProps = _ref2.initInstanceProps,\n+ shouldResetStyleCacheOnItemSizeChange = _ref2.shouldResetStyleCacheOnItemSizeChange,\n+ validateProps = _ref2.validateProps;\n+ return _temp = _class =\n+ \/*#__PURE__*\/\n+ function (_PureComponent) {\n+ _inheritsLoose(Grid, _PureComponent);\n+\n+ \/\/ Always use explicit constructor for React components.\n+ \/\/ It produces less code after transpilation. (#26)\n+ \/\/ eslint-disable-next-line no-useless-constructor\n+ function Grid(props) {\n+ var _this;\n+\n+ _this = _PureComponent.call(this, props) || this;\n+ _this._instanceProps = initInstanceProps(_this.props, _assertThisInitialized(_assertThisInitialized(_this)));\n+ _this._resetIsScrollingTimeoutId = null;\n+ _this._outerRef = void 0;\n+ _this.state = {\n+ instance: _assertThisInitialized(_assertThisInitialized(_this)),\n+ isScrolling: false,\n+ horizontalScrollDirection: 'forward',\n+ scrollLeft: typeof _this.props.initialScrollLeft === 'number' ? _this.props.initialScrollLeft : 0,\n+ scrollTop: typeof _this.props.initialScrollTop === 'number' ? _this.props.initialScrollTop : 0,\n+ scrollUpdateWasRequested: false,\n+ verticalScrollDirection: 'forward'\n+ };\n+ _this._callOnItemsRendered = void 0;\n+ _this._callOnItemsRendered = memoizeOne(function (overscanColumnStartIndex, overscanColumnStopIndex, overscanRowStartIndex, overscanRowStopIndex, visibleColumnStartIndex, visibleColumnStopIndex, visibleRowStartIndex, visibleRowStopIndex) {\n+ return _this.props.onItemsRendered({\n+ overscanColumnStartIndex: overscanColumnStartIndex,\n+ overscanColumnStopIndex: overscanColumnStopIndex,\n+ overscanRowStartIndex: overscanRowStartIndex,\n+ overscanRowStopIndex: overscanRowStopIndex,\n+ visibleColumnStartIndex: visibleColumnStartIndex,\n+ visibleColumnStopIndex: visibleColumnStopIndex,\n+ visibleRowStartIndex: visibleRowStartIndex,\n+ visibleRowStopIndex: visibleRowStopIndex\n+ });\n+ });\n+ _this._callOnScroll = void 0;\n+ _this._callOnScroll = memoizeOne(function (scrollLeft, scrollTop, horizontalScrollDirection, verticalScrollDirection, scrollUpdateWasRequested) {\n+ return _this.props.onScroll({\n+ horizontalScrollDirection: horizontalScrollDirection,\n+ scrollLeft: scrollLeft,\n+ scrollTop: scrollTop,\n+ verticalScrollDirection: verticalScrollDirection,\n+ scrollUpdateWasRequested: scrollUpdateWasRequested\n+ });\n+ });\n+ _this._getItemStyle = void 0;\n+\n+ _this._getItemStyle = function (rowIndex, columnIndex) {\n+ var _this$props = _this.props,\n+ columnWidth = _this$props.columnWidth,\n+ direction = _this$props.direction,\n+ rowHeight = _this$props.rowHeight;\n+\n+ var itemStyleCache = _this._getItemStyleCache(shouldResetStyleCacheOnItemSizeChange && columnWidth, shouldResetStyleCacheOnItemSizeChange && direction, shouldResetStyleCacheOnItemSizeChange && rowHeight);\n+\n+ var key = rowIndex + \":\" + columnIndex;\n+ var style;\n+\n+ if (itemStyleCache.hasOwnProperty(key)) {\n+ style = itemStyleCache[key];\n+ } else {\n+ var _style;\n+\n+ itemStyleCache[key] = style = (_style = {\n+ position: 'absolute'\n+ }, _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);\n+ }\n+\n+ return style;\n+ };\n+\n+ _this._getItemStyleCache = void 0;\n+ _this._getItemStyleCache = memoizeOne(function (_, __, ___) {\n+ return {};\n+ });\n+\n+ _this._onScroll = function (event) {\n+ var _event$currentTarget = event.currentTarget,\n+ clientHeight = _event$currentTarget.clientHeight,\n+ clientWidth = _event$currentTarget.clientWidth,\n+ scrollLeft = _event$currentTarget.scrollLeft,\n+ scrollTop = _event$currentTarget.scrollTop,\n+ scrollHeight = _event$currentTarget.scrollHeight,\n+ scrollWidth = _event$currentTarget.scrollWidth;\n+\n+ \/\/ Force flush sync for scroll updates to reduce visual checkerboarding.\n+ flushSync(() => {\n+ _this.setState(function (prevState) {\n+ if (prevState.scrollLeft === scrollLeft && prevState.scrollTop === scrollTop) {\n+ \/\/ Scroll position may have been updated by cDM\/cDU,\n+ \/\/ In which case we don't need to trigger another render,\n+ \/\/ And we don't want to update state.isScrolling.\n+ return null;\n+ }\n+\n+ var direction = _this.props.direction; \/\/ TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.\n+ \/\/ This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).\n+ \/\/ It's also easier for this component if we convert offsets to the same format as they would be in for ltr.\n+ \/\/ So the simplest solution is to determine which browser behavior we're dealing with, and convert based on it.\n+\n+ var calculatedScrollLeft = scrollLeft;\n+\n+ if (direction === 'rtl') {\n+ switch (getRTLOffsetType()) {\n+ case 'negative':\n+ calculatedScrollLeft = -scrollLeft;\n+ break;\n+\n+ case 'positive-descending':\n+ calculatedScrollLeft = scrollWidth - clientWidth - scrollLeft;\n+ break;\n+ }\n+ } \/\/ Prevent Safari's elastic scrolling from causing visual shaking when scrolling past bounds.\n+\n+\n+ calculatedScrollLeft = Math.max(0, Math.min(calculatedScrollLeft, scrollWidth - clientWidth));\n+ var calculatedScrollTop = Math.max(0, Math.min(scrollTop, scrollHeight - clientHeight));\n+ return {\n+ isScrolling: true,\n+ horizontalScrollDirection: prevState.scrollLeft < scrollLeft ? 'forward' : 'backward',\n+ scrollLeft: calculatedScrollLeft,\n+ scrollTop: calculatedScrollTop,\n+ verticalScrollDirection: prevState.scrollTop < scrollTop ? 'forward' : 'backward',\n+ scrollUpdateWasRequested: false\n+ };\n+ }, _this._resetIsScrollingDebounced);\n+ });\n+ };\n+\n+ _this._outerRefSetter = function (ref) {\n+ var outerRef = _this.props.outerRef;\n+ _this._outerRef = ref;\n+\n+ if (typeof outerRef === 'function') {\n+ outerRef(ref);\n+ } else if (outerRef != null && typeof outerRef === 'object' && outerRef.hasOwnProperty('current')) {\n+ outerRef.current = ref;\n+ }\n+ };\n+\n+ _this._resetIsScrollingDebounced = function () {\n+ if (_this._resetIsScrollingTimeoutId !== null) {\n+ cancelTimeout(_this._resetIsScrollingTimeoutId);\n+ }\n+\n+ _this._resetIsScrollingTimeoutId = requestTimeout(_this._resetIsScrolling, IS_SCROLLING_DEBOUNCE_INTERVAL);\n+ };\n+\n+ _this._resetIsScrolling = function () {\n+ _this._resetIsScrollingTimeoutId = null;\n+\n+ _this.setState({\n+ isScrolling: false\n+ }, function () {\n+ \/\/ Clear style cache after state update has been committed.\n+ \/\/ This way we don't break pure sCU for items that don't use isScrolling param.\n+ _this._getItemStyleCache(-1);\n+ });\n+ };\n+\n+ return _this;\n+ }\n+\n+ Grid.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {\n+ validateSharedProps(nextProps, prevState);\n+ validateProps(nextProps);\n+ return null;\n+ };\n+\n+ var _proto = Grid.prototype;\n+\n+ _proto.scrollTo = function scrollTo(_ref3) {\n+ var scrollLeft = _ref3.scrollLeft,\n+ scrollTop = _ref3.scrollTop;\n+\n+ if (scrollLeft !== undefined) {\n+ scrollLeft = Math.max(0, scrollLeft);\n+ }\n+\n+ if (scrollTop !== undefined) {\n+ scrollTop = Math.max(0, scrollTop);\n+ }\n+\n+ this.setState(function (prevState) {\n+ if (scrollLeft === undefined) {\n+ scrollLeft = prevState.scrollLeft;\n+ }\n+\n+ if (scrollTop === undefined) {\n+ scrollTop = prevState.scrollTop;\n+ }\n+\n+ if (prevState.scrollLeft === scrollLeft && prevState.scrollTop === scrollTop) {\n+ return null;\n+ }\n+\n+ return {\n+ horizontalScrollDirection: prevState.scrollLeft < scrollLeft ? 'forward' : 'backward',\n+ scrollLeft: scrollLeft,\n+ scrollTop: scrollTop,\n+ scrollUpdateWasRequested: true,\n+ verticalScrollDirection: prevState.scrollTop < scrollTop ? 'forward' : 'backward'\n+ };\n+ }, this._resetIsScrollingDebounced);\n+ };\n+\n+ _proto.scrollToItem = function scrollToItem(_ref4) {\n+ var _ref4$align = _ref4.align,\n+ align = _ref4$align === void 0 ? 'auto' : _ref4$align,\n+ columnIndex = _ref4.columnIndex,\n+ rowIndex = _ref4.rowIndex;\n+ var _this$props2 = this.props,\n+ columnCount = _this$props2.columnCount,\n+ height = _this$props2.height,\n+ rowCount = _this$props2.rowCount,\n+ width = _this$props2.width;\n+ var _this$state = this.state,\n+ scrollLeft = _this$state.scrollLeft,\n+ scrollTop = _this$state.scrollTop;\n+ var scrollbarSize = getScrollbarSize();\n+\n+ if (columnIndex !== undefined) {\n+ columnIndex = Math.max(0, Math.min(columnIndex, columnCount - 1));\n+ }\n+\n+ if (rowIndex !== undefined) {\n+ rowIndex = Math.max(0, Math.min(rowIndex, rowCount - 1));\n+ }\n+\n+ var estimatedTotalHeight = getEstimatedTotalHeight(this.props, this._instanceProps);\n+ var estimatedTotalWidth = getEstimatedTotalWidth(this.props, this._instanceProps); \/\/ The scrollbar size should be considered when scrolling an item into view,\n+ \/\/ to ensure it's fully visible.\n+ \/\/ But we only need to account for its size when it's actually visible.\n+\n+ var horizontalScrollbarSize = estimatedTotalWidth > width ? scrollbarSize : 0;\n+ var verticalScrollbarSize = estimatedTotalHeight > height ? scrollbarSize : 0;\n+ this.scrollTo({\n+ scrollLeft: columnIndex !== undefined ? getOffsetForColumnAndAlignment(this.props, columnIndex, align, scrollLeft, this._instanceProps, verticalScrollbarSize) : scrollLeft,\n+ scrollTop: rowIndex !== undefined ? getOffsetForRowAndAlignment(this.props, rowIndex, align, scrollTop, this._instanceProps, horizontalScrollbarSize) : scrollTop\n+ });\n+ };\n+\n+ _proto.componentDidMount = function componentDidMount() {\n+ var _this$props3 = this.props,\n+ initialScrollLeft = _this$props3.initialScrollLeft,\n+ initialScrollTop = _this$props3.initialScrollTop;\n+\n+ if (this._outerRef != null) {\n+ var outerRef = this._outerRef;\n+\n+ if (typeof initialScrollLeft === 'number') {\n+ outerRef.scrollLeft = initialScrollLeft;\n+ }\n+\n+ if (typeof initialScrollTop === 'number') {\n+ outerRef.scrollTop = initialScrollTop;\n+ }\n+ }\n+\n+ this._callPropsCallbacks();\n+ };\n+\n+ _proto.componentDidUpdate = function componentDidUpdate() {\n+ var direction = this.props.direction;\n+ var _this$state2 = this.state,\n+ scrollLeft = _this$state2.scrollLeft,\n+ scrollTop = _this$state2.scrollTop,\n+ scrollUpdateWasRequested = _this$state2.scrollUpdateWasRequested;\n+\n+ if (scrollUpdateWasRequested && this._outerRef != null) {\n+ \/\/ TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.\n+ \/\/ This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).\n+ \/\/ So we need to determine which browser behavior we're dealing with, and mimic it.\n+ var outerRef = this._outerRef;\n+\n+ if (direction === 'rtl') {\n+ switch (getRTLOffsetType()) {\n+ case 'negative':\n+ outerRef.scrollLeft = -scrollLeft;\n+ break;\n+\n+ case 'positive-ascending':\n+ outerRef.scrollLeft = scrollLeft;\n+ break;\n+\n+ default:\n+ var clientWidth = outerRef.clientWidth,\n+ scrollWidth = outerRef.scrollWidth;\n+ outerRef.scrollLeft = scrollWidth - clientWidth - scrollLeft;\n+ break;\n+ }\n+ } else {\n+ outerRef.scrollLeft = Math.max(0, scrollLeft);\n+ }\n+\n+ outerRef.scrollTop = Math.max(0, scrollTop);\n+ }\n+\n+ this._callPropsCallbacks();\n+ };\n+\n+ _proto.componentWillUnmount = function componentWillUnmount() {\n+ if (this._resetIsScrollingTimeoutId !== null) {\n+ cancelTimeout(this._resetIsScrollingTimeoutId);\n+ }\n+ };\n+\n+ _proto.render = function render() {\n+ var _this$props4 = this.props,\n+ children = _this$props4.children,\n+ className = _this$props4.className,\n+ columnCount = _this$props4.columnCount,\n+ direction = _this$props4.direction,\n+ height = _this$props4.height,\n+ innerRef = _this$props4.innerRef,\n+ innerElementType = _this$props4.innerElementType,\n+ innerTagName = _this$props4.innerTagName,\n+ itemData = _this$props4.itemData,\n+ _this$props4$itemKey = _this$props4.itemKey,\n+ itemKey = _this$props4$itemKey === void 0 ? defaultItemKey : _this$props4$itemKey,\n+ outerElementType = _this$props4.outerElementType,\n+ outerTagName = _this$props4.outerTagName,\n+ rowCount = _this$props4.rowCount,\n+ style = _this$props4.style,\n+ useIsScrolling = _this$props4.useIsScrolling,\n+ width = _this$props4.width;\n+ var isScrolling = this.state.isScrolling;\n+\n+ var _this$_getHorizontalR = this._getHorizontalRangeToRender(),\n+ columnStartIndex = _this$_getHorizontalR[0],\n+ columnStopIndex = _this$_getHorizontalR[1];\n+\n+ var _this$_getVerticalRan = this._getVerticalRangeToRender(),\n+ rowStartIndex = _this$_getVerticalRan[0],\n+ rowStopIndex = _this$_getVerticalRan[1];\n+\n+ var items = [];\n+\n+ if (columnCount > 0 && rowCount) {\n+ for (var _rowIndex = rowStartIndex; _rowIndex <= rowStopIndex; _rowIndex++) {\n+ for (var _columnIndex = columnStartIndex; _columnIndex <= columnStopIndex; _columnIndex++) {\n+ items.push(createElement(children, {\n+ columnIndex: _columnIndex,\n+ data: itemData,\n+ isScrolling: useIsScrolling ? isScrolling : undefined,\n+ key: itemKey({\n+ columnIndex: _columnIndex,\n+ data: itemData,\n+ rowIndex: _rowIndex\n+ }),\n+ rowIndex: _rowIndex,\n+ style: this._getItemStyle(_rowIndex, _columnIndex)\n+ }));\n+ }\n+ }\n+ } \/\/ Read this value AFTER items have been created,\n+ \/\/ So their actual sizes (if variable) are taken into consideration.\n+\n+\n+ var estimatedTotalHeight = getEstimatedTotalHeight(this.props, this._instanceProps);\n+ var estimatedTotalWidth = getEstimatedTotalWidth(this.props, this._instanceProps);\n+ return createElement(outerElementType || outerTagName || 'div', {\n+ className: className,\n+ onScroll: this._onScroll,\n+ ref: this._outerRefSetter,\n+ style: _extends({\n+ position: 'relative',\n+ height: height,\n+ width: width,\n+ overflow: 'auto',\n+ WebkitOverflowScrolling: 'touch',\n+ willChange: 'transform',\n+ direction: direction\n+ }, style)\n+ }, createElement(innerElementType || innerTagName || 'div', {\n+ children: items,\n+ ref: innerRef,\n+ style: {\n+ height: estimatedTotalHeight,\n+ pointerEvents: isScrolling ? 'none' : undefined,\n+ width: estimatedTotalWidth\n+ }\n+ }));\n+ };\n+\n+ _proto._callPropsCallbacks = function _callPropsCallbacks() {\n+ var _this$props5 = this.props,\n+ columnCount = _this$props5.columnCount,\n+ onItemsRendered = _this$props5.onItemsRendered,\n+ onScroll = _this$props5.onScroll,\n+ rowCount = _this$props5.rowCount;\n+\n+ if (typeof onItemsRendered === 'function') {\n+ if (columnCount > 0 && rowCount > 0) {\n+ var _this$_getHorizontalR2 = this._getHorizontalRangeToRender(),\n+ _overscanColumnStartIndex = _this$_getHorizontalR2[0],\n+ _overscanColumnStopIndex = _this$_getHorizontalR2[1],\n+ _visibleColumnStartIndex = _this$_getHorizontalR2[2],\n+ _visibleColumnStopIndex = _this$_getHorizontalR2[3];\n+\n+ var _this$_getVerticalRan2 = this._getVerticalRangeToRender(),\n+ _overscanRowStartIndex = _this$_getVerticalRan2[0],\n+ _overscanRowStopIndex = _this$_getVerticalRan2[1],\n+ _visibleRowStartIndex = _this$_getVerticalRan2[2],\n+ _visibleRowStopIndex = _this$_getVerticalRan2[3];\n+\n+ this._callOnItemsRendered(_overscanColumnStartIndex, _overscanColumnStopIndex, _overscanRowStartIndex, _overscanRowStopIndex, _visibleColumnStartIndex, _visibleColumnStopIndex, _visibleRowStartIndex, _visibleRowStopIndex);\n+ }\n+ }\n+\n+ if (typeof onScroll === 'function') {\n+ var _this$state3 = this.state,\n+ _horizontalScrollDirection = _this$state3.horizontalScrollDirection,\n+ _scrollLeft = _this$state3.scrollLeft,\n+ _scrollTop = _this$state3.scrollTop,\n+ _scrollUpdateWasRequested = _this$state3.scrollUpdateWasRequested,\n+ _verticalScrollDirection = _this$state3.verticalScrollDirection;\n+\n+ this._callOnScroll(_scrollLeft, _scrollTop, _horizontalScrollDirection, _verticalScrollDirection, _scrollUpdateWasRequested);\n+ }\n+ }; \/\/ Lazily create and cache item styles while scrolling,\n+ \/\/ So that pure component sCU will prevent re-renders.\n+ \/\/ We maintain this cache, and pass a style prop rather than index,\n+ \/\/ So that List can clear cached styles and force item re-render if necessary.\n+\n+\n+ _proto._getHorizontalRangeToRender = function _getHorizontalRangeToRender() {\n+ var _this$props6 = this.props,\n+ columnCount = _this$props6.columnCount,\n+ overscanColumnCount = _this$props6.overscanColumnCount,\n+ overscanColumnsCount = _this$props6.overscanColumnsCount,\n+ overscanCount = _this$props6.overscanCount,\n+ rowCount = _this$props6.rowCount;\n+ var _this$state4 = this.state,\n+ horizontalScrollDirection = _this$state4.horizontalScrollDirection,\n+ isScrolling = _this$state4.isScrolling,\n+ scrollLeft = _this$state4.scrollLeft;\n+ var overscanCountResolved = overscanColumnCount || overscanColumnsCount || overscanCount || 1;\n+\n+ if (columnCount === 0 || rowCount === 0) {\n+ return [0, 0, 0, 0];\n+ }\n+\n+ var startIndex = getColumnStartIndexForOffset(this.props, scrollLeft, this._instanceProps);\n+ var stopIndex = getColumnStopIndexForStartIndex(this.props, startIndex, scrollLeft, this._instanceProps); \/\/ Overscan by one item in each direction so that tab\/focus works.\n+ \/\/ If there isn't at least one extra item, tab loops back around.\n+\n+ var overscanBackward = !isScrolling || horizontalScrollDirection === 'backward' ? Math.max(1, overscanCountResolved) : 1;\n+ var overscanForward = !isScrolling || horizontalScrollDirection === 'forward' ? Math.max(1, overscanCountResolved) : 1;\n+ return [Math.max(0, startIndex - overscanBackward), Math.max(0, Math.min(columnCount - 1, stopIndex + overscanForward)), startIndex, stopIndex];\n+ };\n+\n+ _proto._getVerticalRangeToRender = function _getVerticalRangeToRender() {\n+ var _this$props7 = this.props,\n+ columnCount = _this$props7.columnCount,\n+ overscanCount = _this$props7.overscanCount,\n+ overscanRowCount = _this$props7.overscanRowCount,\n+ overscanRowsCount = _this$props7.overscanRowsCount,\n+ rowCount = _this$props7.rowCount;\n+ var _this$state5 = this.state,\n+ isScrolling = _this$state5.isScrolling,\n+ verticalScrollDirection = _this$state5.verticalScrollDirection,\n+ scrollTop = _this$state5.scrollTop;\n+ var overscanCountResolved = overscanRowCount || overscanRowsCount || overscanCount || 1;\n+\n+ if (columnCount === 0 || rowCount === 0) {\n+ return [0, 0, 0, 0];\n+ }\n+\n+ var startIndex = getRowStartIndexForOffset(this.props, scrollTop, this._instanceProps);\n+ var stopIndex = getRowStopIndexForStartIndex(this.props, startIndex, scrollTop, this._instanceProps); \/\/ Overscan by one item in each direction so that tab\/focus works.\n+ \/\/ If there isn't at least one extra item, tab loops back around.\n+\n+ var overscanBackward = !isScrolling || verticalScrollDirection === 'backward' ? Math.max(1, overscanCountResolved) : 1;\n+ var overscanForward = !isScrolling || verticalScrollDirection === 'forward' ? Math.max(1, overscanCountResolved) : 1;\n+ return [Math.max(0, startIndex - overscanBackward), Math.max(0, Math.min(rowCount - 1, stopIndex + overscanForward)), startIndex, stopIndex];\n+ };\n+\n+ return Grid;\n+ }(PureComponent), _class.defaultProps = {\n+ direction: 'ltr',\n+ itemData: undefined,\n+ useIsScrolling: false\n+ }, _temp;\n+}\n+\n+var validateSharedProps = function validateSharedProps(_ref5, _ref6) {\n+ var children = _ref5.children,\n+ direction = _ref5.direction,\n+ height = _ref5.height,\n+ innerTagName = _ref5.innerTagName,\n+ outerTagName = _ref5.outerTagName,\n+ overscanColumnsCount = _ref5.overscanColumnsCount,\n+ overscanCount = _ref5.overscanCount,\n+ overscanRowsCount = _ref5.overscanRowsCount,\n+ width = _ref5.width;\n+ var instance = _ref6.instance;\n+\n+ if (process.env.NODE_ENV !== 'production') {\n+ if (typeof overscanCount === 'number') {\n+ if (devWarningsOverscanCount && !devWarningsOverscanCount.has(instance)) {\n+ devWarningsOverscanCount.add(instance);\n+ console.warn('The overscanCount prop has been deprecated. ' + 'Please use the overscanColumnCount and overscanRowCount props instead.');\n+ }\n+ }\n+\n+ if (typeof overscanColumnsCount === 'number' || typeof overscanRowsCount === 'number') {\n+ if (devWarningsOverscanRowsColumnsCount && !devWarningsOverscanRowsColumnsCount.has(instance)) {\n+ devWarningsOverscanRowsColumnsCount.add(instance);\n+ console.warn('The overscanColumnsCount and overscanRowsCount props have been deprecated. ' + 'Please use the overscanColumnCount and overscanRowCount pr</article></body></html>

`, React Native `View`) are now hidden by default, but you can see them by disabling that filter.\n+\n+Filter preferences are remembered between sessions.\n+\n+#### No more in-line props\n+\n+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.\n+\n+You can view a component's props, state, and hooks by selecting it:\n+\n+![Inspecting props](https:\/\/user-images.githubusercontent.com\/29597\/62303001-37da6400-b430-11e9-87fd-10a94df88efa.png)\n+\n+#### \"Rendered by\" list\n+\n+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.\n+\n+![Example code](https:\/\/user-images.githubusercontent.com\/29597\/62229551-bbcf1600-b374-11e9-8411-8ff411f4f847.png)\n+\n+When you are debugging an unexpected prop value, you can save time if you skip over the parents.\n+\n+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.\n+\n+![Example video showing the \"rendered by\" list](https:\/\/user-images.githubusercontent.com\/29597\/62229747-4152c600-b375-11e9-9930-3f6b3b92be7a.gif)\n+\n+#### Owners tree\n+\n+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.\n+\n+Double click a component to view the owners tree and click the \"x\" button to return to the full component tree:\n+\n+![Demo showing \"owners tree\" feature](https:\/\/user-images.githubusercontent.com\/29597\/62229452-84f90000-b374-11e9-818a-61eec6be0bb4.gif)\n+\n+#### No more horizontal scrolling\n+\n+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.\n+\n+![Video demonstration dynamic indentation to eliminate horizontal scrolling](https:\/\/user-images.githubusercontent.com\/29597\/62246661-f8ad0400-b398-11e9-885f-284f150a6d76.gif)\n+\n+#### Improved hooks support\n+\n+Hooks now have the same level of support as props and state: values can be edited, arrays and objects can be drilled into, etc.\n+\n+![Video demonstrating hooks support](https:\/\/user-images.githubusercontent.com\/29597\/62230532-d86c4d80-b376-11e9-8629-1b2129b210d6.gif)\n+\n+#### Improved search UX\n+\n+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.\n+\n+Search results are now shown inline similar to the browser's find-in-page search.\n+\n+![Video demonstrating the search UX](https:\/\/user-images.githubusercontent.com\/29597\/62230923-c63edf00-b377-11e9-9f95-aa62ddc8f62c.gif)\n+\n+#### Higher order components\n+\n+[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.\n+\n+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.\n+\n+![Screenshot showing HOC badges](https:\/\/user-images.githubusercontent.com\/29597\/62302774-c4385700-b42f-11e9-9ef4-49c5f18d6276.png)\n+\n+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.\n+\n+![Screenshot showing a component with multiple HOC badges](https:\/\/user-images.githubusercontent.com\/29597\/62303729-7fadbb00-b431-11e9-8685-45f5ab52b30b.png)\n+\n+#### Suspense toggle\n+\n+React's experimental [Suspense API](https:\/\/reactjs.org\/docs\/react-api.html#suspense) lets components \"wait\" for something before rendering. `` components can be used to specify loading states when components deeper in the tree are waiting to render.\n+\n+DevTools lets you test these loading states with a new toggle:\n+\n+![Video demonstrating suspense toggle UI](https:\/\/user-images.githubusercontent.com\/29597\/62231446-e15e1e80-b378-11e9-92d4-086751dc65fc.gif)\n+\n+### Profiler changes\n+\n+#### Reload and profile\n+\n+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.\n+\n+This feature is now supported with a \"reload and profile\" action:\n+\n+![Video demonstrating the reload-and-profile feature](https:\/\/user-images.githubusercontent.com\/29597\/62233455-7a8f3400-b37d-11e9-9563-ec334bfb2572.gif)\n+\n+#### Import\/export\n+\n+Profiler data can now be exported and shared with other developers to enable easier collaboration.\n+\n+![Video demonstrating exporting and importing profiler data](https:\/\/user-images.githubusercontent.com\/29597\/62233911-6566d500-b37e-11e9-9052-692378c92538.gif)\n+\n+Exports include all commits, timings, interactions, etc.\n+\n+#### \"Why did this render?\"\n+\n+\"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.\n+\n+![Video demonstrating profiler \"why did this render?\" feature](https:\/\/user-images.githubusercontent.com\/29597\/62234698-0f932c80-b380-11e9-8cf3-a5183af0c388.gif)\n+\n+Because this feature adds a small amount of overhead, it can be disabled in the profiler settings panel.\n+\n+#### Component renders list\n+\n+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.\n+\n+![Video demonstrating profiler's component renders list](https:\/\/user-images.githubusercontent.com\/29597\/62234547-bcb97500-b37f-11e9-9615-54fba8b574b9.gif)\ndiff --git a\/OVERVIEW.md b\/OVERVIEW.md\nnew file mode 100644\nindex 0000000000..b7ec0639ca\n--- \/dev\/null\n+++ b\/OVERVIEW.md\n@@ -0,0 +1,270 @@\n+# Overview\n+\n+The React DevTools extension consists of multiple pieces:\n+* The **frontend** portion is the extension you see (the Components tree, the Profiler, etc.).\n+* 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`).\n+\n+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.\n+\n+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)).\n+\n+## Components panel\n+\n+### Serializing the tree\n+\n+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.)\n+\n+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.\n+\n+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).\n+\n+#### String table\n+\n+The string table is encoded right after the first two numbers.\n+\n+It consists of:\n+\n+1. the total length of next items that belong to string table\n+2. for each string in a table:\n+ 1. encoded size\n+ 2. a list of its UTF encoded codepoints\n+\n+For example, for `Foo` and `Bar` we would see:\n+\n+```\n+[\n+ 8, \/\/ string table length\n+ 3, \/\/ encoded display name size\n+ 70, \/\/ \"F\"\n+ 111, \/\/ \"o\"\n+ 111, \/\/ \"o\"\n+ 3, \/\/ encoded display name size\n+ 66, \/\/ \"B\"\n+ 97, \/\/ \"a\"\n+ 114, \/\/ \"r\"\n+]\n+```\n+\n+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.\n+\n+#### Adding a root node\n+\n+Adding a root to the tree requires sending 4 numbers:\n+\n+1. add operation constant (`1`)\n+1. fiber id\n+1. element type constant (`8 === ElementTypeRoot`)\n+1. profiling supported flag\n+\n+For example, adding a root fiber with an id of 1:\n+```js\n+[\n+ 1, \/\/ add operation\n+ 1, \/\/ fiber id\n+ 8, \/\/ ElementTypeRoot\n+ 1, \/\/ this root's renderer supports profiling\n+]\n+```\n+\n+#### Adding a leaf node\n+\n+Adding a leaf node takes a variable number of numbers since we need to decode the name (and potentially the key):\n+\n+1. add operation constant (`1`)\n+1. fiber id\n+1. element type constant (e.g. `1 === ElementTypeClass`)\n+1. parent fiber id\n+1. owner fiber id\n+1. string table id for `displayName`\n+1. string table id for `key`\n+\n+For example, adding a function component `` with an id 2:\n+```js\n+[\n+ 1, \/\/ add operation\n+ 2, \/\/ fiber id\n+ 1, \/\/ ElementTypeClass\n+ 1, \/\/ parent id\n+ 0, \/\/ owner id\n+ 3, \/\/ encoded display name size\n+ 1, \/\/ id of \"Foo\" displayName in the string table\n+ 0, \/\/ id of null key in the string table (always zero for null)\n+]\n+```\n+\n+#### Removing a node\n+\n+Removing a fiber from the tree (a root or a leaf) requires sending:\n+\n+1. remove operation constant (`2`)\n+1. how many items were removed\n+1. number of children\n+ * (followed by a children-first list of removed fiber ids)\n+\n+For example, removing fibers with ids of 35 and 21:\n+```js\n+[\n+ 2, \/\/ remove operation\n+ 2, \/\/ number of removed fibers\n+ 35, \/\/ first removed id\n+ 21, \/\/ second removed id\n+]\n+```\n+\n+#### Re-ordering children\n+\n+1. re-order children constant (`3`)\n+1. fiber id\n+1. number of children\n+ * (followed by an ordered list of child fiber ids)\n+\n+For example:\n+```js\n+[\n+ 3, \/\/ re-order operation\n+ 15, \/\/ fiber id\n+ 2, \/\/ number of children\n+ 35, \/\/ first child id\n+ 21, \/\/ second child id\n+]\n+```\n+\n+#### Updating tree base duration\n+\n+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.\n+\n+1. tree base duration constant (`4`)\n+1. fiber id\n+1. tree base duration\n+\n+For example, updating the base duration for a fiber with an id of 1:\n+```js\n+[\n+ 4, \/\/ tree base duration operation\n+ 1, \/\/ fiber id\n+ 32, \/\/ new tree base duration value\n+]\n+```\n+\n+## Reconstructing the tree\n+\n+The frontend stores its information about the tree in a map of id to objects with the following keys:\n+\n+* id: `number`\n+* parentID: `number`\n+* children: `Array`\n+* type: `number` (constant)\n+* displayName: `string | null`\n+* key: `number | string | null`\n+* ownerID: `number`\n+* depth: `number` ^{1<\/sup>\n+* weight: `number` ^{2<\/sup>\n+\n+^{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.)\n+\n+^{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.\n+\n+#### Finding the element at index N\n+\n+The tree data structure lets us impose an order on elements and \"quickly\" find the Nth one using the `weight` attribute.\n+\n+First we find which root contains the index:\n+```js\n+let rootID;\n+let root;\n+let rootWeight = 0;\n+for (let i = 0; i < this._roots.length; i++) {\n+ rootID = this._roots[i];\n+ root = this._idToElement.get(rootID);\n+ if (root.children.length === 0) {\n+ continue;\n+ } else if (rootWeight + root.weight > index) {\n+ break;\n+ } else {\n+ rootWeight += root.weight;\n+ }\n+}\n+```\n+\n+We skip the root itself because don't display them in the tree:\n+```js\n+const firstChildID = root.children[0];\n+```\n+\n+Then we traverse the tree to find the element:\n+```js\n+let currentElement = this._idToElement.get(firstChildID);\n+let currentWeight = rootWeight;\n+while (index !== currentWeight) {\n+ for (let i = 0; i < currentElement.children.length; i++) {\n+ const childID = currentElement.children[i];\n+ const child = this._idToElement.get(childID);\n+ const { weight } = child;\n+ if (index <= currentWeight + weight) {\n+ currentWeight++;\n+ currentElement = child;\n+ break;\n+ } else {\n+ currentWeight += weight;\n+ }\n+ }\n+}\n+```\n+\n+## Inspecting an element\n+\n+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.)\n+\n+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.\n+\n+### Polling strategy\n+\n+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.\n+\n+### Deeply nested properties\n+\n+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.\n+\n+### Inspecting hooks\n+\n+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\".)\n+\n+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).)\n+\n+> **Note**: DevTools obtains hooks info by re-rendering a component.\n+> Breakpoints will be invoked during this additional (shallow) render,\n+> but DevTools temporarily overrides `console` methods to suppress logging.\n+\n+### Performance implications\n+\n+To mitigate the performance impact of re-rendering a component, DevTools does the following:\n+* Only function components that use _at least one hook_ are rendered. (Props and state can be analyzed without rendering.)\n+* Rendering is always shallow.\n+* Rendering is throttled to occur, at most, once per second.\n+* Rendering is skipped if the component has not updated since the last time its properties were inspected.\n+\n+## Profiler\n+\n+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:\n+* Minimizing bridge traffic.\n+* Making expensive computations lazy.\n+\n+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.)\n+\n+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.\n+\n+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:\n+* Commit time and duration\n+* Which elements were rendered during that commit\n+* Which interactions (if any) were part of the commit\n+* Which props and state changed (if enabled in profiler settings)\n+\n+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).\n+\n+### Combining profiling data\n+\n+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.\n+\n+### Importing\/exporting data\n+\n+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.\n\\ No newline at end of file\ndiff --git a\/README.md b\/README.md\nnew file mode 100644\nindex 0000000000..c9082991f4\n--- \/dev\/null\n+++ b\/README.md\n@@ -0,0 +1,23 @@\n+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\/).\n+\n+# Installation\n+\n+Installation instructions are available online as well:\n+* [Chrome](https:\/\/react-devtools-experimental-chrome.now.sh\/)\n+* [Firefox](https:\/\/react-devtools-experimental-firefox.now.sh\/)\n+\n+Or you can build and install from source:\n+```sh\n+git clone git@github.com:bvaughn\/react-devtools-experimental.git\n+\n+cd react-devtools-experimental\n+\n+yarn install\n+\n+yarn build:extension:chrome # builds at \"shells\/browser\/chrome\/build\"\n+yarn build:extension:firefox # builds at \"shells\/browser\/firefox\/build\"\n+```\n+\n+# Support\n+\n+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.\n\\ No newline at end of file\ndiff --git a\/babel.config.js b\/babel.config.js\nnew file mode 100644\nindex 0000000000..6dd41082de\n--- \/dev\/null\n+++ b\/babel.config.js\n@@ -0,0 +1,46 @@\n+const chromeManifest = require('.\/shells\/browser\/chrome\/manifest.json');\n+const firefoxManifest = require('.\/shells\/browser\/firefox\/manifest.json');\n+\n+const minChromeVersion = parseInt(chromeManifest.minimum_chrome_version, 10);\n+const minFirefoxVersion = parseInt(\n+ firefoxManifest.applications.gecko.strict_min_version,\n+ 10\n+);\n+validateVersion(minChromeVersion);\n+validateVersion(minFirefoxVersion);\n+\n+function validateVersion(version) {\n+ if (version > 0 && version < 200) {\n+ return;\n+ }\n+ throw new Error('Suspicious browser version in manifest: ' + version);\n+}\n+\n+module.exports = api => {\n+ const isTest = api.env('test');\n+ const targets = {};\n+ if (isTest) {\n+ targets.node = 'current';\n+ } else {\n+ targets.chrome = minChromeVersion.toString();\n+ targets.firefox = minFirefoxVersion.toString();\n+\n+ \/\/ This targets RN\/Hermes.\n+ targets.IE = '11';\n+ }\n+ const plugins = [\n+ ['@babel\/plugin-transform-flow-strip-types'],\n+ ['@babel\/plugin-proposal-class-properties', { loose: false }],\n+ ];\n+ if (process.env.NODE_ENV !== 'production') {\n+ plugins.push(['@babel\/plugin-transform-react-jsx-source']);\n+ }\n+ return {\n+ plugins,\n+ presets: [\n+ ['@babel\/preset-env', { targets }],\n+ '@babel\/preset-react',\n+ '@babel\/preset-flow',\n+ ],\n+ };\n+};\ndiff --git a\/fixtures\/regression\/14.9.html b\/fixtures\/regression\/14.9.html\nnew file mode 100644\nindex 0000000000..efa28f49cd\n--- \/dev\/null\n+++ b\/fixtures\/regression\/14.9.html\n@@ -0,0 +1,38 @@\n+\n+\n+ \n+ \n+ React 14.9<\/title>\n+ <link rel=\"stylesheet\" href=\"styles.css\" \/>\n+\n+ <script type=\"text\/javascript\">\n+ \/\/ Enable DevTools to inspect React inside of an <iframe>\n+ \/\/ This must run before React is loaded\n+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+ <\/script>\n+\n+ <script src=\"https:\/\/unpkg.com\/react@0.14.9\/dist\/react.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-dom@0.14.9\/dist\/react-dom.js\"><\/script>\n+ \n+ \n+ <script src=\"https:\/\/unpkg.com\/babel-standalone@6\/babel.min.js\"><\/script>\n+ <\/head>\n+ <body>\n+ <div id=\"root\">\n+ 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.\n+ <br\/><br\/>\n+ Use the <code>server<\/code> script instead:\n+ <br\/><br\/>\n+ <code>node .\/fixtures\/regression\/server.js<\/code><br\/>\n+ <code>open <a href=\"http:\/\/localhost:3000\/fixtures\/regression\/14.9.html\">http:\/\/localhost:3000\/fixtures\/regression\/14.9.html<\/a><\/code>\n+ <\/div>\n+\n+ <script src=\"shared.js\" type=\"text\/babel\"><\/script>\n+\n+ \n+ <\/body>\n+<\/html>\n\\ No newline at end of file\ndiff --git a\/fixtures\/regression\/15.0.html b\/fixtures\/regression\/15.0.html\nnew file mode 100644\nindex 0000000000..464ea1f548\n--- \/dev\/null\n+++ b\/fixtures\/regression\/15.0.html\n@@ -0,0 +1,38 @@\n+<!DOCTYPE html>\n+<html>\n+ <head>\n+ <meta charset=\"UTF-8\" \/>\n+ <title>React 15.0<\/title>\n+ <link rel=\"stylesheet\" href=\"styles.css\" \/>\n+\n+ <script type=\"text\/javascript\">\n+ \/\/ Enable DevTools to inspect React inside of an <iframe>\n+ \/\/ This must run before React is loaded\n+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+ <\/script>\n+\n+ <script src=\"https:\/\/unpkg.com\/react@15.0\/dist\/react.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-dom@15.0\/dist\/react-dom.js\"><\/script>\n+ \n+ \n+ <script src=\"https:\/\/unpkg.com\/babel-standalone@6\/babel.min.js\"><\/script>\n+ <\/head>\n+ <body>\n+ <div id=\"root\">\n+ 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.\n+ <br\/><br\/>\n+ Use the <code>server<\/code> script instead:\n+ <br\/><br\/>\n+ <code>node .\/fixtures\/regression\/server.js<\/code><br\/>\n+ <code>open <a href=\"http:\/\/localhost:3000\/fixtures\/regression\/15.0.html\">http:\/\/localhost:3000\/fixtures\/regression\/15.0.html<\/a><\/code>\n+ <\/div>\n+\n+ <script src=\"shared.js\" type=\"text\/babel\"><\/script>\n+\n+ \n+ <\/body>\n+<\/html>\n\\ No newline at end of file\ndiff --git a\/fixtures\/regression\/15.1.html b\/fixtures\/regression\/15.1.html\nnew file mode 100644\nindex 0000000000..7e02e81bf9\n--- \/dev\/null\n+++ b\/fixtures\/regression\/15.1.html\n@@ -0,0 +1,38 @@\n+<!DOCTYPE html>\n+<html>\n+ <head>\n+ <meta charset=\"UTF-8\" \/>\n+ <title>React 15.1<\/title>\n+ <link rel=\"stylesheet\" href=\"styles.css\" \/>\n+\n+ <script type=\"text\/javascript\">\n+ \/\/ Enable DevTools to inspect React inside of an <iframe>\n+ \/\/ This must run before React is loaded\n+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+ <\/script>\n+\n+ <script src=\"https:\/\/unpkg.com\/react@15.1\/dist\/react.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-dom@15.1\/dist\/react-dom.js\"><\/script>\n+ \n+ \n+ <script src=\"https:\/\/unpkg.com\/babel-standalone@6\/babel.min.js\"><\/script>\n+ <\/head>\n+ <body>\n+ <div id=\"root\">\n+ 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.\n+ <br\/><br\/>\n+ Use the <code>server<\/code> script instead:\n+ <br\/><br\/>\n+ <code>node .\/fixtures\/regression\/server.js<\/code><br\/>\n+ <code>open <a href=\"http:\/\/localhost:3000\/fixtures\/regression\/15.1.html\">http:\/\/localhost:3000\/fixtures\/regression\/15.1.html<\/a><\/code>\n+ <\/div>\n+\n+ <script src=\"shared.js\" type=\"text\/babel\"><\/script>\n+\n+ \n+ <\/body>\n+<\/html>\n\\ No newline at end of file\ndiff --git a\/fixtures\/regression\/15.2.html b\/fixtures\/regression\/15.2.html\nnew file mode 100644\nindex 0000000000..ff1e6b8746\n--- \/dev\/null\n+++ b\/fixtures\/regression\/15.2.html\n@@ -0,0 +1,38 @@\n+<!DOCTYPE html>\n+<html>\n+ <head>\n+ <meta charset=\"UTF-8\" \/>\n+ <title>React 15.2<\/title>\n+ <link rel=\"stylesheet\" href=\"styles.css\" \/>\n+\n+ <script type=\"text\/javascript\">\n+ \/\/ Enable DevTools to inspect React inside of an <iframe>\n+ \/\/ This must run before React is loaded\n+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+ <\/script>\n+\n+ <script src=\"https:\/\/unpkg.com\/react@15.2\/dist\/react.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-dom@15.2\/dist\/react-dom.js\"><\/script>\n+ \n+ \n+ <script src=\"https:\/\/unpkg.com\/babel-standalone@6\/babel.min.js\"><\/script>\n+ <\/head>\n+ <body>\n+ <div id=\"root\">\n+ 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.\n+ <br\/><br\/>\n+ Use the <code>server<\/code> script instead:\n+ <br\/><br\/>\n+ <code>node .\/fixtures\/regression\/server.js<\/code><br\/>\n+ <code>open <a href=\"http:\/\/localhost:3000\/fixtures\/regression\/15.2.html\">http:\/\/localhost:3000\/fixtures\/regression\/15.2.html<\/a><\/code>\n+ <\/div>\n+\n+ <script src=\"shared.js\" type=\"text\/babel\"><\/script>\n+\n+ \n+ <\/body>\n+<\/html>\n\\ No newline at end of file\ndiff --git a\/fixtures\/regression\/15.3.html b\/fixtures\/regression\/15.3.html\nnew file mode 100644\nindex 0000000000..8d1795962e\n--- \/dev\/null\n+++ b\/fixtures\/regression\/15.3.html\n@@ -0,0 +1,38 @@\n+<!DOCTYPE html>\n+<html>\n+ <head>\n+ <meta charset=\"UTF-8\" \/>\n+ <title>React 15.3<\/title>\n+ <link rel=\"stylesheet\" href=\"styles.css\" \/>\n+\n+ <script type=\"text\/javascript\">\n+ \/\/ Enable DevTools to inspect React inside of an <iframe>\n+ \/\/ This must run before React is loaded\n+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+ <\/script>\n+\n+ <script src=\"https:\/\/unpkg.com\/react@15.3\/dist\/react.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-dom@15.3\/dist\/react-dom.js\"><\/script>\n+ \n+ \n+ <script src=\"https:\/\/unpkg.com\/babel-standalone@6\/babel.min.js\"><\/script>\n+ <\/head>\n+ <body>\n+ <div id=\"root\">\n+ 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.\n+ <br\/><br\/>\n+ Use the <code>server<\/code> script instead:\n+ <br\/><br\/>\n+ <code>node .\/fixtures\/regression\/server.js<\/code><br\/>\n+ <code>open <a href=\"http:\/\/localhost:3000\/fixtures\/regression\/15.3.html\">http:\/\/localhost:3000\/fixtures\/regression\/15.3.html<\/a><\/code>\n+ <\/div>\n+\n+ <script src=\"shared.js\" type=\"text\/babel\"><\/script>\n+\n+ \n+ <\/body>\n+<\/html>\n\\ No newline at end of file\ndiff --git a\/fixtures\/regression\/15.4.html b\/fixtures\/regression\/15.4.html\nnew file mode 100644\nindex 0000000000..ee1bfc0723\n--- \/dev\/null\n+++ b\/fixtures\/regression\/15.4.html\n@@ -0,0 +1,38 @@\n+<!DOCTYPE html>\n+<html>\n+ <head>\n+ <meta charset=\"UTF-8\" \/>\n+ <title>React 15.4<\/title>\n+ <link rel=\"stylesheet\" href=\"styles.css\" \/>\n+\n+ <script type=\"text\/javascript\">\n+ \/\/ Enable DevTools to inspect React inside of an <iframe>\n+ \/\/ This must run before React is loaded\n+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+ <\/script>\n+\n+ <script src=\"https:\/\/unpkg.com\/react@15.4\/dist\/react.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-dom@15.4\/dist\/react-dom.js\"><\/script>\n+ \n+ \n+ <script src=\"https:\/\/unpkg.com\/babel-standalone@6\/babel.min.js\"><\/script>\n+ <\/head>\n+ <body>\n+ <div id=\"root\">\n+ 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.\n+ <br\/><br\/>\n+ Use the <code>server<\/code> script instead:\n+ <br\/><br\/>\n+ <code>node .\/fixtures\/regression\/server.js<\/code><br\/>\n+ <code>open <a href=\"http:\/\/localhost:3000\/fixtures\/regression\/15.4.html\">http:\/\/localhost:3000\/fixtures\/regression\/15.4.html<\/a><\/code>\n+ <\/div>\n+\n+ <script src=\"shared.js\" type=\"text\/babel\"><\/script>\n+\n+ \n+ <\/body>\n+<\/html>\n\\ No newline at end of file\ndiff --git a\/fixtures\/regression\/15.5.html b\/fixtures\/regression\/15.5.html\nnew file mode 100644\nindex 0000000000..4097bdf708\n--- \/dev\/null\n+++ b\/fixtures\/regression\/15.5.html\n@@ -0,0 +1,38 @@\n+<!DOCTYPE html>\n+<html>\n+ <head>\n+ <meta charset=\"UTF-8\" \/>\n+ <title>React 15.5<\/title>\n+ <link rel=\"stylesheet\" href=\"styles.css\" \/>\n+\n+ <script type=\"text\/javascript\">\n+ \/\/ Enable DevTools to inspect React inside of an <iframe>\n+ \/\/ This must run before React is loaded\n+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+ <\/script>\n+\n+ <script src=\"https:\/\/unpkg.com\/react@15.5\/dist\/react.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-dom@15.5\/dist\/react-dom.js\"><\/script>\n+ \n+ \n+ <script src=\"https:\/\/unpkg.com\/babel-standalone@6\/babel.min.js\"><\/script>\n+ <\/head>\n+ <body>\n+ <div id=\"root\">\n+ 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.\n+ <br\/><br\/>\n+ Use the <code>server<\/code> script instead:\n+ <br\/><br\/>\n+ <code>node .\/fixtures\/regression\/server.js<\/code><br\/>\n+ <code>open <a href=\"http:\/\/localhost:3000\/fixtures\/regression\/15.5.html\">http:\/\/localhost:3000\/fixtures\/regression\/15.5.html<\/a><\/code>\n+ <\/div>\n+\n+ <script src=\"shared.js\" type=\"text\/babel\"><\/script>\n+\n+ \n+ <\/body>\n+<\/html>\n\\ No newline at end of file\ndiff --git a\/fixtures\/regression\/15.6.html b\/fixtures\/regression\/15.6.html\nnew file mode 100644\nindex 0000000000..ab10ba8716\n--- \/dev\/null\n+++ b\/fixtures\/regression\/15.6.html\n@@ -0,0 +1,38 @@\n+<!DOCTYPE html>\n+<html>\n+ <head>\n+ <meta charset=\"UTF-8\" \/>\n+ <title>React 15.6<\/title>\n+ <link rel=\"stylesheet\" href=\"styles.css\" \/>\n+\n+ <script type=\"text\/javascript\">\n+ \/\/ Enable DevTools to inspect React inside of an <iframe>\n+ \/\/ This must run before React is loaded\n+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+ <\/script>\n+\n+ <script src=\"https:\/\/unpkg.com\/react@15.6\/dist\/react.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-dom@15.6\/dist\/react-dom.js\"><\/script>\n+ \n+ \n+ <script src=\"https:\/\/unpkg.com\/babel-standalone@6\/babel.min.js\"><\/script>\n+ <\/head>\n+ <body>\n+ <div id=\"root\">\n+ 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.\n+ <br\/><br\/>\n+ Use the <code>server<\/code> script instead:\n+ <br\/><br\/>\n+ <code>node .\/fixtures\/regression\/server.js<\/code><br\/>\n+ <code>open <a href=\"http:\/\/localhost:3000\/fixtures\/regression\/15.6.html\">http:\/\/localhost:3000\/fixtures\/regression\/15.6.html<\/a><\/code>\n+ <\/div>\n+\n+ <script src=\"shared.js\" type=\"text\/babel\"><\/script>\n+\n+ \n+ <\/body>\n+<\/html>\n\\ No newline at end of file\ndiff --git a\/fixtures\/regression\/16.0.html b\/fixtures\/regression\/16.0.html\nnew file mode 100644\nindex 0000000000..7c55d75114\n--- \/dev\/null\n+++ b\/fixtures\/regression\/16.0.html\n@@ -0,0 +1,38 @@\n+<!DOCTYPE html>\n+<html>\n+ <head>\n+ <meta charset=\"UTF-8\" \/>\n+ <title>React 16.0<\/title>\n+ <link rel=\"stylesheet\" href=\"styles.css\" \/>\n+\n+ <script type=\"text\/javascript\">\n+ \/\/ Enable DevTools to inspect React inside of an <iframe>\n+ \/\/ This must run before React is loaded\n+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+ <\/script>\n+\n+ <script src=\"https:\/\/unpkg.com\/react@16.0\/umd\/react.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-dom@16.0\/umd\/react-dom.development.js\"><\/script>\n+ \n+ \n+ <script src=\"https:\/\/unpkg.com\/babel-standalone@6\/babel.min.js\"><\/script>\n+ <\/head>\n+ <body>\n+ <div id=\"root\">\n+ 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.\n+ <br\/><br\/>\n+ Use the <code>server<\/code> script instead:\n+ <br\/><br\/>\n+ <code>node .\/fixtures\/regression\/server.js<\/code><br\/>\n+ <code>open <a href=\"http:\/\/localhost:3000\/fixtures\/regression\/16.0.html\">http:\/\/localhost:3000\/fixtures\/regression\/16.0.html<\/a><\/code>\n+ <\/div>\n+\n+ <script src=\"shared.js\" type=\"text\/babel\"><\/script>\n+\n+ \n+ <\/body>\n+<\/html>\n\\ No newline at end of file\ndiff --git a\/fixtures\/regression\/16.1.html b\/fixtures\/regression\/16.1.html\nnew file mode 100644\nindex 0000000000..d93addf46e\n--- \/dev\/null\n+++ b\/fixtures\/regression\/16.1.html\n@@ -0,0 +1,38 @@\n+<!DOCTYPE html>\n+<html>\n+ <head>\n+ <meta charset=\"UTF-8\" \/>\n+ <title>React 16.1<\/title>\n+ <link rel=\"stylesheet\" href=\"styles.css\" \/>\n+\n+ <script type=\"text\/javascript\">\n+ \/\/ Enable DevTools to inspect React inside of an <iframe>\n+ \/\/ This must run before React is loaded\n+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+ <\/script>\n+\n+ <script src=\"https:\/\/unpkg.com\/react@16.1\/umd\/react.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-dom@16.1\/umd\/react-dom.development.js\"><\/script>\n+ \n+ \n+ <script src=\"https:\/\/unpkg.com\/babel-standalone@6\/babel.min.js\"><\/script>\n+ <\/head>\n+ <body>\n+ <div id=\"root\">\n+ 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.\n+ <br\/><br\/>\n+ Use the <code>server<\/code> script instead:\n+ <br\/><br\/>\n+ <code>node .\/fixtures\/regression\/server.js<\/code><br\/>\n+ <code>open <a href=\"http:\/\/localhost:3000\/fixtures\/regression\/16.1.html\">http:\/\/localhost:3000\/fixtures\/regression\/16.1.html<\/a><\/code>\n+ <\/div>\n+\n+ <script src=\"shared.js\" type=\"text\/babel\"><\/script>\n+\n+ \n+ <\/body>\n+<\/html>\n\\ No newline at end of file\ndiff --git a\/fixtures\/regression\/16.2.html b\/fixtures\/regression\/16.2.html\nnew file mode 100644\nindex 0000000000..10d8e150ed\n--- \/dev\/null\n+++ b\/fixtures\/regression\/16.2.html\n@@ -0,0 +1,38 @@\n+<!DOCTYPE html>\n+<html>\n+ <head>\n+ <meta charset=\"UTF-8\" \/>\n+ <title>React 16.2<\/title>\n+ <link rel=\"stylesheet\" href=\"styles.css\" \/>\n+\n+ <script type=\"text\/javascript\">\n+ \/\/ Enable DevTools to inspect React inside of an <iframe>\n+ \/\/ This must run before React is loaded\n+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+ <\/script>\n+\n+ <script src=\"https:\/\/unpkg.com\/react@16.2\/umd\/react.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-dom@16.2\/umd\/react-dom.development.js\"><\/script>\n+ \n+ \n+ <script src=\"https:\/\/unpkg.com\/babel-standalone@6\/babel.min.js\"><\/script>\n+ <\/head>\n+ <body>\n+ <div id=\"root\">\n+ 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.\n+ <br\/><br\/>\n+ Use the <code>server<\/code> script instead:\n+ <br\/><br\/>\n+ <code>node .\/fixtures\/regression\/server.js<\/code><br\/>\n+ <code>open <a href=\"http:\/\/localhost:3000\/fixtures\/regression\/16.2.html\">http:\/\/localhost:3000\/fixtures\/regression\/16.2.html<\/a><\/code>\n+ <\/div>\n+\n+ <script src=\"shared.js\" type=\"text\/babel\"><\/script>\n+\n+ \n+ <\/body>\n+<\/html>\n\\ No newline at end of file\ndiff --git a\/fixtures\/regression\/16.3.html b\/fixtures\/regression\/16.3.html\nnew file mode 100644\nindex 0000000000..2e42e2813a\n--- \/dev\/null\n+++ b\/fixtures\/regression\/16.3.html\n@@ -0,0 +1,38 @@\n+<!DOCTYPE html>\n+<html>\n+ <head>\n+ <meta charset=\"UTF-8\" \/>\n+ <title>React 16.3<\/title>\n+ <link rel=\"stylesheet\" href=\"styles.css\" \/>\n+\n+ <script type=\"text\/javascript\">\n+ \/\/ Enable DevTools to inspect React inside of an <iframe>\n+ \/\/ This must run before React is loaded\n+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+ <\/script>\n+\n+ <script src=\"https:\/\/unpkg.com\/react@16.3\/umd\/react.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-dom@16.3\/umd\/react-dom.development.js\"><\/script>\n+ \n+ \n+ <script src=\"https:\/\/unpkg.com\/babel-standalone@6\/babel.min.js\"><\/script>\n+ <\/head>\n+ <body>\n+ <div id=\"root\">\n+ 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.\n+ <br\/><br\/>\n+ Use the <code>server<\/code> script instead:\n+ <br\/><br\/>\n+ <code>node .\/fixtures\/regression\/server.js<\/code><br\/>\n+ <code>open <a href=\"http:\/\/localhost:3000\/fixtures\/regression\/16.3.html\">http:\/\/localhost:3000\/fixtures\/regression\/16.3.html<\/a><\/code>\n+ <\/div>\n+\n+ <script src=\"shared.js\" type=\"text\/babel\"><\/script>\n+\n+ \n+ <\/body>\n+<\/html>\n\\ No newline at end of file\ndiff --git a\/fixtures\/regression\/16.4.html b\/fixtures\/regression\/16.4.html\nnew file mode 100644\nindex 0000000000..f59f4e9e6f\n--- \/dev\/null\n+++ b\/fixtures\/regression\/16.4.html\n@@ -0,0 +1,38 @@\n+<!DOCTYPE html>\n+<html>\n+ <head>\n+ <meta charset=\"UTF-8\" \/>\n+ <title>React 16.4<\/title>\n+ <link rel=\"stylesheet\" href=\"styles.css\" \/>\n+\n+ <script type=\"text\/javascript\">\n+ \/\/ Enable DevTools to inspect React inside of an <iframe>\n+ \/\/ This must run before React is loaded\n+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+ <\/script>\n+\n+ <script src=\"https:\/\/unpkg.com\/react@16.4\/umd\/react.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-dom@16.4\/umd\/react-dom.development.js\"><\/script>\n+ \n+ \n+ <script src=\"https:\/\/unpkg.com\/babel-standalone@6\/babel.min.js\"><\/script>\n+ <\/head>\n+ <body>\n+ <div id=\"root\">\n+ 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.\n+ <br\/><br\/>\n+ Use the <code>server<\/code> script instead:\n+ <br\/><br\/>\n+ <code>node .\/fixtures\/regression\/server.js<\/code><br\/>\n+ <code>open <a href=\"http:\/\/localhost:3000\/fixtures\/regression\/16.4.html\">http:\/\/localhost:3000\/fixtures\/regression\/16.4.html<\/a><\/code>\n+ <\/div>\n+\n+ <script src=\"shared.js\" type=\"text\/babel\"><\/script>\n+\n+ \n+ <\/body>\n+<\/html>\n\\ No newline at end of file\ndiff --git a\/fixtures\/regression\/16.5.html b\/fixtures\/regression\/16.5.html\nnew file mode 100644\nindex 0000000000..455e06f219\n--- \/dev\/null\n+++ b\/fixtures\/regression\/16.5.html\n@@ -0,0 +1,40 @@\n+<!DOCTYPE html>\n+<html>\n+ <head>\n+ <meta charset=\"UTF-8\" \/>\n+ <title>React 16.5<\/title>\n+ <link rel=\"stylesheet\" href=\"styles.css\" \/>\n+\n+ <script type=\"text\/javascript\">\n+ \/\/ Enable DevTools to inspect React inside of an <iframe>\n+ \/\/ This must run before React is loaded\n+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+ <\/script>\n+\n+ <script src=\"https:\/\/unpkg.com\/schedule@0.5.0\/umd\/schedule.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/schedule@0.5.0\/umd\/schedule-tracing.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react@16.5\/umd\/react.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-dom@16.5\/umd\/react-dom.development.js\"><\/script>\n+ \n+ \n+ <script src=\"https:\/\/unpkg.com\/babel-standalone@6\/babel.min.js\"><\/script>\n+ <\/head>\n+ <body>\n+ <div id=\"root\">\n+ 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.\n+ <br\/><br\/>\n+ Use the <code>server<\/code> script instead:\n+ <br\/><br\/>\n+ <code>node .\/fixtures\/regression\/server.js<\/code><br\/>\n+ <code>open <a href=\"http:\/\/localhost:3000\/fixtures\/regression\/16.5.html\">http:\/\/localhost:3000\/fixtures\/regression\/16.5.html<\/a><\/code>\n+ <\/div>\n+\n+ <script src=\"shared.js\" type=\"text\/babel\"><\/script>\n+\n+ \n+ <\/body>\n+<\/html>\n\\ No newline at end of file\ndiff --git a\/fixtures\/regression\/16.6.html b\/fixtures\/regression\/16.6.html\nnew file mode 100644\nindex 0000000000..1f61c47f85\n--- \/dev\/null\n+++ b\/fixtures\/regression\/16.6.html\n@@ -0,0 +1,41 @@\n+<!DOCTYPE html>\n+<html>\n+ <head>\n+ <meta charset=\"UTF-8\" \/>\n+ <title>React 16.6<\/title>\n+ <link rel=\"stylesheet\" href=\"styles.css\" \/>\n+\n+ <script type=\"text\/javascript\">\n+ \/\/ Enable DevTools to inspect React inside of an <iframe>\n+ \/\/ This must run before React is loaded\n+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+ <\/script>\n+\n+ <script src=\"https:\/\/unpkg.com\/scheduler@0.10.0\/umd\/scheduler.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/scheduler@0.10.0\/umd\/scheduler-tracing.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react@16.6\/umd\/react.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-dom@16.6\/umd\/react-dom.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-cache@2.0.0-alpha.1\/umd\/react-cache.development.js\"><\/script>\n+ \n+ \n+ <script src=\"https:\/\/unpkg.com\/babel-standalone@6\/babel.min.js\"><\/script>\n+ <\/head>\n+ <body>\n+ <div id=\"root\">\n+ 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.\n+ <br\/><br\/>\n+ Use the <code>server<\/code> script instead:\n+ <br\/><br\/>\n+ <code>node .\/fixtures\/regression\/server.js<\/code><br\/>\n+ <code>open <a href=\"http:\/\/localhost:3000\/fixtures\/regression\/16.6.html\">http:\/\/localhost:3000\/fixtures\/regression\/16.6.html<\/a><\/code>\n+ <\/div>\n+\n+ <script src=\"shared.js\" type=\"text\/babel\"><\/script>\n+\n+ \n+ <\/body>\n+<\/html>\n\\ No newline at end of file\ndiff --git a\/fixtures\/regression\/16.7.html b\/fixtures\/regression\/16.7.html\nnew file mode 100644\nindex 0000000000..d839d7e030\n--- \/dev\/null\n+++ b\/fixtures\/regression\/16.7.html\n@@ -0,0 +1,41 @@\n+<!DOCTYPE html>\n+<html>\n+ <head>\n+ <meta charset=\"UTF-8\" \/>\n+ <title>React 16.7<\/title>\n+ <link rel=\"stylesheet\" href=\"styles.css\" \/>\n+\n+ <script type=\"text\/javascript\">\n+ \/\/ Enable DevTools to inspect React inside of an <iframe>\n+ \/\/ This must run before React is loaded\n+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+ <\/script>\n+\n+ <script src=\"https:\/\/unpkg.com\/scheduler@0.12.0\/umd\/scheduler.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/scheduler@0.12.0\/umd\/scheduler-tracing.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react@16.7\/umd\/react.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-dom@16.7\/umd\/react-dom.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-cache@2.0.0-alpha.1\/umd\/react-cache.development.js\"><\/script>\n+ \n+ \n+ <script src=\"https:\/\/unpkg.com\/babel-standalone@6\/babel.min.js\"><\/script>\n+ <\/head>\n+ <body>\n+ <div id=\"root\">\n+ 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.\n+ <br\/><br\/>\n+ Use the <code>server<\/code> script instead:\n+ <br\/><br\/>\n+ <code>node .\/fixtures\/regression\/server.js<\/code><br\/>\n+ <code>open <a href=\"http:\/\/localhost:3000\/fixtures\/regression\/16.7.html\">http:\/\/localhost:3000\/fixtures\/regression\/16.7.html<\/a><\/code>\n+ <\/div>\n+\n+ <script src=\"shared.js\" type=\"text\/babel\"><\/script>\n+\n+ \n+ <\/body>\n+<\/html>\n\\ No newline at end of file\ndiff --git a\/fixtures\/regression\/canary.html b\/fixtures\/regression\/canary.html\nnew file mode 100644\nindex 0000000000..ab59d7029e\n--- \/dev\/null\n+++ b\/fixtures\/regression\/canary.html\n@@ -0,0 +1,41 @@\n+<!DOCTYPE html>\n+<html>\n+ <head>\n+ <meta charset=\"UTF-8\" \/>\n+ <title>React canary<\/title>\n+ <link rel=\"stylesheet\" href=\"styles.css\" \/>\n+\n+ <script type=\"text\/javascript\">\n+ \/\/ Enable DevTools to inspect React inside of an <iframe>\n+ \/\/ This must run before React is loaded\n+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+ <\/script>\n+\n+ <script src=\"https:\/\/unpkg.com\/scheduler@canary\/umd\/scheduler.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/scheduler@canary\/umd\/scheduler-tracing.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react@canary\/umd\/react.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-dom@canary\/umd\/react-dom.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-cache@next\/umd\/react-cache.development.js\"><\/script>\n+ \n+ \n+ <script src=\"https:\/\/unpkg.com\/babel-standalone@6\/babel.min.js\"><\/script>\n+ <\/head>\n+ <body>\n+ <div id=\"root\">\n+ 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.\n+ <br\/><br\/>\n+ Use the <code>server<\/code> script instead:\n+ <br\/><br\/>\n+ <code>node .\/fixtures\/regression\/server.js<\/code><br\/>\n+ <code>open <a href=\"http:\/\/localhost:3000\/fixtures\/regression\/canary.html\">http:\/\/localhost:3000\/fixtures\/regression\/canary.html<\/a><\/code>\n+ <\/div>\n+\n+ <script src=\"shared.js\" type=\"text\/babel\"><\/script>\n+\n+ \n+ <\/body>\n+<\/html>\n\\ No newline at end of file\ndiff --git a\/fixtures\/regression\/index.html b\/fixtures\/regression\/index.html\nnew file mode 100644\nindex 0000000000..125a8e8baf\n--- \/dev\/null\n+++ b\/fixtures\/regression\/index.html\n@@ -0,0 +1,28 @@\n+<!DOCTYPE html>\n+<html>\n+ <head>\n+ <meta charset=\"UTF-8\" \/>\n+ <title>React DevTools regression test<\/title>\n+ <link rel=\"stylesheet\" href=\"styles.css\" \/>\n+ <\/head>\n+ <body>\n+ <iframe src=\"canary.html\"><\/iframe>\n+ <iframe src=\"next.html\"><\/iframe>\n+ <iframe src=\"16.7.html\"><\/iframe>\n+ <iframe src=\"16.6.html\"><\/iframe>\n+ <iframe src=\"16.5.html\"><\/iframe>\n+ <iframe src=\"16.4.html\"><\/iframe>\n+ <iframe src=\"16.3.html\"><\/iframe>\n+ <iframe src=\"16.2.html\"><\/iframe>\n+ <iframe src=\"16.1.html\"><\/iframe>\n+ <iframe src=\"16.0.html\"><\/iframe>\n+ <iframe src=\"15.6.html\"><\/iframe>\n+ <iframe src=\"15.5.html\"><\/iframe>\n+ <iframe src=\"15.4.html\"><\/iframe>\n+ <iframe src=\"15.3.html\"><\/iframe>\n+ <iframe src=\"15.2.html\"><\/iframe>\n+ <iframe src=\"15.1.html\"><\/iframe>\n+ <iframe src=\"15.0.html\"><\/iframe>\n+ <iframe src=\"14.9.html\"><\/iframe>\n+ <\/body>\n+<\/html>\n\\ No newline at end of file\ndiff --git a\/fixtures\/regression\/next.html b\/fixtures\/regression\/next.html\nnew file mode 100644\nindex 0000000000..77bb9bbed2\n--- \/dev\/null\n+++ b\/fixtures\/regression\/next.html\n@@ -0,0 +1,41 @@\n+<!DOCTYPE html>\n+<html>\n+ <head>\n+ <meta charset=\"UTF-8\" \/>\n+ <title>React next<\/title>\n+ <link rel=\"stylesheet\" href=\"styles.css\" \/>\n+\n+ <script type=\"text\/javascript\">\n+ \/\/ Enable DevTools to inspect React inside of an <iframe>\n+ \/\/ This must run before React is loaded\n+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+ <\/script>\n+\n+ <script src=\"https:\/\/unpkg.com\/scheduler@next\/umd\/scheduler.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/scheduler@next\/umd\/scheduler-tracing.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react@next\/umd\/react.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-dom@next\/umd\/react-dom.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-cache@next\/umd\/react-cache.development.js\"><\/script>\n+ \n+ \n+ <script src=\"https:\/\/unpkg.com\/babel-standalone@6\/babel.min.js\"><\/script>\n+ <\/head>\n+ <body>\n+ <div id=\"root\">\n+ 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.\n+ <br\/><br\/>\n+ Use the <code>server<\/code> script instead:\n+ <br\/><br\/>\n+ <code>node .\/fixtures\/regression\/server.js<\/code><br\/>\n+ <code>open <a href=\"http:\/\/localhost:3000\/fixtures\/regression\/next.html\">http:\/\/localhost:3000\/fixtures\/regression\/next.html<\/a><\/code>\n+ <\/div>\n+\n+ <script src=\"shared.js\" type=\"text\/babel\"><\/script>\n+\n+ \n+ <\/body>\n+<\/html>\n\\ No newline at end of file\ndiff --git a\/fixtures\/regression\/server.js b\/fixtures\/regression\/server.js\nnew file mode 100755\nindex 0000000000..f7e03f075d\n--- \/dev\/null\n+++ b\/fixtures\/regression\/server.js\n@@ -0,0 +1,16 @@\n+#!\/usr\/bin\/env node\n+\n+const finalhandler = require('finalhandler');\n+const http = require('http');\n+const serveStatic = require('serve-static');\n+\n+\/\/ Serve fixtures folder\n+const serve = serveStatic(__dirname, { index: 'index.html' });\n+\n+\/\/ Create server\n+const server = http.createServer(function onRequest(req, res) {\n+ serve(req, res, finalhandler(req, res));\n+});\n+\n+\/\/ Listen\n+server.listen(3000);\ndiff --git a\/fixtures\/regression\/shared.js b\/fixtures\/regression\/shared.js\nnew file mode 100644\nindex 0000000000..2afd063b6b\n--- \/dev\/null\n+++ b\/fixtures\/regression\/shared.js\n@@ -0,0 +1,330 @@\n+\/* eslint-disable no-fallthrough, react\/react-in-jsx-scope, react\/jsx-no-undef *\/\n+\/* global React ReactCache ReactDOM SchedulerTracing ScheduleTracing *\/\n+\n+const apps = [];\n+\n+const pieces = React.version.split('.');\n+const major =\n+ pieces[0] === '0' ? parseInt(pieces[1], 10) : parseInt(pieces[0], 10);\n+const minor =\n+ pieces[0] === '0' ? parseInt(pieces[2], 10) : parseInt(pieces[1], 10);\n+\n+\/\/ Convenience wrapper to organize API features in DevTools.\n+function Feature({ children, label, version }) {\n+ return (\n+ <div className=\"Feature\">\n+ <div className=\"FeatureHeader\">\n+ <code className=\"FeatureCode\">{label}<\/code>\n+ <small>{version}<\/small>\n+ <\/div>\n+ {children}\n+ <\/div>\n+ );\n+}\n+\n+\/\/ Simplify interaction tracing for tests below.\n+let trace = null;\n+if (typeof SchedulerTracing !== 'undefined') {\n+ trace = SchedulerTracing.unstable_trace;\n+} else if (typeof ScheduleTracing !== 'undefined') {\n+ trace = ScheduleTracing.unstable_trace;\n+} else {\n+ trace = (_, __, callback) => callback();\n+}\n+\n+\/\/ https:\/\/github.com\/facebook\/react\/blob\/master\/CHANGELOG.md\n+switch (major) {\n+ case 16:\n+ switch (minor) {\n+ case 7:\n+ if (typeof React.useState === 'function') {\n+ \/\/ Hooks\n+ function Hooks() {\n+ const [count, setCount] = React.useState(0);\n+ const incrementCount = React.useCallback(\n+ () => setCount(count + 1),\n+ [count]\n+ );\n+ return (\n+ <div>\n+ count: {count}{' '}\n+ <button onClick={incrementCount}>increment<\/button>\n+ <\/div>\n+ );\n+ }\n+ apps.push(\n+ <Feature key=\"Hooks\" label=\"Hooks\" version=\"16.7+\">\n+ <Hooks \/>\n+ <\/Feature>\n+ );\n+ }\n+ case 6:\n+ \/\/ memo\n+ function LabelComponent({ label }) {\n+ return <label>{label}<\/label>;\n+ }\n+ const AnonymousMemoized = React.memo(({ label }) => (\n+ <label>{label}<\/label>\n+ ));\n+ const Memoized = React.memo(LabelComponent);\n+ const CustomMemoized = React.memo(LabelComponent);\n+ CustomMemoized.displayName = 'MemoizedLabelFunction';\n+ apps.push(\n+ <Feature key=\"memo\" label=\"memo\" version=\"16.6+\">\n+ <AnonymousMemoized label=\"AnonymousMemoized\" \/>\n+ <Memoized label=\"Memoized\" \/>\n+ <CustomMemoized label=\"CustomMemoized\" \/>\n+ <\/Feature>\n+ );\n+\n+ \/\/ Suspense\n+ const loadResource = ([text, ms]) => {\n+ return new Promise((resolve, reject) => {\n+ setTimeout(() => {\n+ resolve(text);\n+ }, ms);\n+ });\n+ };\n+ const getResourceKey = ([text, ms]) => text;\n+ const Resource = ReactCache.unstable_createResource(\n+ loadResource,\n+ getResourceKey\n+ );\n+ class Suspending extends React.Component {\n+ state = { useSuspense: false };\n+ useSuspense = () => this.setState({ useSuspense: true });\n+ render() {\n+ if (this.state.useSuspense) {\n+ const text = Resource.read(['loaded', 2000]);\n+ return text;\n+ } else {\n+ return <button onClick={this.useSuspense}>load data<\/button>;\n+ }\n+ }\n+ }\n+ apps.push(\n+ <Feature key=\"Suspense\" label=\"Suspense\" version=\"16.6+\">\n+ <React.Suspense fallback={<div>loading...<\/div>}>\n+ <Suspending \/>\n+ <\/React.Suspense>\n+ <\/Feature>\n+ );\n+\n+ \/\/ lazy\n+ const LazyWithDefaultProps = React.lazy(\n+ () =>\n+ new Promise(resolve => {\n+ function FooWithDefaultProps(props) {\n+ return (\n+ <h1>\n+ {props.greeting}, {props.name}\n+ <\/h1>\n+ );\n+ }\n+ FooWithDefaultProps.defaultProps = {\n+ name: 'World',\n+ greeting: 'Bonjour',\n+ };\n+ resolve({\n+ default: FooWithDefaultProps,\n+ });\n+ })\n+ );\n+ apps.push(\n+ <Feature key=\"lazy\" label=\"lazy\" version=\"16.6+\">\n+ <React.Suspense fallback={<div>loading...<\/div>}>\n+ <LazyWithDefaultProps greeting=\"Hello\" \/>\n+ <\/React.Suspense>\n+ <\/Feature>\n+ );\n+ case 5:\n+ case 4:\n+ \/\/ unstable_Profiler\n+ class ProfilerChild extends React.Component {\n+ state = { count: 0 };\n+ incrementCount = () =>\n+ this.setState(prevState => ({ count: prevState.count + 1 }));\n+ render() {\n+ return (\n+ <div>\n+ count: {this.state.count}{' '}\n+ <button onClick={this.incrementCount}>increment<\/button>\n+ <\/div>\n+ );\n+ }\n+ }\n+ const onRender = (...args) => {};\n+ const Profiler = React.unstable_Profiler || React.Profiler;\n+ apps.push(\n+ <Feature\n+ key=\"unstable_Profiler\"\n+ label=\"unstable_Profiler\"\n+ version=\"16.4+\"\n+ >\n+ <Profiler id=\"count\" onRender={onRender}>\n+ <div>\n+ <ProfilerChild \/>\n+ <\/div>\n+ <\/Profiler>\n+ <\/Feature>\n+ );\n+ case 3:\n+ \/\/ createContext()\n+ const LocaleContext = React.createContext();\n+ LocaleContext.displayName = 'LocaleContext';\n+ const ThemeContext = React.createContext();\n+ apps.push(\n+ <Feature key=\"createContext\" label=\"createContext\" version=\"16.3+\">\n+ <ThemeContext.Provider value=\"blue\">\n+ <ThemeContext.Consumer>\n+ {theme => <div>theme: {theme}<\/div>}\n+ <\/ThemeContext.Consumer>\n+ <\/ThemeContext.Provider>\n+ <LocaleContext.Provider value=\"en-US\">\n+ <LocaleContext.Consumer>\n+ {locale => <div>locale: {locale}<\/div>}\n+ <\/LocaleContext.Consumer>\n+ <\/LocaleContext.Provider>\n+ <\/Feature>\n+ );\n+\n+ \/\/ forwardRef()\n+ const AnonymousFunction = React.forwardRef((props, ref) => (\n+ <div ref={ref}>{props.children}<\/div>\n+ ));\n+ const NamedFunction = React.forwardRef(function named(props, ref) {\n+ return <div ref={ref}>{props.children}<\/div>;\n+ });\n+ const CustomName = React.forwardRef((props, ref) => (\n+ <div ref={ref}>{props.children}<\/div>\n+ ));\n+ CustomName.displayName = 'CustomNameForwardRef';\n+ apps.push(\n+ <Feature key=\"forwardRef\" label=\"forwardRef\" version=\"16.3+\">\n+ <AnonymousFunction>AnonymousFunction<\/AnonymousFunction>\n+ <NamedFunction>NamedFunction<\/NamedFunction>\n+ <CustomName>CustomName<\/CustomName>\n+ <\/Feature>\n+ );\n+\n+ \/\/ StrictMode\n+ class StrictModeChild extends React.Component {\n+ render() {\n+ return 'StrictModeChild';\n+ }\n+ }\n+ apps.push(\n+ <Feature key=\"StrictMode\" label=\"StrictMode\" version=\"16.3+\">\n+ <React.StrictMode>\n+ <StrictModeChild \/>\n+ <\/React.StrictMode>\n+ <\/Feature>\n+ );\n+\n+ \/\/ unstable_AsyncMode (later renamed to unstable_ConcurrentMode, then ConcurrentMode)\n+ const ConcurrentMode =\n+ React.ConcurrentMode ||\n+ React.unstable_ConcurrentMode ||\n+ React.unstable_AsyncMode;\n+ apps.push(\n+ <Feature\n+ key=\"AsyncMode\/ConcurrentMode\"\n+ label=\"AsyncMode\/ConcurrentMode\"\n+ version=\"16.3+\"\n+ >\n+ <ConcurrentMode>\n+ <div>\n+ unstable_AsyncMode was added in 16.3, renamed to\n+ unstable_ConcurrentMode in 16.5, and then renamed to\n+ ConcurrentMode in 16.7\n+ <\/div>\n+ <\/ConcurrentMode>\n+ <\/Feature>\n+ );\n+ case 2:\n+ \/\/ Fragment\n+ apps.push(\n+ <Feature key=\"Fragment\" label=\"Fragment\" version=\"16.4+\">\n+ <React.Fragment>\n+ <div>one<\/div>\n+ <div>two<\/div>\n+ <\/React.Fragment>\n+ <\/Feature>\n+ );\n+ case 1:\n+ case 0:\n+ default:\n+ break;\n+ }\n+ break;\n+ case 15:\n+ break;\n+ case 14:\n+ break;\n+ default:\n+ break;\n+}\n+\n+function Even() {\n+ return <small>(even)<\/small>;\n+}\n+\n+\/\/ Simple stateful app shared by all React versions\n+class SimpleApp extends React.Component {\n+ state = { count: 0 };\n+ incrementCount = () => {\n+ const updaterFn = prevState => ({ count: prevState.count + 1 });\n+ trace('Updating count', performance.now(), () => this.setState(updaterFn));\n+ };\n+ render() {\n+ const { count } = this.state;\n+ return (\n+ <div>\n+ {count % 2 === 0 ? (\n+ <span>\n+ count: {count} <Even \/>\n+ <\/span>\n+ ) : (\n+ <span>count: {count}<\/span>\n+ )}{' '}\n+ <button onClick={this.incrementCount}>increment<\/button>\n+ <\/div>\n+ );\n+ }\n+}\n+apps.push(\n+ <Feature key=\"Simple stateful app\" label=\"Simple stateful app\" version=\"any\">\n+ <SimpleApp \/>\n+ <\/Feature>\n+);\n+\n+\/\/ This component, with the version prop, helps organize DevTools at a glance.\n+function TopLevelWrapperForDevTools({ version }) {\n+ let header = <h1>React {version}<\/h1>;\n+ if (version.includes('canary')) {\n+ const commitSha = version.match(\/.+canary-(.+)\/)[1];\n+ header = (\n+ <h1>\n+ React canary{' '}\n+ <a href={`https:\/\/github.com\/facebook\/react\/commit\/${commitSha}`}>\n+ {commitSha}\n+ <\/a>\n+ <\/h1>\n+ );\n+ } else if (version.includes('alpha')) {\n+ header = <h1>React next<\/h1>;\n+ }\n+\n+ return (\n+ <div>\n+ {header}\n+ {apps}\n+ <\/div>\n+ );\n+}\n+TopLevelWrapperForDevTools.displayName = 'React';\n+\n+ReactDOM.render(\n+ <TopLevelWrapperForDevTools version={React.version} \/>,\n+ document.getElementById('root')\n+);\ndiff --git a\/fixtures\/regression\/styles.css b\/fixtures\/regression\/styles.css\nnew file mode 100644\nindex 0000000000..6cbaaa5c01\n--- \/dev\/null\n+++ b\/fixtures\/regression\/styles.css\n@@ -0,0 +1,37 @@\n+body {\n+ font-family: sans-serif;\n+ font-size: 12px;\n+}\n+\n+h1 {\n+ margin: 0;\n+ font-size: 20px;\n+}\n+\n+h2 {\n+ margin: 1rem 0 0;\n+}\n+\n+iframe {\n+ border: 1px solid #ddd;\n+ border-radius: 0.5rem;\n+}\n+\n+code {\n+ white-space: nowrap;\n+}\n+\n+.Feature {\n+ margin: 1rem 0;\n+ border-bottom: 1px solid #eee;\n+ padding-bottom: 1rem;\n+}\n+.FeatureHeader {\n+ font-size: 16px;\n+ margin-bottom: 0.5rem;\n+}\n+.FeatureCode {\n+ background-color: #eee;\n+ padding: 0.25rem;\n+ border-radius: 0.25rem;\n+}\ndiff --git a\/fixtures\/standalone\/index.html b\/fixtures\/standalone\/index.html\nnew file mode 100644\nindex 0000000000..17e133bae8\n--- \/dev\/null\n+++ b\/fixtures\/standalone\/index.html\n@@ -0,0 +1,284 @@\n+<!DOCTYPE html>\n+<html>\n+ <head>\n+ <meta charset=\"UTF-8\" \/>\n+ <title>TODO List<\/title>\n+\n+ \n+ <script src=\"http:\/\/localhost:8097\"><\/script>\n+\n+ <script src=\"https:\/\/unpkg.com\/react@16\/umd\/react.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-dom@16\/umd\/react-dom.development.js\"><\/script>\n+\n+ \n+ <script src=\"https:\/\/unpkg.com\/babel-standalone@6.15.0\/babel.min.js\"><\/script>\n+\n+ <style type=\"text\/css\">\n+ .Input {\n+ font-size: 1rem;\n+ padding: 0.25rem;\n+ }\n+\n+ .IconButton {\n+ padding: 0.25rem;\n+ border: none;\n+ background: none;\n+ cursor: pointer;\n+ }\n+\n+ .List {\n+ margin: 0.5rem 0 0;\n+ padding: 0;\n+ }\n+\n+ .ListItem {\n+ list-style-type: none;\n+ }\n+\n+ .Label {\n+ cursor: pointer;\n+ padding: 0.25rem;\n+ color: #555;\n+ }\n+ .Label:hover {\n+ color: #000;\n+ }\n+\n+ .IconButton {\n+ padding: 0.25rem;\n+ border: none;\n+ background: none;\n+ cursor: pointer;\n+ }\n+ <\/style>\n+ <\/head>\n+ <body>\n+ <div id=\"root\"><\/div>\n+ <script type=\"text\/babel\">\n+ const { Fragment, useCallback, useState } = React;\n+\n+ function List(props) {\n+ const [newItemText, setNewItemText] = useState(\"\");\n+ const [items, setItems] = useState([\n+ { id: 1, isComplete: true, text: \"First\" },\n+ { id: 2, isComplete: true, text: \"Second\" },\n+ { id: 3, isComplete: false, text: \"Third\" }\n+ ]);\n+ const [uid, setUID] = useState(4);\n+\n+ const handleClick = useCallback(() => {\n+ if (newItemText !== \"\") {\n+ setItems([\n+ ...items,\n+ {\n+ id: uid,\n+ isComplete: false,\n+ text: newItemText\n+ }\n+ ]);\n+ setUID(uid + 1);\n+ setNewItemText(\"\");\n+ }\n+ }, [newItemText, items, uid]);\n+\n+ const handleKeyPress = useCallback(\n+ event => {\n+ if (event.key === \"Enter\") {\n+ handleClick();\n+ }\n+ },\n+ [handleClick]\n+ );\n+\n+ const handleChange = useCallback(\n+ event => {\n+ setNewItemText(event.currentTarget.value);\n+ },\n+ [setNewItemText]\n+ );\n+\n+ const removeItem = useCallback(\n+ itemToRemove => setItems(items.filter(item => item !== itemToRemove)),\n+ [items]\n+ );\n+\n+ const toggleItem = useCallback(\n+ itemToToggle => {\n+ const index = items.indexOf(itemToToggle);\n+\n+ setItems(\n+ items\n+ .slice(0, index)\n+ .concat({\n+ ...itemToToggle,\n+ isComplete: !itemToToggle.isComplete\n+ })\n+ .concat(items.slice(index + 1))\n+ );\n+ },\n+ [items]\n+ );\n+\n+ return (\n+ <Fragment>\n+ <h1>List<\/h1>\n+ <input\n+ type=\"text\"\n+ placeholder=\"New list item...\"\n+ className=\"Input\"\n+ value={newItemText}\n+ onChange={handleChange}\n+ onKeyPress={handleKeyPress}\n+ \/>\n+ <button\n+ className=\"IconButton\"\n+ disabled={newItemText === \"\"}\n+ onClick={handleClick}\n+ >\n+ <span role=\"img\" aria-label=\"Add item\">\n+ ➕\n+ <\/span>\n+ <\/button>\n+ <ul className=\"List\">\n+ {items.map(item => (\n+ <ListItem\n+ key={item.id}\n+ item={item}\n+ removeItem={removeItem}\n+ toggleItem={toggleItem}\n+ \/>\n+ ))}\n+ <\/ul>\n+ <\/Fragment>\n+ );\n+ }\n+\n+ function ListItem({ item, removeItem, toggleItem }) {\n+ const handleDelete = useCallback(() => {\n+ removeItem(item);\n+ }, [item, removeItem]);\n+\n+ const handleToggle = useCallback(() => {\n+ toggleItem(item);\n+ }, [item, toggleItem]);\n+\n+ return (\n+ <li className=\"ListItem\">\n+ <button className=\"IconButton\" onClick={handleDelete}>\n+ 🗑\n+ <\/button>\n+ <label className=\"Label\">\n+ <input\n+ className=\"Input\"\n+ checked={item.isComplete}\n+ onChange={handleToggle}\n+ type=\"checkbox\"\n+ \/>{\" \"}\n+ {item.text}\n+ <\/label>\n+ <\/li>\n+ );\n+ }\n+\n+ function SimpleValues() {\n+ return (\n+ <ChildComponent\n+ string=\"abc\"\n+ emptyString=\"\"\n+ number={123}\n+ undefined={undefined}\n+ null={null}\n+ nan={NaN}\n+ infinity={Infinity}\n+ true={true}\n+ false={false}\n+ \/>\n+ );\n+ }\n+\n+ class Custom {\n+ _number = 42;\n+ get number() {\n+ return this._number;\n+ }\n+ }\n+\n+ function CustomObject() {\n+ return <ChildComponent customObject={new Custom()} \/>;\n+ }\n+\n+ const object = {\n+ string: \"abc\",\n+ longString: \"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKJLMNOPQRSTUVWXYZ1234567890\",\n+ emptyString: \"\",\n+ number: 123,\n+ boolean: true,\n+ undefined: undefined,\n+ null: null\n+ };\n+\n+ function ObjectProps() {\n+ return (\n+ <ChildComponent\n+ object={{\n+ outer: {\n+ inner: object\n+ }\n+ }}\n+ array={[\"first\", \"second\", \"third\"]}\n+ objectInArray={[object]}\n+ arrayInObject={{ array: [\"first\", \"second\", \"third\"] }}\n+ deepObject={{\n+ \/\/ Known limitation: we won't go deeper than several levels.\n+ \/\/ In the future, we might offer a way to request deeper access on demand.\n+ a: {\n+ b: {\n+ c: {\n+ d: {\n+ e: {\n+ f: {\n+ g: {\n+ h: {\n+ i: {\n+ j: 10\n+ }\n+ }\n+ }\n+ }\n+ }\n+ }\n+ }\n+ }\n+ }\n+ }}\n+ \/>\n+ );\n+ }\n+\n+ function ChildComponent(props: any) {\n+ return null;\n+ }\n+\n+ function InspectableElements() {\n+ return (\n+ <Fragment>\n+ <SimpleValues \/>\n+ <ObjectProps \/>\n+ <CustomObject \/>\n+ <\/Fragment>\n+ );\n+ }\n+\n+ function App() {\n+ return (\n+ <Fragment>\n+ <List \/>\n+ <InspectableElements \/>\n+ <\/Fragment>\n+ );\n+ }\n+\n+ ReactDOM.render(<App \/>, document.getElementById(\"root\"));\n+ <\/script>\n+ <\/body>\n+<\/html>\ndiff --git a\/flow-typed\/chrome.js b\/flow-typed\/chrome.js\nnew file mode 100644\nindex 0000000000..fac8109124\n--- \/dev\/null\n+++ b\/flow-typed\/chrome.js\n@@ -0,0 +1,94 @@\n+\/\/ @flow\n+\n+declare var chrome: {\n+ devtools: {\n+ network: {\n+ onNavigated: {\n+ addListener: (cb: (url: string) => void) => void,\n+ removeListener: (cb: () => void) => void,\n+ },\n+ },\n+ inspectedWindow: {\n+ eval: (code: string, cb?: (res: any, err: ?Object) => any) => void,\n+ tabId: number,\n+ },\n+ panels: {\n+ create: (\n+ title: string,\n+ icon: string,\n+ filename: string,\n+ cb: (panel: {\n+ onHidden: {\n+ addListener: (cb: (window: Object) => void) => void,\n+ },\n+ onShown: {\n+ addListener: (cb: (window: Object) => void) => void,\n+ },\n+ }) => void\n+ ) => void,\n+ themeName: ?string,\n+ },\n+ },\n+ tabs: {\n+ create: (options: Object) => void,\n+ executeScript: (tabId: number, options: Object, fn: () => void) => void,\n+ onUpdated: {\n+ addListener: (\n+ fn: (tabId: number, changeInfo: Object, tab: Object) => void\n+ ) => void,\n+ },\n+ query: (options: Object, fn: (tabArray: Array<Object>) => void) => void,\n+ },\n+ browserAction: {\n+ setIcon: (options: {\n+ tabId: number,\n+ path: { [key: string]: string },\n+ }) => void,\n+ setPopup: (options: {\n+ tabId: number,\n+ popup: string,\n+ }) => void,\n+ },\n+ runtime: {\n+ getURL: (path: string) => string,\n+ sendMessage: (config: Object) => void,\n+ connect: (\n+ config: Object\n+ ) => {\n+ disconnect: () => void,\n+ onMessage: {\n+ addListener: (fn: (message: Object) => void) => void,\n+ },\n+ onDisconnect: {\n+ addListener: (fn: (message: Object) => void) => void,\n+ },\n+ postMessage: (data: Object) => void,\n+ },\n+ onConnect: {\n+ addListener: (\n+ fn: (port: {\n+ name: string,\n+ sender: {\n+ tab: {\n+ id: number,\n+ url: string,\n+ },\n+ },\n+ }) => void\n+ ) => void,\n+ },\n+ onMessage: {\n+ addListener: (\n+ fn: (\n+ req: Object,\n+ sender: {\n+ url: string,\n+ tab: {\n+ id: number,\n+ },\n+ }\n+ ) => void\n+ ) => void,\n+ },\n+ },\n+};\ndiff --git a\/flow-typed\/jest.js b\/flow-typed\/jest.js\nnew file mode 100644\nindex 0000000000..8563e20d93\n--- \/dev\/null\n+++ b\/flow-typed\/jest.js\n@@ -0,0 +1,1188 @@\n+type JestMockFn<TArguments: $ReadOnlyArray<*>, TReturn> = {\n+ (...args: TArguments): TReturn,\n+ \/**\n+ * An object for introspecting mock calls\n+ *\/\n+ mock: {\n+ \/**\n+ * An array that represents all calls that have been made into this mock\n+ * function. Each call is represented by an array of arguments that were\n+ * passed during the call.\n+ *\/\n+ calls: Array<TArguments>,\n+ \/**\n+ * An array that contains all the object instances that have been\n+ * instantiated from this mock function.\n+ *\/\n+ instances: Array<TReturn>,\n+ \/**\n+ * An array that contains all the object results that have been\n+ * returned by this mock function call\n+ *\/\n+ results: Array<{ isThrow: boolean, value: TReturn }>,\n+ },\n+ \/**\n+ * Resets all information stored in the mockFn.mock.calls and\n+ * mockFn.mock.instances arrays. Often this is useful when you want to clean\n+ * up a mock's usage data between two assertions.\n+ *\/\n+ mockClear(): void,\n+ \/**\n+ * Resets all information stored in the mock. This is useful when you want to\n+ * completely restore a mock back to its initial state.\n+ *\/\n+ mockReset(): void,\n+ \/**\n+ * Removes the mock and restores the initial implementation. This is useful\n+ * when you want to mock functions in certain test cases and restore the\n+ * original implementation in others. Beware that mockFn.mockRestore only\n+ * works when mock was created with jest.spyOn. Thus you have to take care of\n+ * restoration yourself when manually assigning jest.fn().\n+ *\/\n+ mockRestore(): void,\n+ \/**\n+ * Accepts a function that should be used as the implementation of the mock.\n+ * The mock itself will still record all calls that go into and instances\n+ * that come from itself -- the only difference is that the implementation\n+ * will also be executed when the mock is called.\n+ *\/\n+ mockImplementation(\n+ fn: (...args: TArguments) => TReturn\n+ ): JestMockFn<TArguments, TReturn>,\n+ \/**\n+ * Accepts a function that will be used as an implementation of the mock for\n+ * one call to the mocked function. Can be chained so that multiple function\n+ * calls produce different results.\n+ *\/\n+ mockImplementationOnce(\n+ fn: (...args: TArguments) => TReturn\n+ ): JestMockFn<TArguments, TReturn>,\n+ \/**\n+ * Accepts a string to use in test result output in place of \"jest.fn()\" to\n+ * indicate which mock function is being referenced.\n+ *\/\n+ mockName(name: string): JestMockFn<TArguments, TReturn>,\n+ \/**\n+ * Just a simple sugar function for returning `this`\n+ *\/\n+ mockReturnThis(): void,\n+ \/**\n+ * Accepts a value that will be returned whenever the mock function is called.\n+ *\/\n+ mockReturnValue(value: TReturn): JestMockFn<TArguments, TReturn>,\n+ \/**\n+ * Sugar for only returning a value once inside your mock\n+ *\/\n+ mockReturnValueOnce(value: TReturn): JestMockFn<TArguments, TReturn>,\n+ \/**\n+ * Sugar for jest.fn().mockImplementation(() => Promise.resolve(value))\n+ *\/\n+ mockResolvedValue(value: TReturn): JestMockFn<TArguments, Promise<TReturn>>,\n+ \/**\n+ * Sugar for jest.fn().mockImplementationOnce(() => Promise.resolve(value))\n+ *\/\n+ mockResolvedValueOnce(\n+ value: TReturn\n+ ): JestMockFn<TArguments, Promise<TReturn>>,\n+ \/**\n+ * Sugar for jest.fn().mockImplementation(() => Promise.reject(value))\n+ *\/\n+ mockRejectedValue(value: TReturn): JestMockFn<TArguments, Promise<any>>,\n+ \/**\n+ * Sugar for jest.fn().mockImplementationOnce(() => Promise.reject(value))\n+ *\/\n+ mockRejectedValueOnce(value: TReturn): JestMockFn<TArguments, Promise<any>>,\n+};\n+\n+type JestAsymmetricEqualityType = {\n+ \/**\n+ * A custom Jasmine equality tester\n+ *\/\n+ asymmetricMatch(value: mixed): boolean,\n+};\n+\n+type JestCallsType = {\n+ allArgs(): mixed,\n+ all(): mixed,\n+ any(): boolean,\n+ count(): number,\n+ first(): mixed,\n+ mostRecent(): mixed,\n+ reset(): void,\n+};\n+\n+type JestClockType = {\n+ install(): void,\n+ mockDate(date: Date): void,\n+ tick(milliseconds?: number): void,\n+ uninstall(): void,\n+};\n+\n+type JestMatcherResult = {\n+ message?: string | (() => string),\n+ pass: boolean,\n+};\n+\n+type JestMatcher = (\n+ actual: any,\n+ expected: any\n+) => JestMatcherResult | Promise<JestMatcherResult>;\n+\n+type JestPromiseType = {\n+ \/**\n+ * Use rejects to unwrap the reason of a rejected promise so any other\n+ * matcher can be chained. If the promise is fulfilled the assertion fails.\n+ *\/\n+ \/\/ eslint-disable-next-line no-use-before-define\n+ rejects: JestExpectType,\n+ \/**\n+ * Use resolves to unwrap the value of a fulfilled promise so any other\n+ * matcher can be chained. If the promise is rejected the assertion fails.\n+ *\/\n+ \/\/ eslint-disable-next-line no-use-before-define\n+ resolves: JestExpectType,\n+};\n+\n+\/**\n+ * Jest allows functions and classes to be used as test names in test() and\n+ * describe()\n+ *\/\n+type JestTestName = string | Function;\n+\n+\/**\n+ * Plugin: jest-styled-components\n+ *\/\n+\n+type JestStyledComponentsMatcherValue =\n+ | string\n+ | JestAsymmetricEqualityType\n+ | RegExp\n+ | typeof undefined;\n+\n+type JestStyledComponentsMatcherOptions = {\n+ media?: string,\n+ modifier?: string,\n+ supports?: string,\n+};\n+\n+type JestStyledComponentsMatchersType = {\n+ toHaveStyleRule(\n+ property: string,\n+ value: JestStyledComponentsMatcherValue,\n+ options?: JestStyledComponentsMatcherOptions\n+ ): void,\n+};\n+\n+\/**\n+ * Plugin: jest-enzyme\n+ *\/\n+type EnzymeMatchersType = {\n+ \/\/ 5.x\n+ toBeEmpty(): void,\n+ toBePresent(): void,\n+ \/\/ 6.x\n+ toBeChecked(): void,\n+ toBeDisabled(): void,\n+ toBeEmptyRender(): void,\n+ toContainMatchingElement(selector: string): void,\n+ toContainMatchingElements(n: number, selector: string): void,\n+ toContainExactlyOneMatchingElement(selector: string): void,\n+ toContainReact(element: React$Element<any>): void,\n+ toExist(): void,\n+ toHaveClassName(className: string): void,\n+ toHaveHTML(html: string): void,\n+ toHaveProp: ((propKey: string, propValue?: any) => void) &\n+ ((props: {}) => void),\n+ toHaveRef(refName: string): void,\n+ toHaveState: ((stateKey: string, stateValue?: any) => void) &\n+ ((state: {}) => void),\n+ toHaveStyle: ((styleKey: string, styleValue?: any) => void) &\n+ ((style: {}) => void),\n+ toHaveTagName(tagName: string): void,\n+ toHaveText(text: string): void,\n+ toHaveValue(value: any): void,\n+ toIncludeText(text: string): void,\n+ toMatchElement(\n+ element: React$Element<any>,\n+ options?: {| ignoreProps?: boolean, verbose?: boolean |}\n+ ): void,\n+ toMatchSelector(selector: string): void,\n+ \/\/ 7.x\n+ toHaveDisplayName(name: string): void,\n+};\n+\n+\/\/ DOM testing library extensions https:\/\/github.com\/kentcdodds\/dom-testing-library#custom-jest-matchers\n+type DomTestingLibraryType = {\n+ toBeDisabled(): void,\n+ toBeEmpty(): void,\n+ toBeInTheDocument(): void,\n+ toBeVisible(): void,\n+ toContainElement(element: HTMLElement | null): void,\n+ toContainHTML(htmlText: string): void,\n+ toHaveAttribute(name: string, expectedValue?: string): void,\n+ toHaveClass(...classNames: string[]): void,\n+ toHaveFocus(): void,\n+ toHaveFormValues(expectedValues: { [name: string]: any }): void,\n+ toHaveStyle(css: string): void,\n+ toHaveTextContent(\n+ content: string | RegExp,\n+ options?: { normalizeWhitespace: boolean }\n+ ): void,\n+ toBeInTheDOM(): void,\n+};\n+\n+\/\/ Jest JQuery Matchers: https:\/\/github.com\/unindented\/custom-jquery-matchers\n+type JestJQueryMatchersType = {\n+ toExist(): void,\n+ toHaveLength(len: number): void,\n+ toHaveId(id: string): void,\n+ toHaveClass(className: string): void,\n+ toHaveTag(tag: string): void,\n+ toHaveAttr(key: string, val?: any): void,\n+ toHaveProp(key: string, val?: any): void,\n+ toHaveText(text: string | RegExp): void,\n+ toHaveData(key: string, val?: any): void,\n+ toHaveValue(val: any): void,\n+ toHaveCss(css: { [key: string]: any }): void,\n+ toBeChecked(): void,\n+ toBeDisabled(): void,\n+ toBeEmpty(): void,\n+ toBeHidden(): void,\n+ toBeSelected(): void,\n+ toBeVisible(): void,\n+ toBeFocused(): void,\n+ toBeInDom(): void,\n+ toBeMatchedBy(sel: string): void,\n+ toHaveDescendant(sel: string): void,\n+ toHaveDescendantWithText(sel: string, text: string | RegExp): void,\n+};\n+\n+\/\/ Jest Extended Matchers: https:\/\/github.com\/jest-community\/jest-extended\n+type JestExtendedMatchersType = {\n+ \/**\n+ * Note: Currently unimplemented\n+ * Passing assertion\n+ *\n+ * @param {String} message\n+ *\/\n+ \/\/ pass(message: string): void;\n+\n+ \/**\n+ * Note: Currently unimplemented\n+ * Failing assertion\n+ *\n+ * @param {String} message\n+ *\/\n+ \/\/ fail(message: string): void;\n+\n+ \/**\n+ * Use .toBeEmpty when checking if a String '', Array [] or Object {} is empty.\n+ *\/\n+ toBeEmpty(): void,\n+\n+ \/**\n+ * Use .toBeOneOf when checking if a value is a member of a given Array.\n+ * @param {Array.<*>} members\n+ *\/\n+ toBeOneOf(members: any[]): void,\n+\n+ \/**\n+ * Use `.toBeNil` when checking a value is `null` or `undefined`.\n+ *\/\n+ toBeNil(): void,\n+\n+ \/**\n+ * Use `.toSatisfy` when you want to use a custom matcher by supplying a predicate function that returns a `Boolean`.\n+ * @param {Function} predicate\n+ *\/\n+ toSatisfy(predicate: (n: any) => boolean): void,\n+\n+ \/**\n+ * Use `.toBeArray` when checking if a value is an `Array`.\n+ *\/\n+ toBeArray(): void,\n+\n+ \/**\n+ * Use `.toBeArrayOfSize` when checking if a value is an `Array` of size x.\n+ * @param {Number} x\n+ *\/\n+ toBeArrayOfSize(x: number): void,\n+\n+ \/**\n+ * Use `.toIncludeAllMembers` when checking if an `Array` contains all of the same members of a given set.\n+ * @param {Array.<*>} members\n+ *\/\n+ toIncludeAllMembers(members: any[]): void,\n+\n+ \/**\n+ * Use `.toIncludeAnyMembers` when checking if an `Array` contains any of the members of a given set.\n+ * @param {Array.<*>} members\n+ *\/\n+ toIncludeAnyMembers(members: any[]): void,\n+\n+ \/**\n+ * 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.\n+ * @param {Function} predicate\n+ *\/\n+ toSatisfyAll(predicate: (n: any) => boolean): void,\n+\n+ \/**\n+ * Use `.toBeBoolean` when checking if a value is a `Boolean`.\n+ *\/\n+ toBeBoolean(): void,\n+\n+ \/**\n+ * Use `.toBeTrue` when checking a value is equal (===) to `true`.\n+ *\/\n+ toBeTrue(): void,\n+\n+ \/**\n+ * Use `.toBeFalse` when checking a value is equal (===) to `false`.\n+ *\/\n+ toBeFalse(): void,\n+\n+ \/**\n+ * Use .toBeDate when checking if a value is a Date.\n+ *\/\n+ toBeDate(): void,\n+\n+ \/**\n+ * Use `.toBeFunction` when checking if a value is a `Function`.\n+ *\/\n+ toBeFunction(): void,\n+\n+ \/**\n+ * Use `.toHaveBeenCalledBefore` when checking if a `Mock` was called before another `Mock`.\n+ *\n+ * Note: Required Jest version >22\n+ * 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\n+ *\n+ * @param {Mock} mock\n+ *\/\n+ toHaveBeenCalledBefore(mock: JestMockFn<any, any>): void,\n+\n+ \/**\n+ * Use `.toBeNumber` when checking if a value is a `Number`.\n+ *\/\n+ toBeNumber(): void,\n+\n+ \/**\n+ * Use `.toBeNaN` when checking a value is `NaN`.\n+ *\/\n+ toBeNaN(): void,\n+\n+ \/**\n+ * Use `.toBeFinite` when checking if a value is a `Number`, not `NaN` or `Infinity`.\n+ *\/\n+ toBeFinite(): void,\n+\n+ \/**\n+ * Use `.toBePositive` when checking if a value is a positive `Number`.\n+ *\/\n+ toBePositive(): void,\n+\n+ \/**\n+ * Use `.toBeNegative` when checking if a value is a negative `Number`.\n+ *\/\n+ toBeNegative(): void,\n+\n+ \/**\n+ * Use `.toBeEven` when checking if a value is an even `Number`.\n+ *\/\n+ toBeEven(): void,\n+\n+ \/**\n+ * Use `.toBeOdd` when checking if a value is an odd `Number`.\n+ *\/\n+ toBeOdd(): void,\n+\n+ \/**\n+ * Use `.toBeWithin` when checking if a number is in between the given bounds of: start (inclusive) and end (exclusive).\n+ *\n+ * @param {Number} start\n+ * @param {Number} end\n+ *\/\n+ toBeWithin(start: number, end: number): void,\n+\n+ \/**\n+ * Use `.toBeObject` when checking if a value is an `Object`.\n+ *\/\n+ toBeObject(): void,\n+\n+ \/**\n+ * Use `.toContainKey` when checking if an object contains the provided key.\n+ *\n+ * @param {String} key\n+ *\/\n+ toContainKey(key: string): void,\n+\n+ \/**\n+ * Use `.toContainKeys` when checking if an object has all of the provided keys.\n+ *\n+ * @param {Array.<String>} keys\n+ *\/\n+ toContainKeys(keys: string[]): void,\n+\n+ \/**\n+ * Use `.toContainAllKeys` when checking if an object only contains all of the provided keys.\n+ *\n+ * @param {Array.<String>} keys\n+ *\/\n+ toContainAllKeys(keys: string[]): void,\n+\n+ \/**\n+ * Use `.toContainAnyKeys` when checking if an object contains at least one of the provided keys.\n+ *\n+ * @param {Array.<String>} keys\n+ *\/\n+ toContainAnyKeys(keys: string[]): void,\n+\n+ \/**\n+ * Use `.toContainValue` when checking if an object contains the provided value.\n+ *\n+ * @param {*} value\n+ *\/\n+ toContainValue(value: any): void,\n+\n+ \/**\n+ * Use `.toContainValues` when checking if an object contains all of the provided values.\n+ *\n+ * @param {Array.<*>} values\n+ *\/\n+ toContainValues(values: any[]): void,\n+\n+ \/**\n+ * Use `.toContainAllValues` when checking if an object only contains all of the provided values.\n+ *\n+ * @param {Array.<*>} values\n+ *\/\n+ toContainAllValues(values: any[]): void,\n+\n+ \/**\n+ * Use `.toContainAnyValues` when checking if an object contains at least one of the provided values.\n+ *\n+ * @param {Array.<*>} values\n+ *\/\n+ toContainAnyValues(values: any[]): void,\n+\n+ \/**\n+ * Use `.toContainEntry` when checking if an object contains the provided entry.\n+ *\n+ * @param {Array.<String, String>} entry\n+ *\/\n+ toContainEntry(entry: [string, string]): void,\n+\n+ \/**\n+ * Use `.toContainEntries` when checking if an object contains all of the provided entries.\n+ *\n+ * @param {Array.<Array.<String, String>>} entries\n+ *\/\n+ toContainEntries(entries: [string, string][]): void,\n+\n+ \/**\n+ * Use `.toContainAllEntries` when checking if an object only contains all of the provided entries.\n+ *\n+ * @param {Array.<Array.<String, String>>} entries\n+ *\/\n+ toContainAllEntries(entries: [string, string][]): void,\n+\n+ \/**\n+ * Use `.toContainAnyEntries` when checking if an object contains at least one of the provided entries.\n+ *\n+ * @param {Array.<Array.<String, String>>} entries\n+ *\/\n+ toContainAnyEntries(entries: [string, string][]): void,\n+\n+ \/**\n+ * Use `.toBeExtensible` when checking if an object is extensible.\n+ *\/\n+ toBeExtensible(): void,\n+\n+ \/**\n+ * Use `.toBeFrozen` when checking if an object is frozen.\n+ *\/\n+ toBeFrozen(): void,\n+\n+ \/**\n+ * Use `.toBeSealed` when checking if an object is sealed.\n+ *\/\n+ toBeSealed(): void,\n+\n+ \/**\n+ * Use `.toBeString` when checking if a value is a `String`.\n+ *\/\n+ toBeString(): void,\n+\n+ \/**\n+ * Use `.toEqualCaseInsensitive` when checking if a string is equal (===) to another ignoring the casing of both strings.\n+ *\n+ * @param {String} string\n+ *\/\n+ toEqualCaseInsensitive(string: string): void,\n+\n+ \/**\n+ * Use `.toStartWith` when checking if a `String` starts with a given `String` prefix.\n+ *\n+ * @param {String} prefix\n+ *\/\n+ toStartWith(prefix: string): void,\n+\n+ \/**\n+ * Use `.toEndWith` when checking if a `String` ends with a given `String` suffix.\n+ *\n+ * @param {String} suffix\n+ *\/\n+ toEndWith(suffix: string): void,\n+\n+ \/**\n+ * Use `.toInclude` when checking if a `String` includes the given `String` substring.\n+ *\n+ * @param {String} substring\n+ *\/\n+ toInclude(substring: string): void,\n+\n+ \/**\n+ * Use `.toIncludeRepeated` when checking if a `String` includes the given `String` substring the correct number of times.\n+ *\n+ * @param {String} substring\n+ * @param {Number} times\n+ *\/\n+ toIncludeRepeated(substring: string, times: number): void,\n+\n+ \/**\n+ * Use `.toIncludeMultiple` when checking if a `String` includes all of the given substrings.\n+ *\n+ * @param {Array.<String>} substring\n+ *\/\n+ toIncludeMultiple(substring: string[]): void,\n+};\n+\n+interface JestExpectType {\n+ not: JestExpectType &\n+ EnzymeMatchersType &\n+ DomTestingLibraryType &\n+ JestJQueryMatchersType &\n+ JestStyledComponentsMatchersType &\n+ JestExtendedMatchersType;\n+ \/**\n+ * If you have a mock function, you can use .lastCalledWith to test what\n+ * arguments it was last called with.\n+ *\/\n+ lastCalledWith(...args: Array<any>): void;\n+ \/**\n+ * toBe just checks that a value is what you expect. It uses === to check\n+ * strict equality.\n+ *\/\n+ toBe(value: any): void;\n+ \/**\n+ * Use .toBeCalledWith to ensure that a mock function was called with\n+ * specific arguments.\n+ *\/\n+ toBeCalledWith(...args: Array<any>): void;\n+ \/**\n+ * Using exact equality with floating point numbers is a bad idea. Rounding\n+ * means that intuitive things fail.\n+ *\/\n+ toBeCloseTo(num: number, delta: any): void;\n+ \/**\n+ * Use .toBeDefined to check that a variable is not undefined.\n+ *\/\n+ toBeDefined(): void;\n+ \/**\n+ * Use .toBeFalsy when you don't care what a value is, you just want to\n+ * ensure a value is false in a boolean context.\n+ *\/\n+ toBeFalsy(): void;\n+ \/**\n+ * To compare floating point numbers, you can use toBeGreaterThan.\n+ *\/\n+ toBeGreaterThan(number: number): void;\n+ \/**\n+ * To compare floating point numbers, you can use toBeGreaterThanOrEqual.\n+ *\/\n+ toBeGreaterThanOrEqual(number: number): void;\n+ \/**\n+ * To compare floating point numbers, you can use toBeLessThan.\n+ *\/\n+ toBeLessThan(number: number): void;\n+ \/**\n+ * To compare floating point numbers, you can use toBeLessThanOrEqual.\n+ *\/\n+ toBeLessThanOrEqual(number: number): void;\n+ \/**\n+ * Use .toBeInstanceOf(Class) to check that an object is an instance of a\n+ * class.\n+ *\/\n+ toBeInstanceOf(cls: Class<*>): void;\n+ \/**\n+ * .toBeNull() is the same as .toBe(null) but the error messages are a bit\n+ * nicer.\n+ *\/\n+ toBeNull(): void;\n+ \/**\n+ * Use .toBeTruthy when you don't care what a value is, you just want to\n+ * ensure a value is true in a boolean context.\n+ *\/\n+ toBeTruthy(): void;\n+ \/**\n+ * Use .toBeUndefined to check that a variable is undefined.\n+ *\/\n+ toBeUndefined(): void;\n+ \/**\n+ * Use .toContain when you want to check that an item is in a list. For\n+ * testing the items in the list, this uses ===, a strict equality check.\n+ *\/\n+ toContain(item: any): void;\n+ \/**\n+ * Use .toContainEqual when you want to check that an item is in a list. For\n+ * testing the items in the list, this matcher recursively checks the\n+ * equality of all fields, rather than checking for object identity.\n+ *\/\n+ toContainEqual(item: any): void;\n+ \/**\n+ * Use .toEqual when you want to check that two objects have the same value.\n+ * This matcher recursively checks the equality of all fields, rather than\n+ * checking for object identity.\n+ *\/\n+ toEqual(value: any): void;\n+ \/**\n+ * Use .toHaveBeenCalled to ensure that a mock function got called.\n+ *\/\n+ toHaveBeenCalled(): void;\n+ toBeCalled(): void;\n+ \/**\n+ * Use .toHaveBeenCalledTimes to ensure that a mock function got called exact\n+ * number of times.\n+ *\/\n+ toHaveBeenCalledTimes(number: number): void;\n+ toBeCalledTimes(number: number): void;\n+ \/**\n+ *\n+ *\/\n+ toHaveBeenNthCalledWith(nthCall: number, ...args: Array<any>): void;\n+ nthCalledWith(nthCall: number, ...args: Array<any>): void;\n+ \/**\n+ *\n+ *\/\n+ toHaveReturned(): void;\n+ toReturn(): void;\n+ \/**\n+ *\n+ *\/\n+ toHaveReturnedTimes(number: number): void;\n+ toReturnTimes(number: number): void;\n+ \/**\n+ *\n+ *\/\n+ toHaveReturnedWith(value: any): void;\n+ toReturnWith(value: any): void;\n+ \/**\n+ *\n+ *\/\n+ toHaveLastReturnedWith(value: any): void;\n+ lastReturnedWith(value: any): void;\n+ \/**\n+ *\n+ *\/\n+ toHaveNthReturnedWith(nthCall: number, value: any): void;\n+ nthReturnedWith(nthCall: number, value: any): void;\n+ \/**\n+ * Use .toHaveBeenCalledWith to ensure that a mock function was called with\n+ * specific arguments.\n+ *\/\n+ toHaveBeenCalledWith(...args: Array<any>): void;\n+ toBeCalledWith(...args: Array<any>): void;\n+ \/**\n+ * Use .toHaveBeenLastCalledWith to ensure that a mock function was last called\n+ * with specific arguments.\n+ *\/\n+ toHaveBeenLastCalledWith(...args: Array<any>): void;\n+ lastCalledWith(...args: Array<any>): void;\n+ \/**\n+ * Check that an object has a .length property and it is set to a certain\n+ * numeric value.\n+ *\/\n+ toHaveLength(number: number): void;\n+ \/**\n+ *\n+ *\/\n+ toHaveProperty(propPath: string, value?: any): void;\n+ \/**\n+ * Use .toMatch to check that a string matches a regular expression or string.\n+ *\/\n+ toMatch(regexpOrString: RegExp | string): void;\n+ \/**\n+ * Use .toMatchObject to check that a javascript object matches a subset of the properties of an object.\n+ *\/\n+ toMatchObject(object: Object | Array<Object>): void;\n+ \/**\n+ * Use .toStrictEqual to check that a javascript object matches a subset of the properties of an object.\n+ *\/\n+ toStrictEqual(value: any): void;\n+ \/**\n+ * This ensures that an Object matches the most recent snapshot.\n+ *\/\n+ toMatchSnapshot(propertyMatchers?: any, name?: string): void;\n+ \/**\n+ * This ensures that an Object matches the most recent snapshot.\n+ *\/\n+ toMatchSnapshot(name: string): void;\n+\n+ toMatchInlineSnapshot(snapshot?: string): void;\n+ toMatchInlineSnapshot(propertyMatchers?: any, snapshot?: string): void;\n+ \/**\n+ * Use .toThrow to test that a function throws when it is called.\n+ * If you want to test that a specific error gets thrown, you can provide an\n+ * argument to toThrow. The argument can be a string for the error message,\n+ * a class for the error, or a regex that should match the error.\n+ *\n+ * Alias: .toThrowError\n+ *\/\n+ toThrow(message?: string | Error | Class<Error> | RegExp): void;\n+ toThrowError(message?: string | Error | Class<Error> | RegExp): void;\n+ \/**\n+ * Use .toThrowErrorMatchingSnapshot to test that a function throws a error\n+ * matching the most recent snapshot when it is called.\n+ *\/\n+ toThrowErrorMatchingSnapshot(): void;\n+ toThrowErrorMatchingInlineSnapshot(snapshot?: string): void;\n+}\n+\n+type JestObjectType = {\n+ \/**\n+ * Disables automatic mocking in the module loader.\n+ *\n+ * After this method is called, all `require()`s will return the real\n+ * versions of each module (rather than a mocked version).\n+ *\/\n+ disableAutomock(): JestObjectType,\n+ \/**\n+ * An un-hoisted version of disableAutomock\n+ *\/\n+ autoMockOff(): JestObjectType,\n+ \/**\n+ * Enables automatic mocking in the module loader.\n+ *\/\n+ enableAutomock(): JestObjectType,\n+ \/**\n+ * An un-hoisted version of enableAutomock\n+ *\/\n+ autoMockOn(): JestObjectType,\n+ \/**\n+ * Clears the mock.calls and mock.instances properties of all mocks.\n+ * Equivalent to calling .mockClear() on every mocked function.\n+ *\/\n+ clearAllMocks(): JestObjectType,\n+ \/**\n+ * Resets the state of all mocks. Equivalent to calling .mockReset() on every\n+ * mocked function.\n+ *\/\n+ resetAllMocks(): JestObjectType,\n+ \/**\n+ * Restores all mocks back to their original value.\n+ *\/\n+ restoreAllMocks(): JestObjectType,\n+ \/**\n+ * Removes any pending timers from the timer system.\n+ *\/\n+ clearAllTimers(): void,\n+ \/**\n+ * Returns the number of fake timers still left to run.\n+ *\/\n+ getTimerCount(): number,\n+ \/**\n+ * The same as `mock` but not moved to the top of the expectation by\n+ * babel-jest.\n+ *\/\n+ doMock(moduleName: string, moduleFactory?: any): JestObjectType,\n+ \/**\n+ * The same as `unmock` but not moved to the top of the expectation by\n+ * babel-jest.\n+ *\/\n+ dontMock(moduleName: string): JestObjectType,\n+ \/**\n+ * Returns a new, unused mock function. Optionally takes a mock\n+ * implementation.\n+ *\/\n+ fn<TArguments: $ReadOnlyArray<*>, TReturn>(\n+ implementation?: (...args: TArguments) => TReturn\n+ ): JestMockFn<TArguments, TReturn>,\n+ \/**\n+ * Determines if the given function is a mocked function.\n+ *\/\n+ isMockFunction(fn: Function): boolean,\n+ \/**\n+ * Given the name of a module, use the automatic mocking system to generate a\n+ * mocked version of the module for you.\n+ *\/\n+ genMockFromModule(moduleName: string): any,\n+ \/**\n+ * Mocks a module with an auto-mocked version when it is being required.\n+ *\n+ * The second argument can be used to specify an explicit module factory that\n+ * is being run instead of using Jest's automocking feature.\n+ *\n+ * The third argument can be used to create virtual mocks -- mocks of modules\n+ * that don't exist anywhere in the system.\n+ *\/\n+ mock(\n+ moduleName: string,\n+ moduleFactory?: any,\n+ options?: Object\n+ ): JestObjectType,\n+ \/**\n+ * Returns the actual module instead of a mock, bypassing all checks on\n+ * whether the module should receive a mock implementation or not.\n+ *\/\n+ requireActual(moduleName: string): any,\n+ \/**\n+ * Returns a mock module instead of the actual module, bypassing all checks\n+ * on whether the module should be required normally or not.\n+ *\/\n+ requireMock(moduleName: string): any,\n+ \/**\n+ * Resets the module registry - the cache of all required modules. This is\n+ * useful to isolate modules where local state might conflict between tests.\n+ *\/\n+ resetModules(): JestObjectType,\n+\n+ \/**\n+ * Creates a sandbox registry for the modules that are loaded inside the\n+ * callback function. This is useful to isolate specific modules for every\n+ * test so that local module state doesn't conflict between tests.\n+ *\/\n+ isolateModules(fn: () => void): JestObjectType,\n+\n+ \/**\n+ * Exhausts the micro-task queue (usually interfaced in node via\n+ * process.nextTick).\n+ *\/\n+ runAllTicks(): void,\n+ \/**\n+ * Exhausts the macro-task queue (i.e., all tasks queued by setTimeout(),\n+ * setInterval(), and setImmediate()).\n+ *\/\n+ runAllTimers(): void,\n+ \/**\n+ * Exhausts all tasks queued by setImmediate().\n+ *\/\n+ runAllImmediates(): void,\n+ \/**\n+ * Executes only the macro task queue (i.e. all tasks queued by setTimeout()\n+ * or setInterval() and setImmediate()).\n+ *\/\n+ advanceTimersByTime(msToRun: number): void,\n+ \/**\n+ * Executes only the macro task queue (i.e. all tasks queued by setTimeout()\n+ * or setInterval() and setImmediate()).\n+ *\n+ * Renamed to `advanceTimersByTime`.\n+ *\/\n+ runTimersToTime(msToRun: number): void,\n+ \/**\n+ * Executes only the macro-tasks that are currently pending (i.e., only the\n+ * tasks that have been queued by setTimeout() or setInterval() up to this\n+ * point)\n+ *\/\n+ runOnlyPendingTimers(): void,\n+ \/**\n+ * Explicitly supplies the mock object that the module system should return\n+ * for the specified module. Note: It is recommended to use jest.mock()\n+ * instead.\n+ *\/\n+ setMock(moduleName: string, moduleExports: any): JestObjectType,\n+ \/**\n+ * Indicates that the module system should never return a mocked version of\n+ * the specified module from require() (e.g. that it should always return the\n+ * real module).\n+ *\/\n+ unmock(moduleName: string): JestObjectType,\n+ \/**\n+ * Instructs Jest to use fake versions of the standard timer functions\n+ * (setTimeout, setInterval, clearTimeout, clearInterval, nextTick,\n+ * setImmediate and clearImmediate).\n+ *\/\n+ useFakeTimers(): JestObjectType,\n+ \/**\n+ * Instructs Jest to use the real versions of the standard timer functions.\n+ *\/\n+ useRealTimers(): JestObjectType,\n+ \/**\n+ * Creates a mock function similar to jest.fn but also tracks calls to\n+ * object[methodName].\n+ *\/\n+ spyOn(\n+ object: Object,\n+ methodName: string,\n+ accessType?: 'get' | 'set'\n+ ): JestMockFn<any, any>,\n+ \/**\n+ * Set the default timeout interval for tests and before\/after hooks in milliseconds.\n+ * Note: The default timeout interval is 5 seconds if this method is not called.\n+ *\/\n+ setTimeout(timeout: number): JestObjectType,\n+};\n+\n+type JestSpyType = {\n+ calls: JestCallsType,\n+};\n+\n+\/** Runs this function after every test inside this context *\/\n+declare function afterEach(\n+ fn: (done: () => void) => ?Promise<mixed>,\n+ timeout?: number\n+): void;\n+\/** Runs this function before every test inside this context *\/\n+declare function beforeEach(\n+ fn: (done: () => void) => ?Promise<mixed>,\n+ timeout?: number\n+): void;\n+\/** Runs this function after all tests have finished inside this context *\/\n+declare function afterAll(\n+ fn: (done: () => void) => ?Promise<mixed>,\n+ timeout?: number\n+): void;\n+\/** Runs this function before any tests have started inside this context *\/\n+declare function beforeAll(\n+ fn: (done: () => void) => ?Promise<mixed>,\n+ timeout?: number\n+): void;\n+\n+\/** A context for grouping tests together *\/\n+declare var describe: {\n+ \/**\n+ * Creates a block that groups together several related tests in one \"test suite\"\n+ *\/\n+ (name: JestTestName, fn: () => void): void,\n+\n+ \/**\n+ * Only run this describe block\n+ *\/\n+ only(name: JestTestName, fn: () => void): void,\n+\n+ \/**\n+ * Skip running this describe block\n+ *\/\n+ skip(name: JestTestName, fn: () => void): void,\n+\n+ \/**\n+ * each runs this test against array of argument arrays per each run\n+ *\n+ * @param {table} table of Test\n+ *\/\n+ each(\n+ ...table: Array<Array<mixed> | mixed> | [Array<string>, string]\n+ ): (\n+ name: JestTestName,\n+ fn?: (...args: Array<any>) => ?Promise<mixed>,\n+ timeout?: number\n+ ) => void,\n+};\n+\n+\/** An individual test unit *\/\n+declare var it: {\n+ \/**\n+ * An individual test unit\n+ *\n+ * @param {JestTestName} Name of Test\n+ * @param {Function} Test\n+ * @param {number} Timeout for the test, in milliseconds.\n+ *\/\n+ (\n+ name: JestTestName,\n+ fn?: (done: () => void) => ?Promise<mixed>,\n+ timeout?: number\n+ ): void,\n+\n+ \/**\n+ * Only run this test\n+ *\n+ * @param {JestTestName} Name of Test\n+ * @param {Function} Test\n+ * @param {number} Timeout for the test, in milliseconds.\n+ *\/\n+ only(\n+ name: JestTestName,\n+ fn?: (done: () => void) => ?Promise<mixed>,\n+ timeout?: number\n+ ): {\n+ each(\n+ ...table: Array<Array<mixed> | mixed> | [Array<string>, string]\n+ ): (\n+ name: JestTestName,\n+ fn?: (...args: Array<any>) => ?Promise<mixed>,\n+ timeout?: number\n+ ) => void,\n+ },\n+\n+ \/**\n+ * Skip running this test\n+ *\n+ * @param {JestTestName} Name of Test\n+ * @param {Function} Test\n+ * @param {number} Timeout for the test, in milliseconds.\n+ *\/\n+ skip(\n+ name: JestTestName,\n+ fn?: (done: () => void) => ?Promise<mixed>,\n+ timeout?: number\n+ ): void,\n+\n+ \/**\n+ * Highlight planned tests in the summary output\n+ *\n+ * @param {String} Name of Test to do\n+ *\/\n+ todo(name: string): void,\n+\n+ \/**\n+ * Run the test concurrently\n+ *\n+ * @param {JestTestName} Name of Test\n+ * @param {Function} Test\n+ * @param {number} Timeout for the test, in milliseconds.\n+ *\/\n+ concurrent(\n+ name: JestTestName,\n+ fn?: (done: () => void) => ?Promise<mixed>,\n+ timeout?: number\n+ ): void,\n+\n+ \/**\n+ * each runs this test against array of argument arrays per each run\n+ *\n+ * @param {table} table of Test\n+ *\/\n+ each(\n+ ...table: Array<Array<mixed> | mixed> | [Array<string>, string]\n+ ): (\n+ name: JestTestName,\n+ fn?: (...args: Array<any>) => ?Promise<mixed>,\n+ timeout?: number\n+ ) => void,\n+};\n+\n+declare function fit(\n+ name: JestTestName,\n+ fn: (done: () => void) => ?Promise<mixed>,\n+ timeout?: number\n+): void;\n+\/** An individual test unit *\/\n+declare var test: typeof it;\n+\/** A disabled group of tests *\/\n+declare var xdescribe: typeof describe;\n+\/** A focused group of tests *\/\n+declare var fdescribe: typeof describe;\n+\/** A disabled individual test *\/\n+declare var xit: typeof it;\n+\/** A disabled individual test *\/\n+declare var xtest: typeof it;\n+\n+type JestPrettyFormatColors = {\n+ comment: { close: string, open: string },\n+ content: { close: string, open: string },\n+ prop: { close: string, open: string },\n+ tag: { close: string, open: string },\n+ value: { close: string, open: string },\n+};\n+\n+type JestPrettyFormatIndent = string => string;\n+\/\/ eslint-disable-next-line no-unused-vars\n+type JestPrettyFormatRefs = Array<any>;\n+type JestPrettyFormatPrint = any => string;\n+\/\/ eslint-disable-next-line no-unused-vars\n+type JestPrettyFormatStringOrNull = string | null;\n+\n+type JestPrettyFormatOptions = {|\n+ callToJSON: boolean,\n+ edgeSpacing: string,\n+ escapeRegex: boolean,\n+ highlight: boolean,\n+ indent: number,\n+ maxDepth: number,\n+ min: boolean,\n+ \/\/ eslint-disable-next-line no-use-before-define\n+ plugins: JestPrettyFormatPlugins,\n+ printFunctionName: boolean,\n+ spacing: string,\n+ theme: {|\n+ comment: string,\n+ content: string,\n+ prop: string,\n+ tag: string,\n+ value: string,\n+ |},\n+|};\n+\n+type JestPrettyFormatPlugin = {\n+ print: (\n+ val: any,\n+ serialize: JestPrettyFormatPrint,\n+ indent: JestPrettyFormatIndent,\n+ opts: JestPrettyFormatOptions,\n+ colors: JestPrettyFormatColors\n+ ) => string,\n+ test: any => boolean,\n+};\n+\n+type JestPrettyFormatPlugins = Array<JestPrettyFormatPlugin>;\n+\n+\/** The expect function is used every time you want to test a value *\/\n+declare var expect: {\n+ \/** The object that you want to make assertions against *\/\n+ (\n+ value: any\n+ ): JestExpectType &\n+ JestPromiseType &\n+ EnzymeMatchersType &\n+ DomTestingLibraryType &\n+ JestJQueryMatchersType &\n+ JestStyledComponentsMatchersType &\n+ JestExtendedMatchersType,\n+\n+ \/** Add additional Jasmine matchers to Jest's roster *\/\n+ extend(matchers: { [name: string]: JestMatcher }): void,\n+ \/** Add a module that formats application-specific data structures. *\/\n+ addSnapshotSerializer(pluginModule: JestPrettyFormatPlugin): void,\n+ assertions(expectedAssertions: number): void,\n+ hasAssertions(): void,\n+ any(value: mixed): JestAsymmetricEqualityType,\n+ anything(): any,\n+ arrayContaining(value: Array<mixed>): Array<mixed>,\n+ objectContaining(value: Object): Object,\n+ \/** Matches any received string that contains the exact expected string. *\/\n+ stringContaining(value: string): string,\n+ stringMatching(value: string | RegExp): string,\n+ not: {\n+ arrayContaining: (value: $ReadOnlyArray<mixed>) => Array<mixed>,\n+ objectContaining: (value: {}) => Object,\n+ stringContaining: (value: string) => string,\n+ stringMatching: (value: string | RegExp) => string,\n+ },\n+};\n+\n+\/\/ TODO handle return type\n+\/\/ http:\/\/jasmine.github.io\/2.4\/introduction.html#section-Spies\n+declare function spyOn(value: mixed, method: string): Object;\n+\n+\/** Holds all functions related to manipulating test runner *\/\n+declare var jest: JestObjectType;\n+\n+\/**\n+ * The global Jasmine object, this is generally not exposed as the public API,\n+ * using features inside here could break in later versions of Jest.\n+ *\/\n+declare var jasmine: {\n+ DEFAULT_TIMEOUT_INTERVAL: number,\n+ any(value: mixed): JestAsymmetricEqualityType,\n+ anything(): any,\n+ arrayContaining(value: Array<mixed>): Array<mixed>,\n+ clock(): JestClockType,\n+ createSpy(name: string): JestSpyType,\n+ createSpyObj(\n+ baseName: string,\n+ methodNames: Array<string>\n+ ): { [methodName: string]: JestSpyType },\n+ objectContaining(value: Object): Object,\n+ stringMatching(value: string): string,\n+};\ndiff --git a\/flow-typed\/npm\/react-test-renderer_v16.x.x.js b\/flow-typed\/npm\/react-test-renderer_v16.x.x.js\nnew file mode 100644\nindex 0000000000..67eb20ab75\n--- \/dev\/null\n+++ b\/flow-typed\/npm\/react-test-renderer_v16.x.x.js\n@@ -0,0 +1,81 @@\n+\/\/ flow-typed signature: b6bb53397d83d2d821e258cc73818d1b\n+\/\/ flow-typed version: 9c71eca8ef\/react-test-renderer_v16.x.x\/flow_>=v0.47.x\n+\n+\/\/ Type definitions for react-test-renderer 16.x.x\n+\/\/ Ported from: https:\/\/github.com\/DefinitelyTyped\/DefinitelyTyped\/blob\/master\/types\/react-test-renderer\n+\n+type ReactComponentInstance = React$Component<any>;\n+\n+type ReactTestRendererJSON = {\n+ type: string,\n+ props: { [propName: string]: any },\n+ children: null | ReactTestRendererJSON[],\n+};\n+\n+type ReactTestRendererTree = ReactTestRendererJSON & {\n+ nodeType: 'component' | 'host',\n+ instance: ?ReactComponentInstance,\n+ rendered: null | ReactTestRendererTree,\n+};\n+\n+type ReactTestInstance = {\n+ instance: ?ReactComponentInstance,\n+ type: string,\n+ props: { [propName: string]: any },\n+ parent: null | ReactTestInstance,\n+ children: Array<ReactTestInstance | string>,\n+\n+ find(predicate: (node: ReactTestInstance) => boolean): ReactTestInstance,\n+ findByType(type: React$ElementType): ReactTestInstance,\n+ findByProps(props: { [propName: string]: any }): ReactTestInstance,\n+\n+ findAll(\n+ predicate: (node: ReactTestInstance) => boolean,\n+ options?: { deep: boolean }\n+ ): ReactTestInstance[],\n+ findAllByType(\n+ type: React$ElementType,\n+ options?: { deep: boolean }\n+ ): ReactTestInstance[],\n+ findAllByProps(\n+ props: { [propName: string]: any },\n+ options?: { deep: boolean }\n+ ): ReactTestInstance[],\n+};\n+\n+type TestRendererOptions = {\n+ createNodeMock(element: React$Element<any>): any,\n+};\n+\n+declare module 'react-test-renderer' {\n+ declare export type ReactTestRenderer = {\n+ toJSON(): null | ReactTestRendererJSON,\n+ toTree(): null | ReactTestRendererTree,\n+ unmount(nextElement?: React$Element<any>): void,\n+ update(nextElement: React$Element<any>): void,\n+ getInstance(): ?ReactComponentInstance,\n+ root: ReactTestInstance,\n+ };\n+\n+ declare type Thenable = {\n+ then(resolve: () => mixed, reject?: () => mixed): mixed,\n+ };\n+\n+ declare function create(\n+ nextElement: React$Element<any>,\n+ options?: TestRendererOptions\n+ ): ReactTestRenderer;\n+\n+ declare function act(callback: () => ?Thenable): Thenable;\n+}\n+\n+declare module 'react-test-renderer\/shallow' {\n+ declare export default class ShallowRenderer {\n+ static createRenderer(): ShallowRenderer;\n+ getMountedInstance(): ReactTestInstance;\n+ getRenderOutput<E: React$Element<any>>(): E;\n+ getRenderOutput(): React$Element<any>;\n+ render(element: React$Element<any>, context?: any): void;\n+ unmount(): void;\n+ }\n+}\ndiff --git a\/flow.js b\/flow.js\nnew file mode 100644\nindex 0000000000..dc0c575900\n--- \/dev\/null\n+++ b\/flow.js\n@@ -0,0 +1,28 @@\n+\/\/ @flow\n+\n+declare module 'events' {\n+ declare class EventEmitter<Events: Object> {\n+ addListener<Event: $Keys<Events>>(\n+ event: Event,\n+ listener: (...$ElementType<Events, Event>) => any\n+ ): void;\n+ emit: <Event: $Keys<Events>>(\n+ event: Event,\n+ ...$ElementType<Events, Event>\n+ ) => void;\n+ removeListener(event: $Keys<Events>, listener: Function): void;\n+ removeAllListeners(event?: $Keys<Events>): void;\n+ }\n+\n+ declare export default typeof EventEmitter;\n+}\n+\n+declare var __DEV__: boolean;\n+declare var __TEST__: boolean;\n+\n+declare var jasmine: {|\n+ getEnv: () => {|\n+ afterEach: (callback: Function) => void,\n+ beforeEach: (callback: Function) => void,\n+ |},\n+|};\ndiff --git a\/package.json b\/package.json\nnew file mode 100644\nindex 0000000000..c0c5ffadc0\n--- \/dev\/null\n+++ b\/package.json\n@@ -0,0 +1,164 @@\n+{\n+ \"version\": \"4.0.0\",\n+ \"repository\": \"bvaughn\/react-devtools-experimental\",\n+ \"license\": \"MIT\",\n+ \"private\": true,\n+ \"workspaces\": [\n+ \"packages\/*\"\n+ ],\n+ \"jest\": {\n+ \"modulePathIgnorePatterns\": [\n+ \"<rootDir>\/shells\"\n+ ],\n+ \"modulePaths\": [\n+ \"<rootDir>\"\n+ ],\n+ \"moduleNameMapper\": {\n+ \"^src\/(.*)$\": \"<rootDir>\/src\/$1\",\n+ \"\\\\.css$\": \"<rootDir>\/src\/__tests__\/__mocks__\/cssMock.js\"\n+ },\n+ \"setupFiles\": [\n+ \"<rootDir>\/src\/__tests__\/setupEnv\"\n+ ],\n+ \"setupFilesAfterEnv\": [\n+ \"<rootDir>\/src\/__tests__\/setupTests\"\n+ ],\n+ \"snapshotSerializers\": [\n+ \"<rootDir>\/src\/__tests__\/inspectedElementSerializer\",\n+ \"<rootDir>\/src\/__tests__\/storeSerializer\"\n+ ],\n+ \"testMatch\": [\n+ \"**\/__tests__\/**\/*-test.js\"\n+ ]\n+ },\n+ \"scripts\": {\n+ \"build:core:backend\": \"cd .\/packages\/react-devtools-core && yarn build:backend\",\n+ \"build:core:standalone\": \"cd .\/packages\/react-devtools-core && yarn build:standalone\",\n+ \"build:core\": \"cd .\/packages\/react-devtools-core && yarn build\",\n+ \"build:inline\": \"cd .\/packages\/react-devtools-inline && yarn build\",\n+ \"build:demo\": \"cd .\/shells\/dev && cross-env NODE_ENV=development cross-env TARGET=remote webpack --config webpack.config.js\",\n+ \"build:extension\": \"cross-env NODE_ENV=production yarn run build:extension:chrome && yarn run build:extension:firefox\",\n+ \"build:extension:dev\": \"cross-env NODE_ENV=development yarn run build:extension:chrome && yarn run build:extension:firefox\",\n+ \"build:extension:chrome\": \"cross-env NODE_ENV=production node .\/shells\/browser\/chrome\/build\",\n+ \"build:extension:chrome:crx\": \"cross-env NODE_ENV=production node .\/shells\/browser\/chrome\/build --crx\",\n+ \"build:extension:chrome:dev\": \"cross-env NODE_ENV=development node .\/shells\/browser\/chrome\/build\",\n+ \"build:extension:firefox\": \"cross-env NODE_ENV=production node .\/shells\/browser\/firefox\/build\",\n+ \"build:extension:firefox:dev\": \"cross-env NODE_ENV=development node .\/shells\/browser\/firefox\/build\",\n+ \"build:standalone\": \"cd packages\/react-devtools-core && yarn run build\",\n+ \"deploy\": \"yarn run deploy:demo && yarn run deploy:chrome && yarn run deploy:firefox\",\n+ \"deploy:demo\": \"yarn run build:demo && cd shells\/dev\/ && now deploy && now alias react-devtools-experimental\",\n+ \"deploy:chrome\": \"node .\/shells\/browser\/chrome\/deploy\",\n+ \"deploy:firefox\": \"node .\/shells\/browser\/firefox\/deploy\",\n+ \"linc\": \"lint-staged\",\n+ \"lint\": \"eslint '**\/*.js'\",\n+ \"lint:ci\": \"eslint '**\/*.js' --max-warnings 0\",\n+ \"precommit\": \"lint-staged\",\n+ \"prettier\": \"prettier --write '**\/*.{js,json,css}'\",\n+ \"prettier:ci\": \"prettier --check '**\/*.{js,json,css}'\",\n+ \"start\": \"cd .\/shells\/dev && cross-env NODE_ENV=development cross-env TARGET=local webpack-dev-server --open\",\n+ \"start:core:backend\": \"cd .\/packages\/react-devtools-core && yarn start:backend\",\n+ \"start:core:standalone\": \"cd .\/packages\/react-devtools-core && yarn start:standalone\",\n+ \"start:electron\": \"cd .\/packages\/react-devtools && node bin.js\",\n+ \"start:prod\": \"cd .\/shells\/dev && cross-env NODE_ENV=production cross-env TARGET=local webpack-dev-server --open\",\n+ \"test\": \"jest\",\n+ \"test-debug\": \"node --inspect-brk node_modules\/.bin\/jest --runInBand\",\n+ \"test:chrome\": \"node .\/shells\/browser\/chrome\/test\",\n+ \"test:firefox\": \"node .\/shells\/browser\/firefox\/test\",\n+ \"test:standalone\": \"cd packages\/react-devtools && yarn start\",\n+ \"typecheck\": \"flow check --show-all-errors\"\n+ },\n+ \"devEngines\": {\n+ \"node\": \"10.x || 11.x\"\n+ },\n+ \"lint-staged\": {\n+ \"{shells,src}\/**\/*.{js,json,css}\": [\n+ \"prettier --write\",\n+ \"git add\"\n+ ],\n+ \"**\/*.js\": \"eslint --max-warnings 0\"\n+ },\n+ \"dependencies\": {\n+ \"@babel\/core\": \"^7.1.6\",\n+ \"@babel\/plugin-proposal-class-properties\": \"^7.1.0\",\n+ \"@babel\/plugin-transform-flow-strip-types\": \"^7.1.6\",\n+ \"@babel\/plugin-transform-react-jsx-source\": \"^7.2.0\",\n+ \"@babel\/preset-env\": \"^7.1.6\",\n+ \"@babel\/preset-flow\": \"^7.0.0\",\n+ \"@babel\/preset-react\": \"^7.0.0\",\n+ \"@reach\/menu-button\": \"^0.1.17\",\n+ \"@reach\/tooltip\": \"^0.2.2\",\n+ \"archiver\": \"^3.0.0\",\n+ \"babel-core\": \"^7.0.0-bridge\",\n+ \"babel-eslint\": \"^9.0.0\",\n+ \"babel-jest\": \"^24.7.1\",\n+ \"babel-loader\": \"^8.0.4\",\n+ \"child-process-promise\": \"^2.2.1\",\n+ \"chrome-launch\": \"^1.1.4\",\n+ \"classnames\": \"2.2.1\",\n+ \"cli-spinners\": \"^1.0.0\",\n+ \"clipboard-js\": \"^0.3.6\",\n+ \"cross-env\": \"^5.2.0\",\n+ \"crx\": \"^5.0.0\",\n+ \"css-loader\": \"^1.0.1\",\n+ \"error-stack-parser\": \"^2.0.2\",\n+ \"es6-symbol\": \"3.0.2\",\n+ \"escape-string-regexp\": \"^1.0.5\",\n+ \"eslint\": \"^4.19.1\",\n+ \"eslint-config-prettier\": \"^2.9.0\",\n+ \"eslint-config-react-app\": \"^2.1.0\",\n+ \"eslint-config-standard\": \"^11.0.0\",\n+ \"eslint-config-standard-react\": \"^6.0.0\",\n+ \"eslint-plugin-flowtype\": \"^2.47.1\",\n+ \"eslint-plugin-import\": \"^2.11.0\",\n+ \"eslint-plugin-jsx-a11y\": \"^5\",\n+ \"eslint-plugin-node\": \"^6.0.1\",\n+ \"eslint-plugin-prettier\": \"^2.6.0\",\n+ \"eslint-plugin-promise\": \"^3.7.0\",\n+ \"eslint-plugin-react\": \"^7.7.0\",\n+ \"eslint-plugin-react-hooks\": \"^1.6.0\",\n+ \"eslint-plugin-standard\": \"^3.0.1\",\n+ \"events\": \"^3.0.0\",\n+ \"fbjs\": \"0.5.1\",\n+ \"fbjs-scripts\": \"0.7.0\",\n+ \"firefox-profile\": \"^1.0.2\",\n+ \"flow-bin\": \"^0.103.0\",\n+ \"fs-extra\": \"^3.0.1\",\n+ \"gh-pages\": \"^1.0.0\",\n+ \"immutable\": \"3.7.6\",\n+ \"jest\": \"^24.7.1\",\n+ \"lerna\": \"^2.8.0\",\n+ \"lint-staged\": \"^7.0.5\",\n+ \"local-storage-fallback\": \"^4.1.1\",\n+ \"lodash.throttle\": \"^4.1.1\",\n+ \"log-update\": \"^2.0.0\",\n+ \"lru-cache\": \"^4.1.3\",\n+ \"memoize-one\": \"^3.1.1\",\n+ \"node-libs-browser\": \"0.5.3\",\n+ \"nullthrows\": \"^1.0.0\",\n+ \"object-assign\": \"4.0.1\",\n+ \"opener\": \"^1.5.1\",\n+ \"prettier\": \"^1.16.4\",\n+ \"prop-types\": \"^15.6.2\",\n+ \"raw-loader\": \"^3.1.0\",\n+ \"react\": \"^0.0.0-424099da6\",\n+ \"react-15\": \"npm:react@^15\",\n+ \"react-color\": \"^2.11.7\",\n+ \"react-dom\": \"^0.0.0-424099da6\",\n+ \"react-dom-15\": \"npm:react-dom@^15\",\n+ \"react-is\": \"0.0.0-424099da6\",\n+ \"react-native-web\": \"^0.11.5\",\n+ \"react-test-renderer\": \"^0.0.0-424099da6\",\n+ \"react-virtualized-auto-sizer\": \"^1.0.2\",\n+ \"request-promise\": \"^4.2.4\",\n+ \"rimraf\": \"^2.6.3\",\n+ \"scheduler\": \"^0.0.0-424099da6\",\n+ \"semver\": \"^5.5.1\",\n+ \"serve-static\": \"^1.14.1\",\n+ \"style-loader\": \"^0.23.1\",\n+ \"web-ext\": \"^3.0.0\",\n+ \"webpack\": \"^4.26.0\",\n+ \"webpack-cli\": \"^3.1.2\",\n+ \"webpack-dev-server\": \"^3.3.1\",\n+ \"yargs\": \"^13.2.4\"\n+ }\n+}\ndiff --git a\/packages\/react-devtools-core\/README.md b\/packages\/react-devtools-core\/README.md\nnew file mode 100644\nindex 0000000000..35615b3074\n--- \/dev\/null\n+++ b\/packages\/react-devtools-core\/README.md\n@@ -0,0 +1,44 @@\n+# `react-devtools-core`\n+\n+A standalone React DevTools implementation.\n+\n+This is a low-level package. If you're looking for the Electron app you can run, **use `react-devtools` package instead.**\n+\n+## API\n+\n+### `react-devtools-core`\n+\n+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:\n+\n+```js\n+const { connectToDevTools } = require(\"react-devtools-core\");\n+connectToDevTools({\n+ \/\/ Config options\n+});\n+\n+```\n+\n+Run `connectToDevTools()` in the same context as React to set up a connection to DevTools. \n+Be sure to run this function *before* importing e.g. `react`, `react-dom`, `react-native`.\n+\n+The `options` object may contain:\n+* `host: string` (defaults to \"localhost\") - Websocket will connect to this host.\n+* `port: number` (defaults to `8097`) - Websocket will connect to this port.\n+* `websocket: Websocket` - Custom websocked to use. Overrides `host` and `port` settings if provided.\n+* `resolveNativeStyle: (style: number) => ?Object` - Used by the React Native style plug-in.\n+* `isAppActive: () => boolean` - If provided, DevTools will poll this method and wait until it returns true before connecting to React.\n+\n+## `react-devtools-core\/standalone`\n+\n+Renders the DevTools interface into a DOM node.\n+\n+```js\n+require(\"react-devtools-core\/standalone\")\n+ .setContentDOMNode(document.getElementById(\"container\"))\n+ .setStatusListener(status => {\n+ \/\/ This callback is optional...\n+ })\n+ .startServer(port);\n+```\n+\n+Reference the `react-devtools` package for a complete integration example.\ndiff --git a\/packages\/react-devtools-core\/backend.js b\/packages\/react-devtools-core\/backend.js\nnew file mode 100644\nindex 0000000000..2c2a32d451\n--- \/dev\/null\n+++ b\/packages\/react-devtools-core\/backend.js\n@@ -0,0 +1 @@\n+module.exports = require('.\/dist\/backend');\ndiff --git a\/packages\/react-devtools-core\/package.json b\/packages\/react-devtools-core\/package.json\nnew file mode 100644\nindex 0000000000..30b606d728\n--- \/dev\/null\n+++ b\/packages\/react-devtools-core\/package.json\n@@ -0,0 +1,31 @@\n+{\n+ \"name\": \"react-devtools-core\",\n+ \"version\": \"4.0.0-alpha.9\",\n+ \"description\": \"Use react-devtools outside of the browser\",\n+ \"license\": \"MIT\",\n+ \"main\": \".\/dist\/backend.js\",\n+ \"repository\": {\n+ \"url\": \"https:\/\/github.com\/bvaughn\/react-devtools-experimental.git\",\n+ \"type\": \"git\"\n+ },\n+ \"files\": [\n+ \"dist\",\n+ \"backend.js\",\n+ \"standalone.js\"\n+ ],\n+ \"scripts\": {\n+ \"build\": \"yarn build:backend && yarn build:standalone\",\n+ \"build:backend\": \"cross-env NODE_ENV=production webpack --config webpack.backend.js\",\n+ \"build:standalone\": \"cross-env NODE_ENV=production webpack --config webpack.standalone.js\",\n+ \"prepublish\": \"yarn run build\",\n+ \"start:backend\": \"cross-env NODE_ENV=development webpack --config webpack.backend.js --watch\",\n+ \"start:standalone\": \"cross-env NODE_ENV=development webpack --config webpack.standalone.js --watch\"\n+ },\n+ \"dependencies\": {\n+ \"shell-quote\": \"^1.6.1\",\n+ \"ws\": \"^7\"\n+ },\n+ \"devDependencies\": {\n+ \"cross-env\": \"^3.1.4\"\n+ }\n+}\ndiff --git a\/packages\/react-devtools-core\/src\/backend.js b\/packages\/react-devtools-core\/src\/backend.js\nnew file mode 100644\nindex 0000000000..71dac50aa7\n--- \/dev\/null\n+++ b\/packages\/react-devtools-core\/src\/backend.js\n@@ -0,0 +1,270 @@\n+\/\/ @flow\n+\n+import Agent from 'src\/backend\/agent';\n+import Bridge from 'src\/bridge';\n+import { installHook } from 'src\/hook';\n+import { initBackend } from 'src\/backend';\n+import { __DEBUG__ } from 'src\/constants';\n+import setupNativeStyleEditor from 'src\/backend\/NativeStyleEditor\/setupNativeStyleEditor';\n+import { getDefaultComponentFilters } from 'src\/utils';\n+\n+import type { BackendBridge } from 'src\/bridge';\n+import type { ComponentFilter } from 'src\/types';\n+import type { DevToolsHook } from 'src\/backend\/types';\n+import type { ResolveNativeStyle } from 'src\/backend\/NativeStyleEditor\/setupNativeStyleEditor';\n+\n+type ConnectOptions = {\n+ host?: string,\n+ nativeStyleEditorValidAttributes?: $ReadOnlyArray<string>,\n+ port?: number,\n+ resolveRNStyle?: ResolveNativeStyle,\n+ isAppActive?: () => boolean,\n+ websocket?: ?WebSocket,\n+};\n+\n+installHook(window);\n+\n+const hook: DevToolsHook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+\n+let savedComponentFilters: Array<ComponentFilter> = getDefaultComponentFilters();\n+\n+function debug(methodName: string, ...args) {\n+ if (__DEBUG__) {\n+ console.log(\n+ `%c[core\/backend] %c${methodName}`,\n+ 'color: teal; font-weight: bold;',\n+ 'font-weight: bold;',\n+ ...args\n+ );\n+ }\n+}\n+\n+export function connectToDevTools(options: ?ConnectOptions) {\n+ const {\n+ host = 'localhost',\n+ nativeStyleEditorValidAttributes,\n+ port = 8097,\n+ websocket,\n+ resolveRNStyle = null,\n+ isAppActive = () => true,\n+ } = options || {};\n+\n+ let retryTimeoutID: TimeoutID | null = null;\n+\n+ function scheduleRetry() {\n+ if (retryTimeoutID === null) {\n+ \/\/ Two seconds because RN had issues with quick retries.\n+ retryTimeoutID = setTimeout(() => connectToDevTools(options), 2000);\n+ }\n+ }\n+\n+ if (!isAppActive()) {\n+ \/\/ If the app is in background, maybe retry later.\n+ \/\/ Don't actually attempt to connect until we're in foreground.\n+ scheduleRetry();\n+ return;\n+ }\n+\n+ let bridge: BackendBridge | null = null;\n+\n+ const messageListeners = [];\n+ const uri = 'ws:\/\/' + host + ':' + port;\n+\n+ \/\/ If existing websocket is passed, use it.\n+ \/\/ This is necessary to support our custom integrations.\n+ \/\/ See D6251744.\n+ const ws = websocket ? websocket : new window.WebSocket(uri);\n+ ws.onclose = handleClose;\n+ ws.onerror = handleFailed;\n+ ws.onmessage = handleMessage;\n+ ws.onopen = function() {\n+ bridge = new Bridge({\n+ listen(fn) {\n+ messageListeners.push(fn);\n+ return () => {\n+ const index = messageListeners.indexOf(fn);\n+ if (index >= 0) {\n+ messageListeners.splice(index, 1);\n+ }\n+ };\n+ },\n+ send(event: string, payload: any, transferable?: Array<any>) {\n+ if (ws.readyState === ws.OPEN) {\n+ if (__DEBUG__) {\n+ debug('wall.send()', event, payload);\n+ }\n+\n+ ws.send(JSON.stringify({ event, payload }));\n+ } else {\n+ if (__DEBUG__) {\n+ debug(\n+ 'wall.send()',\n+ 'Shutting down bridge because of closed WebSocket connection'\n+ );\n+ }\n+\n+ if (bridge !== null) {\n+ bridge.emit('shutdown');\n+ }\n+\n+ scheduleRetry();\n+ }\n+ },\n+ });\n+ bridge.addListener(\n+ 'inspectElement',\n+ ({ id, rendererID }: { id: number, rendererID: number }) => {\n+ const renderer = agent.rendererInterfaces[rendererID];\n+ if (renderer != null) {\n+ \/\/ Send event for RN to highlight.\n+ const nodes: ?Array<HTMLElement> = renderer.findNativeNodesForFiberID(\n+ id\n+ );\n+ if (nodes != null && nodes[0] != null) {\n+ agent.emit('showNativeHighlight', nodes[0]);\n+ }\n+ }\n+ }\n+ );\n+ bridge.addListener(\n+ 'updateComponentFilters',\n+ (componentFilters: Array<ComponentFilter>) => {\n+ \/\/ Save filter changes in memory, in case DevTools is reloaded.\n+ \/\/ In that case, the renderer will already be using the updated values.\n+ \/\/ We'll lose these in between backend reloads but that can't be helped.\n+ savedComponentFilters = componentFilters;\n+ }\n+ );\n+\n+ \/\/ The renderer interface doesn't read saved component filters directly,\n+ \/\/ because they are generally stored in localStorage within the context of the extension.\n+ \/\/ Because of this it relies on the extension to pass filters.\n+ \/\/ In the case of the standalone DevTools being used with a website,\n+ \/\/ saved filters are injected along with the backend script tag so we shouldn't override them here.\n+ \/\/ This injection strategy doesn't work for React Native though.\n+ \/\/ Ideally the backend would save the filters itself, but RN doesn't provide a sync storage solution.\n+ \/\/ So for now we just fall back to using the default filters...\n+ if (window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ == null) {\n+ bridge.send('overrideComponentFilters', savedComponentFilters);\n+ }\n+\n+ \/\/ TODO (npm-packages) Warn if \"isBackendStorageAPISupported\"\n+ const agent = new Agent(bridge);\n+ agent.addListener('shutdown', () => {\n+ \/\/ If we received 'shutdown' from `agent`, we assume the `bridge` is already shutting down,\n+ \/\/ and that caused the 'shutdown' event on the `agent`, so we don't need to call `bridge.shutdown()` here.\n+ hook.emit('shutdown');\n+ });\n+\n+ initBackend(hook, agent, window);\n+\n+ \/\/ Setup React Native style editor if the environment supports it.\n+ if (resolveRNStyle != null || hook.resolveRNStyle != null) {\n+ setupNativeStyleEditor(\n+ bridge,\n+ agent,\n+ ((resolveRNStyle || hook.resolveRNStyle: any): ResolveNativeStyle),\n+ nativeStyleEditorValidAttributes ||\n+ hook.nativeStyleEditorValidAttributes ||\n+ null\n+ );\n+ } else {\n+ \/\/ Otherwise listen to detect if the environment later supports it.\n+ \/\/ For example, Flipper does not eagerly inject these values.\n+ \/\/ Instead it relies on the React Native Inspector to lazily inject them.\n+ let lazyResolveRNStyle;\n+ let lazyNativeStyleEditorValidAttributes;\n+\n+ const initAfterTick = () => {\n+ if (bridge !== null) {\n+ setupNativeStyleEditor(\n+ bridge,\n+ agent,\n+ lazyResolveRNStyle,\n+ lazyNativeStyleEditorValidAttributes\n+ );\n+ }\n+ };\n+\n+ Object.defineProperty(\n+ hook,\n+ 'resolveRNStyle',\n+ ({\n+ enumerable: false,\n+ get() {\n+ return lazyResolveRNStyle;\n+ },\n+ set(value) {\n+ lazyResolveRNStyle = value;\n+ initAfterTick();\n+ },\n+ }: Object)\n+ );\n+ Object.defineProperty(\n+ hook,\n+ 'nativeStyleEditorValidAttributes',\n+ ({\n+ enumerable: false,\n+ get() {\n+ return lazyNativeStyleEditorValidAttributes;\n+ },\n+ set(value) {\n+ lazyNativeStyleEditorValidAttributes = value;\n+ initAfterTick();\n+ },\n+ }: Object)\n+ );\n+ }\n+ };\n+\n+ function handleClose() {\n+ if (__DEBUG__) {\n+ debug('WebSocket.onclose');\n+ }\n+\n+ if (bridge !== null) {\n+ bridge.emit('shutdown');\n+ }\n+\n+ scheduleRetry();\n+ }\n+\n+ function handleFailed() {\n+ if (__DEBUG__) {\n+ debug('WebSocket.onerror');\n+ }\n+\n+ scheduleRetry();\n+ }\n+\n+ function handleMessage(event) {\n+ let data;\n+ try {\n+ if (typeof event.data === 'string') {\n+ data = JSON.parse(event.data);\n+ if (__DEBUG__) {\n+ debug('WebSocket.onmessage', data);\n+ }\n+ } else {\n+ throw Error();\n+ }\n+ } catch (e) {\n+ console.error(\n+ '[React DevTools] Failed to parse JSON: ' + String(event.data)\n+ );\n+ return;\n+ }\n+ messageListeners.forEach(fn => {\n+ try {\n+ fn(data);\n+ } catch (error) {\n+ \/\/ jsc doesn't play so well with tracebacks that go into eval'd code,\n+ \/\/ so the stack trace here will stop at the `eval()` call. Getting the\n+ \/\/ message that caused the error is the best we can do for now.\n+ console.log('[React DevTools] Error calling listener', data);\n+ console.log('error:', error);\n+ throw error;\n+ }\n+ });\n+ }\n+}\ndiff --git a\/packages\/react-devtools-core\/src\/editor.js b\/packages\/react-devtools-core\/src\/editor.js\nnew file mode 100644\nindex 0000000000..26043f07f6\n--- \/dev\/null\n+++ b\/packages\/react-devtools-core\/src\/editor.js\n@@ -0,0 +1,183 @@\n+\/\/ @flow\n+\n+import { existsSync } from 'fs';\n+import { basename, join, isAbsolute } from 'path';\n+import { execSync, spawn } from 'child_process';\n+import { parse } from 'shell-quote';\n+\n+function isTerminalEditor(editor: string): boolean {\n+ switch (editor) {\n+ case 'vim':\n+ case 'emacs':\n+ case 'nano':\n+ return true;\n+ default:\n+ return false;\n+ }\n+}\n+\n+\/\/ Map from full process name to binary that starts the process\n+\/\/ We can't just re-use full process name, because it will spawn a new instance\n+\/\/ of the app every time\n+const COMMON_EDITORS = {\n+ '\/Applications\/Atom.app\/Contents\/MacOS\/Atom': 'atom',\n+ '\/Applications\/Atom Beta.app\/Contents\/MacOS\/Atom Beta':\n+ '\/Applications\/Atom Beta.app\/Contents\/MacOS\/Atom Beta',\n+ '\/Applications\/Sublime Text.app\/Contents\/MacOS\/Sublime Text':\n+ '\/Applications\/Sublime Text.app\/Contents\/SharedSupport\/bin\/subl',\n+ '\/Applications\/Sublime Text 2.app\/Contents\/MacOS\/Sublime Text 2':\n+ '\/Applications\/Sublime Text 2.app\/Contents\/SharedSupport\/bin\/subl',\n+ '\/Applications\/Visual Studio Code.app\/Contents\/MacOS\/Electron': 'code',\n+};\n+\n+function getArgumentsForLineNumber(\n+ editor: string,\n+ filePath: string,\n+ lineNumber: number\n+): Array<string> {\n+ switch (basename(editor)) {\n+ case 'vim':\n+ case 'mvim':\n+ return [filePath, '+' + lineNumber];\n+ case 'atom':\n+ case 'Atom':\n+ case 'Atom Beta':\n+ case 'subl':\n+ case 'sublime':\n+ case 'wstorm':\n+ case 'appcode':\n+ case 'charm':\n+ case 'idea':\n+ return [filePath + ':' + lineNumber];\n+ case 'joe':\n+ case 'emacs':\n+ case 'emacsclient':\n+ return ['+' + lineNumber, filePath];\n+ case 'rmate':\n+ case 'mate':\n+ case 'mine':\n+ return ['--line', lineNumber + '', filePath];\n+ case 'code':\n+ return ['-g', filePath + ':' + lineNumber];\n+ default:\n+ \/\/ For all others, drop the lineNumber until we have\n+ \/\/ a mapping above, since providing the lineNumber incorrectly\n+ \/\/ can result in errors or confusing behavior.\n+ return [filePath];\n+ }\n+}\n+\n+function guessEditor(): Array<string> {\n+ \/\/ Explicit config always wins\n+ if (process.env.REACT_EDITOR) {\n+ return parse(process.env.REACT_EDITOR);\n+ }\n+\n+ \/\/ Using `ps x` on OSX we can find out which editor is currently running.\n+ \/\/ Potentially we could use similar technique for Windows and Linux\n+ if (process.platform === 'darwin') {\n+ try {\n+ const output = execSync('ps x').toString();\n+ const processNames = Object.keys(COMMON_EDITORS);\n+ for (let i = 0; i < processNames.length; i++) {\n+ const processName = processNames[i];\n+ if (output.indexOf(processName) !== -1) {\n+ return [COMMON_EDITORS[processName]];\n+ }\n+ }\n+ } catch (error) {\n+ \/\/ Ignore...\n+ }\n+ }\n+\n+ \/\/ Last resort, use old skool env vars\n+ if (process.env.VISUAL) {\n+ return [process.env.VISUAL];\n+ } else if (process.env.EDITOR) {\n+ return [process.env.EDITOR];\n+ }\n+\n+ return [];\n+}\n+\n+let childProcess = null;\n+\n+export function getValidFilePath(\n+ maybeRelativePath: string,\n+ absoluteProjectRoots: Array<string>\n+): string | null {\n+ \/\/ We use relative paths at Facebook with deterministic builds.\n+ \/\/ This is why our internal tooling calls React DevTools with absoluteProjectRoots.\n+ \/\/ If the filename is absolute then we don't need to care about this.\n+ if (isAbsolute(maybeRelativePath)) {\n+ if (existsSync(maybeRelativePath)) {\n+ return maybeRelativePath;\n+ }\n+ } else {\n+ for (let i = 0; i < absoluteProjectRoots.length; i++) {\n+ const projectRoot = absoluteProjectRoots[i];\n+ const joinedPath = join(projectRoot, maybeRelativePath);\n+ if (existsSync(joinedPath)) {\n+ return joinedPath;\n+ }\n+ }\n+ }\n+\n+ return null;\n+}\n+\n+export function doesFilePathExist(\n+ maybeRelativePath: string,\n+ absoluteProjectRoots: Array<string>\n+): boolean {\n+ return getValidFilePath(maybeRelativePath, absoluteProjectRoots) !== null;\n+}\n+\n+export function launchEditor(\n+ maybeRelativePath: string,\n+ lineNumber: number,\n+ absoluteProjectRoots: Array<string>\n+) {\n+ const filePath = getValidFilePath(maybeRelativePath, absoluteProjectRoots);\n+ if (filePath === null) {\n+ return;\n+ }\n+\n+ \/\/ Sanitize lineNumber to prevent malicious use on win32\n+ \/\/ via: https:\/\/github.com\/nodejs\/node\/blob\/c3bb4b1aa5e907d489619fb43d233c3336bfc03d\/lib\/child_process.js#L333\n+ if (lineNumber && isNaN(lineNumber)) {\n+ return;\n+ }\n+\n+ let [editor, ...args] = guessEditor();\n+ if (!editor) {\n+ return;\n+ }\n+\n+ if (lineNumber) {\n+ args = args.concat(getArgumentsForLineNumber(editor, filePath, lineNumber));\n+ } else {\n+ args.push(filePath);\n+ }\n+\n+ if (childProcess && isTerminalEditor(editor)) {\n+ \/\/ There's an existing editor process already and it's attached\n+ \/\/ to the terminal, so go kill it. Otherwise two separate editor\n+ \/\/ instances attach to the stdin\/stdout which gets confusing.\n+ childProcess.kill('SIGKILL');\n+ }\n+\n+ if (process.platform === 'win32') {\n+ \/\/ On Windows, launch the editor in a shell because spawn can only\n+ \/\/ launch .exe files.\n+ childProcess = spawn('cmd.exe', ['\/C', editor].concat(args), {\n+ stdio: 'inherit',\n+ });\n+ } else {\n+ childProcess = spawn(editor, args, { stdio: 'inherit' });\n+ }\n+ childProcess.on('error', function() {});\n+ childProcess.on('exit', function(errorCode) {\n+ childProcess = null;\n+ });\n+}\ndiff --git a\/packages\/react-devtools-core\/src\/standalone.js b\/packages\/react-devtools-core\/src\/standalone.js\nnew file mode 100644\nindex 0000000000..c93a3de812\n--- \/dev\/null\n+++ b\/packages\/react-devtools-core\/src\/standalone.js\n@@ -0,0 +1,319 @@\n+\/\/ @flow\n+\n+import { createElement } from 'react';\n+import {\n+ \/\/ $FlowFixMe Flow does not yet know about flushSync()\n+ flushSync,\n+ \/\/ $FlowFixMe Flow does not yet know about createRoot()\n+ unstable_createRoot as createRoot,\n+} from 'react-dom';\n+import Bridge from 'src\/bridge';\n+import Store from 'src\/devtools\/store';\n+import { getSavedComponentFilters, getAppendComponentStack } from 'src\/utils';\n+import { Server } from 'ws';\n+import { existsSync, readFileSync } from 'fs';\n+import { installHook } from 'src\/hook';\n+import DevTools from 'src\/devtools\/views\/DevTools';\n+import { doesFilePathExist, launchEditor } from '.\/editor';\n+import { __DEBUG__ } from 'src\/constants';\n+\n+import type { FrontendBridge } from 'src\/bridge';\n+import type { InspectedElement } from 'src\/devtools\/views\/Components\/types';\n+\n+installHook(window);\n+\n+export type StatusListener = (message: string) => void;\n+\n+let node: HTMLElement = ((null: any): HTMLElement);\n+let nodeWaitingToConnectHTML: string = '';\n+let projectRoots: Array<string> = [];\n+let statusListener: StatusListener = (message: string) => {};\n+\n+\/\/ Unlike browser extension users, people using the standalone have actively installed version 4,\n+\/\/ So we probably don't need to show them a changelog notice.\n+\/\/ We should give embedded users (e.g. Nuclide, Sonar) a way of showing this dialog though.\n+let showWelcomeToTheNewDevToolsDialog: boolean = false;\n+\n+function setContentDOMNode(value: HTMLElement) {\n+ node = value;\n+\n+ \/\/ Save so we can restore the exact waiting message between sessions.\n+ nodeWaitingToConnectHTML = node.innerHTML;\n+\n+ return DevtoolsUI;\n+}\n+\n+function setProjectRoots(value: Array<string>) {\n+ projectRoots = value;\n+}\n+\n+function setStatusListener(value: StatusListener) {\n+ statusListener = value;\n+ return DevtoolsUI;\n+}\n+\n+function setShowWelcomeToTheNewDevToolsDialog(value: boolean) {\n+ showWelcomeToTheNewDevToolsDialog = value;\n+ return DevtoolsUI;\n+}\n+\n+let bridge: FrontendBridge | null = null;\n+let store: Store | null = null;\n+let root = null;\n+\n+const log = (...args) => console.log('[React DevTools]', ...args);\n+log.warn = (...args) => console.warn('[React DevTools]', ...args);\n+log.error = (...args) => console.error('[React DevTools]', ...args);\n+\n+function debug(methodName: string, ...args) {\n+ if (__DEBUG__) {\n+ console.log(\n+ `%c[core\/standalone] %c${methodName}`,\n+ 'color: teal; font-weight: bold;',\n+ 'font-weight: bold;',\n+ ...args\n+ );\n+ }\n+}\n+\n+function safeUnmount() {\n+ flushSync(() => {\n+ if (root !== null) {\n+ root.unmount();\n+ }\n+ });\n+ root = null;\n+}\n+\n+function reload() {\n+ safeUnmount();\n+\n+ node.innerHTML = '';\n+\n+ setTimeout(() => {\n+ root = createRoot(node);\n+ root.render(\n+ createElement(DevTools, {\n+ bridge: ((bridge: any): FrontendBridge),\n+ canViewElementSourceFunction,\n+ showTabBar: true,\n+ showWelcomeToTheNewDevToolsDialog,\n+ store: ((store: any): Store),\n+ warnIfLegacyBackendDetected: true,\n+ viewElementSourceFunction,\n+ })\n+ );\n+ }, 100);\n+}\n+\n+function canViewElementSourceFunction(\n+ inspectedElement: InspectedElement\n+): boolean {\n+ if (\n+ inspectedElement.canViewSource === false ||\n+ inspectedElement.source === null\n+ ) {\n+ return false;\n+ }\n+\n+ const { source } = inspectedElement;\n+\n+ return doesFilePathExist(source.fileName, projectRoots);\n+}\n+\n+function viewElementSourceFunction(\n+ id: number,\n+ inspectedElement: InspectedElement\n+): void {\n+ const { source } = inspectedElement;\n+ if (source !== null) {\n+ launchEditor(source.fileName, source.lineNumber, projectRoots);\n+ } else {\n+ log.error('Cannot inspect element', id);\n+ }\n+}\n+\n+function onDisconnected() {\n+ safeUnmount();\n+\n+ node.innerHTML = nodeWaitingToConnectHTML;\n+}\n+\n+function onError({ code, message }) {\n+ safeUnmount();\n+\n+ if (code === 'EADDRINUSE') {\n+ node.innerHTML = `<div id=\"waiting\"><h2>Another instance of DevTools is running<\/h2><\/div>`;\n+ } else {\n+ node.innerHTML = `<div id=\"waiting\"><h2>Unknown error (${message})<\/h2><\/div>`;\n+ }\n+}\n+\n+function initialize(socket: WebSocket) {\n+ const listeners = [];\n+ socket.onmessage = event => {\n+ let data;\n+ try {\n+ if (typeof event.data === 'string') {\n+ data = JSON.parse(event.data);\n+\n+ if (__DEBUG__) {\n+ debug('WebSocket.onmessage', data);\n+ }\n+ } else {\n+ throw Error();\n+ }\n+ } catch (e) {\n+ log.error('Failed to parse JSON', event.data);\n+ return;\n+ }\n+ listeners.forEach(fn => {\n+ try {\n+ fn(data);\n+ } catch (error) {\n+ log.error('Error calling listener', data);\n+ throw error;\n+ }\n+ });\n+ };\n+\n+ bridge = new Bridge({\n+ listen(fn) {\n+ listeners.push(fn);\n+ return () => {\n+ const index = listeners.indexOf(fn);\n+ if (index >= 0) {\n+ listeners.splice(index, 1);\n+ }\n+ };\n+ },\n+ send(event: string, payload: any, transferable?: Array<any>) {\n+ if (socket.readyState === socket.OPEN) {\n+ socket.send(JSON.stringify({ event, payload }));\n+ }\n+ },\n+ });\n+ ((bridge: any): FrontendBridge).addListener('shutdown', () => {\n+ socket.close();\n+ });\n+\n+ store = new Store(bridge, { supportsNativeInspection: false });\n+\n+ log('Connected');\n+ reload();\n+}\n+\n+let startServerTimeoutID: TimeoutID | null = null;\n+\n+function connectToSocket(socket: WebSocket) {\n+ socket.onerror = err => {\n+ onDisconnected();\n+ log.error('Error with websocket connection', err);\n+ };\n+ socket.onclose = () => {\n+ onDisconnected();\n+ log('Connection to RN closed');\n+ };\n+ initialize(socket);\n+\n+ return {\n+ close: function() {\n+ onDisconnected();\n+ },\n+ };\n+}\n+\n+function startServer(port?: number = 8097) {\n+ const httpServer = require('http').createServer();\n+ const server = new Server({ server: httpServer });\n+ let connected: WebSocket | null = null;\n+ server.on('connection', (socket: WebSocket) => {\n+ if (connected !== null) {\n+ connected.close();\n+ log.warn(\n+ 'Only one connection allowed at a time.',\n+ 'Closing the previous connection'\n+ );\n+ }\n+ connected = socket;\n+ socket.onerror = error => {\n+ connected = null;\n+ onDisconnected();\n+ log.error('Error with websocket connection', error);\n+ };\n+ socket.onclose = () => {\n+ connected = null;\n+ onDisconnected();\n+ log('Connection to RN closed');\n+ };\n+ initialize(socket);\n+ });\n+\n+ server.on('error', event => {\n+ onError(event);\n+ log.error('Failed to start the DevTools server', event);\n+ startServerTimeoutID = setTimeout(() => startServer(port), 1000);\n+ });\n+\n+ httpServer.on('request', (request, response) => {\n+ \/\/ NPM installs should read from node_modules,\n+ \/\/ But local dev mode needs to use a relative path.\n+ const basePath = existsSync('.\/node_modules\/react-devtools-core')\n+ ? 'node_modules\/react-devtools-core'\n+ : '..\/react-devtools-core';\n+\n+ \/\/ Serve a file that immediately sets up the connection.\n+ const backendFile = readFileSync(`${basePath}\/dist\/backend.js`);\n+\n+ \/\/ The renderer interface doesn't read saved component filters directly,\n+ \/\/ because they are generally stored in localStorage within the context of the extension.\n+ \/\/ Because of this it relies on the extension to pass filters, so include them wth the response here.\n+ \/\/ This will ensure that saved filters are shared across different web pages.\n+ const savedPreferencesString = `\n+ window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = ${JSON.stringify(\n+ getSavedComponentFilters()\n+ )};\n+ window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = ${JSON.stringify(\n+ getAppendComponentStack()\n+ )};`;\n+\n+ response.end(\n+ savedPreferencesString +\n+ '\\n;' +\n+ backendFile.toString() +\n+ '\\n;' +\n+ 'ReactDevToolsBackend.connectToDevTools();'\n+ );\n+ });\n+\n+ httpServer.on('error', event => {\n+ onError(event);\n+ statusListener('Failed to start the server.');\n+ startServerTimeoutID = setTimeout(() => startServer(port), 1000);\n+ });\n+\n+ httpServer.listen(port, () => {\n+ statusListener('The server is listening on the port ' + port + '.');\n+ });\n+\n+ return {\n+ close: function() {\n+ connected = null;\n+ onDisconnected();\n+ clearTimeout(startServerTimeoutID);\n+ server.close();\n+ httpServer.close();\n+ },\n+ };\n+}\n+\n+const DevtoolsUI = {\n+ connectToSocket,\n+ setContentDOMNode,\n+ setProjectRoots,\n+ setShowWelcomeToTheNewDevToolsDialog,\n+ setStatusListener,\n+ startServer,\n+};\n+\n+export default DevtoolsUI;\ndiff --git a\/packages\/react-devtools-core\/standalone.js b\/packages\/react-devtools-core\/standalone.js\nnew file mode 100644\nindex 0000000000..fe55aa11d5\n--- \/dev\/null\n+++ b\/packages\/react-devtools-core\/standalone.js\n@@ -0,0 +1 @@\n+module.exports = require('.\/dist\/standalone');\ndiff --git a\/packages\/react-devtools-core\/webpack.backend.js b\/packages\/react-devtools-core\/webpack.backend.js\nnew file mode 100644\nindex 0000000000..14ef8a2cb0\n--- \/dev\/null\n+++ b\/packages\/react-devtools-core\/webpack.backend.js\n@@ -0,0 +1,54 @@\n+const { resolve } = require('path');\n+const { DefinePlugin } = require('webpack');\n+const { getGitHubURL, getVersionString } = require('..\/..\/shells\/utils');\n+\n+const NODE_ENV = process.env.NODE_ENV;\n+if (!NODE_ENV) {\n+ console.error('NODE_ENV not set');\n+ process.exit(1);\n+}\n+\n+const __DEV__ = NODE_ENV === 'development';\n+\n+const GITHUB_URL = getGitHubURL();\n+const DEVTOOLS_VERSION = getVersionString();\n+\n+module.exports = {\n+ mode: __DEV__ ? 'development' : 'production',\n+ devtool: __DEV__ ? 'cheap-module-eval-source-map' : false,\n+ entry: {\n+ backend: '.\/src\/backend.js',\n+ },\n+ output: {\n+ path: __dirname + '\/dist',\n+ filename: '[name].js',\n+\n+ \/\/ This name is important; standalone references it in order to connect.\n+ library: 'ReactDevToolsBackend',\n+ libraryTarget: 'umd',\n+ },\n+ resolve: {\n+ alias: {\n+ src: resolve(__dirname, '..\/..\/src'),\n+ },\n+ },\n+ plugins: [\n+ new DefinePlugin({\n+ __DEV__: true,\n+ __TEST__: false,\n+ 'process.env.DEVTOOLS_VERSION': `\"${DEVTOOLS_VERSION}\"`,\n+ 'process.env.GITHUB_URL': `\"${GITHUB_URL}\"`,\n+ }),\n+ ],\n+ module: {\n+ rules: [\n+ {\n+ test: \/\\.js$\/,\n+ loader: 'babel-loader',\n+ options: {\n+ configFile: resolve(__dirname, '..\/..\/babel.config.js'),\n+ },\n+ },\n+ ],\n+ },\n+};\ndiff --git a\/packages\/react-devtools-core\/webpack.standalone.js b\/packages\/react-devtools-core\/webpack.standalone.js\nnew file mode 100644\nindex 0000000000..034d281a57\n--- \/dev\/null\n+++ b\/packages\/react-devtools-core\/webpack.standalone.js\n@@ -0,0 +1,74 @@\n+const { resolve } = require('path');\n+const { DefinePlugin } = require('webpack');\n+const { getGitHubURL, getVersionString } = require('..\/..\/shells\/utils');\n+\n+const NODE_ENV = process.env.NODE_ENV;\n+if (!NODE_ENV) {\n+ console.error('NODE_ENV not set');\n+ process.exit(1);\n+}\n+\n+const __DEV__ = NODE_ENV === 'development';\n+\n+const GITHUB_URL = getGitHubURL();\n+const DEVTOOLS_VERSION = getVersionString();\n+\n+module.exports = {\n+ mode: __DEV__ ? 'development' : 'production',\n+ devtool: __DEV__ ? 'cheap-module-eval-source-map' : false,\n+ target: 'electron-main',\n+ entry: {\n+ standalone: '.\/src\/standalone.js',\n+ },\n+ output: {\n+ path: __dirname + '\/dist',\n+ filename: '[name].js',\n+ library: '[name]',\n+ libraryTarget: 'commonjs2',\n+ },\n+ resolve: {\n+ alias: {\n+ src: resolve(__dirname, '..\/..\/src'),\n+ },\n+ },\n+ plugins: [\n+ new DefinePlugin({\n+ __DEV__: false,\n+ __TEST__: false,\n+ 'process.env.DEVTOOLS_VERSION': `\"${DEVTOOLS_VERSION}\"`,\n+ 'process.env.GITHUB_URL': `\"${GITHUB_URL}\"`,\n+ 'process.env.NODE_ENV': `\"${NODE_ENV}\"`,\n+ }),\n+ ],\n+ module: {\n+ rules: [\n+ {\n+ test: \/\\.js$\/,\n+ loader: 'babel-loader',\n+ options: {\n+ configFile: resolve(__dirname, '..\/..\/babel.config.js'),\n+ },\n+ },\n+ {\n+ test: \/\\.css$\/,\n+ use: [\n+ {\n+ loader: 'style-loader',\n+ },\n+ {\n+ loader: 'css-loader',\n+ options: {\n+ \/\/ WARNING It's important that we disable CSS source maps for production builds.\n+ \/\/ This causes style-loader to insert styles via a <style> tag rather than URL.createObjectURL,\n+ \/\/ which in turn avoids a nasty Electron\/Chromium bug that breaks DevTools in Nuclide.\n+ \/\/ (Calls to URL.createObjectURL seem to crash the webview process.)\n+ sourceMap: __DEV__,\n+ modules: true,\n+ localIdentName: '[local]___[hash:base64:5]',\n+ },\n+ },\n+ ],\n+ },\n+ ],\n+ },\n+};\ndiff --git a\/packages\/react-devtools-inline\/README.md b\/packages\/react-devtools-inline\/README.md\nnew file mode 100644\nindex 0000000000..b576b40db8\n--- \/dev\/null\n+++ b\/packages\/react-devtools-inline\/README.md\n@@ -0,0 +1,146 @@\n+# `react-devtools-inline`\n+\n+React DevTools implementation for embedding within a browser-based IDE (e.g. [CodeSandbox](https:\/\/codesandbox.io\/), [StackBlitz](https:\/\/stackblitz.com\/)).\n+\n+This is a low-level package. If you're looking for the standalone DevTools app, **use the `react-devtools` package instead.**\n+\n+## Usage\n+\n+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>).\n+\n+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:\n+\n+1. Frontend (DevTools interface) initialized in the main `window`.\n+1. Backend initialized in an `iframe`.\n+1. Backend activated.\n+\n+<sup>1<\/sup> Sandboxed iframes are supported.\n+\n+## API\n+\n+### `react-devtools-inline\/backend`\n+\n+* **`initialize(contentWindow)`** -\n+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!)\n+* **`activate(contentWindow)`** -\n+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.\n+\n+```js\n+import { activate, initialize } from 'react-devtools-inline\/backend';\n+\n+\/\/ Call this before importing React (or any other packages that might import React).\n+initialize();\n+\n+\/\/ Call this only once the frontend has been initialized.\n+activate();\n+```\n+\n+### `react-devtools-inline\/frontend`\n+\n+* **`initialize(contentWindow)`** -\n+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>.\n+\n+```js\n+import { initialize } from 'react-devtools-inline\/frontend';\n+\n+\/\/ This should be the iframe the backend hook has been installed in.\n+const iframe = document.getElementById(frameID);\n+const contentWindow = iframe.contentWindow;\n+\n+\/\/ This returns a React component that can be rendered into your app.\n+\/\/ <DevTools {...props} \/>\n+const DevTools = initialize(contentWindow);\n+```\n+\n+<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`.\n+\n+## Examples\n+\n+### Configuring a same-origin `iframe`\n+\n+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.\n+\n+```js\n+import {\n+ activate as activateBackend,\n+ initialize as initializeBackend\n+} from 'react-devtools-inline\/backend';\n+import { initialize as initializeFrontend } from 'react-devtools-inline\/frontend';\n+\n+\/\/ The React app you want to inspect with DevTools is running within this iframe:\n+const iframe = document.getElementById('target');\n+const { contentWindow } = iframe;\n+\n+\/\/ Installs the global hook into the iframe.\n+\/\/ This must be called before React is loaded into that frame.\n+initializeBackend(contentWindow);\n+\n+\/\/ React application can be injected into <iframe> at any time now...\n+\/\/ Note that this would need to be done via <script> tag injection,\n+\/\/ as setting the src of the <iframe> would load a new page (withou the injected backend).\n+\n+\/\/ Initialize DevTools UI to listen to the hook we just installed.\n+\/\/ This returns a React component we can render anywhere in the parent window.\n+const DevTools = initializeFrontend(contentWindow);\n+\n+\/\/ <DevTools \/> interface can be rendered in the parent window at any time now...\n+\/\/ Be sure to use either ReactDOM.unstable_createRoot()\n+\/\/ or ReactDOM.unstable_createSyncRoot() to render this component.\n+\n+\/\/ Let the backend know the frontend is ready and listening.\n+activateBackend(contentWindow);\n+```\n+\n+### Configuring a sandboxed `iframe`\n+\n+Sandboxed `iframe`s are also supported but require more complex initialization.\n+\n+**`iframe.html`**\n+```js\n+import { activate, initialize } from \"react-devtools-inline\/backend\";\n+\n+\/\/ The DevTooks hook needs to be installed before React is even required!\n+\/\/ The safest way to do this is probably to install it in a separate script tag.\n+initialize(window);\n+\n+\/\/ Wait for the frontend to let us know that it's ready.\n+function onMessage({ data }) {\n+ switch (data.type) {\n+ case \"activate-backend\":\n+ window.removeEventListener(\"message\", onMessage);\n+\n+ activate(window);\n+ break;\n+ default:\n+ break;\n+ }\n+}\n+\n+window.addEventListener(\"message\", onMessage);\n+```\n+\n+**`main-window.html`**\n+```js\n+import { initialize } from \"react-devtools-inline\/frontend\";\n+\n+const iframe = document.getElementById(\"target\");\n+const { contentWindow } = iframe;\n+\n+\/\/ Initialize DevTools UI to listen to the iframe.\n+\/\/ This returns a React component we can render anywhere in the main window.\n+\/\/ Be sure to use either ReactDOM.unstable_createRoot()\n+\/\/ or ReactDOM.unstable_createSyncRoot() to render this component.\n+const DevTools = initialize(contentWindow);\n+\n+\/\/ Let the backend know to initialize itself.\n+\/\/ We can't do this directly because the iframe is sandboxed.\n+\/\/ Only initialize the backend once the DevTools frontend has been initialized.\n+iframe.onload = () => {\n+ contentWindow.postMessage(\n+ {\n+ type: \"activate-backend\"\n+ },\n+ \"*\"\n+ );\n+};\n+```\n\\ No newline at end of file\ndiff --git a\/packages\/react-devtools-inline\/backend.js b\/packages\/react-devtools-inline\/backend.js\nnew file mode 100644\nindex 0000000000..2c2a32d451\n--- \/dev\/null\n+++ b\/packages\/react-devtools-inline\/backend.js\n@@ -0,0 +1 @@\n+module.exports = require('.\/dist\/backend');\ndiff --git a\/packages\/react-devtools-inline\/frontend.js b\/packages\/react-devtools-inline\/frontend.js\nnew file mode 100644\nindex 0000000000..a86be22376\n--- \/dev\/null\n+++ b\/packages\/react-devtools-inline\/frontend.js\n@@ -0,0 +1 @@\n+module.exports = require('.\/dist\/frontend');\ndiff --git a\/packages\/react-devtools-inline\/package.json b\/packages\/react-devtools-inline\/package.json\nnew file mode 100644\nindex 0000000000..2e6ddbe5c2\n--- \/dev\/null\n+++ b\/packages\/react-devtools-inline\/package.json\n@@ -0,0 +1,25 @@\n+{\n+ \"name\": \"react-devtools-inline\",\n+ \"version\": \"4.0.0-alpha.9\",\n+ \"description\": \"Embed react-devtools within a website\",\n+ \"license\": \"MIT\",\n+ \"main\": \".\/dist\/backend.js\",\n+ \"repository\": {\n+ \"url\": \"https:\/\/github.com\/bvaughn\/react-devtools-experimental.git\",\n+ \"type\": \"git\"\n+ },\n+ \"files\": [\n+ \"dist\",\n+ \"backend.js\",\n+ \"frontend.js\"\n+ ],\n+ \"scripts\": {\n+ \"build\": \"cross-env NODE_ENV=production webpack --config webpack.config.js\",\n+ \"prepublish\": \"yarn run build\",\n+ \"start\": \"cross-env NODE_ENV=development webpack --config webpack.config.js --watch\"\n+ },\n+ \"dependencies\": {},\n+ \"devDependencies\": {\n+ \"cross-env\": \"^3.1.4\"\n+ }\n+}\ndiff --git a\/packages\/react-devtools-inline\/src\/backend.js b\/packages\/react-devtools-inline\/src\/backend.js\nnew file mode 100644\nindex 0000000000..4b437458f5\n--- \/dev\/null\n+++ b\/packages\/react-devtools-inline\/src\/backend.js\n@@ -0,0 +1,96 @@\n+\/** @flow *\/\n+\n+import Agent from 'src\/backend\/agent';\n+import Bridge from 'src\/bridge';\n+import { initBackend } from 'src\/backend';\n+import { installHook } from 'src\/hook';\n+import setupNativeStyleEditor from 'src\/backend\/NativeStyleEditor\/setupNativeStyleEditor';\n+import {\n+ MESSAGE_TYPE_GET_SAVED_PREFERENCES,\n+ MESSAGE_TYPE_SAVED_PREFERENCES,\n+} from '.\/constants';\n+\n+function startActivation(contentWindow: window) {\n+ const { parent } = contentWindow;\n+\n+ const onMessage = ({ data }) => {\n+ switch (data.type) {\n+ case MESSAGE_TYPE_SAVED_PREFERENCES:\n+ \/\/ This is the only message we're listening for,\n+ \/\/ so it's safe to cleanup after we've received it.\n+ contentWindow.removeEventListener('message', onMessage);\n+\n+ const { appendComponentStack, componentFilters } = data;\n+\n+ contentWindow.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = appendComponentStack;\n+ contentWindow.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = componentFilters;\n+\n+ \/\/ TRICKY\n+ \/\/ The backend entry point may be required in the context of an iframe or the parent window.\n+ \/\/ If it's required within the parent window, store the saved values on it as well,\n+ \/\/ since the injected renderer interface will read from window.\n+ \/\/ Technically we don't need to store them on the contentWindow in this case,\n+ \/\/ but it doesn't really hurt anything to store them there too.\n+ if (contentWindow !== window) {\n+ window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = appendComponentStack;\n+ window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = componentFilters;\n+ }\n+\n+ finishActivation(contentWindow);\n+ break;\n+ default:\n+ break;\n+ }\n+ };\n+\n+ contentWindow.addEventListener('message', onMessage);\n+\n+ \/\/ The backend may be unable to read saved preferences directly,\n+ \/\/ because they are stored in localStorage within the context of the extension (on the frontend).\n+ \/\/ Instead it relies on the extension to pass preferences through.\n+ \/\/ Because we might be in a sandboxed iframe, we have to ask for them by way of postMessage().\n+ parent.postMessage({ type: MESSAGE_TYPE_GET_SAVED_PREFERENCES }, '*');\n+}\n+\n+function finishActivation(contentWindow: window) {\n+ const { parent } = contentWindow;\n+\n+ const bridge = new Bridge({\n+ listen(fn) {\n+ const onMessage = event => {\n+ fn(event.data);\n+ };\n+ contentWindow.addEventListener('message', onMessage);\n+ return () => {\n+ contentWindow.removeEventListener('message', onMessage);\n+ };\n+ },\n+ send(event: string, payload: any, transferable?: Array<any>) {\n+ parent.postMessage({ event, payload }, '*', transferable);\n+ },\n+ });\n+\n+ const agent = new Agent(bridge);\n+\n+ const hook = contentWindow.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+\n+ initBackend(hook, agent, contentWindow);\n+\n+ \/\/ Setup React Native style editor if a renderer like react-native-web has injected it.\n+ if (!!hook.resolveRNStyle) {\n+ setupNativeStyleEditor(\n+ bridge,\n+ agent,\n+ hook.resolveRNStyle,\n+ hook.nativeStyleEditorValidAttributes\n+ );\n+ }\n+}\n+\n+export function activate(contentWindow: window): void {\n+ startActivation(contentWindow);\n+}\n+\n+export function initialize(contentWindow: window): void {\n+ installHook(contentWindow);\n+}\ndiff --git a\/packages\/react-devtools-inline\/src\/constants.js b\/packages\/react-devtools-inline\/src\/constants.js\nnew file mode 100644\nindex 0000000000..cfa443cc04\n--- \/dev\/null\n+++ b\/packages\/react-devtools-inline\/src\/constants.js\n@@ -0,0 +1,6 @@\n+\/** @flow *\/\n+\n+export const MESSAGE_TYPE_GET_SAVED_PREFERENCES =\n+ 'React::DevTools::getSavedPreferences';\n+export const MESSAGE_TYPE_SAVED_PREFERENCES =\n+ 'React::DevTools::savedPreferences';\ndiff --git a\/packages\/react-devtools-inline\/src\/frontend.js b\/packages\/react-devtools-inline\/src\/frontend.js\nnew file mode 100644\nindex 0000000000..b64363014a\n--- \/dev\/null\n+++ b\/packages\/react-devtools-inline\/src\/frontend.js\n@@ -0,0 +1,72 @@\n+\/** @flow *\/\n+\n+import React, { forwardRef } from 'react';\n+import Bridge from 'src\/bridge';\n+import Store from 'src\/devtools\/store';\n+import DevTools from 'src\/devtools\/views\/DevTools';\n+import { getSavedComponentFilters, getAppendComponentStack } from 'src\/utils';\n+import {\n+ MESSAGE_TYPE_GET_SAVED_PREFERENCES,\n+ MESSAGE_TYPE_SAVED_PREFERENCES,\n+} from '.\/constants';\n+\n+import type { FrontendBridge } from 'src\/bridge';\n+import type { Props } from 'src\/devtools\/views\/DevTools';\n+\n+export function initialize(\n+ contentWindow: window\n+): React$AbstractComponent<Props, mixed> {\n+ const onMessage = ({ data, source }) => {\n+ if (source === 'react-devtools-content-script') {\n+ \/\/ Ignore messages from the DevTools browser extension.\n+ }\n+\n+ switch (data.type) {\n+ case MESSAGE_TYPE_GET_SAVED_PREFERENCES:\n+ \/\/ This is the only message we're listening for,\n+ \/\/ so it's safe to cleanup after we've received it.\n+ window.removeEventListener('message', onMessage);\n+\n+ \/\/ The renderer interface can't read saved preferences directly,\n+ \/\/ because they are stored in localStorage within the context of the extension.\n+ \/\/ Instead it relies on the extension to pass them through.\n+ contentWindow.postMessage(\n+ {\n+ type: MESSAGE_TYPE_SAVED_PREFERENCES,\n+ appendComponentStack: getAppendComponentStack(),\n+ componentFilters: getSavedComponentFilters(),\n+ },\n+ '*'\n+ );\n+ break;\n+ default:\n+ break;\n+ }\n+ };\n+\n+ window.addEventListener('message', onMessage);\n+\n+ const bridge: FrontendBridge = new Bridge({\n+ listen(fn) {\n+ const onMessage = ({ data }) => {\n+ fn(data);\n+ };\n+ window.addEventListener('message', onMessage);\n+ return () => {\n+ window.removeEventListener('message', onMessage);\n+ };\n+ },\n+ send(event: string, payload: any, transferable?: Array<any>) {\n+ contentWindow.postMessage({ event, payload }, '*', transferable);\n+ },\n+ });\n+\n+ const store: Store = new Store(bridge);\n+\n+ const ForwardRef = forwardRef<Props, mixed>((props, ref) => (\n+ <DevTools ref={ref} bridge={bridge} store={store} {...props} \/>\n+ ));\n+ ForwardRef.displayName = 'DevTools';\n+\n+ return ForwardRef;\n+}\ndiff --git a\/packages\/react-devtools-inline\/webpack.config.js b\/packages\/react-devtools-inline\/webpack.config.js\nnew file mode 100644\nindex 0000000000..254d4e4129\n--- \/dev\/null\n+++ b\/packages\/react-devtools-inline\/webpack.config.js\n@@ -0,0 +1,75 @@\n+const { resolve } = require('path');\n+const { DefinePlugin } = require('webpack');\n+const { getGitHubURL, getVersionString } = require('..\/..\/shells\/utils');\n+\n+const NODE_ENV = process.env.NODE_ENV;\n+if (!NODE_ENV) {\n+ console.error('NODE_ENV not set');\n+ process.exit(1);\n+}\n+\n+const __DEV__ = true; \/\/ NODE_ENV === 'development';\n+\n+const GITHUB_URL = getGitHubURL();\n+const DEVTOOLS_VERSION = getVersionString();\n+\n+module.exports = {\n+ mode: __DEV__ ? 'development' : 'production',\n+ devtool: false,\n+ entry: {\n+ backend: '.\/src\/backend.js',\n+ frontend: '.\/src\/frontend.js',\n+ },\n+ output: {\n+ path: __dirname + '\/dist',\n+ filename: '[name].js',\n+ library: '[name]',\n+ libraryTarget: 'commonjs2',\n+ },\n+ resolve: {\n+ alias: {\n+ src: resolve(__dirname, '..\/..\/src'),\n+ },\n+ },\n+ externals: {\n+ react: 'react',\n+ 'react-dom': 'react-dom',\n+ scheduler: 'scheduler',\n+ },\n+ plugins: [\n+ new DefinePlugin({\n+ __DEV__,\n+ __TEST__: false,\n+ 'process.env.DEVTOOLS_VERSION': `\"${DEVTOOLS_VERSION}\"`,\n+ 'process.env.GITHUB_URL': `\"${GITHUB_URL}\"`,\n+ 'process.env.NODE_ENV': `\"${NODE_ENV}\"`,\n+ }),\n+ ],\n+ module: {\n+ rules: [\n+ {\n+ test: \/\\.js$\/,\n+ loader: 'babel-loader',\n+ options: {\n+ configFile: resolve(__dirname, '..\/..\/babel.config.js'),\n+ },\n+ },\n+ {\n+ test: \/\\.css$\/,\n+ use: [\n+ {\n+ loader: 'style-loader',\n+ },\n+ {\n+ loader: 'css-loader',\n+ options: {\n+ sourceMap: true,\n+ modules: true,\n+ localIdentName: '[local]___[hash:base64:5]',\n+ },\n+ },\n+ ],\n+ },\n+ ],\n+ },\n+};\ndiff --git a\/packages\/react-devtools\/README.md b\/packages\/react-devtools\/README.md\nnew file mode 100644\nindex 0000000000..2220a6661d\n--- \/dev\/null\n+++ b\/packages\/react-devtools\/README.md\n@@ -0,0 +1,98 @@\n+# `react-devtools`\n+\n+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).\n+\n+It works both with React DOM and React Native.\n+\n+<img src=\"http:\/\/i.imgur.com\/IXeHiZD.png\" width=\"600\" alt=\"Screenshot of React DevTools running with React Native\">\n+\n+## Installation\n+Install the `react-devtools` package. Because this is a development tool, a global install is often the most convenient:\n+```sh\n+# Yarn\n+yarn global add react-devtools\n+\n+# NPM\n+npm install -g react-devtools\n+```\n+\n+If you prefer to avoid global installations, you can add `react-devtools` as a project dependency. With Yarn, you can do this by running:\n+```sh\n+yarn add --dev react-devtools\n+```\n+\n+With NPM you can just use [NPX](https:\/\/www.npmjs.com\/package\/npx):\n+```sh\n+npx react-devtools\n+```\n+\n+## Usage with React Native\n+Run `react-devtools` from the terminal to launch the standalone DevTools app:\n+```sh\n+react-devtools\n+```\n+\n+If you're not in a simulator then you also need to run the following in a command prompt:\n+```sh\n+adb reverse tcp:8097 tcp:8097\n+```\n+\n+If you're using React Native 0.43 or higher, it should connect to your simulator within a few seconds.\n+\n+### Integration with React Native Inspector\n+\n+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:\n+\n+![React Native Inspector](http:\/\/i.imgur.com\/ReFhREb.gif)\n+\n+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:\n+\n+![React DevTools Inspector Integration](http:\/\/i.imgur.com\/wVgV9RP.gif)\n+\n+You can choose \"Hide Inspector\" in the same menu to exit this mode.\n+\n+### Inspecting Component Instances\n+\n+When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console.\n+\n+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.\n+\n+Make sure that the dropdown in the top left corner of the Chrome console says `debuggerWorker.js`. **This step is essential.**\n+\n+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.\n+\n+![React DevTools Chrome Console Integration](http:\/\/i.imgur.com\/Cpvhs8i.gif)\n+\n+\n+## Usage with React DOM\n+\n+The standalone shell can also be useful with React DOM (e.g. to debug apps in Safari or inside of an iframe).\n+\n+Run `react-devtools` from the terminal to launch the standalone DevTools app:\n+```sh\n+react-devtools\n+```\n+\n+Add `<script src=\"http:\/\/localhost:8097\"><\/script>` as the very first `<script>` tag in the `<head>` of your page when developing:\n+\n+```html\n+<!doctype html>\n+<html lang=\"en\">\n+ <head>\n+ <script src=\"http:\/\/localhost:8097\"><\/script>\n+```\n+\n+This will ensure the developer tools are connected. **Don’t forget to remove it before deploying to production!**\n+\n+>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.\n+\n+## Advanced\n+\n+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.\n+\n+## Developing\n+\n+* Run `yarn run backend:watch` and `yarn run standalone:watch` in `..\/react-devtools-core`\n+* Run `yarn start` in this folder\n+* Refresh the app after it has recompiled a change\n+* For React Native, copy `react-devtools-core` to its `node_modules` to test your changes.\n\\ No newline at end of file\ndiff --git a\/packages\/react-devtools\/app.html b\/packages\/react-devtools\/app.html\nnew file mode 100644\nindex 0000000000..83250645ce\n--- \/dev\/null\n+++ b\/packages\/react-devtools\/app.html\n@@ -0,0 +1,129 @@\n+<!DOCTYPE html>\n+<html>\n+ <head>\n+ <title>React Developer Tools<\/title>\n+ <meta charset=\"utf8\" \/>\n+ <style>\n+ html {\n+ display: flex;\n+ font-family: sans-serif;\n+ }\n+ body {\n+ margin: 0;\n+ padding: 0;\n+ flex: 1;\n+ display: flex;\n+ }\n+ #container {\n+ display: flex;\n+ position: fixed;\n+ top: 0;\n+ left: 0;\n+ right: 0;\n+ bottom: 0;\n+ background-color: white;\n+ }\n+ #logs {\n+ position: fixed;\n+ top: 0;\n+ left: 0;\n+ white-space: pre;\n+ }\n+ #waiting {\n+ flex-direction: column;\n+ text-align: center;\n+ font-family: sans-serif;\n+ color: #aaa;\n+ flex: 1;\n+ overflow: auto;\n+ }\n+ #waiting h2 {\n+ padding: 30px;\n+ }\n+ #waiting p {\n+ padding: 0;\n+ margin: 0;\n+ }\n+ .input {\n+ display: inline-block;\n+ max-width: 100%;\n+ font-weight: 100;\n+ border: 1px solid #aaa;\n+ padding: 0.125rem 0.25rem;\n+ margin: 0.125rem;\n+ color: #666;\n+ }\n+ #loading-status {\n+ margin-top: 10px;\n+ }\n+ <\/style>\n+ <\/head>\n+ <body>\n+ <div id=\"container\">\n+ <div id=\"waiting\" style=\"-webkit-user-select: none; -webkit-app-region: drag;\">\n+ <h2>Waiting for React to connect…<\/h2>\n+ <div>\n+ <h4>React Native<\/h4>\n+ <div>The active app will automatically connect in a few seconds.<\/div>\n+ <br \/>\n+ <h4>React DOM<\/h4>\n+ <div>\n+ Add <span class=\"input\" contenteditable=\"true\" id=\"localhost\"><\/span><br \/>\n+ or <span class=\"input\" contenteditable=\"true\" id=\"byip\"><\/span>\n+ <\/div>\n+ <div>\n+ to the top of the page you want to debug,\n+ <br \/>\n+ <b>before<\/b> importing React DOM.\n+ <\/div>\n+ <\/div>\n+ <br \/>\n+ <br \/>\n+ <div id=\"loading-status\">Starting the server…<\/div>\n+ <\/div>\n+ <\/div>\n+ <script>\n+ const port = process.env.PORT || 8097;\n+ const localIp = require(\"ip\").address();\n+ const $ = document.querySelector.bind(document);\n+\n+ function selectAll(event) {\n+ const element = event.target;\n+ if (window.getSelection) {\n+ const selection = window.getSelection(); \n+ const range = document.createRange();\n+ range.selectNodeContents(element);\n+ selection.removeAllRanges();\n+ selection.addRange(range);\n+ }\n+ }\n+\n+ const $localhost = $(\"#localhost\");\n+ $localhost.innerText = `<script src=\"http:\/\/localhost:${port}\"><\/` + 'script>';\n+ $localhost.addEventListener('click', selectAll);\n+ $localhost.addEventListener('focus', selectAll);\n+\n+ const $byIp = $(\"#byip\");\n+ $byIp.innerText = `<script src=\"http:\/\/${localIp}:${port}\"><\/` + 'script>';\n+ $byIp.addEventListener('click', selectAll);\n+ $byIp.addEventListener('focus', selectAll);\n+\n+ let devtools;\n+ try {\n+ devtools = require(\"react-devtools-core\/standalone\").default;\n+ } catch (err) {\n+ alert(\n+ err.toString() +\n+ \"\\n\\nDid you run `yarn` and `yarn run build` in packages\/react-devtools-core?\"\n+ );\n+ }\n+ window.devtools = devtools;\n+ window.server = devtools\n+ .setContentDOMNode(document.getElementById(\"container\"))\n+ .setStatusListener(function(status) {\n+ document.getElementById(\"loading-status\").innerText = status;\n+ })\n+ .startServer(port);\n+ <\/script>\n+ <\/body>\n+<\/html>\ndiff --git a\/packages\/react-devtools\/app.js b\/packages\/react-devtools\/app.js\nnew file mode 100644\nindex 0000000000..679dfb70df\n--- \/dev\/null\n+++ b\/packages\/react-devtools\/app.js\n@@ -0,0 +1,41 @@\n+\/\/ @flow\n+\n+const { app, BrowserWindow } = require('electron'); \/\/ Module to create native browser window.\n+const { join } = require('path');\n+\n+const argv = require('minimist')(process.argv.slice(2));\n+const projectRoots = argv._;\n+\n+let mainWindow = null;\n+\n+app.on('window-all-closed', function() {\n+ app.quit();\n+});\n+\n+app.on('ready', function() {\n+ \/\/ Create the browser window.\n+ mainWindow = new BrowserWindow({\n+ width: 800,\n+ height: 600,\n+ icon: join(__dirname, 'icons\/icon128.png'),\n+ frame: false,\n+ \/\/titleBarStyle: 'customButtonsOnHover',\n+ webPreferences: {\n+ nodeIntegration: true,\n+ },\n+ });\n+\n+ \/\/ and load the index.html of the app.\n+ mainWindow.loadURL('file:\/\/' + __dirname + '\/app.html'); \/\/ eslint-disable-line no-path-concat\n+ mainWindow.webContents.executeJavaScript(\n+ \/\/ We use this so that RN can keep relative JSX __source filenames\n+ \/\/ but \"click to open in editor\" still works. js1 passes project roots\n+ \/\/ as the argument to DevTools.\n+ 'window.devtools.setProjectRoots(' + JSON.stringify(projectRoots) + ')'\n+ );\n+\n+ \/\/ Emitted when the window is closed.\n+ mainWindow.on('closed', function() {\n+ mainWindow = null;\n+ });\n+});\ndiff --git a\/packages\/react-devtools\/bin.js b\/packages\/react-devtools\/bin.js\nnew file mode 100755\nindex 0000000000..55fd22c22f\n--- \/dev\/null\n+++ b\/packages\/react-devtools\/bin.js\n@@ -0,0 +1,18 @@\n+#!\/usr\/bin\/env node\n+\n+\/\/ @flow\n+\n+const electron = require('electron');\n+const spawn = require('cross-spawn');\n+const argv = process.argv.slice(2);\n+const pkg = require('.\/package.json');\n+const updateNotifier = require('update-notifier');\n+\n+\/\/ notify if there's an update\n+updateNotifier({ pkg }).notify({ defer: false });\n+\n+const result = spawn.sync(electron, [require.resolve('.\/app')].concat(argv), {\n+ stdio: 'ignore',\n+});\n+\n+process.exit(result.status);\ndiff --git a\/packages\/react-devtools\/icons\/icon128.png b\/packages\/react-devtools\/icons\/icon128.png\nnew file mode 100644\nindex 0000000000000000000000000000000000000000..b9327946441f529cd5510f8ee14b788f0aaea1df\nGIT binary patch\nliteral 4577\nzcmV<75gzV|P)<h;3K|Lk000e1NJLTq004jh004jp1^@s6!#-il0000PbVXQnQ*UN;\nzcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU@gGod|RCwC#oo$RBRTal)x6ld|x)KV)\nzqHIwFsX;VtLd1k(G!aZJCg2BXqEJbIsPuzEG=MLV7<`GK#$qB=5~_(Mk>vv~k<jv?\nz@S#L41_Ud1MOx&gy5$`!;QVIyEYo?;xpQac&NI(GGbh>Zc3+<7&OQJ0de1p`By!Ni\nz#KhV0r`7StD*hXFG@ocH{@4<KOioQr-ERHTh{1RmzM*6KP=Vos7zkUkKNwY*|Ks@6\nz=8pM8MeuU-EN}Ot1sUce^%r;hHMDf<*x1;_^z`&(4*+J-(J_Dc>691*V=)Nsnezc=\nzZT{wNZ(2oX;1h@su%X+J)=|Rqk=ao1cin!pl0G*&8|Qb_PFf8BR(1Q(T3R*Q#ry5f\nz4~%wu&~EAg&~iFpkQcXj;)H0y!G|PYzwye8(aTehNAqF5d_G|Dq49bji~jfWi_r^@\nzKGXrgmzJLX+31K>tD{3tTA}_N5WMn_$D@C5yD$D|Hg|Qv;zOc$tvDk(Y~?4C_40p<\nzp1c2!=-Dlk0|y530B;S#LfF9fUwTcnXz9`3e}i<fu}|N5YxMeayZg3Q*7%-tFG;{!\nzl%BqGV>ETk_d5V&r5@&2A%O7DP3vm~LKVhmwb-NIU7G;7^#BOL{H%mMb=&%&n~Q2c\nz=A28Sqs}@%*lPmVzy18G#sRQkY;5e?O}#l1b;8%Kk46_R3ig_Z9Dj0j<R{OKUfaDh\nzdUf|y<<~oG<r&dQSKkyZS-!&S_p$M4App2=>~N>U$nW9Lv{nNk`Ib6mBeCsiM-NFn\nz_}CK?rwhj9`3wB*6YH-kr44wm_g!*L@;)wtiM-Eq_fPgjDZIu}XRV3eedhV9gUGu6\nz_?0soH3f|U0Oo!4XLqSTLp7ozt40j6$&deVT_Nuq=|nTR0Hy)d1tzozubU+tLd;g{\nzOaRUl>bflRA=D?o%V%ColQPT;AQ>4M@d5#$`rtR$n;{(%57VY@`GL2Id2`=?qdgDa\nzotUPqxjQg66VKecseJ%A?xHJuHW_Jp@;5gWek~Y*6v1Rm8}R+b6DLM{w{J}tVwog>\nz>2ff4{N#%0r5%4Ryhh%0-}Li|`AQRh0w5;Q)dV$?3Pu%b>a}WoOc?m^6`waVhT_m=\nz-y0w<|JF^WKY|%~<U4DV^;NOgFj@;!^ZbmV0|1Vk78{3%;U&hl%n0B+`MTfE*<-QK\nzmgc~0;HZVl;Nds)uIa>f0pJ}+j4RSH8SM3uQhW(3&Q3Gka?V8MBl#h{bPY&FvY(-;\nzk+T3z+Uhvy5tWNapY=CH?ORmD87-=zeD-6gHGt*O*Fi{Jk+iF5k2;v|(gLmb0qRVK\nzAa&UBJT1c-T>eAdj&W-MkX6V1$b?Bk$VGVh{ir$6-b3mhT4@6Mkq-xS_yR7P_`>CV\nzk;JBA{(<%Z>L!=BpN$ThQpc?YK;2$289ra8${~=ex~D2N8TJhX0Qy<I<0{~I>b4tI\nz{{yg~3F-oY27rF<NoxQA<BvJ#V$<Oxb!>%*fB>Ih7=>aWeSpw**Tuk@I>L=}9yv7w\nz7Jx!l0d*$8f%cGLka+x>3Wwp@6fvie)<F~?3Vm3U1wd2MKTrTzvV3K**T;#o>?|r@\nzBQ%1Q0J2^$l%{JP0BD$~OD&?ZHHno(kSpngX3&x}J~@Q>=m0hb0F4P+dN`!r_s#Ov\nz?G$Q9zfA(5k<&o!Fr=yz=#o;YHE>n?r0G8oZB|1^w95;RZmZOhq~$#JKC-P{01&2R\nzna<|;oRrBXir>KhQLUC4;eA|3zeNa;$r=F_AFn;TYp%pQ?_5LEbgk0>5Sx_+01Qn7\nzKuX6@n|Vy`C*@Tk^K3I(XIJuBo@u6OwD%yal>opI%&J)$EoFm|lseO~wQXp;X4ant\nziKW?^t_^4m0G1yxtOqfc)@b@<u<wl_glN)E-A{Ecs@XSG>-XAlJez2F?+XBs>ZPZz\nzPE>wB)H)#_Nu5xICajrCVht3$2T~jgFam~t%@U{;05iGtHI>vl4w4LoNKf3b`U;Vt\nzyvm=lDqM>sSP#7jtWz`x&McqtW2!zoW#l2jTsr{r8X|p2rfFDVm5Uj5Hd~Si(hi3J\nzB<15S4Or!PndkY}T^kcHgnqWskc=nM@{yn3l^ntPKCJdYBIVY@TJr=#&jrw4Uklj)\nzWZr?1wjaKdJu{!+;$&~x<B(=FNN-@$Q2CAZ(by@c<@WmXz<VCNC)vy$H(ZhQ#$}sC\nz`JUA=%LZth4PgHM%WG@3m-P1mfWtrb>7JkQ3@}vdI~-rVw&xjn9kj;o$(xh4zwydT\nz$#c7y%iaPunoQ|43{gv22>{r+6Tg0aqVn??FO8p1tiL+>S~_d@?R`Ev@>A#bARb3(\nz-}IiI?;row>(uwc?q`3$4r1LTrVbik*0Z*^V&-d(o7M;mSf;mcodW}31A3Us>$rRe\nzo}Wlc5@%IH$<ZoOk7t~h6{GCx4_`hrVUQN$SUrJ64Vn$sB!rFY=Lk8gNfb4mjRven\nzSgRF|J>pby+l3!DOV-k+2Od<ZS16?cq>b8=dKSI=jtxmG_4J>%<|1^_((xV@dC<|z\nz67`tg$m70rrTSif{n0wJ<=fI+!Wj7|l8)th7R;(+?OFCbaQEE*k3DZ)k2LdMPyYIb\nzTyukTKYQ<{L?aMUX#36gFiF1i4=QB>ea5DM+M?bn(vbD8c`vk#6lu7Qd3_xzOck$b\nz#q3BQYxmhm>It>iVsFxiT9V$*zE6<|fcIiutlz3}6zx-V@KhlUz~l@ZJ&hz3;^B%&\nzW8w$Iwwoy)y$zg)CIDbVwWD0r{!S0akH7!WwYMf~cR5+ub=E=mGS8Fu9F{}K-?MH2\nza`<VzKWEKF{T0y&_(t!HwWT(I3Qfa%7Xg?z08smu<RkSUuWDX93oa1NMlSo}<*L*Y\nzMdYb&n1G{NWD*%0IribxlCdr>5a19>(kHua)&-cdKLfPvS6Ko$tP22Wj$+a2V_r@m\nzjJIm*VLU3TDp~b-Bz!bmi!|h^YSvwL2B9Qxd>le6T-DYcVh%!H2Q%i<H#MEB0i<0@\nzlc11o)NdxCj~-rWgt>8P9M`&i2`S5Su8>I7ZdMwtb>kQpHIc5+T6=GvIqQs;)&Mvj\nzR_GPFjanO@Vrh#!)o-o4DEXwceKlYmIen{;)n|^P7XUQXFQd{zlT6w4@xaThy9~)h\nz@H}VGXVxF*8+GL+EFq`_04s^%E2(8DkGVe5ANoAsr)MGW93ovBR)^qdTEOQd(g^^o\nzRJ+ci1;QNHM*2v9=wc3^*OL>ws^+Z<2(<9G5&*PmUZV2qBDn*gtn@cYE+*GKcBX6y\nzK9B<<ET?ObnkqGN`3g-=0xJyw>fJ5hpe};RmIJ3%+YS=B8c%#2ve4l3@j09Tu(C<n\nzdAA`cZ=-y=dqO)~zC)&68p<~;D=RdbQ2LyZIssrE)mAC@sv5qb0enKdkd7+Vx>cmV\nzZY^NXL71!t0L!tFQ^7iz?*lBK%?{;tTOn2v=`Z?x#Wd#mW`$H`4KTBj8_fyVA@BNu\nzI6SH9C!{x^sumz3$xC=iEu^n=o0n87Dlo2N@?cSbb;ca>!Y7!jIe1ov&8iMc6Qf_M\nzR0{dDl%v-5WSK5Fz99EuzFi!9qxW-r9S8Fu)@2MhA7si%;8Z!}IQlbd)YpIPdzVI|\nz2QKQV7~;Ugs=*VIn>zU0qW2L}V44@ZTQ!PrS1G-29&wkA+j-C9F1pIpI=ps~G`)8o\nzfDD|qAux`T<tnvlno5_$6D!TC)!=E&<m51~zAkM#eCGvQT8NCGE1^}^8DxK{0kq5?\nzQeX6prcgzYb^It2Np%d`K>Fr=iPsxneW9Yt)+a?5NV0DYo{O>6*S)%HXHtTV1j;)3\nz5Xsp!d9zowj;lsdj(qvh_RCfFZV4Fbo;|Y69_#;0tSyUb;ZmJJKDM6?M{D@R&|1e0\nzOre@MP24i3NjwtX?>1|zP$gR<VRbRNuC_`4tyNf(wfSX>a!RFwc|hrhb1j|+ciqL4\nzR&73UyrtekM<YH0U|o8VRr}Tvw^sHpHeO2ZEs&*!1n^g>$SU0!f|}%EH3u#0^pH8k\nz?j1b7ELn6~#ailLE1a}y@YuAnWzl7vFuI_$N+YXAQ7e1TngN7h{Oq;Sve>LpNb0(E\nzRH6(_P1V~`gEWWA1TEh@J)1NWr{9;9fn`gbHT9ncly%`Ge^d8qq17Pj>PnW2sx;Nj\nz^N<_xO%SnfA@4N^+8yj`vwV_IE^n6i(CXv!x^zQ4UtWv2MV9|kBqQnTQ}x9JSdxud\nzV3BygWgi%`LUHIp;}gl(*^T9piijgCHM}3*eVL0LeTWHRnrf!!aeDg$`<V%9_euI-\nz`i?#CveJ7Y(Fxk34((R!fCwI1x^b%Jz$IKm^+^&%(*i!yScWXElUC(26e7g4%8Z1%\nzO<Lb(1j%fmBKEE<0TMEkY4RP$2otlFP%}4{*L%BXzemIL9RL~_LRIe0XOiq)Q{&<q\nzDG76pXCG#=QqfJ$3T$jnpp{7B1P_%<ykB+5Qq#<qiJ{CFmar`w!Z!VUjR8QLnk_{P\nz*^F9xWUM$@gHjuqK2P8SU&D14BGbgO!qAi!7$^;Zq*!*64=p_`ufwKVDPg41*YOnQ\nzSpXB8UG%^!4f3q-1HfAc04**qlif;h989(<WPA=^(jlJ)0J(IcN@%9dNN(Nr@frX^\nzOwA^PsA-8JcLBn9E8fRHsk%lDgiZE4Gy(ukx<XwaYcUBmn^(vRBdkj&EO1rPSm``N\nz>oh<J^>5jG>rjULgJmM}ZW;?2wq^m^<XHSh0HAf-h8&x&T@5G1NuHK~LOW<7na{1`\nzRRLgW#a3y6(D&w~FNe%h_AX)9-GEh{zB;wtyahnWOCnw5O0mi<;jY_3(IRz(XRW_J\nzzMt7IB-pwO5D-|o12jn8E!}x$u~jCZu0#kn+`0?Ua=v6-Yh7e@UAGzlb&?ANntiq|\nzldjVV>;TY*Ff$JXKED%!2I)4mp}jtSkg3Vk??3=RbIR(D42ZMyu5FR&piO{LyHI;*\nz0icCJb>_nf^{D3cQN8^DftLEM+w2S!05mVSF11LEZ-shjA}cxo1a+0HY2a$gF>C|?\nz{YZtvL>O=7{>9;Qg@|%7Mo6-TShflP*0r&r%z&tIR~xl3UcR;%z|pX;`S2lYoJ;GX\nz0L>8$A#JF9mklSomz8?f;wl&kG5_H0^{w&Ri+)ki&Y(ibTez@idIn6>ZVU5Oty~Pj\nz4P@4ccp5l3AJBT}`Q9`4Zpxj1fUok>j)zO-^Q|lI%G@9_?*YIAYtleVRo+b<SzG<y\nz^VUTlxa>O9gvii_XMVpa_w`5v&(s92RDndx8tbMTnIab7by@?Rd@hh0N&p~1TB|p`\nzcU;%<>h7IR#|SCqMlRZ^mn>i5G&QLFBK?9ecJKDB=G{DE7HDfnV`N+2vjC;-+cnKA\nzR5er?YNRtL%|xwjI_(_MLM}E^O2d7pZdRF`kyhJQjbK)i<&x{PS#q_)x!T}c0RYJA\nzx33yygzTX&I{(0zniy>}Z~%bvMxhkRFSw?eRVC~=8X-iu8uGrSc@F@e3n`mqd`KY3\nz^wB|J{=fhr9m5}Uj{o)Oc<lHHO>HJxiy;ucE$^%opbk<!z(4^YEnyNNNH3rahLC1U\nzY-dvkC>9uIvYGqm5oX%j9`n8ss{=qseWlTE3pxOF)B&KQHUnU)+lJQC6ad)L?L%v6\nz3jmnx_Mx>jIl{kjD7ceP-F~!7{l~OSoWKjZ{b(H}JYT>+)6>&aV=={Fp4#n8E9m-I\nz`hPJ8fLRdS6Jr1~a7wp7LruSmnLk&2xgh<M7zC4@CK!6j->>p^MEkASDO?qQ+R!<M\nz!{hK_^JC`sg#06}zlwoycKnIUZB}()n3qh4;gd1rZ?}Hw{{jpEPJO6BgYGht00000\nLNkvXXu0mjfqT|45\n\nliteral 0\nHcmV?d00001\n\ndiff --git a\/packages\/react-devtools\/index.js b\/packages\/react-devtools\/index.js\nnew file mode 100644\nindex 0000000000..9a48b9c2b6\n--- \/dev\/null\n+++ b\/packages\/react-devtools\/index.js\n@@ -0,0 +1,7 @@\n+\/\/ @flow\n+\n+const { connectToDevTools } = require('react-devtools-core\/backend');\n+\n+\/\/ Connect immediately with default options.\n+\/\/ If you need more control, use `react-devtools-core` directly instead of `react-devtools`.\n+connectToDevTools();\ndiff --git a\/packages\/react-devtools\/package.json b\/packages\/react-devtools\/package.json\nnew file mode 100644\nindex 0000000000..2ce188a47f\n--- \/dev\/null\n+++ b\/packages\/react-devtools\/package.json\n@@ -0,0 +1,31 @@\n+{\n+ \"name\": \"react-devtools\",\n+ \"version\": \"4.0.0-alpha.9\",\n+ \"description\": \"Use react-devtools outside of the browser\",\n+ \"license\": \"MIT\",\n+ \"repository\": {\n+ \"url\": \"https:\/\/github.com\/bvaughn\/react-devtools-experimental.git\",\n+ \"type\": \"git\"\n+ },\n+ \"bin\": {\n+ \"react-devtools\": \".\/bin.js\"\n+ },\n+ \"files\": [\n+ \"bin.js\",\n+ \"app.html\",\n+ \"app.js\",\n+ \"index.js\",\n+ \"icons\"\n+ ],\n+ \"scripts\": {\n+ \"start\": \"node bin.js\"\n+ },\n+ \"dependencies\": {\n+ \"cross-spawn\": \"^5.0.1\",\n+ \"electron\": \"^5.0.0\",\n+ \"ip\": \"^1.1.4\",\n+ \"minimist\": \"^1.2.0\",\n+ \"react-devtools-core\": \"4.0.0-alpha.9\",\n+ \"update-notifier\": \"^2.1.0\"\n+ }\n+}\ndiff --git a\/shells\/browser\/chrome\/README.md b\/shells\/browser\/chrome\/README.md\nnew file mode 100644\nindex 0000000000..dd77d072c8\n--- \/dev\/null\n+++ b\/shells\/browser\/chrome\/README.md\n@@ -0,0 +1,12 @@\n+# The Chrome extension\n+\n+The source code for this extension has moved to `shells\/webextension`.\n+\n+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.\n+\n+## Testing in Chrome\n+\n+You can test a local build of the web extension like so:\n+\n+ 1. Build the extension: `node build`\n+ 1. Follow the on-screen instructions.\ndiff --git a\/shells\/browser\/chrome\/build.js b\/shells\/browser\/chrome\/build.js\nnew file mode 100644\nindex 0000000000..8bcb863f11\n--- \/dev\/null\n+++ b\/shells\/browser\/chrome\/build.js\n@@ -0,0 +1,41 @@\n+#!\/usr\/bin\/env node\n+\n+const chalk = require('chalk');\n+const { execSync } = require('child_process');\n+const { existsSync } = require('fs');\n+const { isAbsolute, join, relative } = require('path');\n+const { argv } = require('yargs');\n+const build = require('..\/shared\/build');\n+\n+const main = async () => {\n+ const { crx, keyPath } = argv;\n+\n+ if (crx) {\n+ if (!keyPath || !existsSync(keyPath)) {\n+ console.error('Must specify a key file (.pem) to build CRX');\n+ process.exit(1);\n+ }\n+ }\n+\n+ await build('chrome');\n+\n+ if (crx) {\n+ const cwd = join(__dirname, 'build');\n+\n+ let safeKeyPath = keyPath;\n+ if (!isAbsolute(keyPath)) {\n+ safeKeyPath = join(relative(cwd, process.cwd()), keyPath);\n+ }\n+\n+ execSync(`crx pack .\/unpacked -o ReactDevTools.crx -p ${safeKeyPath}`, {\n+ cwd,\n+ });\n+ }\n+\n+ console.log(chalk.green('\\nThe Chrome extension has been built!'));\n+ console.log(chalk.green('You can test this build by running:'));\n+ console.log(chalk.gray('\\n# From the react-devtools root directory:'));\n+ console.log('yarn run test:chrome');\n+};\n+\n+main();\ndiff --git a\/shells\/browser\/chrome\/deploy.js b\/shells\/browser\/chrome\/deploy.js\nnew file mode 100644\nindex 0000000000..1cfdf39085\n--- \/dev\/null\n+++ b\/shells\/browser\/chrome\/deploy.js\n@@ -0,0 +1,7 @@\n+#!\/usr\/bin\/env node\n+\n+const deploy = require('..\/shared\/deploy');\n+\n+const main = async () => await deploy('chrome');\n+\n+main();\ndiff --git a\/shells\/browser\/chrome\/manifest.json b\/shells\/browser\/chrome\/manifest.json\nnew file mode 100644\nindex 0000000000..3a1dfb1db4\n--- \/dev\/null\n+++ b\/shells\/browser\/chrome\/manifest.json\n@@ -0,0 +1,60 @@\n+{\n+ \"manifest_version\": 2,\n+ \"name\": \"React Developer Tools\",\n+ \"description\": \"Adds React debugging tools to the Chrome Developer Tools.\",\n+ \"version\": \"4.0.0\",\n+ \"version_name\": \"4.0.0\",\n+\n+ \"minimum_chrome_version\": \"49\",\n+\n+ \"icons\": {\n+ \"16\": \"icons\/16-production.png\",\n+ \"32\": \"icons\/32-production.png\",\n+ \"48\": \"icons\/48-production.png\",\n+ \"128\": \"icons\/128-production.png\"\n+ },\n+\n+ \"browser_action\": {\n+ \"default_icon\": {\n+ \"16\": \"icons\/16-disabled.png\",\n+ \"32\": \"icons\/32-disabled.png\",\n+ \"48\": \"icons\/48-disabled.png\",\n+ \"128\": \"icons\/128-disabled.png\"\n+ },\n+\n+ \"default_popup\": \"popups\/disabled.html\"\n+ },\n+\n+ \"devtools_page\": \"main.html\",\n+\n+ \"content_security_policy\": \"script-src 'self' 'unsafe-eval'; object-src 'self'\",\n+ \"web_accessible_resources\": [\n+ \"main.html\",\n+ \"panel.html\",\n+ \"build\/backend.js\",\n+ \"build\/renderer.js\"\n+ ],\n+\n+ \"background\": {\n+ \"scripts\": [\"build\/background.js\"],\n+ \"persistent\": false\n+ },\n+\n+ \"permissions\": [\n+ \"<all_urls>\",\n+ \"background\",\n+ \"tabs\",\n+ \"webNavigation\",\n+ \"file:\/\/\/*\",\n+ \"http:\/\/*\/*\",\n+ \"https:\/\/*\/*\"\n+ ],\n+\n+ \"content_scripts\": [\n+ {\n+ \"matches\": [\"<all_urls>\"],\n+ \"js\": [\"build\/injectGlobalHook.js\"],\n+ \"run_at\": \"document_start\"\n+ }\n+ ]\n+}\ndiff --git a\/shells\/browser\/chrome\/now.json b\/shells\/browser\/chrome\/now.json\nnew file mode 100644\nindex 0000000000..e541ec866d\n--- \/dev\/null\n+++ b\/shells\/browser\/chrome\/now.json\n@@ -0,0 +1,5 @@\n+{\n+ \"name\": \"react-devtools-experimental-chrome\",\n+ \"alias\": [\"react-devtools-experimental-chrome\"],\n+ \"files\": [\"index.html\", \"ReactDevTools.zip\"]\n+}\ndiff --git a\/shells\/browser\/chrome\/test.js b\/shells\/browser\/chrome\/test.js\nnew file mode 100644\nindex 0000000000..c010a3c319\n--- \/dev\/null\n+++ b\/shells\/browser\/chrome\/test.js\n@@ -0,0 +1,11 @@\n+#!\/usr\/bin\/env node\n+\n+const chromeLaunch = require('chrome-launch'); \/\/ eslint-disable-line import\/no-extraneous-dependencies\n+const { resolve } = require('path');\n+\n+const EXTENSION_PATH = resolve('shells\/browser\/chrome\/build\/unpacked');\n+const START_URL = 'https:\/\/facebook.github.io\/react\/';\n+\n+chromeLaunch(START_URL, {\n+ args: [`--load-extension=${EXTENSION_PATH}`],\n+});\ndiff --git a\/shells\/browser\/firefox\/README.md b\/shells\/browser\/firefox\/README.md\nnew file mode 100644\nindex 0000000000..c4bbc8d2de\n--- \/dev\/null\n+++ b\/shells\/browser\/firefox\/README.md\n@@ -0,0 +1,12 @@\n+# The Firefox extension\n+\n+The source code for this extension has moved to `shells\/webextension`.\n+\n+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.\n+\n+## Testing in Firefox\n+\n+ 1. Build the extension: `node build`\n+ 1. Follow the on-screen instructions.\n+\n+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.\ndiff --git a\/shells\/browser\/firefox\/build.js b\/shells\/browser\/firefox\/build.js\nnew file mode 100644\nindex 0000000000..5f7e7c5df9\n--- \/dev\/null\n+++ b\/shells\/browser\/firefox\/build.js\n@@ -0,0 +1,35 @@\n+#!\/usr\/bin\/env node\n+\n+const chalk = require('chalk');\n+const build = require('..\/shared\/build');\n+\n+const main = async () => {\n+ await build('firefox');\n+\n+ console.log(chalk.green('\\nThe Firefox extension has been built!'));\n+ console.log(chalk.green('You can test this build by running:'));\n+ console.log(chalk.gray('\\n# From the react-devtools root directory:'));\n+ console.log('yarn run test:firefox');\n+ console.log(\n+ chalk.gray('\\n# You can also test against upcoming Firefox releases.')\n+ );\n+ console.log(\n+ chalk.gray(\n+ '# First download a release from https:\/\/www.mozilla.org\/en-US\/firefox\/channel\/desktop\/'\n+ )\n+ );\n+ console.log(\n+ chalk.gray(\n+ '# And then tell web-ext which release to use (eg firefoxdeveloperedition, nightly, beta):'\n+ )\n+ );\n+ console.log('WEB_EXT_FIREFOX=nightly yarn run test:firefox');\n+ console.log(chalk.gray('\\n# You can test against older versions too:'));\n+ console.log(\n+ 'WEB_EXT_FIREFOX=\/Applications\/Firefox52.app\/Contents\/MacOS\/firefox-bin yarn run test:firefox'\n+ );\n+};\n+\n+main();\n+\n+module.exports = { main };\ndiff --git a\/shells\/browser\/firefox\/deploy.js b\/shells\/browser\/firefox\/deploy.js\nnew file mode 100644\nindex 0000000000..b7977d62f0\n--- \/dev\/null\n+++ b\/shells\/browser\/firefox\/deploy.js\n@@ -0,0 +1,7 @@\n+#!\/usr\/bin\/env node\n+\n+const deploy = require('..\/shared\/deploy');\n+\n+const main = async () => await deploy('firefox');\n+\n+main();\ndiff --git a\/shells\/browser\/firefox\/manifest.json b\/shells\/browser\/firefox\/manifest.json\nnew file mode 100644\nindex 0000000000..02f24a0fef\n--- \/dev\/null\n+++ b\/shells\/browser\/firefox\/manifest.json\n@@ -0,0 +1,64 @@\n+{\n+ \"manifest_version\": 2,\n+ \"name\": \"React Developer Tools\",\n+ \"description\": \"Adds React debugging tools to the Firefox Developer Tools.\",\n+ \"version\": \"4.0.0\",\n+\n+ \"applications\": {\n+ \"gecko\": {\n+ \"id\": \"@react-devtools\",\n+ \"strict_min_version\": \"54.0\"\n+ }\n+ },\n+\n+ \"icons\": {\n+ \"16\": \"icons\/16-production.png\",\n+ \"32\": \"icons\/32-production.png\",\n+ \"48\": \"icons\/48-production.png\",\n+ \"128\": \"icons\/128-production.png\"\n+ },\n+\n+ \"browser_action\": {\n+ \"default_icon\": {\n+ \"16\": \"icons\/16-disabled.png\",\n+ \"32\": \"icons\/32-disabled.png\",\n+ \"48\": \"icons\/48-disabled.png\",\n+ \"128\": \"icons\/128-disabled.png\"\n+ },\n+\n+ \"default_popup\": \"popups\/disabled.html\",\n+ \"browser_style\": true\n+ },\n+\n+ \"devtools_page\": \"main.html\",\n+\n+ \"content_security_policy\": \"script-src 'self' 'unsafe-eval'; object-src 'self'\",\n+ \"web_accessible_resources\": [\n+ \"main.html\",\n+ \"panel.html\",\n+ \"build\/backend.js\",\n+ \"build\/renderer.js\"\n+ ],\n+\n+ \"background\": {\n+ \"scripts\": [\"build\/background.js\"]\n+ },\n+\n+ \"permissions\": [\n+ \"<all_urls>\",\n+ \"activeTab\",\n+ \"tabs\",\n+ \"webNavigation\",\n+ \"file:\/\/\/*\",\n+ \"http:\/\/*\/*\",\n+ \"https:\/\/*\/*\"\n+ ],\n+\n+ \"content_scripts\": [\n+ {\n+ \"matches\": [\"<all_urls>\"],\n+ \"js\": [\"build\/injectGlobalHook.js\"],\n+ \"run_at\": \"document_start\"\n+ }\n+ ]\n+}\ndiff --git a\/shells\/browser\/firefox\/now.json b\/shells\/browser\/firefox\/now.json\nnew file mode 100644\nindex 0000000000..5e61bb442f\n--- \/dev\/null\n+++ b\/shells\/browser\/firefox\/now.json\n@@ -0,0 +1,5 @@\n+{\n+ \"name\": \"react-devtools-experimental-firefox\",\n+ \"alias\": [\"react-devtools-experimental-firefox\"],\n+ \"files\": [\"index.html\", \"ReactDevTools.zip\"]\n+}\ndiff --git a\/shells\/browser\/firefox\/test.js b\/shells\/browser\/firefox\/test.js\nnew file mode 100644\nindex 0000000000..7dd8d1e65b\n--- \/dev\/null\n+++ b\/shells\/browser\/firefox\/test.js\n@@ -0,0 +1,46 @@\n+#!\/usr\/bin\/env node\n+\n+const { exec } = require('child-process-promise');\n+const { Finder } = require('firefox-profile');\n+const { resolve } = require('path');\n+\n+const EXTENSION_PATH = resolve('shells\/browser\/firefox\/build\/unpacked');\n+const START_URL = 'https:\/\/facebook.github.io\/react\/';\n+\n+const main = async () => {\n+ const finder = new Finder();\n+\n+ \/\/ Use default Firefox profile for testing purposes.\n+ \/\/ This prevents users from having to re-login-to sites before testing.\n+ const findPathPromise = new Promise((resolvePromise, rejectPromise) => {\n+ finder.getPath('default', (error, profile) => {\n+ if (error) {\n+ rejectPromise(error);\n+ } else {\n+ resolvePromise(profile);\n+ }\n+ });\n+ });\n+\n+ const options = [\n+ `--source-dir=${EXTENSION_PATH}`,\n+ `--start-url=${START_URL}`,\n+ '--browser-console',\n+ ];\n+\n+ try {\n+ const path = await findPathPromise;\n+ const trimmedPath = path.replace(' ', '\\\\ ');\n+ options.push(`--firefox-profile=${trimmedPath}`);\n+ } catch (err) {\n+ console.warn('Could not find default profile, using temporary profile.');\n+ }\n+\n+ try {\n+ await exec(`web-ext run ${options.join(' ')}`);\n+ } catch (err) {\n+ console.error('`web-ext run` failed', err.stdout, err.stderr);\n+ }\n+};\n+\n+main();\ndiff --git a\/shells\/browser\/shared\/build.js b\/shells\/browser\/shared\/build.js\nnew file mode 100644\nindex 0000000000..6d2ec5371f\n--- \/dev\/null\n+++ b\/shells\/browser\/shared\/build.js\n@@ -0,0 +1,120 @@\n+#!\/usr\/bin\/env node\n+\n+const archiver = require('archiver');\n+const { execSync } = require('child_process');\n+const { readFileSync, writeFileSync, createWriteStream } = require('fs');\n+const { copy, ensureDir, move, remove } = require('fs-extra');\n+const { join } = require('path');\n+const { getGitCommit } = require('..\/..\/utils');\n+\n+\/\/ These files are copied along with Webpack-bundled files\n+\/\/ to produce the final web extension\n+const STATIC_FILES = ['icons', 'popups', 'main.html', 'panel.html'];\n+\n+const preProcess = async (destinationPath, tempPath) => {\n+ await remove(destinationPath); \/\/ Clean up from previously completed builds\n+ await remove(tempPath); \/\/ Clean up from any previously failed builds\n+ await ensureDir(tempPath); \/\/ Create temp dir for this new build\n+};\n+\n+const build = async (tempPath, manifestPath) => {\n+ const binPath = join(tempPath, 'bin');\n+ const zipPath = join(tempPath, 'zip');\n+\n+ const webpackPath = join(\n+ __dirname,\n+ '..',\n+ '..',\n+ '..',\n+ 'node_modules',\n+ '.bin',\n+ 'webpack'\n+ );\n+ execSync(\n+ `${webpackPath} --config webpack.config.js --output-path ${binPath}`,\n+ {\n+ cwd: __dirname,\n+ env: process.env,\n+ stdio: 'inherit',\n+ }\n+ );\n+ execSync(\n+ `${webpackPath} --config webpack.backend.js --output-path ${binPath}`,\n+ {\n+ cwd: __dirname,\n+ env: process.env,\n+ stdio: 'inherit',\n+ }\n+ );\n+\n+ \/\/ Make temp dir\n+ await ensureDir(zipPath);\n+\n+ const copiedManifestPath = join(zipPath, 'manifest.json');\n+\n+ \/\/ Copy unbuilt source files to zip dir to be packaged:\n+ await copy(binPath, join(zipPath, 'build'));\n+ await copy(manifestPath, copiedManifestPath);\n+ await Promise.all(\n+ STATIC_FILES.map(file => copy(join(__dirname, file), join(zipPath, file)))\n+ );\n+\n+ const commit = getGitCommit();\n+ const versionDateString = `${commit} (${new Date().toLocaleDateString()})`;\n+\n+ const manifest = JSON.parse(readFileSync(copiedManifestPath).toString());\n+ if (manifest.version_name) {\n+ manifest.version_name = versionDateString;\n+ } else {\n+ manifest.description += `\\n\\nCreated from revision ${versionDateString}`;\n+ }\n+\n+ writeFileSync(copiedManifestPath, JSON.stringify(manifest, null, 2));\n+\n+ \/\/ Pack the extension\n+ const archive = archiver('zip', { zlib: { level: 9 } });\n+ const zipStream = createWriteStream(join(tempPath, 'ReactDevTools.zip'));\n+ await new Promise((resolve, reject) => {\n+ archive\n+ .directory(zipPath, false)\n+ .on('error', err => reject(err))\n+ .pipe(zipStream);\n+ archive.finalize();\n+ zipStream.on('close', () => resolve());\n+ });\n+};\n+\n+const postProcess = async (tempPath, destinationPath) => {\n+ const unpackedSourcePath = join(tempPath, 'zip');\n+ const packedSourcePath = join(tempPath, 'ReactDevTools.zip');\n+ const packedDestPath = join(destinationPath, 'ReactDevTools.zip');\n+ const unpackedDestPath = join(destinationPath, 'unpacked');\n+\n+ await move(unpackedSourcePath, unpackedDestPath); \/\/ Copy built files to destination\n+ await move(packedSourcePath, packedDestPath); \/\/ Copy built files to destination\n+ await remove(tempPath); \/\/ Clean up temp directory and files\n+};\n+\n+const main = async buildId => {\n+ const root = join(__dirname, '..', buildId);\n+ const manifestPath = join(root, 'manifest.json');\n+ const destinationPath = join(root, 'build');\n+\n+ try {\n+ const tempPath = join(__dirname, 'build', buildId);\n+ await preProcess(destinationPath, tempPath);\n+ await build(tempPath, manifestPath);\n+\n+ const builtUnpackedPath = join(destinationPath, 'unpacked');\n+ await postProcess(tempPath, destinationPath);\n+\n+ return builtUnpackedPath;\n+ } catch (error) {\n+ console.error(error);\n+ process.exit(1);\n+ }\n+\n+ return null;\n+};\n+\n+module.exports = main;\ndiff --git a\/shells\/browser\/shared\/deploy.chrome.html b\/shells\/browser\/shared\/deploy.chrome.html\nnew file mode 100644\nindex 0000000000..eb70be0024\n--- \/dev\/null\n+++ b\/shells\/browser\/shared\/deploy.chrome.html\n@@ -0,0 +1,8 @@\n+<ol>\n+ <li><a href=\"ReactDevTools.zip\">download extension<\/a><\/li>\n+ <li>Double-click to extract<\/li>\n+ <li>Navigate to <code>chrome:\/\/extensions\/<\/code><\/li>\n+ <li>Enable \"Developer mode\"<\/li>\n+ <li>Click \"LOAD UNPACKED\"<\/li>\n+ <li>Select extracted extension folder (<code>ReactDevTools<\/code>)<\/li>\n+<\/ol>\n\\ No newline at end of file\ndiff --git a\/shells\/browser\/shared\/deploy.firefox.html b\/shells\/browser\/shared\/deploy.firefox.html\nnew file mode 100644\nindex 0000000000..d2879a17c4\n--- \/dev\/null\n+++ b\/shells\/browser\/shared\/deploy.firefox.html\n@@ -0,0 +1,7 @@\n+<ol>\n+ <li><a href=\"ReactDevTools.zip\">download extension<\/a><\/li>\n+ <li>Extract\/unzip<\/li>\n+ <li>Visit <code>about:debugging<\/code><\/li>\n+ <li>Click \"Load Temporary Add-on\"<\/li>\n+ <li>Select the <code>manifest.json<\/code> file inside of the extracted extension folder (<code>ReactDevTools<\/code>)<\/li>\n+<\/ol>\n\\ No newline at end of file\ndiff --git a\/shells\/browser\/shared\/deploy.html b\/shells\/browser\/shared\/deploy.html\nnew file mode 100644\nindex 0000000000..fa9a21b42f\n--- \/dev\/null\n+++ b\/shells\/browser\/shared\/deploy.html\n@@ -0,0 +1,46 @@\n+<html>\n+<head>\n+ <meta charset=\"utf8\">\n+ <title>React DevTools pre-release<\/title>\n+ <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n+ <style>\n+ body {\n+ font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,\n+ sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;\n+ font-size: 14px;\n+ }\n+ <\/style>\n+<\/head>\n+<body>\n+ <h1>\n+ React DevTools pre-release\n+ <\/h1>\n+\n+ <h3>\n+ Created on <strong>%date%<\/strong> from\n+ <a href=\"http:\/\/github.com\/bvaughn\/react-devtools-experimental\/commit\/%commit%\"><code>%commit%<\/code><\/a>\n+ <\/h3>\n+\n+ <p>\n+ This is a preview build of an <a href=\"https:\/\/github.com\/bvaughn\/react-devtools-experimental\">unreleased DevTools extension<\/a>.\n+ It has no developer support.\n+ <\/p>\n+\n+ <h2>Installation instructions<\/h2>\n+ %installation%\n+ <p>\n+ 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.\n+ <\/p>\n+\n+ <h2>Bug reports<\/h2>\n+ <p>\n+ Please report bugs as <a href=\"https:\/\/github.com\/bvaughn\/react-devtools-experimental\/issues\/new?labels=bug\">GitHub issues<\/a>.\n+ Please include all of the info required to reproduce the bug (e.g. links, code, instructions).\n+ <\/p>\n+\n+ <h2>Feature requests<\/h2>\n+ <p>\n+ Feature requests are not being accepted at this time.\n+ <\/p>\n+<\/body>\n+<\/html>\ndiff --git a\/shells\/browser\/shared\/deploy.js b\/shells\/browser\/shared\/deploy.js\nnew file mode 100644\nindex 0000000000..6cc33e1cbf\n--- \/dev\/null\n+++ b\/shells\/browser\/shared\/deploy.js\n@@ -0,0 +1,56 @@\n+#!\/usr\/bin\/env node\n+\n+const { exec, execSync } = require('child_process');\n+const { readFileSync, writeFileSync } = require('fs');\n+const { join } = require('path');\n+\n+const main = async buildId => {\n+ const root = join(__dirname, '..', buildId);\n+ const buildPath = join(root, 'build');\n+\n+ execSync(`node ${join(root, '.\/build')}`, {\n+ cwd: __dirname,\n+ env: {\n+ ...process.env,\n+ NODE_ENV: 'production',\n+ },\n+ stdio: 'inherit',\n+ });\n+\n+ await exec(`cp ${join(root, 'now.json')} ${join(buildPath, 'now.json')}`, {\n+ cwd: root,\n+ });\n+\n+ const file = readFileSync(join(root, 'now.json'));\n+ const json = JSON.parse(file);\n+ const alias = json.alias[0];\n+\n+ const commit = execSync('git rev-parse HEAD')\n+ .toString()\n+ .trim()\n+ .substr(0, 7);\n+\n+ let date = new Date();\n+ date = `${date.toLocaleDateString()} – ${date.toLocaleTimeString()}`;\n+\n+ const installationInstructions =\n+ buildId === 'chrome'\n+ ? readFileSync(join(__dirname, 'deploy.chrome.html'))\n+ : readFileSync(join(__dirname, 'deploy.firefox.html'));\n+\n+ let html = readFileSync(join(__dirname, 'deploy.html')).toString();\n+ html = html.replace(\/%commit%\/g, commit);\n+ html = html.replace(\/%date%\/g, date);\n+ html = html.replace(\/%installation%\/, installationInstructions);\n+\n+ writeFileSync(join(buildPath, 'index.html'), html);\n+\n+ await exec(`now deploy && now alias ${alias}`, {\n+ cwd: buildPath,\n+ stdio: 'inherit',\n+ });\n+\n+ console.log(`Deployed to https:\/\/${alias}.now.sh`);\n+};\n+\n+module.exports = main;\ndiff --git a\/shells\/browser\/shared\/icons\/128-deadcode.png b\/shells\/browser\/shared\/icons\/128-deadcode.png\nnew file mode 100644\nindex 0000000000000000000000000000000000000000..b6ecc88e13ac082da3b82b48179b8a665fef6214\nGIT binary patch\nliteral 5201\nzcmV-X6t3%uP)<h;3K|Lk000e1NJLTq004jh004jp1^@s6!#-il0000PbVXQnQ*UN;\nzcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU_^GQTORCwC#T}y0K*BL$@8$ZVe;}`>h\nz1c)G66iZFI2%Cf|uyGccNNKA^ilAwUl!p|us8b25szhq&qC{#)71|Wqh^iG;!Hc?!\nzQiZUAO;X8GrGzwugrqh@jE(KV#?PMbjE|W)^Pl@V=gz&JJ3kr?wrB3+od5Ct&s)VD\nz=;N-3yZPHL{@Tu88(4*w5?$f1bNtnNf8WJ3x(`)pHXa*(yt3(K#SD8nBb-zJkRmq!\nz2!DIGviW62*voep_ExU}_y-{Mdn)Ty)^vhvg1to=V1YX-n_vF4Ctnj(<=OmqD{GS|\nz`Zh3u)BwjT>ybDTdtSBR>Yc8vM<Qu=YQfL1P%>#37+`y49TH31Qx$(d+3|r?Wet)|\nz6$VH+)x`PY>Nag=)lJRf|FhXKcKh-tY$;qX-c#vje!Z92-1s=V_2CB<2JlKPJ054t\nzcXY9atq+oa2NPgn$1k2|;}_0Ht3I33EWPbfmVWpV*4X)=_*qAzXaCM$eX(N(!~y2x\nza3PI+!#nmLV9Pqzc>c~@cAVYh3p>*L7dCxupk&vIYi#@eGlE(D(lEc)>&ITNFn}uc\nztNG@e5F~8qPj83H2qqh^YO$-YJSP}9@eE*N^Hm8OI{7=Riwo7>_S6qq>#pxwJ0=)*\nz@W`u?GeGr=o7ep;s*^*a?ml>!Rn^v7J7&WJ-(V}co?ug7elA|7l-~9TTmRad!bEwY\nz32x(OG6RAEYg*eJ0OJ-mof(WA*hZ=WAo)6ViiLzU=L0=RVm)8DCcY^EUT$~+-yJ-1\nzD3CV5xmNE#C>X$rU~&LRA<^n);ux*n-xHdH0*JV-%X@c6Y6>D_0BqjI-~WyL8&o3}\nz)YM~;i~PSsJ-*O4+_<#|4m&a!#h^~i1TBK&ssuoY<0Os&+V{Og+ElNbud3<xAHC$b\nzVE~B02Bw$<5|3l~y+$y>rsJoJGy$~6=Py2;JPgqB{Eu06y17VYe|_Rj-^YTjhbzdc\nzs<gHmzlYt;zJHO;Pfux062P7lz#KSykWGI4AK%xAbIuIkC^9L)38Vk&i_8o}5(<VY\nzq@?xwZ_WH;NI0ZP2dpHZQ_r1K(MPp-1e^2aE6)pcZL(3&8kCy~JQG<kD;fsaLi)xw\nze0b?&>r^zD@7`bkanT-2`>eweu=N0Hwjy{VguSP*L0K~ZCH;PFsuMv<fhBZ)w%l}>\nz1syn(D*q~%e4FZ-VkAG&PumnpE}(JiH%ZC0O<<}Su2t3^JX{36@bfyZ_H`5ljC$2j\nzMX?KyF^00y02EDLz7)!FA#r}fu2Or1vHAICB`y>j3=k#?hSb51yJ;C*gA;xT8yF{s\nz0aSHd3KvKOgkJ4&{7i<U{8EHwCy8^&x`#xXfZHLdf0gMF-E*Q<`(7%EB*q~N7&{CQ\nzHaVev)jNpNElVT=gpGm`;q$twG702V-DB(quUegK1}J6q4nn)S2p?kllsX2pKof+;\nz1eD)Dof$|D1I(1@X0h?8;Gqa%U4)KxE+Uu!n4lbmB9<7yw%v8wK)87_1q;-VngJaH\nz*{lMRRI_SLT$VjPCcvf}BoRNQ!gCv57$Qa%Qdg*nw6$ANh^YyPO8TQ?fXrYq5bU%E\nz1OehmJIfauDxV@~1YH0~cRX8~ZYGm32B7?YTgVtHo03==2y*hlp&6(^ke3*O5dch@\nz20*t=v1DwqB3<noyYDs1=L8DdEr3GmJ}He@DvBf<NTozgL7<bAV&jn&bgK3##02k=\nzt|PPy5;-OvNmM3uqW^<rF@W3@b<>fb_fmKv%f2LTz@h?K>+Cen<COaKLtrwQ&4cQO\nz^x_>1hK#0Ln3vW714(3nOGONT4b5i&SvrPAbKB%nl8jt7Y-J?Yz`ac_XdN)RyeH8#\nzN+iOf!~l_M0F`8I95x%99%eW;G*HE_84RL^w{<lDxB8>44Ty{ZbU2_~6EV7c$6R(S\nz((5XDUqE`Hs|O2GN_8$(vnQ!2v8lne0eD8y@?H`KfK=zYcpfi_T1Qk5ZR57`?zm=D\nz5>rfpbIgv9Sz{Q<45gYS5Gn)6Sh|T?pI!h`w?F%&VB&_ZuMiUCR{0ameS47fB(P!V\nzMZk4}36^o~0Wgce7I2K|y`zlWCNqc50B#MDUPw;U(79Dkn-ONSrLLWALKL1p@2CMy\nz(#yCXgsO+n{Mq`wrEG3I0xjr&LkiaG%~Cfso6SkN?q)kQy?eIj0#L`NTsGhtw}cV3\nz9-|&5TdXZ#Q?a&ujcuAyD+~Zt>~-UD!?<y%=}V7q6Y5Rp4pM{#pzN*e)(so1>Dt%O\nzoT|Hb%2a`okbC&=cXo=lvtbWoZt@wybV`XNqvlXK-~npUZODUY{QSe4;--Oi<?x2t\nz;UTu7Yj@#ArJKcPW`}PSEx_8IL*%)@Q0nKyAY3<Wd+qvri>`TodYbh2sYX~dgx-4p\nzVvZRy1LFU%_rN;yQ&Wz)5!^pC4hB<AeE4r8t(P*9dLU!B-h7l@efEPV#0F6=j;<$=\nz;&2prP*MizDdnUMXaQ=`A)Tsr(lx^BQqQ@e7CFtJD_P4oJ=g=2dWAq5K(<lqq#hT2\nz<FD_CR%&pz8;4?nFxsVH;nr_pH%`4%u#g=u^pNMm00>>ncUY#Ns<w`7MTZwKcK+-g\nz)3E2cB54N0e|_RNj_1JrK%0#8ofet}lToPk#_yUR*(qA%gLEAEiUfKYn*y%&i&h~G\nzD!RtGparC)ta3>6dOg>*=~>o0bc^+8r`YAm>4Lv)s$a%Bn`+svwno;mtlASGY<aA!\nzNV<h;&P!@xj$o0LUp()N*>EnbDZDFPjib;$-1YQ3c*>UvfW6mkKDZC6J_r)mnE{M{\nzk!~MlYVbX;ZCu9&$JpLW*V&n&Y|-X}@H_kspTTFnngSZAKC@`Xbm%{b)^VGE5M<(-\nzX9mE5b@m=o4?ox>t3~zA%W$z=P%7f*M%meU_QIz_VspI`K8x?*yKcaiQoFcrIlqWv\nzS`)nDHva(U_2VIUVgN|J?x0XPUS{vO(M`<_t^37MlJT(cZlO|aV9%8sq{O=szJu?&\nzF+oPdgiy)Ub=zn>b?ab;x%3*Eb_Id5U5WxAHruEHdUWm;MPL5JeQ?8x%s9I+HW~Pu\nzhG*v3G~fS+(skO;!1a_h3vzQt{&AY!#H;U&kXX2N^1c9!Z2?wbiTrct149*z1_pru\nz9y-^{b{jR!fESlWH)}@)e16ovlR0n$hA@H9kknklTMGdy;26v|v>mC05K=h@tRtAi\nzHMr#J??2W>MzO*ec#OsJf+MitZUnS%i`<SSqk2wN$GEq!hD7U*yTU_Liz5T*f*2zq\nzhFsk?*NgOn;Of~TFUL}~AvDm3+0w)&z+4ottoM+KbYXxkTH6yAAs6nXCcQ|%1aY>=\nz@3GE~ObB-pAQJCxK++ZyP~M0U1L%-sm_>~882~2IA2q#|7e^3S<VH61a|Xp0u^bRl\nzt;wpzp(5Cgp!Tz~b8M+l$_?D;ut8XaP1eO6pwb#69I57oKAoH?`kj~1vMEt1bT7Gq\nzlylVSk|r?pXlOU$hFo<~L6s2Ow?%%AMFGF9O|_wJel8YJER>TTB91N$K*#7!%DvoZ\nzxl0&RhFRUH)8eA5$2!B^!Y4n<utQ&r2*8&Q^7?O06-j^C8UV#8UObaP7=Uv5WLD5N\nzwRo%=)@8)<3Bem%q#i4`>2o5=_^YpOvOS+%XD6?ZllDJs>DP5bPiS02-wdEDRl-Sa\nzKI<nZ{awa5Az$*k+nS883CGBnV4!-{EySju%#5?2UmXcm6Hx-=)D3OT3%I7qG249L\nzlPC%y0G_VSPgfn3PfxX{jj#Z|yKi-2E&>~^BMSZ7#3EkT9<dUy8AneHfFOe|0D}v`\nztbJ2Vpq=D}VhD{HLY~5jnyRbV;SDPTZ34c7@2UU~>fb9hRj2rI>~`Pf%<lp1=8MPY\nz`N+<CjsxJJI#2=0MWw1qZ5owxkY&@lA`_|xk79y1?rZa94)9rg2j9IT-Sec1ccS|&\nzZ$8!+HGn!{fz)Sw<{Ny~1nSa{AX%G+O4XTbgT8v+;liwZ@@Z0)p$Zr2Q?E66Izmc!\nzM{5JC;{T@RbE#fc;vZe!z<SoN;P3T{YR}abWVrqJL%<8$TIyMAjaj@6_r3b%17eMI\nz>2V0lS3lkFJJlShGsuhW2MQfJ`L?J2Hmc(Wz!N2A`Glv8Q4){3`mp-wu!(T@g60+g\nz0$)>1i66lL)^UsJdwn35kqJ<_P4>e%`Ri!ka(WhzQxuCzIO%HeIxKr5k}izh7Nub(\nziKTv@xIq;Hr<sEIJDA_3A}erX2r6N~2vE&xNw<pbVY>j>YS-N>OhbMHhfe)xj{dT!\nz(F5iHCPvi)LM;X?i`H%Y(ScER>gz0<o;T0rU7nm_J6ANa+EkTm6fw<#qx_tB(imSa\nzQT9!EN2o3`eLAX@=1{MyDxY)3uq7_#z!Pd<hf@Ff45fSEB);R8EkqPA&B2`-okI*C\nzl8(&}BboEms<d!Ri(SWgku5wsJR!^tJcpO>Ue2~P*O8_V>t^%023EU+0ag&JH=X|N\nz_K0;frQ|aW7UkyIKJo6v09at;=c6EO?1|0oi=G9p1u+H6Jb*cmZ)sordHq5sv{y_O\nz83Wj21UXnq9kP_~3(J8GehO0|-G{yyW>L|O6%E2G=pD*BRvCd=PCc-yK<kB72NCLk\nz2wXU_dp0J6h*4~r0g>U7F@d@9F<%|Qh}Szs@^qV#3ntYFb^X@hXkbw1Ck~-TAj6`P\nz%?OgSfsjhJkx8VUxr+^g9fwb!AH*?X0Ch8P4kUlVzzJ{}p(XGt6_spC7)qu^cQ9Ak\nzk{L{T+*LOb>K&OmxiQ<C>qRDRTT7i$I#y*Q{QN9u2%O8NX#k_y4jadc0aRwdd^{5d\nzP{*snuI5W6Qnh#;8@$u_IUYc2MS(|q@rJ<+m{cCav~;&Mier_cVklM&Ab?^g-Rz0R\nz3OO0nbjZ>jKYTiHFbA6q?UL`73Ac{Bbp6@j11a$RZi_VwOO64ke1fcRSG#`mN5<A|\nz+{~)e>7uc+kfi>Q>hO;ZjIz$gy9&&~)&+YV6c7TB?Bw64uu3vC05vsR<Ks%Ea2leB\nz&48-MhFln(6n?fXlBL~hAP2#npn)TNhdO4dDYCL~D#mRZ-2#XLVn-0=jr;E6|8KEY\nzkbwxI%2c_kqei1+mZE7SmJFcA^KDPf1~XuDkk>!;K*vIOwLb9iWZ4&G%Y%YASyz}i\nz252OweT4V;SlC&Zh=cd65X=As9)w_CsIu>UYgz(d+lA5F$<zQUO_pfN7ns4s?!HBg\nzkAa5}wD>cT8i0C2SScT<-0g7?l+LB3kpF&eVuHJ=GZhU`>gVQ|sBLHg6}*|0p+gJU\nz^jc!i0C9K{h>6-3fbcpE2!r4YfJ>yQ@j{4M?KUbq2B?q8Q$gS+26y4IMN(^uFK|3;\nzKA7OikFJSwv}1&}DN7SjiiaamuA+%+c!Wp@0bkgPJ;>RGhprBnKLbQTP~#>j9HD2*\nzEqvB;F26s-Q8S5T0I1qmuH5il8$c1278Yq}kD3LT0j3C_*WrhtaSJb06PHav!lx7y\nzzty?{8_WbvqT2p_YnnZ2m(IpoVK!t)85#vG=Hi{d;9VTNr?tEo06`zMUeM;_<8=f;\nzWn*?=F(ACfx>q(8WcILeNEW$i85FFj+C#LIx0kUSNCkarLY)8OHZK^U4auXR;0@XY\nzwSq-}aAlKYzzM3ol;vNsVE`)W6Xx8Ze{$DKR}g{?kVT&+;O(q9$4s$XxJvI9Mx6?d\nzi~(i{1_*QbQ+95Sls;q#@sg_B4|t<Z%qYoVRKN+^CJq%rkuZSnv9Y$sz^TXDAu4ZD\nz1&a@<r_?VPB50mK*9WKuoFwzbfs7s+WkM(quW4;lfMD8q3MsmbSHFC4@sTUyTztXN\nz@{M<tVZE@nMccBCzP!$+I`-b^WT3u4st*w7%8i!EnTQwp`JE<^CxQV|wY9A2p@$X8\nz-9kPs%nQjUm@V(xEoK$q89SI8AOR;fAF9|3(8Gp(D;<mpvUBqbOjM}$!Bl<26JqnD\nz27a*!1nDFl)5rWIi||>@7eE7LzH2ESF?Zl_V6y^Hh-#uB<^ZlAl_x-NV4OBTQU;J6\nz!j%2S11j7=AwGv86&Ov^su?aRKNFO&`9agP#|Fj-;914uMkRlIyt+YX^3;)NA-`~b\nzF+y0gFcA}7MP4M^WO4=w(Kw8T3CcXLZCn{?(}x#|G!%@DMRTW4f*UkX3v(k|J@g10\nztAwyD%mbJM+Tq&Nte73tluEHp4K?CDhc#;0QlQAM5_14hAJAYS4gj+Pskikg8!8Kj\nz*gaHvN6c*bl4StUSBH9BA4plsjR#Q^K_S_3wBt*j0mS29U+od5z|Z5+MaMDsCTu^v\nzO4@&w!k+t^SO$;;Jb)LvhS54E`vJiax5Z$HF_B3W&kXGUAk<1?O8uLJi7O1?gCNmi\nzNVOlz6#4O~B?Ii1L>wUQ1T<eL{dHw|pA`ns5Yo6ZoQwBo4JwG^OpykHDijY5aHX;g\nziKQ!GfOC~~NGzQL1N2tbA+gje!de^$e8%54RMsO|>i_<}iyNgEu(z@viKD%XZXo9b\nz;DFaFYmyjxePPd8L1u%Sg5&&cPi1||nojV|-<$6SF4DpuDw?3YCBMMjletZ<3AXdM\nz;}u|7K7bE4U#fjq2FPQCZvM85zqVJHVM%T}HoTW_{2ASc{x84)?5Ek@&+CHc00000\nLNkvXXu0mjfgeJQI\n\nliteral 0\nHcmV?d00001\n\ndiff --git a\/shells\/browser\/shared\/icons\/128-development.png b\/shells\/browser\/shared\/icons\/128-development.png\nnew file mode 100644\nindex 0000000000000000000000000000000000000000..b6ecc88e13ac082da3b82b48179b8a665fef6214\nGIT binary patch\nliteral 5201\nzcmV-X6t3%uP)<h;3K|Lk000e1NJLTq004jh004jp1^@s6!#-il0000PbVXQnQ*UN;\nzcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU_^GQTORCwC#T}y0K*BL$@8$ZVe;}`>h\nz1c)G66iZFI2%Cf|uyGccNNKA^ilAwUl!p|us8b25szhq&qC{#)71|Wqh^iG;!Hc?!\nzQiZUAO;X8GrGzwugrqh@jE(KV#?PMbjE|W)^Pl@V=gz&JJ3kr?wrB3+od5Ct&s)VD\nz=;N-3yZPHL{@Tu88(4*w5?$f1bNtnNf8WJ3x(`)pHXa*(yt3(K#SD8nBb-zJkRmq!\nz2!DIGviW62*voep_ExU}_y-{Mdn)Ty)^vhvg1to=V1YX-n_vF4Ctnj(<=OmqD{GS|\nz`Zh3u)BwjT>ybDTdtSBR>Yc8vM<Qu=YQfL1P%>#37+`y49TH31Qx$(d+3|r?Wet)|\nz6$VH+)x`PY>Nag=)lJRf|FhXKcKh-tY$;qX-c#vje!Z92-1s=V_2CB<2JlKPJ054t\nzcXY9atq+oa2NPgn$1k2|;}_0Ht3I33EWPbfmVWpV*4X)=_*qAzXaCM$eX(N(!~y2x\nza3PI+!#nmLV9Pqzc>c~@cAVYh3p>*L7dCxupk&vIYi#@eGlE(D(lEc)>&ITNFn}uc\nztNG@e5F~8qPj83H2qqh^YO$-YJSP}9@eE*N^Hm8OI{7=Riwo7>_S6qq>#pxwJ0=)*\nz@W`u?GeGr=o7ep;s*^*a?ml>!Rn^v7J7&WJ-(V}co?ug7elA|7l-~9TTmRad!bEwY\nz32x(OG6RAEYg*eJ0OJ-mof(WA*hZ=WAo)6ViiLzU=L0=RVm)8DCcY^EUT$~+-yJ-1\nzD3CV5xmNE#C>X$rU~&LRA<^n);ux*n-xHdH0*JV-%X@c6Y6>D_0BqjI-~WyL8&o3}\nz)YM~;i~PSsJ-*O4+_<#|4m&a!#h^~i1TBK&ssuoY<0Os&+V{Og+ElNbud3<xAHC$b\nzVE~B02Bw$<5|3l~y+$y>rsJoJGy$~6=Py2;JPgqB{Eu06y17VYe|_Rj-^YTjhbzdc\nzs<gHmzlYt;zJHO;Pfux062P7lz#KSykWGI4AK%xAbIuIkC^9L)38Vk&i_8o}5(<VY\nzq@?xwZ_WH;NI0ZP2dpHZQ_r1K(MPp-1e^2aE6)pcZL(3&8kCy~JQG<kD;fsaLi)xw\nze0b?&>r^zD@7`bkanT-2`>eweu=N0Hwjy{VguSP*L0K~ZCH;PFsuMv<fhBZ)w%l}>\nz1syn(D*q~%e4FZ-VkAG&PumnpE}(JiH%ZC0O<<}Su2t3^JX{36@bfyZ_H`5ljC$2j\nzMX?KyF^00y02EDLz7)!FA#r}fu2Or1vHAICB`y>j3=k#?hSb51yJ;C*gA;xT8yF{s\nz0aSHd3KvKOgkJ4&{7i<U{8EHwCy8^&x`#xXfZHLdf0gMF-E*Q<`(7%EB*q~N7&{CQ\nzHaVev)jNpNElVT=gpGm`;q$twG702V-DB(quUegK1}J6q4nn)S2p?kllsX2pKof+;\nz1eD)Dof$|D1I(1@X0h?8;Gqa%U4)KxE+Uu!n4lbmB9<7yw%v8wK)87_1q;-VngJaH\nz*{lMRRI_SLT$VjPCcvf}BoRNQ!gCv57$Qa%Qdg*nw6$ANh^YyPO8TQ?fXrYq5bU%E\nz1OehmJIfauDxV@~1YH0~cRX8~ZYGm32B7?YTgVtHo03==2y*hlp&6(^ke3*O5dch@\nz20*t=v1DwqB3<noyYDs1=L8DdEr3GmJ}He@DvBf<NTozgL7<bAV&jn&bgK3##02k=\nzt|PPy5;-OvNmM3uqW^<rF@W3@b<>fb_fmKv%f2LTz@h?K>+Cen<COaKLtrwQ&4cQO\nz^x_>1hK#0Ln3vW714(3nOGONT4b5i&SvrPAbKB%nl8jt7Y-J?Yz`ac_XdN)RyeH8#\nzN+iOf!~l_M0F`8I95x%99%eW;G*HE_84RL^w{<lDxB8>44Ty{ZbU2_~6EV7c$6R(S\nz((5XDUqE`Hs|O2GN_8$(vnQ!2v8lne0eD8y@?H`KfK=zYcpfi_T1Qk5ZR57`?zm=D\nz5>rfpbIgv9Sz{Q<45gYS5Gn)6Sh|T?pI!h`w?F%&VB&_ZuMiUCR{0ameS47fB(P!V\nzMZk4}36^o~0Wgce7I2K|y`zlWCNqc50B#MDUPw;U(79Dkn-ONSrLLWALKL1p@2CMy\nz(#yCXgsO+n{Mq`wrEG3I0xjr&LkiaG%~Cfso6SkN?q)kQy?eIj0#L`NTsGhtw}cV3\nz9-|&5TdXZ#Q?a&ujcuAyD+~Zt>~-UD!?<y%=}V7q6Y5Rp4pM{#pzN*e)(so1>Dt%O\nzoT|Hb%2a`okbC&=cXo=lvtbWoZt@wybV`XNqvlXK-~npUZODUY{QSe4;--Oi<?x2t\nz;UTu7Yj@#ArJKcPW`}PSEx_8IL*%)@Q0nKyAY3<Wd+qvri>`TodYbh2sYX~dgx-4p\nzVvZRy1LFU%_rN;yQ&Wz)5!^pC4hB<AeE4r8t(P*9dLU!B-h7l@efEPV#0F6=j;<$=\nz;&2prP*MizDdnUMXaQ=`A)Tsr(lx^BQqQ@e7CFtJD_P4oJ=g=2dWAq5K(<lqq#hT2\nz<FD_CR%&pz8;4?nFxsVH;nr_pH%`4%u#g=u^pNMm00>>ncUY#Ns<w`7MTZwKcK+-g\nz)3E2cB54N0e|_RNj_1JrK%0#8ofet}lToPk#_yUR*(qA%gLEAEiUfKYn*y%&i&h~G\nzD!RtGparC)ta3>6dOg>*=~>o0bc^+8r`YAm>4Lv)s$a%Bn`+svwno;mtlASGY<aA!\nzNV<h;&P!@xj$o0LUp()N*>EnbDZDFPjib;$-1YQ3c*>UvfW6mkKDZC6J_r)mnE{M{\nzk!~MlYVbX;ZCu9&$JpLW*V&n&Y|-X}@H_kspTTFnngSZAKC@`Xbm%{b)^VGE5M<(-\nzX9mE5b@m=o4?ox>t3~zA%W$z=P%7f*M%meU_QIz_VspI`K8x?*yKcaiQoFcrIlqWv\nzS`)nDHva(U_2VIUVgN|J?x0XPUS{vO(M`<_t^37MlJT(cZlO|aV9%8sq{O=szJu?&\nzF+oPdgiy)Ub=zn>b?ab;x%3*Eb_Id5U5WxAHruEHdUWm;MPL5JeQ?8x%s9I+HW~Pu\nzhG*v3G~fS+(skO;!1a_h3vzQt{&AY!#H;U&kXX2N^1c9!Z2?wbiTrct149*z1_pru\nz9y-^{b{jR!fESlWH)}@)e16ovlR0n$hA@H9kknklTMGdy;26v|v>mC05K=h@tRtAi\nzHMr#J??2W>MzO*ec#OsJf+MitZUnS%i`<SSqk2wN$GEq!hD7U*yTU_Liz5T*f*2zq\nzhFsk?*NgOn;Of~TFUL}~AvDm3+0w)&z+4ottoM+KbYXxkTH6yAAs6nXCcQ|%1aY>=\nz@3GE~ObB-pAQJCxK++ZyP~M0U1L%-sm_>~882~2IA2q#|7e^3S<VH61a|Xp0u^bRl\nzt;wpzp(5Cgp!Tz~b8M+l$_?D;ut8XaP1eO6pwb#69I57oKAoH?`kj~1vMEt1bT7Gq\nzlylVSk|r?pXlOU$hFo<~L6s2Ow?%%AMFGF9O|_wJel8YJER>TTB91N$K*#7!%DvoZ\nzxl0&RhFRUH)8eA5$2!B^!Y4n<utQ&r2*8&Q^7?O06-j^C8UV#8UObaP7=Uv5WLD5N\nzwRo%=)@8)<3Bem%q#i4`>2o5=_^YpOvOS+%XD6?ZllDJs>DP5bPiS02-wdEDRl-Sa\nzKI<nZ{awa5Az$*k+nS883CGBnV4!-{EySju%#5?2UmXcm6Hx-=)D3OT3%I7qG249L\nzlPC%y0G_VSPgfn3PfxX{jj#Z|yKi-2E&>~^BMSZ7#3EkT9<dUy8AneHfFOe|0D}v`\nztbJ2Vpq=D}VhD{HLY~5jnyRbV;SDPTZ34c7@2UU~>fb9hRj2rI>~`Pf%<lp1=8MPY\nz`N+<CjsxJJI#2=0MWw1qZ5owxkY&@lA`_|xk79y1?rZa94)9rg2j9IT-Sec1ccS|&\nzZ$8!+HGn!{fz)Sw<{Ny~1nSa{AX%G+O4XTbgT8v+;liwZ@@Z0)p$Zr2Q?E66Izmc!\nzM{5JC;{T@RbE#fc;vZe!z<SoN;P3T{YR}abWVrqJL%<8$TIyMAjaj@6_r3b%17eMI\nz>2V0lS3lkFJJlShGsuhW2MQfJ`L?J2Hmc(Wz!N2A`Glv8Q4){3`mp-wu!(T@g60+g\nz0$)>1i66lL)^UsJdwn35kqJ<_P4>e%`Ri!ka(WhzQxuCzIO%HeIxKr5k}izh7Nub(\nziKTv@xIq;Hr<sEIJDA_3A}erX2r6N~2vE&xNw<pbVY>j>YS-N>OhbMHhfe)xj{dT!\nz(F5iHCPvi)LM;X?i`H%Y(ScER>gz0<o;T0rU7nm_J6ANa+EkTm6fw<#qx_tB(imSa\nzQT9!EN2o3`eLAX@=1{MyDxY)3uq7_#z!Pd<hf@Ff45fSEB);R8EkqPA&B2`-okI*C\nzl8(&}BboEms<d!Ri(SWgku5wsJR!^tJcpO>Ue2~P*O8_V>t^%023EU+0ag&JH=X|N\nz_K0;frQ|aW7UkyIKJo6v09at;=c6EO?1|0oi=G9p1u+H6Jb*cmZ)sordHq5sv{y_O\nz83Wj21UXnq9kP_~3(J8GehO0|-G{yyW>L|O6%E2G=pD*BRvCd=PCc-yK<kB72NCLk\nz2wXU_dp0J6h*4~r0g>U7F@d@9F<%|Qh}Szs@^qV#3ntYFb^X@hXkbw1Ck~-TAj6`P\nz%?OgSfsjhJkx8VUxr+^g9fwb!AH*?X0Ch8P4kUlVzzJ{}p(XGt6_spC7)qu^cQ9Ak\nzk{L{T+*LOb>K&OmxiQ<C>qRDRTT7i$I#y*Q{QN9u2%O8NX#k_y4jadc0aRwdd^{5d\nzP{*snuI5W6Qnh#;8@$u_IUYc2MS(|q@rJ<+m{cCav~;&Mier_cVklM&Ab?^g-Rz0R\nz3OO0nbjZ>jKYTiHFbA6q?UL`73Ac{Bbp6@j11a$RZi_VwOO64ke1fcRSG#`mN5<A|\nz+{~)e>7uc+kfi>Q>hO;ZjIz$gy9&&~)&+YV6c7TB?Bw64uu3vC05vsR<Ks%Ea2leB\nz&48-MhFln(6n?fXlBL~hAP2#npn)TNhdO4dDYCL~D#mRZ-2#XLVn-0=jr;E6|8KEY\nzkbwxI%2c_kqei1+mZE7SmJFcA^KDPf1~XuDkk>!;K*vIOwLb9iWZ4&G%Y%YASyz}i\nz252OweT4V;SlC&Zh=cd65X=As9)w_CsIu>UYgz(d+lA5F$<zQUO_pfN7ns4s?!HBg\nzkAa5}wD>cT8i0C2SScT<-0g7?l+LB3kpF&eVuHJ=GZhU`>gVQ|sBLHg6}*|0p+gJU\nz^jc!i0C9K{h>6-3fbcpE2!r4YfJ>yQ@j{4M?KUbq2B?q8Q$gS+26y4IMN(^uFK|3;\nzKA7OikFJSwv}1&}DN7SjiiaamuA+%+c!Wp@0bkgPJ;>RGhprBnKLbQTP~#>j9HD2*\nzEqvB;F26s-Q8S5T0I1qmuH5il8$c1278Yq}kD3LT0j3C_*WrhtaSJb06PHav!lx7y\nzzty?{8_WbvqT2p_YnnZ2m(IpoVK!t)85#vG=Hi{d;9VTNr?tEo06`zMUeM;_<8=f;\nzWn*?=F(ACfx>q(8WcILeNEW$i85FFj+C#LIx0kUSNCkarLY)8OHZK^U4auXR;0@XY\nzwSq-}aAlKYzzM3ol;vNsVE`)W6Xx8Ze{$DKR}g{?kVT&+;O(q9$4s$XxJvI9Mx6?d\nzi~(i{1_*QbQ+95Sls;q#@sg_B4|t<Z%qYoVRKN+^CJq%rkuZSnv9Y$sz^TXDAu4ZD\nz1&a@<r_?VPB50mK*9WKuoFwzbfs7s+WkM(quW4;lfMD8q3MsmbSHFC4@sTUyTztXN\nz@{M<tVZE@nMccBCzP!$+I`-b^WT3u4st*w7%8i!EnTQwp`JE<^CxQV|wY9A2p@$X8\nz-9kPs%nQjUm@V(xEoK$q89SI8AOR;fAF9|3(8Gp(D;<mpvUBqbOjM}$!Bl<26JqnD\nz27a*!1nDFl)5rWIi||>@7eE7LzH2ESF?Zl_V6y^Hh-#uB<^ZlAl_x-NV4OBTQU;J6\nz!j%2S11j7=AwGv86&Ov^su?aRKNFO&`9agP#|Fj-;914uMkRlIyt+YX^3;)NA-`~b\nzF+y0gFcA}7MP4M^WO4=w(Kw8T3CcXLZCn{?(}x#|G!%@DMRTW4f*UkX3v(k|J@g10\nztAwyD%mbJM+Tq&Nte73tluEHp4K?CDhc#;0QlQAM5_14hAJAYS4gj+Pskikg8!8Kj\nz*gaHvN6c*bl4StUSBH9BA4plsjR#Q^K_S_3wBt*j0mS29U+od5z|Z5+MaMDsCTu^v\nzO4@&w!k+t^SO$;;Jb)LvhS54E`vJiax5Z$HF_B3W&kXGUAk<1?O8uLJi7O1?gCNmi\nzNVOlz6#4O~B?Ii1L>wUQ1T<eL{dHw|pA`ns5Yo6ZoQwBo4JwG^OpykHDijY5aHX;g\nziKQ!GfOC~~NGzQL1N2tbA+gje!de^$e8%54RMsO|>i_<}iyNgEu(z@viKD%XZXo9b\nz;DFaFYmyjxePPd8L1u%Sg5&&cPi1||nojV|-<$6SF4DpuDw?3YCBMMjletZ<3AXdM\nz;}u|7K7bE4U#fjq2FPQCZvM85zqVJHVM%T}HoTW_{2ASc{x84)?5Ek@&+CHc00000\nLNkvXXu0mjfgeJQI\n\nliteral 0\nHcmV?d00001\n\ndiff --git a\/shells\/browser\/shared\/icons\/128-disabled.png b\/shells\/browser\/shared\/icons\/128-disabled.png\nnew file mode 100644\nindex 0000000000000000000000000000000000000000..67b1c9a31a6dfe22567ce26e385b0be06022e3c2\nGIT binary patch\nliteral 4792\nzcmV;p5=ZTcP)<h;3K|Lk000e1NJLTq004jh004jp1^@s6!#-il0000PbVXQnQ*UN;\nzcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU^T1iAfRCwC#on34eRT{_pK`90cRf%Gk\nzR*fIo+TcfG6j0;Umc|&pSQalxG=XA_8na-$@CL=0ctMaGBt!~{CSJf26Af`IUKyoj\nzjftY$C4NN<T||Plg|cl$WY3Ru%s73XnKLtI-g)WFlS~4A=biV=Isfx~KhLSH38y(z\nzSEIS=Yf8G9=$yGG%{4J~iBzlnods_$7kx&7VPpyrkpP%)uDRu$%}6?9u2KIVf;+sq\nzT>KeLv!~X4LIOa!^NT?Z=Bo3=L7h+Lmy2H<nme`TzXPDToRh*)vj>1VrM6#4V$J7x\nz04S-LbO8X3<vbLY8tY2-Uu-c@SI$APsRTg5X;w84?(MhV?zsH&%jfa$;o;#^4?XnI\nzz{N1$wzjs8*|TTQ|MABk2Tq?pJ$moG_x4xon280nRMUXI`s%Bdt*xyq=ggV2RQmjv\nzUw#=FA0Hq1{`>FWyY05ydh;CX+O=!vJ^SplT`esw%P+a)l4W&ub@Q})M@L8ZeDTE>\nzd#Vi#RRe$zKm2g%k|j&F%$hZ;)%H8T{r20bpMU;&&+gs3d!Bsq$)lAT>#MK6+PZ4h\nzs`c~d&tDn$yFdN(Q_q403!X0l5ZLuM-gx7dG|ym%z4_*wuVe{?Gz%Z(VoyEw)QTND\nzcAP3a09-77aECqj+;f{<PA;te<(FT6=87w>=yvr?0NdQ$ysppyU`IXv_~ZM-WM>jW\nzG#Gii&V`Qf*=L`1End8Mi|rUECMGV(c<wifU`N=!Uw{4ex|?pgX-{FzK-j4^u}tKl\nzLx<MX*4F;XyB>S&vG$KX`e+5a{MTQ9RargHy!F;wcaDvX?PT{R-SvE*=Y%aj<6u1R\nzyz@>cV>HU(3a-Y+#!kk2{P^)#0HpNY>#x6lW76?m^c;ZQ|HKnd989w_qAUiF8}#+{\nzt&XF8W6s@w|NT3|6jA{C<(FUf*l-yZdF$4#dnJx=<j9fdues)$p27j(<jIp8C7GIp\nzEyAWdIyznmTQGLw)mLA=Ijv5@j{okv?_P;JMnJHA`}ThYxd{p(+@f$Iz-ZFTgMT}7\nz=1gxAnaD0|XlPi%B5U_7T)1$3lt>sE8QBuH_^^7zwK|iG5vBCoZ@-;p{=pUChJ^wE\nzELPgBufP8K3u&Iq4o4QVtEA88&Yjx@D-KRLpco$?->aE-h!J!T?DsU*1;CMXmj@nr\nzV0obc(B9tOA=$<*Y<S$o*w~m^(&y|rEDu2Fm(Q9Wfvh+8-{s1KckI})9)TNn6bb-M\nzO--$WjCN)Yu}iVB(I+%3!R)%dcpo+8%wzdz^e%l0Mqil*B%=f5CIWI%0%5no9S4ie\nz!cWd3FI%>3S6p91mNxqN^XLCNZ6S;aSvWs{pWb-mjZ7kafNI~qeJeCuT$1-$J7_#-\nzQ8iF50FYR2mVR;c0_3=+9Qqd@u;k&L^K_Cz03gVYZFgr{y`ZP3XHD2Wm}!;BIWXq#\nzwBPXZ9ttS}qIRYWLfh}|?%o-853bot?8LKY&z`EO5-LneSeUjSv<~uO$Atwzm@nT2\nz;o*x~d_M@fy1KSx8Kg0$<)T6ZAS{ySntu4<hi5bopBAYDEO3mhKp@%upMU=OP>}#o\nzk(VW~LkvLrj3^wgW6eYa1e-Q(+E}SMsbor9Rq6n)<u1=dsgpj#P3(nW(fUaqk?w<Y\nz3=R%<yMEVMvt|`r1WZm&9?jAWf^`$mm%M*i9Klp9qKR+>=~-=UZ5s(UI|e{&ULvt7\nz05Cp2K1~GNaKjDDTs?n_At~C(L=z~Iz5_?l0!XBUxeD1zoUT$Lv1$N7!9-S?F)W*~\nzZ}9KP`FG!acTJeb5zZj_B;X`bJ_K7bKx?((h%*`hRLcke=y0*SVA;}Vwq8Csgr*dd\nz#gul8S6y{ghYd%p6y;JHMu6u0`Sa5z*oEAeK4VuKu5%QV&=R1%lIcha8{ynE*~W&;\nzO!Iks^UXJXg#v)LD8WT1bZZk5=03mPz@(yCYdL}Z&OP_sv)9GA$r3g@w%=pj>|O(y\nzqX3MEW>ip10(xFP04TSlP`q=&T^3B-gry@hVVhBlTrGt70Nez8%yraQ7Xu!sd7lR#\nzd~kp8{`&g*_QG)hqj3)y00d3J<%UgP*wO41*99XLQL4<Cacy%Mk%1XW0*IOeU^qx$\nzp5x680LW4%C&(TbE?hVx12I~>!<c}%Mg}V`0&uEad+oK$jj6V@lI+}L&6bXuMU@^K\nzif0}r?-c<6vhVJ@?_PP?WtXk21Y5_e_tHx*?QxZ5goUwf+qV4@C|Epmjk*Gi2Zl=Z\nz637$)1Y?X6*PX`1!+U46Z8~lI$KP>7QX(OWOD?_i(lxH%1<OOSBv`QR+qZWT%)wiD\nz%PqGo!aBjRg>NJ6yOT!l63h~{xV+46`Lj{vHlI6pZuERYGK;(0O!!}Umh>BZCVh|J\nz)V|~5I(hQs4(WHN6gl;Kh6Da3&3y1(<}{0UbLI(zP2y;w{*4f<EvuKjZYW0Vat-x#\nz5|REsG&Hn1%bh~s0V!~Uf)^DqlIDZhgH1jp-(^mjTjtnho`Mq*0IMhTYP0A;g-0q9\nzWs<4&lfKUcNHKoQEQ&ZPp~T`0lGrtMgAxFv-VyQA-rn9ty`+sU!5re+c9p%Hn0*+T\nzcNgr>hK-Gljs4S1-fD?GO84`3NxW#RRJuQ_i+7R60GpQXKYRA<k>I_E6X{;&2oY#A\nzr_4QTkn(+!ebMatzemY6Pj*EO(sqKhiP0uAtBd#1-aYuPaR8n~m*R72W7%GbM1ZD&\nz`&rb96DN8$Y}l~FMkY%vGUy_e+^F7t6n(^z{hqe&|65#>OA|#wD@2;BFcBx|RxiHz\nz;@T^(ys|q?#M<^hNF@S5rN;jJY%s32s_hcEjCYSFYW(-u>?n!b_{9_!hV8huXZfEY\nz?cgLF%Nu``^^~ay2$T0|<&iX*o_VF2eUp=u|F(HH-;ZO4F_AVPhV_P-g@DtwzQT8T\nzZ-*eTyD>~L(UhM!*Wlpb22G}Fz_Zz{+9E^|lWYTmFwP`>W((RVZV<K}wp`H~02<O0\nz{8;EqNzd2VY?SjQYTULUNGiUxaRYQ$%BThcxScIGuCq}>NQ#s`b6G}>5{CjM1ZG6L\nzc-O97>ynP!mT==nWf75PCMA<<<HoJ)$|pe%qx9P-i;q6~=nGci>!=&hKqc*y?isGj\nzs6YMmQ>%7qymV9{g*NWEg!Ucfd80+G?YLcgDz!vb5@T&LnIi$PV8MdFNnWok8XjYc\nz+2qLEOt>`eBm{`)2p)D1U}Qr?J&Oom7T(E^KmJ%;i-#Y6xH}a9v~FHfqa#;D55Ba!\nzALP4?=Nm2%S-eV|Ak44NF3l>u%X1Yj(2)uNQa3MX-@bkCWd(pun>O`^O{C544?20$\nzl1&pQSUb)y?Q^62W!eq&^y$<6QjjVY0HkhS9?Q$>MVLs=07$y~^CUc<+Gkm}ok`ks\nzqAD9i81_9c=}yd(!gK{MmA%@iE`qHb)pUcb288_9;ta5~YMn^vy6di6uYGp=?YDPl\nz`P*bv2mfZ%jVu%ZhYueXlPK@J^UkiUUL;C$z2lBMBCC5`D_bKYBazP|Cn8Mov^C3;\nzZW<}|Oln3I3jjDdB(u!MHcm<;j)r{>7htlZo+CMxQkYr2X?A}cvn&Z|PM-q@4(v$<\nz0L|pXHl_sI^^35uHqINH$+mSWMG<T?s;D$-_xr)^dgEx-&^F_?0swXM5*Oe{iFLbt\nz84iE2R1#aGxBy}xEf>HX-M@c-sKbi|wE?89Qz`C-(W;@N#vRKFIC$`&+Cs$@2#{lv\nz-Ku%mY>r!5XDCe%LYtCuT+Y(&*N(NZ1-Z@QYiApf91^GDrB&o9EE$2wT-uan?fE=c\nzOUJeeL-T#xyhVRB%_hpJ<tTdT>0u%6nv6ohndJl2MC1gd%}tZSr{2qiC4<^drfsbP\nzV6jcu(B{JfrWWE(n#0KahGjI_<}lQxNeYe1SY-m^q*c{~#MJ$O(l`WZTyb^}JDYc4\nzoc@dF$H~;u#vCk8k>-m<j59yXXA~Dpm=2aKE7&H>CJqoJ7B5YbO%7hAF54VMEuGB<\nzY&Hv@HX|#MD;U2vXY+)GZc*r{rQ>jjD2-h@Kx%Y!bXve^U|>MBceP5PtcdrK6jl_@\nzpwC|maZ@a-Srt6ru=D-QUsyng=W@_S(rn;Vu>iD8Dq*7H;Jg6Zs$q?Xu^57GWG&<@\nzIWedtlH8ko-?slxT4I5;29#P{UIKFv^i&)%Ka_tlUr|M+-U()Dy`D}=!&t=5&d!at\nzO`k!ovC;b}52O7{Fuy)5Z$9k6$!*)VEy+4ssGWBhR+X&PG+?e#McmZX)D`DwT5Nn*\nz=NdRI4<}HAuRd+}@2Dfz^QsTDDG}GcYxI|cX_8cUw@*I#WV7oyM<)FN(gFclN`gbM\nz$&#N9YYiK+Jc<>$Y;*i8<9p<hM>^;eV0QP-jg5^RNf)0Sh%B2$WZEDCc1-}pMQ0Gi\nz0xeaEaCylO5*M)9jY&x3I(}A8zJiP9R=lebHUD_)t+z5yfT>uIAg?!29C??N;2^`p\nz!+%h`Y@0C}ouoCG3B@j!0xmA8(yd`C4gd)ZVFji|A;60DP{~El9RQx3eC@T@4i{;$\nz+2z%CdU$Sq0*!22Chdma-rjX&Ba@1qw#ic7i|us`9U2<yKXBl{1+y(^!sh*cxp4qV\nzsnX0pf6G|paeaOL{Hza}imRM@eS^_8=>4lHZ<0Bf)v>u%%>ksY+3XbQ-YKUCSFdDp\nzddiy?AD38f)PiaN^JI3|B8L$UFr)kY0RU}nZE%5N0YEx8$77Rm$hUL)2L}h|X&Exa\nzE^NJLQ`~8(1SC!$O=Fr#J(3G|eEbvuT7#3D*5<_-Bc*}GISUYuqS^Z#E|qqSIJSa+\nz%d_4g7XV1P{jQFWB@Il9zM*VIC9>kU;;4D)GxQS|eS9TZpQj>NHI+d&IqWt>X&Gk&\nzNuS}&(T;ub&KA~A8gp3<9Rz5eZSivffOJBb%LA2>^)#=LJ|mJR<tM-$q@C!=eaDu=\nzkPTNX6bEp9ZVrhVTCM`tf<G?-uAsSk`}+D;yY|Ps;&vA;02&$^D#G$$+gg2`cS<<i\nzK#K1}aFHzR^THn=Z_~KI6+Qj*)2p?!00DvKJ0J|3bxC)WSS*wX$jTFjQmCB;s3~8V\nzlELF;U6NLHU1$JgNq|5*C0x?@F(tDc4@b<E0H`ow8AO4A#fMvDdFBAr)YLS;1VDhY\nzY&ubGBpn}HC;&)ikjvxaCBn`|=?inZ;0M^cb?e?dz$hK4J!1hNnL$MJvidztJ+gUi\nzJZ^x%GZ8Zs0XGYZ;b>t1AZfvd17tGcG*Hk?J!HOS9RLEGP9#Z)EaBka@;W~_7XV0F\nzu-O$(U7`5)skG6;!=A#YDTaUm;JB_h(wbQ2)&4FQ0B8|0S51^)-^g+;>C~_7d)9$g\nz=SXOn`bJl+T?}VQ)Xi(gSpkxFZq=$)>(f3LmJj>ZLaccBf~KBV=ct9G$qu4sFY0JG\nz8)|83>9$ddXFLFoA3r|L&B~5Vs(isc*r~95P1&P>0}r2M=kqtRbEWp{o=D)hxUsRZ\nzok=+r;>5NPcE$rh>o;thx#O4hMDxhD)$;g|@rMo_T4Pg24L}G2X$~WzhWu9C0~}E(\nzrA#A4kE=q@B$QiLFvO14>g=P6CEyhI-FIJiRHYHmN|MLN^8sU2whkQQgAYFF(H7A=\nz^-D`Lb9v~-MF#+_Y}&6Joj7r#*UO{BSAe-_d%|X#qtyItTU)%~PWBGD_Wl-C`W@%^\nzxETomNUOI`L#}J+<MuzWr9A5ass;dIq987@qd0IPE0&5Jrzxb1!zl7*{kbcFej;fj\nzO;=AAo(YAWW;v-mo8REKY>u|k6w+#0{Hoyqej9$#qD9ZxX2}AYW5<rYm)B$xU|PI*\nz@k-m0cN9iWJgKHbFRBUvepX9ysK4QY=ePHYEsZVSmv!7eE*L2BGG=0{Kjn?_4i66x\nzy#N0D{ndEdNmT-%q=M-HC6xdusRTetc>&;DISqxSa{yqnoQJ~FBmkHw=b^AP;Q^o&\nz0|jLN9sr<`ay|-27uLMqhX%kfyPTIo(3z?0cL3B(DTDmKp`4!?P5(33?==YZL8YMN\nz1T%i;|Dgb-R=Kg!T+ISNO1gLzz7fgfuZ{TPoT;m^1j9wS=#x`iT{ZRpFTen&T)1>{\nSp@}{K0000<MNUMnLSTaTkuNs@\n\nliteral 0\nHcmV?d00001\n\ndiff --git a\/shells\/browser\/shared\/icons\/128-outdated.png b\/shells\/browser\/shared\/icons\/128-outdated.png\nnew file mode 100644\nindex 0000000000000000000000000000000000000000..05792b762878cd366098a4afaabebd86480c38d3\nGIT binary patch\nliteral 4162\nzcmV-I5WVk-P)<h;3K|Lk000e1NJLTq004jh004jp1^@s6!#-il0000PbVXQnQ*UN;\nzcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU><Vi$9RCwC#U0sM3$rbKVQCS!nvY3rK\nzE=*98C@ktjqA#Lxqald+`y!&7k!6h=SAEf#L?K`d2|h$43Hsu=S<n|n2lYV>W>yK&\nz^+9F9SpwofbRiL8aF&1rA?dGoj<h{>>ZhyfR`u;Z&|c@>zJ0sveCM}Lo$5#=)YH?m\nzCVg3*9!v3O(omIXC_M(!qkm{<=mK|A2g7(Uysu$;TY;fB1;Rk_gNXv>|2};=o*rGz\nzxU~&|mp|@GX?S?}3JZXg`H=dbG~?B_v?#?uPYQzmaR3;T{D%4MPxJGdpd)AV|JsaA\nzt?2vk2_}sF(btSe?I`1U$5^O$z8Q~N(%K1QaehPfq}2ex(q<fLOG{w_{@08{eQ827\nz1PuThsxeK9^~M%0T9nM3IWs#z&!0a}9z1xE9r%BYG<WXY?0)e|bnDiw<niOj*%2c}\nz<pW^wcJ11gtXQ!knKo@2dmcc5fjxKbT=xG^gnPujE?>Sp1FY(v`}+ElvuDpX01(mE\nzty?qZ%LXx)fz<`7hydI@d-g=55uyOV;lqcM4I4ICT>}Gp^ypEqKp@83-YZPl#*G_;\nzYOiPj0Leda;DEF1VNeeqJeWzEOI1%A$`t{yD_5=z?$1o@>gxJcNSlA^)F~~dK7IN$\nznLd5G@?4w)2?f*c-Mg2(c=5v88O1$9-RnyC-Me?Q-=8vNiWF41*K60V)mH<YIddi(\nzV9r*;wqLz^b)2V-@2p?H{uOVVlQP)bGTHzPg2Y4eRSd^Hf|2;0yhH=w0Ap`&FY7D7\nz6u8t@l>q<-=jP3u!q31o9a|0nU~pA78NR`hBS(zFIrt?qfRWDu=Bv~=m=Cavu7~Hu\nz^VSXku=^tEg8e>u@}zP6jq7pRgfz;wZQGR00+?_uPGa$WXeJXt5eP0{zWg$;k*9g{\nz<^}Twf@K0lHWf@VWj^@`P^FM0ZXf{;P6~;3@7|qBKF54WI~+Gt<`Zx@N!Rr++6Dmm\nz3|~=I+Yr?0;>C+un+oQ0AOPbzFQ1qP4Pq0&<Gw`qws7IXdI3PBsxh!GoFR&_IWUnb\nzCcmNhH>X`(<rk2>)ESSq*8n2*>XM+Q!8pz&K;q$p$jkzm?mA&3dQQ=Jv^4-kD)08~\nz+s=On8U+mG)Ha+wj`{FKWIlzBh7tiPlop6)I@p&NjKPNEW+KI4Jfe}RJ!_=_;4>Lw\nzl6%+9LD-NFZC80GuoW5xUc4%b2sK?>dlTTB;O(C{aYC5{vYqLx8r22>s?@IOc?|$8\nzsMW;~V5&*BO_echhcT%Q01)eQY8{@w$T1{yVOs6e0KkHLNF1b|D>gx#kAs^aLUIP0\nzzz5BlGpF$ZL{jG(P*DAxw@-0CB#+A&%B~U9vsMlOqBz)PIurxU&FWFfnCd;Bk%8!0\nzLluQYqXAq3fb--jAtaJ^Xa#Np$#rB9GWQ<^0DMk~!s+8Ye%a&@2op%$q?9YCP?Ycq\nzSrQga6yQQCs4~dJ<1Z3dvyc08;SY$OGvpe9NihKc5>|GiM3(8p@8NS){OD>Zk==)8\nzfrcqlwIquGo;-OH3;@Au0!0<U2+34+0aQ%{X$Mm=pm^n~jC`6fXq1tWk(cWgbyPWu\nzPm2CT$jabgi$gJJMF7ALAOL`=R07`J-JLNvWaW&=j*ISx=KB%pK=aUo*8DSx#-dgx\nz05mu_C{(c+Bw86<MWXvJf`e8Gi_BBV`hcJsK&0N=bv916045~06aZi_q+DlJk4xgp\nzuw+u)s{0FF9O4}Sw1yr`cWJ|+Iyp0;<4l^8$ay1h(Q~@WiL?a(Y}U{h2ME%OPzkTp\nzZ37`6S6%Fy`IH|32t)v<nnP+50iYl{p^hOk5Qpv);5-b(AYi?o&1x4~bH}M|TIC~>\nzMl1~R<y0Y$AX+>^)yFb(f+SKA49F+=EI!pCXPH1+b%R5f`J4yb+1V+z*<3~r!13u(\nzgJB|x1t2-+mHZEpCWxUp)EWRZ^9J>(W8-O6Ez~BYRWt!30}!N;n@zLH(CIpp-1<J*\nzf>P1*(6aJM0{{<(CElvg4G#<E5YsW~LJ}@=f+$)Ly$|yuqE@L=+^>jn)K5S}qI(YQ\nz{8<5jq+T^cMhzOU{F$4KA;+#r=)6@Vu89=1NGr2x+=?O06BM;mv27et=*}Re0YIfv\nzGO4Epm5_FwI(v~s6{82v&H_BXRli81$!Z7k#Enx7>faauKr$B(=WQfZy@`rL!v!vX\nzke7a2#}D9zt;RDvdi3a(1MlH8-4wLUA<X+i$bS?GLJ`aIun8v2hvaiApVsD=Sy@Aq\nzCPkvb0}!}E3f<oWbK$Q*O^X1G_wX6c(d}9$a|r3aMSzM${c8h2R%1s4VY`x+TQ@H&\nz^3Z80LF@lj&7O+39N$qTu(*Z~xM!$-k@Uyn{Tl%Q>X%D{LfyMqPsd$@%lP4Zm6?$>\nzXR_6JDlI@+P~GPYMan*bkitWU4hcV7w{D#??;HL6L>@E80G)<Ud-v|O%1EM*AA0@W\nzxN$@35SrZg&Ye4}wLF}2zI1EsY|Q|tEmS#lFvUde%glkwG1TpC#MJ~u3jnSP$5-g3\nzGeEKsOqF~oOR8(>j)yM5qX7Vy+O_TGWg|@p8Fi${<<zszwN&9K?m0I5ucZN6oy3rJ\nz-lUYWt`p~qbgo4WB&#I-#)+W(!}=mzo0F875-419$QHPj0Dy1eBrf*G4cz_d^b@WW\nz0DLlnO2Ii>97}1qNyOySXYvXFF45xB!#2IP?xqbcLsXq>ap2SmS)&GkNOd92>7#BR\nz$rDv=fvoyQ2fSs&Qx(aolwu~O3E(_iRmZI|q`M|SM+?Y2a#K=WixY_0rC$pG+_a~U\nz?isqKMP~ttt7H}T{8hL8+5nK%!GQ@b*Ug)>kk{E_&bCrW);WZTOBGi^`axQoM&Us^\nzIy!_-&a7Fpk|j%)WE(VLV<#IAx)@yme3(4Jq>N~?Wps2@YM(K|bm`Ki?EZ8%oGLOO\nzRZX%@r)WvKXmco?$*M|)fhgqU5;Qb*s=NMPMBLOV1`$#y8cdiBl`~3H)+XkF3RqPP\nzl+`F!LHe~d01+x#@W2ZeEExA0q<}nhtm1k2@S&0Ow`$d@aqsWnzdzF|kiw}`r;gJ=\nz_)Xl8PK6DobSWK+?-exyB>v*Xi<!oO*3j`ojvYHD1RSnmyIozYsMN|J)y7H`I$^+d\nzCP1J@iyDC1yyw*|x9L)d1`FJlcP5)&P3xSP{P7R7lJ9-DGyD6=7o*8fcRox8KmSjB\nzCZMRARqfX?IEWIc4vzy%vG|jyIC&zQ26nmgsIIwkF-@LlKB)W6$;qGlzLfzZN)wPL\nzsOHnBPqWTpp22X!wr}5_`3g|wdEnqPPW=~cFfG6=Y5}No+(#?40F{|>j-RgW|G~1Z\nz<o)-)Auy#Avg798TH`=ESsY5`)+XgwwA&^YfE2%n&$!<HRGQ8?d%m47Zofm>J&Wl2\nz)weT==V;jvKTCb7(RejLaq!_dVX>obvnGU(U_4%nbo}^n*1SOTh#XN!B*5Ww-kqzD\nzq|GRF!@hSne?3|GqpvA6&7|Zn*N3YCfV>R^10dPNkTOIwg0pAOemTH-uNparO`A52\nzQ^NordJmaIASMK7Rg_NvV0DXRzH<C#XKG$XbH4Lh^68x~GsiG`6Cg7UR3C3Uc|^;s\nz0WyS{=o}_W2m9&~!1V?wMk^}%@Pjv#9UsilI``8%Bgy98e^eI$MfC|F*mexjAvlBi\nzwf8Q11abL(lO4&ryC)~tue@#aEC>sInt~vWA^`&Q1awih9g<9UCI9WAo@DLn*NuJy\nzCSci$&*I7h*b+qmRVGNi3G)%}n=+qr18^GK3IJphM8JUk#_S^!DzP+C5D_;+%G>@K\nzrGINj>NogG4h3rzDQcQb?Ny8EV_JHJgWASYui#Ls-^8at(kGwsGfqCG%zt<D8_BUh\nzebF9100=4KVq{>t#Vdu3<g{@qVK{*%V3D0K>j-9=^m#t=-{ky-XURzVO0;&(>uiF^\nzM{+2b1`vgXWr{cQy@sG2IL8vEMK?>xW&32sF|wo&$Izeua%h}~|Ix?)O78r9J{v;r\nzOTSZjAHdhH8LDmIbR!fFMBHW)GSv<HEsOI-T7jDlgcFGbQRM;PbJq+mC96}zC_4vE\nzsp*n9*ln5f_B^Nh^EAS|5BkN=X0|5)T<w}coykNb+X2jUr!k$R&khUEUlvZ<IFwNU\nz0JhqP3CM?&vMydC69f|>+iA>{K9s0_TS7vq?KFUEQtbeiXEp~4kZPwfVThaB=`u+l\nzljIPhg-R!aTtomm$r{z(z_PuCx$mpUwVf9K##>I3L(u@hM+voTo*r6=dING!Uzvsu\nzu5Gj`In*{`pf8f`4a}LM{NBPL?X!xuAji->xji(1Z}Xy?z%e;@T%0b+;&D<eqE1cK\nzj_=z#o3#J{MFuLy(rTcxDj9a!gx-0lOBg<yBztU=L&0_qjcr>vVt!d)M3wXrnu}le\nzBy+y~+AE2lEhVOY;dGX*9Et`2_}gbiFFbuN%V*1cNbQ!AbM`Lg`pNMWrIssW0(@!&\nzgnGW1Pf4FvF6M9<dPcK*xUarLU_2M<xnRC+(g!79kX#%#OTx1ID3Kfr0sv9oA2otb\nz<K(dwJY15;1@mo_KIi+NW%Yir-#FH67)<u<A8M&43IYI8-rr@lF!Bs2IN|aQhzMLT\nz-!|#<(Z~ND4~h%V*jYlQFOt;{zEMp8kgc{Q)bFb{ws6(F!8Yl`sr=6^OaYux6D<(T\nz2^3A#=rnv#NxiIr6m4wbf=rV>t)eU+vG1+;0U#<1&ri~rL=X55q@Dwh%Z)9{CVfPN\nzVo}kxZRZl;l<KC4gB68>?%%&JEx?e~2+)Sqsujt&hU<PkCd<2I1Y7@`-~IDtq32g6\nzWHX$Ued#VM3km?(d|7h`00EkUretYTX4<4#I=EvEC0sXYhGbnhJ2!aTuR{QUDmfGs\nz03g{mbT&?=X#uB+<L9&3!zIDVL}(eM4?yHnJ%i!69zr}{Y2_FlKUs1}rKy4gfadFM\nz7)FJlsQr&=OSURd6mtQz#@^IkQ(Km@8&;NcuD+}cb7B8gNu}UEfGDhkXOG@N`F1n3\nz#vcdP5OST&TR{i`eXiJb#eDP@s2l(qs-X#Jr~yDj4FDPn1%RPu7-~yH0Kh;q4z;BL\nz0HD7ahuTtq2mVb%!AE#$#-m>9Kc#Py6WH5~N9`!%c{WopJUl$ql~VfOMa{U>f{vup\nzf8r$o#z1f-#Q@B}{APUGnogz6-%fwLGFO;_puf=sZ7=!T^KXosEFRMYpQQg?njT%v\nzn6-z)mmX_L?dPdO_N_EJSd+f29s@%YB~*{;0|@m}#$Vu0`o91J0O>$DjDqRRa{vGU\nM07*qoM6N<$f@qJob^rhX\n\nliteral 0\nHcmV?d00001\n\ndiff --git a\/shells\/browser\/shared\/icons\/128-production.png b\/shells\/browser\/shared\/icons\/128-production.png\nnew file mode 100644\nindex 0000000000000000000000000000000000000000..b9327946441f529cd5510f8ee14b788f0aaea1df\nGIT binary patch\nliteral 4577\nzcmV<75gzV|P)<h;3K|Lk000e1NJLTq004jh004jp1^@s6!#-il0000PbVXQnQ*UN;\nzcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU@gGod|RCwC#oo$RBRTal)x6ld|x)KV)\nzqHIwFsX;VtLd1k(G!aZJCg2BXqEJbIsPuzEG=MLV7<`GK#$qB=5~_(Mk>vv~k<jv?\nz@S#L41_Ud1MOx&gy5$`!;QVIyEYo?;xpQac&NI(GGbh>Zc3+<7&OQJ0de1p`By!Ni\nz#KhV0r`7StD*hXFG@ocH{@4<KOioQr-ERHTh{1RmzM*6KP=Vos7zkUkKNwY*|Ks@6\nz=8pM8MeuU-EN}Ot1sUce^%r;hHMDf<*x1;_^z`&(4*+J-(J_Dc>691*V=)Nsnezc=\nzZT{wNZ(2oX;1h@su%X+J)=|Rqk=ao1cin!pl0G*&8|Qb_PFf8BR(1Q(T3R*Q#ry5f\nz4~%wu&~EAg&~iFpkQcXj;)H0y!G|PYzwye8(aTehNAqF5d_G|Dq49bji~jfWi_r^@\nzKGXrgmzJLX+31K>tD{3tTA}_N5WMn_$D@C5yD$D|Hg|Qv;zOc$tvDk(Y~?4C_40p<\nzp1c2!=-Dlk0|y530B;S#LfF9fUwTcnXz9`3e}i<fu}|N5YxMeayZg3Q*7%-tFG;{!\nzl%BqGV>ETk_d5V&r5@&2A%O7DP3vm~LKVhmwb-NIU7G;7^#BOL{H%mMb=&%&n~Q2c\nz=A28Sqs}@%*lPmVzy18G#sRQkY;5e?O}#l1b;8%Kk46_R3ig_Z9Dj0j<R{OKUfaDh\nzdUf|y<<~oG<r&dQSKkyZS-!&S_p$M4App2=>~N>U$nW9Lv{nNk`Ib6mBeCsiM-NFn\nz_}CK?rwhj9`3wB*6YH-kr44wm_g!*L@;)wtiM-Eq_fPgjDZIu}XRV3eedhV9gUGu6\nz_?0soH3f|U0Oo!4XLqSTLp7ozt40j6$&deVT_Nuq=|nTR0Hy)d1tzozubU+tLd;g{\nzOaRUl>bflRA=D?o%V%ColQPT;AQ>4M@d5#$`rtR$n;{(%57VY@`GL2Id2`=?qdgDa\nzotUPqxjQg66VKecseJ%A?xHJuHW_Jp@;5gWek~Y*6v1Rm8}R+b6DLM{w{J}tVwog>\nz>2ff4{N#%0r5%4Ryhh%0-}Li|`AQRh0w5;Q)dV$?3Pu%b>a}WoOc?m^6`waVhT_m=\nz-y0w<|JF^WKY|%~<U4DV^;NOgFj@;!^ZbmV0|1Vk78{3%;U&hl%n0B+`MTfE*<-QK\nzmgc~0;HZVl;Nds)uIa>f0pJ}+j4RSH8SM3uQhW(3&Q3Gka?V8MBl#h{bPY&FvY(-;\nzk+T3z+Uhvy5tWNapY=CH?ORmD87-=zeD-6gHGt*O*Fi{Jk+iF5k2;v|(gLmb0qRVK\nzAa&UBJT1c-T>eAdj&W-MkX6V1$b?Bk$VGVh{ir$6-b3mhT4@6Mkq-xS_yR7P_`>CV\nzk;JBA{(<%Z>L!=BpN$ThQpc?YK;2$289ra8${~=ex~D2N8TJhX0Qy<I<0{~I>b4tI\nz{{yg~3F-oY27rF<NoxQA<BvJ#V$<Oxb!>%*fB>Ih7=>aWeSpw**Tuk@I>L=}9yv7w\nz7Jx!l0d*$8f%cGLka+x>3Wwp@6fvie)<F~?3Vm3U1wd2MKTrTzvV3K**T;#o>?|r@\nzBQ%1Q0J2^$l%{JP0BD$~OD&?ZHHno(kSpngX3&x}J~@Q>=m0hb0F4P+dN`!r_s#Ov\nz?G$Q9zfA(5k<&o!Fr=yz=#o;YHE>n?r0G8oZB|1^w95;RZmZOhq~$#JKC-P{01&2R\nzna<|;oRrBXir>KhQLUC4;eA|3zeNa;$r=F_AFn;TYp%pQ?_5LEbgk0>5Sx_+01Qn7\nzKuX6@n|Vy`C*@Tk^K3I(XIJuBo@u6OwD%yal>opI%&J)$EoFm|lseO~wQXp;X4ant\nziKW?^t_^4m0G1yxtOqfc)@b@<u<wl_glN)E-A{Ecs@XSG>-XAlJez2F?+XBs>ZPZz\nzPE>wB)H)#_Nu5xICajrCVht3$2T~jgFam~t%@U{;05iGtHI>vl4w4LoNKf3b`U;Vt\nzyvm=lDqM>sSP#7jtWz`x&McqtW2!zoW#l2jTsr{r8X|p2rfFDVm5Uj5Hd~Si(hi3J\nzB<15S4Or!PndkY}T^kcHgnqWskc=nM@{yn3l^ntPKCJdYBIVY@TJr=#&jrw4Uklj)\nzWZr?1wjaKdJu{!+;$&~x<B(=FNN-@$Q2CAZ(by@c<@WmXz<VCNC)vy$H(ZhQ#$}sC\nz`JUA=%LZth4PgHM%WG@3m-P1mfWtrb>7JkQ3@}vdI~-rVw&xjn9kj;o$(xh4zwydT\nz$#c7y%iaPunoQ|43{gv22>{r+6Tg0aqVn??FO8p1tiL+>S~_d@?R`Ev@>A#bARb3(\nz-}IiI?;row>(uwc?q`3$4r1LTrVbik*0Z*^V&-d(o7M;mSf;mcodW}31A3Us>$rRe\nzo}Wlc5@%IH$<ZoOk7t~h6{GCx4_`hrVUQN$SUrJ64Vn$sB!rFY=Lk8gNfb4mjRven\nzSgRF|J>pby+l3!DOV-k+2Od<ZS16?cq>b8=dKSI=jtxmG_4J>%<|1^_((xV@dC<|z\nz67`tg$m70rrTSif{n0wJ<=fI+!Wj7|l8)th7R;(+?OFCbaQEE*k3DZ)k2LdMPyYIb\nzTyukTKYQ<{L?aMUX#36gFiF1i4=QB>ea5DM+M?bn(vbD8c`vk#6lu7Qd3_xzOck$b\nz#q3BQYxmhm>It>iVsFxiT9V$*zE6<|fcIiutlz3}6zx-V@KhlUz~l@ZJ&hz3;^B%&\nzW8w$Iwwoy)y$zg)CIDbVwWD0r{!S0akH7!WwYMf~cR5+ub=E=mGS8Fu9F{}K-?MH2\nza`<VzKWEKF{T0y&_(t!HwWT(I3Qfa%7Xg?z08smu<RkSUuWDX93oa1NMlSo}<*L*Y\nzMdYb&n1G{NWD*%0IribxlCdr>5a19>(kHua)&-cdKLfPvS6Ko$tP22Wj$+a2V_r@m\nzjJIm*VLU3TDp~b-Bz!bmi!|h^YSvwL2B9Qxd>le6T-DYcVh%!H2Q%i<H#MEB0i<0@\nzlc11o)NdxCj~-rWgt>8P9M`&i2`S5Su8>I7ZdMwtb>kQpHIc5+T6=GvIqQs;)&Mvj\nzR_GPFjanO@Vrh#!)o-o4DEXwceKlYmIen{;)n|^P7XUQXFQd{zlT6w4@xaThy9~)h\nz@H}VGXVxF*8+GL+EFq`_04s^%E2(8DkGVe5ANoAsr)MGW93ovBR)^qdTEOQd(g^^o\nzRJ+ci1;QNHM*2v9=wc3^*OL>ws^+Z<2(<9G5&*PmUZV2qBDn*gtn@cYE+*GKcBX6y\nzK9B<<ET?ObnkqGN`3g-=0xJyw>fJ5hpe};RmIJ3%+YS=B8c%#2ve4l3@j09Tu(C<n\nzdAA`cZ=-y=dqO)~zC)&68p<~;D=RdbQ2LyZIssrE)mAC@sv5qb0enKdkd7+Vx>cmV\nzZY^NXL71!t0L!tFQ^7iz?*lBK%?{;tTOn2v=`Z?x#Wd#mW`$H`4KTBj8_fyVA@BNu\nzI6SH9C!{x^sumz3$xC=iEu^n=o0n87Dlo2N@?cSbb;ca>!Y7!jIe1ov&8iMc6Qf_M\nzR0{dDl%v-5WSK5Fz99EuzFi!9qxW-r9S8Fu)@2MhA7si%;8Z!}IQlbd)YpIPdzVI|\nz2QKQV7~;Ugs=*VIn>zU0qW2L}V44@ZTQ!PrS1G-29&wkA+j-C9F1pIpI=ps~G`)8o\nzfDD|qAux`T<tnvlno5_$6D!TC)!=E&<m51~zAkM#eCGvQT8NCGE1^}^8DxK{0kq5?\nzQeX6prcgzYb^It2Np%d`K>Fr=iPsxneW9Yt)+a?5NV0DYo{O>6*S)%HXHtTV1j;)3\nz5Xsp!d9zowj;lsdj(qvh_RCfFZV4Fbo;|Y69_#;0tSyUb;ZmJJKDM6?M{D@R&|1e0\nzOre@MP24i3NjwtX?>1|zP$gR<VRbRNuC_`4tyNf(wfSX>a!RFwc|hrhb1j|+ciqL4\nzR&73UyrtekM<YH0U|o8VRr}Tvw^sHpHeO2ZEs&*!1n^g>$SU0!f|}%EH3u#0^pH8k\nz?j1b7ELn6~#ailLE1a}y@YuAnWzl7vFuI_$N+YXAQ7e1TngN7h{Oq;Sve>LpNb0(E\nzRH6(_P1V~`gEWWA1TEh@J)1NWr{9;9fn`gbHT9ncly%`Ge^d8qq17Pj>PnW2sx;Nj\nz^N<_xO%SnfA@4N^+8yj`vwV_IE^n6i(CXv!x^zQ4UtWv2MV9|kBqQnTQ}x9JSdxud\nzV3BygWgi%`LUHIp;}gl(*^T9piijgCHM}3*eVL0LeTWHRnrf!!aeDg$`<V%9_euI-\nz`i?#CveJ7Y(Fxk34((R!fCwI1x^b%Jz$IKm^+^&%(*i!yScWXElUC(26e7g4%8Z1%\nzO<Lb(1j%fmBKEE<0TMEkY4RP$2otlFP%}4{*L%BXzemIL9RL~_LRIe0XOiq)Q{&<q\nzDG76pXCG#=QqfJ$3T$jnpp{7B1P_%<ykB+5Qq#<qiJ{CFmar`w!Z!VUjR8QLnk_{P\nz*^F9xWUM$@gHjuqK2P8SU&D14BGbgO!qAi!7$^;Zq*!*64=p_`ufwKVDPg41*YOnQ\nzSpXB8UG%^!4f3q-1HfAc04**qlif;h989(<WPA=^(jlJ)0J(IcN@%9dNN(Nr@frX^\nzOwA^PsA-8JcLBn9E8fRHsk%lDgiZE4Gy(ukx<XwaYcUBmn^(vRBdkj&EO1rPSm``N\nz>oh<J^>5jG>rjULgJmM}ZW;?2wq^m^<XHSh0HAf-h8&x&T@5G1NuHK~LOW<7na{1`\nzRRLgW#a3y6(D&w~FNe%h_AX)9-GEh{zB;wtyahnWOCnw5O0mi<;jY_3(IRz(XRW_J\nzzMt7IB-pwO5D-|o12jn8E!}x$u~jCZu0#kn+`0?Ua=v6-Yh7e@UAGzlb&?ANntiq|\nzldjVV>;TY*Ff$JXKED%!2I)4mp}jtSkg3Vk??3=RbIR(D42ZMyu5FR&piO{LyHI;*\nz0icCJb>_nf^{D3cQN8^DftLEM+w2S!05mVSF11LEZ-shjA}cxo1a+0HY2a$gF>C|?\nz{YZtvL>O=7{>9;Qg@|%7Mo6-TShflP*0r&r%z&tIR~xl3UcR;%z|pX;`S2lYoJ;GX\nz0L>8$A#JF9mklSomz8?f;wl&kG5_H0^{w&Ri+)ki&Y(ibTez@idIn6>ZVU5Oty~Pj\nz4P@4ccp5l3AJBT}`Q9`4Zpxj1fUok>j)zO-^Q|lI%G@9_?*YIAYtleVRo+b<SzG<y\nz^VUTlxa>O9gvii_XMVpa_w`5v&(s92RDndx8tbMTnIab7by@?Rd@hh0N&p~1TB|p`\nzcU;%<>h7IR#|SCqMlRZ^mn>i5G&QLFBK?9ecJKDB=G{DE7HDfnV`N+2vjC;-+cnKA\nzR5er?YNRtL%|xwjI_(_MLM}E^O2d7pZdRF`kyhJQjbK)i<&x{PS#q_)x!T}c0RYJA\nzx33yygzTX&I{(0zniy>}Z~%bvMxhkRFSw?eRVC~=8X-iu8uGrSc@F@e3n`mqd`KY3\nz^wB|J{=fhr9m5}Uj{o)Oc<lHHO>HJxiy;ucE$^%opbk<!z(4^YEnyNNNH3rahLC1U\nzY-dvkC>9uIvYGqm5oX%j9`n8ss{=qseWlTE3pxOF)B&KQHUnU)+lJQC6ad)L?L%v6\nz3jmnx_Mx>jIl{kjD7ceP-F~!7{l~OSoWKjZ{b(H}JYT>+)6>&aV=={Fp4#n8E9m-I\nz`hPJ8fLRdS6Jr1~a7wp7LruSmnLk&2xgh<M7zC4@CK!6j->>p^MEkASDO?qQ+R!<M\nz!{hK_^JC`sg#06}zlwoycKnIUZB}()n3qh4;gd1rZ?}Hw{{jpEPJO6BgYGht00000\nLNkvXXu0mjfqT|45\n\nliteral 0\nHcmV?d00001\n\ndiff --git a\/shells\/browser\/shared\/icons\/128-unminified.png b\/shells\/browser\/shared\/icons\/128-unminified.png\nnew file mode 100644\nindex 0000000000000000000000000000000000000000..b6ecc88e13ac082da3b82b48179b8a665fef6214\nGIT binary patch\nliteral 5201\nzcmV-X6t3%uP)<h;3K|Lk000e1NJLTq004jh004jp1^@s6!#-il0000PbVXQnQ*UN;\nzcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU_^GQTORCwC#T}y0K*BL$@8$ZVe;}`>h\nz1c)G66iZFI2%Cf|uyGccNNKA^ilAwUl!p|us8b25szhq&qC{#)71|Wqh^iG;!Hc?!\nzQiZUAO;X8GrGzwugrqh@jE(KV#?PMbjE|W)^Pl@V=gz&JJ3kr?wrB3+od5Ct&s)VD\nz=;N-3yZPHL{@Tu88(4*w5?$f1bNtnNf8WJ3x(`)pHXa*(yt3(K#SD8nBb-zJkRmq!\nz2!DIGviW62*voep_ExU}_y-{Mdn)Ty)^vhvg1to=V1YX-n_vF4Ctnj(<=OmqD{GS|\nz`Zh3u)BwjT>ybDTdtSBR>Yc8vM<Qu=YQfL1P%>#37+`y49TH31Qx$(d+3|r?Wet)|\nz6$VH+)x`PY>Nag=)lJRf|FhXKcKh-tY$;qX-c#vje!Z92-1s=V_2CB<2JlKPJ054t\nzcXY9atq+oa2NPgn$1k2|;}_0Ht3I33EWPbfmVWpV*4X)=_*qAzXaCM$eX(N(!~y2x\nza3PI+!#nmLV9Pqzc>c~@cAVYh3p>*L7dCxupk&vIYi#@eGlE(D(lEc)>&ITNFn}uc\nztNG@e5F~8qPj83H2qqh^YO$-YJSP}9@eE*N^Hm8OI{7=Riwo7>_S6qq>#pxwJ0=)*\nz@W`u?GeGr=o7ep;s*^*a?ml>!Rn^v7J7&WJ-(V}co?ug7elA|7l-~9TTmRad!bEwY\nz32x(OG6RAEYg*eJ0OJ-mof(WA*hZ=WAo)6ViiLzU=L0=RVm)8DCcY^EUT$~+-yJ-1\nzD3CV5xmNE#C>X$rU~&LRA<^n);ux*n-xHdH0*JV-%X@c6Y6>D_0BqjI-~WyL8&o3}\nz)YM~;i~PSsJ-*O4+_<#|4m&a!#h^~i1TBK&ssuoY<0Os&+V{Og+ElNbud3<xAHC$b\nzVE~B02Bw$<5|3l~y+$y>rsJoJGy$~6=Py2;JPgqB{Eu06y17VYe|_Rj-^YTjhbzdc\nzs<gHmzlYt;zJHO;Pfux062P7lz#KSykWGI4AK%xAbIuIkC^9L)38Vk&i_8o}5(<VY\nzq@?xwZ_WH;NI0ZP2dpHZQ_r1K(MPp-1e^2aE6)pcZL(3&8kCy~JQG<kD;fsaLi)xw\nze0b?&>r^zD@7`bkanT-2`>eweu=N0Hwjy{VguSP*L0K~ZCH;PFsuMv<fhBZ)w%l}>\nz1syn(D*q~%e4FZ-VkAG&PumnpE}(JiH%ZC0O<<}Su2t3^JX{36@bfyZ_H`5ljC$2j\nzMX?KyF^00y02EDLz7)!FA#r}fu2Or1vHAICB`y>j3=k#?hSb51yJ;C*gA;xT8yF{s\nz0aSHd3KvKOgkJ4&{7i<U{8EHwCy8^&x`#xXfZHLdf0gMF-E*Q<`(7%EB*q~N7&{CQ\nzHaVev)jNpNElVT=gpGm`;q$twG702V-DB(quUegK1}J6q4nn)S2p?kllsX2pKof+;\nz1eD)Dof$|D1I(1@X0h?8;Gqa%U4)KxE+Uu!n4lbmB9<7yw%v8wK)87_1q;-VngJaH\nz*{lMRRI_SLT$VjPCcvf}BoRNQ!gCv57$Qa%Qdg*nw6$ANh^YyPO8TQ?fXrYq5bU%E\nz1OehmJIfauDxV@~1YH0~cRX8~ZYGm32B7?YTgVtHo03==2y*hlp&6(^ke3*O5dch@\nz20*t=v1DwqB3<noyYDs1=L8DdEr3GmJ}He@DvBf<NTozgL7<bAV&jn&bgK3##02k=\nzt|PPy5;-OvNmM3uqW^<rF@W3@b<>fb_fmKv%f2LTz@h?K>+Cen<COaKLtrwQ&4cQO\nz^x_>1hK#0Ln3vW714(3nOGONT4b5i&SvrPAbKB%nl8jt7Y-J?Yz`ac_XdN)RyeH8#\nzN+iOf!~l_M0F`8I95x%99%eW;G*HE_84RL^w{<lDxB8>44Ty{ZbU2_~6EV7c$6R(S\nz((5XDUqE`Hs|O2GN_8$(vnQ!2v8lne0eD8y@?H`KfK=zYcpfi_T1Qk5ZR57`?zm=D\nz5>rfpbIgv9Sz{Q<45gYS5Gn)6Sh|T?pI!h`w?F%&VB&_ZuMiUCR{0ameS47fB(P!V\nzMZk4}36^o~0Wgce7I2K|y`zlWCNqc50B#MDUPw;U(79Dkn-ONSrLLWALKL1p@2CMy\nz(#yCXgsO+n{Mq`wrEG3I0xjr&LkiaG%~Cfso6SkN?q)kQy?eIj0#L`NTsGhtw}cV3\nz9-|&5TdXZ#Q?a&ujcuAyD+~Zt>~-UD!?<y%=}V7q6Y5Rp4pM{#pzN*e)(so1>Dt%O\nzoT|Hb%2a`okbC&=cXo=lvtbWoZt@wybV`XNqvlXK-~npUZODUY{QSe4;--Oi<?x2t\nz;UTu7Yj@#ArJKcPW`}PSEx_8IL*%)@Q0nKyAY3<Wd+qvri>`TodYbh2sYX~dgx-4p\nzVvZRy1LFU%_rN;yQ&Wz)5!^pC4hB<AeE4r8t(P*9dLU!B-h7l@efEPV#0F6=j;<$=\nz;&2prP*MizDdnUMXaQ=`A)Tsr(lx^BQqQ@e7CFtJD_P4oJ=g=2dWAq5K(<lqq#hT2\nz<FD_CR%&pz8;4?nFxsVH;nr_pH%`4%u#g=u^pNMm00>>ncUY#Ns<w`7MTZwKcK+-g\nz)3E2cB54N0e|_RNj_1JrK%0#8ofet}lToPk#_yUR*(qA%gLEAEiUfKYn*y%&i&h~G\nzD!RtGparC)ta3>6dOg>*=~>o0bc^+8r`YAm>4Lv)s$a%Bn`+svwno;mtlASGY<aA!\nzNV<h;&P!@xj$o0LUp()N*>EnbDZDFPjib;$-1YQ3c*>UvfW6mkKDZC6J_r)mnE{M{\nzk!~MlYVbX;ZCu9&$JpLW*V&n&Y|-X}@H_kspTTFnngSZAKC@`Xbm%{b)^VGE5M<(-\nzX9mE5b@m=o4?ox>t3~zA%W$z=P%7f*M%meU_QIz_VspI`K8x?*yKcaiQoFcrIlqWv\nzS`)nDHva(U_2VIUVgN|J?x0XPUS{vO(M`<_t^37MlJT(cZlO|aV9%8sq{O=szJu?&\nzF+oPdgiy)Ub=zn>b?ab;x%3*Eb_Id5U5WxAHruEHdUWm;MPL5JeQ?8x%s9I+HW~Pu\nzhG*v3G~fS+(skO;!1a_h3vzQt{&AY!#H;U&kXX2N^1c9!Z2?wbiTrct149*z1_pru\nz9y-^{b{jR!fESlWH)}@)e16ovlR0n$hA@H9kknklTMGdy;26v|v>mC05K=h@tRtAi\nzHMr#J??2W>MzO*ec#OsJf+MitZUnS%i`<SSqk2wN$GEq!hD7U*yTU_Liz5T*f*2zq\nzhFsk?*NgOn;Of~TFUL}~AvDm3+0w)&z+4ottoM+KbYXxkTH6yAAs6nXCcQ|%1aY>=\nz@3GE~ObB-pAQJCxK++ZyP~M0U1L%-sm_>~882~2IA2q#|7e^3S<VH61a|Xp0u^bRl\nzt;wpzp(5Cgp!Tz~b8M+l$_?D;ut8XaP1eO6pwb#69I57oKAoH?`kj~1vMEt1bT7Gq\nzlylVSk|r?pXlOU$hFo<~L6s2Ow?%%AMFGF9O|_wJel8YJER>TTB91N$K*#7!%DvoZ\nzxl0&RhFRUH)8eA5$2!B^!Y4n<utQ&r2*8&Q^7?O06-j^C8UV#8UObaP7=Uv5WLD5N\nzwRo%=)@8)<3Bem%q#i4`>2o5=_^YpOvOS+%XD6?ZllDJs>DP5bPiS02-wdEDRl-Sa\nzKI<nZ{awa5Az$*k+nS883CGBnV4!-{EySju%#5?2UmXcm6Hx-=)D3OT3%I7qG249L\nzlPC%y0G_VSPgfn3PfxX{jj#Z|yKi-2E&>~^BMSZ7#3EkT9<dUy8AneHfFOe|0D}v`\nztbJ2Vpq=D}VhD{HLY~5jnyRbV;SDPTZ34c7@2UU~>fb9hRj2rI>~`Pf%<lp1=8MPY\nz`N+<CjsxJJI#2=0MWw1qZ5owxkY&@lA`_|xk79y1?rZa94)9rg2j9IT-Sec1ccS|&\nzZ$8!+HGn!{fz)Sw<{Ny~1nSa{AX%G+O4XTbgT8v+;liwZ@@Z0)p$Zr2Q?E66Izmc!\nzM{5JC;{T@RbE#fc;vZe!z<SoN;P3T{YR}abWVrqJL%<8$TIyMAjaj@6_r3b%17eMI\nz>2V0lS3lkFJJlShGsuhW2MQfJ`L?J2Hmc(Wz!N2A`Glv8Q4){3`mp-wu!(T@g60+g\nz0$)>1i66lL)^UsJdwn35kqJ<_P4>e%`Ri!ka(WhzQxuCzIO%HeIxKr5k}izh7Nub(\nziKTv@xIq;Hr<sEIJDA_3A}erX2r6N~2vE&xNw<pbVY>j>YS-N>OhbMHhfe)xj{dT!\nz(F5iHCPvi)LM;X?i`H%Y(ScER>gz0<o;T0rU7nm_J6ANa+EkTm6fw<#qx_tB(imSa\nzQT9!EN2o3`eLAX@=1{MyDxY)3uq7_#z!Pd<hf@Ff45fSEB);R8EkqPA&B2`-okI*C\nzl8(&}BboEms<d!Ri(SWgku5wsJR!^tJcpO>Ue2~P*O8_V>t^%023EU+0ag&JH=X|N\nz_K0;frQ|aW7UkyIKJo6v09at;=c6EO?1|0oi=G9p1u+H6Jb*cmZ)sordHq5sv{y_O\nz83Wj21UXnq9kP_~3(J8GehO0|-G{yyW>L|O6%E2G=pD*BRvCd=PCc-yK<kB72NCLk\nz2wXU_dp0J6h*4~r0g>U7F@d@9F<%|Qh}Szs@^qV#3ntYFb^X@hXkbw1Ck~-TAj6`P\nz%?OgSfsjhJkx8VUxr+^g9fwb!AH*?X0Ch8P4kUlVzzJ{}p(XGt6_spC7)qu^cQ9Ak\nzk{L{T+*LOb>K&OmxiQ<C>qRDRTT7i$I#y*Q{QN9u2%O8NX#k_y4jadc0aRwdd^{5d\nzP{*snuI5W6Qnh#;8@$u_IUYc2MS(|q@rJ<+m{cCav~;&Mier_cVklM&Ab?^g-Rz0R\nz3OO0nbjZ>jKYTiHFbA6q?UL`73Ac{Bbp6@j11a$RZi_VwOO64ke1fcRSG#`mN5<A|\nz+{~)e>7uc+kfi>Q>hO;ZjIz$gy9&&~)&+YV6c7TB?Bw64uu3vC05vsR<Ks%Ea2leB\nz&48-MhFln(6n?fXlBL~hAP2#npn)TNhdO4dDYCL~D#mRZ-2#XLVn-0=jr;E6|8KEY\nzkbwxI%2c_kqei1+mZE7SmJFcA^KDPf1~XuDkk>!;K*vIOwLb9iWZ4&G%Y%YASyz}i\nz252OweT4V;SlC&Zh=cd65X=As9)w_CsIu>UYgz(d+lA5F$<zQUO_pfN7ns4s?!HBg\nzkAa5}wD>cT8i0C2SScT<-0g7?l+LB3kpF&eVuHJ=GZhU`>gVQ|sBLHg6}*|0p+gJU\nz^jc!i0C9K{h>6-3fbcpE2!r4YfJ>yQ@j{4M?KUbq2B?q8Q$gS+26y4IMN(^uFK|3;\nzKA7OikFJSwv}1&}DN7SjiiaamuA+%+c!Wp@0bkgPJ;>RGhprBnKLbQTP~#>j9HD2*\nzEqvB;F26s-Q8S5T0I1qmuH5il8$c1278Yq}kD3LT0j3C_*WrhtaSJb06PHav!lx7y\nzzty?{8_WbvqT2p_YnnZ2m(IpoVK!t)85#vG=Hi{d;9VTNr?tEo06`zMUeM;_<8=f;\nzWn*?=F(ACfx>q(8WcILeNEW$i85FFj+C#LIx0kUSNCkarLY)8OHZK^U4auXR;0@XY\nzwSq-}aAlKYzzM3ol;vNsVE`)W6Xx8Ze{$DKR}g{?kVT&+;O(q9$4s$XxJvI9Mx6?d\nzi~(i{1_*QbQ+95Sls;q#@sg_B4|t<Z%qYoVRKN+^CJq%rkuZSnv9Y$sz^TXDAu4ZD\nz1&a@<r_?VPB50mK*9WKuoFwzbfs7s+WkM(quW4;lfMD8q3MsmbSHFC4@sTUyTztXN\nz@{M<tVZE@nMccBCzP!$+I`-b^WT3u4st*w7%8i!EnTQwp`JE<^CxQV|wY9A2p@$X8\nz-9kPs%nQjUm@V(xEoK$q89SI8AOR;fAF9|3(8Gp(D;<mpvUBqbOjM}$!Bl<26JqnD\nz27a*!1nDFl)5rWIi||>@7eE7LzH2ESF?Zl_V6y^Hh-#uB<^ZlAl_x-NV4OBTQU;J6\nz!j%2S11j7=AwGv86&Ov^su?aRKNFO&`9agP#|Fj-;914uMkRlIyt+YX^3;)NA-`~b\nzF+y0gFcA}7MP4M^WO4=w(Kw8T3CcXLZCn{?(}x#|G!%@DMRTW4f*UkX3v(k|J@g10\nztAwyD%mbJM+Tq&Nte73tluEHp4K?CDhc#;0QlQAM5_14hAJAYS4gj+Pskikg8!8Kj\nz*gaHvN6c*bl4StUSBH9BA4plsjR#Q^K_S_3wBt*j0mS29U+od5z|Z5+MaMDsCTu^v\nzO4@&w!k+t^SO$;;Jb)LvhS54E`vJiax5Z$HF_B3W&kXGUAk<1?O8uLJi7O1?gCNmi\nzNVOlz6#4O~B?Ii1L>wUQ1T<eL{dHw|pA`ns5Yo6ZoQwBo4JwG^OpykHDijY5aHX;g\nziKQ!GfOC~~NGzQL1N2tbA+gje!de^$e8%54RMsO|>i_<}iyNgEu(z@viKD%XZXo9b\nz;DFaFYmyjxePPd8L1u%Sg5&&cPi1||nojV|-<$6SF4DpuDw?3YCBMMjletZ<3AXdM\nz;}u|7K7bE4U#fjq2FPQCZvM85zqVJHVM%T}HoTW_{2ASc{x84)?5Ek@&+CHc00000\nLNkvXXu0mjfgeJQI\n\nliteral 0\nHcmV?d00001\n\ndiff --git a\/shells\/browser\/shared\/icons\/16-deadcode.png b\/shells\/browser\/shared\/icons\/16-deadcode.png\nnew file mode 100644\nindex 0000000000000000000000000000000000000000..33d99798e07b27bd48862e9d5779206bc96f9e4b\nGIT binary patch\nliteral 638\nzcmV-^0)hRBP)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV0000PbVXQnQ*UN;\nzcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU!AW1|)RCwB)Q%y`0Q4s#R+q(U?D79E2\nzCN*$_5Ki{u1y1E4oHXI&MHBG=c#!}Ry(kxBBL2jLNJxN?kPu_!ga^D}NPq^zK?&>0\nz5Ee=iwzklA@y)=lrIw46Om=qOn|a^&y?M58v8zh}>hXUTmx_zswGHq$HAC`vt(+rt\nz5oOnJ@LG}8OU1>(+Z|9M)wuj(gd0&I#gf;DaNhv06`H;9$5q#W<ogNi&V0m<_*Oo7\nz$$9lwD~y!Ru@b4lzPf7FNX3}sW9Tk{hKk7Db$_87slCz&OwIuTnVfj1zb<kv+&h5m\nz#yZEk*!O#R(L%%sh%56Hi&U7?*0K5aIc7WVuqVcb7`7~QAT#x01XOTA2xsyn3Iu;)\nzVifn*ws_Ov&>MK8*HAt+4rwLM`cM<n%F@8>Udq%=7LO-CU}b*ZqMO%`w2<$H1O2(=\nzHYz%M8Gazvii01k@Fg^yOKPa~D40&Bxk>1Z3@w{S^nMQ#!>^GQRBd7s56!M+EjQtB\nzj6whM8Ql*bVQz09sl0)AH9<iq!Ex86vuFyq{=G(1)!k3iEFf)cIq&A&%uX6@!J}JR\nzP92Cwho{eham<Ynsp%X-4jH4Gj;LSZIO23bH;mGgsL#!!>gg-kg%(aRvV9NQnZ~o9\nzzZk{fm2!Aw+ld1$4NRk1mpwjY)bC77&E&8_!ugbvH$({Hg)g#j&dDN9JNs$R`Huht\nY0J(_O53sM9y8r+H07*qoM6N<$g5#(xe*gdg\n\nliteral 0\nHcmV?d00001\n\ndiff --git a\/shells\/browser\/shared\/icons\/16-development.png b\/shells\/browser\/shared\/icons\/16-development.png\nnew file mode 100644\nindex 0000000000000000000000000000000000000000..33d99798e07b27bd48862e9d5779206bc96f9e4b\nGIT binary patch\nliteral 638\nzcmV-^0)hRBP)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV0000PbVXQnQ*UN;\nzcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU!AW1|)RCwB)Q%y`0Q4s#R+q(U?D79E2\nzCN*$_5Ki{u1y1E4oHXI&MHBG=c#!}Ry(kxBBL2jLNJxN?kPu_!ga^D}NPq^zK?&>0\nz5Ee=iwzklA@y)=lrIw46Om=qOn|a^&y?M58v8zh}>hXUTmx_zswGHq$HAC`vt(+rt\nz5oOnJ@LG}8OU1>(+Z|9M)wuj(gd0&I#gf;DaNhv06`H;9$5q#W<ogNi&V0m<_*Oo7\nz$$9lwD~y!Ru@b4lzPf7FNX3}sW9Tk{hKk7Db$_87slCz&OwIuTnVfj1zb<kv+&h5m\nz#yZEk*!O#R(L%%sh%56Hi&U7?*0K5aIc7WVuqVcb7`7~QAT#x01XOTA2xsyn3Iu;)\nzVifn*ws_Ov&>MK8*HAt+4rwLM`cM<n%F@8>Udq%=7LO-CU}b*ZqMO%`w2<$H1O2(=\nzHYz%M8Gazvii01k@Fg^yOKPa~D40&Bxk>1Z3@w{S^nMQ#!>^GQRBd7s56!M+EjQtB\nzj6whM8Ql*bVQz09sl0)AH9<iq!Ex86vuFyq{=G(1)!k3iEFf)cIq&A&%uX6@!J}JR\nzP92Cwho{eham<Ynsp%X-4jH4Gj;LSZIO23bH;mGgsL#!!>gg-kg%(aRvV9NQnZ~o9\nzzZk{fm2!Aw+ld1$4NRk1mpwjY)bC77&E&8_!ugbvH$({Hg)g#j&dDN9JNs$R`Huht\nY0J(_O53sM9y8r+H07*qoM6N<$g5#(xe*gdg\n\nliteral 0\nHcmV?d00001\n\ndiff --git a\/shells\/browser\/shared\/icons\/16-disabled.png b\/shells\/browser\/shared\/icons\/16-disabled.png\nnew file mode 100644\nindex 0000000000000000000000000000000000000000..2f0317ea3fd6b7933988fb03624d7fa0d1981d36\nGIT binary patch\nliteral 494\nzcmV<K0TKR*P)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV0000PbVXQnQ*UN;\nzcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBUzkV!;ARCwB?Q$1_KP!x@U5?oRUbSddx\nzaB(Yk&+Jg?n4ztcOMij?pkt<NZlzPE{(xv_6Pm@%T97~x6^WQH`_7{`JkyV%y>Q9n\nz-goZ3=iI!SBuOXCkEFj@Dp$d->$WD7$#u8eRVij!*4cDAy+f{2fMZX|*@dg!Zuc5R\nzk)5XL8!L3rfc-qrSM&M&0bj>)3=wls0G9y5nRUHD5jdOXyqYJMtE3b~;iDUd(JG2!\nz4e#}Omz0m=cwNQtO6Y<P)OF8nyWPIPai%!v(L^N$j73QTf;-~S1%)@8%`-F*_2C7;\nz6$z@kTrMB!!v51B9Ae0kKENDk&}=r3MP6YT&giUZnkwdWU00blt5SoXD4;VO6tG@&\nzr3pdpV2z@PB%El7A&0`>uF<w_z8*HkQ@vjAc%FBgBuS8E*=#r*b`V3Zy23C20RwSv\nzqtPgkWtnsLegFNp2T_g#zT&FJ<M9og^g#|A5HU3pf{YbuK=r|35D+aqEYma_i^XEy\nkZnp#Re(k@{`9pvK00h~KYD=d<ZU6uP07*qoM6N<$f=$lfl>h($\n\nliteral 0\nHcmV?d00001\n\ndiff --git a\/shells\/browser\/shared\/icons\/16-outdated.png b\/shells\/browser\/shared\/icons\/16-outdated.png\nnew file mode 100644\nindex 0000000000000000000000000000000000000000..aa42bfe0b4e0c791fa1bb7f48e989729028bf481\nGIT binary patch\nliteral 558\nzcmV+}0@3}6P)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV0000PbVXQnQ*UN;\nzcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBUz&`Cr=RCwB?Q?W||VHAI!<xL$<6`g{s\nz4idDuh*01nH=T=vISN5ogA{@gxVdQ|If$Dst`?ksfRaNk-4J*~CpCs%%L#G$9(;P9\nzPW6M2`@Z+R-+S-(zIU!bAn*(ThwwMNxV>KQz1<RtL?9lI!)P=D(=^HE^Z6i|OajmI\nzFdmQX?)#jRTr3tr6h-KEyF|i;d$iT-bqIw*D<y0>12mgW=yW<zsZ@xFh(@C@ole0p\nz4DwM`b;04Bq69&pFUmj?E+jGF*$&sdi54T~aycThGs}c!Gh#lUhrwX5DgkvOSy2>f\nz7&`QNy@ewN4F-c$iJeRVkbvYwB0*U&Gjn7;z&lx%DS;ClE0<|!-%WkN#ya8VIPON%\nzG^kdqq*an6(mtEbpj<9PtJQ*7EJoGo?+O&I{qXSkwTysG#1#&Qtwy6^>AG(9`+duf\nz$z($J+M8sV-?DXiabz(bXMY}iXPkpnDh1hWmMX!?!~MzeHi!ovxT}4_`Pl&oJMPVM\nzz<^}bj=I&?Ar!9sWIs*sQlLzFZ+#N6%k6fX#ulHhR4S1zGbgc(hVest40K!jSPl{c\nwHj)hy8y->g%(L=qRXz<33h=Mr`B#7e0LAj*R5Z^J3jhEB07*qoM6N<$f@F>Jr2qf`\n\nliteral 0\nHcmV?d00001\n\ndiff --git a\/shells\/browser\/shared\/icons\/16-production.png b\/shells\/browser\/shared\/icons\/16-production.png\nnew file mode 100644\nindex 0000000000000000000000000000000000000000..1c253dca5d56d6a309c5854b8a82266dfce01aba\nGIT binary patch\nliteral 546\nzcmV+-0^R+IP)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV0000PbVXQnQ*UN;\nzcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBUz#7RU!RCwB?Q$0vRQ4~J@kfdp^Kte5g\nzLS-n3Lrw+J(2zqd*-{X+8AMCeR0&Nv)l!o~Pz1R(I7QN|U^oO)gB2v9SSSjWQGN%m\nzyq-;U;PUQ0=bm%E^WE=hWLZuVk&pgn*IIS5#XUmS@oCbV%uS!cYA0J@o?|NWY1PT{\nz;yRh+Ve;;taUmpPuQyr9wYJxYxqej8D-WF>Kjq`cRJc0luV*{T{`ATe)vFcW8~a^U\nz&1IW8S~VsC9cYk*rG)-jtNe~YB-#QCyfAn9CdEELe=9ukUS~A3Um(&+k`%_QL#q+K\nzB>6_EcAw=DDz_ObB@^^s%=6`TyOU$!2?em%qZ1rrP9PER2bOm@F|#qpgubK_lsk%W\nzaS#ixnj8R{(gft+VrU|`(3#tG;g8oMcQaTW)H4}mXt?ljx=+s+G3xS-F((~^UNSnI\nz<d|8ayMs+`qG>4cOH>7UfQo=xG$0N|06!l;X?+F3D&~5O9a6V{f_i5|To~O@pf4C|\nz(Q=Cp>eVuTAr|qpN<Lb2qdb(7m*n1xG8aGq#$iw-o)hEYMU>X$Kp3<R)<L8g3rHYg\nk5UZ52DDbb}`CEVi012eSi#9Hm_W%F@07*qoM6N<$g4Ag0w*UYD\n\nliteral 0\nHcmV?d00001\n\ndiff --git a\/shells\/browser\/shared\/icons\/16-unminified.png b\/shells\/browser\/shared\/icons\/16-unminified.png\nnew file mode 100644\nindex 0000000000000000000000000000000000000000..33d99798e07b27bd48862e9d5779206bc96f9e4b\nGIT binary patch\nliteral 638\nzcmV-^0)hRBP)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV0000PbVXQnQ*UN;\nzcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU!AW1|)RCwB)Q%y`0Q4s#R+q(U?D79E2\nzCN*$_5Ki{u1y1E4oHXI&MHBG=c#!}Ry(kxBBL2jLNJxN?kPu_!ga^D}NPq^zK?&>0\nz5Ee=iwzklA@y)=lrIw46Om=qOn|a^&y?M58v8zh}>hXUTmx_zswGHq$HAC`vt(+rt\nz5oOnJ@LG}8OU1>(+Z|9M)wuj(gd0&I#gf;DaNhv06`H;9$5q#W<ogNi&V0m<_*Oo7\nz$$9lwD~y!Ru@b4lzPf7FNX3}sW9Tk{hKk7Db$_87slCz&OwIuTnVfj1zb<kv+&h5m\nz#yZEk*!O#R(L%%sh%56Hi&U7?*0K5aIc7WVuqVcb7`7~QAT#x01XOTA2xsyn3Iu;)\nzVifn*ws_Ov&>MK8*HAt+4rwLM`cM<n%F@8>Udq%=7LO-CU}b*ZqMO%`w2<$H1O2(=\nzHYz%M8Gazvii01k@Fg^yOKPa~D40&Bxk>1Z3@w{S^nMQ#!>^GQRBd7s56!M+EjQtB\nzj6whM8Ql*bVQz09sl0)AH9<iq!Ex86vuFyq{=G(1)!k3iEFf)cIq&A&%uX6@!J}JR\nzP92Cwho{eham<Ynsp%X-4jH4Gj;LSZIO23bH;mGgsL#!!>gg-kg%(aRvV9NQnZ~o9\nzzZk{fm2!Aw+ld1$4NRk1mpwjY)bC77&E&8_!ugbvH$({Hg)g#j&dDN9JNs$R`Huht\nY0J(_O53sM9y8r+H07*qoM6N<$g5#(xe*gdg\n\nliteral 0\nHcmV?d00001\n\ndiff --git a\/shells\/browser\/shared\/icons\/32-deadcode.png b\/shells\/browser\/shared\/icons\/32-deadcode.png\nnew file mode 100644\nindex 0000000000000000000000000000000000000000..c4a6bda3e6a6d0df9388f3beff37e254a91df25c\nGIT binary patch\nliteral 1318\nzcmV+>1=;$EP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F80000PbVXQnQ*UN;\nzcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU$$Vo&&RCwCNS6ygRXBd8SPX3ylG)-gM\nzR4rR8EyAWSy)ifKF5Hb?ti9L-%LZdo!A;n9vtB63>_r`D3!8(9ZZPOzH)}VTUMvIY\nzO?R^j>(!KY%-^(KY@6hyO=1$i=S{zOPI^pY9P@?4NxppN{dwN!eZCXhUxyAf5z(Z$\nzUZ?-pu8V6xc|pNxGv=i7f`XTluvgpRXltjYH;<5`wVl@IW-0mmG-VebSnl=g*+<@R\nzFS)zAX=C9Q#U?IOUQbr^Zxb9SR0{sm7vGWM)hI0-x`boc%1=L-oMT_;<5Sci62KY~\nz#9rM0Ir(nIBq}0+$`Kq+kN`dh2ai!etfSiK*jZA&KH7fz9PeMgG|tJv8V?@kq_l7!\nz#UsDemjIvy><A7+B?zL=OmonV(XUGA+#mVW)EWd09(|wDsboqu4y5L8Sgg%*3lLmZ\nzZpDj7OAiE6uRUJ^GKkU8U$g?10~MfQwGZ|*!q%LCdy{y^gtnh5_8hR^89u>lJ2rV>\nzPPB)zOVNt{?bYB1;WRN?aOUdl=IUi%JHPp{v=<YAiOK5;eh!r*v1$ldjv*fO3l{VI\nz8%PAW@f(O)&JFEAFDEDWNJE>T9U!GuGNuHKV+KnKwxfDHyd;Q*3Sm~WEj2^Ve#huV\nzvJ3G-0`Os_A29V~_s%oY!OqXdO9AhX4Aa`RNrv9N`&Ck0F8*zCe1x6O=^2Wwt<zj8\nzLz=3PKb@jNCd2cO0RBS*6#wliEsl-wT@}SOi8b&3FeRpcr9w7iMgZ9(36M(8y-`qL\nzfd0<#2eh#9h(4VE*Mz{AyS7o6+s=LfxuZ426&rm)yf888g`4cBL_+iqSM2*MrU#^;\nzv<`j5?TJlX;kB8>#+F`A#dP{)ho9k}ilu0mNM?`MxkW$Lgg@Ehn#QnJYjdi!n9cEZ\nzDH^AFfs&P}WqP4VrUG86@kT=nB&%Bl60oq(y~Q!s#_p}rdpDQ)``)tZVek)s^1LvS\nzu*mp6YJTe-=0f`KqRIu29wVF6Ne@MP@GykMb9<h`jcy7!6b^Je)F^n7W$2~#`Q40)\nzG>BKA|44D7E`Gi>0kE>j&Ma#H5<x<qz54_@Hv~T}ldty;q3=;fD^n;i8DZB}Ql{WA\nzObMpr!o4^-6&v-mw+a6d=2=Zbgy7|;8KC?5{5hJ5Z*X-JOHbzc>MJ3dSWcSOWGjXQ\nzLYR=6r5MlyDg;Locg4tHO5}vF2CU{x&qP+&slVAvk(G5OBFrlgINcEtcUygj5wyQ3\nzyR%$9?qQ#czU^t*oO?%U@7K`;-v?Wtuw2jO>CaTA{?ky^G|DBdU#9@+@sQ6H3@td=\nz)L@!`3t}?P-d<(Y>N<{bx>=c?D{#PaF#`O9Et+9GU8LvprM5g%0;nEmffY%o9_lPM\nzAehmh1yDdB(dJND9Y<eo=I@p$%Q3WMXdqaceGm|&ge+qmJO7xbx3_s|x5vQ~F_TF1\nzGpMwy!9j-u9@;Oe57?FZUr3<acqhPNBo8D^h*8NT+hP4dZ;A1^cd1qXc2rIP!Em@h\nzm=w)N`DB8VDt{M%3IgsS11W2@ihoRMHNXy1K22<@jp6m@J_$wj^#n(3Brxz_BvJ3*\nc^Tz@V0FmNf5G=%XfdBvi07*qoM6N<$f^)@nsQ>@~\n\nliteral 0\nHcmV?d00001\n\ndiff --git a\/shells\/browser\/shared\/icons\/32-development.png b\/shells\/browser\/shared\/icons\/32-development.png\nnew file mode 100644\nindex 0000000000000000000000000000000000000000..c4a6bda3e6a6d0df9388f3beff37e254a91df25c\nGIT binary patch\nliteral 1318\nzcmV+>1=;$EP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F80000PbVXQnQ*UN;\nzcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU$$Vo&&RCwCNS6ygRXBd8SPX3ylG)-gM\nzR4rR8EyAWSy)ifKF5Hb?ti9L-%LZdo!A;n9vtB63>_r`D3!8(9ZZPOzH)}VTUMvIY\nzO?R^j>(!KY%-^(KY@6hyO=1$i=S{zOPI^pY9P@?4NxppN{dwN!eZCXhUxyAf5z(Z$\nzUZ?-pu8V6xc|pNxGv=i7f`XTluvgpRXltjYH;<5`wVl@IW-0mmG-VebSnl=g*+<@R\nzFS)zAX=C9Q#U?IOUQbr^Zxb9SR0{sm7vGWM)hI0-x`boc%1=L-oMT_;<5Sci62KY~\nz#9rM0Ir(nIBq}0+$`Kq+kN`dh2ai!etfSiK*jZA&KH7fz9PeMgG|tJv8V?@kq_l7!\nz#UsDemjIvy><A7+B?zL=OmonV(XUGA+#mVW)EWd09(|wDsboqu4y5L8Sgg%*3lLmZ\nzZpDj7OAiE6uRUJ^GKkU8U$g?10~MfQwGZ|*!q%LCdy{y^gtnh5_8hR^89u>lJ2rV>\nzPPB)zOVNt{?bYB1;WRN?aOUdl=IUi%JHPp{v=<YAiOK5;eh!r*v1$ldjv*fO3l{VI\nz8%PAW@f(O)&JFEAFDEDWNJE>T9U!GuGNuHKV+KnKwxfDHyd;Q*3Sm~WEj2^Ve#huV\nzvJ3G-0`Os_A29V~_s%oY!OqXdO9AhX4Aa`RNrv9N`&Ck0F8*zCe1x6O=^2Wwt<zj8\nzLz=3PKb@jNCd2cO0RBS*6#wliEsl-wT@}SOi8b&3FeRpcr9w7iMgZ9(36M(8y-`qL\nzfd0<#2eh#9h(4VE*Mz{AyS7o6+s=LfxuZ426&rm)yf888g`4cBL_+iqSM2*MrU#^;\nzv<`j5?TJlX;kB8>#+F`A#dP{)ho9k}ilu0mNM?`MxkW$Lgg@Ehn#QnJYjdi!n9cEZ\nzDH^AFfs&P}WqP4VrUG86@kT=nB&%Bl60oq(y~Q!s#_p}rdpDQ)``)tZVek)s^1LvS\nzu*mp6YJTe-=0f`KqRIu29wVF6Ne@MP@GykMb9<h`jcy7!6b^Je)F^n7W$2~#`Q40)\nzG>BKA|44D7E`Gi>0kE>j&Ma#H5<x<qz54_@Hv~T}ldty;q3=;fD^n;i8DZB}Ql{WA\nzObMpr!o4^-6&v-mw+a6d=2=Zbgy7|;8KC?5{5hJ5Z*X-JOHbzc>MJ3dSWcSOWGjXQ\nzLYR=6r5MlyDg;Locg4tHO5}vF2CU{x&qP+&slVAvk(G5OBFrlgINcEtcUygj5wyQ3\nzyR%$9?qQ#czU^t*oO?%U@7K`;-v?Wtuw2jO>CaTA{?ky^G|DBdU#9@+@sQ6H3@td=\nz)L@!`3t}?P-d<(Y>N<{bx>=c?D{#PaF#`O9Et+9GU8LvprM5g%0;nEmffY%o9_lPM\nzAehmh1yDdB(dJND9Y<eo=I@p$%Q3WMXdqaceGm|&ge+qmJO7xbx3_s|x5vQ~F_TF1\nzGpMwy!9j-u9@;Oe57?FZUr3<acqhPNBo8D^h*8NT+hP4dZ;A1^cd1qXc2rIP!Em@h\nzm=w)N`DB8VDt{M%3IgsS11W2@ihoRMHNXy1K22<@jp6m@J_$wj^#n(3Brxz_BvJ3*\nc^Tz@V0FmNf5G=%XfdBvi07*qoM6N<$f^)@nsQ>@~\n\nliteral 0\nHcmV?d00001\n\ndiff --git a\/shells\/browser\/shared\/icons\/32-disabled.png b\/shells\/browser\/shared\/icons\/32-disabled.png\nnew file mode 100644\nindex 0000000000000000000000000000000000000000..7c750453238885d1cba45da238abc82ae0fcfa06\nGIT binary patch\nliteral 1092\nzcmV-K1iSl*P)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F80000PbVXQnQ*UN;\nzcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU#=1D|BRCwCNSG`MHQ526aF)9+3P*g&y\nzh)ZY?vlT_hwjyp72gg<yb*PHsAO`<{AP9nx=+dcH1VO0nR8X4YU>({HVg{3dAJt$@\nz#3X9$`B{(LT;F@q2<E`ed%5@A^L>8zzC44$pwO_=FdH71k~AWD^z$SK%5RKNa;O|+\nzRx)u+O-(&LI5-%O#bPtt+uL3Euf@BvveE$F)6>&=JiEKQOYUNYO>2;{=NA_je=ms=\nziNw##Ya-!Z67CTBNa;7MfuDKL&d!1&pT^K$gdzx9TwHvC{}9G=P=a~#`ZbhdP=v;K\nz@8;&_JMiI|wE^%7L!K9vvN4E)%!df<?Cf~-bY!f7qoX6gJlEXZ><@>-9z{{Ea=f;-\nz=I-t74at1x=jY+Fva$v}`56t!&(FVANECXf-EJRDCX>HXsnl^}W8<t=!BKQV4>F**\nzxY#NFhoaWj))~C}e7?6!OH1vD#N_1U?5!R%o1K)xu%3KVrtp`Smv?P!Y_wEVR5&db\nz%d>)l0;kDjx@yIqo}TZ_TUc1wK;C{qM6fR!jfP+to_ad+xDsVAM@L6HY&KgLD+56|\nzgvR4>zg!zutMwH;W}X|UqclY#k<SYY3v+69lGX)cn}G;?KH*8qK41-1t<~F%8R!V^\nzAn>vbHT+0xLkM61fkJL82;g?Y8l~e6=JCWDc+r-a0}g<PpHRrM!N)Bt8S(!G3-EwJ\nzM+OuSV*-?4O2qqMtUM><hlDK#8yK-c3p5yT*i$jAOuUy3Rs%2*UGEG;*%B46U1PpP\nzwFqG`JY_G{QoscU9?^U3L!Oaaj+R(2JmlI)s{w4*D?;APhYQk%uwyVU7b<vQ2;^|h\nz@M+0&s)rGbfDrizh7sI`Skr1l&OMCdh;mWlsdh4I0@2XWP)kis&436*!XXpFK_ll}\nzjrZi_WO-|A>!Zu%TD~(9GEp=JD=RApR##WstE#G;gmk4M;sNCt^F@RN{O;}Tg_@e0\nz=7YhYySlpCm(`63p;v1sP7OlMm;hciKB?gDcONhsjitz=Jm1&X*NzCZwYAOH)zwWP\nz68%InA9&=`^xnrY<@#8j^Lo9<fk42Guwzh%_%N3ZUg#PC?~96xZh3&?xwf`;93Eoe\nz9XDb%FnZ91<nZv&j{>9i>EJ6m71>06ef<nNVS0M{B?jJ6a9HDOJFf8Piv9h4f7aJ>\nz?tK~c)XoeMKV;<88%FxEXj!(tzMk0K-JK(k|4=vlpo_)w@bGYdXJ_YEnb+g-_{oU(\nz4u>N^M*jxy$jFErGVXmNdQ4KTzfyBWNu(ft{ef!C#pn4y0R{m73@I68j+emz0000<\nKMNUMnLSTXgoDP}*\n\nliteral 0\nHcmV?d00001\n\ndiff --git a\/shells\/browser\/shared\/icons\/32-outdated.png b\/shells\/browser\/shared\/icons\/32-outdated.png\nnew file mode 100644\nindex 0000000000000000000000000000000000000000..6eae901bf058833312c3ccd677300e26f08bc3fb\nGIT binary patch\nliteral 1095\nzcmV-N1i1T&P)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F80000PbVXQnQ*UN;\nzcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU#=}AOERCwCNmrqDkQ543ne=rCf2Eqv(\nzg8`vLLKjgp3k4yZjR;9@Tv($UF$z}_1VSK1=|-1s9KwYgAqa<17b&yQDFPSiRN!i~\nzMY>TVm?Eb4yLBGd=bL#mE}Rb@Z{EB2zVDpx{JD23LZOgfDfQaAI@I}M)w+7B{C@x2\nzGLVCibww)6L@wy4_L|Y$+^hx$22?{sgWBHSR`GaT?e6Zn&W%JOs<X3GuVK#g^mN|2\nzf(k1Ka`^@!O(YV^=kuwJjSWoz78VxN`1rUwIy$oFO-@egao$0S5&Uj%Z@1^Up|X&5\nzcn*12SC{JR>r<_*t=g;J-d=4OBwX?vqabAd=;)|k%iJ?7Fh4)9?~psgB4dyc8VI?Y\nzNG6k7ImXVU07#`$r`|z?5|9Htcaj4_L3j$m(|}+w=$e=#BO{uW_|DAC*v6C!PXnAD\nzKm;K`TEfFS35j#9n}Q~)z2wJJ5{Zw6!(n|Fqewne6`qkjole{G7pj1~NytJfAR3LH\nzP=Jr&?eg-nCNY6=Qif(Ys0g?Ga8-bXV`F1>=|F@5QulZW0n$4?lb(U+kV^k3M1H~m\nzDJ>R};j^=|c7mbA-rk-j85$bW@9|a|6NXA<;K1PEp#C0)d%+F?H48aOWm=6IbU8px\nzGcNHqAyV@l37ePvb`{_Wi}1j?053#t#sP}Bbxm^)-|-^14G;piS}wM}36Tjlt)lyY\nzSSy)tf@d*;_)5&3;2rZQTN1ID_yZ0kPx-O9xTwiUAi{x1`}_MgDIRrqckB0SYinv{\nzWknqv9Ozylt$28NSbu{m+1c5#x@e7x^<P%U$A7H3zw;bRtRytAsi~>l;o)HpY;A4n\nz`_j@<uC1*tm&s)GSW8Pw&bf|pu)e--ze~Kioy-2Xn@hfno|-S0Ya>ERJRu}xyxS(@\nzJZPYrY~76Ax>>8{;#ckQ{(-OR{fFcHAuy56X0@b&KtLN1i^X*3+uYpLB#n)Y`c8<X\nzht$>8sfmdR9Uk!FS;z{(1x?C5e5+Qyn)_bbW<-0%5bB@CWQFHMZ4-NPL)tTQK+l~^\nzT7mTEpSI`0`WpSd<lWHiOh-4A0}D+`4kUs{59;-u<TLT)@fGE(tt!m`x7`e*@LtMO\nz+Ov@3EkFgHo0=~E%PouizEu?^86f@M*&8TNNNLTY5(M}90|mdwIOSQC0n|DPCcC4Y\nze%YWP<p657+lQ97ro?;SeyNlde=`(}ONcxVrAREBlo=8dkA!sM%cmPfAH}X+|LA=p\nzf{d&e1$Z_$Cnui2%vc^)t5Q%<f%8D+|9`3F!YT&zl*tJF_x!H_0|0++O5j~2P@Mn(\nN002ovPDHLkV1k)$2?+oI\n\nliteral 0\nHcmV?d00001\n\ndiff --git a\/shells\/browser\/shared\/icons\/32-production.png b\/shells\/browser\/shared\/icons\/32-production.png\nnew file mode 100644\nindex 0000000000000000000000000000000000000000..9192719e5b50fcf214b3b5ea8095ff344f60e45a\nGIT binary patch\nliteral 1068\nzcmV+{1k?M8P)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F80000PbVXQnQ*UN;\nzcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU#&PhZ;RCwCNmrY1iQ547Tj6;TlG6rKG\nzV>Lu!8Q2F3feSTgVT)AI78wLdkU`)giWc_0DOv<Yv<}n+(DhO^ZNXwNMBG1);*|\nzQwIwbCDXF^yLiU;-n^NoFKiB6-f-V}=l<_G|MS0he9>q$q?CGUjB53Nt=AY0IiXM}\nzo`uD+s4))sv$VKab->LdH@r!0JbYX~Cx`mg_x>I=oA~1BTToiA)>Rx-!Dxw^9vN1j\nzp2XDr^i;<9K7#`bnHDd*`B(*l`8pthv9HfNEy3~Ie&)Icz#IVa<@x5q(TpH6W`Lcu\nzI6(lw@8ZT*W4>80_Ab`0a`N(3$+<h)f8^mU4Gs%e9nqi)%WG7k@0qs@?7rNgpMzIh\nzQc^98N_K{Cx22S3|Gl_g{9{)vEdak82PTIG9Oozji_6ZPc)=WCGnp#@QfxQsODWhn\nz^(7ku#tFnf0TALPNfTVEIcXod)?%46Ti(_ZR{#OG^lzwbHd?F30J2jD1Q4v38k>1R\nz$NZj|(%=0Y`>cWSTyY!nAuN{u7bD%gV*xuiU_0Q%M~pK480b-Bz1@!4umCW(8HVVv\nzdzcK-*dgZB+oBoL`*aX<03e2werS#vXTcQ-u<K$hxghl&ec7c`pTDC_`Pby?cl5pl\nz-Eyo=74EIn0cSo8tA)8)Ra9N4%dq}Xla7Nw&p@z1&xQ6>s_|DZ)StOu)(n6i5Ri%m\nz#6(bp6KDd9+es&41uvv*GH2Hhz>2o`h3SlM@lMMJ80aNsA}Haix|CXS2AF*SYmdbo\nz@yy!bU#(-#OkO*|Q*;2N(sFj?q6G3$^u+l^GCi{RkRe!(pZEYk$hUO1H0yYBURX#-\nztB}S>{Yka9D560@rp-;Qnt-qug28fp8FLfk8u<GMH}rg@zD0!$Qog<4ZfvAN`Fy@)\nzCv7{`o+KvzY1@$ACllr)m>{qjq9V<&&(=D&Ap`^vElVa4E;hkC0KyOZ$(UA%5Egdt\nzR7--{MFl@6U%)5&y7hC}Qq1l^N-2sPPwSQ;6ZEnu9+{w>MDxuGiTnZ(F_K%9r?Y^-\nz5>%v@G*SvckZN{KZ?g#EWj0Ef8;*ECjM$aabqcZCcQ>v|FLfjrf+KdL{`S*!#m6y0\nzoJz#*0mz^&-7cS=01%Wiq^e$xW;yQ}{C2we2>U$)fIy@W@i5<hskxkb3?Urvq!SPw\nzeoqYcd%u>GUOA-9S>epEUo>f1(GN2T0q7Zk`Eo)F&QDKT4ySbbLHoM-E*rpVn}6|N\nmYPPHw01a6Jq5q!$6<`4LS42r6)8f(q0000<MNUMnLSTZa2JWW-\n\nliteral 0\nHcmV?d00001\n\ndiff --git a\/shells\/browser\/shared\/icons\/32-unminified.png b\/shells\/browser\/shared\/icons\/32-unminified.png\nnew file mode 100644\nindex 0000000000000000000000000000000000000000..c4a6bda3e6a6d0df9388f3beff37e254a91df25c\nGIT binary patch\nliteral 1318\nzcmV+>1=;$EP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F80000PbVXQnQ*UN;\nzcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU$$Vo&&RCwCNS6ygRXBd8SPX3ylG)-gM\nzR4rR8EyAWSy)ifKF5Hb?ti9L-%LZdo!A;n9vtB63>_r`D3!8(9ZZPOzH)}VTUMvIY\nzO?R^j>(!KY%-^(KY@6hyO=1$i=S{zOPI^pY9P@?4NxppN{dwN!eZCXhUxyAf5z(Z$\nzUZ?-pu8V6xc|pNxGv=i7f`XTluvgpRXltjYH;<5`wVl@IW-0mmG-VebSnl=g*+<@R\nzFS)zAX=C9Q#U?IOUQbr^Zxb9SR0{sm7vGWM)hI0-x`boc%1=L-oMT_;<5Sci62KY~\nz#9rM0Ir(nIBq}0+$`Kq+kN`dh2ai!etfSiK*jZA&KH7fz9PeMgG|tJv8V?@kq_l7!\nz#UsDemjIvy><A7+B?zL=OmonV(XUGA+#mVW)EWd09(|wDsboqu4y5L8Sgg%*3lLmZ\nzZpDj7OAiE6uRUJ^GKkU8U$g?10~MfQwGZ|*!q%LCdy{y^gtnh5_8hR^89u>lJ2rV>\nzPPB)zOVNt{?bYB1;WRN?aOUdl=IUi%JHPp{v=<YAiOK5;eh!r*v1$ldjv*fO3l{VI\nz8%PAW@f(O)&JFEAFDEDWNJE>T9U!GuGNuHKV+KnKwxfDHyd;Q*3Sm~WEj2^Ve#huV\nzvJ3G-0`Os_A29V~_s%oY!OqXdO9AhX4Aa`RNrv9N`&Ck0F8*zCe1x6O=^2Wwt<zj8\nzLz=3PKb@jNCd2cO0RBS*6#wliEsl-wT@}SOi8b&3FeRpcr9w7iMgZ9(36M(8y-`qL\nzfd0<#2eh#9h(4VE*Mz{AyS7o6+s=LfxuZ426&rm)yf888g`4cBL_+iqSM2*MrU#^;\nzv<`j5?TJlX;kB8>#+F`A#dP{)ho9k}ilu0mNM?`MxkW$Lgg@Ehn#QnJYjdi!n9cEZ\nzDH^AFfs&P}WqP4VrUG86@kT=nB&%Bl60oq(y~Q!s#_p}rdpDQ)``)tZVek)s^1LvS\nzu*mp6YJTe-=0f`KqRIu29wVF6Ne@MP@GykMb9<h`jcy7!6b^Je)F^n7W$2~#`Q40)\nzG>BKA|44D7E`Gi>0kE>j&Ma#H5<x<qz54_@Hv~T}ldty;q3=;fD^n;i8DZB}Ql{WA\nzObMpr!o4^-6&v-mw+a6d=2=Zbgy7|;8KC?5{5hJ5Z*X-JOHbzc>MJ3dSWcSOWGjXQ\nzLYR=6r5MlyDg;Locg4tHO5}vF2CU{x&qP+&slVAvk(G5OBFrlgINcEtcUygj5wyQ3\nzyR%$9?qQ#czU^t*oO?%U@7K`;-v?Wtuw2jO>CaTA{?ky^G|DBdU#9@+@sQ6H3@td=\nz)L@!`3t}?P-d<(Y>N<{bx>=c?D{#PaF#`O9Et+9GU8LvprM5g%0;nEmffY%o9_lPM\nzAehmh1yDdB(dJND9Y<eo=I@p$%Q3WMXdqaceGm|&ge+qmJO7xbx3_s|x5vQ~F_TF1\nzGpMwy!9j-u9@;Oe57?FZUr3<acqhPNBo8D^h*8NT+hP4dZ;A1^cd1qXc2rIP!Em@h\nzm=w)N`DB8VDt{M%3IgsS11W2@ihoRMHNXy1K22<@jp6m@J_$wj^#n(3Brxz_BvJ3*\nc^Tz@V0FmNf5G=%XfdBvi07*qoM6N<$f^)@nsQ>@~\n\nliteral 0\nHcmV?d00001\n\ndiff --git a\/shells\/browser\/shared\/icons\/48-deadcode.png b\/shells\/browser\/shared\/icons\/48-deadcode.png\nnew file mode 100644\nindex 0000000000000000000000000000000000000000..f3224021a560c7d543178c3159c05cee9eebac9f\nGIT binary patch\nliteral 2001\nzcmV;?2QK)DP)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm0000PbVXQnQ*UN;\nzcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU(b4f%&RCwCdT1#wHWfVTW)6Pt1rq7`d\nz5Cp3Q7PLuWLt}yqVFL@w!bfOgY(Pj56UI$hP&L4UZY+stB5EKKj7Ag7!me=BO}mjM\nzR1-_3A`knr5Bi#RrVsz`%$)1(%)NK!woKxj<YuPx-+SjfukU>So#v3TzJq(Wsh2i&\nzG*EU}yE;NUI=Ua^#KHHdqnNVGCe=}=#Ur0>;3<x|P0OOPF|!7ZvfOf=UZD8{RMPM!\nz6~20q@+vmc!azUG_1>YW+duL9bgXdyAqwo>N50zKe81@MAWi+;L1Q<+bnF0{c*V&D\nzTR-`lJXO`EYcpM)H2TG524rS|`h8UP&KY*x%qDJqN26CSXD$OJhu_e_kA3qMh40=W\nzEfC;na#ZVMQ5{hrkP&0nDnl*24ugY}3M?`w_r>*ib&^S#>%HpDAEkS8#p!0sEeSGs\nzq&qq?NRh{X(M)$Imq1?mMs^TD5oLUi*UjfIvt#1;-xr%{zVA0$ni%H;=V2Y^u0$g=\nz_e*zXG9b~PX#X~84N(O!M6v9|8IGu@YCD5M29{@M=+W6zmeED|<k##buSI!U_M}tr\nz001yn1|W~mzRTy}8i2<&15HP4OGDOj%Qt4m0hhmkUzca6Q=W^`N;EsCC4(@l24A-W\nzPH1-1xmKMXC3}^jb7@_l%F#7DAdG=JwKK2{00RhmVyNw+&i&{QEAz$gyD)Gs^BF*N\nz%`Dh>T&K#RwhLU>phYkb49)Gc2mt6f<C8e7vVaVL@-VazY1Ay(h9`79!iYZJBOCZU\nz9M2wXQ%fs7RZig?L>pxWM<ug!y*-(80AH40Lp)7U=XMz~mYVUs(NVM7U!IwE<UmR(\nzfe06?FT}JpV+cf7G5`>m!iyGC0vSUYNiY^i22FbkYZz{r)>g74r2_yPJbH|q&ln}C\nze>A9+5%duZItFvV&X76u3GRj2fLHVmzDu%T>@n#fD@Qad%>z&Z9ybBtKVCn;pkvY8\nz&adV1h@y^DftTi%Kmd4*f$H=ji0{C6iIxHeV6kGbBrOEKE`9AS%5l3H?2`{e>Si6R\nzc{pWmPfY8mi5XF#1;kM62l@b;U0R_lgHv>Ce2#8UhUxBXglhdBa%(xPbygw~^6%M8\nz`8#*16713MF{~&T&Y9^eoG<#y(gEB^JOzLMbN#cV!Gcu6L06za&k!6P|KWxX{_Xxz\nz>I+9{IJ(5g!2BY0OoZuBiI1Itki)gOho&Yxg0(m@MC0GzNNViq&fEM72axrJKl}Ay\nzu3{l0JB%jC;l!I_&Da~*1BiV-G^LzaPPz`CVeS3riu7nNDOn;K$YUeoP+GYv`YaR`\nz14<dM>H%+@N#p`MGp@rKV}p&Th+CO)4U_$0-|y6PZ<N}{=2GqfB%p~*s5zOmiNbCz\nz;>&2gsyAXK7EO7s)%R$|h)BI-&uhP@J-BK}8RbEFp3Cw&Sv!4yj6Qzyl)9!C`0rZ3\nzJEa4`qsR5RW0?WjRD+YPXbahq`j^rPHXhU0PgWL^-<6zLe1<hd9T5jRbxqInT8)hZ\nzqHaYXjwI}vwZz(%TEoQLa_Q3~@fE0lMF&3|SDMIzh&aD1hptzb(f;Cmjw}wm$7itf\nzk0wnTe8uwVMb)(*^}#0s(RL1iXQPVJAlTfSxAIM5``H`@UDkAp>v3F7M^K!IIq!~L\nz>^yiLR9Ro>W#BmQzH@4xS{_cAGSuV9BA+MDfPyRBE*_G=0MHn2VH2TeDJ5i57AXhJ\nzni^CKXP1=tLX?m_?3JaDt`1G>&3RwV0W;u61HEG4bxkkuxvkqu>E**mRx!|;#2moG\nziP$FHoU26xfeukJRo+}W`(T^_8SUEkG74xK4>~)C>I=N=5Xy1gavBlk=&A#Kf#yaj\nz$);U&5SsI<8dTD-rgI>&L=}D)HI@bRbB$Kz&7+p*i>bnf$=0<WkVhVvy#I;1YIX=r\nzaze2T*u{$1L7m7#L(oUJ#%6g27!7|TLmAsriUKt<f$=d5fL(bp$RHcblluk$QD#!}\nzW^zNQH6sp4GpE{Qpaf7RW&`Tx=nOMWO`KvA?QVQJXKYjN<grJ{BFb>WY8@pAeIy#`\nznLCgw`o`hZrfS~I+Ex8SVsoYvN)4akKo+{wC@06i4|vjeb_sCJibfG_VWdRb1PfhK\nzT;EXY=Sa)?r58$d2hwS1Z7t<v=LGr$jR-)faYzU>w^^-YXo2fbR>ssVrm;{cUelQa\nzjvlW=F1WXB<wxw05s8`E)O>+*OE=I<_kU&ZC=bXAyqBGs(fa11bfDNrJAHXHySze8\nz6$O006LaJMp5<dA!wFC-bdOi<Yaw-^TcC@uF@kd&BH`6TDnCzg|LUd$XmM~)z~dOa\nz;~tRT!sOQ&QJ}_M6XdQLQ;GIRnIJQm%IFWsj`f)1tFhU~<G&)qrUp})Rjds|^~QA(\nzl&LVyv#>R}k4W1oMAPBsj)AWAx#?M&<6kNNZw4A|&tm-Ta3Dmnf1JoR1Lly1e_2s)\nj>ar{oz*-0F{|YbwKA#E$9zpcP00000NkvXXu0mjf*nPMD\n\nliteral 0\nHcmV?d00001\n\ndiff --git a\/shells\/browser\/shared\/icons\/48-development.png b\/shells\/browser\/shared\/icons\/48-development.png\nnew file mode 100644\nindex 0000000000000000000000000000000000000000..f3224021a560c7d543178c3159c05cee9eebac9f\nGIT binary patch\nliteral 2001\nzcmV;?2QK)DP)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm0000PbVXQnQ*UN;\nzcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU(b4f%&RCwCdT1#wHWfVTW)6Pt1rq7`d\nz5Cp3Q7PLuWLt}yqVFL@w!bfOgY(Pj56UI$hP&L4UZY+stB5EKKj7Ag7!me=BO}mjM\nzR1-_3A`knr5Bi#RrVsz`%$)1(%)NK!woKxj<YuPx-+SjfukU>So#v3TzJq(Wsh2i&\nzG*EU}yE;NUI=Ua^#KHHdqnNVGCe=}=#Ur0>;3<x|P0OOPF|!7ZvfOf=UZD8{RMPM!\nz6~20q@+vmc!azUG_1>YW+duL9bgXdyAqwo>N50zKe81@MAWi+;L1Q<+bnF0{c*V&D\nzTR-`lJXO`EYcpM)H2TG524rS|`h8UP&KY*x%qDJqN26CSXD$OJhu_e_kA3qMh40=W\nzEfC;na#ZVMQ5{hrkP&0nDnl*24ugY}3M?`w_r>*ib&^S#>%HpDAEkS8#p!0sEeSGs\nzq&qq?NRh{X(M)$Imq1?mMs^TD5oLUi*UjfIvt#1;-xr%{zVA0$ni%H;=V2Y^u0$g=\nz_e*zXG9b~PX#X~84N(O!M6v9|8IGu@YCD5M29{@M=+W6zmeED|<k##buSI!U_M}tr\nz001yn1|W~mzRTy}8i2<&15HP4OGDOj%Qt4m0hhmkUzca6Q=W^`N;EsCC4(@l24A-W\nzPH1-1xmKMXC3}^jb7@_l%F#7DAdG=JwKK2{00RhmVyNw+&i&{QEAz$gyD)Gs^BF*N\nz%`Dh>T&K#RwhLU>phYkb49)Gc2mt6f<C8e7vVaVL@-VazY1Ay(h9`79!iYZJBOCZU\nz9M2wXQ%fs7RZig?L>pxWM<ug!y*-(80AH40Lp)7U=XMz~mYVUs(NVM7U!IwE<UmR(\nzfe06?FT}JpV+cf7G5`>m!iyGC0vSUYNiY^i22FbkYZz{r)>g74r2_yPJbH|q&ln}C\nze>A9+5%duZItFvV&X76u3GRj2fLHVmzDu%T>@n#fD@Qad%>z&Z9ybBtKVCn;pkvY8\nz&adV1h@y^DftTi%Kmd4*f$H=ji0{C6iIxHeV6kGbBrOEKE`9AS%5l3H?2`{e>Si6R\nzc{pWmPfY8mi5XF#1;kM62l@b;U0R_lgHv>Ce2#8UhUxBXglhdBa%(xPbygw~^6%M8\nz`8#*16713MF{~&T&Y9^eoG<#y(gEB^JOzLMbN#cV!Gcu6L06za&k!6P|KWxX{_Xxz\nz>I+9{IJ(5g!2BY0OoZuBiI1Itki)gOho&Yxg0(m@MC0GzNNViq&fEM72axrJKl}Ay\nzu3{l0JB%jC;l!I_&Da~*1BiV-G^LzaPPz`CVeS3riu7nNDOn;K$YUeoP+GYv`YaR`\nz14<dM>H%+@N#p`MGp@rKV}p&Th+CO)4U_$0-|y6PZ<N}{=2GqfB%p~*s5zOmiNbCz\nz;>&2gsyAXK7EO7s)%R$|h)BI-&uhP@J-BK}8RbEFp3Cw&Sv!4yj6Qzyl)9!C`0rZ3\nzJEa4`qsR5RW0?WjRD+YPXbahq`j^rPHXhU0PgWL^-<6zLe1<hd9T5jRbxqInT8)hZ\nzqHaYXjwI}vwZz(%TEoQLa_Q3~@fE0lMF&3|SDMIzh&aD1hptzb(f;Cmjw}wm$7itf\nzk0wnTe8uwVMb)(*^}#0s(RL1iXQPVJAlTfSxAIM5``H`@UDkAp>v3F7M^K!IIq!~L\nz>^yiLR9Ro>W#BmQzH@4xS{_cAGSuV9BA+MDfPyRBE*_G=0MHn2VH2TeDJ5i57AXhJ\nzni^CKXP1=tLX?m_?3JaDt`1G>&3RwV0W;u61HEG4bxkkuxvkqu>E**mRx!|;#2moG\nziP$FHoU26xfeukJRo+}W`(T^_8SUEkG74xK4>~)C>I=N=5Xy1gavBlk=&A#Kf#yaj\nz$);U&5SsI<8dTD-rgI>&L=}D)HI@bRbB$Kz&7+p*i>bnf$=0<WkVhVvy#I;1YIX=r\nzaze2T*u{$1L7m7#L(oUJ#%6g27!7|TLmAsriUKt<f$=d5fL(bp$RHcblluk$QD#!}\nzW^zNQH6sp4GpE{Qpaf7RW&`Tx=nOMWO`KvA?QVQJXKYjN<grJ{BFb>WY8@pAeIy#`\nznLCgw`o`hZrfS~I+Ex8SVsoYvN)4akKo+{wC@06i4|vjeb_sCJibfG_VWdRb1PfhK\nzT;EXY=Sa)?r58$d2hwS1Z7t<v=LGr$jR-)faYzU>w^^-YXo2fbR>ssVrm;{cUelQa\nzjvlW=F1WXB<wxw05s8`E)O>+*OE=I<_kU&ZC=bXAyqBGs(fa11bfDNrJAHXHySze8\nz6$O006LaJMp5<dA!wFC-bdOi<Yaw-^TcC@uF@kd&BH`6TDnCzg|LUd$XmM~)z~dOa\nz;~tRT!sOQ&QJ}_M6XdQLQ;GIRnIJQm%IFWsj`f)1tFhU~<G&)qrUp})Rjds|^~QA(\nzl&LVyv#>R}k4W1oMAPBsj)AWAx#?M&<6kNNZw4A|&tm-Ta3Dmnf1JoR1Lly1e_2s)\nj>ar{oz*-0F{|YbwKA#E$9zpcP00000NkvXXu0mjf*nPMD\n\nliteral 0\nHcmV?d00001\n\ndiff --git a\/shells\/browser\/shared\/icons\/48-disabled.png b\/shells\/browser\/shared\/icons\/48-disabled.png\nnew file mode 100644\nindex 0000000000000000000000000000000000000000..372b6e00e88a85c08ccfa020e8db75b31b429a5b\nGIT binary patch\nliteral 1564\nzcmV+%2IKjOP)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm0000PbVXQnQ*UN;\nzcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU%zDYzuRCwClTFFnFM-(^4Y(iiPlqHSf\nz0w@s&xJ5+bSS1G}4yoYY7zv3>X|Jd>e?ZEK3(Fq>>IDf=r&l24$Pz0Ohy##{rBE=7\nzFpKTHpX(RBOlH2t#%bM=MtsaS^S-yg-y6vD{4?@t`e_z>a$`hkMrg+JQp|r%)9cBt\nz5vTbVnE#4qfhYF{l<)KAklW}+vDcI1!?gf?eSPJ-ySqQ#+}ylLBocpKU0wZgczF0?\nzW@e_<DUJ2@^`7(d^T}8&_6{^a3pCRe;+~sH48Khn1~K*f=;-Jp)7j<a<?o5vZPR&D\nz#JF32TnVtXwe>T9j5PLget!NLm^wK*nc{WQYJ@cWgFHu8djR2h4}<_Mvf8(p@;rXe\nzngFbQFt5IY<|UJ0ir1ypbZ0RyFE3xGX$9w-nF(mriIu=OEW(zt(k?8CeGtSAPmY6_\nzgY^3PIy^o;ernp+*w{F+u(0r5JRUzSEG%sGdcEa1)8F6!sJpv6Y&y5NxR`wB^ZD*)\nzB@0znR+cBrA2DXPcXf63y}D*4G{(Tdz)nhlKvvVJlQbI)1}CBU+uPeDQ?LZZ#E2t&\nz;6OoX3DDWuxs)t@#l;;~`$lMhVK6c`H}`yFV`C8Oe!stm;v;A}M;WbyT{P<!fR=UZ\nzC`P5FrBCs^wzf71pKobtncmym`xR>q4Gk}tQFWA+mHE>JME9I-rVQ~LEU>b&^1Qvh\nzJ%qrfpbga4*0vTD6qHw0RR!4%ph*tmXf(RSmczT_<Kt<n1*iM_`(d)m4g^It$9V`_\nzUtj++D+0ie;R^6=x54Jb_aW@|_VzF`*_{bMg(%S5+Z!atpXiu|c3IP4VsmqIm^8bi\nzqeU*%3OB+tltA;nE~fA<5{bN;nwpy6?Bp5?p@Pa1&&7zJQFyQq#fjHY#Ow+WS8LGX\nzf{5zOYw{ah(XH^6$5c%vArN7PnE{3b3;|Geom5UR&9oUdFb$@u!&er{`E)@Z)S*iN\nzH3nn=bG#SNya!g1npU+a;fAE4e#?Zfi~_JJF;qk;HK>Epl6ln)RF}bISj~H_EGPwL\nzPxwp#X<9p9R%1hIPHM~w?@P^FDU2u1vgNe`NP>2LECW|HYr<lvNRxeEwT|64ZPBQy\nz(yG7?qo}ATkS>;C<cSnah0(GSqhQ*mQFb9y(_wNU8Nlj0IizcHGO%lO)MiT4FX)5C\nz6bCYhIS?gL#Dgw~!2r97j5lUX<J%v<CtXd`6q&V)gHpRzX;fwhd=x>4^O#VE^l@3Z\nzq`+#1!M9{br^!J2LM9KgAXt;yU<<Lp5XdeN*+Qz@Fb({Kh9SKCKCEQXj+!f`N=Wr*\nzFr%xiR+AOLE(0r?;s$%{(yJ|)Lq-}J8tSR5tLp)1vqF-1J~}#@094lPD=8_t4>W6s\nzO3%*DLex)8a}#xEaGEhY&>}bOcLAf(J3s-T=N3-;+<c6>tt7+YaQGKAG<;iuy3o|r\nz^th&`Cdifm%>LvSHU*o(EV<tVAUB$ShRbL-0kz3Ou9V_R0M<BPfnbQMk|oL#;kLH6\nz$yD>R#GMryAqW6%heDx2-SrA-K1>39Rv7Qpg>Vs@Jd~IBjcE`1Vv3g^@yrc<b93_u\nz|BfEn6l-H+WAE(fXDk4;n4h2j&`Im526uIJ^>C&N%J^1-?|Q68MMcFR_A&Dp7Z)Kr\nz=D*nA2b^Rc-2cn|nbPNDijSxNx&Vwct^SyS7+{~L#(Wyt2$n!_TU~6ifNn3gT-{D{\nzvm!e%iPyQxs#RIVS2|emMXuK+c!LlCS19$e3p0T(tVvjcGk_zQQgE9ah|C1A!~1w=\nz1?ce3>bxE9Nec^^f;12ae8e;d2M3|q+1Xc4E}{6ctgEZ*3Bi&MO38jgn>$XiPeyg%\nzfAMG5|DpiV9Ogd?0q|cR@f>6xJV)@)9=K<@Od(TWu4ta--!x+%1Q-Bvr`E+MSw)!u\nO0000<MNUMnLSTaCAnqan\n\nliteral 0\nHcmV?d00001\n\ndiff --git a\/shells\/browser\/shared\/icons\/48-outdated.png b\/shells\/browser\/shared\/icons\/48-outdated.png\nnew file mode 100644\nindex 0000000000000000000000000000000000000000..342fedea1ed508bd7cabe8c80b5761f9d03220a9\nGIT binary patch\nliteral 1570\nzcmV+-2Hp9IP)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm0000PbVXQnQ*UN;\nzcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU%#7RU!RCwC#nomd^R~*M*jYLu!SqQc?\nzYapjqrA0g>dJ!R1d+^W%y?8J|FG5IB57H743Q}6|5TzyHMQH<i(bgV3R7(ze(UwxA\nzprIi4pefWAf(wNTrJ2u*-{m>Z+uhmOv|Z>AhFxdgy!n2A@B91nX00@VT@EbxxECDP\nzO?lX2a18$(*bB$te+Z70DKC2x98DF+o-a4><{0xmR^V?_##Uj<++q``uC6xY<Kt#?\nzbJOhZ?%GfOZfR*Lc#iJwZZkDCm7Qa4ZOse~4HZQomV^L5H#cV*8X6+6udlD0v9U3;\nzwY3#_y`!VUjE;_)+S=O4>+|#TW@KdK`4Q;v@3#Q3$;n9z7;A5Dw_b&yu1!o#oFLA9\nzjKTKy_RPY<LiYZ?zCKG1>*?vqo-a9prKKh7{V+gRS^~1Xyqxu>yK3A!Jw0s>4-Ze=\nzkEFOa?kdD0fL^i2#>P_sTzx|XLrTa6a*Q7s81Q-*@Q~o1&d$!#2eCZJ^83I`#{ggq\nz_W)j?a!EtieDRf-fb<Q4d=^D87wJN-Cnlf=h)6D?NI|mEN=R1!S{+bo%(uh<WemW{\nzC<;h4o-5b85`FHK*q6rvs4N6<NRy4oJlNpiVD`Fi&bS0B;|wOysJM8G2l1T;bEMPh\nzY@Wya<b9;%uAWw?xw+Y7G8ucGdHB={_=;dj2q+E!A#lDpaAU=l9p@>CzPY!zw@XWa\nzhpSQwlnahkQMv>K((z>!R!YH)=e3INoN=mfP6B{J25yta1Ep1p68dHw6<Sr6bGZ!p\nzsO?}5$Pzomhe#z3Vt@lm;8mPjTU)aL0iv<eE-gYnquB#A1OScI*Vkv;kGNJDl?D}z\nz0LQDYS5{V5teiMDHa4;(0TyoF+{_~29L&jeVnOp^G<b>HX-%p$2!W^orH}Wu!Ca@m\nz4;MUuvx15b#z0W30ZFbGUC5YB;PF-zcmWAtQ=XR-qN=r4MdlL5W@cuRRbsa|<<qkJ\nzFvz$P^A)-9HL{H|PLxv;1#uz$P9cB`t>}PH+{}?hG>Ni<&!`JBf;gONedb;xQHVgX\nz@;O03*+E-JU*p9?l{Ey&C9G@{6+6mQZag5@xVhgeAtsX+0p->LcjqMV3Pi@}ys{1R\nzNauWaGY}3^<#rPQcJ<16Q(yODvMnWGs0Y$I@*+o5Xy}2czIYSDsv8i}PAs49Nug1j\nz|95X+G<R;lYQJB5`$x0Cf0UQNnN%wELHOj(&W@R#oi#^CM;0s(ZEI_@o~x;;v13+O\nzSIxn}fh}eb;Cxk8l|7%!Z~*f`m{vlTPM<X&eRw&TqvBX*mFAm=Pm*uySp`;vz%69I\nz%Bs*RN15AlhhLw39Du*^&V>`>d;5Me-+q@V-CGG)F4`&<V~})P4>Z3xUw>*G;2}}6\nz{eaRQ!Rx+7V3i1DRw=42=A64>2?y@o_nysrnEA_m{@_<rS9i|5buDEBn$KKPinXOw\nzMsjyed<QJS=)RDmNkb+a8XvV^03-+Y=+PhMllza&X90;Ux%V%XeoySnG-N5YA>?^t\nzhrpNaqu!gM{alv5c-GwNeL1;=<o$d*CP1p#xvAK#F|r%iFIa&2>`stgzg+y?O6(u`\nzeE^vd=mHOLH)w5KoIew2|57MRRUH?ybEn4M>U|~I3aH!{l6mmH+o(motOXFj!g6^q\nz^IGJbHv<`c@zrmqid#io0(do72a5K!arc1-_{|7i?>|1WY4g+jzeL_crA{Ov>EGR$\nzxG_TSq)id2()XI2%o6s#C9wae&HWpm;zgkg_erq|nfvOTj6;9KYVZSxf?TQ6w?U_6\nzc=+|3-e*97SnvgRxVXjsmD1hxN4;A2wbM}zTe0@~8{ZdKiIrh!;JUiHP82OXUPxb0\nzRlR!UrJ})yQ|bS|6aN<oES53;MF<R=Xa6`+ZU*Mz3jSp!_|jBnD*@Ifus;=G05G*<\nU7noI_!vFvP07*qoM6N<$g5<;STmS$7\n\nliteral 0\nHcmV?d00001\n\ndiff --git a\/shells\/browser\/shared\/icons\/48-production.png b\/shells\/browser\/shared\/icons\/48-production.png\nnew file mode 100644\nindex 0000000000000000000000000000000000000000..9aac93a622bfab260839911f5d7daa1b47c7c839\nGIT binary patch\nliteral 1674\nzcmV;526g#~P)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm0000PbVXQnQ*UN;\nzcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU&EJ;K`RCwCdnoDd{RT#$)MJcu^Opp?B\nzFw_SY+k{X<H)4XaqAV;6bRkVls0&Io*2F+u)E5hbkEqdDH%K(F5f-Hj8WSU$sGAar\nz8mbjdO2lG{U<HfPs(62={okCKx#!Nk(~e=j<YuNb=kY!N=l`AQJQGMmAi>LP!L!9w\nzhV%u`lOuu5n^FEm@MKJ7$$0Rz%+F*p`-3-YP36f#l7|RfH5DvXro!dA)Dvp!%<|10\nzrhdZ%rn>%SGchu3E)E?x=RQ4R-zO2~E@|Cp7B#K2>s>iF8qDuEKOO2#Z9wW2TC?{9\nzQ`^uO`Q3%VV`k*Nm#jijvZVEX)9}bHYj~8LJ$lg2FPj0&H*d2FAZHH0V}3t5Xg!EG\nz@hbB7#3ic)9(AL3d)FRo0D^&Mj~=j*n_jmgod5OihZ08;0fnARI{3Cnd(48&QmZ`S\nzMv*^9N37>jxVk=Tqk};Umu2nec>AuWd(GnJb)n(IuXLL~PJLsh#?RY_af_Q<?bv^(\nzCe8R)pO>cwlsb4XUoZy66eT=bv$D}DMFfb<&<mYj@3JN};Y-h1qmULx0hI9xd3^Hu\nzPCJG<D9@Y|kGI99hQ9OF$E*#QUsGpa|G9jr=-8+tjx*YwQ#J$Az-;4FuZQrc=-sh%\nzPonw73@zCJAqIIGC!h@qqX;$e!`nR}_ER4|(YlvU50^gzcsELJd9W*l${%}sY+i#-\nzAdh9eL2>&W;9GM}QHUs@01wcIr^(schSj!4<YBxIwi68$Q}hth3!|u|iIMMYnqlao\nzrq-NDm*pTMk4XhKO<Qb9avx(k1VOSnGXO>LCaDpnG#&%*h4pb%f{5uPXADnNO7S@n\nz=4|k-Rn!2KC8u@7yIw*lP^A(42ub2SQV3_T7H0#m?6YF)ju3&|dJxI;8B*orJSZjQ\nzSp<a#x8G}(p7!SIurPHHB?&#nEk~@_+LePqzYH9-d$5<d6gr@b55Wq!5P6<$-)^cF\nzR9j`geQ~E<49;UMzJ7t_I-=5e4>|S5?i}2QH{JQfUYmY3*<0;c3Ky<(b?S=AtX*&F\nzR;{rqs5O9G#zgTe#*1HhQ%IrIVlJa};jZ=F&kATXUX$`o&+IFJMK@)TyWbkHPEa&3\nz5GGoT1uJz6Qiw%vYTFj(a+LB?B>y{?!;=<KnC_;G9OUME6hU<PmC{p&6c`{R(S$g0\nzH^UgWz;uws5kjGtFdwJ<cKlfEo^*UsT&b#*Q&Ge&YQZ#IMswNET{CX17lrVKHmC67\nzWZ8Y~IUL5t@;Fak82mV=FLsr3*NhUSU;as*6M-{_duImk@WK|}61*yPgdzx-9Tf%f\nzBCX-VuMG0-*Zl0hkRayw%sDVhn+H@0wrKNoVoGkjXOo3dKBExv9G-+l0)N2Z*hhx~\nzxUCN0ax(0HPrv_iXjpbjr(IuNTK$H0+p1~}H%hdlHv}-uSk93A2o#(HK-BaR-)bkK\nzAci25zmA%f4|iLIiPrfqJ`4>8)A2AkufCSQd2kG$DVI5ok<tGBc0bMu){w#3_D-`Z\nzI761M-(=4tqV)Z%-H}AkOC<z*cp<8&2_>83@s>9S?3g6iBBTQ~gQ8zP)@I-1q^J~P\nz3@Pb@^h9J%IZv2<4Y$jYFv8b%;(cGPyK4aiW1k#JM6FZNX$p_x#xrW#=YmF)`@ksc\nzrKQs)U8^X4^ckB|C!FMpM85X~wbP{UKnM;32pm(}uqz~qWif!$+J!#%JqpudsX+N#\nzcb#hJg(OkeE2Unmq%uI>^>K5eLjTJ-!t>YI&p8-R<a~ESYUYbw8qE53x)@c!>nc`i\nz#x3qRG)a4%Qu3`tu@+BElW|gBx7OFh4;)F5C!gn#7I7@~e=|T~jxz#Yq@pEdC}!Q(\nz#a(R4z%*CusSOY`x{Zk&8BSSsbmTm##6_=ipPCRcE9|;D%6~6JDxiS!nkIuY0CFb}\nz3M%t^SH9Opm*!s_8l3rVV~9S`izIbck^%1JR&>|YZ;RE3D5BB6`My4UP7P3zx(x`8\nzidbyYPK=1acy)`Nl>5wy0oRgL{O`mV&{x6w_f`BqdsOi+E4-<&NT6#Ay8kD@0DMx%\nU2JL{>NdN!<07*qoM6N<$f|%kP{{R30\n\nliteral 0\nHcmV?d00001\n\ndiff --git a\/shells\/browser\/shared\/icons\/48-unminified.png b\/shells\/browser\/shared\/icons\/48-unminified.png\nnew file mode 100644\nindex 0000000000000000000000000000000000000000..f3224021a560c7d543178c3159c05cee9eebac9f\nGIT binary patch\nliteral 2001\nzcmV;?2QK)DP)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm0000PbVXQnQ*UN;\nzcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU(b4f%&RCwCdT1#wHWfVTW)6Pt1rq7`d\nz5Cp3Q7PLuWLt}yqVFL@w!bfOgY(Pj56UI$hP&L4UZY+stB5EKKj7Ag7!me=BO}mjM\nzR1-_3A`knr5Bi#RrVsz`%$)1(%)NK!woKxj<YuPx-+SjfukU>So#v3TzJq(Wsh2i&\nzG*EU}yE;NUI=Ua^#KHHdqnNVGCe=}=#Ur0>;3<x|P0OOPF|!7ZvfOf=UZD8{RMPM!\nz6~20q@+vmc!azUG_1>YW+duL9bgXdyAqwo>N50zKe81@MAWi+;L1Q<+bnF0{c*V&D\nzTR-`lJXO`EYcpM)H2TG524rS|`h8UP&KY*x%qDJqN26CSXD$OJhu_e_kA3qMh40=W\nzEfC;na#ZVMQ5{hrkP&0nDnl*24ugY}3M?`w_r>*ib&^S#>%HpDAEkS8#p!0sEeSGs\nzq&qq?NRh{X(M)$Imq1?mMs^TD5oLUi*UjfIvt#1;-xr%{zVA0$ni%H;=V2Y^u0$g=\nz_e*zXG9b~PX#X~84N(O!M6v9|8IGu@YCD5M29{@M=+W6zmeED|<k##buSI!U_M}tr\nz001yn1|W~mzRTy}8i2<&15HP4OGDOj%Qt4m0hhmkUzca6Q=W^`N;EsCC4(@l24A-W\nzPH1-1xmKMXC3}^jb7@_l%F#7DAdG=JwKK2{00RhmVyNw+&i&{QEAz$gyD)Gs^BF*N\nz%`Dh>T&K#RwhLU>phYkb49)Gc2mt6f<C8e7vVaVL@-VazY1Ay(h9`79!iYZJBOCZU\nz9M2wXQ%fs7RZig?L>pxWM<ug!y*-(80AH40Lp)7U=XMz~mYVUs(NVM7U!IwE<UmR(\nzfe06?FT}JpV+cf7G5`>m!iyGC0vSUYNiY^i22FbkYZz{r)>g74r2_yPJbH|q&ln}C\nze>A9+5%duZItFvV&X76u3GRj2fLHVmzDu%T>@n#fD@Qad%>z&Z9ybBtKVCn;pkvY8\nz&adV1h@y^DftTi%Kmd4*f$H=ji0{C6iIxHeV6kGbBrOEKE`9AS%5l3H?2`{e>Si6R\nzc{pWmPfY8mi5XF#1;kM62l@b;U0R_lgHv>Ce2#8UhUxBXglhdBa%(xPbygw~^6%M8\nz`8#*16713MF{~&T&Y9^eoG<#y(gEB^JOzLMbN#cV!Gcu6L06za&k!6P|KWxX{_Xxz\nz>I+9{IJ(5g!2BY0OoZuBiI1Itki)gOho&Yxg0(m@MC0GzNNViq&fEM72axrJKl}Ay\nzu3{l0JB%jC;l!I_&Da~*1BiV-G^LzaPPz`CVeS3riu7nNDOn;K$YUeoP+GYv`YaR`\nz14<dM>H%+@N#p`MGp@rKV}p&Th+CO)4U_$0-|y6PZ<N}{=2GqfB%p~*s5zOmiNbCz\nz;>&2gsyAXK7EO7s)%R$|h)BI-&uhP@J-BK}8RbEFp3Cw&Sv!4yj6Qzyl)9!C`0rZ3\nzJEa4`qsR5RW0?WjRD+YPXbahq`j^rPHXhU0PgWL^-<6zLe1<hd9T5jRbxqInT8)hZ\nzqHaYXjwI}vwZz(%TEoQLa_Q3~@fE0lMF&3|SDMIzh&aD1hptzb(f;Cmjw}wm$7itf\nzk0wnTe8uwVMb)(*^}#0s(RL1iXQPVJAlTfSxAIM5``H`@UDkAp>v3F7M^K!IIq!~L\nz>^yiLR9Ro>W#BmQzH@4xS{_cAGSuV9BA+MDfPyRBE*_G=0MHn2VH2TeDJ5i57AXhJ\nzni^CKXP1=tLX?m_?3JaDt`1G>&3RwV0W;u61HEG4bxkkuxvkqu>E**mRx!|;#2moG\nziP$FHoU26xfeukJRo+}W`(T^_8SUEkG74xK4>~)C>I=N=5Xy1gavBlk=&A#Kf#yaj\nz$);U&5SsI<8dTD-rgI>&L=}D)HI@bRbB$Kz&7+p*i>bnf$=0<WkVhVvy#I;1YIX=r\nzaze2T*u{$1L7m7#L(oUJ#%6g27!7|TLmAsriUKt<f$=d5fL(bp$RHcblluk$QD#!}\nzW^zNQH6sp4GpE{Qpaf7RW&`Tx=nOMWO`KvA?QVQJXKYjN<grJ{BFb>WY8@pAeIy#`\nznLCgw`o`hZrfS~I+Ex8SVsoYvN)4akKo+{wC@06i4|vjeb_sCJibfG_VWdRb1PfhK\nzT;EXY=Sa)?r58$d2hwS1Z7t<v=LGr$jR-)faYzU>w^^-YXo2fbR>ssVrm;{cUelQa\nzjvlW=F1WXB<wxw05s8`E)O>+*OE=I<_kU&ZC=bXAyqBGs(fa11bfDNrJAHXHySze8\nz6$O006LaJMp5<dA!wFC-bdOi<Yaw-^TcC@uF@kd&BH`6TDnCzg|LUd$XmM~)z~dOa\nz;~tRT!sOQ&QJ}_M6XdQLQ;GIRnIJQm%IFWsj`f)1tFhU~<G&)qrUp})Rjds|^~QA(\nzl&LVyv#>R}k4W1oMAPBsj)AWAx#?M&<6kNNZw4A|&tm-Ta3Dmnf1JoR1Lly1e_2s)\nj>ar{oz*-0F{|YbwKA#E$9zpcP00000NkvXXu0mjf*nPMD\n\nliteral 0\nHcmV?d00001\n\ndiff --git a\/shells\/browser\/shared\/icons\/deadcode.svg b\/shells\/browser\/shared\/icons\/deadcode.svg\nnew file mode 100644\nindex 0000000000..ccd6e66906\n--- \/dev\/null\n+++ b\/shells\/browser\/shared\/icons\/deadcode.svg\n@@ -0,0 +1 @@\n+<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>\n\\ No newline at end of file\ndiff --git a\/shells\/browser\/shared\/icons\/development.svg b\/shells\/browser\/shared\/icons\/development.svg\nnew file mode 100644\nindex 0000000000..ccd6e66906\n--- \/dev\/null\n+++ b\/shells\/browser\/shared\/icons\/development.svg\n@@ -0,0 +1 @@\n+<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>\n\\ No newline at end of file\ndiff --git a\/shells\/browser\/shared\/icons\/disabled.svg b\/shells\/browser\/shared\/icons\/disabled.svg\nnew file mode 100644\nindex 0000000000..73c2bb51cd\n--- \/dev\/null\n+++ b\/shells\/browser\/shared\/icons\/disabled.svg\n@@ -0,0 +1 @@\n+<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>\n\\ No newline at end of file\ndiff --git a\/shells\/browser\/shared\/icons\/outdated.svg b\/shells\/browser\/shared\/icons\/outdated.svg\nnew file mode 100644\nindex 0000000000..03b83c1eb5\n--- \/dev\/null\n+++ b\/shells\/browser\/shared\/icons\/outdated.svg\n@@ -0,0 +1 @@\n+<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>\n\\ No newline at end of file\ndiff --git a\/shells\/browser\/shared\/icons\/production.svg b\/shells\/browser\/shared\/icons\/production.svg\nnew file mode 100644\nindex 0000000000..1e974f5131\n--- \/dev\/null\n+++ b\/shells\/browser\/shared\/icons\/production.svg\n@@ -0,0 +1 @@\n+<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>\n\\ No newline at end of file\ndiff --git a\/shells\/browser\/shared\/main.html b\/shells\/browser\/shared\/main.html\nnew file mode 100644\nindex 0000000000..f1c96d4a7a\n--- \/dev\/null\n+++ b\/shells\/browser\/shared\/main.html\n@@ -0,0 +1,9 @@\n+<!doctype html>\n+<html>\n+ <head>\n+ <meta charset=\"utf-8\">\n+ <script src=\".\/build\/main.js\"><\/script>\n+ <\/head>\n+ <body>\n+ <\/body>\n+<\/html>\ndiff --git a\/shells\/browser\/shared\/panel.html b\/shells\/browser\/shared\/panel.html\nnew file mode 100644\nindex 0000000000..60fd1bdf13\n--- \/dev\/null\n+++ b\/shells\/browser\/shared\/panel.html\n@@ -0,0 +1,32 @@\n+<!doctype html>\n+<html style=\"display: flex\">\n+ <head>\n+ <meta charset=\"utf8\">\n+ <style>\n+ html {\n+ display: flex;\n+ }\n+ body {\n+ margin: 0;\n+ padding: 0;\n+ flex: 1;\n+ display: flex;\n+ }\n+ #container {\n+ display: flex;\n+ flex: 1;\n+ width: 100%;\n+ position: fixed;\n+ top: 0;\n+ left: 0;\n+ right: 0;\n+ bottom: 0;\n+ }\n+ <\/style>\n+ <\/head>\n+ <body>\n+ \n+ <div id=\"container\">Unable to find React on the page.<\/div>\n+ <script src=\".\/build\/panel.js\"><\/script>\n+ <\/body>\n+<\/html>\ndiff --git a\/shells\/browser\/shared\/popups\/deadcode.html b\/shells\/browser\/shared\/popups\/deadcode.html\nnew file mode 100644\nindex 0000000000..5e74dc06c4\n--- \/dev\/null\n+++ b\/shells\/browser\/shared\/popups\/deadcode.html\n@@ -0,0 +1,32 @@\n+<script src=\"shared.js\"><\/script>\n+<style>\n+ html, body {\n+ font-size: 14px;\n+ min-width: 460px;\n+ min-height: 133px;\n+ }\n+\n+ body {\n+ margin: 8px;\n+ }\n+\n+ hr {\n+ width: 100%;\n+ }\n+<\/style>\n+<p>\n+ <b>This page includes an extra development build of React. 🚧<\/b>\n+<\/p>\n+<p>\n+ The React build on this page includes both development and production versions because dead code elimination has not been applied correctly.\n+ <br \/>\n+ <br \/>\n+ This makes its size larger, and causes React to run slower.\n+ <br \/>\n+ <br \/>\n+ 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.\n+<\/p>\n+<hr \/>\n+<p>\n+ Open the developer tools, and the React tab will appear to the right.\n+<\/p>\ndiff --git a\/shells\/browser\/shared\/popups\/development.html b\/shells\/browser\/shared\/popups\/development.html\nnew file mode 100644\nindex 0000000000..9c2089cc2f\n--- \/dev\/null\n+++ b\/shells\/browser\/shared\/popups\/development.html\n@@ -0,0 +1,28 @@\n+<script src=\"shared.js\"><\/script>\n+<style>\n+ html, body {\n+ font-size: 14px;\n+ min-width: 460px;\n+ min-height: 101px;\n+ }\n+\n+ body {\n+ margin: 8px;\n+ }\n+\n+ hr {\n+ width: 100%;\n+ }\n+<\/style>\n+<p>\n+ <b>This page is using the development build of React. 🚧<\/b>\n+<\/p>\n+<p>\n+ Note that the development build is not suitable for production.\n+ <br \/>\n+ 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.\n+<\/p>\n+<hr \/>\n+<p>\n+ Open the developer tools, and the React tab will appear to the right.\n+<\/p>\ndiff --git a\/shells\/browser\/shared\/popups\/disabled.html b\/shells\/browser\/shared\/popups\/disabled.html\nnew file mode 100644\nindex 0000000000..a89b178d49\n--- \/dev\/null\n+++ b\/shells\/browser\/shared\/popups\/disabled.html\n@@ -0,0 +1,21 @@\n+<script src=\"shared.js\"><\/script>\n+<style>\n+ html, body {\n+ font-size: 14px;\n+ min-width: 410px;\n+ min-height: 33px;\n+ }\n+\n+ body {\n+ margin: 8px;\n+ }\n+\n+ hr {\n+ width: 100%;\n+ }\n+<\/style>\n+<p>\n+ <b>This page doesn’t appear to be using React.<\/b>\n+ <br \/>\n+ 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>.\n+<\/p>\ndiff --git a\/shells\/browser\/shared\/popups\/outdated.html b\/shells\/browser\/shared\/popups\/outdated.html\nnew file mode 100644\nindex 0000000000..a6ec12bcaf\n--- \/dev\/null\n+++ b\/shells\/browser\/shared\/popups\/outdated.html\n@@ -0,0 +1,29 @@\n+<script src=\"shared.js\"><\/script>\n+<style>\n+ html, body {\n+ font-size: 14px;\n+ min-width: 460px;\n+ min-height: 117px;\n+ }\n+\n+ body {\n+ margin: 8px;\n+ }\n+\n+ hr {\n+ width: 100%;\n+ }\n+<\/style>\n+<p>\n+ <b>This page is using an outdated version of React. ⌛<\/b>\n+<\/p>\n+<p>\n+ We recommend updating React to ensure that you receive important bugfixes and performance improvements.\n+ <br \/>\n+ <br \/>\n+ You can find the upgrade instructions on the <a href=\"https:\/\/facebook.github.io\/react\/blog\/\">React blog<\/a>.\n+<\/p>\n+<hr \/>\n+<p>\n+ Open the developer tools, and the React tab will appear to the right.\n+<\/p>\ndiff --git a\/shells\/browser\/shared\/popups\/production.html b\/shells\/browser\/shared\/popups\/production.html\nnew file mode 100644\nindex 0000000000..1b65eb5b21\n--- \/dev\/null\n+++ b\/shells\/browser\/shared\/popups\/production.html\n@@ -0,0 +1,21 @@\n+<script src=\"shared.js\"><\/script>\n+<style>\n+ html, body {\n+ font-size: 14px;\n+ min-width: 460px;\n+ min-height: 39px;\n+ }\n+\n+ body {\n+ margin: 8px;\n+ }\n+\n+ hr {\n+ width: 100%;\n+ }\n+<\/style>\n+<p>\n+ <b>This page is using the production build of React. ✅<\/b>\n+ <br \/>\n+ Open the developer tools, and the React tab will appear to the right.\n+<\/p>\ndiff --git a\/shells\/browser\/shared\/popups\/shared.js b\/shells\/browser\/shared\/popups\/shared.js\nnew file mode 100644\nindex 0000000000..130f1f457e\n--- \/dev\/null\n+++ b\/shells\/browser\/shared\/popups\/shared.js\n@@ -0,0 +1,22 @@\n+\/* globals chrome *\/\n+\n+document.addEventListener('DOMContentLoaded', function() {\n+ \/\/ Make links work\n+ const links = document.getElementsByTagName('a');\n+ for (let i = 0; i < links.length; i++) {\n+ (function() {\n+ const ln = links[i];\n+ const location = ln.href;\n+ ln.onclick = function() {\n+ chrome.tabs.create({ active: true, url: location });\n+ };\n+ })();\n+ }\n+\n+ \/\/ Work around https:\/\/bugs.chromium.org\/p\/chromium\/issues\/detail?id=428044\n+ document.body.style.opacity = 0;\n+ document.body.style.transition = 'opacity ease-out .4s';\n+ requestAnimationFrame(function() {\n+ document.body.style.opacity = 1;\n+ });\n+});\ndiff --git a\/shells\/browser\/shared\/popups\/unminified.html b\/shells\/browser\/shared\/popups\/unminified.html\nnew file mode 100644\nindex 0000000000..553c9ac6ac\n--- \/dev\/null\n+++ b\/shells\/browser\/shared\/popups\/unminified.html\n@@ -0,0 +1,31 @@\n+<script src=\"shared.js\"><\/script>\n+<style>\n+ html, body {\n+ font-size: 14px;\n+ min-width: 460px;\n+ min-height: 133px;\n+ }\n+\n+ body {\n+ margin: 8px;\n+ }\n+\n+ hr {\n+ width: 100%;\n+ }\n+<\/style>\n+<p>\n+ <b>This page is using an unminified build of React. 🚧<\/b>\n+<\/p>\n+<p>\n+ The React build on this page appears to be unminified.\n+ <br \/>\n+ This makes its size larger, and causes React to run slower.\n+ <br \/>\n+ <br \/>\n+ Make sure to <a href=\"https:\/\/facebook.github.io\/react\/docs\/optimizing-performance.html#use-the-production-build\">set up minification<\/a> before deployment.\n+<\/p>\n+<hr \/>\n+<p>\n+ Open the developer tools, and the React tab will appear to the right.\n+<\/p>\ndiff --git a\/shells\/browser\/shared\/src\/backend.js b\/shells\/browser\/shared\/src\/backend.js\nnew file mode 100644\nindex 0000000000..c8cee150d8\n--- \/dev\/null\n+++ b\/shells\/browser\/shared\/src\/backend.js\n@@ -0,0 +1,77 @@\n+\/\/ Do not use imports or top-level requires here!\n+\/\/ Running module factories is intentionally delayed until we know the hook exists.\n+\/\/ This is to avoid issues like: https:\/\/github.com\/facebook\/react-devtools\/issues\/1039\n+\n+\/** @flow *\/\n+\n+function welcome(event) {\n+ if (\n+ event.source !== window ||\n+ event.data.source !== 'react-devtools-content-script'\n+ ) {\n+ return;\n+ }\n+\n+ window.removeEventListener('message', welcome);\n+\n+ setup(window.__REACT_DEVTOOLS_GLOBAL_HOOK__);\n+}\n+\n+window.addEventListener('message', welcome);\n+\n+function setup(hook) {\n+ const Agent = require('src\/backend\/agent').default;\n+ const Bridge = require('src\/bridge').default;\n+ const { initBackend } = require('src\/backend');\n+ const setupNativeStyleEditor = require('src\/backend\/NativeStyleEditor\/setupNativeStyleEditor')\n+ .default;\n+\n+ const bridge = new Bridge({\n+ listen(fn) {\n+ const listener = event => {\n+ if (\n+ event.source !== window ||\n+ !event.data ||\n+ event.data.source !== 'react-devtools-content-script' ||\n+ !event.data.payload\n+ ) {\n+ return;\n+ }\n+ fn(event.data.payload);\n+ };\n+ window.addEventListener('message', listener);\n+ return () => {\n+ window.removeEventListener('message', listener);\n+ };\n+ },\n+ send(event: string, payload: any, transferable?: Array<any>) {\n+ window.postMessage(\n+ {\n+ source: 'react-devtools-bridge',\n+ payload: { event, payload },\n+ },\n+ '*',\n+ transferable\n+ );\n+ },\n+ });\n+\n+ const agent = new Agent(bridge);\n+ agent.addListener('shutdown', () => {\n+ \/\/ If we received 'shutdown' from `agent`, we assume the `bridge` is already shutting down,\n+ \/\/ and that caused the 'shutdown' event on the `agent`, so we don't need to call `bridge.shutdown()` here.\n+ hook.emit('shutdown');\n+ });\n+\n+ initBackend(hook, agent, window);\n+\n+ \/\/ Setup React Native style editor if a renderer like react-native-web has injected it.\n+ if (!!hook.resolveRNStyle) {\n+ setupNativeStyleEditor(\n+ bridge,\n+ agent,\n+ hook.resolveRNStyle,\n+ hook.nativeStyleEditorValidAttributes\n+ );\n+ }\n+}\ndiff --git a\/shells\/browser\/shared\/src\/background.js b\/shells\/browser\/shared\/src\/background.js\nnew file mode 100644\nindex 0000000000..e22071b3aa\n--- \/dev\/null\n+++ b\/shells\/browser\/shared\/src\/background.js\n@@ -0,0 +1,113 @@\n+\/* global chrome *\/\n+\n+const ports = {};\n+\n+const IS_FIREFOX = navigator.userAgent.indexOf('Firefox') >= 0;\n+\n+chrome.runtime.onConnect.addListener(function(port) {\n+ let tab = null;\n+ let name = null;\n+ if (isNumeric(port.name)) {\n+ tab = port.name;\n+ name = 'devtools';\n+ installContentScript(+port.name);\n+ } else {\n+ tab = port.sender.tab.id;\n+ name = 'content-script';\n+ }\n+\n+ if (!ports[tab]) {\n+ ports[tab] = {\n+ devtools: null,\n+ 'content-script': null,\n+ };\n+ }\n+ ports[tab][name] = port;\n+\n+ if (ports[tab].devtools && ports[tab]['content-script']) {\n+ doublePipe(ports[tab].devtools, ports[tab]['content-script']);\n+ }\n+});\n+\n+function isNumeric(str: string): boolean {\n+ return +str + '' === str;\n+}\n+\n+function installContentScript(tabId: number) {\n+ chrome.tabs.executeScript(\n+ tabId,\n+ { file: '\/build\/contentScript.js' },\n+ function() {}\n+ );\n+}\n+\n+function doublePipe(one, two) {\n+ one.onMessage.addListener(lOne);\n+ function lOne(message) {\n+ two.postMessage(message);\n+ }\n+ two.onMessage.addListener(lTwo);\n+ function lTwo(message) {\n+ one.postMessage(message);\n+ }\n+ function shutdown() {\n+ one.onMessage.removeListener(lOne);\n+ two.onMessage.removeListener(lTwo);\n+ one.disconnect();\n+ two.disconnect();\n+ }\n+ one.onDisconnect.addListener(shutdown);\n+ two.onDisconnect.addListener(shutdown);\n+}\n+\n+function setIconAndPopup(reactBuildType, tabId) {\n+ chrome.browserAction.setIcon({\n+ tabId: tabId,\n+ path: {\n+ '16': 'icons\/16-' + reactBuildType + '.png',\n+ '32': 'icons\/32-' + reactBuildType + '.png',\n+ '48': 'icons\/48-' + reactBuildType + '.png',\n+ '128': 'icons\/128-' + reactBuildType + '.png',\n+ },\n+ });\n+ chrome.browserAction.setPopup({\n+ tabId: tabId,\n+ popup: 'popups\/' + reactBuildType + '.html',\n+ });\n+}\n+\n+\/\/ Listen to URL changes on the active tab and reset the DevTools icon.\n+\/\/ This prevents non-disabled icons from sticking in Firefox.\n+\/\/ Don't listen to this event in Chrome though.\n+\/\/ It fires more frequently, often after onMessage() has been called.\n+if (IS_FIREFOX) {\n+ chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {\n+ if (tab.active && changeInfo.status === 'loading') {\n+ setIconAndPopup('disabled', tabId);\n+ }\n+ });\n+}\n+\n+chrome.runtime.onMessage.addListener((request, sender) => {\n+ if (sender.tab) {\n+ \/\/ This is sent from the hook content script.\n+ \/\/ It tells us a renderer has attached.\n+ if (request.hasDetectedReact) {\n+ \/\/ We use browserAction instead of pageAction because this lets us\n+ \/\/ display a custom default popup when React is *not* detected.\n+ \/\/ It is specified in the manifest.\n+ let reactBuildType = request.reactBuildType;\n+ if (sender.url.indexOf('facebook.github.io\/react') !== -1) {\n+ \/\/ Cheat: We use the development version on the website because\n+ \/\/ it is better for interactive examples. However we're going\n+ \/\/ to get misguided bug reports if the extension highlights it\n+ \/\/ as using the dev version. We're just going to special case\n+ \/\/ our own documentation and cheat. It is acceptable to use dev\n+ \/\/ version of React in React docs, but not in any other case.\n+ reactBuildType = 'production';\n+ }\n+\n+ setIconAndPopup(reactBuildType, sender.tab.id);\n+ }\n+ }\n+});\ndiff --git a\/shells\/browser\/shared\/src\/contentScript.js b\/shells\/browser\/shared\/src\/contentScript.js\nnew file mode 100644\nindex 0000000000..68a44e21af\n--- \/dev\/null\n+++ b\/shells\/browser\/shared\/src\/contentScript.js\n@@ -0,0 +1,77 @@\n+\/* global chrome *\/\n+\n+let backendDisconnected: boolean = false;\n+let backendInitialized: boolean = false;\n+\n+function sayHelloToBackend() {\n+ window.postMessage(\n+ {\n+ source: 'react-devtools-content-script',\n+ hello: true,\n+ },\n+ '*'\n+ );\n+}\n+\n+function handleMessageFromDevtools(message) {\n+ window.postMessage(\n+ {\n+ source: 'react-devtools-content-script',\n+ payload: message,\n+ },\n+ '*'\n+ );\n+}\n+\n+function handleMessageFromPage(evt) {\n+ if (\n+ evt.source === window &&\n+ evt.data &&\n+ evt.data.source === 'react-devtools-bridge'\n+ ) {\n+ backendInitialized = true;\n+\n+ port.postMessage(evt.data.payload);\n+ }\n+}\n+\n+function handleDisconnect() {\n+ backendDisconnected = true;\n+\n+ window.removeEventListener('message', handleMessageFromPage);\n+\n+ window.postMessage(\n+ {\n+ source: 'react-devtools-content-script',\n+ payload: {\n+ type: 'event',\n+ event: 'shutdown',\n+ },\n+ },\n+ '*'\n+ );\n+}\n+\n+\/\/ proxy from main page to devtools (via the background page)\n+var port = chrome.runtime.connect({\n+ name: 'content-script',\n+});\n+port.onMessage.addListener(handleMessageFromDevtools);\n+port.onDisconnect.addListener(handleDisconnect);\n+\n+window.addEventListener('message', handleMessageFromPage);\n+\n+sayHelloToBackend();\n+\n+\/\/ The backend waits to install the global hook until notified by the content script.\n+\/\/ In the event of a page reload, the content script might be loaded before the backend is injected.\n+\/\/ Because of this we need to poll the backend until it has been initialized.\n+if (!backendInitialized) {\n+ const intervalID = setInterval(() => {\n+ if (backendInitialized || backendDisconnected) {\n+ clearInterval(intervalID);\n+ } else {\n+ sayHelloToBackend();\n+ }\n+ }, 500);\n+}\ndiff --git a\/shells\/browser\/shared\/src\/inject.js b\/shells\/browser\/shared\/src\/inject.js\nnew file mode 100644\nindex 0000000000..938e2cf7eb\n--- \/dev\/null\n+++ b\/shells\/browser\/shared\/src\/inject.js\n@@ -0,0 +1,24 @@\n+\/* global chrome *\/\n+\n+export default function inject(scriptName: string, done: ?Function) {\n+ const source = `\n+ \/\/ the prototype stuff is in case document.createElement has been modified\n+ (function () {\n+ var script = document.constructor.prototype.createElement.call(document, 'script');\n+ script.src = \"${scriptName}\";\n+ script.charset = \"utf-8\";\n+ document.documentElement.appendChild(script);\n+ script.parentNode.removeChild(script);\n+ })()\n+ `;\n+\n+ chrome.devtools.inspectedWindow.eval(source, function(response, error) {\n+ if (error) {\n+ console.log(error);\n+ }\n+\n+ if (typeof done === 'function') {\n+ done();\n+ }\n+ });\n+}\ndiff --git a\/shells\/browser\/shared\/src\/injectGlobalHook.js b\/shells\/browser\/shared\/src\/injectGlobalHook.js\nnew file mode 100644\nindex 0000000000..2bdc7c8a7f\n--- \/dev\/null\n+++ b\/shells\/browser\/shared\/src\/injectGlobalHook.js\n@@ -0,0 +1,89 @@\n+\/* global chrome *\/\n+\n+import nullthrows from 'nullthrows';\n+import { installHook } from 'src\/hook';\n+import { SESSION_STORAGE_RELOAD_AND_PROFILE_KEY } from 'src\/constants';\n+import { sessionStorageGetItem } from 'src\/storage';\n+\n+function injectCode(code) {\n+ const script = document.createElement('script');\n+ script.textContent = code;\n+\n+ \/\/ This script runs before the <head> element is created,\n+ \/\/ so we add the script to <html> instead.\n+ nullthrows(document.documentElement).appendChild(script);\n+ nullthrows(script.parentNode).removeChild(script);\n+}\n+\n+let lastDetectionResult;\n+\n+\/\/ We want to detect when a renderer attaches, and notify the \"background page\"\n+\/\/ (which is shared between tabs and can highlight the React icon).\n+\/\/ Currently we are in \"content script\" context, so we can't listen to the hook directly\n+\/\/ (it will be injected directly into the page).\n+\/\/ So instead, the hook will use postMessage() to pass message to us here.\n+\/\/ And when this happens, we'll send a message to the \"background page\".\n+window.addEventListener('message', function(evt) {\n+ if (\n+ evt.source === window &&\n+ evt.data &&\n+ evt.data.source === 'react-devtools-detector'\n+ ) {\n+ lastDetectionResult = {\n+ hasDetectedReact: true,\n+ reactBuildType: evt.data.reactBuildType,\n+ };\n+ chrome.runtime.sendMessage(lastDetectionResult);\n+ }\n+});\n+\n+\/\/ NOTE: Firefox WebExtensions content scripts are still alive and not re-injected\n+\/\/ while navigating the history to a document that has not been destroyed yet,\n+\/\/ replay the last detection result if the content script is active and the\n+\/\/ document has been hidden and shown again.\n+window.addEventListener('pageshow', function(evt) {\n+ if (!lastDetectionResult || evt.target !== window.document) {\n+ return;\n+ }\n+ chrome.runtime.sendMessage(lastDetectionResult);\n+});\n+\n+const detectReact = `\n+window.__REACT_DEVTOOLS_GLOBAL_HOOK__.on('renderer', function(evt) {\n+ window.postMessage({\n+ source: 'react-devtools-detector',\n+ reactBuildType: evt.reactBuildType,\n+ }, '*');\n+});\n+`;\n+const saveNativeValues = `\n+window.__REACT_DEVTOOLS_GLOBAL_HOOK__.nativeObjectCreate = Object.create;\n+window.__REACT_DEVTOOLS_GLOBAL_HOOK__.nativeMap = Map;\n+window.__REACT_DEVTOOLS_GLOBAL_HOOK__.nativeWeakMap = WeakMap;\n+window.__REACT_DEVTOOLS_GLOBAL_HOOK__.nativeSet = Set;\n+`;\n+\n+\/\/ If we have just reloaded to profile, we need to inject the renderer interface before the app loads.\n+if (sessionStorageGetItem(SESSION_STORAGE_RELOAD_AND_PROFILE_KEY) === 'true') {\n+ const rendererURL = chrome.runtime.getURL('build\/renderer.js');\n+ let rendererCode;\n+\n+ \/\/ We need to inject in time to catch the initial mount.\n+ \/\/ This means we need to synchronously read the renderer code itself,\n+ \/\/ and synchronously inject it into the page.\n+ \/\/ There are very few ways to actually do this.\n+ \/\/ This seems to be the best approach.\n+ const request = new XMLHttpRequest();\n+ request.addEventListener('load', function() {\n+ rendererCode = this.responseText;\n+ });\n+ request.open('GET', rendererURL, false);\n+ request.send();\n+ injectCode(rendererCode);\n+}\n+\n+\/\/ Inject a `__REACT_DEVTOOLS_GLOBAL_HOOK__` global so that React can detect that the\n+\/\/ devtools are installed (and skip its suggestion to install the devtools).\n+injectCode(\n+ ';(' + installHook.toString() + '(window))' + saveNativeValues + detectReact\n+);\ndiff --git a\/shells\/browser\/shared\/src\/main.js b\/shells\/browser\/shared\/src\/main.js\nnew file mode 100644\nindex 0000000000..f4942e5f01\n--- \/dev\/null\n+++ b\/shells\/browser\/shared\/src\/main.js\n@@ -0,0 +1,316 @@\n+\/* global chrome *\/\n+\n+import { createElement } from 'react';\n+import { unstable_createRoot as createRoot, flushSync } from 'react-dom';\n+import Bridge from 'src\/bridge';\n+import Store from 'src\/devtools\/store';\n+import inject from '.\/inject';\n+import {\n+ createViewElementSource,\n+ getBrowserName,\n+ getBrowserTheme,\n+} from '.\/utils';\n+import { getSavedComponentFilters, getAppendComponentStack } from 'src\/utils';\n+import {\n+ localStorageGetItem,\n+ localStorageRemoveItem,\n+ localStorageSetItem,\n+} from 'src\/storage';\n+import DevTools from 'src\/devtools\/views\/DevTools';\n+\n+const LOCAL_STORAGE_SUPPORTS_PROFILING_KEY =\n+ 'React::DevTools::supportsProfiling';\n+\n+let panelCreated = false;\n+\n+\/\/ The renderer interface can't read saved component filters directly,\n+\/\/ because they are stored in localStorage within the context of the extension.\n+\/\/ Instead it relies on the extension to pass filters through.\n+function syncSavedPreferences() {\n+ const componentFilters = getSavedComponentFilters();\n+ chrome.devtools.inspectedWindow.eval(\n+ `window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = ${JSON.stringify(\n+ componentFilters\n+ )};`\n+ );\n+\n+ const appendComponentStack = getAppendComponentStack();\n+ chrome.devtools.inspectedWindow.eval(\n+ `window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = ${JSON.stringify(\n+ appendComponentStack\n+ )};`\n+ );\n+}\n+\n+syncSavedPreferences();\n+\n+function createPanelIfReactLoaded() {\n+ if (panelCreated) {\n+ return;\n+ }\n+\n+ chrome.devtools.inspectedWindow.eval(\n+ 'window.__REACT_DEVTOOLS_GLOBAL_HOOK__ && window.__REACT_DEVTOOLS_GLOBAL_HOOK__.renderers.size > 0',\n+ function(pageHasReact, error) {\n+ if (!pageHasReact || panelCreated) {\n+ return;\n+ }\n+\n+ panelCreated = true;\n+\n+ clearInterval(loadCheckInterval);\n+\n+ let bridge = null;\n+ let store = null;\n+\n+ let profilingData = null;\n+\n+ let componentsPortalContainer = null;\n+ let profilerPortalContainer = null;\n+\n+ let cloneStyleTags = null;\n+ let mostRecentOverrideTab = null;\n+ let render = null;\n+ let root = null;\n+\n+ const tabId = chrome.devtools.inspectedWindow.tabId;\n+\n+ function initBridgeAndStore() {\n+ const port = chrome.runtime.connect({\n+ name: '' + tabId,\n+ });\n+ \/\/ Looks like `port.onDisconnect` does not trigger on in-tab navigation like new URL or back\/forward navigation,\n+ \/\/ so it makes no sense to handle it here.\n+\n+ bridge = new Bridge({\n+ listen(fn) {\n+ const listener = message => fn(message);\n+ \/\/ Store the reference so that we unsubscribe from the same object.\n+ const portOnMessage = port.onMessage;\n+ portOnMessage.addListener(listener);\n+ return () => {\n+ portOnMessage.removeListener(listener);\n+ };\n+ },\n+ send(event: string, payload: any, transferable?: Array<any>) {\n+ port.postMessage({ event, payload }, transferable);\n+ },\n+ });\n+ bridge.addListener('reloadAppForProfiling', () => {\n+ localStorageSetItem(LOCAL_STORAGE_SUPPORTS_PROFILING_KEY, 'true');\n+ chrome.devtools.inspectedWindow.eval('window.location.reload();');\n+ });\n+ bridge.addListener('syncSelectionToNativeElementsPanel', () => {\n+ setBrowserSelectionFromReact();\n+ });\n+\n+ \/\/ This flag lets us tip the Store off early that we expect to be profiling.\n+ \/\/ This avoids flashing a temporary \"Profiling not supported\" message in the Profiler tab,\n+ \/\/ after a user has clicked the \"reload and profile\" button.\n+ let isProfiling = false;\n+ let supportsProfiling = false;\n+ if (\n+ localStorageGetItem(LOCAL_STORAGE_SUPPORTS_PROFILING_KEY) === 'true'\n+ ) {\n+ supportsProfiling = true;\n+ isProfiling = true;\n+ localStorageRemoveItem(LOCAL_STORAGE_SUPPORTS_PROFILING_KEY);\n+ }\n+\n+ store = new Store(bridge, {\n+ isProfiling,\n+ supportsReloadAndProfile: getBrowserName() === 'Chrome',\n+ supportsProfiling,\n+ });\n+ store.profilerStore.profilingData = profilingData;\n+\n+ \/\/ Initialize the backend only once the Store has been initialized.\n+ \/\/ Otherwise the Store may miss important initial tree op codes.\n+ inject(chrome.runtime.getURL('build\/backend.js'));\n+\n+ const viewElementSourceFunction = createViewElementSource(\n+ bridge,\n+ store\n+ );\n+\n+ root = createRoot(document.createElement('div'));\n+\n+ render = (overrideTab = mostRecentOverrideTab) => {\n+ mostRecentOverrideTab = overrideTab;\n+\n+ root.render(\n+ createElement(DevTools, {\n+ bridge,\n+ browserTheme: getBrowserTheme(),\n+ componentsPortalContainer,\n+ overrideTab,\n+ profilerPortalContainer,\n+ showTabBar: false,\n+ showWelcomeToTheNewDevToolsDialog: true,\n+ store,\n+ viewElementSourceFunction,\n+ })\n+ );\n+ };\n+\n+ render();\n+ }\n+\n+ cloneStyleTags = () => {\n+ const linkTags = [];\n+ for (let linkTag of document.getElementsByTagName('link')) {\n+ if (linkTag.rel === 'stylesheet') {\n+ const newLinkTag = document.createElement('link');\n+ for (let attribute of linkTag.attributes) {\n+ newLinkTag.setAttribute(attribute.nodeName, attribute.nodeValue);\n+ }\n+ linkTags.push(newLinkTag);\n+ }\n+ }\n+ return linkTags;\n+ };\n+\n+ initBridgeAndStore();\n+\n+ function ensureInitialHTMLIsCleared(container) {\n+ if (container._hasInitialHTMLBeenCleared) {\n+ return;\n+ }\n+ container.innerHTML = '';\n+ container._hasInitialHTMLBeenCleared = true;\n+ }\n+\n+ function setBrowserSelectionFromReact() {\n+ \/\/ This is currently only called on demand when you press \"view DOM\".\n+ \/\/ In the future, if Chrome adds an inspect() that doesn't switch tabs,\n+ \/\/ we could make this happen automatically when you select another component.\n+ chrome.devtools.inspectedWindow.eval(\n+ '(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 !== $0) ?' +\n+ '(inspect(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0), true) :' +\n+ 'false',\n+ (didSelectionChange, error) => {\n+ if (error) {\n+ console.error(error);\n+ }\n+ }\n+ );\n+ }\n+\n+ function setReactSelectionFromBrowser() {\n+ \/\/ When the user chooses a different node in the browser Elements tab,\n+ \/\/ copy it over to the hook object so that we can sync the selection.\n+ chrome.devtools.inspectedWindow.eval(\n+ '(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 !== $0) ?' +\n+ '(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 = $0, true) :' +\n+ 'false',\n+ (didSelectionChange, error) => {\n+ if (error) {\n+ console.error(error);\n+ } else if (didSelectionChange) {\n+ \/\/ Remember to sync the selection next time we show Components tab.\n+ needsToSyncElementSelection = true;\n+ }\n+ }\n+ );\n+ }\n+\n+ setReactSelectionFromBrowser();\n+ chrome.devtools.panels.elements.onSelectionChanged.addListener(() => {\n+ setReactSelectionFromBrowser();\n+ });\n+\n+ let currentPanel = null;\n+ let needsToSyncElementSelection = false;\n+\n+ chrome.devtools.panels.create('⚛ Components', '', 'panel.html', panel => {\n+ panel.onShown.addListener(panel => {\n+ if (needsToSyncElementSelection) {\n+ needsToSyncElementSelection = false;\n+ bridge.send('syncSelectionFromNativeElementsPanel');\n+ }\n+\n+ if (currentPanel === panel) {\n+ return;\n+ }\n+\n+ currentPanel = panel;\n+ componentsPortalContainer = panel.container;\n+\n+ if (componentsPortalContainer != null) {\n+ ensureInitialHTMLIsCleared(componentsPortalContainer);\n+ render('components');\n+ panel.injectStyles(cloneStyleTags);\n+ }\n+ });\n+ panel.onHidden.addListener(() => {\n+ \/\/ TODO: Stop highlighting and stuff.\n+ });\n+ });\n+\n+ chrome.devtools.panels.create('⚛ Profiler', '', 'panel.html', panel => {\n+ panel.onShown.addListener(panel => {\n+ if (currentPanel === panel) {\n+ return;\n+ }\n+\n+ currentPanel = panel;\n+ profilerPortalContainer = panel.container;\n+\n+ if (profilerPortalContainer != null) {\n+ ensureInitialHTMLIsCleared(profilerPortalContainer);\n+ render('profiler');\n+ panel.injectStyles(cloneStyleTags);\n+ }\n+ });\n+ });\n+\n+ chrome.devtools.network.onNavigated.removeListener(checkPageForReact);\n+\n+ \/\/ Shutdown bridge before a new page is loaded.\n+ chrome.webNavigation.onBeforeNavigate.addListener(\n+ function onBeforeNavigate(details) {\n+ \/\/ Ignore navigation events from other tabs (or from within frames).\n+ if (details.tabId !== tabId || details.frameId !== 0) {\n+ return;\n+ }\n+\n+ \/\/ `bridge.shutdown()` will remove all listeners we added, so we don't have to.\n+ bridge.shutdown();\n+\n+ profilingData = store.profilerStore.profilingData;\n+ }\n+ );\n+\n+ \/\/ Re-initialize DevTools panel when a new page is loaded.\n+ chrome.devtools.network.onNavigated.addListener(function onNavigated() {\n+ \/\/ Re-initialize saved filters on navigation,\n+ \/\/ since global values stored on window get reset in this case.\n+ syncSavedPreferences();\n+\n+ \/\/ It's easiest to recreate the DevTools panel (to clean up potential stale state).\n+ \/\/ We can revisit this in the future as a small optimization.\n+ flushSync(() => {\n+ root.unmount(() => {\n+ initBridgeAndStore();\n+ });\n+ });\n+ });\n+ }\n+ );\n+}\n+\n+\/\/ Load (or reload) the DevTools extension when the user navigates to a new page.\n+function checkPageForReact() {\n+ syncSavedPreferences();\n+ createPanelIfReactLoaded();\n+}\n+\n+chrome.devtools.network.onNavigated.addListener(checkPageForReact);\n+\n+\/\/ Check to see if React has loaded once per second in case React is added\n+\/\/ after page load\n+const loadCheckInterval = setInterval(function() {\n+ createPanelIfReactLoaded();\n+}, 1000);\n+\n+createPanelIfReactLoaded();\ndiff --git a\/shells\/browser\/shared\/src\/panel.js b\/shells\/browser\/shared\/src\/panel.js\nnew file mode 100644\nindex 0000000000..f84ac11beb\n--- \/dev\/null\n+++ b\/shells\/browser\/shared\/src\/panel.js\n@@ -0,0 +1,18 @@\n+\/\/ Portal target container.\n+window.container = document.getElementById('container');\n+\n+let hasInjectedStyles = false;\n+\n+\/\/ DevTools styles are injected into the top-level document head (where the main React app is rendered).\n+\/\/ This method copies those styles to the child window where each panel (e.g. Elements, Profiler) is portaled.\n+window.injectStyles = getLinkTags => {\n+ if (!hasInjectedStyles) {\n+ hasInjectedStyles = true;\n+\n+ const linkTags = getLinkTags();\n+\n+ for (let linkTag of linkTags) {\n+ document.head.appendChild(linkTag);\n+ }\n+ }\n+};\ndiff --git a\/shells\/browser\/shared\/src\/renderer.js b\/shells\/browser\/shared\/src\/renderer.js\nnew file mode 100644\nindex 0000000000..0a0e74808e\n--- \/dev\/null\n+++ b\/shells\/browser\/shared\/src\/renderer.js\n@@ -0,0 +1,26 @@\n+\/**\n+ * In order to support reload-and-profile functionality, the renderer needs to be injected before any other scripts.\n+ * Since it is a complex file (with imports) we can't just toString() it like we do with the hook itself,\n+ * So this entry point (one of the web_accessible_resources) provcides a way to eagerly inject it.\n+ * The hook will look for the presence of a global __REACT_DEVTOOLS_ATTACH__ and attach an injected renderer early.\n+ * The normal case (not a reload-and-profile) will not make use of this entry point though.\n+ *\n+ * @flow\n+ *\/\n+\n+import { attach } from 'src\/backend\/renderer';\n+\n+Object.defineProperty(\n+ window,\n+ '__REACT_DEVTOOLS_ATTACH__',\n+ ({\n+ enumerable: false,\n+ \/\/ This property needs to be configurable to allow third-party integrations\n+ \/\/ to attach their own renderer. Note that using third-party integrations\n+ \/\/ is not officially supported. Use at your own risk.\n+ configurable: true,\n+ get() {\n+ return attach;\n+ },\n+ }: Object)\n+);\ndiff --git a\/shells\/browser\/shared\/src\/utils.js b\/shells\/browser\/shared\/src\/utils.js\nnew file mode 100644\nindex 0000000000..c419244596\n--- \/dev\/null\n+++ b\/shells\/browser\/shared\/src\/utils.js\n@@ -0,0 +1,51 @@\n+\/* global chrome *\/\n+\n+const IS_CHROME = navigator.userAgent.indexOf('Firefox') < 0;\n+\n+export function createViewElementSource(bridge: Bridge, store: Store) {\n+ return function viewElementSource(id) {\n+ const rendererID = store.getRendererIDForElement(id);\n+ if (rendererID != null) {\n+ \/\/ Ask the renderer interface to determine the component function,\n+ \/\/ and store it as a global variable on the window\n+ bridge.send('viewElementSource', { id, rendererID });\n+\n+ setTimeout(() => {\n+ \/\/ Ask Chrome to display the location of the component function,\n+ \/\/ assuming the renderer found one.\n+ chrome.devtools.inspectedWindow.eval(`\n+ if (window.$type != null) {\n+ inspect(window.$type);\n+ }\n+ `);\n+ }, 100);\n+ }\n+ };\n+}\n+\n+export type BrowserName = 'Chrome' | 'Firefox';\n+\n+export function getBrowserName(): BrowserName {\n+ return IS_CHROME ? 'Chrome' : 'Firefox';\n+}\n+\n+export type BrowserTheme = 'dark' | 'light';\n+\n+export function getBrowserTheme(): BrowserTheme {\n+ if (IS_CHROME) {\n+ \/\/ chrome.devtools.panels added in Chrome 18.\n+ \/\/ chrome.devtools.panels.themeName added in Chrome 54.\n+ return chrome.devtools.panels.themeName === 'dark' ? 'dark' : 'light';\n+ } else {\n+ \/\/ chrome.devtools.panels.themeName added in Firefox 55.\n+ \/\/ https:\/\/developer.mozilla.org\/en-US\/Add-ons\/WebExtensions\/API\/devtools.panels\/themeName\n+ if (chrome.devtools && chrome.devtools.panels) {\n+ switch (chrome.devtools.panels.themeName) {\n+ case 'dark':\n+ return 'dark';\n+ default:\n+ return 'light';\n+ }\n+ }\n+ }\n+}\ndiff --git a\/shells\/browser\/shared\/webpack.backend.js b\/shells\/browser\/shared\/webpack.backend.js\nnew file mode 100644\nindex 0000000000..cf034bccef\n--- \/dev\/null\n+++ b\/shells\/browser\/shared\/webpack.backend.js\n@@ -0,0 +1,50 @@\n+const { resolve } = require('path');\n+const { DefinePlugin } = require('webpack');\n+const { getGitHubURL, getVersionString } = require('..\/..\/utils');\n+\n+const NODE_ENV = process.env.NODE_ENV;\n+if (!NODE_ENV) {\n+ console.error('NODE_ENV not set');\n+ process.exit(1);\n+}\n+\n+const __DEV__ = NODE_ENV === 'development';\n+\n+const GITHUB_URL = getGitHubURL();\n+const DEVTOOLS_VERSION = getVersionString();\n+\n+module.exports = {\n+ mode: __DEV__ ? 'development' : 'production',\n+ devtool: __DEV__ ? 'cheap-module-eval-source-map' : false,\n+ entry: {\n+ backend: '.\/src\/backend.js',\n+ },\n+ output: {\n+ path: __dirname + '\/build',\n+ filename: '[name].js',\n+ },\n+ resolve: {\n+ alias: {\n+ src: resolve(__dirname, '..\/..\/..\/src'),\n+ },\n+ },\n+ plugins: [\n+ new DefinePlugin({\n+ __DEV__: true,\n+ __TEST__: false,\n+ 'process.env.DEVTOOLS_VERSION': `\"${DEVTOOLS_VERSION}\"`,\n+ 'process.env.GITHUB_URL': `\"${GITHUB_URL}\"`,\n+ }),\n+ ],\n+ module: {\n+ rules: [\n+ {\n+ test: \/\\.js$\/,\n+ loader: 'babel-loader',\n+ options: {\n+ configFile: resolve(__dirname, '..\/..\/..\/babel.config.js'),\n+ },\n+ },\n+ ],\n+ },\n+};\ndiff --git a\/shells\/browser\/shared\/webpack.config.js b\/shells\/browser\/shared\/webpack.config.js\nnew file mode 100644\nindex 0000000000..23342ca46c\n--- \/dev\/null\n+++ b\/shells\/browser\/shared\/webpack.config.js\n@@ -0,0 +1,72 @@\n+const { resolve } = require('path');\n+const { DefinePlugin } = require('webpack');\n+const { getGitHubURL, getVersionString } = require('..\/..\/utils');\n+\n+const NODE_ENV = process.env.NODE_ENV;\n+if (!NODE_ENV) {\n+ console.error('NODE_ENV not set');\n+ process.exit(1);\n+}\n+\n+const __DEV__ = NODE_ENV === 'development';\n+\n+const GITHUB_URL = getGitHubURL();\n+const DEVTOOLS_VERSION = getVersionString();\n+\n+module.exports = {\n+ mode: __DEV__ ? 'development' : 'production',\n+ devtool: __DEV__ ? 'cheap-module-eval-source-map' : false,\n+ entry: {\n+ background: '.\/src\/background.js',\n+ contentScript: '.\/src\/contentScript.js',\n+ injectGlobalHook: '.\/src\/injectGlobalHook.js',\n+ main: '.\/src\/main.js',\n+ panel: '.\/src\/panel.js',\n+ renderer: '.\/src\/renderer.js',\n+ },\n+ output: {\n+ path: __dirname + '\/build',\n+ filename: '[name].js',\n+ },\n+ resolve: {\n+ alias: {\n+ src: resolve(__dirname, '..\/..\/..\/src'),\n+ },\n+ },\n+ plugins: [\n+ new DefinePlugin({\n+ __DEV__: false,\n+ __TEST__: false,\n+ 'process.env.DEVTOOLS_VERSION': `\"${DEVTOOLS_VERSION}\"`,\n+ 'process.env.GITHUB_URL': `\"${GITHUB_URL}\"`,\n+ 'process.env.NODE_ENV': `\"${NODE_ENV}\"`,\n+ }),\n+ ],\n+ module: {\n+ rules: [\n+ {\n+ test: \/\\.js$\/,\n+ loader: 'babel-loader',\n+ options: {\n+ configFile: resolve(__dirname, '..\/..\/..\/babel.config.js'),\n+ },\n+ },\n+ {\n+ test: \/\\.css$\/,\n+ use: [\n+ {\n+ loader: 'style-loader',\n+ },\n+ {\n+ loader: 'css-loader',\n+ options: {\n+ sourceMap: true,\n+ modules: true,\n+ localIdentName: '[local]___[hash:base64:5]',\n+ },\n+ },\n+ ],\n+ },\n+ ],\n+ },\n+};\ndiff --git a\/shells\/dev\/app\/DeeplyNestedComponents\/index.js b\/shells\/dev\/app\/DeeplyNestedComponents\/index.js\nnew file mode 100644\nindex 0000000000..ad4468d2eb\n--- \/dev\/null\n+++ b\/shells\/dev\/app\/DeeplyNestedComponents\/index.js\n@@ -0,0 +1,35 @@\n+\/\/ @flow\n+\n+import React, { Fragment } from 'react';\n+\n+function wrapWithHoc(Component, index) {\n+ function HOC() {\n+ return <Component \/>;\n+ }\n+ HOC.displayName = `withHoc${index}(${Component.displayName ||\n+ Component.name})`;\n+ return HOC;\n+}\n+\n+function wrapWithNested(Component, times) {\n+ for (let i = 0; i < times; i++) {\n+ Component = wrapWithHoc(Component, i);\n+ }\n+\n+ return Component;\n+}\n+\n+function Nested() {\n+ return <div>Deeply nested div<\/div>;\n+}\n+\n+const DeeplyNested = wrapWithNested(Nested, 100);\n+\n+export default function DeeplyNestedComponents() {\n+ return (\n+ <Fragment>\n+ <h1>Deeply nested component<\/h1>\n+ <DeeplyNested \/>\n+ <\/Fragment>\n+ );\n+}\ndiff --git a\/shells\/dev\/app\/EditableProps\/index.js b\/shells\/dev\/app\/EditableProps\/index.js\nnew file mode 100644\nindex 0000000000..f5a39fc92f\n--- \/dev\/null\n+++ b\/shells\/dev\/app\/EditableProps\/index.js\n@@ -0,0 +1,162 @@\n+\/\/ @flow\n+\n+import React, {\n+ createContext,\n+ Component,\n+ forwardRef,\n+ Fragment,\n+ memo,\n+ useCallback,\n+ useDebugValue,\n+ useEffect,\n+ useReducer,\n+ useState,\n+} from 'react';\n+\n+const initialData = { foo: 'FOO', bar: 'BAR' };\n+\n+function reducer(state, action) {\n+ switch (action.type) {\n+ case 'swap':\n+ return { foo: state.bar, bar: state.foo };\n+ default:\n+ throw new Error();\n+ }\n+}\n+\n+type StatefulFunctionProps = {| name: string |};\n+\n+function StatefulFunction({ name }: StatefulFunctionProps) {\n+ const [count, updateCount] = useState(0);\n+ const debouncedCount = useDebounce(count, 1000);\n+ const handleUpdateCountClick = useCallback(() => updateCount(count + 1), [\n+ count,\n+ ]);\n+\n+ const [data, dispatch] = useReducer(reducer, initialData);\n+ const handleUpdateReducerClick = useCallback(\n+ () => dispatch({ type: 'swap' }),\n+ []\n+ );\n+\n+ return (\n+ <ul>\n+ <li>Name: {name}<\/li>\n+ <li>\n+ <button onClick={handleUpdateCountClick}>\n+ Debounced count: {debouncedCount}\n+ <\/button>\n+ <\/li>\n+ <li>\n+ Reducer state: foo \"{data.foo}\", bar \"{data.bar}\"\n+ <\/li>\n+ <li>\n+ <button onClick={handleUpdateReducerClick}>Swap reducer values<\/button>\n+ <\/li>\n+ <\/ul>\n+ );\n+}\n+\n+const BoolContext = createContext(true);\n+BoolContext.displayName = 'BoolContext';\n+\n+type Props = {| name: string, toggle: boolean |};\n+type State = {| cities: Array<string>, state: string |};\n+\n+class StatefulClass extends Component<Props, State> {\n+ static contextType = BoolContext;\n+\n+ state: State = {\n+ cities: ['San Francisco', 'San Jose'],\n+ state: 'California',\n+ };\n+\n+ handleChange = ({ target }) =>\n+ this.setState({\n+ state: target.value,\n+ });\n+\n+ render() {\n+ return (\n+ <ul>\n+ <li>Name: {this.props.name}<\/li>\n+ <li>Toggle: {this.props.toggle ? 'true' : 'false'}<\/li>\n+ <li>\n+ State: <input value={this.state.state} onChange={this.handleChange} \/>\n+ <\/li>\n+ <li>Cities: {this.state.cities.join(', ')}<\/li>\n+ <li>Context: {this.context ? 'true' : 'false'}<\/li>\n+ <\/ul>\n+ );\n+ }\n+}\n+\n+const MemoizedStatefulClass = memo(StatefulClass);\n+const MemoizedStatefulFunction = memo(StatefulFunction);\n+\n+const ForwardRef = forwardRef<{| name: string |}, HTMLUListElement>(\n+ ({ name }, ref) => {\n+ const [count, updateCount] = useState(0);\n+ const debouncedCount = useDebounce(count, 1000);\n+ const handleUpdateCountClick = useCallback(() => updateCount(count + 1), [\n+ count,\n+ ]);\n+ return (\n+ <ul ref={ref}>\n+ <li>Name: {name}<\/li>\n+ <li>\n+ <button onClick={handleUpdateCountClick}>\n+ Debounced count: {debouncedCount}\n+ <\/button>\n+ <\/li>\n+ <\/ul>\n+ );\n+ }\n+);\n+\n+export default function EditableProps() {\n+ return (\n+ <Fragment>\n+ <h1>Editable props<\/h1>\n+ <strong>Class<\/strong>\n+ <StatefulClass name=\"Brian\" toggle={true} \/>\n+ <strong>Function<\/strong>\n+ <StatefulFunction name=\"Brian\" \/>\n+ <strong>Memoized Class<\/strong>\n+ <MemoizedStatefulClass name=\"Brian\" toggle={true} \/>\n+ <strong>Memoized Function<\/strong>\n+ <MemoizedStatefulFunction name=\"Brian\" \/>\n+ <strong>Forward Ref<\/strong>\n+ <ForwardRef name=\"Brian\" \/>\n+ <\/Fragment>\n+ );\n+}\n+\n+\/\/ Below copied from https:\/\/usehooks.com\/\n+function useDebounce(value, delay) {\n+ \/\/ State and setters for debounced value\n+ const [debouncedValue, setDebouncedValue] = useState(value);\n+\n+ \/\/ Show the value in DevTools\n+ useDebugValue(debouncedValue);\n+\n+ useEffect(\n+ () => {\n+ \/\/ Update debounced value after delay\n+ const handler = setTimeout(() => {\n+ setDebouncedValue(value);\n+ }, delay);\n+\n+ \/\/ Cancel the timeout if value changes (also on delay change or unmount)\n+ \/\/ This is how we prevent debounced value from updating if value is changed ...\n+ \/\/ .. within the delay period. Timeout gets cleared and restarted.\n+ return () => {\n+ clearTimeout(handler);\n+ };\n+ },\n+ [value, delay] \/\/ Only re-call effect if value or delay changes\n+ );\n+\n+ return debouncedValue;\n+}\n+\/\/ Above copied from https:\/\/usehooks.com\/\ndiff --git a\/shells\/dev\/app\/ElementTypes\/index.js b\/shells\/dev\/app\/ElementTypes\/index.js\nnew file mode 100644\nindex 0000000000..6ef562596c\n--- \/dev\/null\n+++ b\/shells\/dev\/app\/ElementTypes\/index.js\n@@ -0,0 +1,60 @@\n+\/\/ @flow\n+\n+import React, {\n+ createContext,\n+ forwardRef,\n+ lazy,\n+ memo,\n+ Component,\n+ Fragment,\n+ \/\/ $FlowFixMe Flow doesn't know about the Profiler import yet\n+ Profiler,\n+ StrictMode,\n+ Suspense,\n+} from 'react';\n+\n+const Context = createContext('abc');\n+Context.displayName = 'ExampleContext';\n+\n+class ClassComponent extends Component<any> {\n+ render() {\n+ return null;\n+ }\n+}\n+\n+function FunctionComponent() {\n+ return null;\n+}\n+\n+const MemoFunctionComponent = memo(FunctionComponent);\n+\n+const ForwardRefComponent = forwardRef((props, ref) => (\n+ <ClassComponent ref={ref} {...props} \/>\n+));\n+\n+const LazyComponent = lazy(() =>\n+ Promise.resolve({\n+ default: FunctionComponent,\n+ })\n+);\n+\n+export default function ElementTypes() {\n+ return (\n+ <Profiler id=\"test\" onRender={() => {}}>\n+ <Fragment>\n+ <Context.Provider value={'def'}>\n+ <Context.Consumer>{value => null}<\/Context.Consumer>\n+ <\/Context.Provider>\n+ <StrictMode>\n+ <Suspense fallback={<div>Loading...<\/div>}>\n+ <ClassComponent \/>\n+ <FunctionComponent \/>\n+ <MemoFunctionComponent \/>\n+ <ForwardRefComponent \/>\n+ <LazyComponent \/>\n+ <\/Suspense>\n+ <\/StrictMode>\n+ <\/Fragment>\n+ <\/Profiler>\n+ );\n+}\ndiff --git a\/shells\/dev\/app\/Hydration\/index.js b\/shells\/dev\/app\/Hydration\/index.js\nnew file mode 100644\nindex 0000000000..bf0cd66a52\n--- \/dev\/null\n+++ b\/shells\/dev\/app\/Hydration\/index.js\n@@ -0,0 +1,133 @@\n+\/\/ @flow\n+\n+import React, { Fragment, useDebugValue, useState } from 'react';\n+\n+const div = document.createElement('div');\n+const exmapleFunction = () => {};\n+const typedArray = new Uint8Array(3);\n+typedArray[0] = 1;\n+typedArray[1] = 2;\n+typedArray[2] = 3;\n+\n+const arrayOfArrays = [\n+ [['a', 'b', 'c'], ['d', 'e', 'f'], ['h', 'i', 'j']],\n+ [['k', 'l', 'm'], ['n', 'o', 'p'], ['q', 'r', 's']],\n+ [['t', 'u', 'v'], ['w', 'x', 'y'], ['z']],\n+ [],\n+];\n+\n+const objectOfObjects = {\n+ foo: {\n+ a: 1,\n+ b: 2,\n+ c: 3,\n+ },\n+ bar: {\n+ e: 4,\n+ f: 5,\n+ g: 6,\n+ },\n+ baz: {\n+ h: 7,\n+ i: 8,\n+ j: 9,\n+ },\n+ qux: {},\n+};\n+\n+function useOuterFoo() {\n+ useDebugValue({\n+ debugA: {\n+ debugB: {\n+ debugC: 'abc',\n+ },\n+ },\n+ });\n+ useState({\n+ valueA: {\n+ valueB: {\n+ valueC: 'abc',\n+ },\n+ },\n+ });\n+ return useInnerFoo();\n+}\n+\n+function useInnerFoo() {\n+ const [value] = useState([[['a', 'b', 'c']]]);\n+ return value;\n+}\n+\n+function useOuterBar() {\n+ useDebugValue({\n+ debugA: {\n+ debugB: {\n+ debugC: 'abc',\n+ },\n+ },\n+ });\n+ return useInnerBar();\n+}\n+\n+function useInnerBar() {\n+ useDebugValue({\n+ debugA: {\n+ debugB: {\n+ debugC: 'abc',\n+ },\n+ },\n+ });\n+ const [count] = useState(123);\n+ return count;\n+}\n+\n+function useOuterBaz() {\n+ return useInnerBaz();\n+}\n+\n+function useInnerBaz() {\n+ const [count] = useState(123);\n+ return count;\n+}\n+\n+export default function Hydration() {\n+ return (\n+ <Fragment>\n+ <h1>Hydration<\/h1>\n+ <DehydratableProps\n+ html_element={div}\n+ fn={exmapleFunction}\n+ symbol={Symbol('symbol')}\n+ react_element={<span \/>}\n+ array_buffer={typedArray.buffer}\n+ typed_array={typedArray}\n+ date={new Date()}\n+ array={arrayOfArrays}\n+ object={objectOfObjects}\n+ \/>\n+ <DeepHooks \/>\n+ <\/Fragment>\n+ );\n+}\n+\n+function DehydratableProps({ array, object }: any) {\n+ return (\n+ <ul>\n+ <li>array: {JSON.stringify(array, null, 2)}<\/li>\n+ <li>object: {JSON.stringify(object, null, 2)}<\/li>\n+ <\/ul>\n+ );\n+}\n+\n+function DeepHooks(props: any) {\n+ const foo = useOuterFoo();\n+ const bar = useOuterBar();\n+ const baz = useOuterBaz();\n+ return (\n+ <ul>\n+ <li>foo: {foo}<\/li>\n+ <li>bar: {bar}<\/li>\n+ <li>baz: {baz}<\/li>\n+ <\/ul>\n+ );\n+}\ndiff --git a\/shells\/dev\/app\/Iframe\/index.js b\/shells\/dev\/app\/Iframe\/index.js\nnew file mode 100644\nindex 0000000000..8e4967ae5a\n--- \/dev\/null\n+++ b\/shells\/dev\/app\/Iframe\/index.js\n@@ -0,0 +1,69 @@\n+\/** @flow *\/\n+\n+import React, { Fragment } from 'react';\n+import ReactDOM from 'react-dom';\n+\n+export default function Iframe() {\n+ return (\n+ <Fragment>\n+ <h2>Iframe<\/h2>\n+ <div>\n+ <Frame>\n+ <Greeting \/>\n+ <\/Frame>\n+ <\/div>\n+ <\/Fragment>\n+ );\n+}\n+\n+const iframeStyle = { border: '2px solid #eee', height: 80 };\n+\n+function Frame(props) {\n+ const [element, setElement] = React.useState(null);\n+\n+ const ref = React.useRef();\n+\n+ React.useLayoutEffect(function() {\n+ const iframe = ref.current;\n+\n+ if (iframe) {\n+ const html = `\n+ <!DOCTYPE html>\n+ <html>\n+ <body>\n+ <div id=\"root\"><\/div>\n+ <\/body>\n+ <\/html>\n+ `;\n+\n+ const document = iframe.contentDocument;\n+\n+ document.open();\n+ document.write(html);\n+ document.close();\n+\n+ setElement(document.getElementById('root'));\n+ }\n+ }, []);\n+\n+ return (\n+ <Fragment>\n+ <iframe title=\"Test Iframe\" ref={ref} style={iframeStyle} \/>\n+ <iframe\n+ title=\"Secured Iframe\"\n+ src=\"https:\/\/example.com\"\n+ style={iframeStyle}\n+ \/>\n+\n+ {element ? ReactDOM.createPortal(props.children, element) : null}\n+ <\/Fragment>\n+ );\n+}\n+\n+function Greeting() {\n+ return (\n+ <p>\n+ Hello from within an <code><iframe><\/code>!\n+ <\/p>\n+ );\n+}\ndiff --git a\/shells\/dev\/app\/InspectableElements\/Contexts.js b\/shells\/dev\/app\/InspectableElements\/Contexts.js\nnew file mode 100644\nindex 0000000000..65e35d4606\n--- \/dev\/null\n+++ b\/shells\/dev\/app\/InspectableElements\/Contexts.js\n@@ -0,0 +1,113 @@\n+\/\/ @flow\n+\n+import React, { createContext, Component, Fragment, useContext } from 'react';\n+import PropTypes from 'prop-types';\n+\n+function someNamedFunction() {}\n+\n+const contextData = {\n+ array: ['first', 'second', 'third'],\n+ bool: true,\n+ func: someNamedFunction,\n+ number: 123,\n+ object: { outer: { inner: {} } },\n+ string: 'abc',\n+ symbol: Symbol.for('symbol'),\n+ null: null,\n+ undefined: undefined,\n+};\n+\n+class LegacyContextProvider extends Component<any> {\n+ static childContextTypes = {\n+ array: PropTypes.array,\n+ bool: PropTypes.bool,\n+ func: PropTypes.func,\n+ number: PropTypes.number,\n+ object: PropTypes.object,\n+ string: PropTypes.string,\n+ symbol: PropTypes.symbol,\n+ null: PropTypes.any,\n+ undefined: PropTypes.any,\n+ };\n+\n+ getChildContext() {\n+ return contextData;\n+ }\n+\n+ render() {\n+ return this.props.children;\n+ }\n+}\n+\n+class LegacyContextConsumer extends Component<any> {\n+ static contextTypes = {\n+ array: PropTypes.array,\n+ bool: PropTypes.bool,\n+ func: PropTypes.func,\n+ number: PropTypes.number,\n+ object: PropTypes.object,\n+ string: PropTypes.string,\n+ symbol: PropTypes.symbol,\n+ null: PropTypes.any,\n+ undefined: PropTypes.any,\n+ };\n+\n+ render() {\n+ return null;\n+ }\n+}\n+\n+const ModernContext = createContext();\n+ModernContext.displayName = 'ModernContext';\n+const ArrayContext = createContext(contextData.array);\n+ArrayContext.displayName = 'ArrayContext';\n+const BoolContext = createContext(contextData.bool);\n+BoolContext.displayName = 'BoolContext';\n+const FuncContext = createContext(contextData.func);\n+FuncContext.displayName = 'FuncContext';\n+const NumberContext = createContext(contextData.number);\n+NumberContext.displayName = 'NumberContext';\n+const StringContext = createContext(contextData.string);\n+StringContext.displayName = 'StringContext';\n+const SymbolContext = createContext(contextData.symbol);\n+SymbolContext.displayName = 'SymbolContext';\n+const NullContext = createContext(null);\n+NullContext.displayName = 'NullContext';\n+const UndefinedContext = createContext(undefined);\n+UndefinedContext.displayName = 'UndefinedContext';\n+\n+class ModernContextType extends Component<any> {\n+ static contextType = ModernContext;\n+\n+ render() {\n+ return null;\n+ }\n+}\n+\n+function FunctionalContextConsumer() {\n+ useContext(StringContext);\n+ return null;\n+}\n+\n+export default function Contexts() {\n+ return (\n+ <Fragment>\n+ <LegacyContextProvider>\n+ <LegacyContextConsumer \/>\n+ <\/LegacyContextProvider>\n+ <ModernContext.Provider value={contextData}>\n+ <ModernContext.Consumer>{value => null}<\/ModernContext.Consumer>\n+ <ModernContextType \/>\n+ <\/ModernContext.Provider>\n+ <FunctionalContextConsumer \/>\n+ <ArrayContext.Consumer>{value => null}<\/ArrayContext.Consumer>\n+ <BoolContext.Consumer>{value => null}<\/BoolContext.Consumer>\n+ <FuncContext.Consumer>{value => null}<\/FuncContext.Consumer>\n+ <NumberContext.Consumer>{value => null}<\/NumberContext.Consumer>\n+ <StringContext.Consumer>{value => null}<\/StringContext.Consumer>\n+ <SymbolContext.Consumer>{value => null}<\/SymbolContext.Consumer>\n+ <NullContext.Consumer>{value => null}<\/NullContext.Consumer>\n+ <UndefinedContext.Consumer>{value => null}<\/UndefinedContext.Consumer>\n+ <\/Fragment>\n+ );\n+}\ndiff --git a\/shells\/dev\/app\/InspectableElements\/CustomHooks.js b\/shells\/dev\/app\/InspectableElements\/CustomHooks.js\nnew file mode 100644\nindex 0000000000..56eea075d1\n--- \/dev\/null\n+++ b\/shells\/dev\/app\/InspectableElements\/CustomHooks.js\n@@ -0,0 +1,125 @@\n+\/\/ @flow\n+\n+import React, {\n+ forwardRef,\n+ Fragment,\n+ memo,\n+ useCallback,\n+ useDebugValue,\n+ useEffect,\n+ useState,\n+} from 'react';\n+\n+const object = {\n+ string: 'abc',\n+ number: 123,\n+ boolean: true,\n+ null: null,\n+ undefined: undefined,\n+ array: ['a', 'b', 'c'],\n+ object: { foo: 1, bar: 2, baz: 3 },\n+};\n+\n+function useNestedInnerHook() {\n+ return useState(123);\n+}\n+function useNestedOuterHook() {\n+ return useNestedInnerHook();\n+}\n+\n+function useCustomObject() {\n+ useDebugValue(object);\n+ return useState(123);\n+}\n+\n+function useDeepHookA() {\n+ useDebugValue('useDeepHookA');\n+ useDeepHookB();\n+}\n+function useDeepHookB() {\n+ useDebugValue('useDeepHookB');\n+ useDeepHookC();\n+}\n+function useDeepHookC() {\n+ useDebugValue('useDeepHookC');\n+ useDeepHookD();\n+}\n+function useDeepHookD() {\n+ useDebugValue('useDeepHookD');\n+ useDeepHookE();\n+}\n+function useDeepHookE() {\n+ useDebugValue('useDeepHookE');\n+ useDeepHookF();\n+}\n+function useDeepHookF() {\n+ useDebugValue('useDeepHookF');\n+}\n+\n+function FunctionWithHooks(props: any, ref: React$Ref<any>) {\n+ const [count, updateCount] = useState(0);\n+\n+ \/\/ eslint-disable-next-line no-unused-vars\n+ const [_, __] = useState(object);\n+\n+ \/\/ Custom hook with a custom debug label\n+ const debouncedCount = useDebounce(count, 1000);\n+\n+ useCustomObject();\n+\n+ const onClick = useCallback(\n+ function onClick() {\n+ updateCount(count + 1);\n+ },\n+ [count]\n+ );\n+\n+ \/\/ Tests nested custom hooks\n+ useNestedOuterHook();\n+\n+ \/\/ Verify deep nesting doesn't break\n+ useDeepHookA();\n+\n+ return <button onClick={onClick}>Count: {debouncedCount}<\/button>;\n+}\n+const MemoWithHooks = memo(FunctionWithHooks);\n+const ForwardRefWithHooks = forwardRef(FunctionWithHooks);\n+\n+export default function CustomHooks() {\n+ return (\n+ <Fragment>\n+ <FunctionWithHooks \/>\n+ <MemoWithHooks \/>\n+ <ForwardRefWithHooks \/>\n+ <\/Fragment>\n+ );\n+}\n+\n+\/\/ Below copied from https:\/\/usehooks.com\/\n+function useDebounce(value, delay) {\n+ \/\/ State and setters for debounced value\n+ const [debouncedValue, setDebouncedValue] = useState(value);\n+\n+ \/\/ Show the value in DevTools\n+ useDebugValue(debouncedValue);\n+\n+ useEffect(\n+ () => {\n+ \/\/ Update debounced value after delay\n+ const handler = setTimeout(() => {\n+ setDebouncedValue(value);\n+ }, delay);\n+\n+ \/\/ Cancel the timeout if value changes (also on delay change or unmount)\n+ \/\/ This is how we prevent debounced value from updating if value is changed ...\n+ \/\/ .. within the delay period. Timeout gets cleared and restarted.\n+ return () => {\n+ clearTimeout(handler);\n+ };\n+ },\n+ [value, delay] \/\/ Only re-call effect if value or delay changes\n+ );\n+\n+ return debouncedValue;\n+}\n+\/\/ Above copied from https:\/\/usehooks.com\/\ndiff --git a\/shells\/dev\/app\/InspectableElements\/CustomObject.js b\/shells\/dev\/app\/InspectableElements\/CustomObject.js\nnew file mode 100644\nindex 0000000000..f7cb376bf2\n--- \/dev\/null\n+++ b\/shells\/dev\/app\/InspectableElements\/CustomObject.js\n@@ -0,0 +1,18 @@\n+\/\/ @flow\n+\n+import React from 'react';\n+\n+class Custom {\n+ _number = 42;\n+ get number() {\n+ return this._number;\n+ }\n+}\n+\n+export default function CustomObject() {\n+ return <ChildComponent customObject={new Custom()} \/>;\n+}\n+\n+function ChildComponent(props: any) {\n+ return null;\n+}\ndiff --git a\/shells\/dev\/app\/InspectableElements\/InspectableElements.js b\/shells\/dev\/app\/InspectableElements\/InspectableElements.js\nnew file mode 100644\nindex 0000000000..8917b33037\n--- \/dev\/null\n+++ b\/shells\/dev\/app\/InspectableElements\/InspectableElements.js\n@@ -0,0 +1,23 @@\n+\/\/ @flow\n+\n+import React, { Fragment } from 'react';\n+import Contexts from '.\/Contexts';\n+import CustomHooks from '.\/CustomHooks';\n+import CustomObject from '.\/CustomObject';\n+import NestedProps from '.\/NestedProps';\n+import SimpleValues from '.\/SimpleValues';\n+\n+\/\/ TODO Add Immutable JS example\n+\n+export default function InspectableElements() {\n+ return (\n+ <Fragment>\n+ <h1>Inspectable elements<\/h1>\n+ <SimpleValues \/>\n+ <NestedProps \/>\n+ <Contexts \/>\n+ <CustomHooks \/>\n+ <CustomObject \/>\n+ <\/Fragment>\n+ );\n+}\ndiff --git a\/shells\/dev\/app\/InspectableElements\/NestedProps.js b\/shells\/dev\/app\/InspectableElements\/NestedProps.js\nnew file mode 100644\nindex 0000000000..d6f5a804eb\n--- \/dev\/null\n+++ b\/shells\/dev\/app\/InspectableElements\/NestedProps.js\n@@ -0,0 +1,55 @@\n+\/\/ @flow\n+\n+import React from 'react';\n+\n+const object = {\n+ string: 'abc',\n+ longString: 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKJLMNOPQRSTUVWXYZ1234567890',\n+ emptyString: '',\n+ number: 123,\n+ boolean: true,\n+ undefined: undefined,\n+ null: null,\n+};\n+\n+export default function ObjectProps() {\n+ return (\n+ <ChildComponent\n+ object={{\n+ outer: {\n+ inner: object,\n+ },\n+ }}\n+ array={['first', 'second', 'third']}\n+ objectInArray={[object]}\n+ arrayInObject={{ array: ['first', 'second', 'third'] }}\n+ deepObject={{\n+ \/\/ Known limitation: we won't go deeper than several levels.\n+ \/\/ In the future, we might offer a way to request deeper access on demand.\n+ a: {\n+ b: {\n+ c: {\n+ d: {\n+ e: {\n+ f: {\n+ g: {\n+ h: {\n+ i: {\n+ j: 10,\n+ },\n+ },\n+ },\n+ },\n+ },\n+ },\n+ },\n+ },\n+ },\n+ }}\n+ \/>\n+ );\n+}\n+\n+function ChildComponent(props: any) {\n+ return null;\n+}\ndiff --git a\/shells\/dev\/app\/InspectableElements\/SimpleValues.js b\/shells\/dev\/app\/InspectableElements\/SimpleValues.js\nnew file mode 100644\nindex 0000000000..43373d6095\n--- \/dev\/null\n+++ b\/shells\/dev\/app\/InspectableElements\/SimpleValues.js\n@@ -0,0 +1,23 @@\n+\/\/ @flow\n+\n+import React from 'react';\n+\n+export default function SimpleValues() {\n+ return (\n+ <ChildComponent\n+ string=\"abc\"\n+ emptyString=\"\"\n+ number={123}\n+ undefined={undefined}\n+ null={null}\n+ nan={NaN}\n+ infinity={Infinity}\n+ true={true}\n+ false={false}\n+ \/>\n+ );\n+}\n+\n+function ChildComponent(props: any) {\n+ return null;\n+}\ndiff --git a\/shells\/dev\/app\/InspectableElements\/index.js b\/shells\/dev\/app\/InspectableElements\/index.js\nnew file mode 100644\nindex 0000000000..58efb1216e\n--- \/dev\/null\n+++ b\/shells\/dev\/app\/InspectableElements\/index.js\n@@ -0,0 +1,5 @@\n+\/\/ @flow\n+\n+import InspectableElements from '.\/InspectableElements';\n+\n+export default InspectableElements;\ndiff --git a\/shells\/dev\/app\/InteractionTracing\/index.js b\/shells\/dev\/app\/InteractionTracing\/index.js\nnew file mode 100644\nindex 0000000000..d062f976f9\n--- \/dev\/null\n+++ b\/shells\/dev\/app\/InteractionTracing\/index.js\n@@ -0,0 +1,73 @@\n+\/\/ @flow\n+\n+import React, { Fragment, useCallback, useEffect, useState } from 'react';\n+import { unstable_batchedUpdates as batchedUpdates } from 'react-dom';\n+import {\n+ unstable_trace as trace,\n+ unstable_wrap as wrap,\n+} from 'scheduler\/tracing';\n+\n+export default function InteractionTracing() {\n+ const [count, setCount] = useState(0);\n+ const [shouldCascade, setShouldCascade] = useState(false);\n+\n+ const handleUpdate = useCallback(() => {\n+ trace('count', performance.now(), () => {\n+ setTimeout(\n+ wrap(() => {\n+ setCount(count + 1);\n+ }),\n+ count * 100\n+ );\n+ });\n+ }, [count]);\n+\n+ const handleCascadingUpdate = useCallback(() => {\n+ trace('cascade', performance.now(), () => {\n+ setTimeout(\n+ wrap(() => {\n+ batchedUpdates(() => {\n+ setCount(count + 1);\n+ setShouldCascade(true);\n+ });\n+ }),\n+ count * 100\n+ );\n+ });\n+ }, [count]);\n+\n+ const handleMultiple = useCallback(() => {\n+ trace('first', performance.now(), () => {\n+ trace('second', performance.now(), () => {\n+ setTimeout(\n+ wrap(() => {\n+ setCount(count + 1);\n+ }),\n+ count * 100\n+ );\n+ });\n+ });\n+ }, [count]);\n+\n+ useEffect(() => {\n+ if (shouldCascade) {\n+ setTimeout(\n+ wrap(() => {\n+ setShouldCascade(false);\n+ }),\n+ count * 100\n+ );\n+ }\n+ }, [count, shouldCascade]);\n+\n+ return (\n+ <Fragment>\n+ <h1>Interaction Tracing<\/h1>\n+ <button onClick={handleUpdate}>Update ({count})<\/button>\n+ <button onClick={handleCascadingUpdate}>\n+ Cascading Update ({count}, {shouldCascade ? 'true' : 'false'})\n+ <\/button>\n+ <button onClick={handleMultiple}>Multiple<\/button>\n+ <\/Fragment>\n+ );\n+}\ndiff --git a\/shells\/dev\/app\/PriorityLevels\/index.js b\/shells\/dev\/app\/PriorityLevels\/index.js\nnew file mode 100644\nindex 0000000000..2888451980\n--- \/dev\/null\n+++ b\/shells\/dev\/app\/PriorityLevels\/index.js\n@@ -0,0 +1,46 @@\n+\/\/ @flow\n+\n+import React, { Fragment, useCallback, useState } from 'react';\n+import {\n+ unstable_IdlePriority as IdlePriority,\n+ unstable_LowPriority as LowPriority,\n+ unstable_runWithPriority as runWithPriority,\n+} from 'scheduler';\n+\n+export default function PriorityLevels() {\n+ const [defaultPriority, setDefaultPriority] = useState<boolean>(false);\n+ const [idlePriority, setIdlePriority] = useState<boolean>(false);\n+ const [normalPriority, setLowPriority] = useState<boolean>(false);\n+\n+ const resetSequence = useCallback(() => {\n+ setDefaultPriority(false);\n+ setLowPriority(false);\n+ setIdlePriority(false);\n+ }, []);\n+\n+ const startSequence = useCallback(() => {\n+ setDefaultPriority(true);\n+ runWithPriority(LowPriority, () => setLowPriority(true));\n+ runWithPriority(IdlePriority, () => setIdlePriority(true));\n+ }, []);\n+\n+ const labels = [];\n+ if (defaultPriority) {\n+ labels.push('(default priority)');\n+ }\n+ if (normalPriority) {\n+ labels.push('Low Priority');\n+ }\n+ if (idlePriority) {\n+ labels.push('Idle Priority');\n+ }\n+\n+ return (\n+ <Fragment>\n+ <h1>Priority Levels<\/h1>\n+ <button onClick={resetSequence}>Reset<\/button>\n+ <button onClick={startSequence}>Start sequence<\/button>\n+ <span>{labels.join(', ')}<\/span>\n+ <\/Fragment>\n+ );\n+}\ndiff --git a\/shells\/dev\/app\/ReactNativeWeb\/index.js b\/shells\/dev\/app\/ReactNativeWeb\/index.js\nnew file mode 100644\nindex 0000000000..7e2e27ede7\n--- \/dev\/null\n+++ b\/shells\/dev\/app\/ReactNativeWeb\/index.js\n@@ -0,0 +1,34 @@\n+\/\/ @flow\n+\n+import React, { Fragment, useState } from 'react';\n+import { Button, Text, View } from 'react-native-web';\n+\n+export default function ReactNativeWeb() {\n+ const [backgroundColor, setBackgroundColor] = useState('blue');\n+ const toggleColor = () =>\n+ setBackgroundColor(backgroundColor === 'purple' ? 'green' : 'purple');\n+ return (\n+ <Fragment>\n+ <h1>ReactNativeWeb<\/h1>\n+ <View>\n+ <Text>auto (default) - english LTR<\/Text>\n+ <Text>\n+ {\n+ '\\u0623\\u062D\\u0628 \\u0627\\u0644\\u0644\\u063A\\u0629 \\u0627\\u0644\\u0639\\u0631\\u0628\\u064A\\u0629 auto (default) - arabic RTL'\n+ }\n+ <\/Text>\n+ <Text style={{ textAlign: 'left' }}>\n+ left left left left left left left left left left left left left left\n+ left\n+ <\/Text>\n+ <Button\n+ onPress={toggleColor}\n+ style={{ backgroundColor }}\n+ title={`Switch background color to \"${\n+ backgroundColor === 'purple' ? 'green' : 'purple'\n+ }\"`}\n+ \/>\n+ <\/View>\n+ <\/Fragment>\n+ );\n+}\ndiff --git a\/shells\/dev\/app\/SuspenseTree\/index.js b\/shells\/dev\/app\/SuspenseTree\/index.js\nnew file mode 100644\nindex 0000000000..873f210e16\n--- \/dev\/null\n+++ b\/shells\/dev\/app\/SuspenseTree\/index.js\n@@ -0,0 +1,137 @@\n+\/\/ @flow\n+\n+import React, { Fragment, Suspense, useState } from 'react';\n+\n+function SuspenseTree() {\n+ return (\n+ <Fragment>\n+ <h1>Suspense<\/h1>\n+ <h4>Primary to Fallback Cycle<\/h4>\n+ <PrimaryFallbackTest initialSuspend={false} \/>\n+ <h4>Fallback to Primary Cycle<\/h4>\n+ <PrimaryFallbackTest initialSuspend={true} \/>\n+ <NestedSuspenseTest \/>\n+ <\/Fragment>\n+ );\n+}\n+\n+function PrimaryFallbackTest({ initialSuspend }) {\n+ const [suspend, setSuspend] = useState(initialSuspend);\n+ const fallbackStep = useTestSequence('fallback', Fallback1, Fallback2);\n+ const primaryStep = useTestSequence('primary', Primary1, Primary2);\n+ return (\n+ <Fragment>\n+ <label>\n+ <input\n+ checked={suspend}\n+ onChange={e => setSuspend(e.target.checked)}\n+ type=\"checkbox\"\n+ \/>\n+ Suspend\n+ <\/label>\n+ <br \/>\n+ <Suspense fallback={fallbackStep}>\n+ {suspend ? <Never \/> : primaryStep}\n+ <\/Suspense>\n+ <\/Fragment>\n+ );\n+}\n+\n+function useTestSequence(label, T1, T2) {\n+ let [step, setStep] = useState(0);\n+ let next = (\n+ <button onClick={() => setStep(s => (s + 1) % allSteps.length)}>\n+ next {label} content\n+ <\/button>\n+ );\n+ let allSteps = [\n+ <Fragment>{next}<\/Fragment>,\n+ <Fragment>\n+ {next} <T1 prop={step}>mount<\/T1>\n+ <\/Fragment>,\n+ <Fragment>\n+ {next} <T1 prop={step}>update<\/T1>\n+ <\/Fragment>,\n+ <Fragment>\n+ {next} <T2 prop={step}>several<\/T2> <T1 prop={step}>different<\/T1>{' '}\n+ <T2 prop={step}>children<\/T2>\n+ <\/Fragment>,\n+ <Fragment>\n+ {next} <T2 prop={step}>goodbye<\/T2>\n+ <\/Fragment>,\n+ ];\n+ return allSteps[step];\n+}\n+\n+function NestedSuspenseTest() {\n+ return (\n+ <Fragment>\n+ <h3>Nested Suspense<\/h3>\n+ <Suspense fallback={<Fallback1>Loading outer<\/Fallback1>}>\n+ <Parent \/>\n+ <\/Suspense>\n+ <\/Fragment>\n+ );\n+}\n+\n+function Parent() {\n+ return (\n+ <div>\n+ <Suspense fallback={<Fallback1>Loading inner 1<\/Fallback1>}>\n+ <Primary1>Hello<\/Primary1>\n+ <\/Suspense>{' '}\n+ <Suspense fallback={<Fallback2>Loading inner 2<\/Fallback2>}>\n+ <Primary2>World<\/Primary2>\n+ <\/Suspense>\n+ <br \/>\n+ <Suspense fallback={<Fallback1>This will never load<\/Fallback1>}>\n+ <Never \/>\n+ <\/Suspense>\n+ <br \/>\n+ <b>\n+ <LoadLater \/>\n+ <\/b>\n+ <\/div>\n+ );\n+}\n+\n+function LoadLater() {\n+ const [loadChild, setLoadChild] = useState(0);\n+ return (\n+ <Suspense\n+ fallback={\n+ <Fallback1 onClick={() => setLoadChild(true)}>Click to load<\/Fallback1>\n+ }\n+ >\n+ {loadChild ? (\n+ <Primary1 onClick={() => setLoadChild(false)}>\n+ Loaded! Click to suspend again.\n+ <\/Primary1>\n+ ) : (\n+ <Never \/>\n+ )}\n+ <\/Suspense>\n+ );\n+}\n+\n+function Never() {\n+ throw new Promise(resolve => {});\n+}\n+\n+function Fallback1({ prop, ...rest }: any) {\n+ return <span {...rest} \/>;\n+}\n+\n+function Fallback2({ prop, ...rest }: any) {\n+ return <span {...rest} \/>;\n+}\n+\n+function Primary1({ prop, ...rest }: any) {\n+ return <span {...rest} \/>;\n+}\n+\n+function Primary2({ prop, ...rest }: any) {\n+ return <span {...rest} \/>;\n+}\n+\n+export default SuspenseTree;\ndiff --git a\/shells\/dev\/app\/ToDoList\/List.css b\/shells\/dev\/app\/ToDoList\/List.css\nnew file mode 100644\nindex 0000000000..0583402840\n--- \/dev\/null\n+++ b\/shells\/dev\/app\/ToDoList\/List.css\n@@ -0,0 +1,16 @@\n+.Input {\n+ font-size: 1rem;\n+ padding: 0.25rem;\n+}\n+\n+.IconButton {\n+ padding: 0.25rem;\n+ border: none;\n+ background: none;\n+ cursor: pointer;\n+}\n+\n+.List {\n+ margin: 0.5rem 0 0;\n+ padding: 0;\n+}\ndiff --git a\/shells\/dev\/app\/ToDoList\/List.js b\/shells\/dev\/app\/ToDoList\/List.js\nnew file mode 100644\nindex 0000000000..f96df7748a\n--- \/dev\/null\n+++ b\/shells\/dev\/app\/ToDoList\/List.js\n@@ -0,0 +1,109 @@\n+\/\/ @flow\n+\n+import React, { Fragment, useCallback, useState } from 'react';\n+import ListItem from '.\/ListItem';\n+import styles from '.\/List.css';\n+\n+export type Item = {|\n+ id: number,\n+ isComplete: boolean,\n+ text: string,\n+|};\n+\n+type Props = {||};\n+\n+export default function List(props: Props) {\n+ const [newItemText, setNewItemText] = useState<string>('');\n+ const [items, setItems] = useState<Array<Item>>([\n+ { id: 1, isComplete: true, text: 'First' },\n+ { id: 2, isComplete: true, text: 'Second' },\n+ { id: 3, isComplete: false, text: 'Third' },\n+ ]);\n+ const [uid, setUID] = useState<number>(4);\n+\n+ const handleClick = useCallback(() => {\n+ if (newItemText !== '') {\n+ setItems([\n+ ...items,\n+ {\n+ id: uid,\n+ isComplete: false,\n+ text: newItemText,\n+ },\n+ ]);\n+ setUID(uid + 1);\n+ setNewItemText('');\n+ }\n+ }, [newItemText, items, uid]);\n+\n+ const handleKeyPress = useCallback(\n+ event => {\n+ if (event.key === 'Enter') {\n+ handleClick();\n+ }\n+ },\n+ [handleClick]\n+ );\n+\n+ const handleChange = useCallback(\n+ event => {\n+ setNewItemText(event.currentTarget.value);\n+ },\n+ [setNewItemText]\n+ );\n+\n+ const removeItem = useCallback(\n+ itemToRemove => setItems(items.filter(item => item !== itemToRemove)),\n+ [items]\n+ );\n+\n+ const toggleItem = useCallback(\n+ itemToToggle => {\n+ const index = items.indexOf(itemToToggle);\n+\n+ setItems(\n+ items\n+ .slice(0, index)\n+ .concat({\n+ ...itemToToggle,\n+ isComplete: !itemToToggle.isComplete,\n+ })\n+ .concat(items.slice(index + 1))\n+ );\n+ },\n+ [items]\n+ );\n+\n+ return (\n+ <Fragment>\n+ <h1>List<\/h1>\n+ <input\n+ type=\"text\"\n+ placeholder=\"New list item...\"\n+ className={styles.Input}\n+ value={newItemText}\n+ onChange={handleChange}\n+ onKeyPress={handleKeyPress}\n+ \/>\n+ <button\n+ className={styles.IconButton}\n+ disabled={newItemText === ''}\n+ onClick={handleClick}\n+ >\n+ <span role=\"img\" aria-label=\"Add item\">\n+ ➕\n+ <\/span>\n+ <\/button>\n+ <ul className={styles.List}>\n+ {items.map(item => (\n+ <ListItem\n+ key={item.id}\n+ item={item}\n+ removeItem={removeItem}\n+ toggleItem={toggleItem}\n+ \/>\n+ ))}\n+ <\/ul>\n+ <\/Fragment>\n+ );\n+}\ndiff --git a\/shells\/dev\/app\/ToDoList\/ListItem.css b\/shells\/dev\/app\/ToDoList\/ListItem.css\nnew file mode 100644\nindex 0000000000..77c666251c\n--- \/dev\/null\n+++ b\/shells\/dev\/app\/ToDoList\/ListItem.css\n@@ -0,0 +1,23 @@\n+.ListItem {\n+ list-style-type: none;\n+}\n+\n+.Input {\n+ cursor: pointer;\n+}\n+\n+.Label {\n+ cursor: pointer;\n+ padding: 0.25rem;\n+ color: #555;\n+}\n+.Label:hover {\n+ color: #000;\n+}\n+\n+.IconButton {\n+ padding: 0.25rem;\n+ border: none;\n+ background: none;\n+ cursor: pointer;\n+}\ndiff --git a\/shells\/dev\/app\/ToDoList\/ListItem.js b\/shells\/dev\/app\/ToDoList\/ListItem.js\nnew file mode 100644\nindex 0000000000..2305e28ce6\n--- \/dev\/null\n+++ b\/shells\/dev\/app\/ToDoList\/ListItem.js\n@@ -0,0 +1,41 @@\n+\/\/ @flow\n+\n+import React, { memo, useCallback } from 'react';\n+import styles from '.\/ListItem.css';\n+\n+import type { Item } from '.\/List';\n+\n+type Props = {|\n+ item: Item,\n+ removeItem: (item: Item) => void,\n+ toggleItem: (item: Item) => void,\n+|};\n+\n+function ListItem({ item, removeItem, toggleItem }: Props) {\n+ const handleDelete = useCallback(() => {\n+ removeItem(item);\n+ }, [item, removeItem]);\n+\n+ const handleToggle = useCallback(() => {\n+ toggleItem(item);\n+ }, [item, toggleItem]);\n+\n+ return (\n+ <li className={styles.ListItem}>\n+ <button className={styles.IconButton} onClick={handleDelete}>\n+ 🗑\n+ <\/button>\n+ <label className={styles.Label}>\n+ <input\n+ className={styles.Input}\n+ checked={item.isComplete}\n+ onChange={handleToggle}\n+ type=\"checkbox\"\n+ \/>{' '}\n+ {item.text}\n+ <\/label>\n+ <\/li>\n+ );\n+}\n+\n+export default memo<Props>(ListItem);\ndiff --git a\/shells\/dev\/app\/ToDoList\/index.js b\/shells\/dev\/app\/ToDoList\/index.js\nnew file mode 100644\nindex 0000000000..0a86ff185c\n--- \/dev\/null\n+++ b\/shells\/dev\/app\/ToDoList\/index.js\n@@ -0,0 +1,5 @@\n+\/\/ @flow\n+\n+import List from '.\/List';\n+\n+export default List;\ndiff --git a\/shells\/dev\/app\/Toggle\/index.js b\/shells\/dev\/app\/Toggle\/index.js\nnew file mode 100644\nindex 0000000000..5e96cd447b\n--- \/dev\/null\n+++ b\/shells\/dev\/app\/Toggle\/index.js\n@@ -0,0 +1,21 @@\n+import React, { useState } from 'react';\n+\n+export default function Toggle() {\n+ const [show, setShow] = useState(false);\n+ return (\n+ <>\n+ <h2>Toggle<\/h2>\n+ <div>\n+ <>\n+ <button onClick={() => setShow(s => !s)}>Show child<\/button>\n+ {show && ' '}\n+ {show && <Greeting>Hello<\/Greeting>}\n+ <\/>\n+ <\/div>\n+ <\/>\n+ );\n+}\n+\n+function Greeting({ children }) {\n+ return <p>{children}<\/p>;\n+}\ndiff --git a\/shells\/dev\/app\/console.js b\/shells\/dev\/app\/console.js\nnew file mode 100644\nindex 0000000000..9e5f01401a\n--- \/dev\/null\n+++ b\/shells\/dev\/app\/console.js\n@@ -0,0 +1,27 @@\n+\/\/ @flow\n+\n+function ignoreStrings(\n+ methodName: string,\n+ stringsToIgnore: Array<string>\n+): void {\n+ const originalMethod = console[methodName];\n+ console[methodName] = (...args) => {\n+ const maybeString = args[0];\n+ if (typeof maybeString === 'string') {\n+ for (let i = 0; i < stringsToIgnore.length; i++) {\n+ if (maybeString.startsWith(stringsToIgnore[i])) {\n+ return;\n+ }\n+ }\n+ }\n+ originalMethod(...args);\n+ };\n+}\n+\n+export function ignoreErrors(errorsToIgnore: Array<string>): void {\n+ ignoreStrings('error', errorsToIgnore);\n+}\n+\n+export function ignoreWarnings(warningsToIgnore: Array<string>): void {\n+ ignoreStrings('warn', warningsToIgnore);\n+}\ndiff --git a\/shells\/dev\/app\/index.js b\/shells\/dev\/app\/index.js\nnew file mode 100644\nindex 0000000000..4115c1c480\n--- \/dev\/null\n+++ b\/shells\/dev\/app\/index.js\n@@ -0,0 +1,71 @@\n+\/** @flow *\/\n+\n+\/\/ This test harness mounts each test app as a separate root to test multi-root applications.\n+\n+import { createElement } from 'react';\n+import {\n+ \/\/ $FlowFixMe Flow does not yet know about createRoot()\n+ unstable_createRoot as createRoot,\n+} from 'react-dom';\n+import DeeplyNestedComponents from '.\/DeeplyNestedComponents';\n+import Iframe from '.\/Iframe';\n+import EditableProps from '.\/EditableProps';\n+import ElementTypes from '.\/ElementTypes';\n+import Hydration from '.\/Hydration';\n+import InspectableElements from '.\/InspectableElements';\n+import InteractionTracing from '.\/InteractionTracing';\n+import PriorityLevels from '.\/PriorityLevels';\n+import ReactNativeWeb from '.\/ReactNativeWeb';\n+import ToDoList from '.\/ToDoList';\n+import Toggle from '.\/Toggle';\n+import SuspenseTree from '.\/SuspenseTree';\n+import { ignoreErrors, ignoreWarnings } from '.\/console';\n+\n+import '.\/styles.css';\n+\n+\/\/ DevTools intentionally tests compatibility with certain legacy APIs.\n+\/\/ Suppress their error messages in the local dev shell,\n+\/\/ because they might mask other more serious error messages.\n+ignoreErrors([\n+ 'Warning: Legacy context API',\n+ 'Warning: Unsafe lifecycle methods',\n+ 'Warning: %s is deprecated in StrictMode.', \/\/ findDOMNode\n+]);\n+ignoreWarnings(['Warning: componentWillReceiveProps is deprecated']);\n+\n+const roots = [];\n+\n+function mountHelper(App) {\n+ const container = document.createElement('div');\n+\n+ ((document.body: any): HTMLBodyElement).appendChild(container);\n+\n+ const root = createRoot(container);\n+ root.render(createElement(App));\n+\n+ roots.push(root);\n+}\n+\n+function mountTestApp() {\n+ mountHelper(ToDoList);\n+ mountHelper(InteractionTracing);\n+ mountHelper(InspectableElements);\n+ mountHelper(Hydration);\n+ mountHelper(ElementTypes);\n+ mountHelper(EditableProps);\n+ mountHelper(PriorityLevels);\n+ mountHelper(ReactNativeWeb);\n+ mountHelper(Toggle);\n+ mountHelper(SuspenseTree);\n+ mountHelper(DeeplyNestedComponents);\n+ mountHelper(Iframe);\n+}\n+\n+function unmountTestApp() {\n+ roots.forEach(root => root.unmount());\n+}\n+\n+mountTestApp();\n+\n+window.parent.mountTestApp = mountTestApp;\n+window.parent.unmountTestApp = unmountTestApp;\ndiff --git a\/shells\/dev\/app\/styles.css b\/shells\/dev\/app\/styles.css\nnew file mode 100644\nindex 0000000000..2a995314c1\n--- \/dev\/null\n+++ b\/shells\/dev\/app\/styles.css\n@@ -0,0 +1,13 @@\n+body {\n+ \/* GitHub.com frontend fonts *\/\n+ font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,\n+ sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;\n+ font-size: 14px;\n+ line-height: 1.5;\n+}\n+\n+h1 {\n+ font-size: 1.5rem;\n+ font-weight: bold;\n+ margin-bottom: 0.5rem;\n+}\ndiff --git a\/shells\/dev\/index.html b\/shells\/dev\/index.html\nnew file mode 100644\nindex 0000000000..f0252eee4d\n--- \/dev\/null\n+++ b\/shells\/dev\/index.html\n@@ -0,0 +1,68 @@\n+<!doctype html>\n+<html>\n+ <head>\n+ <meta charset=\"utf8\">\n+ <title>React DevTools<\/title>\n+ <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n+ <style>\n+ #target {\n+ flex: 1;\n+ border: none;\n+ }\n+ #devtools {\n+ height: 400px;\n+ max-height: 50%;\n+ overflow: hidden;\n+ z-index: 10000001;\n+ }\n+ body {\n+ display: flex;\n+ flex-direction: column;\n+ position: absolute;\n+ top: 0;\n+ left: 0;\n+ right: 0;\n+ bottom: 0;\n+ margin: 0;\n+ padding: 0;\n+ font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,\n+ sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;\n+ font-size: 12px;\n+ line-height: 1.5;\n+ }\n+ .optionsRow {\n+ width: 100%;\n+ display: flex;\n+ padding: 0.25rem;\n+ background: aliceblue;\n+ border-bottom: 1px solid lightblue;\n+ }\n+ .optionsRowSpacer {\n+ flex: 1;\n+ }\n+ <\/style>\n+ <\/head>\n+ <body>\n+ <div class=\"optionsRow\">\n+ <button id=\"mountButton\">Unmount test app<\/button>\n+ <div class=\"optionsRowSpacer\"> <\/div>\n+ <span>\n+ <a href=\"https:\/\/react-devtools-experimental-chrome.now.sh\/\">Chrome extension<\/a>\n+ <a href=\"https:\/\/react-devtools-experimental-firefox.now.sh\/\">Firefox extension<\/a>\n+ <\/span>\n+ <\/div>\n+\n+ \n+ \n+ \n+ <iframe id=\"target\"><\/iframe>\n+\n+ \n+ <div id=\"devtools\"><\/div>\n+\n+ \n+ \n+ \n+ <script src=\"dist\/devtools.js\"><\/script>\n+ <\/body>\n+<\/html>\n\\ No newline at end of file\ndiff --git a\/shells\/dev\/now.json b\/shells\/dev\/now.json\nnew file mode 100644\nindex 0000000000..7c0805c3b1\n--- \/dev\/null\n+++ b\/shells\/dev\/now.json\n@@ -0,0 +1,5 @@\n+{\n+ \"name\": \"react-devtools-experimental\",\n+ \"alias\": [\"react-devtools-experimental\"],\n+ \"files\": [\"index.html\", \"dist\"]\n+}\ndiff --git a\/shells\/dev\/src\/devtools.js b\/shells\/dev\/src\/devtools.js\nnew file mode 100644\nindex 0000000000..230ddc94d2\n--- \/dev\/null\n+++ b\/shells\/dev\/src\/devtools.js\n@@ -0,0 +1,77 @@\n+\/** @flow *\/\n+\n+import { createElement } from 'react';\n+\/\/ $FlowFixMe Flow does not yet know about createRoot()\n+import { unstable_createRoot as createRoot } from 'react-dom';\n+import {\n+ activate as activateBackend,\n+ initialize as initializeBackend,\n+} from 'react-devtools-inline\/backend';\n+import { initialize as initializeFrontend } from 'react-devtools-inline\/frontend';\n+import { initDevTools } from 'src\/devtools';\n+\n+const iframe = ((document.getElementById('target'): any): HTMLIFrameElement);\n+\n+const { contentDocument, contentWindow } = iframe;\n+\n+\/\/ Helps with positioning Overlay UI.\n+contentWindow.__REACT_DEVTOOLS_TARGET_WINDOW__ = window;\n+\n+initializeBackend(contentWindow);\n+\n+const container = ((document.getElementById('devtools'): any): HTMLElement);\n+\n+let isTestAppMounted = true;\n+\n+const mountButton = ((document.getElementById(\n+ 'mountButton'\n+): any): HTMLButtonElement);\n+mountButton.addEventListener('click', function() {\n+ if (isTestAppMounted) {\n+ if (typeof window.unmountTestApp === 'function') {\n+ window.unmountTestApp();\n+ mountButton.innerText = 'Mount test app';\n+ isTestAppMounted = false;\n+ }\n+ } else {\n+ if (typeof window.mountTestApp === 'function') {\n+ window.mountTestApp();\n+ mountButton.innerText = 'Unmount test app';\n+ isTestAppMounted = true;\n+ }\n+ }\n+});\n+\n+inject('dist\/app.js', () => {\n+ initDevTools({\n+ connect(cb) {\n+ const DevTools = initializeFrontend(contentWindow);\n+\n+ \/\/ Activate the backend only once the DevTools frontend Store has been initialized.\n+ \/\/ Otherwise the Store may miss important initial tree op codes.\n+ activateBackend(contentWindow);\n+\n+ const root = createRoot(container);\n+ root.render(\n+ createElement(DevTools, {\n+ browserTheme: 'light',\n+ showTabBar: true,\n+ showWelcomeToTheNewDevToolsDialog: true,\n+ warnIfLegacyBackendDetected: true,\n+ })\n+ );\n+ },\n+\n+ onReload(reloadFn) {\n+ iframe.onload = reloadFn;\n+ },\n+ });\n+});\n+\n+function inject(sourcePath, callback) {\n+ const script = contentDocument.createElement('script');\n+ script.onload = callback;\n+ script.src = sourcePath;\n+\n+ ((contentDocument.body: any): HTMLBodyElement).appendChild(script);\n+}\ndiff --git a\/shells\/dev\/webpack.config.js b\/shells\/dev\/webpack.config.js\nnew file mode 100644\nindex 0000000000..ce58e6418a\n--- \/dev\/null\n+++ b\/shells\/dev\/webpack.config.js\n@@ -0,0 +1,92 @@\n+const { resolve } = require('path');\n+const { DefinePlugin } = require('webpack');\n+const { getGitHubURL, getVersionString } = require('..\/utils');\n+\n+const NODE_ENV = process.env.NODE_ENV;\n+if (!NODE_ENV) {\n+ console.error('NODE_ENV not set');\n+ process.exit(1);\n+}\n+\n+const TARGET = process.env.TARGET;\n+if (!TARGET) {\n+ console.error('TARGET not set');\n+ process.exit(1);\n+}\n+\n+const __DEV__ = NODE_ENV === 'development';\n+\n+const root = resolve(__dirname, '..\/..');\n+\n+const GITHUB_URL = getGitHubURL();\n+const DEVTOOLS_VERSION = getVersionString();\n+\n+const config = {\n+ mode: __DEV__ ? 'development' : 'production',\n+ devtool: false,\n+ entry: {\n+ app: '.\/app\/index.js',\n+ devtools: '.\/src\/devtools.js',\n+ },\n+ resolve: {\n+ alias: {\n+ 'react-devtools-inline': resolve(\n+ root,\n+ 'packages\/react-devtools-inline\/src\/'\n+ ),\n+ src: resolve(root, 'src'),\n+ },\n+ },\n+ plugins: [\n+ new DefinePlugin({\n+ __DEV__,\n+ __TEST__: false,\n+ 'process.env.GITHUB_URL': `\"${GITHUB_URL}\"`,\n+ 'process.env.DEVTOOLS_VERSION': `\"${DEVTOOLS_VERSION}\"`,\n+ }),\n+ ],\n+ module: {\n+ rules: [\n+ {\n+ test: \/\\.js$\/,\n+ loader: 'babel-loader',\n+ options: {\n+ configFile: resolve(root, 'babel.config.js'),\n+ },\n+ },\n+ {\n+ test: \/\\.css$\/,\n+ use: [\n+ {\n+ loader: 'style-loader',\n+ },\n+ {\n+ loader: 'css-loader',\n+ options: {\n+ sourceMap: true,\n+ modules: true,\n+ localIdentName: '[local]___[hash:base64:5]',\n+ },\n+ },\n+ ],\n+ },\n+ ],\n+ },\n+};\n+\n+if (TARGET === 'local') {\n+ config.devServer = {\n+ hot: true,\n+ port: 8080,\n+ clientLogLevel: 'warning',\n+ publicPath: '\/dist\/',\n+ stats: 'errors-only',\n+ };\n+} else {\n+ config.output = {\n+ path: resolve(__dirname, 'dist'),\n+ filename: '[name].js',\n+ };\n+}\n+\n+module.exports = config;\ndiff --git a\/shells\/utils.js b\/shells\/utils.js\nnew file mode 100644\nindex 0000000000..515f5c242b\n--- \/dev\/null\n+++ b\/shells\/utils.js\n@@ -0,0 +1,37 @@\n+const { execSync } = require('child_process');\n+const { readFileSync } = require('fs');\n+const { resolve } = require('path');\n+\n+function getGitCommit() {\n+ return execSync('git show -s --format=%h')\n+ .toString()\n+ .trim();\n+}\n+\n+function getGitHubURL() {\n+ \/\/ TODO potentially replace this with an fb.me URL (assuming it can forward the query params)\n+ const url = execSync('git remote get-url origin')\n+ .toString()\n+ .trim();\n+\n+ if (url.startsWith('https:\/\/')) {\n+ return url.replace('.git', '');\n+ } else {\n+ return url\n+ .replace(':', '\/')\n+ .replace('git@', 'https:\/\/')\n+ .replace('.git', '');\n+ }\n+}\n+\n+function getVersionString() {\n+ const packageVersion = JSON.parse(\n+ readFileSync(resolve(__dirname, '..\/package.json'))\n+ ).version;\n+\n+ const commit = getGitCommit();\n+\n+ return `${packageVersion}-${commit}`;\n+}\n+\n+module.exports = { getGitCommit, getGitHubURL, getVersionString };\ndiff --git a\/src\/__tests__\/__mocks__\/cssMock.js b\/src\/__tests__\/__mocks__\/cssMock.js\nnew file mode 100644\nindex 0000000000..f053ebf797\n--- \/dev\/null\n+++ b\/src\/__tests__\/__mocks__\/cssMock.js\n@@ -0,0 +1 @@\n+module.exports = {};\ndiff --git a\/src\/__tests__\/__snapshots__\/inspectedElementContext-test.js.snap b\/src\/__tests__\/__snapshots__\/inspectedElementContext-test.js.snap\nnew file mode 100644\nindex 0000000000..a27a73527c\n--- \/dev\/null\n+++ b\/src\/__tests__\/__snapshots__\/inspectedElementContext-test.js.snap\n@@ -0,0 +1,478 @@\n+\/\/ Jest Snapshot v1, https:\/\/goo.gl\/fbAQLP\n+\n+exports[`InspectedElementContext should include updates for nested values that were previously hydrated: 1: Initially inspect element 1`] = `\n+{\n+ \"id\": 2,\n+ \"owners\": null,\n+ \"context\": null,\n+ \"hooks\": null,\n+ \"props\": {\n+ \"nestedObject\": {\n+ \"a\": {},\n+ \"c\": {}\n+ }\n+ },\n+ \"state\": null\n+}\n+`;\n+\n+exports[`InspectedElementContext should include updates for nested values that were previously hydrated: 2: Inspect props.nestedObject.a 1`] = `\n+{\n+ \"id\": 2,\n+ \"owners\": null,\n+ \"context\": null,\n+ \"hooks\": null,\n+ \"props\": {\n+ \"nestedObject\": {\n+ \"a\": {\n+ \"value\": 1,\n+ \"b\": {\n+ \"value\": 1\n+ }\n+ },\n+ \"c\": {}\n+ }\n+ },\n+ \"state\": null\n+}\n+`;\n+\n+exports[`InspectedElementContext should include updates for nested values that were previously hydrated: 3: Inspect props.nestedObject.c 1`] = `\n+{\n+ \"id\": 2,\n+ \"owners\": null,\n+ \"context\": null,\n+ \"hooks\": null,\n+ \"props\": {\n+ \"nestedObject\": {\n+ \"a\": {\n+ \"value\": 1,\n+ \"b\": {\n+ \"value\": 1\n+ }\n+ },\n+ \"c\": {\n+ \"value\": 1,\n+ \"d\": {\n+ \"value\": 1,\n+ \"e\": {}\n+ }\n+ }\n+ }\n+ },\n+ \"state\": null\n+}\n+`;\n+\n+exports[`InspectedElementContext should include updates for nested values that were previously hydrated: 4: update inspected element 1`] = `\n+{\n+ \"id\": 2,\n+ \"owners\": null,\n+ \"context\": null,\n+ \"hooks\": null,\n+ \"props\": {\n+ \"nestedObject\": {\n+ \"a\": {\n+ \"value\": 2,\n+ \"b\": {\n+ \"value\": 2\n+ }\n+ },\n+ \"c\": {\n+ \"value\": 2,\n+ \"d\": {\n+ \"value\": 2,\n+ \"e\": {}\n+ }\n+ }\n+ }\n+ },\n+ \"state\": null\n+}\n+`;\n+\n+exports[`InspectedElementContext should inspect the currently selected element: 1: Inspected element 2 1`] = `\n+{\n+ \"id\": 2,\n+ \"owners\": null,\n+ \"context\": null,\n+ \"hooks\": [\n+ {\n+ \"id\": 0,\n+ \"isStateEditable\": true,\n+ \"name\": \"State\",\n+ \"value\": 1,\n+ \"subHooks\": []\n+ }\n+ ],\n+ \"props\": {\n+ \"a\": 1,\n+ \"b\": \"abc\"\n+ },\n+ \"state\": null\n+}\n+`;\n+\n+exports[`InspectedElementContext should not dehydrate nested values until explicitly requested: 1: Initially inspect element 1`] = `\n+{\n+ \"id\": 2,\n+ \"owners\": null,\n+ \"context\": null,\n+ \"hooks\": [\n+ {\n+ \"id\": 0,\n+ \"isStateEditable\": true,\n+ \"name\": \"State\",\n+ \"value\": {\n+ \"foo\": {}\n+ },\n+ \"subHooks\": []\n+ }\n+ ],\n+ \"props\": {\n+ \"nestedObject\": {\n+ \"a\": {}\n+ }\n+ },\n+ \"state\": null\n+}\n+`;\n+\n+exports[`InspectedElementContext should not dehydrate nested values until explicitly requested: 2: Inspect props.nestedObject.a 1`] = `\n+{\n+ \"id\": 2,\n+ \"owners\": null,\n+ \"context\": null,\n+ \"hooks\": [\n+ {\n+ \"id\": 0,\n+ \"isStateEditable\": true,\n+ \"name\": \"State\",\n+ \"value\": {\n+ \"foo\": {}\n+ },\n+ \"subHooks\": []\n+ }\n+ ],\n+ \"props\": {\n+ \"nestedObject\": {\n+ \"a\": {\n+ \"b\": {\n+ \"c\": {}\n+ }\n+ }\n+ }\n+ },\n+ \"state\": null\n+}\n+`;\n+\n+exports[`InspectedElementContext should not dehydrate nested values until explicitly requested: 3: Inspect props.nestedObject.a.b.c 1`] = `\n+{\n+ \"id\": 2,\n+ \"owners\": null,\n+ \"context\": null,\n+ \"hooks\": [\n+ {\n+ \"id\": 0,\n+ \"isStateEditable\": true,\n+ \"name\": \"State\",\n+ \"value\": {\n+ \"foo\": {}\n+ },\n+ \"subHooks\": []\n+ }\n+ ],\n+ \"props\": {\n+ \"nestedObject\": {\n+ \"a\": {\n+ \"b\": {\n+ \"c\": [\n+ {\n+ \"d\": {}\n+ }\n+ ]\n+ }\n+ }\n+ }\n+ },\n+ \"state\": null\n+}\n+`;\n+\n+exports[`InspectedElementContext should not dehydrate nested values until explicitly requested: 4: Inspect props.nestedObject.a.b.c.0.d 1`] = `\n+{\n+ \"id\": 2,\n+ \"owners\": null,\n+ \"context\": null,\n+ \"hooks\": [\n+ {\n+ \"id\": 0,\n+ \"isStateEditable\": true,\n+ \"name\": \"State\",\n+ \"value\": {\n+ \"foo\": {}\n+ },\n+ \"subHooks\": []\n+ }\n+ ],\n+ \"props\": {\n+ \"nestedObject\": {\n+ \"a\": {\n+ \"b\": {\n+ \"c\": [\n+ {\n+ \"d\": {\n+ \"e\": {}\n+ }\n+ }\n+ ]\n+ }\n+ }\n+ }\n+ },\n+ \"state\": null\n+}\n+`;\n+\n+exports[`InspectedElementContext should not dehydrate nested values until explicitly requested: 5: Inspect hooks.0.value 1`] = `\n+{\n+ \"id\": 2,\n+ \"owners\": null,\n+ \"context\": null,\n+ \"hooks\": [\n+ {\n+ \"id\": 0,\n+ \"isStateEditable\": true,\n+ \"name\": \"State\",\n+ \"value\": {\n+ \"foo\": {\n+ \"bar\": {}\n+ }\n+ },\n+ \"subHooks\": []\n+ }\n+ ],\n+ \"props\": {\n+ \"nestedObject\": {\n+ \"a\": {\n+ \"b\": {\n+ \"c\": [\n+ {\n+ \"d\": {\n+ \"e\": {}\n+ }\n+ }\n+ ]\n+ }\n+ }\n+ }\n+ },\n+ \"state\": null\n+}\n+`;\n+\n+exports[`InspectedElementContext should not dehydrate nested values until explicitly requested: 6: Inspect hooks.0.value.foo.bar 1`] = `\n+{\n+ \"id\": 2,\n+ \"owners\": null,\n+ \"context\": null,\n+ \"hooks\": [\n+ {\n+ \"id\": 0,\n+ \"isStateEditable\": true,\n+ \"name\": \"State\",\n+ \"value\": {\n+ \"foo\": {\n+ \"bar\": {\n+ \"baz\": \"hi\"\n+ }\n+ }\n+ },\n+ \"subHooks\": []\n+ }\n+ ],\n+ \"props\": {\n+ \"nestedObject\": {\n+ \"a\": {\n+ \"b\": {\n+ \"c\": [\n+ {\n+ \"d\": {\n+ \"e\": {}\n+ }\n+ }\n+ ]\n+ }\n+ }\n+ }\n+ },\n+ \"state\": null\n+}\n+`;\n+\n+exports[`InspectedElementContext should not re-render a function with hooks if it did not update since it was last inspected: 1: initial render 1`] = `\n+{\n+ \"id\": 3,\n+ \"owners\": null,\n+ \"context\": null,\n+ \"hooks\": [\n+ {\n+ \"id\": 0,\n+ \"isStateEditable\": true,\n+ \"name\": \"State\",\n+ \"value\": 0,\n+ \"subHooks\": []\n+ }\n+ ],\n+ \"props\": {\n+ \"a\": 1,\n+ \"b\": \"abc\"\n+ },\n+ \"state\": null\n+}\n+`;\n+\n+exports[`InspectedElementContext should not re-render a function with hooks if it did not update since it was last inspected: 2: updated state 1`] = `\n+{\n+ \"id\": 3,\n+ \"owners\": null,\n+ \"context\": null,\n+ \"hooks\": [\n+ {\n+ \"id\": 0,\n+ \"isStateEditable\": true,\n+ \"name\": \"State\",\n+ \"value\": 0,\n+ \"subHooks\": []\n+ }\n+ ],\n+ \"props\": {\n+ \"a\": 2,\n+ \"b\": \"def\"\n+ },\n+ \"state\": null\n+}\n+`;\n+\n+exports[`InspectedElementContext should not tear if hydration is requested after an update: 1: Initially inspect element 1`] = `\n+{\n+ \"id\": 2,\n+ \"owners\": null,\n+ \"context\": null,\n+ \"hooks\": null,\n+ \"props\": {\n+ \"nestedObject\": {\n+ \"value\": 1,\n+ \"a\": {}\n+ }\n+ },\n+ \"state\": null\n+}\n+`;\n+\n+exports[`InspectedElementContext should not tear if hydration is requested after an update: 2: Inspect props.nestedObject.a 1`] = `\n+{\n+ \"id\": 2,\n+ \"owners\": null,\n+ \"context\": null,\n+ \"hooks\": null,\n+ \"props\": {\n+ \"nestedObject\": {\n+ \"value\": 2,\n+ \"a\": {\n+ \"value\": 2,\n+ \"b\": {\n+ \"value\": 2\n+ }\n+ }\n+ }\n+ },\n+ \"state\": null\n+}\n+`;\n+\n+exports[`InspectedElementContext should poll for updates for the currently selected element: 1: initial render 1`] = `\n+{\n+ \"id\": 2,\n+ \"owners\": null,\n+ \"context\": null,\n+ \"hooks\": null,\n+ \"props\": {\n+ \"a\": 1,\n+ \"b\": \"abc\"\n+ },\n+ \"state\": null\n+}\n+`;\n+\n+exports[`InspectedElementContext should poll for updates for the currently selected element: 2: updated state 1`] = `\n+{\n+ \"id\": 2,\n+ \"owners\": null,\n+ \"context\": null,\n+ \"hooks\": null,\n+ \"props\": {\n+ \"a\": 2,\n+ \"b\": \"def\"\n+ },\n+ \"state\": null\n+}\n+`;\n+\n+exports[`InspectedElementContext should support complex data types: 1: Inspected element 2 1`] = `\n+{\n+ \"id\": 2,\n+ \"owners\": null,\n+ \"context\": null,\n+ \"hooks\": null,\n+ \"props\": {\n+ \"html_element\": {},\n+ \"fn\": {},\n+ \"symbol\": {},\n+ \"react_element\": {},\n+ \"array_buffer\": {},\n+ \"typed_array\": {},\n+ \"date\": {}\n+ },\n+ \"state\": null\n+}\n+`;\n+\n+exports[`InspectedElementContext should support custom objects with enumerable properties and getters: 1: Inspected element 2 1`] = `\n+{\n+ \"id\": 2,\n+ \"owners\": null,\n+ \"context\": null,\n+ \"hooks\": null,\n+ \"props\": {\n+ \"data\": {\n+ \"_number\": 42,\n+ \"number\": 42\n+ }\n+ },\n+ \"state\": null\n+}\n+`;\n+\n+exports[`InspectedElementContext should support simple data types: 1: Initial inspection 1`] = `\n+{\n+ \"id\": 2,\n+ \"owners\": null,\n+ \"context\": null,\n+ \"hooks\": null,\n+ \"props\": {\n+ \"boolean_false\": false,\n+ \"boolean_true\": true,\n+ \"infinity\": null,\n+ \"integer_zero\": 0,\n+ \"integer_one\": 1,\n+ \"float\": 1.23,\n+ \"string\": \"abc\",\n+ \"string_empty\": \"\",\n+ \"nan\": null,\n+ \"value_null\": null\n+ },\n+ \"state\": null\n+}\n+`;\ndiff --git a\/src\/__tests__\/__snapshots__\/ownersListContext-test.js.snap b\/src\/__tests__\/__snapshots__\/ownersListContext-test.js.snap\nnew file mode 100644\nindex 0000000000..0699eb5b18\n--- \/dev\/null\n+++ b\/src\/__tests__\/__snapshots__\/ownersListContext-test.js.snap\n@@ -0,0 +1,95 @@\n+\/\/ Jest Snapshot v1, https:\/\/goo.gl\/fbAQLP\n+\n+exports[`OwnersListContext should fetch the owners list for the selected element that includes filtered components: mount 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ <Child>\n+ <Child>\n+`;\n+\n+exports[`OwnersListContext should fetch the owners list for the selected element that includes filtered components: owners for \"Child\" 1`] = `\n+Array [\n+ Object {\n+ \"displayName\": \"Grandparent\",\n+ \"hocDisplayNames\": null,\n+ \"id\": 7,\n+ \"type\": 5,\n+ },\n+ Object {\n+ \"displayName\": \"Parent\",\n+ \"hocDisplayNames\": null,\n+ \"id\": 9,\n+ \"type\": 5,\n+ },\n+ Object {\n+ \"displayName\": \"Child\",\n+ \"hocDisplayNames\": null,\n+ \"id\": 8,\n+ \"type\": 5,\n+ },\n+]\n+`;\n+\n+exports[`OwnersListContext should fetch the owners list for the selected element: mount 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ ▾ <Parent>\n+ <Child>\n+ <Child>\n+`;\n+\n+exports[`OwnersListContext should fetch the owners list for the selected element: owners for \"Child\" 1`] = `\n+Array [\n+ Object {\n+ \"displayName\": \"Grandparent\",\n+ \"hocDisplayNames\": null,\n+ \"id\": 2,\n+ \"type\": 5,\n+ },\n+ Object {\n+ \"displayName\": \"Parent\",\n+ \"hocDisplayNames\": null,\n+ \"id\": 3,\n+ \"type\": 5,\n+ },\n+ Object {\n+ \"displayName\": \"Child\",\n+ \"hocDisplayNames\": null,\n+ \"id\": 4,\n+ \"type\": 5,\n+ },\n+]\n+`;\n+\n+exports[`OwnersListContext should fetch the owners list for the selected element: owners for \"Parent\" 1`] = `\n+Array [\n+ Object {\n+ \"displayName\": \"Grandparent\",\n+ \"hocDisplayNames\": null,\n+ \"id\": 2,\n+ \"type\": 5,\n+ },\n+ Object {\n+ \"displayName\": \"Parent\",\n+ \"hocDisplayNames\": null,\n+ \"id\": 3,\n+ \"type\": 5,\n+ },\n+]\n+`;\n+\n+exports[`OwnersListContext should include the current element even if there are no other owners: mount 1`] = `\n+[root]\n+ <Grandparent>\n+`;\n+\n+exports[`OwnersListContext should include the current element even if there are no other owners: owners for \"Grandparent\" 1`] = `\n+Array [\n+ Object {\n+ \"displayName\": \"Grandparent\",\n+ \"hocDisplayNames\": null,\n+ \"id\": 5,\n+ \"type\": 5,\n+ },\n+]\n+`;\ndiff --git a\/src\/__tests__\/__snapshots__\/profilerContext-test.js.snap b\/src\/__tests__\/__snapshots__\/profilerContext-test.js.snap\nnew file mode 100644\nindex 0000000000..927f3180b4\n--- \/dev\/null\n+++ b\/src\/__tests__\/__snapshots__\/profilerContext-test.js.snap\n@@ -0,0 +1,41 @@\n+\/\/ Jest Snapshot v1, https:\/\/goo.gl\/fbAQLP\n+\n+exports[`ProfilerContext should auto-select the root ID matching the Components tab selection if it has profiling data: mounted 1`] = `\n+[root]\n+ ▾ <Parent>\n+ <Child>\n+[root]\n+ ▾ <Parent>\n+ <Child>\n+`;\n+\n+exports[`ProfilerContext should maintain root selection between profiling sessions so long as there is data for that root: mounted 1`] = `\n+[root]\n+ ▾ <Parent>\n+ <Child>\n+[root]\n+ ▾ <Parent>\n+ <Child>\n+`;\n+\n+exports[`ProfilerContext should not select the root ID matching the Components tab selection if it has no profiling data: mounted 1`] = `\n+[root]\n+ ▾ <Parent>\n+ <Child>\n+[root]\n+ ▾ <Parent>\n+ <Child>\n+`;\n+\n+exports[`ProfilerContext should sync selected element in the Components tab too, provided the element is a match: mounted 1`] = `\n+[root]\n+ ▾ <GrandParent>\n+ ▾ <Parent>\n+ <Child>\n+`;\n+\n+exports[`ProfilerContext should sync selected element in the Components tab too, provided the element is a match: updated 1`] = `\n+[root]\n+ ▾ <GrandParent>\n+ <Parent>\n+`;\ndiff --git a\/src\/__tests__\/__snapshots__\/profilingCache-test.js.snap b\/src\/__tests__\/__snapshots__\/profilingCache-test.js.snap\nnew file mode 100644\nindex 0000000000..82438ada7c\n--- \/dev\/null\n+++ b\/src\/__tests__\/__snapshots__\/profilingCache-test.js.snap\n@@ -0,0 +1,3632 @@\n+\/\/ Jest Snapshot v1, https:\/\/goo.gl\/fbAQLP\n+\n+exports[`ProfilingCache should calculate a self duration based on actual children (not filtered children): CommitDetails with filtered self durations 1`] = `\n+Object {\n+ \"changeDescriptions\": Map {\n+ 2 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ 3 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ 5 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ },\n+ \"duration\": 16,\n+ \"fiberActualDurations\": Map {\n+ 1 => 16,\n+ 2 => 16,\n+ 3 => 1,\n+ 5 => 1,\n+ },\n+ \"fiberSelfDurations\": Map {\n+ 1 => 0,\n+ 2 => 10,\n+ 3 => 1,\n+ 5 => 1,\n+ },\n+ \"interactionIDs\": Array [],\n+ \"priorityLevel\": \"Immediate\",\n+ \"timestamp\": 16,\n+}\n+`;\n+\n+exports[`ProfilingCache should calculate self duration correctly for suspended views: CommitDetails with filtered self durations 1`] = `\n+Object {\n+ \"changeDescriptions\": Map {\n+ 2 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ 4 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ },\n+ \"duration\": 15,\n+ \"fiberActualDurations\": Map {\n+ 1 => 15,\n+ 2 => 15,\n+ 3 => 5,\n+ 4 => 2,\n+ },\n+ \"fiberSelfDurations\": Map {\n+ 1 => 0,\n+ 2 => 10,\n+ 3 => 3,\n+ 4 => 2,\n+ },\n+ \"interactionIDs\": Array [],\n+ \"priorityLevel\": \"Immediate\",\n+ \"timestamp\": 15,\n+}\n+`;\n+\n+exports[`ProfilingCache should calculate self duration correctly for suspended views: CommitDetails with filtered self durations 2`] = `\n+Object {\n+ \"changeDescriptions\": Map {\n+ 5 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ },\n+ \"duration\": 3,\n+ \"fiberActualDurations\": Map {\n+ 5 => 3,\n+ 3 => 3,\n+ },\n+ \"fiberSelfDurations\": Map {\n+ 5 => 3,\n+ 3 => 0,\n+ },\n+ \"interactionIDs\": Array [],\n+ \"priorityLevel\": \"Immediate\",\n+ \"timestamp\": 18,\n+}\n+`;\n+\n+exports[`ProfilingCache should collect data for each commit: CommitDetails commitIndex: 0 1`] = `\n+Object {\n+ \"changeDescriptions\": Map {\n+ 2 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ 3 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ 4 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ 5 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ },\n+ \"duration\": 12,\n+ \"fiberActualDurations\": Map {\n+ 1 => 12,\n+ 2 => 12,\n+ 3 => 0,\n+ 4 => 1,\n+ 5 => 1,\n+ },\n+ \"fiberSelfDurations\": Map {\n+ 1 => 0,\n+ 2 => 10,\n+ 3 => 0,\n+ 4 => 1,\n+ 5 => 1,\n+ },\n+ \"interactionIDs\": Array [],\n+ \"priorityLevel\": \"Immediate\",\n+ \"timestamp\": 12,\n+}\n+`;\n+\n+exports[`ProfilingCache should collect data for each commit: CommitDetails commitIndex: 1 1`] = `\n+Object {\n+ \"changeDescriptions\": Map {\n+ 3 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ 4 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ 6 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ 2 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [\n+ \"count\",\n+ ],\n+ \"state\": null,\n+ },\n+ },\n+ \"duration\": 13,\n+ \"fiberActualDurations\": Map {\n+ 3 => 0,\n+ 4 => 1,\n+ 6 => 2,\n+ 2 => 13,\n+ 1 => 13,\n+ },\n+ \"fiberSelfDurations\": Map {\n+ 3 => 0,\n+ 4 => 1,\n+ 6 => 2,\n+ 2 => 10,\n+ 1 => 0,\n+ },\n+ \"interactionIDs\": Array [],\n+ \"priorityLevel\": \"Immediate\",\n+ \"timestamp\": 25,\n+}\n+`;\n+\n+exports[`ProfilingCache should collect data for each commit: CommitDetails commitIndex: 2 1`] = `\n+Object {\n+ \"changeDescriptions\": Map {\n+ 3 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ 2 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [\n+ \"count\",\n+ ],\n+ \"state\": null,\n+ },\n+ },\n+ \"duration\": 10,\n+ \"fiberActualDurations\": Map {\n+ 3 => 0,\n+ 2 => 10,\n+ 1 => 10,\n+ },\n+ \"fiberSelfDurations\": Map {\n+ 3 => 0,\n+ 2 => 10,\n+ 1 => 0,\n+ },\n+ \"interactionIDs\": Array [],\n+ \"priorityLevel\": \"Immediate\",\n+ \"timestamp\": 35,\n+}\n+`;\n+\n+exports[`ProfilingCache should collect data for each commit: CommitDetails commitIndex: 3 1`] = `\n+Object {\n+ \"changeDescriptions\": Map {\n+ 2 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [\n+ \"count\",\n+ ],\n+ \"state\": null,\n+ },\n+ },\n+ \"duration\": 10,\n+ \"fiberActualDurations\": Map {\n+ 2 => 10,\n+ 1 => 10,\n+ },\n+ \"fiberSelfDurations\": Map {\n+ 2 => 10,\n+ 1 => 0,\n+ },\n+ \"interactionIDs\": Array [],\n+ \"priorityLevel\": \"Immediate\",\n+ \"timestamp\": 45,\n+}\n+`;\n+\n+exports[`ProfilingCache should collect data for each commit: imported data 1`] = `\n+Object {\n+ \"dataForRoots\": Array [\n+ Object {\n+ \"commitData\": Array [\n+ Object {\n+ \"changeDescriptions\": Array [\n+ Array [\n+ 2,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 3,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 4,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 5,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ ],\n+ ],\n+ \"duration\": 12,\n+ \"fiberActualDurations\": Array [\n+ Array [\n+ 1,\n+ 12,\n+ ],\n+ Array [\n+ 2,\n+ 12,\n+ ],\n+ Array [\n+ 3,\n+ 0,\n+ ],\n+ Array [\n+ 4,\n+ 1,\n+ ],\n+ Array [\n+ 5,\n+ 1,\n+ ],\n+ ],\n+ \"fiberSelfDurations\": Array [\n+ Array [\n+ 1,\n+ 0,\n+ ],\n+ Array [\n+ 2,\n+ 10,\n+ ],\n+ Array [\n+ 3,\n+ 0,\n+ ],\n+ Array [\n+ 4,\n+ 1,\n+ ],\n+ Array [\n+ 5,\n+ 1,\n+ ],\n+ ],\n+ \"interactionIDs\": Array [],\n+ \"priorityLevel\": \"Immediate\",\n+ \"timestamp\": 12,\n+ },\n+ Object {\n+ \"changeDescriptions\": Array [\n+ Array [\n+ 3,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 4,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 6,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 2,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [\n+ \"count\",\n+ ],\n+ \"state\": null,\n+ },\n+ ],\n+ ],\n+ \"duration\": 13,\n+ \"fiberActualDurations\": Array [\n+ Array [\n+ 3,\n+ 0,\n+ ],\n+ Array [\n+ 4,\n+ 1,\n+ ],\n+ Array [\n+ 6,\n+ 2,\n+ ],\n+ Array [\n+ 2,\n+ 13,\n+ ],\n+ Array [\n+ 1,\n+ 13,\n+ ],\n+ ],\n+ \"fiberSelfDurations\": Array [\n+ Array [\n+ 3,\n+ 0,\n+ ],\n+ Array [\n+ 4,\n+ 1,\n+ ],\n+ Array [\n+ 6,\n+ 2,\n+ ],\n+ Array [\n+ 2,\n+ 10,\n+ ],\n+ Array [\n+ 1,\n+ 0,\n+ ],\n+ ],\n+ \"interactionIDs\": Array [],\n+ \"priorityLevel\": \"Immediate\",\n+ \"timestamp\": 25,\n+ },\n+ Object {\n+ \"changeDescriptions\": Array [\n+ Array [\n+ 3,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 2,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [\n+ \"count\",\n+ ],\n+ \"state\": null,\n+ },\n+ ],\n+ ],\n+ \"duration\": 10,\n+ \"fiberActualDurations\": Array [\n+ Array [\n+ 3,\n+ 0,\n+ ],\n+ Array [\n+ 2,\n+ 10,\n+ ],\n+ Array [\n+ 1,\n+ 10,\n+ ],\n+ ],\n+ \"fiberSelfDurations\": Array [\n+ Array [\n+ 3,\n+ 0,\n+ ],\n+ Array [\n+ 2,\n+ 10,\n+ ],\n+ Array [\n+ 1,\n+ 0,\n+ ],\n+ ],\n+ \"interactionIDs\": Array [],\n+ \"priorityLevel\": \"Immediate\",\n+ \"timestamp\": 35,\n+ },\n+ Object {\n+ \"changeDescriptions\": Array [\n+ Array [\n+ 2,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [\n+ \"count\",\n+ ],\n+ \"state\": null,\n+ },\n+ ],\n+ ],\n+ \"duration\": 10,\n+ \"fiberActualDurations\": Array [\n+ Array [\n+ 2,\n+ 10,\n+ ],\n+ Array [\n+ 1,\n+ 10,\n+ ],\n+ ],\n+ \"fiberSelfDurations\": Array [\n+ Array [\n+ 2,\n+ 10,\n+ ],\n+ Array [\n+ 1,\n+ 0,\n+ ],\n+ ],\n+ \"interactionIDs\": Array [],\n+ \"priorityLevel\": \"Immediate\",\n+ \"timestamp\": 45,\n+ },\n+ ],\n+ \"displayName\": \"Parent\",\n+ \"initialTreeBaseDurations\": Array [],\n+ \"interactionCommits\": Array [],\n+ \"interactions\": Array [],\n+ \"operations\": Array [\n+ Array [\n+ 1,\n+ 1,\n+ 17,\n+ 6,\n+ 80,\n+ 97,\n+ 114,\n+ 101,\n+ 110,\n+ 116,\n+ 5,\n+ 67,\n+ 104,\n+ 105,\n+ 108,\n+ 100,\n+ 1,\n+ 48,\n+ 1,\n+ 49,\n+ 1,\n+ 1,\n+ 11,\n+ 1,\n+ 1,\n+ 4,\n+ 1,\n+ 12000,\n+ 1,\n+ 2,\n+ 5,\n+ 1,\n+ 0,\n+ 1,\n+ 0,\n+ 4,\n+ 2,\n+ 12000,\n+ 1,\n+ 3,\n+ 5,\n+ 2,\n+ 2,\n+ 2,\n+ 3,\n+ 4,\n+ 3,\n+ 0,\n+ 1,\n+ 4,\n+ 5,\n+ 2,\n+ 2,\n+ 2,\n+ 4,\n+ 4,\n+ 4,\n+ 1000,\n+ 1,\n+ 5,\n+ 8,\n+ 2,\n+ 2,\n+ 2,\n+ 0,\n+ 4,\n+ 5,\n+ 1000,\n+ ],\n+ Array [\n+ 1,\n+ 1,\n+ 8,\n+ 5,\n+ 67,\n+ 104,\n+ 105,\n+ 108,\n+ 100,\n+ 1,\n+ 50,\n+ 1,\n+ 6,\n+ 5,\n+ 2,\n+ 2,\n+ 1,\n+ 2,\n+ 4,\n+ 6,\n+ 2000,\n+ 4,\n+ 2,\n+ 14000,\n+ 3,\n+ 2,\n+ 4,\n+ 3,\n+ 4,\n+ 6,\n+ 5,\n+ 4,\n+ 1,\n+ 14000,\n+ ],\n+ Array [\n+ 1,\n+ 1,\n+ 0,\n+ 2,\n+ 2,\n+ 6,\n+ 4,\n+ 4,\n+ 2,\n+ 11000,\n+ 3,\n+ 2,\n+ 2,\n+ 3,\n+ 5,\n+ 4,\n+ 1,\n+ 11000,\n+ ],\n+ Array [\n+ 1,\n+ 1,\n+ 0,\n+ 2,\n+ 1,\n+ 3,\n+ ],\n+ ],\n+ \"rootID\": 1,\n+ \"snapshots\": Array [],\n+ },\n+ ],\n+ \"version\": 4,\n+}\n+`;\n+\n+exports[`ProfilingCache should collect data for each rendered fiber: FiberCommits: element 2 1`] = `\n+Array [\n+ 0,\n+ 1,\n+ 2,\n+]\n+`;\n+\n+exports[`ProfilingCache should collect data for each rendered fiber: FiberCommits: element 3 1`] = `\n+Array [\n+ 0,\n+ 1,\n+ 2,\n+]\n+`;\n+\n+exports[`ProfilingCache should collect data for each rendered fiber: FiberCommits: element 4 1`] = `\n+Array [\n+ 0,\n+]\n+`;\n+\n+exports[`ProfilingCache should collect data for each rendered fiber: FiberCommits: element 5 1`] = `\n+Array [\n+ 1,\n+ 2,\n+]\n+`;\n+\n+exports[`ProfilingCache should collect data for each rendered fiber: FiberCommits: element 6 1`] = `\n+Array [\n+ 2,\n+]\n+`;\n+\n+exports[`ProfilingCache should collect data for each rendered fiber: imported data 1`] = `\n+Object {\n+ \"dataForRoots\": Array [\n+ Object {\n+ \"commitData\": Array [\n+ Object {\n+ \"changeDescriptions\": Array [\n+ Array [\n+ 2,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 3,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 4,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ ],\n+ ],\n+ \"duration\": 11,\n+ \"fiberActualDurations\": Array [\n+ Array [\n+ 1,\n+ 11,\n+ ],\n+ Array [\n+ 2,\n+ 11,\n+ ],\n+ Array [\n+ 3,\n+ 0,\n+ ],\n+ Array [\n+ 4,\n+ 1,\n+ ],\n+ ],\n+ \"fiberSelfDurations\": Array [\n+ Array [\n+ 1,\n+ 0,\n+ ],\n+ Array [\n+ 2,\n+ 10,\n+ ],\n+ Array [\n+ 3,\n+ 0,\n+ ],\n+ Array [\n+ 4,\n+ 1,\n+ ],\n+ ],\n+ \"interactionIDs\": Array [],\n+ \"priorityLevel\": \"Immediate\",\n+ \"timestamp\": 11,\n+ },\n+ Object {\n+ \"changeDescriptions\": Array [\n+ Array [\n+ 3,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 5,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 2,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [\n+ \"count\",\n+ ],\n+ \"state\": null,\n+ },\n+ ],\n+ ],\n+ \"duration\": 11,\n+ \"fiberActualDurations\": Array [\n+ Array [\n+ 3,\n+ 0,\n+ ],\n+ Array [\n+ 5,\n+ 1,\n+ ],\n+ Array [\n+ 2,\n+ 11,\n+ ],\n+ Array [\n+ 1,\n+ 11,\n+ ],\n+ ],\n+ \"fiberSelfDurations\": Array [\n+ Array [\n+ 3,\n+ 0,\n+ ],\n+ Array [\n+ 5,\n+ 1,\n+ ],\n+ Array [\n+ 2,\n+ 10,\n+ ],\n+ Array [\n+ 1,\n+ 0,\n+ ],\n+ ],\n+ \"interactionIDs\": Array [],\n+ \"priorityLevel\": \"Immediate\",\n+ \"timestamp\": 22,\n+ },\n+ Object {\n+ \"changeDescriptions\": Array [\n+ Array [\n+ 3,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 5,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 6,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 2,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [\n+ \"count\",\n+ ],\n+ \"state\": null,\n+ },\n+ ],\n+ ],\n+ \"duration\": 13,\n+ \"fiberActualDurations\": Array [\n+ Array [\n+ 3,\n+ 0,\n+ ],\n+ Array [\n+ 5,\n+ 1,\n+ ],\n+ Array [\n+ 6,\n+ 2,\n+ ],\n+ Array [\n+ 2,\n+ 13,\n+ ],\n+ Array [\n+ 1,\n+ 13,\n+ ],\n+ ],\n+ \"fiberSelfDurations\": Array [\n+ Array [\n+ 3,\n+ 0,\n+ ],\n+ Array [\n+ 5,\n+ 1,\n+ ],\n+ Array [\n+ 6,\n+ 2,\n+ ],\n+ Array [\n+ 2,\n+ 10,\n+ ],\n+ Array [\n+ 1,\n+ 0,\n+ ],\n+ ],\n+ \"interactionIDs\": Array [],\n+ \"priorityLevel\": \"Immediate\",\n+ \"timestamp\": 35,\n+ },\n+ ],\n+ \"displayName\": \"Parent\",\n+ \"initialTreeBaseDurations\": Array [],\n+ \"interactionCommits\": Array [],\n+ \"interactions\": Array [],\n+ \"operations\": Array [\n+ Array [\n+ 1,\n+ 1,\n+ 15,\n+ 6,\n+ 80,\n+ 97,\n+ 114,\n+ 101,\n+ 110,\n+ 116,\n+ 5,\n+ 67,\n+ 104,\n+ 105,\n+ 108,\n+ 100,\n+ 1,\n+ 48,\n+ 1,\n+ 1,\n+ 11,\n+ 1,\n+ 1,\n+ 4,\n+ 1,\n+ 11000,\n+ 1,\n+ 2,\n+ 5,\n+ 1,\n+ 0,\n+ 1,\n+ 0,\n+ 4,\n+ 2,\n+ 11000,\n+ 1,\n+ 3,\n+ 5,\n+ 2,\n+ 2,\n+ 2,\n+ 3,\n+ 4,\n+ 3,\n+ 0,\n+ 1,\n+ 4,\n+ 8,\n+ 2,\n+ 2,\n+ 2,\n+ 0,\n+ 4,\n+ 4,\n+ 1000,\n+ ],\n+ Array [\n+ 1,\n+ 1,\n+ 8,\n+ 5,\n+ 67,\n+ 104,\n+ 105,\n+ 108,\n+ 100,\n+ 1,\n+ 49,\n+ 1,\n+ 5,\n+ 5,\n+ 2,\n+ 2,\n+ 1,\n+ 2,\n+ 4,\n+ 5,\n+ 1000,\n+ 4,\n+ 2,\n+ 12000,\n+ 3,\n+ 2,\n+ 3,\n+ 3,\n+ 5,\n+ 4,\n+ 4,\n+ 1,\n+ 12000,\n+ ],\n+ Array [\n+ 1,\n+ 1,\n+ 8,\n+ 5,\n+ 67,\n+ 104,\n+ 105,\n+ 108,\n+ 100,\n+ 1,\n+ 50,\n+ 1,\n+ 6,\n+ 5,\n+ 2,\n+ 2,\n+ 1,\n+ 2,\n+ 4,\n+ 6,\n+ 2000,\n+ 4,\n+ 2,\n+ 14000,\n+ 3,\n+ 2,\n+ 4,\n+ 3,\n+ 5,\n+ 6,\n+ 4,\n+ 4,\n+ 1,\n+ 14000,\n+ ],\n+ ],\n+ \"rootID\": 1,\n+ \"snapshots\": Array [],\n+ },\n+ ],\n+ \"version\": 4,\n+}\n+`;\n+\n+exports[`ProfilingCache should collect data for each root (including ones added or mounted after profiling started): Data for root Parent 1`] = `\n+Object {\n+ \"commitData\": Array [\n+ Object {\n+ \"changeDescriptions\": Map {\n+ 3 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ 4 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ 10 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ 2 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [\n+ \"count\",\n+ ],\n+ \"state\": null,\n+ },\n+ },\n+ \"duration\": 13,\n+ \"fiberActualDurations\": Map {\n+ 3 => 0,\n+ 4 => 1,\n+ 10 => 2,\n+ 2 => 13,\n+ 1 => 13,\n+ },\n+ \"fiberSelfDurations\": Map {\n+ 3 => 0,\n+ 4 => 1,\n+ 10 => 2,\n+ 2 => 10,\n+ 1 => 0,\n+ },\n+ \"interactionIDs\": Array [],\n+ \"priorityLevel\": \"Immediate\",\n+ \"timestamp\": 13,\n+ },\n+ Object {\n+ \"changeDescriptions\": Map {\n+ 3 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ 2 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [\n+ \"count\",\n+ ],\n+ \"state\": null,\n+ },\n+ },\n+ \"duration\": 10,\n+ \"fiberActualDurations\": Map {\n+ 3 => 0,\n+ 2 => 10,\n+ 1 => 10,\n+ },\n+ \"fiberSelfDurations\": Map {\n+ 3 => 0,\n+ 2 => 10,\n+ 1 => 0,\n+ },\n+ \"interactionIDs\": Array [],\n+ \"priorityLevel\": \"Immediate\",\n+ \"timestamp\": 34,\n+ },\n+ Object {\n+ \"changeDescriptions\": Map {\n+ 2 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [\n+ \"count\",\n+ ],\n+ \"state\": null,\n+ },\n+ },\n+ \"duration\": 10,\n+ \"fiberActualDurations\": Map {\n+ 2 => 10,\n+ 1 => 10,\n+ },\n+ \"fiberSelfDurations\": Map {\n+ 2 => 10,\n+ 1 => 0,\n+ },\n+ \"interactionIDs\": Array [],\n+ \"priorityLevel\": \"Immediate\",\n+ \"timestamp\": 44,\n+ },\n+ ],\n+ \"displayName\": \"Parent\",\n+ \"initialTreeBaseDurations\": Map {\n+ 1 => 12,\n+ 2 => 12,\n+ 3 => 0,\n+ 4 => 1,\n+ 5 => 1,\n+ },\n+ \"interactionCommits\": Map {},\n+ \"interactions\": Map {},\n+ \"operations\": Array [\n+ Array [\n+ 1,\n+ 1,\n+ 8,\n+ 5,\n+ 67,\n+ 104,\n+ 105,\n+ 108,\n+ 100,\n+ 1,\n+ 50,\n+ 1,\n+ 10,\n+ 5,\n+ 2,\n+ 2,\n+ 1,\n+ 2,\n+ 4,\n+ 10,\n+ 2000,\n+ 4,\n+ 2,\n+ 14000,\n+ 3,\n+ 2,\n+ 4,\n+ 3,\n+ 4,\n+ 10,\n+ 5,\n+ 4,\n+ 1,\n+ 14000,\n+ ],\n+ Array [\n+ 1,\n+ 1,\n+ 0,\n+ 2,\n+ 2,\n+ 10,\n+ 4,\n+ 4,\n+ 2,\n+ 11000,\n+ 3,\n+ 2,\n+ 2,\n+ 3,\n+ 5,\n+ 4,\n+ 1,\n+ 11000,\n+ ],\n+ Array [\n+ 1,\n+ 1,\n+ 0,\n+ 2,\n+ 1,\n+ 3,\n+ ],\n+ ],\n+ \"rootID\": 1,\n+ \"snapshots\": Map {\n+ 1 => Object {\n+ \"children\": Array [\n+ 2,\n+ ],\n+ \"displayName\": null,\n+ \"id\": 1,\n+ \"key\": null,\n+ \"type\": 11,\n+ },\n+ 2 => Object {\n+ \"children\": Array [\n+ 3,\n+ 4,\n+ 5,\n+ ],\n+ \"displayName\": \"Parent\",\n+ \"id\": 2,\n+ \"key\": null,\n+ \"type\": 5,\n+ },\n+ 3 => Object {\n+ \"children\": Array [],\n+ \"displayName\": \"Child\",\n+ \"id\": 3,\n+ \"key\": \"0\",\n+ \"type\": 5,\n+ },\n+ 4 => Object {\n+ \"children\": Array [],\n+ \"displayName\": \"Child\",\n+ \"id\": 4,\n+ \"key\": \"1\",\n+ \"type\": 5,\n+ },\n+ 5 => Object {\n+ \"children\": Array [],\n+ \"displayName\": \"Child\",\n+ \"id\": 5,\n+ \"key\": null,\n+ \"type\": 8,\n+ },\n+ },\n+}\n+`;\n+\n+exports[`ProfilingCache should collect data for each root (including ones added or mounted after profiling started): Data for root Parent 2`] = `\n+Object {\n+ \"commitData\": Array [\n+ Object {\n+ \"changeDescriptions\": Map {\n+ 12 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ 13 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ 14 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ },\n+ \"duration\": 11,\n+ \"fiberActualDurations\": Map {\n+ 11 => 11,\n+ 12 => 11,\n+ 13 => 0,\n+ 14 => 1,\n+ },\n+ \"fiberSelfDurations\": Map {\n+ 11 => 0,\n+ 12 => 10,\n+ 13 => 0,\n+ 14 => 1,\n+ },\n+ \"interactionIDs\": Array [],\n+ \"priorityLevel\": \"Immediate\",\n+ \"timestamp\": 24,\n+ },\n+ ],\n+ \"displayName\": \"Parent\",\n+ \"initialTreeBaseDurations\": Map {},\n+ \"interactionCommits\": Map {},\n+ \"interactions\": Map {},\n+ \"operations\": Array [\n+ Array [\n+ 1,\n+ 11,\n+ 15,\n+ 6,\n+ 80,\n+ 97,\n+ 114,\n+ 101,\n+ 110,\n+ 116,\n+ 5,\n+ 67,\n+ 104,\n+ 105,\n+ 108,\n+ 100,\n+ 1,\n+ 48,\n+ 1,\n+ 11,\n+ 11,\n+ 1,\n+ 1,\n+ 4,\n+ 11,\n+ 11000,\n+ 1,\n+ 12,\n+ 5,\n+ 11,\n+ 0,\n+ 1,\n+ 0,\n+ 4,\n+ 12,\n+ 11000,\n+ 1,\n+ 13,\n+ 5,\n+ 12,\n+ 12,\n+ 2,\n+ 3,\n+ 4,\n+ 13,\n+ 0,\n+ 1,\n+ 14,\n+ 8,\n+ 12,\n+ 12,\n+ 2,\n+ 0,\n+ 4,\n+ 14,\n+ 1000,\n+ ],\n+ ],\n+ \"rootID\": 11,\n+ \"snapshots\": Map {},\n+}\n+`;\n+\n+exports[`ProfilingCache should collect data for each root (including ones added or mounted after profiling started): Data for root Parent 3`] = `\n+Object {\n+ \"commitData\": Array [\n+ Object {\n+ \"changeDescriptions\": Map {},\n+ \"duration\": 0,\n+ \"fiberActualDurations\": Map {},\n+ \"fiberSelfDurations\": Map {},\n+ \"interactionIDs\": Array [],\n+ \"priorityLevel\": \"Immediate\",\n+ \"timestamp\": 34,\n+ },\n+ ],\n+ \"displayName\": \"Parent\",\n+ \"initialTreeBaseDurations\": Map {\n+ 6 => 11,\n+ 7 => 11,\n+ 8 => 0,\n+ 9 => 1,\n+ },\n+ \"interactionCommits\": Map {},\n+ \"interactions\": Map {},\n+ \"operations\": Array [\n+ Array [\n+ 1,\n+ 6,\n+ 0,\n+ 2,\n+ 4,\n+ 9,\n+ 8,\n+ 7,\n+ 6,\n+ ],\n+ ],\n+ \"rootID\": 6,\n+ \"snapshots\": Map {\n+ 6 => Object {\n+ \"children\": Array [\n+ 7,\n+ ],\n+ \"displayName\": null,\n+ \"id\": 6,\n+ \"key\": null,\n+ \"type\": 11,\n+ },\n+ 7 => Object {\n+ \"children\": Array [\n+ 8,\n+ 9,\n+ ],\n+ \"displayName\": \"Parent\",\n+ \"id\": 7,\n+ \"key\": null,\n+ \"type\": 5,\n+ },\n+ 8 => Object {\n+ \"children\": Array [],\n+ \"displayName\": \"Child\",\n+ \"id\": 8,\n+ \"key\": \"0\",\n+ \"type\": 5,\n+ },\n+ 9 => Object {\n+ \"children\": Array [],\n+ \"displayName\": \"Child\",\n+ \"id\": 9,\n+ \"key\": null,\n+ \"type\": 8,\n+ },\n+ },\n+}\n+`;\n+\n+exports[`ProfilingCache should collect data for each root (including ones added or mounted after profiling started): imported data 1`] = `\n+Object {\n+ \"dataForRoots\": Array [\n+ Object {\n+ \"commitData\": Array [\n+ Object {\n+ \"changeDescriptions\": Array [\n+ Array [\n+ 3,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 4,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 10,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 2,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [\n+ \"count\",\n+ ],\n+ \"state\": null,\n+ },\n+ ],\n+ ],\n+ \"duration\": 13,\n+ \"fiberActualDurations\": Array [\n+ Array [\n+ 3,\n+ 0,\n+ ],\n+ Array [\n+ 4,\n+ 1,\n+ ],\n+ Array [\n+ 10,\n+ 2,\n+ ],\n+ Array [\n+ 2,\n+ 13,\n+ ],\n+ Array [\n+ 1,\n+ 13,\n+ ],\n+ ],\n+ \"fiberSelfDurations\": Array [\n+ Array [\n+ 3,\n+ 0,\n+ ],\n+ Array [\n+ 4,\n+ 1,\n+ ],\n+ Array [\n+ 10,\n+ 2,\n+ ],\n+ Array [\n+ 2,\n+ 10,\n+ ],\n+ Array [\n+ 1,\n+ 0,\n+ ],\n+ ],\n+ \"interactionIDs\": Array [],\n+ \"priorityLevel\": \"Immediate\",\n+ \"timestamp\": 13,\n+ },\n+ Object {\n+ \"changeDescriptions\": Array [\n+ Array [\n+ 3,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 2,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [\n+ \"count\",\n+ ],\n+ \"state\": null,\n+ },\n+ ],\n+ ],\n+ \"duration\": 10,\n+ \"fiberActualDurations\": Array [\n+ Array [\n+ 3,\n+ 0,\n+ ],\n+ Array [\n+ 2,\n+ 10,\n+ ],\n+ Array [\n+ 1,\n+ 10,\n+ ],\n+ ],\n+ \"fiberSelfDurations\": Array [\n+ Array [\n+ 3,\n+ 0,\n+ ],\n+ Array [\n+ 2,\n+ 10,\n+ ],\n+ Array [\n+ 1,\n+ 0,\n+ ],\n+ ],\n+ \"interactionIDs\": Array [],\n+ \"priorityLevel\": \"Immediate\",\n+ \"timestamp\": 34,\n+ },\n+ Object {\n+ \"changeDescriptions\": Array [\n+ Array [\n+ 2,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [\n+ \"count\",\n+ ],\n+ \"state\": null,\n+ },\n+ ],\n+ ],\n+ \"duration\": 10,\n+ \"fiberActualDurations\": Array [\n+ Array [\n+ 2,\n+ 10,\n+ ],\n+ Array [\n+ 1,\n+ 10,\n+ ],\n+ ],\n+ \"fiberSelfDurations\": Array [\n+ Array [\n+ 2,\n+ 10,\n+ ],\n+ Array [\n+ 1,\n+ 0,\n+ ],\n+ ],\n+ \"interactionIDs\": Array [],\n+ \"priorityLevel\": \"Immediate\",\n+ \"timestamp\": 44,\n+ },\n+ ],\n+ \"displayName\": \"Parent\",\n+ \"initialTreeBaseDurations\": Array [\n+ Array [\n+ 1,\n+ 12,\n+ ],\n+ Array [\n+ 2,\n+ 12,\n+ ],\n+ Array [\n+ 3,\n+ 0,\n+ ],\n+ Array [\n+ 4,\n+ 1,\n+ ],\n+ Array [\n+ 5,\n+ 1,\n+ ],\n+ ],\n+ \"interactionCommits\": Array [],\n+ \"interactions\": Array [],\n+ \"operations\": Array [\n+ Array [\n+ 1,\n+ 1,\n+ 8,\n+ 5,\n+ 67,\n+ 104,\n+ 105,\n+ 108,\n+ 100,\n+ 1,\n+ 50,\n+ 1,\n+ 10,\n+ 5,\n+ 2,\n+ 2,\n+ 1,\n+ 2,\n+ 4,\n+ 10,\n+ 2000,\n+ 4,\n+ 2,\n+ 14000,\n+ 3,\n+ 2,\n+ 4,\n+ 3,\n+ 4,\n+ 10,\n+ 5,\n+ 4,\n+ 1,\n+ 14000,\n+ ],\n+ Array [\n+ 1,\n+ 1,\n+ 0,\n+ 2,\n+ 2,\n+ 10,\n+ 4,\n+ 4,\n+ 2,\n+ 11000,\n+ 3,\n+ 2,\n+ 2,\n+ 3,\n+ 5,\n+ 4,\n+ 1,\n+ 11000,\n+ ],\n+ Array [\n+ 1,\n+ 1,\n+ 0,\n+ 2,\n+ 1,\n+ 3,\n+ ],\n+ ],\n+ \"rootID\": 1,\n+ \"snapshots\": Array [\n+ Array [\n+ 1,\n+ Object {\n+ \"children\": Array [\n+ 2,\n+ ],\n+ \"displayName\": null,\n+ \"id\": 1,\n+ \"key\": null,\n+ \"type\": 11,\n+ },\n+ ],\n+ Array [\n+ 2,\n+ Object {\n+ \"children\": Array [\n+ 3,\n+ 4,\n+ 5,\n+ ],\n+ \"displayName\": \"Parent\",\n+ \"id\": 2,\n+ \"key\": null,\n+ \"type\": 5,\n+ },\n+ ],\n+ Array [\n+ 3,\n+ Object {\n+ \"children\": Array [],\n+ \"displayName\": \"Child\",\n+ \"id\": 3,\n+ \"key\": \"0\",\n+ \"type\": 5,\n+ },\n+ ],\n+ Array [\n+ 4,\n+ Object {\n+ \"children\": Array [],\n+ \"displayName\": \"Child\",\n+ \"id\": 4,\n+ \"key\": \"1\",\n+ \"type\": 5,\n+ },\n+ ],\n+ Array [\n+ 5,\n+ Object {\n+ \"children\": Array [],\n+ \"displayName\": \"Child\",\n+ \"id\": 5,\n+ \"key\": null,\n+ \"type\": 8,\n+ },\n+ ],\n+ ],\n+ },\n+ Object {\n+ \"commitData\": Array [\n+ Object {\n+ \"changeDescriptions\": Array [\n+ Array [\n+ 12,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 13,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 14,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ ],\n+ ],\n+ \"duration\": 11,\n+ \"fiberActualDurations\": Array [\n+ Array [\n+ 11,\n+ 11,\n+ ],\n+ Array [\n+ 12,\n+ 11,\n+ ],\n+ Array [\n+ 13,\n+ 0,\n+ ],\n+ Array [\n+ 14,\n+ 1,\n+ ],\n+ ],\n+ \"fiberSelfDurations\": Array [\n+ Array [\n+ 11,\n+ 0,\n+ ],\n+ Array [\n+ 12,\n+ 10,\n+ ],\n+ Array [\n+ 13,\n+ 0,\n+ ],\n+ Array [\n+ 14,\n+ 1,\n+ ],\n+ ],\n+ \"interactionIDs\": Array [],\n+ \"priorityLevel\": \"Immediate\",\n+ \"timestamp\": 24,\n+ },\n+ ],\n+ \"displayName\": \"Parent\",\n+ \"initialTreeBaseDurations\": Array [],\n+ \"interactionCommits\": Array [],\n+ \"interactions\": Array [],\n+ \"operations\": Array [\n+ Array [\n+ 1,\n+ 11,\n+ 15,\n+ 6,\n+ 80,\n+ 97,\n+ 114,\n+ 101,\n+ 110,\n+ 116,\n+ 5,\n+ 67,\n+ 104,\n+ 105,\n+ 108,\n+ 100,\n+ 1,\n+ 48,\n+ 1,\n+ 11,\n+ 11,\n+ 1,\n+ 1,\n+ 4,\n+ 11,\n+ 11000,\n+ 1,\n+ 12,\n+ 5,\n+ 11,\n+ 0,\n+ 1,\n+ 0,\n+ 4,\n+ 12,\n+ 11000,\n+ 1,\n+ 13,\n+ 5,\n+ 12,\n+ 12,\n+ 2,\n+ 3,\n+ 4,\n+ 13,\n+ 0,\n+ 1,\n+ 14,\n+ 8,\n+ 12,\n+ 12,\n+ 2,\n+ 0,\n+ 4,\n+ 14,\n+ 1000,\n+ ],\n+ ],\n+ \"rootID\": 11,\n+ \"snapshots\": Array [],\n+ },\n+ Object {\n+ \"commitData\": Array [\n+ Object {\n+ \"changeDescriptions\": Array [],\n+ \"duration\": 0,\n+ \"fiberActualDurations\": Array [],\n+ \"fiberSelfDurations\": Array [],\n+ \"interactionIDs\": Array [],\n+ \"priorityLevel\": \"Immediate\",\n+ \"timestamp\": 34,\n+ },\n+ ],\n+ \"displayName\": \"Parent\",\n+ \"initialTreeBaseDurations\": Array [\n+ Array [\n+ 6,\n+ 11,\n+ ],\n+ Array [\n+ 7,\n+ 11,\n+ ],\n+ Array [\n+ 8,\n+ 0,\n+ ],\n+ Array [\n+ 9,\n+ 1,\n+ ],\n+ ],\n+ \"interactionCommits\": Array [],\n+ \"interactions\": Array [],\n+ \"operations\": Array [\n+ Array [\n+ 1,\n+ 6,\n+ 0,\n+ 2,\n+ 4,\n+ 9,\n+ 8,\n+ 7,\n+ 6,\n+ ],\n+ ],\n+ \"rootID\": 6,\n+ \"snapshots\": Array [\n+ Array [\n+ 6,\n+ Object {\n+ \"children\": Array [\n+ 7,\n+ ],\n+ \"displayName\": null,\n+ \"id\": 6,\n+ \"key\": null,\n+ \"type\": 11,\n+ },\n+ ],\n+ Array [\n+ 7,\n+ Object {\n+ \"children\": Array [\n+ 8,\n+ 9,\n+ ],\n+ \"displayName\": \"Parent\",\n+ \"id\": 7,\n+ \"key\": null,\n+ \"type\": 5,\n+ },\n+ ],\n+ Array [\n+ 8,\n+ Object {\n+ \"children\": Array [],\n+ \"displayName\": \"Child\",\n+ \"id\": 8,\n+ \"key\": \"0\",\n+ \"type\": 5,\n+ },\n+ ],\n+ Array [\n+ 9,\n+ Object {\n+ \"children\": Array [],\n+ \"displayName\": \"Child\",\n+ \"id\": 9,\n+ \"key\": null,\n+ \"type\": 8,\n+ },\n+ ],\n+ ],\n+ },\n+ ],\n+ \"version\": 4,\n+}\n+`;\n+\n+exports[`ProfilingCache should record changed props\/state\/context\/hooks: CommitDetails commitIndex: 0 1`] = `\n+Object {\n+ \"changeDescriptions\": Map {\n+ 2 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ 4 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ 5 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ 6 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ 7 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ },\n+ \"duration\": 0,\n+ \"fiberActualDurations\": Map {\n+ 1 => 0,\n+ 2 => 0,\n+ 3 => 0,\n+ 4 => 0,\n+ 5 => 0,\n+ 6 => 0,\n+ 7 => 0,\n+ },\n+ \"fiberSelfDurations\": Map {\n+ 1 => 0,\n+ 2 => 0,\n+ 3 => 0,\n+ 4 => 0,\n+ 5 => 0,\n+ 6 => 0,\n+ 7 => 0,\n+ },\n+ \"interactionIDs\": Array [],\n+ \"priorityLevel\": \"Immediate\",\n+ \"timestamp\": 0,\n+}\n+`;\n+\n+exports[`ProfilingCache should record changed props\/state\/context\/hooks: CommitDetails commitIndex: 1 1`] = `\n+Object {\n+ \"changeDescriptions\": Map {\n+ 5 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": true,\n+ \"isFirstMount\": false,\n+ \"props\": Array [\n+ \"count\",\n+ ],\n+ \"state\": null,\n+ },\n+ 4 => Object {\n+ \"context\": true,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ 7 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": true,\n+ \"isFirstMount\": false,\n+ \"props\": Array [\n+ \"count\",\n+ ],\n+ \"state\": null,\n+ },\n+ 6 => Object {\n+ \"context\": Array [\n+ \"count\",\n+ ],\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ 2 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": Array [\n+ \"count\",\n+ ],\n+ },\n+ },\n+ \"duration\": 0,\n+ \"fiberActualDurations\": Map {\n+ 5 => 0,\n+ 4 => 0,\n+ 7 => 0,\n+ 6 => 0,\n+ 3 => 0,\n+ 2 => 0,\n+ },\n+ \"fiberSelfDurations\": Map {\n+ 5 => 0,\n+ 4 => 0,\n+ 7 => 0,\n+ 6 => 0,\n+ 3 => 0,\n+ 2 => 0,\n+ },\n+ \"interactionIDs\": Array [],\n+ \"priorityLevel\": \"Immediate\",\n+ \"timestamp\": 0,\n+}\n+`;\n+\n+exports[`ProfilingCache should record changed props\/state\/context\/hooks: CommitDetails commitIndex: 2 1`] = `\n+Object {\n+ \"changeDescriptions\": Map {\n+ 5 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ 4 => Object {\n+ \"context\": false,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ 7 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ 6 => Object {\n+ \"context\": Array [],\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ 2 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [\n+ \"foo\",\n+ ],\n+ \"state\": Array [],\n+ },\n+ },\n+ \"duration\": 0,\n+ \"fiberActualDurations\": Map {\n+ 5 => 0,\n+ 4 => 0,\n+ 7 => 0,\n+ 6 => 0,\n+ 3 => 0,\n+ 2 => 0,\n+ 1 => 0,\n+ },\n+ \"fiberSelfDurations\": Map {\n+ 5 => 0,\n+ 4 => 0,\n+ 7 => 0,\n+ 6 => 0,\n+ 3 => 0,\n+ 2 => 0,\n+ 1 => 0,\n+ },\n+ \"interactionIDs\": Array [],\n+ \"priorityLevel\": \"Immediate\",\n+ \"timestamp\": 0,\n+}\n+`;\n+\n+exports[`ProfilingCache should record changed props\/state\/context\/hooks: CommitDetails commitIndex: 3 1`] = `\n+Object {\n+ \"changeDescriptions\": Map {\n+ 5 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ 4 => Object {\n+ \"context\": false,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ 7 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ 6 => Object {\n+ \"context\": Array [],\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ 2 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [\n+ \"foo\",\n+ \"bar\",\n+ ],\n+ \"state\": Array [],\n+ },\n+ },\n+ \"duration\": 0,\n+ \"fiberActualDurations\": Map {\n+ 5 => 0,\n+ 4 => 0,\n+ 7 => 0,\n+ 6 => 0,\n+ 3 => 0,\n+ 2 => 0,\n+ 1 => 0,\n+ },\n+ \"fiberSelfDurations\": Map {\n+ 5 => 0,\n+ 4 => 0,\n+ 7 => 0,\n+ 6 => 0,\n+ 3 => 0,\n+ 2 => 0,\n+ 1 => 0,\n+ },\n+ \"interactionIDs\": Array [],\n+ \"priorityLevel\": \"Immediate\",\n+ \"timestamp\": 0,\n+}\n+`;\n+\n+exports[`ProfilingCache should record changed props\/state\/context\/hooks: CommitDetails commitIndex: 4 1`] = `\n+Object {\n+ \"changeDescriptions\": Map {\n+ 5 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ 4 => Object {\n+ \"context\": false,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ 7 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ 6 => Object {\n+ \"context\": Array [],\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ 2 => Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [\n+ \"bar\",\n+ ],\n+ \"state\": Array [],\n+ },\n+ },\n+ \"duration\": 0,\n+ \"fiberActualDurations\": Map {\n+ 5 => 0,\n+ 4 => 0,\n+ 7 => 0,\n+ 6 => 0,\n+ 3 => 0,\n+ 2 => 0,\n+ 1 => 0,\n+ },\n+ \"fiberSelfDurations\": Map {\n+ 5 => 0,\n+ 4 => 0,\n+ 7 => 0,\n+ 6 => 0,\n+ 3 => 0,\n+ 2 => 0,\n+ 1 => 0,\n+ },\n+ \"interactionIDs\": Array [],\n+ \"priorityLevel\": \"Immediate\",\n+ \"timestamp\": 0,\n+}\n+`;\n+\n+exports[`ProfilingCache should record changed props\/state\/context\/hooks: imported data 1`] = `\n+Object {\n+ \"dataForRoots\": Array [\n+ Object {\n+ \"commitData\": Array [\n+ Object {\n+ \"changeDescriptions\": Array [\n+ Array [\n+ 2,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 4,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 5,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 6,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 7,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ ],\n+ ],\n+ \"duration\": 0,\n+ \"fiberActualDurations\": Array [\n+ Array [\n+ 1,\n+ 0,\n+ ],\n+ Array [\n+ 2,\n+ 0,\n+ ],\n+ Array [\n+ 3,\n+ 0,\n+ ],\n+ Array [\n+ 4,\n+ 0,\n+ ],\n+ Array [\n+ 5,\n+ 0,\n+ ],\n+ Array [\n+ 6,\n+ 0,\n+ ],\n+ Array [\n+ 7,\n+ 0,\n+ ],\n+ ],\n+ \"fiberSelfDurations\": Array [\n+ Array [\n+ 1,\n+ 0,\n+ ],\n+ Array [\n+ 2,\n+ 0,\n+ ],\n+ Array [\n+ 3,\n+ 0,\n+ ],\n+ Array [\n+ 4,\n+ 0,\n+ ],\n+ Array [\n+ 5,\n+ 0,\n+ ],\n+ Array [\n+ 6,\n+ 0,\n+ ],\n+ Array [\n+ 7,\n+ 0,\n+ ],\n+ ],\n+ \"interactionIDs\": Array [],\n+ \"priorityLevel\": \"Immediate\",\n+ \"timestamp\": 0,\n+ },\n+ Object {\n+ \"changeDescriptions\": Array [\n+ Array [\n+ 5,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": true,\n+ \"isFirstMount\": false,\n+ \"props\": Array [\n+ \"count\",\n+ ],\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 4,\n+ Object {\n+ \"context\": true,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 7,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": true,\n+ \"isFirstMount\": false,\n+ \"props\": Array [\n+ \"count\",\n+ ],\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 6,\n+ Object {\n+ \"context\": Array [\n+ \"count\",\n+ ],\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 2,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": Array [\n+ \"count\",\n+ ],\n+ },\n+ ],\n+ ],\n+ \"duration\": 0,\n+ \"fiberActualDurations\": Array [\n+ Array [\n+ 5,\n+ 0,\n+ ],\n+ Array [\n+ 4,\n+ 0,\n+ ],\n+ Array [\n+ 7,\n+ 0,\n+ ],\n+ Array [\n+ 6,\n+ 0,\n+ ],\n+ Array [\n+ 3,\n+ 0,\n+ ],\n+ Array [\n+ 2,\n+ 0,\n+ ],\n+ ],\n+ \"fiberSelfDurations\": Array [\n+ Array [\n+ 5,\n+ 0,\n+ ],\n+ Array [\n+ 4,\n+ 0,\n+ ],\n+ Array [\n+ 7,\n+ 0,\n+ ],\n+ Array [\n+ 6,\n+ 0,\n+ ],\n+ Array [\n+ 3,\n+ 0,\n+ ],\n+ Array [\n+ 2,\n+ 0,\n+ ],\n+ ],\n+ \"interactionIDs\": Array [],\n+ \"priorityLevel\": \"Immediate\",\n+ \"timestamp\": 0,\n+ },\n+ Object {\n+ \"changeDescriptions\": Array [\n+ Array [\n+ 5,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 4,\n+ Object {\n+ \"context\": false,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 7,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 6,\n+ Object {\n+ \"context\": Array [],\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 2,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [\n+ \"foo\",\n+ ],\n+ \"state\": Array [],\n+ },\n+ ],\n+ ],\n+ \"duration\": 0,\n+ \"fiberActualDurations\": Array [\n+ Array [\n+ 5,\n+ 0,\n+ ],\n+ Array [\n+ 4,\n+ 0,\n+ ],\n+ Array [\n+ 7,\n+ 0,\n+ ],\n+ Array [\n+ 6,\n+ 0,\n+ ],\n+ Array [\n+ 3,\n+ 0,\n+ ],\n+ Array [\n+ 2,\n+ 0,\n+ ],\n+ Array [\n+ 1,\n+ 0,\n+ ],\n+ ],\n+ \"fiberSelfDurations\": Array [\n+ Array [\n+ 5,\n+ 0,\n+ ],\n+ Array [\n+ 4,\n+ 0,\n+ ],\n+ Array [\n+ 7,\n+ 0,\n+ ],\n+ Array [\n+ 6,\n+ 0,\n+ ],\n+ Array [\n+ 3,\n+ 0,\n+ ],\n+ Array [\n+ 2,\n+ 0,\n+ ],\n+ Array [\n+ 1,\n+ 0,\n+ ],\n+ ],\n+ \"interactionIDs\": Array [],\n+ \"priorityLevel\": \"Immediate\",\n+ \"timestamp\": 0,\n+ },\n+ Object {\n+ \"changeDescriptions\": Array [\n+ Array [\n+ 5,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 4,\n+ Object {\n+ \"context\": false,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 7,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 6,\n+ Object {\n+ \"context\": Array [],\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 2,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [\n+ \"foo\",\n+ \"bar\",\n+ ],\n+ \"state\": Array [],\n+ },\n+ ],\n+ ],\n+ \"duration\": 0,\n+ \"fiberActualDurations\": Array [\n+ Array [\n+ 5,\n+ 0,\n+ ],\n+ Array [\n+ 4,\n+ 0,\n+ ],\n+ Array [\n+ 7,\n+ 0,\n+ ],\n+ Array [\n+ 6,\n+ 0,\n+ ],\n+ Array [\n+ 3,\n+ 0,\n+ ],\n+ Array [\n+ 2,\n+ 0,\n+ ],\n+ Array [\n+ 1,\n+ 0,\n+ ],\n+ ],\n+ \"fiberSelfDurations\": Array [\n+ Array [\n+ 5,\n+ 0,\n+ ],\n+ Array [\n+ 4,\n+ 0,\n+ ],\n+ Array [\n+ 7,\n+ 0,\n+ ],\n+ Array [\n+ 6,\n+ 0,\n+ ],\n+ Array [\n+ 3,\n+ 0,\n+ ],\n+ Array [\n+ 2,\n+ 0,\n+ ],\n+ Array [\n+ 1,\n+ 0,\n+ ],\n+ ],\n+ \"interactionIDs\": Array [],\n+ \"priorityLevel\": \"Immediate\",\n+ \"timestamp\": 0,\n+ },\n+ Object {\n+ \"changeDescriptions\": Array [\n+ Array [\n+ 5,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 4,\n+ Object {\n+ \"context\": false,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 7,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 6,\n+ Object {\n+ \"context\": Array [],\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 2,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [\n+ \"bar\",\n+ ],\n+ \"state\": Array [],\n+ },\n+ ],\n+ ],\n+ \"duration\": 0,\n+ \"fiberActualDurations\": Array [\n+ Array [\n+ 5,\n+ 0,\n+ ],\n+ Array [\n+ 4,\n+ 0,\n+ ],\n+ Array [\n+ 7,\n+ 0,\n+ ],\n+ Array [\n+ 6,\n+ 0,\n+ ],\n+ Array [\n+ 3,\n+ 0,\n+ ],\n+ Array [\n+ 2,\n+ 0,\n+ ],\n+ Array [\n+ 1,\n+ 0,\n+ ],\n+ ],\n+ \"fiberSelfDurations\": Array [\n+ Array [\n+ 5,\n+ 0,\n+ ],\n+ Array [\n+ 4,\n+ 0,\n+ ],\n+ Array [\n+ 7,\n+ 0,\n+ ],\n+ Array [\n+ 6,\n+ 0,\n+ ],\n+ Array [\n+ 3,\n+ 0,\n+ ],\n+ Array [\n+ 2,\n+ 0,\n+ ],\n+ Array [\n+ 1,\n+ 0,\n+ ],\n+ ],\n+ \"interactionIDs\": Array [],\n+ \"priorityLevel\": \"Immediate\",\n+ \"timestamp\": 0,\n+ },\n+ ],\n+ \"displayName\": \"LegacyContextProvider\",\n+ \"initialTreeBaseDurations\": Array [],\n+ \"interactionCommits\": Array [],\n+ \"interactions\": Array [],\n+ \"operations\": Array [\n+ Array [\n+ 1,\n+ 1,\n+ 110,\n+ 21,\n+ 76,\n+ 101,\n+ 103,\n+ 97,\n+ 99,\n+ 121,\n+ 67,\n+ 111,\n+ 110,\n+ 116,\n+ 101,\n+ 120,\n+ 116,\n+ 80,\n+ 114,\n+ 111,\n+ 118,\n+ 105,\n+ 100,\n+ 101,\n+ 114,\n+ 16,\n+ 67,\n+ 111,\n+ 110,\n+ 116,\n+ 101,\n+ 120,\n+ 116,\n+ 46,\n+ 80,\n+ 114,\n+ 111,\n+ 118,\n+ 105,\n+ 100,\n+ 101,\n+ 114,\n+ 21,\n+ 77,\n+ 111,\n+ 100,\n+ 101,\n+ 114,\n+ 110,\n+ 67,\n+ 111,\n+ 110,\n+ 116,\n+ 101,\n+ 120,\n+ 116,\n+ 67,\n+ 111,\n+ 110,\n+ 115,\n+ 117,\n+ 109,\n+ 101,\n+ 114,\n+ 26,\n+ 70,\n+ 117,\n+ 110,\n+ 99,\n+ 116,\n+ 105,\n+ 111,\n+ 110,\n+ 67,\n+ 111,\n+ 109,\n+ 112,\n+ 111,\n+ 110,\n+ 101,\n+ 110,\n+ 116,\n+ 87,\n+ 105,\n+ 116,\n+ 104,\n+ 72,\n+ 111,\n+ 111,\n+ 107,\n+ 115,\n+ 21,\n+ 76,\n+ 101,\n+ 103,\n+ 97,\n+ 99,\n+ 121,\n+ 67,\n+ 111,\n+ 110,\n+ 116,\n+ 101,\n+ 120,\n+ 116,\n+ 67,\n+ 111,\n+ 110,\n+ 115,\n+ 117,\n+ 109,\n+ 101,\n+ 114,\n+ 1,\n+ 1,\n+ 11,\n+ 1,\n+ 1,\n+ 1,\n+ 2,\n+ 1,\n+ 1,\n+ 0,\n+ 1,\n+ 0,\n+ 4,\n+ 2,\n+ 0,\n+ 1,\n+ 3,\n+ 2,\n+ 2,\n+ 2,\n+ 2,\n+ 0,\n+ 4,\n+ 3,\n+ 0,\n+ 1,\n+ 4,\n+ 1,\n+ 3,\n+ 2,\n+ 3,\n+ 0,\n+ 4,\n+ 4,\n+ 0,\n+ 1,\n+ 5,\n+ 5,\n+ 4,\n+ 4,\n+ 4,\n+ 0,\n+ 4,\n+ 5,\n+ 0,\n+ 1,\n+ 6,\n+ 1,\n+ 3,\n+ 2,\n+ 5,\n+ 0,\n+ 4,\n+ 6,\n+ 0,\n+ 1,\n+ 7,\n+ 5,\n+ 6,\n+ 6,\n+ 4,\n+ 0,\n+ 4,\n+ 7,\n+ 0,\n+ ],\n+ Array [\n+ 1,\n+ 1,\n+ 0,\n+ ],\n+ Array [\n+ 1,\n+ 1,\n+ 0,\n+ ],\n+ Array [\n+ 1,\n+ 1,\n+ 0,\n+ ],\n+ Array [\n+ 1,\n+ 1,\n+ 0,\n+ ],\n+ ],\n+ \"rootID\": 1,\n+ \"snapshots\": Array [],\n+ },\n+ ],\n+ \"version\": 4,\n+}\n+`;\n+\n+exports[`ProfilingCache should report every traced interaction: Interactions 1`] = `\n+Array [\n+ Object {\n+ \"__count\": 1,\n+ \"id\": 0,\n+ \"name\": \"mount: one child\",\n+ \"timestamp\": 0,\n+ },\n+ Object {\n+ \"__count\": 0,\n+ \"id\": 1,\n+ \"name\": \"update: two children\",\n+ \"timestamp\": 11,\n+ },\n+]\n+`;\n+\n+exports[`ProfilingCache should report every traced interaction: imported data 1`] = `\n+Object {\n+ \"dataForRoots\": Array [\n+ Object {\n+ \"commitData\": Array [\n+ Object {\n+ \"changeDescriptions\": Array [\n+ Array [\n+ 2,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 3,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 4,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ ],\n+ ],\n+ \"duration\": 11,\n+ \"fiberActualDurations\": Array [\n+ Array [\n+ 1,\n+ 11,\n+ ],\n+ Array [\n+ 2,\n+ 11,\n+ ],\n+ Array [\n+ 3,\n+ 0,\n+ ],\n+ Array [\n+ 4,\n+ 1,\n+ ],\n+ ],\n+ \"fiberSelfDurations\": Array [\n+ Array [\n+ 1,\n+ 0,\n+ ],\n+ Array [\n+ 2,\n+ 10,\n+ ],\n+ Array [\n+ 3,\n+ 0,\n+ ],\n+ Array [\n+ 4,\n+ 1,\n+ ],\n+ ],\n+ \"interactionIDs\": Array [\n+ 0,\n+ ],\n+ \"priorityLevel\": \"Immediate\",\n+ \"timestamp\": 11,\n+ },\n+ Object {\n+ \"changeDescriptions\": Array [\n+ Array [\n+ 3,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [],\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 5,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": true,\n+ \"props\": null,\n+ \"state\": null,\n+ },\n+ ],\n+ Array [\n+ 2,\n+ Object {\n+ \"context\": null,\n+ \"didHooksChange\": false,\n+ \"isFirstMount\": false,\n+ \"props\": Array [\n+ \"count\",\n+ ],\n+ \"state\": null,\n+ },\n+ ],\n+ ],\n+ \"duration\": 11,\n+ \"fiberActualDurations\": Array [\n+ Array [\n+ 3,\n+ 0,\n+ ],\n+ Array [\n+ 5,\n+ 1,\n+ ],\n+ Array [\n+ 2,\n+ 11,\n+ ],\n+ Array [\n+ 1,\n+ 11,\n+ ],\n+ ],\n+ \"fiberSelfDurations\": Array [\n+ Array [\n+ 3,\n+ 0,\n+ ],\n+ Array [\n+ 5,\n+ 1,\n+ ],\n+ Array [\n+ 2,\n+ 10,\n+ ],\n+ Array [\n+ 1,\n+ 0,\n+ ],\n+ ],\n+ \"interactionIDs\": Array [\n+ 1,\n+ ],\n+ \"priorityLevel\": \"Immediate\",\n+ \"timestamp\": 22,\n+ },\n+ ],\n+ \"displayName\": \"Parent\",\n+ \"initialTreeBaseDurations\": Array [],\n+ \"interactionCommits\": Array [\n+ Array [\n+ 0,\n+ Array [\n+ 0,\n+ ],\n+ ],\n+ Array [\n+ 1,\n+ Array [\n+ 1,\n+ ],\n+ ],\n+ ],\n+ \"interactions\": Array [\n+ Array [\n+ 0,\n+ Object {\n+ \"__count\": 1,\n+ \"id\": 0,\n+ \"name\": \"mount: one child\",\n+ \"timestamp\": 0,\n+ },\n+ ],\n+ Array [\n+ 1,\n+ Object {\n+ \"__count\": 0,\n+ \"id\": 1,\n+ \"name\": \"update: two children\",\n+ \"timestamp\": 11,\n+ },\n+ ],\n+ ],\n+ \"operations\": Array [\n+ Array [\n+ 1,\n+ 1,\n+ 15,\n+ 6,\n+ 80,\n+ 97,\n+ 114,\n+ 101,\n+ 110,\n+ 116,\n+ 5,\n+ 67,\n+ 104,\n+ 105,\n+ 108,\n+ 100,\n+ 1,\n+ 48,\n+ 1,\n+ 1,\n+ 11,\n+ 1,\n+ 1,\n+ 4,\n+ 1,\n+ 11000,\n+ 1,\n+ 2,\n+ 5,\n+ 1,\n+ 0,\n+ 1,\n+ 0,\n+ 4,\n+ 2,\n+ 11000,\n+ 1,\n+ 3,\n+ 5,\n+ 2,\n+ 2,\n+ 2,\n+ 3,\n+ 4,\n+ 3,\n+ 0,\n+ 1,\n+ 4,\n+ 8,\n+ 2,\n+ 2,\n+ 2,\n+ 0,\n+ 4,\n+ 4,\n+ 1000,\n+ ],\n+ Array [\n+ 1,\n+ 1,\n+ 8,\n+ 5,\n+ 67,\n+ 104,\n+ 105,\n+ 108,\n+ 100,\n+ 1,\n+ 49,\n+ 1,\n+ 5,\n+ 5,\n+ 2,\n+ 2,\n+ 1,\n+ 2,\n+ 4,\n+ 5,\n+ 1000,\n+ 4,\n+ 2,\n+ 12000,\n+ 3,\n+ 2,\n+ 3,\n+ 3,\n+ 5,\n+ 4,\n+ 4,\n+ 1,\n+ 12000,\n+ ],\n+ ],\n+ \"rootID\": 1,\n+ \"snapshots\": Array [],\n+ },\n+ ],\n+ \"version\": 4,\n+}\n+`;\ndiff --git a\/src\/__tests__\/__snapshots__\/profilingCharts-test.js.snap b\/src\/__tests__\/__snapshots__\/profilingCharts-test.js.snap\nnew file mode 100644\nindex 0000000000..8399be81c6\n--- \/dev\/null\n+++ b\/src\/__tests__\/__snapshots__\/profilingCharts-test.js.snap\n@@ -0,0 +1,452 @@\n+\/\/ Jest Snapshot v1, https:\/\/goo.gl\/fbAQLP\n+\n+exports[`profiling charts flamegraph chart should contain valid data: 0: CommitTree 1`] = `\n+Object {\n+ \"nodes\": Map {\n+ 1 => Object {\n+ \"children\": Array [\n+ 2,\n+ ],\n+ \"displayName\": null,\n+ \"id\": 1,\n+ \"key\": null,\n+ \"parentID\": 0,\n+ \"treeBaseDuration\": 15,\n+ \"type\": 11,\n+ },\n+ 2 => Object {\n+ \"children\": Array [\n+ 3,\n+ 4,\n+ 5,\n+ ],\n+ \"displayName\": \"Parent\",\n+ \"id\": 2,\n+ \"key\": null,\n+ \"parentID\": 1,\n+ \"treeBaseDuration\": 15,\n+ \"type\": 5,\n+ },\n+ 3 => Object {\n+ \"children\": Array [],\n+ \"displayName\": \"Child\",\n+ \"id\": 3,\n+ \"key\": \"first\",\n+ \"parentID\": 2,\n+ \"treeBaseDuration\": 3,\n+ \"type\": 8,\n+ },\n+ 4 => Object {\n+ \"children\": Array [],\n+ \"displayName\": \"Child\",\n+ \"id\": 4,\n+ \"key\": \"second\",\n+ \"parentID\": 2,\n+ \"treeBaseDuration\": 2,\n+ \"type\": 8,\n+ },\n+ 5 => Object {\n+ \"children\": Array [],\n+ \"displayName\": \"Child\",\n+ \"id\": 5,\n+ \"key\": \"third\",\n+ \"parentID\": 2,\n+ \"treeBaseDuration\": 0,\n+ \"type\": 8,\n+ },\n+ },\n+ \"rootID\": 1,\n+}\n+`;\n+\n+exports[`profiling charts flamegraph chart should contain valid data: 0: FlamegraphChartData 1`] = `\n+Object {\n+ \"baseDuration\": 15,\n+ \"depth\": 2,\n+ \"idToDepthMap\": Map {\n+ 2 => 1,\n+ 5 => 2,\n+ 4 => 2,\n+ 3 => 2,\n+ },\n+ \"maxSelfDuration\": 10,\n+ \"renderPathNodes\": Set {\n+ 1,\n+ 2,\n+ },\n+ \"rows\": Array [\n+ Array [\n+ Object {\n+ \"actualDuration\": 15,\n+ \"didRender\": true,\n+ \"id\": 2,\n+ \"label\": \"Parent (10ms of 15ms)\",\n+ \"name\": \"Parent\",\n+ \"offset\": 0,\n+ \"selfDuration\": 10,\n+ \"treeBaseDuration\": 15,\n+ },\n+ ],\n+ Array [\n+ Object {\n+ \"actualDuration\": 0,\n+ \"didRender\": true,\n+ \"id\": 5,\n+ \"label\": \"Child (Memo) key=\\\\\"third\\\\\" (<0.1ms of <0.1ms)\",\n+ \"name\": \"Child\",\n+ \"offset\": 15,\n+ \"selfDuration\": 0,\n+ \"treeBaseDuration\": 0,\n+ },\n+ Object {\n+ \"actualDuration\": 2,\n+ \"didRender\": true,\n+ \"id\": 4,\n+ \"label\": \"Child (Memo) key=\\\\\"second\\\\\" (2ms of 2ms)\",\n+ \"name\": \"Child\",\n+ \"offset\": 13,\n+ \"selfDuration\": 2,\n+ \"treeBaseDuration\": 2,\n+ },\n+ Object {\n+ \"actualDuration\": 3,\n+ \"didRender\": true,\n+ \"id\": 3,\n+ \"label\": \"Child (Memo) key=\\\\\"first\\\\\" (3ms of 3ms)\",\n+ \"name\": \"Child\",\n+ \"offset\": 10,\n+ \"selfDuration\": 3,\n+ \"treeBaseDuration\": 3,\n+ },\n+ ],\n+ ],\n+}\n+`;\n+\n+exports[`profiling charts flamegraph chart should contain valid data: 1: CommitTree 1`] = `\n+Object {\n+ \"nodes\": Map {\n+ 1 => Object {\n+ \"children\": Array [\n+ 2,\n+ ],\n+ \"displayName\": null,\n+ \"id\": 1,\n+ \"key\": null,\n+ \"parentID\": 0,\n+ \"treeBaseDuration\": 15,\n+ \"type\": 11,\n+ },\n+ 2 => Object {\n+ \"children\": Array [\n+ 3,\n+ 4,\n+ 5,\n+ ],\n+ \"displayName\": \"Parent\",\n+ \"id\": 2,\n+ \"key\": null,\n+ \"parentID\": 1,\n+ \"treeBaseDuration\": 15,\n+ \"type\": 5,\n+ },\n+ 3 => Object {\n+ \"children\": Array [],\n+ \"displayName\": \"Child\",\n+ \"id\": 3,\n+ \"key\": \"first\",\n+ \"parentID\": 2,\n+ \"treeBaseDuration\": 3,\n+ \"type\": 8,\n+ },\n+ 4 => Object {\n+ \"children\": Array [],\n+ \"displayName\": \"Child\",\n+ \"id\": 4,\n+ \"key\": \"second\",\n+ \"parentID\": 2,\n+ \"treeBaseDuration\": 2,\n+ \"type\": 8,\n+ },\n+ 5 => Object {\n+ \"children\": Array [],\n+ \"displayName\": \"Child\",\n+ \"id\": 5,\n+ \"key\": \"third\",\n+ \"parentID\": 2,\n+ \"treeBaseDuration\": 0,\n+ \"type\": 8,\n+ },\n+ },\n+ \"rootID\": 1,\n+}\n+`;\n+\n+exports[`profiling charts flamegraph chart should contain valid data: 1: FlamegraphChartData 1`] = `\n+Object {\n+ \"baseDuration\": 15,\n+ \"depth\": 2,\n+ \"idToDepthMap\": Map {\n+ 2 => 1,\n+ 5 => 2,\n+ 4 => 2,\n+ 3 => 2,\n+ },\n+ \"maxSelfDuration\": 10,\n+ \"renderPathNodes\": Set {\n+ 1,\n+ },\n+ \"rows\": Array [\n+ Array [\n+ Object {\n+ \"actualDuration\": 10,\n+ \"didRender\": true,\n+ \"id\": 2,\n+ \"label\": \"Parent (10ms of 10ms)\",\n+ \"name\": \"Parent\",\n+ \"offset\": 0,\n+ \"selfDuration\": 10,\n+ \"treeBaseDuration\": 15,\n+ },\n+ ],\n+ Array [\n+ Object {\n+ \"actualDuration\": 0,\n+ \"didRender\": false,\n+ \"id\": 5,\n+ \"label\": \"Child (Memo) key=\\\\\"third\\\\\"\",\n+ \"name\": \"Child\",\n+ \"offset\": 15,\n+ \"selfDuration\": 0,\n+ \"treeBaseDuration\": 0,\n+ },\n+ Object {\n+ \"actualDuration\": 0,\n+ \"didRender\": false,\n+ \"id\": 4,\n+ \"label\": \"Child (Memo) key=\\\\\"second\\\\\"\",\n+ \"name\": \"Child\",\n+ \"offset\": 13,\n+ \"selfDuration\": 0,\n+ \"treeBaseDuration\": 2,\n+ },\n+ Object {\n+ \"actualDuration\": 0,\n+ \"didRender\": false,\n+ \"id\": 3,\n+ \"label\": \"Child (Memo) key=\\\\\"first\\\\\"\",\n+ \"name\": \"Child\",\n+ \"offset\": 10,\n+ \"selfDuration\": 0,\n+ \"treeBaseDuration\": 3,\n+ },\n+ ],\n+ ],\n+}\n+`;\n+\n+exports[`profiling charts interactions should contain valid data: Interactions 1`] = `\n+Object {\n+ \"interactions\": Array [\n+ Object {\n+ \"__count\": 1,\n+ \"id\": 0,\n+ \"name\": \"mount\",\n+ \"timestamp\": 0,\n+ },\n+ Object {\n+ \"__count\": 0,\n+ \"id\": 1,\n+ \"name\": \"update\",\n+ \"timestamp\": 15,\n+ },\n+ ],\n+ \"lastInteractionTime\": 25,\n+ \"maxCommitDuration\": 15,\n+}\n+`;\n+\n+exports[`profiling charts interactions should contain valid data: Interactions 2`] = `\n+Object {\n+ \"interactions\": Array [\n+ Object {\n+ \"__count\": 1,\n+ \"id\": 0,\n+ \"name\": \"mount\",\n+ \"timestamp\": 0,\n+ },\n+ Object {\n+ \"__count\": 0,\n+ \"id\": 1,\n+ \"name\": \"update\",\n+ \"timestamp\": 15,\n+ },\n+ ],\n+ \"lastInteractionTime\": 25,\n+ \"maxCommitDuration\": 15,\n+}\n+`;\n+\n+exports[`profiling charts ranked chart should contain valid data: 0: CommitTree 1`] = `\n+Object {\n+ \"nodes\": Map {\n+ 1 => Object {\n+ \"children\": Array [\n+ 2,\n+ ],\n+ \"displayName\": null,\n+ \"id\": 1,\n+ \"key\": null,\n+ \"parentID\": 0,\n+ \"treeBaseDuration\": 15,\n+ \"type\": 11,\n+ },\n+ 2 => Object {\n+ \"children\": Array [\n+ 3,\n+ 4,\n+ 5,\n+ ],\n+ \"displayName\": \"Parent\",\n+ \"id\": 2,\n+ \"key\": null,\n+ \"parentID\": 1,\n+ \"treeBaseDuration\": 15,\n+ \"type\": 5,\n+ },\n+ 3 => Object {\n+ \"children\": Array [],\n+ \"displayName\": \"Child\",\n+ \"id\": 3,\n+ \"key\": \"first\",\n+ \"parentID\": 2,\n+ \"treeBaseDuration\": 3,\n+ \"type\": 8,\n+ },\n+ 4 => Object {\n+ \"children\": Array [],\n+ \"displayName\": \"Child\",\n+ \"id\": 4,\n+ \"key\": \"second\",\n+ \"parentID\": 2,\n+ \"treeBaseDuration\": 2,\n+ \"type\": 8,\n+ },\n+ 5 => Object {\n+ \"children\": Array [],\n+ \"displayName\": \"Child\",\n+ \"id\": 5,\n+ \"key\": \"third\",\n+ \"parentID\": 2,\n+ \"treeBaseDuration\": 0,\n+ \"type\": 8,\n+ },\n+ },\n+ \"rootID\": 1,\n+}\n+`;\n+\n+exports[`profiling charts ranked chart should contain valid data: 0: RankedChartData 1`] = `\n+Object {\n+ \"maxValue\": 10,\n+ \"nodes\": Array [\n+ Object {\n+ \"id\": 2,\n+ \"label\": \"Parent (10ms)\",\n+ \"name\": \"Parent\",\n+ \"value\": 10,\n+ },\n+ Object {\n+ \"id\": 3,\n+ \"label\": \"Child (Memo) key=\\\\\"first\\\\\" (3ms)\",\n+ \"name\": \"Child\",\n+ \"value\": 3,\n+ },\n+ Object {\n+ \"id\": 4,\n+ \"label\": \"Child (Memo) key=\\\\\"second\\\\\" (2ms)\",\n+ \"name\": \"Child\",\n+ \"value\": 2,\n+ },\n+ Object {\n+ \"id\": 5,\n+ \"label\": \"Child (Memo) key=\\\\\"third\\\\\" (<0.1ms)\",\n+ \"name\": \"Child\",\n+ \"value\": 0,\n+ },\n+ ],\n+}\n+`;\n+\n+exports[`profiling charts ranked chart should contain valid data: 1: CommitTree 1`] = `\n+Object {\n+ \"nodes\": Map {\n+ 1 => Object {\n+ \"children\": Array [\n+ 2,\n+ ],\n+ \"displayName\": null,\n+ \"id\": 1,\n+ \"key\": null,\n+ \"parentID\": 0,\n+ \"treeBaseDuration\": 15,\n+ \"type\": 11,\n+ },\n+ 2 => Object {\n+ \"children\": Array [\n+ 3,\n+ 4,\n+ 5,\n+ ],\n+ \"displayName\": \"Parent\",\n+ \"id\": 2,\n+ \"key\": null,\n+ \"parentID\": 1,\n+ \"treeBaseDuration\": 15,\n+ \"type\": 5,\n+ },\n+ 3 => Object {\n+ \"children\": Array [],\n+ \"displayName\": \"Child\",\n+ \"id\": 3,\n+ \"key\": \"first\",\n+ \"parentID\": 2,\n+ \"treeBaseDuration\": 3,\n+ \"type\": 8,\n+ },\n+ 4 => Object {\n+ \"children\": Array [],\n+ \"displayName\": \"Child\",\n+ \"id\": 4,\n+ \"key\": \"second\",\n+ \"parentID\": 2,\n+ \"treeBaseDuration\": 2,\n+ \"type\": 8,\n+ },\n+ 5 => Object {\n+ \"children\": Array [],\n+ \"displayName\": \"Child\",\n+ \"id\": 5,\n+ \"key\": \"third\",\n+ \"parentID\": 2,\n+ \"treeBaseDuration\": 0,\n+ \"type\": 8,\n+ },\n+ },\n+ \"rootID\": 1,\n+}\n+`;\n+\n+exports[`profiling charts ranked chart should contain valid data: 1: RankedChartData 1`] = `\n+Object {\n+ \"maxValue\": 10,\n+ \"nodes\": Array [\n+ Object {\n+ \"id\": 2,\n+ \"label\": \"Parent (10ms)\",\n+ \"name\": \"Parent\",\n+ \"value\": 10,\n+ },\n+ ],\n+}\n+`;\ndiff --git a\/src\/__tests__\/__snapshots__\/profilingCommitTreeBuilder-test.js.snap b\/src\/__tests__\/__snapshots__\/profilingCommitTreeBuilder-test.js.snap\nnew file mode 100644\nindex 0000000000..6f8573b08e\n--- \/dev\/null\n+++ b\/src\/__tests__\/__snapshots__\/profilingCommitTreeBuilder-test.js.snap\n@@ -0,0 +1,176 @@\n+\/\/ Jest Snapshot v1, https:\/\/goo.gl\/fbAQLP\n+\n+exports[`commit tree should be able to rebuild the store tree for each commit: 0: CommitTree 1`] = `\n+Object {\n+ \"nodes\": Map {\n+ 1 => Object {\n+ \"children\": Array [\n+ 2,\n+ ],\n+ \"displayName\": null,\n+ \"id\": 1,\n+ \"key\": null,\n+ \"parentID\": 0,\n+ \"treeBaseDuration\": 12,\n+ \"type\": 11,\n+ },\n+ 2 => Object {\n+ \"children\": Array [\n+ 3,\n+ ],\n+ \"displayName\": \"Parent\",\n+ \"id\": 2,\n+ \"key\": null,\n+ \"parentID\": 1,\n+ \"treeBaseDuration\": 12,\n+ \"type\": 5,\n+ },\n+ 3 => Object {\n+ \"children\": Array [],\n+ \"displayName\": \"Child\",\n+ \"id\": 3,\n+ \"key\": \"0\",\n+ \"parentID\": 2,\n+ \"treeBaseDuration\": 2,\n+ \"type\": 8,\n+ },\n+ },\n+ \"rootID\": 1,\n+}\n+`;\n+\n+exports[`commit tree should be able to rebuild the store tree for each commit: 1: CommitTree 1`] = `\n+Object {\n+ \"nodes\": Map {\n+ 1 => Object {\n+ \"children\": Array [\n+ 2,\n+ ],\n+ \"displayName\": null,\n+ \"id\": 1,\n+ \"key\": null,\n+ \"parentID\": 0,\n+ \"treeBaseDuration\": 16,\n+ \"type\": 11,\n+ },\n+ 2 => Object {\n+ \"children\": Array [\n+ 3,\n+ 4,\n+ 5,\n+ ],\n+ \"displayName\": \"Parent\",\n+ \"id\": 2,\n+ \"key\": null,\n+ \"parentID\": 1,\n+ \"treeBaseDuration\": 16,\n+ \"type\": 5,\n+ },\n+ 3 => Object {\n+ \"children\": Array [],\n+ \"displayName\": \"Child\",\n+ \"id\": 3,\n+ \"key\": \"0\",\n+ \"parentID\": 2,\n+ \"treeBaseDuration\": 2,\n+ \"type\": 8,\n+ },\n+ 4 => Object {\n+ \"children\": Array [],\n+ \"displayName\": \"Child\",\n+ \"id\": 4,\n+ \"key\": \"1\",\n+ \"parentID\": 2,\n+ \"treeBaseDuration\": 2,\n+ \"type\": 8,\n+ },\n+ 5 => Object {\n+ \"children\": Array [],\n+ \"displayName\": \"Child\",\n+ \"id\": 5,\n+ \"key\": \"2\",\n+ \"parentID\": 2,\n+ \"treeBaseDuration\": 2,\n+ \"type\": 8,\n+ },\n+ },\n+ \"rootID\": 1,\n+}\n+`;\n+\n+exports[`commit tree should be able to rebuild the store tree for each commit: 2: CommitTree 1`] = `\n+Object {\n+ \"nodes\": Map {\n+ 1 => Object {\n+ \"children\": Array [\n+ 2,\n+ ],\n+ \"displayName\": null,\n+ \"id\": 1,\n+ \"key\": null,\n+ \"parentID\": 0,\n+ \"treeBaseDuration\": 14,\n+ \"type\": 11,\n+ },\n+ 2 => Object {\n+ \"children\": Array [\n+ 3,\n+ 4,\n+ ],\n+ \"displayName\": \"Parent\",\n+ \"id\": 2,\n+ \"key\": null,\n+ \"parentID\": 1,\n+ \"treeBaseDuration\": 14,\n+ \"type\": 5,\n+ },\n+ 3 => Object {\n+ \"children\": Array [],\n+ \"displayName\": \"Child\",\n+ \"id\": 3,\n+ \"key\": \"0\",\n+ \"parentID\": 2,\n+ \"treeBaseDuration\": 2,\n+ \"type\": 8,\n+ },\n+ 4 => Object {\n+ \"children\": Array [],\n+ \"displayName\": \"Child\",\n+ \"id\": 4,\n+ \"key\": \"1\",\n+ \"parentID\": 2,\n+ \"treeBaseDuration\": 2,\n+ \"type\": 8,\n+ },\n+ },\n+ \"rootID\": 1,\n+}\n+`;\n+\n+exports[`commit tree should be able to rebuild the store tree for each commit: 3: CommitTree 1`] = `\n+Object {\n+ \"nodes\": Map {\n+ 1 => Object {\n+ \"children\": Array [\n+ 2,\n+ ],\n+ \"displayName\": null,\n+ \"id\": 1,\n+ \"key\": null,\n+ \"parentID\": 0,\n+ \"treeBaseDuration\": 10,\n+ \"type\": 11,\n+ },\n+ 2 => Object {\n+ \"children\": Array [],\n+ \"displayName\": \"Parent\",\n+ \"id\": 2,\n+ \"key\": null,\n+ \"parentID\": 1,\n+ \"treeBaseDuration\": 10,\n+ \"type\": 5,\n+ },\n+ },\n+ \"rootID\": 1,\n+}\n+`;\ndiff --git a\/src\/__tests__\/__snapshots__\/store-test.js.snap b\/src\/__tests__\/__snapshots__\/store-test.js.snap\nnew file mode 100644\nindex 0000000000..39bddd9b58\n--- \/dev\/null\n+++ b\/src\/__tests__\/__snapshots__\/store-test.js.snap\n@@ -0,0 +1,590 @@\n+\/\/ Jest Snapshot v1, https:\/\/goo.gl\/fbAQLP\n+\n+exports[`Store collapseNodesByDefault:false should display Suspense nodes properly in various states: 1: loading 1`] = `\n+[root]\n+ ▾ <Wrapper>\n+ <Component key=\"Outside\">\n+ ▾ <Suspense>\n+ <Loading>\n+`;\n+\n+exports[`Store collapseNodesByDefault:false should display Suspense nodes properly in various states: 2: resolved 1`] = `\n+[root]\n+ ▾ <Wrapper>\n+ <Component key=\"Outside\">\n+ ▾ <Suspense>\n+ <Component key=\"Inside\">\n+`;\n+\n+exports[`Store collapseNodesByDefault:false should filter DOM nodes from the store tree: 1: mount 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ ▾ <Parent>\n+ <Child>\n+ ▾ <Parent>\n+ <Child>\n+`;\n+\n+exports[`Store collapseNodesByDefault:false should support collapsing parts of the tree: 1: mount 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ ▾ <Parent>\n+ <Child key=\"0\">\n+ <Child key=\"1\">\n+ ▾ <Parent>\n+ <Child key=\"0\">\n+ <Child key=\"1\">\n+`;\n+\n+exports[`Store collapseNodesByDefault:false should support collapsing parts of the tree: 2: collapse first Parent 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ ▸ <Parent>\n+ ▾ <Parent>\n+ <Child key=\"0\">\n+ <Child key=\"1\">\n+`;\n+\n+exports[`Store collapseNodesByDefault:false should support collapsing parts of the tree: 3: collapse second Parent 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ ▸ <Parent>\n+ ▸ <Parent>\n+`;\n+\n+exports[`Store collapseNodesByDefault:false should support collapsing parts of the tree: 4: expand first Parent 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ ▾ <Parent>\n+ <Child key=\"0\">\n+ <Child key=\"1\">\n+ ▸ <Parent>\n+`;\n+\n+exports[`Store collapseNodesByDefault:false should support collapsing parts of the tree: 5: collapse Grandparent 1`] = `\n+[root]\n+ ▸ <Grandparent>\n+`;\n+\n+exports[`Store collapseNodesByDefault:false should support collapsing parts of the tree: 6: expand Grandparent 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ ▾ <Parent>\n+ <Child key=\"0\">\n+ <Child key=\"1\">\n+ ▸ <Parent>\n+`;\n+\n+exports[`Store collapseNodesByDefault:false should support mount and update operations for multiple roots: 1: mount 1`] = `\n+[root]\n+ ▾ <Parent key=\"A\">\n+ <Child key=\"0\">\n+ <Child key=\"1\">\n+ <Child key=\"2\">\n+[root]\n+ ▾ <Parent key=\"B\">\n+ <Child key=\"0\">\n+ <Child key=\"1\">\n+`;\n+\n+exports[`Store collapseNodesByDefault:false should support mount and update operations for multiple roots: 2: update 1`] = `\n+[root]\n+ ▾ <Parent key=\"A\">\n+ <Child key=\"0\">\n+ <Child key=\"1\">\n+ <Child key=\"2\">\n+ <Child key=\"3\">\n+[root]\n+ ▾ <Parent key=\"B\">\n+ <Child key=\"0\">\n+`;\n+\n+exports[`Store collapseNodesByDefault:false should support mount and update operations for multiple roots: 3: unmount B 1`] = `\n+[root]\n+ ▾ <Parent key=\"A\">\n+ <Child key=\"0\">\n+ <Child key=\"1\">\n+ <Child key=\"2\">\n+ <Child key=\"3\">\n+`;\n+\n+exports[`Store collapseNodesByDefault:false should support mount and update operations for multiple roots: 4: unmount A 1`] = ``;\n+\n+exports[`Store collapseNodesByDefault:false should support mount and update operations: 1: mount 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ ▾ <Parent>\n+ <Child key=\"0\">\n+ <Child key=\"1\">\n+ <Child key=\"2\">\n+ <Child key=\"3\">\n+ ▾ <Parent>\n+ <Child key=\"0\">\n+ <Child key=\"1\">\n+ <Child key=\"2\">\n+ <Child key=\"3\">\n+`;\n+\n+exports[`Store collapseNodesByDefault:false should support mount and update operations: 2: update 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ ▾ <Parent>\n+ <Child key=\"0\">\n+ <Child key=\"1\">\n+ ▾ <Parent>\n+ <Child key=\"0\">\n+ <Child key=\"1\">\n+`;\n+\n+exports[`Store collapseNodesByDefault:false should support mount and update operations: 3: unmount 1`] = ``;\n+\n+exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 1: third child is suspended 1`] = `\n+[root]\n+ ▾ <Wrapper>\n+ <Component key=\"Outside\">\n+ ▾ <Suspense>\n+ <Component key=\"Unrelated at Start\">\n+ ▾ <Suspense>\n+ <Component key=\"Suspense 1 Content\">\n+ ▾ <Suspense>\n+ <Component key=\"Suspense 2 Content\">\n+ ▾ <Suspense>\n+ <Loading key=\"Suspense 3 Fallback\">\n+ <Component key=\"Unrelated at End\">\n+`;\n+\n+exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 2: first and third child are suspended 1`] = `\n+[root]\n+ ▾ <Wrapper>\n+ <Component key=\"Outside\">\n+ ▾ <Suspense>\n+ <Component key=\"Unrelated at Start\">\n+ ▾ <Suspense>\n+ <Loading key=\"Suspense 1 Fallback\">\n+ ▾ <Suspense>\n+ <Component key=\"Suspense 2 Content\">\n+ ▾ <Suspense>\n+ <Loading key=\"Suspense 3 Fallback\">\n+ <Component key=\"Unrelated at End\">\n+`;\n+\n+exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 3: second and third child are suspended 1`] = `\n+[root]\n+ ▾ <Wrapper>\n+ <Component key=\"Outside\">\n+ ▾ <Suspense>\n+ <Component key=\"Unrelated at Start\">\n+ ▾ <Suspense>\n+ <Component key=\"Suspense 1 Content\">\n+ ▾ <Suspense>\n+ <Loading key=\"Suspense 2 Fallback\">\n+ ▾ <Suspense>\n+ <Loading key=\"Suspense 3 Fallback\">\n+ <Component key=\"Unrelated at End\">\n+`;\n+\n+exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 4: first and third child are suspended 1`] = `\n+[root]\n+ ▾ <Wrapper>\n+ <Component key=\"Outside\">\n+ ▾ <Suspense>\n+ <Component key=\"Unrelated at Start\">\n+ ▾ <Suspense>\n+ <Loading key=\"Suspense 1 Fallback\">\n+ ▾ <Suspense>\n+ <Component key=\"Suspense 2 Content\">\n+ ▾ <Suspense>\n+ <Loading key=\"Suspense 3 Fallback\">\n+ <Component key=\"Unrelated at End\">\n+`;\n+\n+exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 5: parent is suspended 1`] = `\n+[root]\n+ ▾ <Wrapper>\n+ <Component key=\"Outside\">\n+ ▾ <Suspense>\n+ <Loading key=\"Parent Fallback\">\n+`;\n+\n+exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 6: all children are suspended 1`] = `\n+[root]\n+ ▾ <Wrapper>\n+ <Component key=\"Outside\">\n+ ▾ <Suspense>\n+ <Component key=\"Unrelated at Start\">\n+ ▾ <Suspense>\n+ <Loading key=\"Suspense 1 Fallback\">\n+ ▾ <Suspense>\n+ <Loading key=\"Suspense 2 Fallback\">\n+ ▾ <Suspense>\n+ <Loading key=\"Suspense 3 Fallback\">\n+ <Component key=\"Unrelated at End\">\n+`;\n+\n+exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 7: only third child is suspended 1`] = `\n+[root]\n+ ▾ <Wrapper>\n+ <Component key=\"Outside\">\n+ ▾ <Suspense>\n+ <Component key=\"Unrelated at Start\">\n+ ▾ <Suspense>\n+ <Component key=\"Suspense 1 Content\">\n+ ▾ <Suspense>\n+ <Component key=\"Suspense 2 Content\">\n+ ▾ <Suspense>\n+ <Loading key=\"Suspense 3 Fallback\">\n+ <Component key=\"Unrelated at End\">\n+`;\n+\n+exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 8: first and third child are suspended 1`] = `\n+[root]\n+ ▾ <Wrapper>\n+ <Component key=\"Outside\">\n+ ▾ <Suspense>\n+ <Component key=\"Unrelated at Start\">\n+ ▾ <Suspense>\n+ <Loading key=\"Suspense 1 Fallback\">\n+ ▾ <Suspense>\n+ <Component key=\"Suspense 2 Content\">\n+ ▾ <Suspense>\n+ <Loading key=\"Suspense 3 Fallback\">\n+ <Component key=\"Unrelated at End\">\n+`;\n+\n+exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 9: parent is suspended 1`] = `\n+[root]\n+ ▾ <Wrapper>\n+ <Component key=\"Outside\">\n+ ▾ <Suspense>\n+ <Loading key=\"Parent Fallback\">\n+`;\n+\n+exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 10: parent is suspended 1`] = `\n+[root]\n+ ▾ <Wrapper>\n+ <Component key=\"Outside\">\n+ ▾ <Suspense>\n+ <Loading key=\"Parent Fallback\">\n+`;\n+\n+exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 11: all children are suspended 1`] = `\n+[root]\n+ ▾ <Wrapper>\n+ <Component key=\"Outside\">\n+ ▾ <Suspense>\n+ <Component key=\"Unrelated at Start\">\n+ ▾ <Suspense>\n+ <Loading key=\"Suspense 1 Fallback\">\n+ ▾ <Suspense>\n+ <Loading key=\"Suspense 2 Fallback\">\n+ ▾ <Suspense>\n+ <Loading key=\"Suspense 3 Fallback\">\n+ <Component key=\"Unrelated at End\">\n+`;\n+\n+exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 12: all children are suspended 1`] = `\n+[root]\n+ ▾ <Wrapper>\n+ <Component key=\"Outside\">\n+ ▾ <Suspense>\n+ <Component key=\"Unrelated at Start\">\n+ ▾ <Suspense>\n+ <Loading key=\"Suspense 1 Fallback\">\n+ ▾ <Suspense>\n+ <Loading key=\"Suspense 2 Fallback\">\n+ ▾ <Suspense>\n+ <Loading key=\"Suspense 3 Fallback\">\n+ <Component key=\"Unrelated at End\">\n+`;\n+\n+exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 13: third child is suspended 1`] = `\n+[root]\n+ ▾ <Wrapper>\n+ <Component key=\"Outside\">\n+ ▾ <Suspense>\n+ <Component key=\"Unrelated at Start\">\n+ ▾ <Suspense>\n+ <Component key=\"Suspense 1 Content\">\n+ ▾ <Suspense>\n+ <Component key=\"Suspense 2 Content\">\n+ ▾ <Suspense>\n+ <Loading key=\"Suspense 3 Fallback\">\n+ <Component key=\"Unrelated at End\">\n+`;\n+\n+exports[`Store collapseNodesByDefault:false should support reordering of children: 1: mount 1`] = `\n+[root]\n+ ▾ <Root>\n+ ▾ <Foo key=\"foo\">\n+ <Component key=\"0\">\n+ ▾ <Bar key=\"bar\">\n+ <Component key=\"0\">\n+ <Component key=\"1\">\n+`;\n+\n+exports[`Store collapseNodesByDefault:false should support reordering of children: 3: reorder children 1`] = `\n+[root]\n+ ▾ <Root>\n+ ▾ <Bar key=\"bar\">\n+ <Component key=\"0\">\n+ <Component key=\"1\">\n+ ▾ <Foo key=\"foo\">\n+ <Component key=\"0\">\n+`;\n+\n+exports[`Store collapseNodesByDefault:false should support reordering of children: 4: collapse root 1`] = `\n+[root]\n+ ▸ <Root>\n+`;\n+\n+exports[`Store collapseNodesByDefault:false should support reordering of children: 5: expand root 1`] = `\n+[root]\n+ ▾ <Root>\n+ ▾ <Bar key=\"bar\">\n+ <Component key=\"0\">\n+ <Component key=\"1\">\n+ ▾ <Foo key=\"foo\">\n+ <Component key=\"0\">\n+`;\n+\n+exports[`Store collapseNodesByDefault:true should display Suspense nodes properly in various states: 1: loading 1`] = `\n+[root]\n+ ▸ <Wrapper>\n+`;\n+\n+exports[`Store collapseNodesByDefault:true should display Suspense nodes properly in various states: 2: expand Wrapper and Suspense 1`] = `\n+[root]\n+ ▾ <Wrapper>\n+ <Component key=\"Outside\">\n+ ▾ <Suspense>\n+ <Loading>\n+`;\n+\n+exports[`Store collapseNodesByDefault:true should display Suspense nodes properly in various states: 2: resolved 1`] = `\n+[root]\n+ ▾ <Wrapper>\n+ <Component key=\"Outside\">\n+ ▾ <Suspense>\n+ <Component key=\"Inside\">\n+`;\n+\n+exports[`Store collapseNodesByDefault:true should filter DOM nodes from the store tree: 1: mount 1`] = `\n+[root]\n+ ▸ <Grandparent>\n+`;\n+\n+exports[`Store collapseNodesByDefault:true should filter DOM nodes from the store tree: 2: expand Grandparent 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ ▸ <Parent>\n+ ▸ <Parent>\n+`;\n+\n+exports[`Store collapseNodesByDefault:true should filter DOM nodes from the store tree: 3: expand Parent 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ ▾ <Parent>\n+ <Child>\n+ ▸ <Parent>\n+`;\n+\n+exports[`Store collapseNodesByDefault:true should not add new nodes when suspense is toggled: 1: mount 1`] = `\n+[root]\n+ ▸ <SuspenseTree>\n+`;\n+\n+exports[`Store collapseNodesByDefault:true should not add new nodes when suspense is toggled: 2: expand tree 1`] = `\n+[root]\n+ ▾ <SuspenseTree>\n+ ▾ <Suspense>\n+ ▸ <Parent>\n+`;\n+\n+exports[`Store collapseNodesByDefault:true should not add new nodes when suspense is toggled: 3: toggle fallback on 1`] = `\n+[root]\n+ ▾ <SuspenseTree>\n+ ▾ <Suspense>\n+ <Fallback>\n+`;\n+\n+exports[`Store collapseNodesByDefault:true should not add new nodes when suspense is toggled: 4: toggle fallback on 1`] = `\n+[root]\n+ ▾ <SuspenseTree>\n+ ▾ <Suspense>\n+ ▸ <Parent>\n+`;\n+\n+exports[`Store collapseNodesByDefault:true should support expanding deep parts of the tree: 1: mount 1`] = `\n+[root]\n+ ▸ <Wrapper>\n+`;\n+\n+exports[`Store collapseNodesByDefault:true should support expanding deep parts of the tree: 2: expand deepest node 1`] = `\n+[root]\n+ ▾ <Wrapper>\n+ ▾ <Nested>\n+ ▾ <Nested>\n+ ▾ <Nested>\n+ <Nested>\n+`;\n+\n+exports[`Store collapseNodesByDefault:true should support expanding deep parts of the tree: 3: collapse root 1`] = `\n+[root]\n+ ▸ <Wrapper>\n+`;\n+\n+exports[`Store collapseNodesByDefault:true should support expanding deep parts of the tree: 4: expand root 1`] = `\n+[root]\n+ ▾ <Wrapper>\n+ ▾ <Nested>\n+ ▾ <Nested>\n+ ▾ <Nested>\n+ <Nested>\n+`;\n+\n+exports[`Store collapseNodesByDefault:true should support expanding deep parts of the tree: 5: collapse middle node 1`] = `\n+[root]\n+ ▾ <Wrapper>\n+ ▸ <Nested>\n+`;\n+\n+exports[`Store collapseNodesByDefault:true should support expanding deep parts of the tree: 6: expand middle node 1`] = `\n+[root]\n+ ▾ <Wrapper>\n+ ▾ <Nested>\n+ ▾ <Nested>\n+ ▾ <Nested>\n+ <Nested>\n+`;\n+\n+exports[`Store collapseNodesByDefault:true should support expanding parts of the tree: 1: mount 1`] = `\n+[root]\n+ ▸ <Grandparent>\n+`;\n+\n+exports[`Store collapseNodesByDefault:true should support expanding parts of the tree: 2: expand Grandparent 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ ▸ <Parent>\n+ ▸ <Parent>\n+`;\n+\n+exports[`Store collapseNodesByDefault:true should support expanding parts of the tree: 3: expand first Parent 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ ▾ <Parent>\n+ <Child key=\"0\">\n+ <Child key=\"1\">\n+ ▸ <Parent>\n+`;\n+\n+exports[`Store collapseNodesByDefault:true should support expanding parts of the tree: 4: expand second Parent 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ ▾ <Parent>\n+ <Child key=\"0\">\n+ <Child key=\"1\">\n+ ▾ <Parent>\n+ <Child key=\"0\">\n+ <Child key=\"1\">\n+`;\n+\n+exports[`Store collapseNodesByDefault:true should support expanding parts of the tree: 5: collapse first Parent 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ ▸ <Parent>\n+ ▾ <Parent>\n+ <Child key=\"0\">\n+ <Child key=\"1\">\n+`;\n+\n+exports[`Store collapseNodesByDefault:true should support expanding parts of the tree: 6: collapse second Parent 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ ▸ <Parent>\n+ ▸ <Parent>\n+`;\n+\n+exports[`Store collapseNodesByDefault:true should support expanding parts of the tree: 7: collapse Grandparent 1`] = `\n+[root]\n+ ▸ <Grandparent>\n+`;\n+\n+exports[`Store collapseNodesByDefault:true should support mount and update operations for multiple roots: 1: mount 1`] = `\n+[root]\n+ ▸ <Parent key=\"A\">\n+[root]\n+ ▸ <Parent key=\"B\">\n+`;\n+\n+exports[`Store collapseNodesByDefault:true should support mount and update operations for multiple roots: 2: update 1`] = `\n+[root]\n+ ▸ <Parent key=\"A\">\n+[root]\n+ ▸ <Parent key=\"B\">\n+`;\n+\n+exports[`Store collapseNodesByDefault:true should support mount and update operations for multiple roots: 3: unmount B 1`] = `\n+[root]\n+ ▸ <Parent key=\"A\">\n+`;\n+\n+exports[`Store collapseNodesByDefault:true should support mount and update operations for multiple roots: 4: unmount A 1`] = ``;\n+\n+exports[`Store collapseNodesByDefault:true should support mount and update operations: 1: mount 1`] = `\n+[root]\n+ ▸ <Parent>\n+ ▸ <Parent>\n+`;\n+\n+exports[`Store collapseNodesByDefault:true should support mount and update operations: 2: update 1`] = `\n+[root]\n+ ▸ <Parent>\n+ ▸ <Parent>\n+`;\n+\n+exports[`Store collapseNodesByDefault:true should support mount and update operations: 3: unmount 1`] = ``;\n+\n+exports[`Store collapseNodesByDefault:true should support reordering of children: 1: mount 1`] = `\n+[root]\n+ ▸ <Root>\n+`;\n+\n+exports[`Store collapseNodesByDefault:true should support reordering of children: 3: reorder children 1`] = `\n+[root]\n+ ▸ <Root>\n+`;\n+\n+exports[`Store collapseNodesByDefault:true should support reordering of children: 4: expand root 1`] = `\n+[root]\n+ ▾ <Root>\n+ ▸ <Bar key=\"bar\">\n+ ▸ <Foo key=\"foo\">\n+`;\n+\n+exports[`Store collapseNodesByDefault:true should support reordering of children: 5: expand leaves 1`] = `\n+[root]\n+ ▾ <Root>\n+ ▾ <Bar key=\"bar\">\n+ <Component key=\"0\">\n+ <Component key=\"1\">\n+ ▾ <Foo key=\"foo\">\n+ <Component key=\"0\">\n+`;\n+\n+exports[`Store collapseNodesByDefault:true should support reordering of children: 6: collapse root 1`] = `\n+[root]\n+ ▸ <Root>\n+`;\n+\n+exports[`Store should not allow a root node to be collapsed: 1: mount 1`] = `\n+[root]\n+ <Component>\n+`;\n+\n+exports[`Store should properly handle a root with no visible nodes: 1: mount 1`] = `\n+[root]\n+ <Root>\n+`;\n+\n+exports[`Store should properly handle a root with no visible nodes: 2: add host nodes 1`] = `[root]`;\ndiff --git a\/src\/__tests__\/__snapshots__\/storeComponentFilters-test.js.snap b\/src\/__tests__\/__snapshots__\/storeComponentFilters-test.js.snap\nnew file mode 100644\nindex 0000000000..884b6cbcec\n--- \/dev\/null\n+++ b\/src\/__tests__\/__snapshots__\/storeComponentFilters-test.js.snap\n@@ -0,0 +1,120 @@\n+\/\/ Jest Snapshot v1, https:\/\/goo.gl\/fbAQLP\n+\n+exports[`Store component filters should filter HOCs: 1: mount 1`] = `\n+[root]\n+ ▾ <Component> [Bar][Foo]\n+ ▾ <Component> [Foo]\n+ ▾ <Component>\n+ <div>\n+`;\n+\n+exports[`Store component filters should filter HOCs: 2: hide all HOCs 1`] = `\n+[root]\n+ ▾ <Component>\n+ <div>\n+`;\n+\n+exports[`Store component filters should filter HOCs: 3: disable HOC filter 1`] = `\n+[root]\n+ ▾ <Component> [Bar][Foo]\n+ ▾ <Component> [Foo]\n+ ▾ <Component>\n+ <div>\n+`;\n+\n+exports[`Store component filters should filter by display name: 1: mount 1`] = `\n+[root]\n+ ▾ <Foo>\n+ <Text>\n+ ▾ <Bar>\n+ <Text>\n+ ▾ <Baz>\n+ <Text>\n+`;\n+\n+exports[`Store component filters should filter by display name: 2: filter \"Foo\" 1`] = `\n+[root]\n+ <Text>\n+ ▾ <Bar>\n+ <Text>\n+ ▾ <Baz>\n+ <Text>\n+`;\n+\n+exports[`Store component filters should filter by display name: 3: filter \"Ba\" 1`] = `\n+[root]\n+ ▾ <Foo>\n+ <Text>\n+ <Text>\n+ <Text>\n+`;\n+\n+exports[`Store component filters should filter by display name: 4: filter \"B.z\" 1`] = `\n+[root]\n+ ▾ <Foo>\n+ <Text>\n+ ▾ <Bar>\n+ <Text>\n+ <Text>\n+`;\n+\n+exports[`Store component filters should filter by path: 1: mount 1`] = `\n+[root]\n+ ▾ <Component>\n+ <div>\n+`;\n+\n+exports[`Store component filters should filter by path: 2: hide all components declared within this test filed 1`] = `[root]`;\n+\n+exports[`Store component filters should filter by path: 3: hide components in a made up fake path 1`] = `\n+[root]\n+ ▾ <Component>\n+ <div>\n+`;\n+\n+exports[`Store component filters should ignore invalid ElementTypeRoot filter: 1: mount 1`] = `\n+[root]\n+ ▾ <Root>\n+ <div>\n+`;\n+\n+exports[`Store component filters should ignore invalid ElementTypeRoot filter: 2: add invalid filter 1`] = `\n+[root]\n+ ▾ <Root>\n+ <div>\n+`;\n+\n+exports[`Store component filters should support filtering by element type: 1: mount 1`] = `\n+[root]\n+ ▾ <Root>\n+ ▾ <div>\n+ ▾ <Component>\n+ <div>\n+`;\n+\n+exports[`Store component filters should support filtering by element type: 2: hide host components 1`] = `\n+[root]\n+ ▾ <Root>\n+ <Component>\n+`;\n+\n+exports[`Store component filters should support filtering by element type: 3: hide class components 1`] = `\n+[root]\n+ ▾ <div>\n+ ▾ <Component>\n+ <div>\n+`;\n+\n+exports[`Store component filters should support filtering by element type: 4: hide class and function components 1`] = `\n+[root]\n+ ▾ <div>\n+ <div>\n+`;\n+\n+exports[`Store component filters should support filtering by element type: 5: disable all filters 1`] = `\n+[root]\n+ ▾ <Root>\n+ ▾ <div>\n+ ▾ <Component>\n+ <div>\n+`;\ndiff --git a\/src\/__tests__\/__snapshots__\/storeOwners-test.js.snap b\/src\/__tests__\/__snapshots__\/storeOwners-test.js.snap\nnew file mode 100644\nindex 0000000000..28069711fd\n--- \/dev\/null\n+++ b\/src\/__tests__\/__snapshots__\/storeOwners-test.js.snap\n@@ -0,0 +1,121 @@\n+\/\/ Jest Snapshot v1, https:\/\/goo.gl\/fbAQLP\n+\n+exports[`Store owners list should drill through interleaved intermediate components: 1: mount 1`] = `\n+[root]\n+ ▾ <Root>\n+ ▾ <Intermediate key=\"intermediate\">\n+ <Leaf key=\"leaf\">\n+ ▾ <Wrapper key=\"wrapper\">\n+ <Leaf>\n+ <Leaf key=\"leaf\">\n+`;\n+\n+exports[`Store owners list should drill through interleaved intermediate components: 2: components owned by <Root> 1`] = `\n+\" ▾ <Root>\n+ ▾ <Intermediate key=\\\\\"intermediate\\\\\">\n+ <Leaf>\n+ <Leaf key=\\\\\"leaf\\\\\">\"\n+`;\n+\n+exports[`Store owners list should drill through interleaved intermediate components: 3: components owned by <Intermediate> 1`] = `\n+\" ▾ <Intermediate key=\\\\\"intermediate\\\\\">\n+ <Leaf key=\\\\\"leaf\\\\\">\n+ ▾ <Wrapper key=\\\\\"wrapper\\\\\">\"\n+`;\n+\n+exports[`Store owners list should drill through intermediate components: 1: mount 1`] = `\n+[root]\n+ ▾ <Root>\n+ ▾ <Intermediate>\n+ ▾ <Wrapper>\n+ <Leaf>\n+`;\n+\n+exports[`Store owners list should drill through intermediate components: 2: components owned by <Root> 1`] = `\n+\" ▾ <Root>\n+ ▾ <Intermediate>\n+ <Leaf>\"\n+`;\n+\n+exports[`Store owners list should drill through intermediate components: 3: components owned by <Intermediate> 1`] = `\n+\" ▾ <Intermediate>\n+ ▾ <Wrapper>\"\n+`;\n+\n+exports[`Store owners list should show the proper owners list order and contents after insertions and deletions: 1: mount 1`] = `\n+[root]\n+ ▾ <Root>\n+ ▾ <Intermediate>\n+ ▾ <Wrapper>\n+ <Leaf>\n+`;\n+\n+exports[`Store owners list should show the proper owners list order and contents after insertions and deletions: 2: components owned by <Root> 1`] = `\n+\" ▾ <Root>\n+ ▾ <Intermediate>\n+ <Leaf>\"\n+`;\n+\n+exports[`Store owners list should show the proper owners list order and contents after insertions and deletions: 3: update to add direct 1`] = `\n+[root]\n+ ▾ <Root>\n+ <Leaf>\n+ ▾ <Intermediate>\n+ ▾ <Wrapper>\n+ <Leaf>\n+`;\n+\n+exports[`Store owners list should show the proper owners list order and contents after insertions and deletions: 4: components owned by <Root> 1`] = `\n+\" ▾ <Root>\n+ <Leaf>\n+ ▾ <Intermediate>\n+ <Leaf>\"\n+`;\n+\n+exports[`Store owners list should show the proper owners list order and contents after insertions and deletions: 5: update to remove indirect 1`] = `\n+[root]\n+ ▾ <Root>\n+ <Leaf>\n+`;\n+\n+exports[`Store owners list should show the proper owners list order and contents after insertions and deletions: 6: components owned by <Root> 1`] = `\n+\" ▾ <Root>\n+ <Leaf>\"\n+`;\n+\n+exports[`Store owners list should show the proper owners list order and contents after insertions and deletions: 7: update to remove both 1`] = `\n+[root]\n+ <Root>\n+`;\n+\n+exports[`Store owners list should show the proper owners list order and contents after insertions and deletions: 8: components owned by <Root> 1`] = `\" <Root>\"`;\n+\n+exports[`Store owners list should show the proper owners list ordering after reordered children: 1: mount (ascending) 1`] = `\n+[root]\n+ ▾ <Root>\n+ <Leaf key=\"A\">\n+ <Leaf key=\"B\">\n+ <Leaf key=\"C\">\n+`;\n+\n+exports[`Store owners list should show the proper owners list ordering after reordered children: 2: components owned by <Root> 1`] = `\n+\" ▾ <Root>\n+ <Leaf key=\\\\\"A\\\\\">\n+ <Leaf key=\\\\\"B\\\\\">\n+ <Leaf key=\\\\\"C\\\\\">\"\n+`;\n+\n+exports[`Store owners list should show the proper owners list ordering after reordered children: 3: update (descending) 1`] = `\n+[root]\n+ ▾ <Root>\n+ <Leaf key=\"C\">\n+ <Leaf key=\"B\">\n+ <Leaf key=\"A\">\n+`;\n+\n+exports[`Store owners list should show the proper owners list ordering after reordered children: 4: components owned by <Root> 1`] = `\n+\" ▾ <Root>\n+ <Leaf key=\\\\\"C\\\\\">\n+ <Leaf key=\\\\\"B\\\\\">\n+ <Leaf key=\\\\\"A\\\\\">\"\n+`;\ndiff --git a\/src\/__tests__\/__snapshots__\/storeStressSync-test.js.snap b\/src\/__tests__\/__snapshots__\/storeStressSync-test.js.snap\nnew file mode 100644\nindex 0000000000..801ad148a0\n--- \/dev\/null\n+++ b\/src\/__tests__\/__snapshots__\/storeStressSync-test.js.snap\n@@ -0,0 +1,493 @@\n+\/\/ Jest Snapshot v1, https:\/\/goo.gl\/fbAQLP\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense (Sync Mode) 1`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <A key=\"a\">\n+ <Y>\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense (Sync Mode) 2`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <A key=\"a\">\n+ <Y>\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense (Sync Mode) 3`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <A key=\"a\">\n+ <B key=\"b\">\n+ <C key=\"c\">\n+ <Y>\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense (Sync Mode) 4`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <C key=\"c\">\n+ <B key=\"b\">\n+ <A key=\"a\">\n+ <Y>\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense (Sync Mode) 5`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <C key=\"c\">\n+ <A key=\"a\">\n+ <Y>\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense (Sync Mode) 6`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <C key=\"c\">\n+ <A key=\"a\">\n+ <Y>\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense (Sync Mode) 7`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <C key=\"c\">\n+ <A key=\"a\">\n+ <Y>\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense (Sync Mode) 8`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <A key=\"a\">\n+ <B key=\"b\">\n+ <Y>\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense (Sync Mode) 9`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <A key=\"a\">\n+ <Y>\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense (Sync Mode) 10`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ <Suspense>\n+ <Y>\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense (Sync Mode) 11`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <B key=\"b\">\n+ <Y>\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense (Sync Mode) 12`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <A key=\"a\">\n+ <Y>\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 1`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ ▾ <MaybeSuspend>\n+ <A key=\"a\">\n+ <Z>\n+ <Y>\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 2`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ ▾ <MaybeSuspend>\n+ <A key=\"a\">\n+ <Z>\n+ <Y>\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 3`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ ▾ <MaybeSuspend>\n+ <A key=\"a\">\n+ <B key=\"b\">\n+ <C key=\"c\">\n+ <Z>\n+ <Y>\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 4`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ ▾ <MaybeSuspend>\n+ <C key=\"c\">\n+ <B key=\"b\">\n+ <A key=\"a\">\n+ <Z>\n+ <Y>\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 5`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ ▾ <MaybeSuspend>\n+ <C key=\"c\">\n+ <A key=\"a\">\n+ <Z>\n+ <Y>\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 6`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ ▾ <MaybeSuspend>\n+ <C key=\"c\">\n+ <A key=\"a\">\n+ <Z>\n+ <Y>\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 7`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ ▾ <MaybeSuspend>\n+ <C key=\"c\">\n+ <A key=\"a\">\n+ <Z>\n+ <Y>\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 8`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ ▾ <MaybeSuspend>\n+ <A key=\"a\">\n+ <B key=\"b\">\n+ <Z>\n+ <Y>\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 9`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ ▾ <MaybeSuspend>\n+ <A key=\"a\">\n+ <Z>\n+ <Y>\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 10`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ ▾ <MaybeSuspend>\n+ <Z>\n+ <Y>\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 11`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ ▾ <MaybeSuspend>\n+ <B key=\"b\">\n+ <Z>\n+ <Y>\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 12`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ ▾ <MaybeSuspend>\n+ <A key=\"a\">\n+ <Z>\n+ <Y>\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 13`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <A key=\"a\">\n+ <Y>\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 14`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <A key=\"a\">\n+ <Y>\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 15`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <A key=\"a\">\n+ <B key=\"b\">\n+ <C key=\"c\">\n+ <Y>\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 16`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <C key=\"c\">\n+ <B key=\"b\">\n+ <A key=\"a\">\n+ <Y>\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 17`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <C key=\"c\">\n+ <A key=\"a\">\n+ <Y>\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 18`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <C key=\"c\">\n+ <A key=\"a\">\n+ <Y>\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 19`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <C key=\"c\">\n+ <A key=\"a\">\n+ <Y>\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 20`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <A key=\"a\">\n+ <B key=\"b\">\n+ <Y>\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 21`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <A key=\"a\">\n+ <Y>\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 22`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ <Suspense>\n+ <Y>\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 23`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <B key=\"b\">\n+ <Y>\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test for Suspense without type change (Sync Mode) 24`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <A key=\"a\">\n+ <Y>\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test with different tree operations (Sync Mode): 1: abcde 1`] = `\n+[root]\n+ ▾ <Parent>\n+ <A key=\"a\">\n+ <B key=\"b\">\n+ <C key=\"c\">\n+ <D key=\"d\">\n+ <E key=\"e\">\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle a stress test with different tree operations (Sync Mode): 2: abxde 1`] = `\n+[root]\n+ ▾ <Parent>\n+ <A key=\"a\">\n+ <B key=\"b\">\n+ ▾ <C key=\"c\">\n+ <X>\n+ <D key=\"d\">\n+ <E key=\"e\">\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle stress test with reordering (Sync Mode) 1`] = `\n+[root]\n+ ▾ <Root>\n+ <A key=\"a\">\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle stress test with reordering (Sync Mode) 2`] = `\n+[root]\n+ ▾ <Root>\n+ <B key=\"b\">\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle stress test with reordering (Sync Mode) 3`] = `\n+[root]\n+ ▾ <Root>\n+ <C key=\"c\">\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle stress test with reordering (Sync Mode) 4`] = `\n+[root]\n+ ▾ <Root>\n+ <D key=\"d\">\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle stress test with reordering (Sync Mode) 5`] = `\n+[root]\n+ ▾ <Root>\n+ <E key=\"e\">\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle stress test with reordering (Sync Mode) 6`] = `\n+[root]\n+ ▾ <Root>\n+ <A key=\"a\">\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle stress test with reordering (Sync Mode) 7`] = `\n+[root]\n+ ▾ <Root>\n+ <B key=\"b\">\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle stress test with reordering (Sync Mode) 8`] = `\n+[root]\n+ ▾ <Root>\n+ <C key=\"c\">\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle stress test with reordering (Sync Mode) 9`] = `\n+[root]\n+ ▾ <Root>\n+ <D key=\"d\">\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle stress test with reordering (Sync Mode) 10`] = `\n+[root]\n+ ▾ <Root>\n+ <E key=\"e\">\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle stress test with reordering (Sync Mode) 11`] = `\n+[root]\n+ ▾ <Root>\n+ <A key=\"a\">\n+ <B key=\"b\">\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle stress test with reordering (Sync Mode) 12`] = `\n+[root]\n+ ▾ <Root>\n+ <B key=\"b\">\n+ <A key=\"a\">\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle stress test with reordering (Sync Mode) 13`] = `\n+[root]\n+ ▾ <Root>\n+ <B key=\"b\">\n+ <C key=\"c\">\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle stress test with reordering (Sync Mode) 14`] = `\n+[root]\n+ ▾ <Root>\n+ <C key=\"c\">\n+ <B key=\"b\">\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle stress test with reordering (Sync Mode) 15`] = `\n+[root]\n+ ▾ <Root>\n+ <A key=\"a\">\n+ <C key=\"c\">\n+`;\n+\n+exports[`StoreStress (Sync Mode) should handle stress test with reordering (Sync Mode) 16`] = `\n+[root]\n+ ▾ <Root>\n+ <C key=\"c\">\n+ <A key=\"a\">\n+`;\ndiff --git a\/src\/__tests__\/__snapshots__\/storeStressTestConcurrent-test.js.snap b\/src\/__tests__\/__snapshots__\/storeStressTestConcurrent-test.js.snap\nnew file mode 100644\nindex 0000000000..9527d9f602\n--- \/dev\/null\n+++ b\/src\/__tests__\/__snapshots__\/storeStressTestConcurrent-test.js.snap\n@@ -0,0 +1,493 @@\n+\/\/ Jest Snapshot v1, https:\/\/goo.gl\/fbAQLP\n+\n+exports[`StoreStressConcurrent should handle a stress test for Suspense (Concurrent Mode) 1`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <A key=\"a\">\n+ <Y>\n+`;\n+\n+exports[`StoreStressConcurrent should handle a stress test for Suspense (Concurrent Mode) 2`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <A key=\"a\">\n+ <Y>\n+`;\n+\n+exports[`StoreStressConcurrent should handle a stress test for Suspense (Concurrent Mode) 3`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <A key=\"a\">\n+ <B key=\"b\">\n+ <C key=\"c\">\n+ <Y>\n+`;\n+\n+exports[`StoreStressConcurrent should handle a stress test for Suspense (Concurrent Mode) 4`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <C key=\"c\">\n+ <B key=\"b\">\n+ <A key=\"a\">\n+ <Y>\n+`;\n+\n+exports[`StoreStressConcurrent should handle a stress test for Suspense (Concurrent Mode) 5`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <C key=\"c\">\n+ <A key=\"a\">\n+ <Y>\n+`;\n+\n+exports[`StoreStressConcurrent should handle a stress test for Suspense (Concurrent Mode) 6`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <C key=\"c\">\n+ <A key=\"a\">\n+ <Y>\n+`;\n+\n+exports[`StoreStressConcurrent should handle a stress test for Suspense (Concurrent Mode) 7`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <C key=\"c\">\n+ <A key=\"a\">\n+ <Y>\n+`;\n+\n+exports[`StoreStressConcurrent should handle a stress test for Suspense (Concurrent Mode) 8`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <A key=\"a\">\n+ <B key=\"b\">\n+ <Y>\n+`;\n+\n+exports[`StoreStressConcurrent should handle a stress test for Suspense (Concurrent Mode) 9`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <A key=\"a\">\n+ <Y>\n+`;\n+\n+exports[`StoreStressConcurrent should handle a stress test for Suspense (Concurrent Mode) 10`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ <Suspense>\n+ <Y>\n+`;\n+\n+exports[`StoreStressConcurrent should handle a stress test for Suspense (Concurrent Mode) 11`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <B key=\"b\">\n+ <Y>\n+`;\n+\n+exports[`StoreStressConcurrent should handle a stress test for Suspense (Concurrent Mode) 12`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <A key=\"a\">\n+ <Y>\n+`;\n+\n+exports[`StoreStressConcurrent should handle a stress test for Suspense without type change (Concurrent Mode) 1`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ ▾ <MaybeSuspend>\n+ <A key=\"a\">\n+ <Z>\n+ <Y>\n+`;\n+\n+exports[`StoreStressConcurrent should handle a stress test for Suspense without type change (Concurrent Mode) 2`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ ▾ <MaybeSuspend>\n+ <A key=\"a\">\n+ <Z>\n+ <Y>\n+`;\n+\n+exports[`StoreStressConcurrent should handle a stress test for Suspense without type change (Concurrent Mode) 3`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ ▾ <MaybeSuspend>\n+ <A key=\"a\">\n+ <B key=\"b\">\n+ <C key=\"c\">\n+ <Z>\n+ <Y>\n+`;\n+\n+exports[`StoreStressConcurrent should handle a stress test for Suspense without type change (Concurrent Mode) 4`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ ▾ <MaybeSuspend>\n+ <C key=\"c\">\n+ <B key=\"b\">\n+ <A key=\"a\">\n+ <Z>\n+ <Y>\n+`;\n+\n+exports[`StoreStressConcurrent should handle a stress test for Suspense without type change (Concurrent Mode) 5`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ ▾ <MaybeSuspend>\n+ <C key=\"c\">\n+ <A key=\"a\">\n+ <Z>\n+ <Y>\n+`;\n+\n+exports[`StoreStressConcurrent should handle a stress test for Suspense without type change (Concurrent Mode) 6`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ ▾ <MaybeSuspend>\n+ <C key=\"c\">\n+ <A key=\"a\">\n+ <Z>\n+ <Y>\n+`;\n+\n+exports[`StoreStressConcurrent should handle a stress test for Suspense without type change (Concurrent Mode) 7`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ ▾ <MaybeSuspend>\n+ <C key=\"c\">\n+ <A key=\"a\">\n+ <Z>\n+ <Y>\n+`;\n+\n+exports[`StoreStressConcurrent should handle a stress test for Suspense without type change (Concurrent Mode) 8`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ ▾ <MaybeSuspend>\n+ <A key=\"a\">\n+ <B key=\"b\">\n+ <Z>\n+ <Y>\n+`;\n+\n+exports[`StoreStressConcurrent should handle a stress test for Suspense without type change (Concurrent Mode) 9`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ ▾ <MaybeSuspend>\n+ <A key=\"a\">\n+ <Z>\n+ <Y>\n+`;\n+\n+exports[`StoreStressConcurrent should handle a stress test for Suspense without type change (Concurrent Mode) 10`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ ▾ <MaybeSuspend>\n+ <Z>\n+ <Y>\n+`;\n+\n+exports[`StoreStressConcurrent should handle a stress test for Suspense without type change (Concurrent Mode) 11`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ ▾ <MaybeSuspend>\n+ <B key=\"b\">\n+ <Z>\n+ <Y>\n+`;\n+\n+exports[`StoreStressConcurrent should handle a stress test for Suspense without type change (Concurrent Mode) 12`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ ▾ <MaybeSuspend>\n+ <A key=\"a\">\n+ <Z>\n+ <Y>\n+`;\n+\n+exports[`StoreStressConcurrent should handle a stress test for Suspense without type change (Concurrent Mode) 13`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <A key=\"a\">\n+ <Y>\n+`;\n+\n+exports[`StoreStressConcurrent should handle a stress test for Suspense without type change (Concurrent Mode) 14`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <A key=\"a\">\n+ <Y>\n+`;\n+\n+exports[`StoreStressConcurrent should handle a stress test for Suspense without type change (Concurrent Mode) 15`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <A key=\"a\">\n+ <B key=\"b\">\n+ <C key=\"c\">\n+ <Y>\n+`;\n+\n+exports[`StoreStressConcurrent should handle a stress test for Suspense without type change (Concurrent Mode) 16`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <C key=\"c\">\n+ <B key=\"b\">\n+ <A key=\"a\">\n+ <Y>\n+`;\n+\n+exports[`StoreStressConcurrent should handle a stress test for Suspense without type change (Concurrent Mode) 17`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <C key=\"c\">\n+ <A key=\"a\">\n+ <Y>\n+`;\n+\n+exports[`StoreStressConcurrent should handle a stress test for Suspense without type change (Concurrent Mode) 18`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <C key=\"c\">\n+ <A key=\"a\">\n+ <Y>\n+`;\n+\n+exports[`StoreStressConcurrent should handle a stress test for Suspense without type change (Concurrent Mode) 19`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <C key=\"c\">\n+ <A key=\"a\">\n+ <Y>\n+`;\n+\n+exports[`StoreStressConcurrent should handle a stress test for Suspense without type change (Concurrent Mode) 20`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <A key=\"a\">\n+ <B key=\"b\">\n+ <Y>\n+`;\n+\n+exports[`StoreStressConcurrent should handle a stress test for Suspense without type change (Concurrent Mode) 21`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <A key=\"a\">\n+ <Y>\n+`;\n+\n+exports[`StoreStressConcurrent should handle a stress test for Suspense without type change (Concurrent Mode) 22`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ <Suspense>\n+ <Y>\n+`;\n+\n+exports[`StoreStressConcurrent should handle a stress test for Suspense without type change (Concurrent Mode) 23`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <B key=\"b\">\n+ <Y>\n+`;\n+\n+exports[`StoreStressConcurrent should handle a stress test for Suspense without type change (Concurrent Mode) 24`] = `\n+[root]\n+ ▾ <Root>\n+ <X>\n+ ▾ <Suspense>\n+ <A key=\"a\">\n+ <Y>\n+`;\n+\n+exports[`StoreStressConcurrent should handle a stress test with different tree operations (Concurrent Mode): 1: abcde 1`] = `\n+[root]\n+ ▾ <Parent>\n+ <A key=\"a\">\n+ <B key=\"b\">\n+ <C key=\"c\">\n+ <D key=\"d\">\n+ <E key=\"e\">\n+`;\n+\n+exports[`StoreStressConcurrent should handle a stress test with different tree operations (Concurrent Mode): 2: abxde 1`] = `\n+[root]\n+ ▾ <Parent>\n+ <A key=\"a\">\n+ <B key=\"b\">\n+ ▾ <C key=\"c\">\n+ <X>\n+ <D key=\"d\">\n+ <E key=\"e\">\n+`;\n+\n+exports[`StoreStressConcurrent should handle stress test with reordering (Concurrent Mode) 1`] = `\n+[root]\n+ ▾ <Root>\n+ <A key=\"a\">\n+`;\n+\n+exports[`StoreStressConcurrent should handle stress test with reordering (Concurrent Mode) 2`] = `\n+[root]\n+ ▾ <Root>\n+ <B key=\"b\">\n+`;\n+\n+exports[`StoreStressConcurrent should handle stress test with reordering (Concurrent Mode) 3`] = `\n+[root]\n+ ▾ <Root>\n+ <C key=\"c\">\n+`;\n+\n+exports[`StoreStressConcurrent should handle stress test with reordering (Concurrent Mode) 4`] = `\n+[root]\n+ ▾ <Root>\n+ <D key=\"d\">\n+`;\n+\n+exports[`StoreStressConcurrent should handle stress test with reordering (Concurrent Mode) 5`] = `\n+[root]\n+ ▾ <Root>\n+ <E key=\"e\">\n+`;\n+\n+exports[`StoreStressConcurrent should handle stress test with reordering (Concurrent Mode) 6`] = `\n+[root]\n+ ▾ <Root>\n+ <A key=\"a\">\n+`;\n+\n+exports[`StoreStressConcurrent should handle stress test with reordering (Concurrent Mode) 7`] = `\n+[root]\n+ ▾ <Root>\n+ <B key=\"b\">\n+`;\n+\n+exports[`StoreStressConcurrent should handle stress test with reordering (Concurrent Mode) 8`] = `\n+[root]\n+ ▾ <Root>\n+ <C key=\"c\">\n+`;\n+\n+exports[`StoreStressConcurrent should handle stress test with reordering (Concurrent Mode) 9`] = `\n+[root]\n+ ▾ <Root>\n+ <D key=\"d\">\n+`;\n+\n+exports[`StoreStressConcurrent should handle stress test with reordering (Concurrent Mode) 10`] = `\n+[root]\n+ ▾ <Root>\n+ <E key=\"e\">\n+`;\n+\n+exports[`StoreStressConcurrent should handle stress test with reordering (Concurrent Mode) 11`] = `\n+[root]\n+ ▾ <Root>\n+ <A key=\"a\">\n+ <B key=\"b\">\n+`;\n+\n+exports[`StoreStressConcurrent should handle stress test with reordering (Concurrent Mode) 12`] = `\n+[root]\n+ ▾ <Root>\n+ <B key=\"b\">\n+ <A key=\"a\">\n+`;\n+\n+exports[`StoreStressConcurrent should handle stress test with reordering (Concurrent Mode) 13`] = `\n+[root]\n+ ▾ <Root>\n+ <B key=\"b\">\n+ <C key=\"c\">\n+`;\n+\n+exports[`StoreStressConcurrent should handle stress test with reordering (Concurrent Mode) 14`] = `\n+[root]\n+ ▾ <Root>\n+ <C key=\"c\">\n+ <B key=\"b\">\n+`;\n+\n+exports[`StoreStressConcurrent should handle stress test with reordering (Concurrent Mode) 15`] = `\n+[root]\n+ ▾ <Root>\n+ <A key=\"a\">\n+ <C key=\"c\">\n+`;\n+\n+exports[`StoreStressConcurrent should handle stress test with reordering (Concurrent Mode) 16`] = `\n+[root]\n+ ▾ <Root>\n+ <C key=\"c\">\n+ <A key=\"a\">\n+`;\ndiff --git a\/src\/__tests__\/__snapshots__\/treeContext-test.js.snap b\/src\/__tests__\/__snapshots__\/treeContext-test.js.snap\nnew file mode 100644\nindex 0000000000..33230c69aa\n--- \/dev\/null\n+++ b\/src\/__tests__\/__snapshots__\/treeContext-test.js.snap\n@@ -0,0 +1,1204 @@\n+\/\/ Jest Snapshot v1, https:\/\/goo.gl\/fbAQLP\n+\n+exports[`TreeListContext owners state should exit the owners list if an element outside the list is selected: 0: mount 1`] = `\n+[root]\n+ ▾ <Parent>\n+ ▾ <Suspense>\n+ ▾ <Child>\n+ ▾ <Suspense>\n+ <Grandchild>\n+`;\n+\n+exports[`TreeListContext owners state should exit the owners list if an element outside the list is selected: 1: initial state 1`] = `\n+Object {\n+ \"inspectedElementID\": null,\n+ \"numElements\": 5,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": null,\n+ \"selectedElementIndex\": null,\n+}\n+`;\n+\n+exports[`TreeListContext owners state should exit the owners list if an element outside the list is selected: 2: child owners tree 1`] = `\n+Object {\n+ \"inspectedElementID\": 4,\n+ \"numElements\": 3,\n+ \"ownerFlatTree\": Array [\n+ Object {\n+ \"children\": Array [\n+ 5,\n+ ],\n+ \"depth\": 0,\n+ \"displayName\": \"Child\",\n+ \"hocDisplayNames\": null,\n+ \"id\": 4,\n+ \"isCollapsed\": false,\n+ \"key\": null,\n+ \"ownerID\": 2,\n+ \"parentID\": 3,\n+ \"type\": 5,\n+ \"weight\": 3,\n+ },\n+ Object {\n+ \"children\": Array [\n+ 6,\n+ ],\n+ \"depth\": 1,\n+ \"displayName\": \"Suspense\",\n+ \"hocDisplayNames\": null,\n+ \"id\": 5,\n+ \"isCollapsed\": false,\n+ \"key\": null,\n+ \"ownerID\": 4,\n+ \"parentID\": 4,\n+ \"type\": 12,\n+ \"weight\": 2,\n+ },\n+ Object {\n+ \"children\": Array [],\n+ \"depth\": 2,\n+ \"displayName\": \"Grandchild\",\n+ \"hocDisplayNames\": null,\n+ \"id\": 6,\n+ \"isCollapsed\": false,\n+ \"key\": null,\n+ \"ownerID\": 4,\n+ \"parentID\": 5,\n+ \"type\": 5,\n+ \"weight\": 1,\n+ },\n+ ],\n+ \"ownerID\": 4,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 4,\n+ \"selectedElementIndex\": 0,\n+}\n+`;\n+\n+exports[`TreeListContext owners state should exit the owners list if an element outside the list is selected: 3: child owners tree 1`] = `\n+Object {\n+ \"inspectedElementID\": 5,\n+ \"numElements\": 3,\n+ \"ownerFlatTree\": Array [\n+ Object {\n+ \"children\": Array [\n+ 5,\n+ ],\n+ \"depth\": 0,\n+ \"displayName\": \"Child\",\n+ \"hocDisplayNames\": null,\n+ \"id\": 4,\n+ \"isCollapsed\": false,\n+ \"key\": null,\n+ \"ownerID\": 2,\n+ \"parentID\": 3,\n+ \"type\": 5,\n+ \"weight\": 3,\n+ },\n+ Object {\n+ \"children\": Array [\n+ 6,\n+ ],\n+ \"depth\": 1,\n+ \"displayName\": \"Suspense\",\n+ \"hocDisplayNames\": null,\n+ \"id\": 5,\n+ \"isCollapsed\": false,\n+ \"key\": null,\n+ \"ownerID\": 4,\n+ \"parentID\": 4,\n+ \"type\": 12,\n+ \"weight\": 2,\n+ },\n+ Object {\n+ \"children\": Array [],\n+ \"depth\": 2,\n+ \"displayName\": \"Grandchild\",\n+ \"hocDisplayNames\": null,\n+ \"id\": 6,\n+ \"isCollapsed\": false,\n+ \"key\": null,\n+ \"ownerID\": 4,\n+ \"parentID\": 5,\n+ \"type\": 5,\n+ \"weight\": 1,\n+ },\n+ ],\n+ \"ownerID\": 4,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 5,\n+ \"selectedElementIndex\": 1,\n+}\n+`;\n+\n+exports[`TreeListContext owners state should exit the owners list if an element outside the list is selected: 4: main tree 1`] = `\n+Object {\n+ \"inspectedElementID\": 5,\n+ \"numElements\": 5,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 5,\n+ \"selectedElementIndex\": 1,\n+}\n+`;\n+\n+exports[`TreeListContext owners state should exit the owners list if the current owner is unmounted: 0: mount 1`] = `\n+[root]\n+ ▾ <Parent>\n+ <Child>\n+`;\n+\n+exports[`TreeListContext owners state should exit the owners list if the current owner is unmounted: 1: initial state 1`] = `\n+Object {\n+ \"inspectedElementID\": null,\n+ \"numElements\": 2,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": null,\n+ \"selectedElementIndex\": null,\n+}\n+`;\n+\n+exports[`TreeListContext owners state should exit the owners list if the current owner is unmounted: 2: child owners tree 1`] = `\n+Object {\n+ \"inspectedElementID\": 3,\n+ \"numElements\": 1,\n+ \"ownerFlatTree\": Array [\n+ Object {\n+ \"children\": Array [],\n+ \"depth\": 0,\n+ \"displayName\": \"Child\",\n+ \"hocDisplayNames\": null,\n+ \"id\": 3,\n+ \"isCollapsed\": false,\n+ \"key\": null,\n+ \"ownerID\": 0,\n+ \"parentID\": 2,\n+ \"type\": 5,\n+ \"weight\": 1,\n+ },\n+ ],\n+ \"ownerID\": 3,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 3,\n+ \"selectedElementIndex\": 0,\n+}\n+`;\n+\n+exports[`TreeListContext owners state should exit the owners list if the current owner is unmounted: 3: remove child 1`] = `\n+Object {\n+ \"inspectedElementID\": null,\n+ \"numElements\": 1,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": null,\n+ \"selectedElementIndex\": 0,\n+}\n+`;\n+\n+exports[`TreeListContext owners state should exit the owners list if the current owner is unmounted: 4: parent owners tree 1`] = `\n+Object {\n+ \"inspectedElementID\": 2,\n+ \"numElements\": 1,\n+ \"ownerFlatTree\": Array [\n+ Object {\n+ \"children\": Array [],\n+ \"depth\": 0,\n+ \"displayName\": \"Parent\",\n+ \"hocDisplayNames\": null,\n+ \"id\": 2,\n+ \"isCollapsed\": false,\n+ \"key\": null,\n+ \"ownerID\": 0,\n+ \"parentID\": 1,\n+ \"type\": 5,\n+ \"weight\": 1,\n+ },\n+ ],\n+ \"ownerID\": 2,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 2,\n+ \"selectedElementIndex\": 0,\n+}\n+`;\n+\n+exports[`TreeListContext owners state should exit the owners list if the current owner is unmounted: 5: unmount root 1`] = `\n+Object {\n+ \"inspectedElementID\": null,\n+ \"numElements\": 0,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": null,\n+ \"selectedElementIndex\": 0,\n+}\n+`;\n+\n+exports[`TreeListContext owners state should remove an element from the owners list if it is unmounted: 0: mount 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ ▾ <Parent>\n+ <Child key=\"0\">\n+ <Child key=\"1\">\n+`;\n+\n+exports[`TreeListContext owners state should remove an element from the owners list if it is unmounted: 1: initial state 1`] = `\n+Object {\n+ \"inspectedElementID\": null,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": null,\n+ \"selectedElementIndex\": null,\n+}\n+`;\n+\n+exports[`TreeListContext owners state should remove an element from the owners list if it is unmounted: 2: parent owners tree 1`] = `\n+Object {\n+ \"inspectedElementID\": 3,\n+ \"numElements\": 3,\n+ \"ownerFlatTree\": Array [\n+ Object {\n+ \"children\": Array [\n+ 4,\n+ 5,\n+ ],\n+ \"depth\": 0,\n+ \"displayName\": \"Parent\",\n+ \"hocDisplayNames\": null,\n+ \"id\": 3,\n+ \"isCollapsed\": false,\n+ \"key\": null,\n+ \"ownerID\": 2,\n+ \"parentID\": 2,\n+ \"type\": 5,\n+ \"weight\": 3,\n+ },\n+ Object {\n+ \"children\": Array [],\n+ \"depth\": 1,\n+ \"displayName\": \"Child\",\n+ \"hocDisplayNames\": null,\n+ \"id\": 4,\n+ \"isCollapsed\": false,\n+ \"key\": \"0\",\n+ \"ownerID\": 3,\n+ \"parentID\": 3,\n+ \"type\": 5,\n+ \"weight\": 1,\n+ },\n+ Object {\n+ \"children\": Array [],\n+ \"depth\": 1,\n+ \"displayName\": \"Child\",\n+ \"hocDisplayNames\": null,\n+ \"id\": 5,\n+ \"isCollapsed\": false,\n+ \"key\": \"1\",\n+ \"ownerID\": 3,\n+ \"parentID\": 3,\n+ \"type\": 5,\n+ \"weight\": 1,\n+ },\n+ ],\n+ \"ownerID\": 3,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 3,\n+ \"selectedElementIndex\": 0,\n+}\n+`;\n+\n+exports[`TreeListContext owners state should remove an element from the owners list if it is unmounted: 3: remove second child 1`] = `\n+Object {\n+ \"inspectedElementID\": 3,\n+ \"numElements\": 2,\n+ \"ownerFlatTree\": Array [\n+ Object {\n+ \"children\": Array [\n+ 4,\n+ ],\n+ \"depth\": 0,\n+ \"displayName\": \"Parent\",\n+ \"hocDisplayNames\": null,\n+ \"id\": 3,\n+ \"isCollapsed\": false,\n+ \"key\": null,\n+ \"ownerID\": 2,\n+ \"parentID\": 2,\n+ \"type\": 5,\n+ \"weight\": 2,\n+ },\n+ Object {\n+ \"children\": Array [],\n+ \"depth\": 1,\n+ \"displayName\": \"Child\",\n+ \"hocDisplayNames\": null,\n+ \"id\": 4,\n+ \"isCollapsed\": false,\n+ \"key\": \"0\",\n+ \"ownerID\": 3,\n+ \"parentID\": 3,\n+ \"type\": 5,\n+ \"weight\": 1,\n+ },\n+ ],\n+ \"ownerID\": 3,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 3,\n+ \"selectedElementIndex\": 0,\n+}\n+`;\n+\n+exports[`TreeListContext owners state should remove an element from the owners list if it is unmounted: 4: remove first child 1`] = `\n+Object {\n+ \"inspectedElementID\": 3,\n+ \"numElements\": 1,\n+ \"ownerFlatTree\": Array [\n+ Object {\n+ \"children\": Array [],\n+ \"depth\": 0,\n+ \"displayName\": \"Parent\",\n+ \"hocDisplayNames\": null,\n+ \"id\": 3,\n+ \"isCollapsed\": false,\n+ \"key\": null,\n+ \"ownerID\": 2,\n+ \"parentID\": 2,\n+ \"type\": 5,\n+ \"weight\": 1,\n+ },\n+ ],\n+ \"ownerID\": 3,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 3,\n+ \"selectedElementIndex\": 0,\n+}\n+`;\n+\n+exports[`TreeListContext owners state should support entering and existing the owners tree view: 0: mount 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ ▾ <Parent>\n+ <Child>\n+ <Child>\n+`;\n+\n+exports[`TreeListContext owners state should support entering and existing the owners tree view: 1: initial state 1`] = `\n+Object {\n+ \"inspectedElementID\": null,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": null,\n+ \"selectedElementIndex\": null,\n+}\n+`;\n+\n+exports[`TreeListContext owners state should support entering and existing the owners tree view: 2: parent owners tree 1`] = `\n+Object {\n+ \"inspectedElementID\": 3,\n+ \"numElements\": 3,\n+ \"ownerFlatTree\": Array [\n+ Object {\n+ \"children\": Array [\n+ 4,\n+ 5,\n+ ],\n+ \"depth\": 0,\n+ \"displayName\": \"Parent\",\n+ \"hocDisplayNames\": null,\n+ \"id\": 3,\n+ \"isCollapsed\": false,\n+ \"key\": null,\n+ \"ownerID\": 2,\n+ \"parentID\": 2,\n+ \"type\": 5,\n+ \"weight\": 3,\n+ },\n+ Object {\n+ \"children\": Array [],\n+ \"depth\": 1,\n+ \"displayName\": \"Child\",\n+ \"hocDisplayNames\": null,\n+ \"id\": 4,\n+ \"isCollapsed\": false,\n+ \"key\": null,\n+ \"ownerID\": 3,\n+ \"parentID\": 3,\n+ \"type\": 5,\n+ \"weight\": 1,\n+ },\n+ Object {\n+ \"children\": Array [],\n+ \"depth\": 1,\n+ \"displayName\": \"Child\",\n+ \"hocDisplayNames\": null,\n+ \"id\": 5,\n+ \"isCollapsed\": false,\n+ \"key\": null,\n+ \"ownerID\": 3,\n+ \"parentID\": 3,\n+ \"type\": 5,\n+ \"weight\": 1,\n+ },\n+ ],\n+ \"ownerID\": 3,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 3,\n+ \"selectedElementIndex\": 0,\n+}\n+`;\n+\n+exports[`TreeListContext owners state should support entering and existing the owners tree view: 3: final state 1`] = `\n+Object {\n+ \"inspectedElementID\": 3,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 3,\n+ \"selectedElementIndex\": 1,\n+}\n+`;\n+\n+exports[`TreeListContext search state should add newly mounted elements to the search results set if they match the current text: 0: mount 1`] = `\n+[root]\n+ <Foo>\n+ <Bar>\n+`;\n+\n+exports[`TreeListContext search state should add newly mounted elements to the search results set if they match the current text: 1: initial state 1`] = `\n+Object {\n+ \"inspectedElementID\": null,\n+ \"numElements\": 2,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": null,\n+ \"selectedElementIndex\": null,\n+}\n+`;\n+\n+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`] = `\n+Object {\n+ \"inspectedElementID\": 3,\n+ \"numElements\": 2,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": 0,\n+ \"searchResults\": Array [\n+ 3,\n+ ],\n+ \"searchText\": \"ba\",\n+ \"selectedElementID\": 3,\n+ \"selectedElementIndex\": 1,\n+}\n+`;\n+\n+exports[`TreeListContext search state should add newly mounted elements to the search results set if they match the current text: 3: mount Baz 1`] = `\n+Object {\n+ \"inspectedElementID\": 3,\n+ \"numElements\": 3,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": 0,\n+ \"searchResults\": Array [\n+ 3,\n+ 4,\n+ ],\n+ \"searchText\": \"ba\",\n+ \"selectedElementID\": 3,\n+ \"selectedElementIndex\": 1,\n+}\n+`;\n+\n+exports[`TreeListContext search state should find elements matching search text: 0: mount 1`] = `\n+[root]\n+ <Foo>\n+ <Bar>\n+ <Baz>\n+ <Qux> [withHOC]\n+`;\n+\n+exports[`TreeListContext search state should find elements matching search text: 1: initial state 1`] = `\n+Object {\n+ \"inspectedElementID\": null,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": null,\n+ \"selectedElementIndex\": null,\n+}\n+`;\n+\n+exports[`TreeListContext search state should find elements matching search text: 2: search for \"ba\" 1`] = `\n+Object {\n+ \"inspectedElementID\": 3,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": 0,\n+ \"searchResults\": Array [\n+ 3,\n+ 4,\n+ ],\n+ \"searchText\": \"ba\",\n+ \"selectedElementID\": 3,\n+ \"selectedElementIndex\": 1,\n+}\n+`;\n+\n+exports[`TreeListContext search state should find elements matching search text: 3: search for \"f\" 1`] = `\n+Object {\n+ \"inspectedElementID\": 2,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": 0,\n+ \"searchResults\": Array [\n+ 2,\n+ ],\n+ \"searchText\": \"f\",\n+ \"selectedElementID\": 2,\n+ \"selectedElementIndex\": 0,\n+}\n+`;\n+\n+exports[`TreeListContext search state should find elements matching search text: 4: search for \"y\" 1`] = `\n+Object {\n+ \"inspectedElementID\": 2,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"y\",\n+ \"selectedElementID\": 2,\n+ \"selectedElementIndex\": 0,\n+}\n+`;\n+\n+exports[`TreeListContext search state should find elements matching search text: 5: search for \"w\" 1`] = `\n+Object {\n+ \"inspectedElementID\": 5,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": 0,\n+ \"searchResults\": Array [\n+ 5,\n+ ],\n+ \"searchText\": \"w\",\n+ \"selectedElementID\": 5,\n+ \"selectedElementIndex\": 3,\n+}\n+`;\n+\n+exports[`TreeListContext search state should remove unmounted elements from the search results set: 0: mount 1`] = `\n+[root]\n+ <Foo>\n+ <Bar>\n+ <Baz>\n+`;\n+\n+exports[`TreeListContext search state should remove unmounted elements from the search results set: 1: initial state 1`] = `\n+Object {\n+ \"inspectedElementID\": null,\n+ \"numElements\": 3,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": null,\n+ \"selectedElementIndex\": null,\n+}\n+`;\n+\n+exports[`TreeListContext search state should remove unmounted elements from the search results set: 2: search for \"ba\" 1`] = `\n+Object {\n+ \"inspectedElementID\": 3,\n+ \"numElements\": 3,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": 0,\n+ \"searchResults\": Array [\n+ 3,\n+ 4,\n+ ],\n+ \"searchText\": \"ba\",\n+ \"selectedElementID\": 3,\n+ \"selectedElementIndex\": 1,\n+}\n+`;\n+\n+exports[`TreeListContext search state should remove unmounted elements from the search results set: 3: go to second result 1`] = `\n+Object {\n+ \"inspectedElementID\": 4,\n+ \"numElements\": 3,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": 1,\n+ \"searchResults\": Array [\n+ 3,\n+ 4,\n+ ],\n+ \"searchText\": \"ba\",\n+ \"selectedElementID\": 4,\n+ \"selectedElementIndex\": 2,\n+}\n+`;\n+\n+exports[`TreeListContext search state should remove unmounted elements from the search results set: 4: unmount Baz 1`] = `\n+Object {\n+ \"inspectedElementID\": null,\n+ \"numElements\": 2,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": 0,\n+ \"searchResults\": Array [\n+ 3,\n+ ],\n+ \"searchText\": \"ba\",\n+ \"selectedElementID\": null,\n+ \"selectedElementIndex\": null,\n+}\n+`;\n+\n+exports[`TreeListContext search state should select the next and previous items within the search results: 0: mount 1`] = `\n+[root]\n+ <Foo>\n+ <Baz>\n+ <Bar>\n+ <Baz>\n+`;\n+\n+exports[`TreeListContext search state should select the next and previous items within the search results: 1: initial state 1`] = `\n+Object {\n+ \"inspectedElementID\": null,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": null,\n+ \"selectedElementIndex\": null,\n+}\n+`;\n+\n+exports[`TreeListContext search state should select the next and previous items within the search results: 2: search for \"ba\" 1`] = `\n+Object {\n+ \"inspectedElementID\": 3,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": 0,\n+ \"searchResults\": Array [\n+ 3,\n+ 4,\n+ 5,\n+ ],\n+ \"searchText\": \"ba\",\n+ \"selectedElementID\": 3,\n+ \"selectedElementIndex\": 1,\n+}\n+`;\n+\n+exports[`TreeListContext search state should select the next and previous items within the search results: 3: go to second result 1`] = `\n+Object {\n+ \"inspectedElementID\": 4,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": 1,\n+ \"searchResults\": Array [\n+ 3,\n+ 4,\n+ 5,\n+ ],\n+ \"searchText\": \"ba\",\n+ \"selectedElementID\": 4,\n+ \"selectedElementIndex\": 2,\n+}\n+`;\n+\n+exports[`TreeListContext search state should select the next and previous items within the search results: 4: go to third result 1`] = `\n+Object {\n+ \"inspectedElementID\": 5,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": 2,\n+ \"searchResults\": Array [\n+ 3,\n+ 4,\n+ 5,\n+ ],\n+ \"searchText\": \"ba\",\n+ \"selectedElementID\": 5,\n+ \"selectedElementIndex\": 3,\n+}\n+`;\n+\n+exports[`TreeListContext search state should select the next and previous items within the search results: 5: go to second result 1`] = `\n+Object {\n+ \"inspectedElementID\": 4,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": 1,\n+ \"searchResults\": Array [\n+ 3,\n+ 4,\n+ 5,\n+ ],\n+ \"searchText\": \"ba\",\n+ \"selectedElementID\": 4,\n+ \"selectedElementIndex\": 2,\n+}\n+`;\n+\n+exports[`TreeListContext search state should select the next and previous items within the search results: 6: go to first result 1`] = `\n+Object {\n+ \"inspectedElementID\": 3,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": 0,\n+ \"searchResults\": Array [\n+ 3,\n+ 4,\n+ 5,\n+ ],\n+ \"searchText\": \"ba\",\n+ \"selectedElementID\": 3,\n+ \"selectedElementIndex\": 1,\n+}\n+`;\n+\n+exports[`TreeListContext search state should select the next and previous items within the search results: 7: wrap to last result 1`] = `\n+Object {\n+ \"inspectedElementID\": 5,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": 2,\n+ \"searchResults\": Array [\n+ 3,\n+ 4,\n+ 5,\n+ ],\n+ \"searchText\": \"ba\",\n+ \"selectedElementID\": 5,\n+ \"selectedElementIndex\": 3,\n+}\n+`;\n+\n+exports[`TreeListContext search state should select the next and previous items within the search results: 8: wrap to first result 1`] = `\n+Object {\n+ \"inspectedElementID\": 3,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": 0,\n+ \"searchResults\": Array [\n+ 3,\n+ 4,\n+ 5,\n+ ],\n+ \"searchText\": \"ba\",\n+ \"selectedElementID\": 3,\n+ \"selectedElementIndex\": 1,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should clear selection if the selected element is unmounted: 0: mount 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ ▾ <Parent>\n+ <Child>\n+ <Child>\n+`;\n+\n+exports[`TreeListContext tree state should clear selection if the selected element is unmounted: 1: initial state 1`] = `\n+Object {\n+ \"inspectedElementID\": null,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": null,\n+ \"selectedElementIndex\": null,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should clear selection if the selected element is unmounted: 2: select second child 1`] = `\n+Object {\n+ \"inspectedElementID\": 5,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 5,\n+ \"selectedElementIndex\": 3,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should clear selection if the selected element is unmounted: 3: remove children (parent should now be selected) 1`] = `\n+Object {\n+ \"inspectedElementID\": 3,\n+ \"numElements\": 2,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 3,\n+ \"selectedElementIndex\": 1,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should clear selection if the selected element is unmounted: 4: unmount root (nothing should be selected) 1`] = `\n+Object {\n+ \"inspectedElementID\": null,\n+ \"numElements\": 0,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": null,\n+ \"selectedElementIndex\": null,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should select child elements: 0: mount 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ ▾ <Parent>\n+ <Child>\n+ <Child>\n+ ▾ <Parent>\n+ <Child>\n+ <Child>\n+`;\n+\n+exports[`TreeListContext tree state should select child elements: 1: initial state 1`] = `\n+Object {\n+ \"inspectedElementID\": null,\n+ \"numElements\": 7,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": null,\n+ \"selectedElementIndex\": null,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should select child elements: 2: select first element 1`] = `\n+Object {\n+ \"inspectedElementID\": 2,\n+ \"numElements\": 7,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 2,\n+ \"selectedElementIndex\": 0,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should select child elements: 3: select Parent 1`] = `\n+Object {\n+ \"inspectedElementID\": 3,\n+ \"numElements\": 7,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 3,\n+ \"selectedElementIndex\": 1,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should select child elements: 4: select Child 1`] = `\n+Object {\n+ \"inspectedElementID\": 4,\n+ \"numElements\": 7,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 4,\n+ \"selectedElementIndex\": 2,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should select parent elements and then collapse: 0: mount 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ ▾ <Parent>\n+ <Child>\n+ <Child>\n+ ▾ <Parent>\n+ <Child>\n+ <Child>\n+`;\n+\n+exports[`TreeListContext tree state should select parent elements and then collapse: 1: initial state 1`] = `\n+Object {\n+ \"inspectedElementID\": null,\n+ \"numElements\": 7,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": null,\n+ \"selectedElementIndex\": null,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should select parent elements and then collapse: 2: select last child 1`] = `\n+Object {\n+ \"inspectedElementID\": 8,\n+ \"numElements\": 7,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 8,\n+ \"selectedElementIndex\": 6,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should select parent elements and then collapse: 3: select Parent 1`] = `\n+Object {\n+ \"inspectedElementID\": 6,\n+ \"numElements\": 7,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 6,\n+ \"selectedElementIndex\": 4,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should select parent elements and then collapse: 4: select Grandparent 1`] = `\n+Object {\n+ \"inspectedElementID\": 2,\n+ \"numElements\": 7,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 2,\n+ \"selectedElementIndex\": 0,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should select the next and previous elements in the tree: 0: mount 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ ▾ <Parent>\n+ <Child>\n+ <Child>\n+`;\n+\n+exports[`TreeListContext tree state should select the next and previous elements in the tree: 1: initial state 1`] = `\n+Object {\n+ \"inspectedElementID\": null,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": null,\n+ \"selectedElementIndex\": null,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should select the next and previous elements in the tree: 2: select first element 1`] = `\n+Object {\n+ \"inspectedElementID\": 2,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 2,\n+ \"selectedElementIndex\": 0,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should select the next and previous elements in the tree: 3: select element after (0) 1`] = `\n+Object {\n+ \"inspectedElementID\": 3,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 3,\n+ \"selectedElementIndex\": 1,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should select the next and previous elements in the tree: 3: select element after (1) 1`] = `\n+Object {\n+ \"inspectedElementID\": 4,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 4,\n+ \"selectedElementIndex\": 2,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should select the next and previous elements in the tree: 3: select element after (2) 1`] = `\n+Object {\n+ \"inspectedElementID\": 5,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 5,\n+ \"selectedElementIndex\": 3,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should select the next and previous elements in the tree: 4: select element before (1) 1`] = `\n+Object {\n+ \"inspectedElementID\": 2,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 2,\n+ \"selectedElementIndex\": 0,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should select the next and previous elements in the tree: 4: select element before (2) 1`] = `\n+Object {\n+ \"inspectedElementID\": 3,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 3,\n+ \"selectedElementIndex\": 1,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should select the next and previous elements in the tree: 4: select element before (3) 1`] = `\n+Object {\n+ \"inspectedElementID\": 4,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 4,\n+ \"selectedElementIndex\": 2,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should select the next and previous elements in the tree: 5: select previous wraps around to last 1`] = `\n+Object {\n+ \"inspectedElementID\": 5,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 5,\n+ \"selectedElementIndex\": 3,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should select the next and previous elements in the tree: 6: select next wraps around to first 1`] = `\n+Object {\n+ \"inspectedElementID\": 2,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 2,\n+ \"selectedElementIndex\": 0,\n+}\n+`;\ndiff --git a\/src\/__tests__\/bridge-test.js b\/src\/__tests__\/bridge-test.js\nnew file mode 100644\nindex 0000000000..fe89a6c2b1\n--- \/dev\/null\n+++ b\/src\/__tests__\/bridge-test.js\n@@ -0,0 +1,42 @@\n+\/\/ @flow\n+\n+describe('Bridge', () => {\n+ let Bridge;\n+\n+ beforeEach(() => {\n+ Bridge = require('src\/bridge').default;\n+ });\n+\n+ it('should shutdown properly', () => {\n+ const wall = {\n+ listen: jest.fn(() => () => {}),\n+ send: jest.fn(),\n+ };\n+ const bridge = new Bridge(wall);\n+\n+ \/\/ Check that we're wired up correctly.\n+ bridge.send('reloadAppForProfiling');\n+ jest.runAllTimers();\n+ expect(wall.send).toHaveBeenCalledWith('reloadAppForProfiling');\n+\n+ \/\/ Should flush pending messages and then shut down.\n+ wall.send.mockClear();\n+ bridge.send('update', '1');\n+ bridge.send('update', '2');\n+ bridge.shutdown();\n+ jest.runAllTimers();\n+ expect(wall.send).toHaveBeenCalledWith('update', '1');\n+ expect(wall.send).toHaveBeenCalledWith('update', '2');\n+ expect(wall.send).toHaveBeenCalledWith('shutdown');\n+\n+ \/\/ Verify that the Bridge doesn't send messages after shutdown.\n+ spyOn(console, 'warn');\n+ wall.send.mockClear();\n+ bridge.send('should not send');\n+ jest.runAllTimers();\n+ expect(wall.send).not.toHaveBeenCalled();\n+ expect(console.warn).toHaveBeenCalledWith(\n+ 'Cannot send message \"should not send\" through a Bridge that has been shutdown.'\n+ );\n+ });\n+});\ndiff --git a\/src\/__tests__\/console-test.js b\/src\/__tests__\/console-test.js\nnew file mode 100644\nindex 0000000000..a633e6f817\n--- \/dev\/null\n+++ b\/src\/__tests__\/console-test.js\n@@ -0,0 +1,333 @@\n+\/\/ @flow\n+\n+describe('console', () => {\n+ let React;\n+ let ReactDOM;\n+ let act;\n+ let fakeConsole;\n+ let mockError;\n+ let mockInfo;\n+ let mockLog;\n+ let mockWarn;\n+ let patchConsole;\n+ let unpatchConsole;\n+\n+ beforeEach(() => {\n+ const Console = require('..\/backend\/console');\n+ patchConsole = Console.patch;\n+ unpatchConsole = Console.unpatch;\n+\n+ const inject = global.__REACT_DEVTOOLS_GLOBAL_HOOK__.inject;\n+ global.__REACT_DEVTOOLS_GLOBAL_HOOK__.inject = internals => {\n+ inject(internals);\n+\n+ Console.registerRenderer(internals);\n+ };\n+\n+ React = require('react');\n+ ReactDOM = require('react-dom');\n+\n+ const utils = require('.\/utils');\n+ act = utils.act;\n+\n+ \/\/ Patch a fake console so we can verify with tests below.\n+ \/\/ Patching the real console is too complicated,\n+ \/\/ because Jest itself has hooks into it as does our test env setup.\n+ mockError = jest.fn();\n+ mockInfo = jest.fn();\n+ mockLog = jest.fn();\n+ mockWarn = jest.fn();\n+ fakeConsole = {\n+ error: mockError,\n+ info: mockInfo,\n+ log: mockLog,\n+ warn: mockWarn,\n+ };\n+\n+ Console.dangerous_setTargetConsoleForTesting(fakeConsole);\n+\n+ patchConsole();\n+ });\n+\n+ function normalizeCodeLocInfo(str) {\n+ return str && str.replace(\/\$at .+?:\\d+\$\/g, '(at **)');\n+ }\n+\n+ it('should not patch console methods that do not receive component stacks', () => {\n+ expect(fakeConsole.error).not.toBe(mockError);\n+ expect(fakeConsole.info).toBe(mockInfo);\n+ expect(fakeConsole.log).toBe(mockLog);\n+ expect(fakeConsole.warn).not.toBe(mockWarn);\n+ });\n+\n+ it('should only patch the console once', () => {\n+ const { error, warn } = fakeConsole;\n+\n+ patchConsole();\n+\n+ expect(fakeConsole.error).toBe(error);\n+ expect(fakeConsole.warn).toBe(warn);\n+ });\n+\n+ it('should un-patch when requested', () => {\n+ expect(fakeConsole.error).not.toBe(mockError);\n+ expect(fakeConsole.warn).not.toBe(mockWarn);\n+\n+ unpatchConsole();\n+\n+ expect(fakeConsole.error).toBe(mockError);\n+ expect(fakeConsole.warn).toBe(mockWarn);\n+ });\n+\n+ it('should pass through logs when there is no current fiber', () => {\n+ expect(mockLog).toHaveBeenCalledTimes(0);\n+ expect(mockWarn).toHaveBeenCalledTimes(0);\n+ expect(mockError).toHaveBeenCalledTimes(0);\n+ fakeConsole.log('log');\n+ fakeConsole.warn('warn');\n+ fakeConsole.error('error');\n+ expect(mockLog).toHaveBeenCalledTimes(1);\n+ expect(mockLog.mock.calls[0]).toHaveLength(1);\n+ expect(mockLog.mock.calls[0][0]).toBe('log');\n+ expect(mockWarn).toHaveBeenCalledTimes(1);\n+ expect(mockWarn.mock.calls[0]).toHaveLength(1);\n+ expect(mockWarn.mock.calls[0][0]).toBe('warn');\n+ expect(mockError).toHaveBeenCalledTimes(1);\n+ expect(mockError.mock.calls[0]).toHaveLength(1);\n+ expect(mockError.mock.calls[0][0]).toBe('error');\n+ });\n+\n+ it('should not append multiple stacks', () => {\n+ const Child = () => {\n+ fakeConsole.warn('warn\\n in Child (at fake.js:123)');\n+ fakeConsole.error('error', '\\n in Child (at fake.js:123)');\n+ return null;\n+ };\n+\n+ act(() => ReactDOM.render(<Child \/>, document.createElement('div')));\n+\n+ expect(mockWarn).toHaveBeenCalledTimes(1);\n+ expect(mockWarn.mock.calls[0]).toHaveLength(1);\n+ expect(mockWarn.mock.calls[0][0]).toBe(\n+ 'warn\\n in Child (at fake.js:123)'\n+ );\n+ expect(mockError).toHaveBeenCalledTimes(1);\n+ expect(mockError.mock.calls[0]).toHaveLength(2);\n+ expect(mockError.mock.calls[0][0]).toBe('error');\n+ expect(mockError.mock.calls[0][1]).toBe('\\n in Child (at fake.js:123)');\n+ });\n+\n+ it('should append component stacks to errors and warnings logged during render', () => {\n+ const Intermediate = ({ children }) => children;\n+ const Parent = () => (\n+ <Intermediate>\n+ <Child \/>\n+ <\/Intermediate>\n+ );\n+ const Child = () => {\n+ fakeConsole.error('error');\n+ fakeConsole.log('log');\n+ fakeConsole.warn('warn');\n+ return null;\n+ };\n+\n+ act(() => ReactDOM.render(<Parent \/>, document.createElement('div')));\n+\n+ expect(mockLog).toHaveBeenCalledTimes(1);\n+ expect(mockLog.mock.calls[0]).toHaveLength(1);\n+ expect(mockLog.mock.calls[0][0]).toBe('log');\n+ expect(mockWarn).toHaveBeenCalledTimes(1);\n+ expect(mockWarn.mock.calls[0]).toHaveLength(2);\n+ expect(mockWarn.mock.calls[0][0]).toBe('warn');\n+ expect(normalizeCodeLocInfo(mockWarn.mock.calls[0][1])).toEqual(\n+ '\\n in Child (at **)\\n in Parent (at **)'\n+ );\n+ expect(mockError).toHaveBeenCalledTimes(1);\n+ expect(mockError.mock.calls[0]).toHaveLength(2);\n+ expect(mockError.mock.calls[0][0]).toBe('error');\n+ expect(normalizeCodeLocInfo(mockError.mock.calls[0][1])).toBe(\n+ '\\n in Child (at **)\\n in Parent (at **)'\n+ );\n+ });\n+\n+ it('should append component stacks to errors and warnings logged from effects', () => {\n+ const Intermediate = ({ children }) => children;\n+ const Parent = () => (\n+ <Intermediate>\n+ <Child \/>\n+ <\/Intermediate>\n+ );\n+ const Child = () => {\n+ React.useLayoutEffect(() => {\n+ fakeConsole.error('active error');\n+ fakeConsole.log('active log');\n+ fakeConsole.warn('active warn');\n+ });\n+ React.useEffect(() => {\n+ fakeConsole.error('passive error');\n+ fakeConsole.log('passive log');\n+ fakeConsole.warn('passive warn');\n+ });\n+ return null;\n+ };\n+\n+ act(() => ReactDOM.render(<Parent \/>, document.createElement('div')));\n+\n+ expect(mockLog).toHaveBeenCalledTimes(2);\n+ expect(mockLog.mock.calls[0]).toHaveLength(1);\n+ expect(mockLog.mock.calls[0][0]).toBe('active log');\n+ expect(mockLog.mock.calls[1]).toHaveLength(1);\n+ expect(mockLog.mock.calls[1][0]).toBe('passive log');\n+ expect(mockWarn).toHaveBeenCalledTimes(2);\n+ expect(mockWarn.mock.calls[0]).toHaveLength(2);\n+ expect(mockWarn.mock.calls[0][0]).toBe('active warn');\n+ expect(normalizeCodeLocInfo(mockWarn.mock.calls[0][1])).toEqual(\n+ '\\n in Child (at **)\\n in Parent (at **)'\n+ );\n+ expect(mockWarn.mock.calls[1]).toHaveLength(2);\n+ expect(mockWarn.mock.calls[1][0]).toBe('passive warn');\n+ expect(normalizeCodeLocInfo(mockWarn.mock.calls[1][1])).toEqual(\n+ '\\n in Child (at **)\\n in Parent (at **)'\n+ );\n+ expect(mockError).toHaveBeenCalledTimes(2);\n+ expect(mockError.mock.calls[0]).toHaveLength(2);\n+ expect(mockError.mock.calls[0][0]).toBe('active error');\n+ expect(normalizeCodeLocInfo(mockError.mock.calls[0][1])).toBe(\n+ '\\n in Child (at **)\\n in Parent (at **)'\n+ );\n+ expect(mockError.mock.calls[1]).toHaveLength(2);\n+ expect(mockError.mock.calls[1][0]).toBe('passive error');\n+ expect(normalizeCodeLocInfo(mockError.mock.calls[1][1])).toBe(\n+ '\\n in Child (at **)\\n in Parent (at **)'\n+ );\n+ });\n+\n+ it('should append component stacks to errors and warnings logged from commit hooks', () => {\n+ const Intermediate = ({ children }) => children;\n+ const Parent = () => (\n+ <Intermediate>\n+ <Child \/>\n+ <\/Intermediate>\n+ );\n+ class Child extends React.Component<any> {\n+ componentDidMount() {\n+ fakeConsole.error('didMount error');\n+ fakeConsole.log('didMount log');\n+ fakeConsole.warn('didMount warn');\n+ }\n+ componentDidUpdate() {\n+ fakeConsole.error('didUpdate error');\n+ fakeConsole.log('didUpdate log');\n+ fakeConsole.warn('didUpdate warn');\n+ }\n+ render() {\n+ return null;\n+ }\n+ }\n+\n+ const container = document.createElement('div');\n+ act(() => ReactDOM.render(<Parent \/>, container));\n+ act(() => ReactDOM.render(<Parent \/>, container));\n+\n+ expect(mockLog).toHaveBeenCalledTimes(2);\n+ expect(mockLog.mock.calls[0]).toHaveLength(1);\n+ expect(mockLog.mock.calls[0][0]).toBe('didMount log');\n+ expect(mockLog.mock.calls[1]).toHaveLength(1);\n+ expect(mockLog.mock.calls[1][0]).toBe('didUpdate log');\n+ expect(mockWarn).toHaveBeenCalledTimes(2);\n+ expect(mockWarn.mock.calls[0]).toHaveLength(2);\n+ expect(mockWarn.mock.calls[0][0]).toBe('didMount warn');\n+ expect(normalizeCodeLocInfo(mockWarn.mock.calls[0][1])).toEqual(\n+ '\\n in Child (at **)\\n in Parent (at **)'\n+ );\n+ expect(mockWarn.mock.calls[1]).toHaveLength(2);\n+ expect(mockWarn.mock.calls[1][0]).toBe('didUpdate warn');\n+ expect(normalizeCodeLocInfo(mockWarn.mock.calls[1][1])).toEqual(\n+ '\\n in Child (at **)\\n in Parent (at **)'\n+ );\n+ expect(mockError).toHaveBeenCalledTimes(2);\n+ expect(mockError.mock.calls[0]).toHaveLength(2);\n+ expect(mockError.mock.calls[0][0]).toBe('didMount error');\n+ expect(normalizeCodeLocInfo(mockError.mock.calls[0][1])).toBe(\n+ '\\n in Child (at **)\\n in Parent (at **)'\n+ );\n+ expect(mockError.mock.calls[1]).toHaveLength(2);\n+ expect(mockError.mock.calls[1][0]).toBe('didUpdate error');\n+ expect(normalizeCodeLocInfo(mockError.mock.calls[1][1])).toBe(\n+ '\\n in Child (at **)\\n in Parent (at **)'\n+ );\n+ });\n+\n+ it('should append component stacks to errors and warnings logged from gDSFP', () => {\n+ const Intermediate = ({ children }) => children;\n+ const Parent = () => (\n+ <Intermediate>\n+ <Child \/>\n+ <\/Intermediate>\n+ );\n+ class Child extends React.Component<any, any> {\n+ state = {};\n+ static getDerivedStateFromProps() {\n+ fakeConsole.error('error');\n+ fakeConsole.log('log');\n+ fakeConsole.warn('warn');\n+ return null;\n+ }\n+ render() {\n+ return null;\n+ }\n+ }\n+\n+ act(() => ReactDOM.render(<Parent \/>, document.createElement('div')));\n+\n+ expect(mockLog).toHaveBeenCalledTimes(1);\n+ expect(mockLog.mock.calls[0]).toHaveLength(1);\n+ expect(mockLog.mock.calls[0][0]).toBe('log');\n+ expect(mockWarn).toHaveBeenCalledTimes(1);\n+ expect(mockWarn.mock.calls[0]).toHaveLength(2);\n+ expect(mockWarn.mock.calls[0][0]).toBe('warn');\n+ expect(normalizeCodeLocInfo(mockWarn.mock.calls[0][1])).toEqual(\n+ '\\n in Child (at **)\\n in Parent (at **)'\n+ );\n+ expect(mockError).toHaveBeenCalledTimes(1);\n+ expect(mockError.mock.calls[0]).toHaveLength(2);\n+ expect(mockError.mock.calls[0][0]).toBe('error');\n+ expect(normalizeCodeLocInfo(mockError.mock.calls[0][1])).toBe(\n+ '\\n in Child (at **)\\n in Parent (at **)'\n+ );\n+ });\n+\n+ it('should append stacks after being uninstalled and reinstalled', () => {\n+ const Child = () => {\n+ fakeConsole.warn('warn');\n+ fakeConsole.error('error');\n+ return null;\n+ };\n+\n+ unpatchConsole();\n+ act(() => ReactDOM.render(<Child \/>, document.createElement('div')));\n+\n+ expect(mockWarn).toHaveBeenCalledTimes(1);\n+ expect(mockWarn.mock.calls[0]).toHaveLength(1);\n+ expect(mockWarn.mock.calls[0][0]).toBe('warn');\n+ expect(mockError).toHaveBeenCalledTimes(1);\n+ expect(mockError.mock.calls[0]).toHaveLength(1);\n+ expect(mockError.mock.calls[0][0]).toBe('error');\n+\n+ patchConsole();\n+ act(() => ReactDOM.render(<Child \/>, document.createElement('div')));\n+\n+ expect(mockWarn).toHaveBeenCalledTimes(2);\n+ expect(mockWarn.mock.calls[1]).toHaveLength(2);\n+ expect(mockWarn.mock.calls[1][0]).toBe('warn');\n+ expect(normalizeCodeLocInfo(mockWarn.mock.calls[1][1])).toEqual(\n+ '\\n in Child (at **)'\n+ );\n+ expect(mockError).toHaveBeenCalledTimes(2);\n+ expect(mockError.mock.calls[1]).toHaveLength(2);\n+ expect(mockError.mock.calls[1][0]).toBe('error');\n+ expect(normalizeCodeLocInfo(mockError.mock.calls[1][1])).toBe(\n+ '\\n in Child (at **)'\n+ );\n+ });\n+});\ndiff --git a\/src\/__tests__\/inspectedElementContext-test.js b\/src\/__tests__\/inspectedElementContext-test.js\nnew file mode 100644\nindex 0000000000..2cf1ed8632\n--- \/dev\/null\n+++ b\/src\/__tests__\/inspectedElementContext-test.js\n@@ -0,0 +1,859 @@\n+\/\/ @flow\n+\n+import typeof ReactTestRenderer from 'react-test-renderer';\n+import type { GetInspectedElementPath } from 'src\/devtools\/views\/Components\/InspectedElementContext';\n+import type { FrontendBridge } from 'src\/bridge';\n+import type Store from 'src\/devtools\/store';\n+\n+describe('InspectedElementContext', () => {\n+ let React;\n+ let ReactDOM;\n+ let TestRenderer: ReactTestRenderer;\n+ let bridge: FrontendBridge;\n+ let store: Store;\n+ let meta;\n+ let utils;\n+\n+ let BridgeContext;\n+ let InspectedElementContext;\n+ let InspectedElementContextController;\n+ let StoreContext;\n+ let TestUtils;\n+ let TreeContextController;\n+\n+ beforeEach(() => {\n+ utils = require('.\/utils');\n+ utils.beforeEachProfiling();\n+\n+ meta = require('src\/hydration').meta;\n+\n+ bridge = global.bridge;\n+ store = global.store;\n+ store.collapseNodesByDefault = false;\n+\n+ React = require('react');\n+ ReactDOM = require('react-dom');\n+ TestUtils = require('react-dom\/test-utils');\n+ TestRenderer = utils.requireTestRenderer();\n+\n+ BridgeContext = require('src\/devtools\/views\/context').BridgeContext;\n+ InspectedElementContext = require('src\/devtools\/views\/Components\/InspectedElementContext')\n+ .InspectedElementContext;\n+ InspectedElementContextController = require('src\/devtools\/views\/Components\/InspectedElementContext')\n+ .InspectedElementContextController;\n+ StoreContext = require('src\/devtools\/views\/context').StoreContext;\n+ TreeContextController = require('src\/devtools\/views\/Components\/TreeContext')\n+ .TreeContextController;\n+ });\n+\n+ const Contexts = ({\n+ children,\n+ defaultSelectedElementID = null,\n+ defaultSelectedElementIndex = null,\n+ }) => (\n+ <BridgeContext.Provider value={bridge}>\n+ <StoreContext.Provider value={store}>\n+ <TreeContextController\n+ defaultSelectedElementID={defaultSelectedElementID}\n+ defaultSelectedElementIndex={defaultSelectedElementIndex}\n+ >\n+ <InspectedElementContextController>\n+ {children}\n+ <\/InspectedElementContextController>\n+ <\/TreeContextController>\n+ <\/StoreContext.Provider>\n+ <\/BridgeContext.Provider>\n+ );\n+\n+ it('should inspect the currently selected element', async done => {\n+ const Example = () => {\n+ const [count] = React.useState(1);\n+ return count;\n+ };\n+\n+ const container = document.createElement('div');\n+ await utils.actAsync(() =>\n+ ReactDOM.render(<Example a={1} b=\"abc\" \/>, container)\n+ );\n+\n+ const id = ((store.getElementIDAtIndex(0): any): number);\n+\n+ let didFinish = false;\n+\n+ function Suspender({ target }) {\n+ const { getInspectedElement } = React.useContext(InspectedElementContext);\n+ const inspectedElement = getInspectedElement(id);\n+ expect(inspectedElement).toMatchSnapshot(`1: Inspected element ${id}`);\n+ didFinish = true;\n+ return null;\n+ }\n+\n+ await utils.actAsync(\n+ () =>\n+ TestRenderer.create(\n+ <Contexts\n+ defaultSelectedElementID={id}\n+ defaultSelectedElementIndex={0}\n+ >\n+ <React.Suspense fallback={null}>\n+ <Suspender target={id} \/>\n+ <\/React.Suspense>\n+ <\/Contexts>\n+ ),\n+ false\n+ );\n+ expect(didFinish).toBe(true);\n+\n+ done();\n+ });\n+\n+ it('should poll for updates for the currently selected element', async done => {\n+ const Example = () => null;\n+\n+ const container = document.createElement('div');\n+ await utils.actAsync(\n+ () => ReactDOM.render(<Example a={1} b=\"abc\" \/>, container),\n+ false\n+ );\n+\n+ const id = ((store.getElementIDAtIndex(0): any): number);\n+\n+ let inspectedElement = null;\n+\n+ function Suspender({ target }) {\n+ const { getInspectedElement } = React.useContext(InspectedElementContext);\n+ inspectedElement = getInspectedElement(id);\n+ return null;\n+ }\n+\n+ let renderer;\n+\n+ await utils.actAsync(() => {\n+ renderer = TestRenderer.create(\n+ <Contexts defaultSelectedElementID={id} defaultSelectedElementIndex={0}>\n+ <React.Suspense fallback={null}>\n+ <Suspender target={id} \/>\n+ <\/React.Suspense>\n+ <\/Contexts>\n+ );\n+ }, false);\n+ expect(inspectedElement).toMatchSnapshot('1: initial render');\n+\n+ await utils.actAsync(\n+ () => ReactDOM.render(<Example a={2} b=\"def\" \/>, container),\n+ false\n+ );\n+\n+ inspectedElement = null;\n+ await utils.actAsync(\n+ () =>\n+ renderer.update(\n+ <Contexts\n+ defaultSelectedElementID={id}\n+ defaultSelectedElementIndex={0}\n+ >\n+ <React.Suspense fallback={null}>\n+ <Suspender target={id} \/>\n+ <\/React.Suspense>\n+ <\/Contexts>\n+ ),\n+ false\n+ );\n+ expect(inspectedElement).toMatchSnapshot('2: updated state');\n+\n+ done();\n+ });\n+\n+ it('should not re-render a function with hooks if it did not update since it was last inspected', async done => {\n+ let targetRenderCount = 0;\n+\n+ const Wrapper = ({ children }) => children;\n+ const Target = React.memo(props => {\n+ targetRenderCount++;\n+ React.useState(0);\n+ return null;\n+ });\n+\n+ const container = document.createElement('div');\n+ await utils.actAsync(() =>\n+ ReactDOM.render(\n+ <Wrapper>\n+ <Target a={1} b=\"abc\" \/>\n+ <\/Wrapper>,\n+ container\n+ )\n+ );\n+\n+ const id = ((store.getElementIDAtIndex(1): any): number);\n+\n+ let inspectedElement = null;\n+\n+ function Suspender({ target }) {\n+ const { getInspectedElement } = React.useContext(InspectedElementContext);\n+ inspectedElement = getInspectedElement(target);\n+ return null;\n+ }\n+\n+ targetRenderCount = 0;\n+\n+ let renderer;\n+ await utils.actAsync(\n+ () =>\n+ (renderer = TestRenderer.create(\n+ <Contexts\n+ defaultSelectedElementID={id}\n+ defaultSelectedElementIndex={1}\n+ >\n+ <React.Suspense fallback={null}>\n+ <Suspender target={id} \/>\n+ <\/React.Suspense>\n+ <\/Contexts>\n+ )),\n+ false\n+ );\n+ expect(targetRenderCount).toBe(1);\n+ expect(inspectedElement).toMatchSnapshot('1: initial render');\n+\n+ const initialInspectedElement = inspectedElement;\n+\n+ targetRenderCount = 0;\n+ inspectedElement = null;\n+ await utils.actAsync(\n+ () =>\n+ renderer.update(\n+ <Contexts\n+ defaultSelectedElementID={id}\n+ defaultSelectedElementIndex={1}\n+ >\n+ <React.Suspense fallback={null}>\n+ <Suspender target={id} \/>\n+ <\/React.Suspense>\n+ <\/Contexts>\n+ ),\n+ false\n+ );\n+ expect(targetRenderCount).toBe(0);\n+ expect(inspectedElement).toEqual(initialInspectedElement);\n+\n+ targetRenderCount = 0;\n+\n+ await utils.actAsync(\n+ () =>\n+ ReactDOM.render(\n+ <Wrapper>\n+ <Target a={2} b=\"def\" \/>\n+ <\/Wrapper>,\n+ container\n+ ),\n+ false\n+ );\n+\n+ \/\/ Target should have been rendered once (by ReactDOM) and once by DevTools for inspection.\n+ expect(targetRenderCount).toBe(2);\n+ expect(inspectedElement).toMatchSnapshot('2: updated state');\n+\n+ done();\n+ });\n+\n+ it('should temporarily disable console logging when re-running a component to inspect its hooks', async done => {\n+ let targetRenderCount = 0;\n+\n+ const errorSpy = ((console: any).error = jest.fn());\n+ const infoSpy = ((console: any).info = jest.fn());\n+ const logSpy = ((console: any).log = jest.fn());\n+ const warnSpy = ((console: any).warn = jest.fn());\n+\n+ const Target = React.memo(props => {\n+ targetRenderCount++;\n+ console.error('error');\n+ console.info('info');\n+ console.log('log');\n+ console.warn('warn');\n+ React.useState(0);\n+ return null;\n+ });\n+\n+ const container = document.createElement('div');\n+ await utils.actAsync(() =>\n+ ReactDOM.render(<Target a={1} b=\"abc\" \/>, container)\n+ );\n+\n+ expect(targetRenderCount).toBe(1);\n+ expect(errorSpy).toHaveBeenCalledTimes(1);\n+ expect(errorSpy).toHaveBeenCalledWith('error');\n+ expect(infoSpy).toHaveBeenCalledTimes(1);\n+ expect(infoSpy).toHaveBeenCalledWith('info');\n+ expect(logSpy).toHaveBeenCalledTimes(1);\n+ expect(logSpy).toHaveBeenCalledWith('log');\n+ expect(warnSpy).toHaveBeenCalledTimes(1);\n+ expect(warnSpy).toHaveBeenCalledWith('warn');\n+\n+ const id = ((store.getElementIDAtIndex(0): any): number);\n+\n+ let inspectedElement = null;\n+\n+ function Suspender({ target }) {\n+ const { getInspectedElement } = React.useContext(InspectedElementContext);\n+ inspectedElement = getInspectedElement(target);\n+ return null;\n+ }\n+\n+ await utils.actAsync(\n+ () =>\n+ TestRenderer.create(\n+ <Contexts\n+ defaultSelectedElementID={id}\n+ defaultSelectedElementIndex={1}\n+ >\n+ <React.Suspense fallback={null}>\n+ <Suspender target={id} \/>\n+ <\/React.Suspense>\n+ <\/Contexts>\n+ ),\n+ false\n+ );\n+\n+ expect(inspectedElement).not.toBe(null);\n+ expect(targetRenderCount).toBe(2);\n+ expect(errorSpy).toHaveBeenCalledTimes(1);\n+ expect(infoSpy).toHaveBeenCalledTimes(1);\n+ expect(logSpy).toHaveBeenCalledTimes(1);\n+ expect(warnSpy).toHaveBeenCalledTimes(1);\n+\n+ done();\n+ });\n+\n+ it('should support simple data types', async done => {\n+ const Example = () => null;\n+\n+ const container = document.createElement('div');\n+ await utils.actAsync(() =>\n+ ReactDOM.render(\n+ <Example\n+ boolean_false={false}\n+ boolean_true={true}\n+ infinity={Infinity}\n+ integer_zero={0}\n+ integer_one={1}\n+ float={1.23}\n+ string=\"abc\"\n+ string_empty=\"\"\n+ nan={NaN}\n+ value_null={null}\n+ value_undefined={undefined}\n+ \/>,\n+ container\n+ )\n+ );\n+\n+ const id = ((store.getElementIDAtIndex(0): any): number);\n+ let inspectedElement = null;\n+\n+ function Suspender({ target }) {\n+ const { getInspectedElement } = React.useContext(InspectedElementContext);\n+ inspectedElement = getInspectedElement(id);\n+ return null;\n+ }\n+\n+ await utils.actAsync(\n+ () =>\n+ TestRenderer.create(\n+ <Contexts\n+ defaultSelectedElementID={id}\n+ defaultSelectedElementIndex={0}\n+ >\n+ <React.Suspense fallback={null}>\n+ <Suspender target={id} \/>\n+ <\/React.Suspense>\n+ <\/Contexts>\n+ ),\n+ false\n+ );\n+\n+ expect(inspectedElement).not.toBeNull();\n+ expect(inspectedElement).toMatchSnapshot('1: Initial inspection');\n+\n+ const { props } = (inspectedElement: any);\n+ expect(props.boolean_false).toBe(false);\n+ expect(props.boolean_true).toBe(true);\n+ expect(Number.isFinite(props.infinity)).toBe(false);\n+ expect(props.integer_zero).toEqual(0);\n+ expect(props.integer_one).toEqual(1);\n+ expect(props.float).toEqual(1.23);\n+ expect(props.string).toEqual('abc');\n+ expect(props.string_empty).toEqual('');\n+ expect(props.nan).toBeNaN();\n+ expect(props.value_null).toBeNull();\n+ expect(props.value_undefined).toBeUndefined();\n+\n+ done();\n+ });\n+\n+ it('should support complex data types', async done => {\n+ const Example = () => null;\n+\n+ const div = document.createElement('div');\n+ const exmapleFunction = () => {};\n+ const typedArray = new Uint8Array(3);\n+\n+ const container = document.createElement('div');\n+ await utils.actAsync(() =>\n+ ReactDOM.render(\n+ <Example\n+ html_element={div}\n+ fn={exmapleFunction}\n+ symbol={Symbol('symbol')}\n+ react_element={<span \/>}\n+ array_buffer={typedArray.buffer}\n+ typed_array={typedArray}\n+ date={new Date()}\n+ \/>,\n+ container\n+ )\n+ );\n+\n+ const id = ((store.getElementIDAtIndex(0): any): number);\n+\n+ let inspectedElement = null;\n+\n+ function Suspender({ target }) {\n+ const { getInspectedElement } = React.useContext(InspectedElementContext);\n+ inspectedElement = getInspectedElement(id);\n+ return null;\n+ }\n+\n+ await utils.actAsync(\n+ () =>\n+ TestRenderer.create(\n+ <Contexts\n+ defaultSelectedElementID={id}\n+ defaultSelectedElementIndex={0}\n+ >\n+ <React.Suspense fallback={null}>\n+ <Suspender target={id} \/>\n+ <\/React.Suspense>\n+ <\/Contexts>\n+ ),\n+ false\n+ );\n+\n+ expect(inspectedElement).not.toBeNull();\n+ expect(inspectedElement).toMatchSnapshot(`1: Inspected element ${id}`);\n+\n+ const {\n+ html_element,\n+ fn,\n+ symbol,\n+ react_element,\n+ array_buffer,\n+ typed_array,\n+ date,\n+ } = (inspectedElement: any).props;\n+ expect(html_element[meta.inspectable]).toBe(false);\n+ expect(html_element[meta.name]).toBe('DIV');\n+ expect(html_element[meta.type]).toBe('html_element');\n+ expect(fn[meta.inspectable]).toBe(false);\n+ expect(fn[meta.name]).toBe('exmapleFunction');\n+ expect(fn[meta.type]).toBe('function');\n+ expect(symbol[meta.inspectable]).toBe(false);\n+ expect(symbol[meta.name]).toBe('Symbol(symbol)');\n+ expect(symbol[meta.type]).toBe('symbol');\n+ expect(react_element[meta.inspectable]).toBe(false);\n+ expect(react_element[meta.name]).toBe('span');\n+ expect(react_element[meta.type]).toBe('react_element');\n+ expect(array_buffer[meta.size]).toBe(3);\n+ expect(array_buffer[meta.inspectable]).toBe(false);\n+ expect(array_buffer[meta.name]).toBe('ArrayBuffer');\n+ expect(array_buffer[meta.type]).toBe('array_buffer');\n+ expect(typed_array[meta.size]).toBe(3);\n+ expect(typed_array[meta.inspectable]).toBe(false);\n+ expect(typed_array[meta.name]).toBe('Uint8Array');\n+ expect(typed_array[meta.type]).toBe('typed_array');\n+ expect(date[meta.inspectable]).toBe(false);\n+ expect(date[meta.type]).toBe('date');\n+\n+ done();\n+ });\n+\n+ it('should support custom objects with enumerable properties and getters', async done => {\n+ class CustomData {\n+ _number = 42;\n+ get number() {\n+ return this._number;\n+ }\n+ set number(value) {\n+ this._number = value;\n+ }\n+ }\n+\n+ const descriptor = ((Object.getOwnPropertyDescriptor(\n+ CustomData.prototype,\n+ 'number'\n+ ): any): PropertyDescriptor<number>);\n+ descriptor.enumerable = true;\n+ Object.defineProperty(CustomData.prototype, 'number', descriptor);\n+\n+ const Example = () => null;\n+\n+ const container = document.createElement('div');\n+ await utils.actAsync(() =>\n+ ReactDOM.render(<Example data={new CustomData()} \/>, container)\n+ );\n+\n+ const id = ((store.getElementIDAtIndex(0): any): number);\n+\n+ let didFinish = false;\n+\n+ function Suspender({ target }) {\n+ const { getInspectedElement } = React.useContext(InspectedElementContext);\n+ const inspectedElement = getInspectedElement(id);\n+ expect(inspectedElement).toMatchSnapshot(`1: Inspected element ${id}`);\n+ didFinish = true;\n+ return null;\n+ }\n+\n+ await utils.actAsync(\n+ () =>\n+ TestRenderer.create(\n+ <Contexts\n+ defaultSelectedElementID={id}\n+ defaultSelectedElementIndex={0}\n+ >\n+ <React.Suspense fallback={null}>\n+ <Suspender target={id} \/>\n+ <\/React.Suspense>\n+ <\/Contexts>\n+ ),\n+ false\n+ );\n+ expect(didFinish).toBe(true);\n+\n+ done();\n+ });\n+\n+ it('should not dehydrate nested values until explicitly requested', async done => {\n+ const Example = () => {\n+ const [state] = React.useState({\n+ foo: {\n+ bar: {\n+ baz: 'hi',\n+ },\n+ },\n+ });\n+\n+ return state.foo.bar.baz;\n+ };\n+\n+ const container = document.createElement('div');\n+ await utils.actAsync(() =>\n+ ReactDOM.render(\n+ <Example\n+ nestedObject={{\n+ a: {\n+ b: {\n+ c: [\n+ {\n+ d: {\n+ e: {},\n+ },\n+ },\n+ ],\n+ },\n+ },\n+ }}\n+ \/>,\n+ container\n+ )\n+ );\n+\n+ const id = ((store.getElementIDAtIndex(0): any): number);\n+\n+ let getInspectedElementPath: GetInspectedElementPath = ((null: any): GetInspectedElementPath);\n+ let inspectedElement = null;\n+\n+ function Suspender({ target }) {\n+ const context = React.useContext(InspectedElementContext);\n+ getInspectedElementPath = context.getInspectedElementPath;\n+ inspectedElement = context.getInspectedElement(target);\n+ return null;\n+ }\n+\n+ await utils.actAsync(\n+ () =>\n+ TestRenderer.create(\n+ <Contexts\n+ defaultSelectedElementID={id}\n+ defaultSelectedElementIndex={0}\n+ >\n+ <React.Suspense fallback={null}>\n+ <Suspender target={id} \/>\n+ <\/React.Suspense>\n+ <\/Contexts>\n+ ),\n+ false\n+ );\n+ expect(getInspectedElementPath).not.toBeNull();\n+ expect(inspectedElement).not.toBeNull();\n+ expect(inspectedElement).toMatchSnapshot('1: Initially inspect element');\n+\n+ inspectedElement = null;\n+ TestUtils.act(() => {\n+ TestRenderer.act(() => {\n+ getInspectedElementPath(id, ['props', 'nestedObject', 'a']);\n+ jest.runOnlyPendingTimers();\n+ });\n+ });\n+ expect(inspectedElement).not.toBeNull();\n+ expect(inspectedElement).toMatchSnapshot('2: Inspect props.nestedObject.a');\n+\n+ inspectedElement = null;\n+ TestUtils.act(() => {\n+ TestRenderer.act(() => {\n+ getInspectedElementPath(id, ['props', 'nestedObject', 'a', 'b', 'c']);\n+ jest.runOnlyPendingTimers();\n+ });\n+ });\n+ expect(inspectedElement).not.toBeNull();\n+ expect(inspectedElement).toMatchSnapshot(\n+ '3: Inspect props.nestedObject.a.b.c'\n+ );\n+\n+ inspectedElement = null;\n+ TestUtils.act(() => {\n+ TestRenderer.act(() => {\n+ getInspectedElementPath(id, [\n+ 'props',\n+ 'nestedObject',\n+ 'a',\n+ 'b',\n+ 'c',\n+ 0,\n+ 'd',\n+ ]);\n+ jest.runOnlyPendingTimers();\n+ });\n+ });\n+ expect(inspectedElement).not.toBeNull();\n+ expect(inspectedElement).toMatchSnapshot(\n+ '4: Inspect props.nestedObject.a.b.c.0.d'\n+ );\n+\n+ inspectedElement = null;\n+ TestUtils.act(() => {\n+ TestRenderer.act(() => {\n+ getInspectedElementPath(id, ['hooks', 0, 'value']);\n+ jest.runOnlyPendingTimers();\n+ });\n+ });\n+ expect(inspectedElement).not.toBeNull();\n+ expect(inspectedElement).toMatchSnapshot('5: Inspect hooks.0.value');\n+\n+ inspectedElement = null;\n+ TestUtils.act(() => {\n+ TestRenderer.act(() => {\n+ getInspectedElementPath(id, ['hooks', 0, 'value', 'foo', 'bar']);\n+ jest.runOnlyPendingTimers();\n+ });\n+ });\n+ expect(inspectedElement).not.toBeNull();\n+ expect(inspectedElement).toMatchSnapshot(\n+ '6: Inspect hooks.0.value.foo.bar'\n+ );\n+\n+ done();\n+ });\n+\n+ it('should include updates for nested values that were previously hydrated', async done => {\n+ const Example = () => null;\n+\n+ const container = document.createElement('div');\n+ await utils.actAsync(() =>\n+ ReactDOM.render(\n+ <Example\n+ nestedObject={{\n+ a: {\n+ value: 1,\n+ b: {\n+ value: 1,\n+ },\n+ },\n+ c: {\n+ value: 1,\n+ d: {\n+ value: 1,\n+ e: {\n+ value: 1,\n+ },\n+ },\n+ },\n+ }}\n+ \/>,\n+ container\n+ )\n+ );\n+\n+ const id = ((store.getElementIDAtIndex(0): any): number);\n+\n+ let getInspectedElementPath: GetInspectedElementPath = ((null: any): GetInspectedElementPath);\n+ let inspectedElement = null;\n+\n+ function Suspender({ target }) {\n+ const context = React.useContext(InspectedElementContext);\n+ getInspectedElementPath = context.getInspectedElementPath;\n+ inspectedElement = context.getInspectedElement(id);\n+ return null;\n+ }\n+\n+ await utils.actAsync(\n+ () =>\n+ TestRenderer.create(\n+ <Contexts\n+ defaultSelectedElementID={id}\n+ defaultSelectedElementIndex={0}\n+ >\n+ <React.Suspense fallback={null}>\n+ <Suspender target={id} \/>\n+ <\/React.Suspense>\n+ <\/Contexts>\n+ ),\n+ false\n+ );\n+ expect(getInspectedElementPath).not.toBeNull();\n+ expect(inspectedElement).not.toBeNull();\n+ expect(inspectedElement).toMatchSnapshot('1: Initially inspect element');\n+\n+ inspectedElement = null;\n+ TestRenderer.act(() => {\n+ getInspectedElementPath(id, ['props', 'nestedObject', 'a']);\n+ jest.runOnlyPendingTimers();\n+ });\n+ expect(inspectedElement).not.toBeNull();\n+ expect(inspectedElement).toMatchSnapshot('2: Inspect props.nestedObject.a');\n+\n+ inspectedElement = null;\n+ TestRenderer.act(() => {\n+ getInspectedElementPath(id, ['props', 'nestedObject', 'c']);\n+ jest.runOnlyPendingTimers();\n+ });\n+ expect(inspectedElement).not.toBeNull();\n+ expect(inspectedElement).toMatchSnapshot('3: Inspect props.nestedObject.c');\n+\n+ TestRenderer.act(() => {\n+ TestUtils.act(() => {\n+ ReactDOM.render(\n+ <Example\n+ nestedObject={{\n+ a: {\n+ value: 2,\n+ b: {\n+ value: 2,\n+ },\n+ },\n+ c: {\n+ value: 2,\n+ d: {\n+ value: 2,\n+ e: {\n+ value: 2,\n+ },\n+ },\n+ },\n+ }}\n+ \/>,\n+ container\n+ );\n+ });\n+ });\n+\n+ TestRenderer.act(() => {\n+ inspectedElement = null;\n+ jest.advanceTimersByTime(1000);\n+ });\n+ expect(inspectedElement).not.toBeNull();\n+ expect(inspectedElement).toMatchSnapshot('4: update inspected element');\n+\n+ done();\n+ });\n+\n+ it('should not tear if hydration is requested after an update', async done => {\n+ const Example = () => null;\n+\n+ const container = document.createElement('div');\n+ await utils.actAsync(() =>\n+ ReactDOM.render(\n+ <Example\n+ nestedObject={{\n+ value: 1,\n+ a: {\n+ value: 1,\n+ b: {\n+ value: 1,\n+ },\n+ },\n+ }}\n+ \/>,\n+ container\n+ )\n+ );\n+\n+ const id = ((store.getElementIDAtIndex(0): any): number);\n+\n+ let getInspectedElementPath: GetInspectedElementPath = ((null: any): GetInspectedElementPath);\n+ let inspectedElement = null;\n+\n+ function Suspender({ target }) {\n+ const context = React.useContext(InspectedElementContext);\n+ getInspectedElementPath = context.getInspectedElementPath;\n+ inspectedElement = context.getInspectedElement(id);\n+ return null;\n+ }\n+\n+ await utils.actAsync(\n+ () =>\n+ TestRenderer.create(\n+ <Contexts\n+ defaultSelectedElementID={id}\n+ defaultSelectedElementIndex={0}\n+ >\n+ <React.Suspense fallback={null}>\n+ <Suspender target={id} \/>\n+ <\/React.Suspense>\n+ <\/Contexts>\n+ ),\n+ false\n+ );\n+ expect(getInspectedElementPath).not.toBeNull();\n+ expect(inspectedElement).not.toBeNull();\n+ expect(inspectedElement).toMatchSnapshot('1: Initially inspect element');\n+\n+ TestUtils.act(() => {\n+ ReactDOM.render(\n+ <Example\n+ nestedObject={{\n+ value: 2,\n+ a: {\n+ value: 2,\n+ b: {\n+ value: 2,\n+ },\n+ },\n+ }}\n+ \/>,\n+ container\n+ );\n+ });\n+\n+ inspectedElement = null;\n+\n+ TestRenderer.act(() => {\n+ TestUtils.act(() => {\n+ getInspectedElementPath(id, ['props', 'nestedObject', 'a']);\n+ jest.runOnlyPendingTimers();\n+ });\n+ });\n+ expect(inspectedElement).not.toBeNull();\n+ expect(inspectedElement).toMatchSnapshot('2: Inspect props.nestedObject.a');\n+\n+ done();\n+ });\n+});\ndiff --git a\/src\/__tests__\/inspectedElementSerializer.js b\/src\/__tests__\/inspectedElementSerializer.js\nnew file mode 100644\nindex 0000000000..13e105cf0d\n--- \/dev\/null\n+++ b\/src\/__tests__\/inspectedElementSerializer.js\n@@ -0,0 +1,28 @@\n+\/\/ test() is part of Jest's serializer API\n+export function test(maybeInspectedElement) {\n+ return (\n+ maybeInspectedElement !== null &&\n+ typeof maybeInspectedElement === 'object' &&\n+ maybeInspectedElement.hasOwnProperty('canEditFunctionProps') &&\n+ maybeInspectedElement.hasOwnProperty('canEditHooks') &&\n+ maybeInspectedElement.hasOwnProperty('canToggleSuspense') &&\n+ maybeInspectedElement.hasOwnProperty('canViewSource')\n+ );\n+}\n+\n+\/\/ print() is part of Jest's serializer API\n+export function print(inspectedElement, serialize, indent) {\n+ return JSON.stringify(\n+ {\n+ id: inspectedElement.id,\n+ owners: inspectedElement.owners,\n+ context: inspectedElement.context,\n+ events: inspectedElement.events,\n+ hooks: inspectedElement.hooks,\n+ props: inspectedElement.props,\n+ state: inspectedElement.state,\n+ },\n+ null,\n+ 2\n+ );\n+}\ndiff --git a\/src\/__tests__\/legacy\/__snapshots__\/inspectElement-test.js.snap b\/src\/__tests__\/legacy\/__snapshots__\/inspectElement-test.js.snap\nnew file mode 100644\nindex 0000000000..1cfc30e884\n--- \/dev\/null\n+++ b\/src\/__tests__\/legacy\/__snapshots__\/inspectElement-test.js.snap\n@@ -0,0 +1,186 @@\n+\/\/ Jest Snapshot v1, https:\/\/goo.gl\/fbAQLP\n+\n+exports[`InspectedElementContext should inspect the currently selected element: 1: Initial inspection 1`] = `\n+Object {\n+ \"id\": 2,\n+ \"type\": \"full-data\",\n+ \"value\": {\n+ \"id\": 2,\n+ \"owners\": null,\n+ \"context\": {},\n+ \"hooks\": null,\n+ \"props\": {\n+ \"a\": 1,\n+ \"b\": \"abc\"\n+ },\n+ \"state\": null\n+},\n+}\n+`;\n+\n+exports[`InspectedElementContext should not dehydrate nested values until explicitly requested: 1: Initially inspect element 1`] = `\n+Object {\n+ \"id\": 2,\n+ \"type\": \"full-data\",\n+ \"value\": {\n+ \"id\": 2,\n+ \"owners\": null,\n+ \"context\": {},\n+ \"hooks\": null,\n+ \"props\": {\n+ \"nestedObject\": {\n+ \"a\": {}\n+ }\n+ },\n+ \"state\": null\n+},\n+}\n+`;\n+\n+exports[`InspectedElementContext should not dehydrate nested values until explicitly requested: 2: Inspect props.nestedObject.a 1`] = `\n+Object {\n+ \"id\": 2,\n+ \"type\": \"full-data\",\n+ \"value\": {\n+ \"id\": 2,\n+ \"owners\": null,\n+ \"context\": {},\n+ \"hooks\": null,\n+ \"props\": {\n+ \"nestedObject\": {\n+ \"a\": {\n+ \"b\": {\n+ \"c\": {}\n+ }\n+ }\n+ }\n+ },\n+ \"state\": null\n+},\n+}\n+`;\n+\n+exports[`InspectedElementContext should not dehydrate nested values until explicitly requested: 3: Inspect props.nestedObject.a.b.c 1`] = `\n+Object {\n+ \"id\": 2,\n+ \"type\": \"full-data\",\n+ \"value\": {\n+ \"id\": 2,\n+ \"owners\": null,\n+ \"context\": {},\n+ \"hooks\": null,\n+ \"props\": {\n+ \"nestedObject\": {\n+ \"a\": {\n+ \"b\": {\n+ \"c\": [\n+ {\n+ \"d\": {}\n+ }\n+ ]\n+ }\n+ }\n+ }\n+ },\n+ \"state\": null\n+},\n+}\n+`;\n+\n+exports[`InspectedElementContext should not dehydrate nested values until explicitly requested: 4: Inspect props.nestedObject.a.b.c.0.d 1`] = `\n+Object {\n+ \"id\": 2,\n+ \"type\": \"full-data\",\n+ \"value\": {\n+ \"id\": 2,\n+ \"owners\": null,\n+ \"context\": {},\n+ \"hooks\": null,\n+ \"props\": {\n+ \"nestedObject\": {\n+ \"a\": {\n+ \"b\": {\n+ \"c\": [\n+ {\n+ \"d\": {\n+ \"e\": {}\n+ }\n+ }\n+ ]\n+ }\n+ }\n+ }\n+ },\n+ \"state\": null\n+},\n+}\n+`;\n+\n+exports[`InspectedElementContext should support complex data types: 1: Initial inspection 1`] = `\n+Object {\n+ \"id\": 2,\n+ \"type\": \"full-data\",\n+ \"value\": {\n+ \"id\": 2,\n+ \"owners\": null,\n+ \"context\": {},\n+ \"hooks\": null,\n+ \"props\": {\n+ \"html_element\": {},\n+ \"fn\": {},\n+ \"symbol\": {},\n+ \"react_element\": {},\n+ \"array_buffer\": {},\n+ \"typed_array\": {},\n+ \"date\": {}\n+ },\n+ \"state\": null\n+},\n+}\n+`;\n+\n+exports[`InspectedElementContext should support custom objects with enumerable properties and getters: 1: Initial inspection 1`] = `\n+Object {\n+ \"id\": 2,\n+ \"type\": \"full-data\",\n+ \"value\": {\n+ \"id\": 2,\n+ \"owners\": null,\n+ \"context\": {},\n+ \"hooks\": null,\n+ \"props\": {\n+ \"data\": {\n+ \"_number\": 42,\n+ \"number\": 42\n+ }\n+ },\n+ \"state\": null\n+},\n+}\n+`;\n+\n+exports[`InspectedElementContext should support simple data types: 1: Initial inspection 1`] = `\n+Object {\n+ \"id\": 2,\n+ \"type\": \"full-data\",\n+ \"value\": {\n+ \"id\": 2,\n+ \"owners\": null,\n+ \"context\": {},\n+ \"hooks\": null,\n+ \"props\": {\n+ \"boolean_false\": false,\n+ \"boolean_true\": true,\n+ \"infinity\": null,\n+ \"integer_zero\": 0,\n+ \"integer_one\": 1,\n+ \"float\": 1.23,\n+ \"string\": \"abc\",\n+ \"string_empty\": \"\",\n+ \"nan\": null,\n+ \"value_null\": null\n+ },\n+ \"state\": null\n+},\n+}\n+`;\ndiff --git a\/src\/__tests__\/legacy\/__snapshots__\/storeLegacy-v15-test.js.snap b\/src\/__tests__\/legacy\/__snapshots__\/storeLegacy-v15-test.js.snap\nnew file mode 100644\nindex 0000000000..06628a9e9a\n--- \/dev\/null\n+++ b\/src\/__tests__\/legacy\/__snapshots__\/storeLegacy-v15-test.js.snap\n@@ -0,0 +1,499 @@\n+\/\/ Jest Snapshot v1, https:\/\/goo.gl\/fbAQLP\n+\n+exports[`Store (legacy) collapseNodesByDefault:false should not filter DOM nodes from the store tree: 1: mount 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ ▾ <div>\n+ ▾ <div>\n+ ▾ <Parent>\n+ ▾ <div>\n+ ▾ <Child>\n+ <div>\n+ ▾ <Parent>\n+ ▾ <div>\n+ ▾ <Child>\n+ <div>\n+ <Nothing>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:false should not filter DOM nodes from the store tree: 2: update 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ ▾ <div>\n+ ▾ <div>\n+ ▾ <Parent>\n+ ▾ <div>\n+ ▾ <Child>\n+ <div>\n+ ▾ <Parent>\n+ ▾ <div>\n+ ▾ <Child>\n+ <div>\n+ <Nothing>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:false should not filter DOM nodes from the store tree: 5: unmount 1`] = ``;\n+\n+exports[`Store (legacy) collapseNodesByDefault:false should support adding and removing children: 1: mount 1`] = `\n+[root]\n+ ▾ <Root>\n+ ▾ <div>\n+ ▾ <Component key=\"a\">\n+ <div>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:false should support adding and removing children: 2: add child 1`] = `\n+[root]\n+ ▾ <Root>\n+ ▾ <div>\n+ ▾ <Component key=\"a\">\n+ <div>\n+ ▾ <Component key=\"b\">\n+ <div>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:false should support adding and removing children: 3: remove child 1`] = `\n+[root]\n+ ▾ <Root>\n+ ▾ <div>\n+ ▾ <Component key=\"b\">\n+ <div>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:false should support collapsing parts of the tree: 1: mount 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ ▾ <div>\n+ ▾ <Parent>\n+ ▾ <div>\n+ ▾ <Child key=\"0\">\n+ <div>\n+ ▾ <Child key=\"1\">\n+ <div>\n+ ▾ <Parent>\n+ ▾ <div>\n+ ▾ <Child key=\"0\">\n+ <div>\n+ ▾ <Child key=\"1\">\n+ <div>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:false should support collapsing parts of the tree: 2: collapse first Parent 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ ▾ <div>\n+ ▸ <Parent>\n+ ▾ <Parent>\n+ ▾ <div>\n+ ▾ <Child key=\"0\">\n+ <div>\n+ ▾ <Child key=\"1\">\n+ <div>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:false should support collapsing parts of the tree: 3: collapse second Parent 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ ▾ <div>\n+ ▸ <Parent>\n+ ▸ <Parent>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:false should support collapsing parts of the tree: 4: expand first Parent 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ ▾ <div>\n+ ▾ <Parent>\n+ ▾ <div>\n+ ▾ <Child key=\"0\">\n+ <div>\n+ ▾ <Child key=\"1\">\n+ <div>\n+ ▸ <Parent>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:false should support collapsing parts of the tree: 5: collapse Grandparent 1`] = `\n+[root]\n+ ▸ <Grandparent>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:false should support collapsing parts of the tree: 6: expand Grandparent 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ ▾ <div>\n+ ▾ <Parent>\n+ ▾ <div>\n+ ▾ <Child key=\"0\">\n+ <div>\n+ ▾ <Child key=\"1\">\n+ <div>\n+ ▸ <Parent>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:false should support mount and update operations for multiple roots: 1: mount 1`] = `\n+[root]\n+ ▾ <Parent key=\"A\">\n+ ▾ <div>\n+ ▾ <Child key=\"0\">\n+ <div>\n+ ▾ <Child key=\"1\">\n+ <div>\n+ ▾ <Child key=\"2\">\n+ <div>\n+[root]\n+ ▾ <Parent key=\"B\">\n+ ▾ <div>\n+ ▾ <Child key=\"0\">\n+ <div>\n+ ▾ <Child key=\"1\">\n+ <div>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:false should support mount and update operations for multiple roots: 2: update 1`] = `\n+[root]\n+ ▾ <Parent key=\"A\">\n+ ▾ <div>\n+ ▾ <Child key=\"0\">\n+ <div>\n+ ▾ <Child key=\"1\">\n+ <div>\n+ ▾ <Child key=\"2\">\n+ <div>\n+ ▾ <Child key=\"3\">\n+ <div>\n+[root]\n+ ▾ <Parent key=\"B\">\n+ ▾ <div>\n+ ▾ <Child key=\"0\">\n+ <div>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:false should support mount and update operations for multiple roots: 3: unmount B 1`] = `\n+[root]\n+ ▾ <Parent key=\"A\">\n+ ▾ <div>\n+ ▾ <Child key=\"0\">\n+ <div>\n+ ▾ <Child key=\"1\">\n+ <div>\n+ ▾ <Child key=\"2\">\n+ <div>\n+ ▾ <Child key=\"3\">\n+ <div>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:false should support mount and update operations for multiple roots: 4: unmount A 1`] = ``;\n+\n+exports[`Store (legacy) collapseNodesByDefault:false should support mount and update operations: 1: mount 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ ▾ <div>\n+ ▾ <Parent>\n+ ▾ <div>\n+ ▾ <Child key=\"0\">\n+ <div>\n+ ▾ <Child key=\"1\">\n+ <div>\n+ ▾ <Child key=\"2\">\n+ <div>\n+ ▾ <Child key=\"3\">\n+ <div>\n+ ▾ <Parent>\n+ ▾ <div>\n+ ▾ <Child key=\"0\">\n+ <div>\n+ ▾ <Child key=\"1\">\n+ <div>\n+ ▾ <Child key=\"2\">\n+ <div>\n+ ▾ <Child key=\"3\">\n+ <div>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:false should support mount and update operations: 2: update 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ ▾ <div>\n+ ▾ <Parent>\n+ ▾ <div>\n+ ▾ <Child key=\"0\">\n+ <div>\n+ ▾ <Child key=\"1\">\n+ <div>\n+ ▾ <Parent>\n+ ▾ <div>\n+ ▾ <Child key=\"0\">\n+ <div>\n+ ▾ <Child key=\"1\">\n+ <div>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:false should support mount and update operations: 3: unmount 1`] = ``;\n+\n+exports[`Store (legacy) collapseNodesByDefault:false should support reordering of children: 1: mount 1`] = `\n+[root]\n+ ▾ <Root>\n+ ▾ <div>\n+ ▾ <Foo key=\"foo\">\n+ ▾ <div>\n+ ▾ <Component key=\"0\">\n+ <div>\n+ ▾ <Bar key=\"bar\">\n+ ▾ <div>\n+ ▾ <Component key=\"0\">\n+ <div>\n+ ▾ <Component key=\"1\">\n+ <div>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:false should support reordering of children: 2: reorder children 1`] = `\n+[root]\n+ ▾ <Root>\n+ ▾ <div>\n+ ▾ <Bar key=\"bar\">\n+ ▾ <div>\n+ ▾ <Component key=\"0\">\n+ <div>\n+ ▾ <Component key=\"1\">\n+ <div>\n+ ▾ <Foo key=\"foo\">\n+ ▾ <div>\n+ ▾ <Component key=\"0\">\n+ <div>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:false should support reordering of children: 3: collapse root 1`] = `\n+[root]\n+ ▸ <Root>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:false should support reordering of children: 4: expand root 1`] = `\n+[root]\n+ ▾ <Root>\n+ ▾ <div>\n+ ▾ <Bar key=\"bar\">\n+ ▾ <div>\n+ ▾ <Component key=\"0\">\n+ <div>\n+ ▾ <Component key=\"1\">\n+ <div>\n+ ▾ <Foo key=\"foo\">\n+ ▾ <div>\n+ ▾ <Component key=\"0\">\n+ <div>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:true should not filter DOM nodes from the store tree: 1: mount 1`] = `\n+[root]\n+ ▸ <Grandparent>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:true should not filter DOM nodes from the store tree: 2: expand Grandparent 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ ▸ <div>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:true should not filter DOM nodes from the store tree: 3: expand div 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ ▾ <div>\n+ ▸ <div>\n+ ▸ <Parent>\n+ <Nothing>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:true should not filter DOM nodes from the store tree: 4: final update 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ ▾ <div>\n+ ▸ <div>\n+ ▸ <Parent>\n+ <Nothing>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:true should not filter DOM nodes from the store tree: 5: unmount 1`] = ``;\n+\n+exports[`Store (legacy) collapseNodesByDefault:true should support expanding deep parts of the tree: 1: mount 1`] = `\n+[root]\n+ ▸ <Wrapper>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:true should support expanding deep parts of the tree: 2: expand deepest node 1`] = `\n+[root]\n+ ▾ <Wrapper>\n+ ▾ <Nested>\n+ ▾ <Nested>\n+ ▾ <Nested>\n+ ▾ <Nested>\n+ <div>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:true should support expanding deep parts of the tree: 3: collapse root 1`] = `\n+[root]\n+ ▸ <Wrapper>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:true should support expanding deep parts of the tree: 4: expand root 1`] = `\n+[root]\n+ ▾ <Wrapper>\n+ ▾ <Nested>\n+ ▾ <Nested>\n+ ▾ <Nested>\n+ ▾ <Nested>\n+ <div>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:true should support expanding deep parts of the tree: 5: collapse middle node 1`] = `\n+[root]\n+ ▾ <Wrapper>\n+ ▸ <Nested>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:true should support expanding deep parts of the tree: 6: expand middle node 1`] = `\n+[root]\n+ ▾ <Wrapper>\n+ ▾ <Nested>\n+ ▾ <Nested>\n+ ▾ <Nested>\n+ ▾ <Nested>\n+ <div>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 1: mount 1`] = `\n+[root]\n+ ▸ <Grandparent>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 2: expand Grandparent 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ ▸ <div>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 3: expand parent div 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ ▾ <div>\n+ ▸ <Parent>\n+ ▸ <Parent>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 4: expand first Parent 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ ▾ <div>\n+ ▾ <Parent>\n+ ▸ <div>\n+ ▸ <Parent>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 5: expand second Parent 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ ▾ <div>\n+ ▾ <Parent>\n+ ▸ <div>\n+ ▾ <Parent>\n+ ▸ <div>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 6: collapse first Parent 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ ▾ <div>\n+ ▸ <Parent>\n+ ▾ <Parent>\n+ ▸ <div>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 7: collapse second Parent 1`] = `\n+[root]\n+ ▾ <Grandparent>\n+ ▾ <div>\n+ ▸ <Parent>\n+ ▸ <Parent>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 8: collapse Grandparent 1`] = `\n+[root]\n+ ▸ <Grandparent>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:true should support mount and update operations for multiple roots: 1: mount 1`] = `\n+[root]\n+ ▸ <Parent key=\"A\">\n+[root]\n+ ▸ <Parent key=\"B\">\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:true should support mount and update operations for multiple roots: 2: update 1`] = `\n+[root]\n+ ▸ <Parent key=\"A\">\n+[root]\n+ ▸ <Parent key=\"B\">\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:true should support mount and update operations for multiple roots: 3: unmount B 1`] = `\n+[root]\n+ ▸ <Parent key=\"A\">\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:true should support mount and update operations for multiple roots: 4: unmount A 1`] = ``;\n+\n+exports[`Store (legacy) collapseNodesByDefault:true should support mount and update operations: 1: mount 1`] = `\n+[root]\n+ ▸ <div>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:true should support mount and update operations: 2: update 1`] = `\n+[root]\n+ ▸ <div>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:true should support mount and update operations: 3: unmount 1`] = ``;\n+\n+exports[`Store (legacy) collapseNodesByDefault:true should support reordering of children: 1: mount 1`] = `\n+[root]\n+ ▸ <Root>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:true should support reordering of children: 2: reorder children 1`] = `\n+[root]\n+ ▸ <Root>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:true should support reordering of children: 3: expand root 1`] = `\n+[root]\n+ ▾ <Root>\n+ ▸ <div>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:true should support reordering of children: 4: expand div 1`] = `\n+[root]\n+ ▾ <Root>\n+ ▾ <div>\n+ ▸ <Bar key=\"bar\">\n+ ▸ <Foo key=\"foo\">\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:true should support reordering of children: 4: expand leaves 1`] = `\n+[root]\n+ ▾ <Root>\n+ ▾ <div>\n+ ▾ <Bar key=\"bar\">\n+ ▸ <div>\n+ ▾ <Foo key=\"foo\">\n+ ▸ <div>\n+`;\n+\n+exports[`Store (legacy) collapseNodesByDefault:true should support reordering of children: 5: collapse root 1`] = `\n+[root]\n+ ▸ <Root>\n+`;\n+\n+exports[`Store (legacy) should not allow a root node to be collapsed: 1: mount 1`] = `\n+[root]\n+ ▾ <Component>\n+ <div>\n+`;\ndiff --git a\/src\/__tests__\/legacy\/inspectElement-test.js b\/src\/__tests__\/legacy\/inspectElement-test.js\nnew file mode 100644\nindex 0000000000..7b8c2b04a9\n--- \/dev\/null\n+++ b\/src\/__tests__\/legacy\/inspectElement-test.js\n@@ -0,0 +1,283 @@\n+\/\/ @flow\n+\n+import type { InspectedElementPayload } from 'src\/backend\/types';\n+import type { DehydratedData } from 'src\/devtools\/views\/Components\/types';\n+import type { FrontendBridge } from 'src\/bridge';\n+import type Store from 'src\/devtools\/store';\n+\n+describe('InspectedElementContext', () => {\n+ let React;\n+ let ReactDOM;\n+ let hydrate;\n+ let meta;\n+ let bridge: FrontendBridge;\n+ let store: Store;\n+\n+ const act = (callback: Function) => {\n+ callback();\n+\n+ jest.runAllTimers(); \/\/ Flush Bridge operations\n+ };\n+\n+ function dehydrateHelper(\n+ dehydratedData: DehydratedData | null\n+ ): Object | null {\n+ if (dehydratedData !== null) {\n+ return hydrate(dehydratedData.data, dehydratedData.cleaned);\n+ } else {\n+ return null;\n+ }\n+ }\n+\n+ async function read(\n+ id: number,\n+ path?: Array<string | number>\n+ ): Promise<Object> {\n+ return new Promise((resolve, reject) => {\n+ const rendererID = ((store.getRendererIDForElement(id): any): number);\n+\n+ const onInspectedElement = (payload: InspectedElementPayload) => {\n+ bridge.removeListener('inspectedElement', onInspectedElement);\n+\n+ if (payload.type === 'full-data' && payload.value !== null) {\n+ payload.value.context = dehydrateHelper(payload.value.context);\n+ payload.value.props = dehydrateHelper(payload.value.props);\n+ payload.value.state = dehydrateHelper(payload.value.state);\n+ }\n+\n+ resolve(payload);\n+ };\n+\n+ bridge.addListener('inspectedElement', onInspectedElement);\n+ bridge.send('inspectElement', { id, path, rendererID });\n+\n+ jest.runOnlyPendingTimers();\n+ });\n+ }\n+\n+ beforeEach(() => {\n+ bridge = global.bridge;\n+ store = global.store;\n+\n+ hydrate = require('src\/hydration').hydrate;\n+ meta = require('src\/hydration').meta;\n+\n+ \/\/ Redirect all React\/ReactDOM requires to the v15 UMD.\n+ \/\/ We use the UMD because Jest doesn't enable us to mock deep imports (e.g. \"react\/lib\/Something\").\n+ jest.mock('react', () => jest.requireActual('react-15\/dist\/react.js'));\n+ jest.mock('react-dom', () =>\n+ jest.requireActual('react-dom-15\/dist\/react-dom.js')\n+ );\n+\n+ React = require('react');\n+ ReactDOM = require('react-dom');\n+ });\n+\n+ it('should inspect the currently selected element', async done => {\n+ const Example = () => null;\n+\n+ act(() =>\n+ ReactDOM.render(<Example a={1} b=\"abc\" \/>, document.createElement('div'))\n+ );\n+\n+ const id = ((store.getElementIDAtIndex(0): any): number);\n+ const inspectedElement = await read(id);\n+\n+ expect(inspectedElement).toMatchSnapshot('1: Initial inspection');\n+\n+ done();\n+ });\n+\n+ it('should support simple data types', async done => {\n+ const Example = () => null;\n+\n+ act(() =>\n+ ReactDOM.render(\n+ <Example\n+ boolean_false={false}\n+ boolean_true={true}\n+ infinity={Infinity}\n+ integer_zero={0}\n+ integer_one={1}\n+ float={1.23}\n+ string=\"abc\"\n+ string_empty=\"\"\n+ nan={NaN}\n+ value_null={null}\n+ value_undefined={undefined}\n+ \/>,\n+ document.createElement('div')\n+ )\n+ );\n+\n+ const id = ((store.getElementIDAtIndex(0): any): number);\n+ const inspectedElement = await read(id);\n+\n+ expect(inspectedElement).toMatchSnapshot('1: Initial inspection');\n+\n+ const { props } = inspectedElement.value;\n+ expect(props.boolean_false).toBe(false);\n+ expect(props.boolean_true).toBe(true);\n+ expect(Number.isFinite(props.infinity)).toBe(false);\n+ expect(props.integer_zero).toEqual(0);\n+ expect(props.integer_one).toEqual(1);\n+ expect(props.float).toEqual(1.23);\n+ expect(props.string).toEqual('abc');\n+ expect(props.string_empty).toEqual('');\n+ expect(props.nan).toBeNaN();\n+ expect(props.value_null).toBeNull();\n+ expect(props.value_undefined).toBeUndefined();\n+\n+ done();\n+ });\n+\n+ it('should support complex data types', async done => {\n+ const Example = () => null;\n+\n+ const div = document.createElement('div');\n+ const exmapleFunction = () => {};\n+ const typedArray = new Uint8Array(3);\n+\n+ act(() =>\n+ ReactDOM.render(\n+ <Example\n+ html_element={div}\n+ fn={exmapleFunction}\n+ symbol={Symbol('symbol')}\n+ react_element={<span \/>}\n+ array_buffer={typedArray.buffer}\n+ typed_array={typedArray}\n+ date={new Date()}\n+ \/>,\n+ document.createElement('div')\n+ )\n+ );\n+\n+ const id = ((store.getElementIDAtIndex(0): any): number);\n+ const inspectedElement = await read(id);\n+\n+ expect(inspectedElement).toMatchSnapshot('1: Initial inspection');\n+\n+ const {\n+ html_element,\n+ fn,\n+ symbol,\n+ react_element,\n+ array_buffer,\n+ typed_array,\n+ date,\n+ } = inspectedElement.value.props;\n+ expect(html_element[meta.inspectable]).toBe(false);\n+ expect(html_element[meta.name]).toBe('DIV');\n+ expect(html_element[meta.type]).toBe('html_element');\n+ expect(fn[meta.inspectable]).toBe(false);\n+ expect(fn[meta.name]).toBe('exmapleFunction');\n+ expect(fn[meta.type]).toBe('function');\n+ expect(symbol[meta.inspectable]).toBe(false);\n+ expect(symbol[meta.name]).toBe('Symbol(symbol)');\n+ expect(symbol[meta.type]).toBe('symbol');\n+ expect(react_element[meta.inspectable]).toBe(false);\n+ expect(react_element[meta.name]).toBe('span');\n+ expect(react_element[meta.type]).toBe('react_element');\n+ expect(array_buffer[meta.size]).toBe(3);\n+ expect(array_buffer[meta.inspectable]).toBe(false);\n+ expect(array_buffer[meta.name]).toBe('ArrayBuffer');\n+ expect(array_buffer[meta.type]).toBe('array_buffer');\n+ expect(typed_array[meta.size]).toBe(3);\n+ expect(typed_array[meta.inspectable]).toBe(false);\n+ expect(typed_array[meta.name]).toBe('Uint8Array');\n+ expect(typed_array[meta.type]).toBe('typed_array');\n+ expect(date[meta.inspectable]).toBe(false);\n+ expect(date[meta.type]).toBe('date');\n+\n+ done();\n+ });\n+\n+ it('should support custom objects with enumerable properties and getters', async done => {\n+ class CustomData {\n+ _number = 42;\n+ get number() {\n+ return this._number;\n+ }\n+ set number(value) {\n+ this._number = value;\n+ }\n+ }\n+\n+ const descriptor = ((Object.getOwnPropertyDescriptor(\n+ CustomData.prototype,\n+ 'number'\n+ ): any): PropertyDescriptor<number>);\n+ descriptor.enumerable = true;\n+ Object.defineProperty(CustomData.prototype, 'number', descriptor);\n+\n+ const Example = ({ data }) => null;\n+\n+ act(() =>\n+ ReactDOM.render(\n+ <Example data={new CustomData()} \/>,\n+ document.createElement('div')\n+ )\n+ );\n+\n+ const id = ((store.getElementIDAtIndex(0): any): number);\n+ const inspectedElement = await read(id);\n+\n+ expect(inspectedElement).toMatchSnapshot('1: Initial inspection');\n+\n+ done();\n+ });\n+\n+ it('should not dehydrate nested values until explicitly requested', async done => {\n+ const Example = () => null;\n+\n+ act(() =>\n+ ReactDOM.render(\n+ <Example\n+ nestedObject={{\n+ a: {\n+ b: {\n+ c: [\n+ {\n+ d: {\n+ e: {},\n+ },\n+ },\n+ ],\n+ },\n+ },\n+ }}\n+ \/>,\n+ document.createElement('div')\n+ )\n+ );\n+\n+ const id = ((store.getElementIDAtIndex(0): any): number);\n+\n+ let inspectedElement = await read(id);\n+ expect(inspectedElement).toMatchSnapshot('1: Initially inspect element');\n+\n+ inspectedElement = await read(id, ['props', 'nestedObject', 'a']);\n+ expect(inspectedElement).toMatchSnapshot('2: Inspect props.nestedObject.a');\n+\n+ inspectedElement = await read(id, ['props', 'nestedObject', 'a', 'b', 'c']);\n+ expect(inspectedElement).toMatchSnapshot(\n+ '3: Inspect props.nestedObject.a.b.c'\n+ );\n+\n+ inspectedElement = await read(id, [\n+ 'props',\n+ 'nestedObject',\n+ 'a',\n+ 'b',\n+ 'c',\n+ 0,\n+ 'd',\n+ ]);\n+ expect(inspectedElement).toMatchSnapshot(\n+ '4: Inspect props.nestedObject.a.b.c.0.d'\n+ );\n+\n+ done();\n+ });\n+});\ndiff --git a\/src\/__tests__\/legacy\/storeLegacy-v15-test.js b\/src\/__tests__\/legacy\/storeLegacy-v15-test.js\nnew file mode 100644\nindex 0000000000..fc5d373e5b\n--- \/dev\/null\n+++ b\/src\/__tests__\/legacy\/storeLegacy-v15-test.js\n@@ -0,0 +1,505 @@\n+\/\/ @flow\n+\n+describe('Store (legacy)', () => {\n+ let React;\n+ let ReactDOM;\n+ let store;\n+\n+ const act = (callback: Function) => {\n+ callback();\n+\n+ jest.runAllTimers(); \/\/ Flush Bridge operations\n+ };\n+\n+ beforeEach(() => {\n+ store = global.store;\n+\n+ \/\/ Redirect all React\/ReactDOM requires to the v15 UMD.\n+ \/\/ We use the UMD because Jest doesn't enable us to mock deep imports (e.g. \"react\/lib\/Something\").\n+ jest.mock('react', () => jest.requireActual('react-15\/dist\/react.js'));\n+ jest.mock('react-dom', () =>\n+ jest.requireActual('react-dom-15\/dist\/react-dom.js')\n+ );\n+\n+ React = require('react');\n+ ReactDOM = require('react-dom');\n+ });\n+\n+ it('should not allow a root node to be collapsed', () => {\n+ const Component = () => <div>Hi<\/div>;\n+\n+ act(() =>\n+ ReactDOM.render(<Component count={4} \/>, document.createElement('div'))\n+ );\n+ expect(store).toMatchSnapshot('1: mount');\n+\n+ expect(store.roots).toHaveLength(1);\n+\n+ const rootID = store.roots[0];\n+\n+ expect(() => store.toggleIsCollapsed(rootID, true)).toThrow(\n+ 'Root nodes cannot be collapsed'\n+ );\n+ });\n+\n+ describe('collapseNodesByDefault:false', () => {\n+ beforeEach(() => {\n+ store.collapseNodesByDefault = false;\n+ });\n+\n+ it('should support mount and update operations', () => {\n+ const Grandparent = ({ count }) => (\n+ <div>\n+ <Parent count={count} \/>\n+ <Parent count={count} \/>\n+ <\/div>\n+ );\n+ const Parent = ({ count }) => (\n+ <div>\n+ {new Array(count).fill(true).map((_, index) => (\n+ <Child key={index} \/>\n+ ))}\n+ <\/div>\n+ );\n+ const Child = () => <div>Hi!<\/div>;\n+\n+ const container = document.createElement('div');\n+\n+ act(() => ReactDOM.render(<Grandparent count={4} \/>, container));\n+ expect(store).toMatchSnapshot('1: mount');\n+\n+ act(() => ReactDOM.render(<Grandparent count={2} \/>, container));\n+ expect(store).toMatchSnapshot('2: update');\n+\n+ act(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(store).toMatchSnapshot('3: unmount');\n+ });\n+\n+ it('should support mount and update operations for multiple roots', () => {\n+ const Parent = ({ count }) => (\n+ <div>\n+ {new Array(count).fill(true).map((_, index) => (\n+ <Child key={index} \/>\n+ ))}\n+ <\/div>\n+ );\n+ const Child = () => <div>Hi!<\/div>;\n+\n+ const containerA = document.createElement('div');\n+ const containerB = document.createElement('div');\n+\n+ act(() => {\n+ ReactDOM.render(<Parent key=\"A\" count={3} \/>, containerA);\n+ ReactDOM.render(<Parent key=\"B\" count={2} \/>, containerB);\n+ });\n+ expect(store).toMatchSnapshot('1: mount');\n+\n+ act(() => {\n+ ReactDOM.render(<Parent key=\"A\" count={4} \/>, containerA);\n+ ReactDOM.render(<Parent key=\"B\" count={1} \/>, containerB);\n+ });\n+ expect(store).toMatchSnapshot('2: update');\n+\n+ act(() => ReactDOM.unmountComponentAtNode(containerB));\n+ expect(store).toMatchSnapshot('3: unmount B');\n+\n+ act(() => ReactDOM.unmountComponentAtNode(containerA));\n+ expect(store).toMatchSnapshot('4: unmount A');\n+ });\n+\n+ it('should not filter DOM nodes from the store tree', () => {\n+ const Grandparent = ({ flip }) => (\n+ <div>\n+ <div>\n+ <Parent flip={flip} \/>\n+ <\/div>\n+ <Parent flip={flip} \/>\n+ <Nothing \/>\n+ <\/div>\n+ );\n+ const Parent = ({ flip }) => (\n+ <div>\n+ {flip ? 'foo' : null}\n+ <Child \/>\n+ {flip && [null, 'hello', 42]}\n+ {flip ? 'bar' : 'baz'}\n+ <\/div>\n+ );\n+ const Child = () => <div>Hi!<\/div>;\n+ const Nothing = () => null;\n+\n+ const container = document.createElement('div');\n+ act(() =>\n+ ReactDOM.render(<Grandparent count={4} flip={false} \/>, container)\n+ );\n+ expect(store).toMatchSnapshot('1: mount');\n+\n+ act(() =>\n+ ReactDOM.render(<Grandparent count={4} flip={true} \/>, container)\n+ );\n+ expect(store).toMatchSnapshot('2: update');\n+\n+ act(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(store).toMatchSnapshot('5: unmount');\n+ });\n+\n+ it('should support collapsing parts of the tree', () => {\n+ const Grandparent = ({ count }) => (\n+ <div>\n+ <Parent count={count} \/>\n+ <Parent count={count} \/>\n+ <\/div>\n+ );\n+ const Parent = ({ count }) => (\n+ <div>\n+ {new Array(count).fill(true).map((_, index) => (\n+ <Child key={index} \/>\n+ ))}\n+ <\/div>\n+ );\n+ const Child = () => <div>Hi!<\/div>;\n+\n+ act(() =>\n+ ReactDOM.render(\n+ <Grandparent count={2} \/>,\n+ document.createElement('div')\n+ )\n+ );\n+ expect(store).toMatchSnapshot('1: mount');\n+\n+ const grandparentID = store.getElementIDAtIndex(0);\n+ const parentOneID = store.getElementIDAtIndex(2);\n+ const parentTwoID = store.getElementIDAtIndex(8);\n+\n+ act(() => store.toggleIsCollapsed(parentOneID, true));\n+ expect(store).toMatchSnapshot('2: collapse first Parent');\n+\n+ act(() => store.toggleIsCollapsed(parentTwoID, true));\n+ expect(store).toMatchSnapshot('3: collapse second Parent');\n+\n+ act(() => store.toggleIsCollapsed(parentOneID, false));\n+ expect(store).toMatchSnapshot('4: expand first Parent');\n+\n+ act(() => store.toggleIsCollapsed(grandparentID, true));\n+ expect(store).toMatchSnapshot('5: collapse Grandparent');\n+\n+ act(() => store.toggleIsCollapsed(grandparentID, false));\n+ expect(store).toMatchSnapshot('6: expand Grandparent');\n+ });\n+\n+ it('should support adding and removing children', () => {\n+ const Root = ({ children }) => <div>{children}<\/div>;\n+ const Component = () => <div \/>;\n+\n+ const container = document.createElement('div');\n+\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <Component key=\"a\" \/>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+ expect(store).toMatchSnapshot('1: mount');\n+\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <Component key=\"a\" \/>\n+ <Component key=\"b\" \/>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+ expect(store).toMatchSnapshot('2: add child');\n+\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <Component key=\"b\" \/>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+ expect(store).toMatchSnapshot('3: remove child');\n+ });\n+\n+ it('should support reordering of children', () => {\n+ const Root = ({ children }) => <div>{children}<\/div>;\n+ const Component = () => <div \/>;\n+\n+ const Foo = () => <div>{[<Component key=\"0\" \/>]}<\/div>;\n+ const Bar = () => (\n+ <div>{[<Component key=\"0\" \/>, <Component key=\"1\" \/>]}<\/div>\n+ );\n+ const foo = <Foo key=\"foo\" \/>;\n+ const bar = <Bar key=\"bar\" \/>;\n+\n+ const container = document.createElement('div');\n+\n+ act(() => ReactDOM.render(<Root>{[foo, bar]}<\/Root>, container));\n+ expect(store).toMatchSnapshot('1: mount');\n+\n+ act(() => ReactDOM.render(<Root>{[bar, foo]}<\/Root>, container));\n+ expect(store).toMatchSnapshot('2: reorder children');\n+\n+ act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), true));\n+ expect(store).toMatchSnapshot('3: collapse root');\n+\n+ act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));\n+ expect(store).toMatchSnapshot('4: expand root');\n+ });\n+ });\n+\n+ describe('collapseNodesByDefault:true', () => {\n+ beforeEach(() => {\n+ store.collapseNodesByDefault = true;\n+ });\n+\n+ it('should support mount and update operations', () => {\n+ const Parent = ({ count }) => (\n+ <div>\n+ {new Array(count).fill(true).map((_, index) => (\n+ <Child key={index} \/>\n+ ))}\n+ <\/div>\n+ );\n+ const Child = () => <div>Hi!<\/div>;\n+\n+ const container = document.createElement('div');\n+\n+ act(() =>\n+ ReactDOM.render(\n+ <div>\n+ <Parent count={1} \/>\n+ <Parent count={3} \/>\n+ <\/div>,\n+ container\n+ )\n+ );\n+ expect(store).toMatchSnapshot('1: mount');\n+\n+ act(() =>\n+ ReactDOM.render(\n+ <div>\n+ <Parent count={2} \/>\n+ <Parent count={1} \/>\n+ <\/div>,\n+ container\n+ )\n+ );\n+ expect(store).toMatchSnapshot('2: update');\n+\n+ act(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(store).toMatchSnapshot('3: unmount');\n+ });\n+\n+ it('should support mount and update operations for multiple roots', () => {\n+ const Parent = ({ count }) => (\n+ <div>\n+ {new Array(count).fill(true).map((_, index) => (\n+ <Child key={index} \/>\n+ ))}\n+ <\/div>\n+ );\n+ const Child = () => <div>Hi!<\/div>;\n+\n+ const containerA = document.createElement('div');\n+ const containerB = document.createElement('div');\n+\n+ act(() => {\n+ ReactDOM.render(<Parent key=\"A\" count={3} \/>, containerA);\n+ ReactDOM.render(<Parent key=\"B\" count={2} \/>, containerB);\n+ });\n+ expect(store).toMatchSnapshot('1: mount');\n+\n+ act(() => {\n+ ReactDOM.render(<Parent key=\"A\" count={4} \/>, containerA);\n+ ReactDOM.render(<Parent key=\"B\" count={1} \/>, containerB);\n+ });\n+ expect(store).toMatchSnapshot('2: update');\n+\n+ act(() => ReactDOM.unmountComponentAtNode(containerB));\n+ expect(store).toMatchSnapshot('3: unmount B');\n+\n+ act(() => ReactDOM.unmountComponentAtNode(containerA));\n+ expect(store).toMatchSnapshot('4: unmount A');\n+ });\n+\n+ it('should not filter DOM nodes from the store tree', () => {\n+ const Grandparent = ({ flip }) => (\n+ <div>\n+ <div>\n+ <Parent flip={flip} \/>\n+ <\/div>\n+ <Parent flip={flip} \/>\n+ <Nothing \/>\n+ <\/div>\n+ );\n+ const Parent = ({ flip }) => (\n+ <div>\n+ {flip ? 'foo' : null}\n+ <Child \/>\n+ {flip && [null, 'hello', 42]}\n+ {flip ? 'bar' : 'baz'}\n+ <\/div>\n+ );\n+ const Child = () => <div>Hi!<\/div>;\n+ const Nothing = () => null;\n+\n+ const container = document.createElement('div');\n+ act(() =>\n+ ReactDOM.render(<Grandparent count={4} flip={false} \/>, container)\n+ );\n+ expect(store).toMatchSnapshot('1: mount');\n+\n+ act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));\n+ expect(store).toMatchSnapshot('2: expand Grandparent');\n+\n+ act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(1), false));\n+ expect(store).toMatchSnapshot('3: expand div');\n+\n+ act(() =>\n+ ReactDOM.render(<Grandparent count={4} flip={true} \/>, container)\n+ );\n+ expect(store).toMatchSnapshot('4: final update');\n+\n+ act(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(store).toMatchSnapshot('5: unmount');\n+ });\n+\n+ it('should support expanding parts of the tree', () => {\n+ const Grandparent = ({ count }) => (\n+ <div>\n+ <Parent count={count} \/>\n+ <Parent count={count} \/>\n+ <\/div>\n+ );\n+ const Parent = ({ count }) => (\n+ <div>\n+ {new Array(count).fill(true).map((_, index) => (\n+ <Child key={index} \/>\n+ ))}\n+ <\/div>\n+ );\n+ const Child = () => <div>Hi!<\/div>;\n+\n+ act(() =>\n+ ReactDOM.render(\n+ <Grandparent count={2} \/>,\n+ document.createElement('div')\n+ )\n+ );\n+ expect(store).toMatchSnapshot('1: mount');\n+\n+ const grandparentID = store.getElementIDAtIndex(0);\n+\n+ act(() => store.toggleIsCollapsed(grandparentID, false));\n+ expect(store).toMatchSnapshot('2: expand Grandparent');\n+\n+ const parentDivID = store.getElementIDAtIndex(1);\n+ act(() => store.toggleIsCollapsed(parentDivID, false));\n+ expect(store).toMatchSnapshot('3: expand parent div');\n+\n+ const parentOneID = store.getElementIDAtIndex(2);\n+ const parentTwoID = store.getElementIDAtIndex(3);\n+\n+ act(() => store.toggleIsCollapsed(parentOneID, false));\n+ expect(store).toMatchSnapshot('4: expand first Parent');\n+\n+ act(() => store.toggleIsCollapsed(parentTwoID, false));\n+ expect(store).toMatchSnapshot('5: expand second Parent');\n+\n+ act(() => store.toggleIsCollapsed(parentOneID, true));\n+ expect(store).toMatchSnapshot('6: collapse first Parent');\n+\n+ act(() => store.toggleIsCollapsed(parentTwoID, true));\n+ expect(store).toMatchSnapshot('7: collapse second Parent');\n+\n+ act(() => store.toggleIsCollapsed(grandparentID, true));\n+ expect(store).toMatchSnapshot('8: collapse Grandparent');\n+ });\n+\n+ it('should support expanding deep parts of the tree', () => {\n+ const Wrapper = ({ forwardedRef }) => (\n+ <Nested depth={3} forwardedRef={forwardedRef} \/>\n+ );\n+ const Nested = ({ depth, forwardedRef }) =>\n+ depth > 0 ? (\n+ <Nested depth={depth - 1} forwardedRef={forwardedRef} \/>\n+ ) : (\n+ <div ref={forwardedRef} \/>\n+ );\n+\n+ let ref = null;\n+ const refSetter = value => {\n+ ref = value;\n+ };\n+\n+ act(() =>\n+ ReactDOM.render(\n+ <Wrapper forwardedRef={refSetter} \/>,\n+ document.createElement('div')\n+ )\n+ );\n+ expect(store).toMatchSnapshot('1: mount');\n+\n+ const deepestedNodeID = global.agent.getIDForNode(ref);\n+\n+ act(() => store.toggleIsCollapsed(deepestedNodeID, false));\n+ expect(store).toMatchSnapshot('2: expand deepest node');\n+\n+ const rootID = store.getElementIDAtIndex(0);\n+\n+ act(() => store.toggleIsCollapsed(rootID, true));\n+ expect(store).toMatchSnapshot('3: collapse root');\n+\n+ act(() => store.toggleIsCollapsed(rootID, false));\n+ expect(store).toMatchSnapshot('4: expand root');\n+\n+ const id = store.getElementIDAtIndex(1);\n+\n+ act(() => store.toggleIsCollapsed(id, true));\n+ expect(store).toMatchSnapshot('5: collapse middle node');\n+\n+ act(() => store.toggleIsCollapsed(id, false));\n+ expect(store).toMatchSnapshot('6: expand middle node');\n+ });\n+\n+ it('should support reordering of children', () => {\n+ const Root = ({ children }) => <div>{children}<\/div>;\n+ const Component = () => <div \/>;\n+\n+ const Foo = () => <div>{[<Component key=\"0\" \/>]}<\/div>;\n+ const Bar = () => (\n+ <div>{[<Component key=\"0\" \/>, <Component key=\"1\" \/>]}<\/div>\n+ );\n+ const foo = <Foo key=\"foo\" \/>;\n+ const bar = <Bar key=\"bar\" \/>;\n+\n+ const container = document.createElement('div');\n+\n+ act(() => ReactDOM.render(<Root>{[foo, bar]}<\/Root>, container));\n+ expect(store).toMatchSnapshot('1: mount');\n+\n+ act(() => ReactDOM.render(<Root>{[bar, foo]}<\/Root>, container));\n+ expect(store).toMatchSnapshot('2: reorder children');\n+\n+ act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));\n+ expect(store).toMatchSnapshot('3: expand root');\n+\n+ act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(1), false));\n+ expect(store).toMatchSnapshot('4: expand div');\n+\n+ act(() => {\n+ store.toggleIsCollapsed(store.getElementIDAtIndex(3), false);\n+ store.toggleIsCollapsed(store.getElementIDAtIndex(2), false);\n+ });\n+ expect(store).toMatchSnapshot('4: expand leaves');\n+\n+ act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), true));\n+ expect(store).toMatchSnapshot('5: collapse root');\n+ });\n+ });\n+});\ndiff --git a\/src\/__tests__\/ownersListContext-test.js b\/src\/__tests__\/ownersListContext-test.js\nnew file mode 100644\nindex 0000000000..97681b70bd\n--- \/dev\/null\n+++ b\/src\/__tests__\/ownersListContext-test.js\n@@ -0,0 +1,200 @@\n+\/\/ @flow\n+\n+import typeof ReactTestRenderer from 'react-test-renderer';\n+import type { Element } from 'src\/devtools\/views\/Components\/types';\n+import type { FrontendBridge } from 'src\/bridge';\n+import type Store from 'src\/devtools\/store';\n+\n+describe('OwnersListContext', () => {\n+ let React;\n+ let ReactDOM;\n+ let TestRenderer: ReactTestRenderer;\n+ let bridge: FrontendBridge;\n+ let store: Store;\n+ let utils;\n+\n+ let BridgeContext;\n+ let OwnersListContext;\n+ let OwnersListContextController;\n+ let StoreContext;\n+ let TreeContextController;\n+\n+ beforeEach(() => {\n+ utils = require('.\/utils');\n+ utils.beforeEachProfiling();\n+\n+ bridge = global.bridge;\n+ store = global.store;\n+ store.collapseNodesByDefault = false;\n+\n+ React = require('react');\n+ ReactDOM = require('react-dom');\n+ TestRenderer = utils.requireTestRenderer();\n+\n+ BridgeContext = require('src\/devtools\/views\/context').BridgeContext;\n+ OwnersListContext = require('src\/devtools\/views\/Components\/OwnersListContext')\n+ .OwnersListContext;\n+ OwnersListContextController = require('src\/devtools\/views\/Components\/OwnersListContext')\n+ .OwnersListContextController;\n+ StoreContext = require('src\/devtools\/views\/context').StoreContext;\n+ TreeContextController = require('src\/devtools\/views\/Components\/TreeContext')\n+ .TreeContextController;\n+ });\n+\n+ const Contexts = ({ children, defaultOwnerID = null }) => (\n+ <BridgeContext.Provider value={bridge}>\n+ <StoreContext.Provider value={store}>\n+ <TreeContextController defaultOwnerID={defaultOwnerID}>\n+ <OwnersListContextController>{children}<\/OwnersListContextController>\n+ <\/TreeContextController>\n+ <\/StoreContext.Provider>\n+ <\/BridgeContext.Provider>\n+ );\n+\n+ it('should fetch the owners list for the selected element', async done => {\n+ const Grandparent = () => <Parent \/>;\n+ const Parent = () => {\n+ return (\n+ <React.Fragment>\n+ <Child \/>\n+ <Child \/>\n+ <\/React.Fragment>\n+ );\n+ };\n+ const Child = () => null;\n+\n+ utils.act(() =>\n+ ReactDOM.render(<Grandparent \/>, document.createElement('div'))\n+ );\n+\n+ expect(store).toMatchSnapshot('mount');\n+\n+ const parent = ((store.getElementAtIndex(1): any): Element);\n+ const firstChild = ((store.getElementAtIndex(2): any): Element);\n+\n+ let didFinish = false;\n+\n+ function Suspender({ owner }) {\n+ const read = React.useContext(OwnersListContext);\n+ const owners = read(owner.id);\n+ expect(owners).toMatchSnapshot(\n+ `owners for \"${(owner && owner.displayName) || ''}\"`\n+ );\n+ didFinish = true;\n+ return null;\n+ }\n+\n+ await utils.actAsync(() =>\n+ TestRenderer.create(\n+ <Contexts defaultOwnerID={parent.id}>\n+ <React.Suspense fallback={null}>\n+ <Suspender owner={parent} \/>\n+ <\/React.Suspense>\n+ <\/Contexts>\n+ )\n+ );\n+ expect(didFinish).toBe(true);\n+\n+ didFinish = false;\n+ await utils.actAsync(() =>\n+ TestRenderer.create(\n+ <Contexts defaultOwnerID={firstChild.id}>\n+ <React.Suspense fallback={null}>\n+ <Suspender owner={firstChild} \/>\n+ <\/React.Suspense>\n+ <\/Contexts>\n+ )\n+ );\n+ expect(didFinish).toBe(true);\n+\n+ done();\n+ });\n+\n+ it('should fetch the owners list for the selected element that includes filtered components', async done => {\n+ store.componentFilters = [utils.createDisplayNameFilter('^Parent$')];\n+\n+ const Grandparent = () => <Parent \/>;\n+ const Parent = () => {\n+ return (\n+ <React.Fragment>\n+ <Child \/>\n+ <Child \/>\n+ <\/React.Fragment>\n+ );\n+ };\n+ const Child = () => null;\n+\n+ utils.act(() =>\n+ ReactDOM.render(<Grandparent \/>, document.createElement('div'))\n+ );\n+\n+ expect(store).toMatchSnapshot('mount');\n+\n+ const firstChild = ((store.getElementAtIndex(1): any): Element);\n+\n+ let didFinish = false;\n+\n+ function Suspender({ owner }) {\n+ const read = React.useContext(OwnersListContext);\n+ const owners = read(owner.id);\n+ expect(owners).toMatchSnapshot(\n+ `owners for \"${(owner && owner.displayName) || ''}\"`\n+ );\n+ didFinish = true;\n+ return null;\n+ }\n+\n+ await utils.actAsync(() =>\n+ TestRenderer.create(\n+ <Contexts defaultOwnerID={firstChild.id}>\n+ <React.Suspense fallback={null}>\n+ <Suspender owner={firstChild} \/>\n+ <\/React.Suspense>\n+ <\/Contexts>\n+ )\n+ );\n+ expect(didFinish).toBe(true);\n+\n+ done();\n+ });\n+\n+ it('should include the current element even if there are no other owners', async done => {\n+ store.componentFilters = [utils.createDisplayNameFilter('^Parent$')];\n+\n+ const Grandparent = () => <Parent \/>;\n+ const Parent = () => null;\n+\n+ utils.act(() =>\n+ ReactDOM.render(<Grandparent \/>, document.createElement('div'))\n+ );\n+\n+ expect(store).toMatchSnapshot('mount');\n+\n+ const grandparent = ((store.getElementAtIndex(0): any): Element);\n+\n+ let didFinish = false;\n+\n+ function Suspender({ owner }) {\n+ const read = React.useContext(OwnersListContext);\n+ const owners = read(owner.id);\n+ expect(owners).toMatchSnapshot(\n+ `owners for \"${(owner && owner.displayName) || ''}\"`\n+ );\n+ didFinish = true;\n+ return null;\n+ }\n+\n+ await utils.actAsync(() =>\n+ TestRenderer.create(\n+ <Contexts defaultOwnerID={grandparent.id}>\n+ <React.Suspense fallback={null}>\n+ <Suspender owner={grandparent} \/>\n+ <\/React.Suspense>\n+ <\/Contexts>\n+ )\n+ );\n+ expect(didFinish).toBe(true);\n+\n+ done();\n+ });\n+});\ndiff --git a\/src\/__tests__\/profilerContext-test.js b\/src\/__tests__\/profilerContext-test.js\nnew file mode 100644\nindex 0000000000..c06f70d039\n--- \/dev\/null\n+++ b\/src\/__tests__\/profilerContext-test.js\n@@ -0,0 +1,348 @@\n+\/\/ @flow\n+\n+import typeof ReactTestRenderer from 'react-test-renderer';\n+import type { FrontendBridge } from 'src\/bridge';\n+import type { Context } from 'src\/devtools\/views\/Profiler\/ProfilerContext';\n+import type { DispatcherContext } from 'src\/devtools\/views\/Components\/TreeContext';\n+import type Store from 'src\/devtools\/store';\n+\n+describe('ProfilerContext', () => {\n+ let React;\n+ let ReactDOM;\n+ let TestRenderer: ReactTestRenderer;\n+ let bridge: FrontendBridge;\n+ let store: Store;\n+ let utils;\n+\n+ let BridgeContext;\n+ let ProfilerContext;\n+ let ProfilerContextController;\n+ let StoreContext;\n+ let TreeContextController;\n+ let TreeDispatcherContext;\n+ let TreeStateContext;\n+\n+ beforeEach(() => {\n+ utils = require('.\/utils');\n+ utils.beforeEachProfiling();\n+\n+ bridge = global.bridge;\n+ store = global.store;\n+ store.collapseNodesByDefault = false;\n+ store.recordChangeDescriptions = true;\n+\n+ React = require('react');\n+ ReactDOM = require('react-dom');\n+ TestRenderer = utils.requireTestRenderer();\n+\n+ BridgeContext = require('src\/devtools\/views\/context').BridgeContext;\n+ ProfilerContext = require('src\/devtools\/views\/Profiler\/ProfilerContext')\n+ .ProfilerContext;\n+ ProfilerContextController = require('src\/devtools\/views\/Profiler\/ProfilerContext')\n+ .ProfilerContextController;\n+ StoreContext = require('src\/devtools\/views\/context').StoreContext;\n+ TreeContextController = require('src\/devtools\/views\/Components\/TreeContext')\n+ .TreeContextController;\n+ TreeDispatcherContext = require('src\/devtools\/views\/Components\/TreeContext')\n+ .TreeDispatcherContext;\n+ TreeStateContext = require('src\/devtools\/views\/Components\/TreeContext')\n+ .TreeStateContext;\n+ });\n+\n+ const Contexts = ({\n+ children = null,\n+ defaultSelectedElementID = null,\n+ defaultSelectedElementIndex = null,\n+ }: any) => (\n+ <BridgeContext.Provider value={bridge}>\n+ <StoreContext.Provider value={store}>\n+ <TreeContextController\n+ defaultSelectedElementID={defaultSelectedElementID}\n+ defaultSelectedElementIndex={defaultSelectedElementIndex}\n+ >\n+ <ProfilerContextController>{children}<\/ProfilerContextController>\n+ <\/TreeContextController>\n+ <\/StoreContext.Provider>\n+ <\/BridgeContext.Provider>\n+ );\n+\n+ it('updates updates profiling support based on the attached roots', async done => {\n+ const Component = () => null;\n+\n+ let context: Context = ((null: any): Context);\n+\n+ function ContextReader() {\n+ context = React.useContext(ProfilerContext);\n+ return null;\n+ }\n+ await utils.actAsync(() => {\n+ TestRenderer.create(\n+ <Contexts>\n+ <ContextReader \/>\n+ <\/Contexts>\n+ );\n+ });\n+\n+ expect(context.supportsProfiling).toBe(false);\n+\n+ const containerA = document.createElement('div');\n+ const containerB = document.createElement('div');\n+\n+ await utils.actAsync(() => ReactDOM.render(<Component \/>, containerA));\n+ expect(context.supportsProfiling).toBe(true);\n+\n+ await utils.actAsync(() => ReactDOM.render(<Component \/>, containerB));\n+ await utils.actAsync(() => ReactDOM.unmountComponentAtNode(containerA));\n+ expect(context.supportsProfiling).toBe(true);\n+\n+ await utils.actAsync(() => ReactDOM.unmountComponentAtNode(containerB));\n+ expect(context.supportsProfiling).toBe(false);\n+\n+ done();\n+ });\n+\n+ it('should gracefully handle an empty profiling session (with no recorded commits)', async done => {\n+ const Example = () => null;\n+\n+ utils.act(() =>\n+ ReactDOM.render(<Example \/>, document.createElement('div'))\n+ );\n+\n+ let context: Context = ((null: any): Context);\n+\n+ function ContextReader() {\n+ context = React.useContext(ProfilerContext);\n+ return null;\n+ }\n+\n+ \/\/ Profile but don't record any updates.\n+ await utils.actAsync(() => store.profilerStore.startProfiling());\n+ await utils.actAsync(() => {\n+ TestRenderer.create(\n+ <Contexts>\n+ <ContextReader \/>\n+ <\/Contexts>\n+ );\n+ });\n+ expect(context).not.toBeNull();\n+ expect(context.didRecordCommits).toBe(false);\n+ expect(context.isProcessingData).toBe(false);\n+ expect(context.isProfiling).toBe(true);\n+ expect(context.profilingData).toBe(null);\n+ await utils.actAsync(() => store.profilerStore.stopProfiling());\n+\n+ expect(context).not.toBeNull();\n+ expect(context.didRecordCommits).toBe(false);\n+ expect(context.isProcessingData).toBe(false);\n+ expect(context.isProfiling).toBe(false);\n+ expect(context.profilingData).not.toBe(null);\n+\n+ done();\n+ });\n+\n+ it('should auto-select the root ID matching the Components tab selection if it has profiling data', async done => {\n+ const Parent = () => <Child \/>;\n+ const Child = () => null;\n+\n+ const containerOne = document.createElement('div');\n+ const containerTwo = document.createElement('div');\n+ utils.act(() => ReactDOM.render(<Parent \/>, containerOne));\n+ utils.act(() => ReactDOM.render(<Parent \/>, containerTwo));\n+ expect(store).toMatchSnapshot('mounted');\n+\n+ \/\/ Profile and record updates to both roots.\n+ await utils.actAsync(() => store.profilerStore.startProfiling());\n+ await utils.actAsync(() => ReactDOM.render(<Parent \/>, containerOne));\n+ await utils.actAsync(() => ReactDOM.render(<Parent \/>, containerTwo));\n+ await utils.actAsync(() => store.profilerStore.stopProfiling());\n+\n+ let context: Context = ((null: any): Context);\n+ function ContextReader() {\n+ context = React.useContext(ProfilerContext);\n+ return null;\n+ }\n+\n+ \/\/ Select an element within the second root.\n+ await utils.actAsync(() =>\n+ TestRenderer.create(\n+ <Contexts\n+ defaultSelectedElementID={store.getElementIDAtIndex(3)}\n+ defaultSelectedElementIndex={3}\n+ >\n+ <ContextReader \/>\n+ <\/Contexts>\n+ )\n+ );\n+\n+ expect(context).not.toBeNull();\n+ expect(context.rootID).toBe(\n+ store.getRootIDForElement(((store.getElementIDAtIndex(3): any): number))\n+ );\n+\n+ done();\n+ });\n+\n+ it('should not select the root ID matching the Components tab selection if it has no profiling data', async done => {\n+ const Parent = () => <Child \/>;\n+ const Child = () => null;\n+\n+ const containerOne = document.createElement('div');\n+ const containerTwo = document.createElement('div');\n+ utils.act(() => ReactDOM.render(<Parent \/>, containerOne));\n+ utils.act(() => ReactDOM.render(<Parent \/>, containerTwo));\n+ expect(store).toMatchSnapshot('mounted');\n+\n+ \/\/ Profile and record updates to only the first root.\n+ await utils.actAsync(() => store.profilerStore.startProfiling());\n+ await utils.actAsync(() => ReactDOM.render(<Parent \/>, containerOne));\n+ await utils.actAsync(() => store.profilerStore.stopProfiling());\n+\n+ let context: Context = ((null: any): Context);\n+ function ContextReader() {\n+ context = React.useContext(ProfilerContext);\n+ return null;\n+ }\n+\n+ \/\/ Select an element within the second root.\n+ await utils.actAsync(() =>\n+ TestRenderer.create(\n+ <Contexts\n+ defaultSelectedElementID={store.getElementIDAtIndex(3)}\n+ defaultSelectedElementIndex={3}\n+ >\n+ <ContextReader \/>\n+ <\/Contexts>\n+ )\n+ );\n+\n+ \/\/ Verify the default profiling root is the first one.\n+ expect(context).not.toBeNull();\n+ expect(context.rootID).toBe(\n+ store.getRootIDForElement(((store.getElementIDAtIndex(0): any): number))\n+ );\n+\n+ done();\n+ });\n+\n+ it('should maintain root selection between profiling sessions so long as there is data for that root', async done => {\n+ const Parent = () => <Child \/>;\n+ const Child = () => null;\n+\n+ const containerA = document.createElement('div');\n+ const containerB = document.createElement('div');\n+ utils.act(() => ReactDOM.render(<Parent \/>, containerA));\n+ utils.act(() => ReactDOM.render(<Parent \/>, containerB));\n+ expect(store).toMatchSnapshot('mounted');\n+\n+ \/\/ Profile and record updates.\n+ await utils.actAsync(() => store.profilerStore.startProfiling());\n+ await utils.actAsync(() => ReactDOM.render(<Parent \/>, containerA));\n+ await utils.actAsync(() => ReactDOM.render(<Parent \/>, containerB));\n+ await utils.actAsync(() => store.profilerStore.stopProfiling());\n+\n+ let context: Context = ((null: any): Context);\n+ let dispatch: DispatcherContext = ((null: any): DispatcherContext);\n+ let selectedElementID = null;\n+ function ContextReader() {\n+ context = React.useContext(ProfilerContext);\n+ dispatch = React.useContext(TreeDispatcherContext);\n+ selectedElementID = React.useContext(TreeStateContext).selectedElementID;\n+ return null;\n+ }\n+\n+ const id = ((store.getElementIDAtIndex(3): any): number);\n+\n+ \/\/ Select an element within the second root.\n+ await utils.actAsync(() =>\n+ TestRenderer.create(\n+ <Contexts defaultSelectedElementID={id} defaultSelectedElementIndex={3}>\n+ <ContextReader \/>\n+ <\/Contexts>\n+ )\n+ );\n+\n+ expect(selectedElementID).toBe(id);\n+\n+ \/\/ Profile and record more updates to both roots\n+ await utils.actAsync(() => store.profilerStore.startProfiling());\n+ await utils.actAsync(() => ReactDOM.render(<Parent \/>, containerA));\n+ await utils.actAsync(() => ReactDOM.render(<Parent \/>, containerB));\n+ await utils.actAsync(() => store.profilerStore.stopProfiling());\n+\n+ const otherID = ((store.getElementIDAtIndex(0): any): number);\n+\n+ \/\/ Change the selected element within a the Components tab.\n+ utils.act(() => dispatch({ type: 'SELECT_ELEMENT_AT_INDEX', payload: 0 }));\n+\n+ \/\/ Verify that the initial Profiler root selection is maintained.\n+ expect(selectedElementID).toBe(otherID);\n+ expect(context).not.toBeNull();\n+ expect(context.rootID).toBe(store.getRootIDForElement(id));\n+\n+ done();\n+ });\n+\n+ it('should sync selected element in the Components tab too, provided the element is a match', async done => {\n+ const GrandParent = ({ includeChild }) => (\n+ <Parent includeChild={includeChild} \/>\n+ );\n+ const Parent = ({ includeChild }) => (includeChild ? <Child \/> : null);\n+ const Child = () => null;\n+\n+ const container = document.createElement('div');\n+ utils.act(() =>\n+ ReactDOM.render(<GrandParent includeChild={true} \/>, container)\n+ );\n+ expect(store).toMatchSnapshot('mounted');\n+\n+ const parentID = ((store.getElementIDAtIndex(1): any): number);\n+ const childID = ((store.getElementIDAtIndex(2): any): number);\n+\n+ \/\/ Profile and record updates.\n+ await utils.actAsync(() => store.profilerStore.startProfiling());\n+ await utils.actAsync(() =>\n+ ReactDOM.render(<GrandParent includeChild={true} \/>, container)\n+ );\n+ await utils.actAsync(() =>\n+ ReactDOM.render(<GrandParent includeChild={false} \/>, container)\n+ );\n+ await utils.actAsync(() => store.profilerStore.stopProfiling());\n+\n+ expect(store).toMatchSnapshot('updated');\n+\n+ let context: Context = ((null: any): Context);\n+ let selectedElementID = null;\n+ function ContextReader() {\n+ context = React.useContext(ProfilerContext);\n+ selectedElementID = React.useContext(TreeStateContext).selectedElementID;\n+ return null;\n+ }\n+\n+ await utils.actAsync(() =>\n+ TestRenderer.create(\n+ <Contexts>\n+ <ContextReader \/>\n+ <\/Contexts>\n+ )\n+ );\n+ expect(selectedElementID).toBeNull();\n+\n+ \/\/ Select an element in the Profiler tab and verify that the selection is synced to the Components tab.\n+ await utils.actAsync(() => context.selectFiber(parentID, 'Parent'));\n+ expect(selectedElementID).toBe(parentID);\n+\n+ \/\/ We expect a \"no element found\" warning.\n+ \/\/ Let's hide it from the test console though.\n+ spyOn(console, 'warn');\n+\n+ \/\/ Select an unmounted element and verify no Components tab selection doesn't change.\n+ await utils.actAsync(() => context.selectFiber(childID, 'Child'));\n+ expect(selectedElementID).toBe(parentID);\n+\n+ expect(console.warn).toHaveBeenCalledWith(\n+ `No element found with id \"${childID}\"`\n+ );\n+\n+ done();\n+ });\n+});\ndiff --git a\/src\/__tests__\/profilerStore-test.js b\/src\/__tests__\/profilerStore-test.js\nnew file mode 100644\nindex 0000000000..0f4074f165\n--- \/dev\/null\n+++ b\/src\/__tests__\/profilerStore-test.js\n@@ -0,0 +1,75 @@\n+\/\/ @flow\n+\n+import type Store from 'src\/devtools\/store';\n+\n+describe('ProfilerStore', () => {\n+ let React;\n+ let ReactDOM;\n+ let store: Store;\n+ let utils;\n+\n+ beforeEach(() => {\n+ utils = require('.\/utils');\n+ utils.beforeEachProfiling();\n+\n+ store = global.store;\n+ store.collapseNodesByDefault = false;\n+ store.recordChangeDescriptions = true;\n+\n+ React = require('react');\n+ ReactDOM = require('react-dom');\n+ });\n+\n+ it('should not remove profiling data when roots are unmounted', async () => {\n+ const Parent = ({ count }) =>\n+ new Array(count)\n+ .fill(true)\n+ .map((_, index) => <Child key={index} duration={index} \/>);\n+ const Child = () => <div>Hi!<\/div>;\n+\n+ const containerA = document.createElement('div');\n+ const containerB = document.createElement('div');\n+\n+ utils.act(() => {\n+ ReactDOM.render(<Parent key=\"A\" count={3} \/>, containerA);\n+ ReactDOM.render(<Parent key=\"B\" count={2} \/>, containerB);\n+ });\n+\n+ utils.act(() => store.profilerStore.startProfiling());\n+\n+ utils.act(() => {\n+ ReactDOM.render(<Parent key=\"A\" count={4} \/>, containerA);\n+ ReactDOM.render(<Parent key=\"B\" count={1} \/>, containerB);\n+ });\n+\n+ utils.act(() => store.profilerStore.stopProfiling());\n+\n+ const rootA = store.roots[0];\n+ const rootB = store.roots[1];\n+\n+ utils.act(() => ReactDOM.unmountComponentAtNode(containerB));\n+\n+ expect(store.profilerStore.getDataForRoot(rootA)).not.toBeNull();\n+\n+ utils.act(() => ReactDOM.unmountComponentAtNode(containerA));\n+\n+ expect(store.profilerStore.getDataForRoot(rootB)).not.toBeNull();\n+ });\n+\n+ it('should not allow new\/saved profiling data to be set while profiling is in progress', () => {\n+ utils.act(() => store.profilerStore.startProfiling());\n+ const fauxProfilingData = {\n+ dataForRoots: new Map(),\n+ };\n+ spyOn(console, 'warn');\n+ store.profilerStore.profilingData = fauxProfilingData;\n+ expect(store.profilerStore.profilingData).not.toBe(fauxProfilingData);\n+ expect(console.warn).toHaveBeenCalledTimes(1);\n+ expect(console.warn).toHaveBeenCalledWith(\n+ 'Profiling data cannot be updated while profiling is in progress.'\n+ );\n+ utils.act(() => store.profilerStore.stopProfiling());\n+ store.profilerStore.profilingData = fauxProfilingData;\n+ expect(store.profilerStore.profilingData).toBe(fauxProfilingData);\n+ });\n+});\ndiff --git a\/src\/__tests__\/profilingCache-test.js b\/src\/__tests__\/profilingCache-test.js\nnew file mode 100644\nindex 0000000000..6f6e4742cd\n--- \/dev\/null\n+++ b\/src\/__tests__\/profilingCache-test.js\n@@ -0,0 +1,569 @@\n+\/\/ @flow\n+\n+import typeof ReactTestRenderer from 'react-test-renderer';\n+import type { FrontendBridge } from 'src\/bridge';\n+import type Store from 'src\/devtools\/store';\n+\n+describe('ProfilingCache', () => {\n+ let PropTypes;\n+ let React;\n+ let ReactDOM;\n+ let Scheduler;\n+ let SchedulerTracing;\n+ let TestRenderer: ReactTestRenderer;\n+ let bridge: FrontendBridge;\n+ let store: Store;\n+ let utils;\n+\n+ beforeEach(() => {\n+ utils = require('.\/utils');\n+ utils.beforeEachProfiling();\n+\n+ bridge = global.bridge;\n+ store = global.store;\n+ store.collapseNodesByDefault = false;\n+ store.recordChangeDescriptions = true;\n+\n+ PropTypes = require('prop-types');\n+ React = require('react');\n+ ReactDOM = require('react-dom');\n+ Scheduler = require('scheduler');\n+ SchedulerTracing = require('scheduler\/tracing');\n+ TestRenderer = utils.requireTestRenderer();\n+ });\n+\n+ it('should collect data for each root (including ones added or mounted after profiling started)', () => {\n+ const Parent = ({ count }) => {\n+ Scheduler.unstable_advanceTime(10);\n+ const children = new Array(count)\n+ .fill(true)\n+ .map((_, index) => <Child key={index} duration={index} \/>);\n+ return (\n+ <React.Fragment>\n+ {children}\n+ <MemoizedChild duration={1} \/>\n+ <\/React.Fragment>\n+ );\n+ };\n+ const Child = ({ duration }) => {\n+ Scheduler.unstable_advanceTime(duration);\n+ return null;\n+ };\n+ const MemoizedChild = React.memo(Child);\n+\n+ const containerA = document.createElement('div');\n+ const containerB = document.createElement('div');\n+ const containerC = document.createElement('div');\n+\n+ utils.act(() => ReactDOM.render(<Parent count={2} \/>, containerA));\n+ utils.act(() => ReactDOM.render(<Parent count={1} \/>, containerB));\n+ utils.act(() => store.profilerStore.startProfiling());\n+ utils.act(() => ReactDOM.render(<Parent count={3} \/>, containerA));\n+ utils.act(() => ReactDOM.render(<Parent count={1} \/>, containerC));\n+ utils.act(() => ReactDOM.render(<Parent count={1} \/>, containerA));\n+ utils.act(() => ReactDOM.unmountComponentAtNode(containerB));\n+ utils.act(() => ReactDOM.render(<Parent count={0} \/>, containerA));\n+ utils.act(() => store.profilerStore.stopProfiling());\n+\n+ let allProfilingDataForRoots = [];\n+\n+ function Validator({ previousProfilingDataForRoot, rootID }) {\n+ const profilingDataForRoot = store.profilerStore.getDataForRoot(rootID);\n+ if (previousProfilingDataForRoot != null) {\n+ expect(profilingDataForRoot).toEqual(previousProfilingDataForRoot);\n+ } else {\n+ expect(profilingDataForRoot).toMatchSnapshot(\n+ `Data for root ${profilingDataForRoot.displayName}`\n+ );\n+ }\n+ allProfilingDataForRoots.push(profilingDataForRoot);\n+ return null;\n+ }\n+\n+ const dataForRoots =\n+ store.profilerStore.profilingData !== null\n+ ? store.profilerStore.profilingData.dataForRoots\n+ : null;\n+\n+ expect(dataForRoots).not.toBeNull();\n+\n+ if (dataForRoots !== null) {\n+ dataForRoots.forEach(dataForRoot => {\n+ utils.act(() =>\n+ TestRenderer.create(\n+ <Validator\n+ previousProfilingDataForRoot={null}\n+ rootID={dataForRoot.rootID}\n+ \/>\n+ )\n+ );\n+ });\n+ }\n+\n+ expect(allProfilingDataForRoots).toHaveLength(3);\n+\n+ utils.exportImportHelper(bridge, store);\n+\n+ allProfilingDataForRoots.forEach(profilingDataForRoot => {\n+ utils.act(() =>\n+ TestRenderer.create(\n+ <Validator\n+ previousProfilingDataForRoot={profilingDataForRoot}\n+ rootID={profilingDataForRoot.rootID}\n+ \/>\n+ )\n+ );\n+ });\n+ });\n+\n+ it('should collect data for each commit', () => {\n+ const Parent = ({ count }) => {\n+ Scheduler.unstable_advanceTime(10);\n+ const children = new Array(count)\n+ .fill(true)\n+ .map((_, index) => <Child key={index} duration={index} \/>);\n+ return (\n+ <React.Fragment>\n+ {children}\n+ <MemoizedChild duration={1} \/>\n+ <\/React.Fragment>\n+ );\n+ };\n+ const Child = ({ duration }) => {\n+ Scheduler.unstable_advanceTime(duration);\n+ return null;\n+ };\n+ const MemoizedChild = React.memo(Child);\n+\n+ const container = document.createElement('div');\n+\n+ utils.act(() => store.profilerStore.startProfiling());\n+ utils.act(() => ReactDOM.render(<Parent count={2} \/>, container));\n+ utils.act(() => ReactDOM.render(<Parent count={3} \/>, container));\n+ utils.act(() => ReactDOM.render(<Parent count={1} \/>, container));\n+ utils.act(() => ReactDOM.render(<Parent count={0} \/>, container));\n+ utils.act(() => store.profilerStore.stopProfiling());\n+\n+ const allCommitData = [];\n+\n+ function Validator({ commitIndex, previousCommitDetails, rootID }) {\n+ const commitData = store.profilerStore.getCommitData(rootID, commitIndex);\n+ if (previousCommitDetails != null) {\n+ expect(commitData).toEqual(previousCommitDetails);\n+ } else {\n+ allCommitData.push(commitData);\n+ expect(commitData).toMatchSnapshot(\n+ `CommitDetails commitIndex: ${commitIndex}`\n+ );\n+ }\n+ return null;\n+ }\n+\n+ const rootID = store.roots[0];\n+\n+ for (let commitIndex = 0; commitIndex < 4; commitIndex++) {\n+ utils.act(() => {\n+ TestRenderer.create(\n+ <Validator\n+ commitIndex={commitIndex}\n+ previousCommitDetails={null}\n+ rootID={rootID}\n+ \/>\n+ );\n+ });\n+ }\n+\n+ expect(allCommitData).toHaveLength(4);\n+\n+ utils.exportImportHelper(bridge, store);\n+\n+ for (let commitIndex = 0; commitIndex < 4; commitIndex++) {\n+ utils.act(() => {\n+ TestRenderer.create(\n+ <Validator\n+ commitIndex={commitIndex}\n+ previousCommitDetails={allCommitData[commitIndex]}\n+ rootID={rootID}\n+ \/>\n+ );\n+ });\n+ }\n+ });\n+\n+ it('should record changed props\/state\/context\/hooks', () => {\n+ let instance = null;\n+\n+ const ModernContext = React.createContext(0);\n+\n+ class LegacyContextProvider extends React.Component<\n+ any,\n+ {| count: number |}\n+ > {\n+ static childContextTypes = {\n+ count: PropTypes.number,\n+ };\n+ state = { count: 0 };\n+ getChildContext() {\n+ return this.state;\n+ }\n+ render() {\n+ instance = this;\n+ return (\n+ <ModernContext.Provider value={this.state.count}>\n+ <React.Fragment>\n+ <ModernContextConsumer \/>\n+ <LegacyContextConsumer \/>\n+ <\/React.Fragment>\n+ <\/ModernContext.Provider>\n+ );\n+ }\n+ }\n+\n+ const FunctionComponentWithHooks = ({ count }) => {\n+ React.useMemo(() => count, [count]);\n+ return null;\n+ };\n+\n+ class ModernContextConsumer extends React.Component<any> {\n+ static contextType = ModernContext;\n+ render() {\n+ return <FunctionComponentWithHooks count={this.context} \/>;\n+ }\n+ }\n+\n+ class LegacyContextConsumer extends React.Component<any> {\n+ static contextTypes = {\n+ count: PropTypes.number,\n+ };\n+ render() {\n+ return <FunctionComponentWithHooks count={this.context.count} \/>;\n+ }\n+ }\n+\n+ const container = document.createElement('div');\n+\n+ utils.act(() => store.profilerStore.startProfiling());\n+ utils.act(() => ReactDOM.render(<LegacyContextProvider \/>, container));\n+ expect(instance).not.toBeNull();\n+ utils.act(() => (instance: any).setState({ count: 1 }));\n+ utils.act(() =>\n+ ReactDOM.render(<LegacyContextProvider foo={123} \/>, container)\n+ );\n+ utils.act(() =>\n+ ReactDOM.render(<LegacyContextProvider bar=\"abc\" \/>, container)\n+ );\n+ utils.act(() => ReactDOM.render(<LegacyContextProvider \/>, container));\n+ utils.act(() => store.profilerStore.stopProfiling());\n+\n+ const allCommitData = [];\n+\n+ function Validator({ commitIndex, previousCommitDetails, rootID }) {\n+ const commitData = store.profilerStore.getCommitData(rootID, commitIndex);\n+ if (previousCommitDetails != null) {\n+ expect(commitData).toEqual(previousCommitDetails);\n+ } else {\n+ allCommitData.push(commitData);\n+ expect(commitData).toMatchSnapshot(\n+ `CommitDetails commitIndex: ${commitIndex}`\n+ );\n+ }\n+ return null;\n+ }\n+\n+ const rootID = store.roots[0];\n+\n+ for (let commitIndex = 0; commitIndex < 5; commitIndex++) {\n+ utils.act(() => {\n+ TestRenderer.create(\n+ <Validator\n+ commitIndex={commitIndex}\n+ previousCommitDetails={null}\n+ rootID={rootID}\n+ \/>\n+ );\n+ });\n+ }\n+\n+ expect(allCommitData).toHaveLength(5);\n+\n+ utils.exportImportHelper(bridge, store);\n+\n+ for (let commitIndex = 0; commitIndex < 5; commitIndex++) {\n+ utils.act(() => {\n+ TestRenderer.create(\n+ <Validator\n+ commitIndex={commitIndex}\n+ previousCommitDetails={allCommitData[commitIndex]}\n+ rootID={rootID}\n+ \/>\n+ );\n+ });\n+ }\n+ });\n+\n+ it('should calculate a self duration based on actual children (not filtered children)', () => {\n+ store.componentFilters = [utils.createDisplayNameFilter('^Parent$')];\n+\n+ const Grandparent = () => {\n+ Scheduler.unstable_advanceTime(10);\n+ return (\n+ <React.Fragment>\n+ <Parent key=\"one\" \/>\n+ <Parent key=\"two\" \/>\n+ <\/React.Fragment>\n+ );\n+ };\n+ const Parent = () => {\n+ Scheduler.unstable_advanceTime(2);\n+ return <Child \/>;\n+ };\n+ const Child = () => {\n+ Scheduler.unstable_advanceTime(1);\n+ return null;\n+ };\n+\n+ utils.act(() => store.profilerStore.startProfiling());\n+ utils.act(() =>\n+ ReactDOM.render(<Grandparent \/>, document.createElement('div'))\n+ );\n+ utils.act(() => store.profilerStore.stopProfiling());\n+\n+ let commitData = null;\n+\n+ function Validator({ commitIndex, rootID }) {\n+ commitData = store.profilerStore.getCommitData(rootID, commitIndex);\n+ expect(commitData).toMatchSnapshot(\n+ `CommitDetails with filtered self durations`\n+ );\n+ return null;\n+ }\n+\n+ const rootID = store.roots[0];\n+\n+ utils.act(() => {\n+ TestRenderer.create(<Validator commitIndex={0} rootID={rootID} \/>);\n+ });\n+\n+ expect(commitData).not.toBeNull();\n+ });\n+\n+ it('should calculate self duration correctly for suspended views', async done => {\n+ let data;\n+ const getData = () => {\n+ if (data) {\n+ return data;\n+ } else {\n+ throw new Promise(resolve => {\n+ data = 'abc';\n+ resolve(data);\n+ });\n+ }\n+ };\n+\n+ const Parent = () => {\n+ Scheduler.unstable_advanceTime(10);\n+ return (\n+ <React.Suspense fallback={<Fallback \/>}>\n+ <Async \/>\n+ <\/React.Suspense>\n+ );\n+ };\n+ const Fallback = () => {\n+ Scheduler.unstable_advanceTime(2);\n+ return 'Fallback...';\n+ };\n+ const Async = () => {\n+ Scheduler.unstable_advanceTime(3);\n+ const data = getData();\n+ return data;\n+ };\n+\n+ utils.act(() => store.profilerStore.startProfiling());\n+ await utils.actAsync(() =>\n+ ReactDOM.render(<Parent \/>, document.createElement('div'))\n+ );\n+ utils.act(() => store.profilerStore.stopProfiling());\n+\n+ const allCommitData = [];\n+\n+ function Validator({ commitIndex, rootID }) {\n+ const commitData = store.profilerStore.getCommitData(rootID, commitIndex);\n+ allCommitData.push(commitData);\n+ expect(commitData).toMatchSnapshot(\n+ `CommitDetails with filtered self durations`\n+ );\n+ return null;\n+ }\n+\n+ const rootID = store.roots[0];\n+\n+ for (let commitIndex = 0; commitIndex < 2; commitIndex++) {\n+ utils.act(() => {\n+ TestRenderer.create(\n+ <Validator commitIndex={commitIndex} rootID={rootID} \/>\n+ );\n+ });\n+ }\n+\n+ expect(allCommitData).toHaveLength(2);\n+\n+ done();\n+ });\n+\n+ it('should collect data for each rendered fiber', () => {\n+ const Parent = ({ count }) => {\n+ Scheduler.unstable_advanceTime(10);\n+ const children = new Array(count)\n+ .fill(true)\n+ .map((_, index) => <Child key={index} duration={index} \/>);\n+ return (\n+ <React.Fragment>\n+ {children}\n+ <MemoizedChild duration={1} \/>\n+ <\/React.Fragment>\n+ );\n+ };\n+ const Child = ({ duration }) => {\n+ Scheduler.unstable_advanceTime(duration);\n+ return null;\n+ };\n+ const MemoizedChild = React.memo(Child);\n+\n+ const container = document.createElement('div');\n+\n+ utils.act(() => store.profilerStore.startProfiling());\n+ utils.act(() => ReactDOM.render(<Parent count={1} \/>, container));\n+ utils.act(() => ReactDOM.render(<Parent count={2} \/>, container));\n+ utils.act(() => ReactDOM.render(<Parent count={3} \/>, container));\n+ utils.act(() => store.profilerStore.stopProfiling());\n+\n+ const allFiberCommits = [];\n+\n+ function Validator({ fiberID, previousFiberCommits, rootID }) {\n+ const fiberCommits = store.profilerStore.profilingCache.getFiberCommits({\n+ fiberID,\n+ rootID,\n+ });\n+ if (previousFiberCommits != null) {\n+ expect(fiberCommits).toEqual(previousFiberCommits);\n+ } else {\n+ allFiberCommits.push(fiberCommits);\n+ expect(fiberCommits).toMatchSnapshot(\n+ `FiberCommits: element ${fiberID}`\n+ );\n+ }\n+ return null;\n+ }\n+\n+ const rootID = store.roots[0];\n+\n+ for (let index = 0; index < store.numElements; index++) {\n+ utils.act(() => {\n+ const fiberID = store.getElementIDAtIndex(index);\n+ if (fiberID == null) {\n+ throw Error(`Unexpected null ID for element at index ${index}`);\n+ }\n+ TestRenderer.create(\n+ <Validator\n+ fiberID={fiberID}\n+ previousFiberCommits={null}\n+ rootID={rootID}\n+ \/>\n+ );\n+ });\n+ }\n+\n+ expect(allFiberCommits).toHaveLength(store.numElements);\n+\n+ utils.exportImportHelper(bridge, store);\n+\n+ for (let index = 0; index < store.numElements; index++) {\n+ utils.act(() => {\n+ const fiberID = store.getElementIDAtIndex(index);\n+ if (fiberID == null) {\n+ throw Error(`Unexpected null ID for element at index ${index}`);\n+ }\n+ TestRenderer.create(\n+ <Validator\n+ fiberID={fiberID}\n+ previousFiberCommits={allFiberCommits[index]}\n+ rootID={rootID}\n+ \/>\n+ );\n+ });\n+ }\n+ });\n+\n+ it('should report every traced interaction', () => {\n+ const Parent = ({ count }) => {\n+ Scheduler.unstable_advanceTime(10);\n+ const children = new Array(count)\n+ .fill(true)\n+ .map((_, index) => <Child key={index} duration={index} \/>);\n+ return (\n+ <React.Fragment>\n+ {children}\n+ <MemoizedChild duration={1} \/>\n+ <\/React.Fragment>\n+ );\n+ };\n+ const Child = ({ duration }) => {\n+ Scheduler.unstable_advanceTime(duration);\n+ return null;\n+ };\n+ const MemoizedChild = React.memo(Child);\n+\n+ const container = document.createElement('div');\n+\n+ utils.act(() => store.profilerStore.startProfiling());\n+ utils.act(() =>\n+ SchedulerTracing.unstable_trace(\n+ 'mount: one child',\n+ Scheduler.unstable_now(),\n+ () => ReactDOM.render(<Parent count={1} \/>, container)\n+ )\n+ );\n+ utils.act(() =>\n+ SchedulerTracing.unstable_trace(\n+ 'update: two children',\n+ Scheduler.unstable_now(),\n+ () => ReactDOM.render(<Parent count={2} \/>, container)\n+ )\n+ );\n+ utils.act(() => store.profilerStore.stopProfiling());\n+\n+ let interactions = null;\n+\n+ function Validator({ previousInteractions, rootID }) {\n+ interactions = store.profilerStore.profilingCache.getInteractionsChartData(\n+ {\n+ rootID,\n+ }\n+ ).interactions;\n+ if (previousInteractions != null) {\n+ expect(interactions).toEqual(previousInteractions);\n+ } else {\n+ expect(interactions).toMatchSnapshot('Interactions');\n+ }\n+ return null;\n+ }\n+\n+ const rootID = store.roots[0];\n+\n+ utils.act(() =>\n+ TestRenderer.create(\n+ <Validator previousInteractions={null} rootID={rootID} \/>\n+ )\n+ );\n+\n+ expect(interactions).not.toBeNull();\n+\n+ utils.exportImportHelper(bridge, store);\n+\n+ utils.act(() =>\n+ TestRenderer.create(\n+ <Validator previousInteractions={interactions} rootID={rootID} \/>\n+ )\n+ );\n+ });\n+});\ndiff --git a\/src\/__tests__\/profilingCharts-test.js b\/src\/__tests__\/profilingCharts-test.js\nnew file mode 100644\nindex 0000000000..0e7fff951e\n--- \/dev\/null\n+++ b\/src\/__tests__\/profilingCharts-test.js\n@@ -0,0 +1,242 @@\n+\/\/ @flow\n+\n+import typeof TestRendererType from 'react-test-renderer';\n+import type Store from 'src\/devtools\/store';\n+\n+describe('profiling charts', () => {\n+ let React;\n+ let ReactDOM;\n+ let Scheduler;\n+ let SchedulerTracing;\n+ let TestRenderer: TestRendererType;\n+ let store: Store;\n+ let utils;\n+\n+ beforeEach(() => {\n+ utils = require('.\/utils');\n+ utils.beforeEachProfiling();\n+\n+ store = global.store;\n+ store.collapseNodesByDefault = false;\n+ store.recordChangeDescriptions = true;\n+\n+ React = require('react');\n+ ReactDOM = require('react-dom');\n+ Scheduler = require('scheduler');\n+ SchedulerTracing = require('scheduler\/tracing');\n+ TestRenderer = utils.requireTestRenderer();\n+ });\n+\n+ describe('flamegraph chart', () => {\n+ it('should contain valid data', () => {\n+ const Parent = (_: {||}) => {\n+ Scheduler.unstable_advanceTime(10);\n+ return (\n+ <React.Fragment>\n+ <Child key=\"first\" duration={3} \/>\n+ <Child key=\"second\" duration={2} \/>\n+ <Child key=\"third\" duration={0} \/>\n+ <\/React.Fragment>\n+ );\n+ };\n+\n+ \/\/ Memoize children to verify that chart doesn't include in the update.\n+ const Child = React.memo(function Child({ duration }) {\n+ Scheduler.unstable_advanceTime(duration);\n+ return null;\n+ });\n+\n+ const container = document.createElement('div');\n+\n+ utils.act(() => store.profilerStore.startProfiling());\n+ utils.act(() =>\n+ SchedulerTracing.unstable_trace('mount', Scheduler.unstable_now(), () =>\n+ ReactDOM.render(<Parent \/>, container)\n+ )\n+ );\n+ utils.act(() =>\n+ SchedulerTracing.unstable_trace(\n+ 'update',\n+ Scheduler.unstable_now(),\n+ () => ReactDOM.render(<Parent \/>, container)\n+ )\n+ );\n+ utils.act(() => store.profilerStore.stopProfiling());\n+\n+ let renderFinished = false;\n+\n+ function Validator({ commitIndex, rootID }) {\n+ const commitTree = store.profilerStore.profilingCache.getCommitTree({\n+ commitIndex,\n+ rootID,\n+ });\n+ const chartData = store.profilerStore.profilingCache.getFlamegraphChartData(\n+ {\n+ commitIndex,\n+ commitTree,\n+ rootID,\n+ }\n+ );\n+ expect(commitTree).toMatchSnapshot(`${commitIndex}: CommitTree`);\n+ expect(chartData).toMatchSnapshot(\n+ `${commitIndex}: FlamegraphChartData`\n+ );\n+ renderFinished = true;\n+ return null;\n+ }\n+\n+ const rootID = store.roots[0];\n+\n+ for (let commitIndex = 0; commitIndex < 2; commitIndex++) {\n+ renderFinished = false;\n+\n+ utils.act(() => {\n+ TestRenderer.create(\n+ <Validator commitIndex={commitIndex} rootID={rootID} \/>\n+ );\n+ });\n+\n+ expect(renderFinished).toBe(true);\n+ }\n+\n+ expect(renderFinished).toBe(true);\n+ });\n+ });\n+\n+ describe('ranked chart', () => {\n+ it('should contain valid data', () => {\n+ const Parent = (_: {||}) => {\n+ Scheduler.unstable_advanceTime(10);\n+ return (\n+ <React.Fragment>\n+ <Child key=\"first\" duration={3} \/>\n+ <Child key=\"second\" duration={2} \/>\n+ <Child key=\"third\" duration={0} \/>\n+ <\/React.Fragment>\n+ );\n+ };\n+\n+ \/\/ Memoize children to verify that chart doesn't include in the update.\n+ const Child = React.memo(function Child({ duration }) {\n+ Scheduler.unstable_advanceTime(duration);\n+ return null;\n+ });\n+\n+ const container = document.createElement('div');\n+\n+ utils.act(() => store.profilerStore.startProfiling());\n+ utils.act(() =>\n+ SchedulerTracing.unstable_trace('mount', Scheduler.unstable_now(), () =>\n+ ReactDOM.render(<Parent \/>, container)\n+ )\n+ );\n+ utils.act(() =>\n+ SchedulerTracing.unstable_trace(\n+ 'update',\n+ Scheduler.unstable_now(),\n+ () => ReactDOM.render(<Parent \/>, container)\n+ )\n+ );\n+ utils.act(() => store.profilerStore.stopProfiling());\n+\n+ let renderFinished = false;\n+\n+ function Validator({ commitIndex, rootID }) {\n+ const commitTree = store.profilerStore.profilingCache.getCommitTree({\n+ commitIndex,\n+ rootID,\n+ });\n+ const chartData = store.profilerStore.profilingCache.getRankedChartData(\n+ {\n+ commitIndex,\n+ commitTree,\n+ rootID,\n+ }\n+ );\n+ expect(commitTree).toMatchSnapshot(`${commitIndex}: CommitTree`);\n+ expect(chartData).toMatchSnapshot(`${commitIndex}: RankedChartData`);\n+ renderFinished = true;\n+ return null;\n+ }\n+\n+ const rootID = store.roots[0];\n+\n+ for (let commitIndex = 0; commitIndex < 2; commitIndex++) {\n+ renderFinished = false;\n+\n+ utils.act(() => {\n+ TestRenderer.create(\n+ <Validator commitIndex={commitIndex} rootID={rootID} \/>\n+ );\n+ });\n+\n+ expect(renderFinished).toBe(true);\n+ }\n+ });\n+ });\n+\n+ describe('interactions', () => {\n+ it('should contain valid data', () => {\n+ const Parent = (_: {||}) => {\n+ Scheduler.unstable_advanceTime(10);\n+ return (\n+ <React.Fragment>\n+ <Child key=\"first\" duration={3} \/>\n+ <Child key=\"second\" duration={2} \/>\n+ <Child key=\"third\" duration={0} \/>\n+ <\/React.Fragment>\n+ );\n+ };\n+\n+ \/\/ Memoize children to verify that chart doesn't include in the update.\n+ const Child = React.memo(function Child({ duration }) {\n+ Scheduler.unstable_advanceTime(duration);\n+ return null;\n+ });\n+\n+ const container = document.createElement('div');\n+\n+ utils.act(() => store.profilerStore.startProfiling());\n+ utils.act(() =>\n+ SchedulerTracing.unstable_trace('mount', Scheduler.unstable_now(), () =>\n+ ReactDOM.render(<Parent \/>, container)\n+ )\n+ );\n+ utils.act(() =>\n+ SchedulerTracing.unstable_trace(\n+ 'update',\n+ Scheduler.unstable_now(),\n+ () => ReactDOM.render(<Parent \/>, container)\n+ )\n+ );\n+ utils.act(() => store.profilerStore.stopProfiling());\n+\n+ let renderFinished = false;\n+\n+ function Validator({ commitIndex, rootID }) {\n+ const chartData = store.profilerStore.profilingCache.getInteractionsChartData(\n+ {\n+ rootID,\n+ }\n+ );\n+ expect(chartData).toMatchSnapshot('Interactions');\n+ renderFinished = true;\n+ return null;\n+ }\n+\n+ const rootID = store.roots[0];\n+\n+ for (let commitIndex = 0; commitIndex < 2; commitIndex++) {\n+ renderFinished = false;\n+\n+ utils.act(() => {\n+ TestRenderer.create(\n+ <Validator commitIndex={commitIndex} rootID={rootID} \/>\n+ );\n+ });\n+\n+ expect(renderFinished).toBe(true);\n+ }\n+ });\n+ });\n+});\ndiff --git a\/src\/__tests__\/profilingCommitTreeBuilder-test.js b\/src\/__tests__\/profilingCommitTreeBuilder-test.js\nnew file mode 100644\nindex 0000000000..0ef670607f\n--- \/dev\/null\n+++ b\/src\/__tests__\/profilingCommitTreeBuilder-test.js\n@@ -0,0 +1,75 @@\n+\/\/ @flow\n+\n+import typeof TestRendererType from 'react-test-renderer';\n+import type Store from 'src\/devtools\/store';\n+\n+describe('commit tree', () => {\n+ let React;\n+ let ReactDOM;\n+ let Scheduler;\n+ let TestRenderer: TestRendererType;\n+ let store: Store;\n+ let utils;\n+\n+ beforeEach(() => {\n+ utils = require('.\/utils');\n+ utils.beforeEachProfiling();\n+\n+ store = global.store;\n+ store.collapseNodesByDefault = false;\n+ store.recordChangeDescriptions = true;\n+\n+ React = require('react');\n+ ReactDOM = require('react-dom');\n+ Scheduler = require('scheduler');\n+ TestRenderer = utils.requireTestRenderer();\n+ });\n+\n+ it('should be able to rebuild the store tree for each commit', () => {\n+ const Parent = ({ count }) => {\n+ Scheduler.unstable_advanceTime(10);\n+ return new Array(count)\n+ .fill(true)\n+ .map((_, index) => <Child key={index} \/>);\n+ };\n+ const Child = React.memo(function Child() {\n+ Scheduler.unstable_advanceTime(2);\n+ return null;\n+ });\n+\n+ const container = document.createElement('div');\n+\n+ utils.act(() => store.profilerStore.startProfiling());\n+ utils.act(() => ReactDOM.render(<Parent count={1} \/>, container));\n+ utils.act(() => ReactDOM.render(<Parent count={3} \/>, container));\n+ utils.act(() => ReactDOM.render(<Parent count={2} \/>, container));\n+ utils.act(() => ReactDOM.render(<Parent count={0} \/>, container));\n+ utils.act(() => store.profilerStore.stopProfiling());\n+\n+ let renderFinished = false;\n+\n+ function Validator({ commitIndex, rootID }) {\n+ const commitTree = store.profilerStore.profilingCache.getCommitTree({\n+ commitIndex,\n+ rootID,\n+ });\n+ expect(commitTree).toMatchSnapshot(`${commitIndex}: CommitTree`);\n+ renderFinished = true;\n+ return null;\n+ }\n+\n+ const rootID = store.roots[0];\n+\n+ for (let commitIndex = 0; commitIndex < 4; commitIndex++) {\n+ renderFinished = false;\n+\n+ utils.act(() => {\n+ TestRenderer.create(\n+ <Validator commitIndex={commitIndex} rootID={rootID} \/>\n+ );\n+ });\n+\n+ expect(renderFinished).toBe(true);\n+ }\n+ });\n+});\ndiff --git a\/src\/__tests__\/profilingUtils-test.js b\/src\/__tests__\/profilingUtils-test.js\nnew file mode 100644\nindex 0000000000..66029a2568\n--- \/dev\/null\n+++ b\/src\/__tests__\/profilingUtils-test.js\n@@ -0,0 +1,20 @@\n+\/\/ @flow\n+\n+describe('profiling utils', () => {\n+ let utils;\n+\n+ beforeEach(() => {\n+ utils = require('src\/devtools\/views\/Profiler\/utils');\n+ });\n+\n+ it('should throw if importing older\/unsupported data', () => {\n+ expect(() =>\n+ utils.prepareProfilingDataFrontendFromExport(\n+ ({\n+ version: 0,\n+ dataForRoots: [],\n+ }: any)\n+ )\n+ ).toThrow('Unsupported profiler export version \"0\"');\n+ });\n+});\ndiff --git a\/src\/__tests__\/setupEnv.js b\/src\/__tests__\/setupEnv.js\nnew file mode 100644\nindex 0000000000..0198427ad9\n--- \/dev\/null\n+++ b\/src\/__tests__\/setupEnv.js\n@@ -0,0 +1,15 @@\n+\/\/ @flow\n+\n+import storage from 'local-storage-fallback';\n+\n+\/\/ In case async\/await syntax is used in a test.\n+import 'regenerator-runtime\/runtime';\n+\n+\/\/ DevTools stores preferences between sessions in localStorage\n+if (!global.hasOwnProperty('localStorage')) {\n+ global.localStorage = storage;\n+}\n+\n+\/\/ Mimic the global we set with Webpack's DefinePlugin\n+global.__DEV__ = process.env.NODE_ENV !== 'production';\n+global.__TEST__ = process.env.NODE_ENV === 'test';\ndiff --git a\/src\/__tests__\/setupTests.js b\/src\/__tests__\/setupTests.js\nnew file mode 100644\nindex 0000000000..3fb0a57a2f\n--- \/dev\/null\n+++ b\/src\/__tests__\/setupTests.js\n@@ -0,0 +1,76 @@\n+\/\/ @flow\n+\n+import type { BackendBridge, FrontendBridge } from 'src\/bridge';\n+\n+const env = jasmine.getEnv();\n+env.beforeEach(() => {\n+ \/\/ These files should be required (and re-reuired) before each test,\n+ \/\/ rather than imported at the head of the module.\n+ \/\/ That's because we reset modules between tests,\n+ \/\/ which disconnects the DevTool's cache from the current dispatcher ref.\n+ const Agent = require('src\/backend\/agent').default;\n+ const { initBackend } = require('src\/backend');\n+ const Bridge = require('src\/bridge').default;\n+ const Store = require('src\/devtools\/store').default;\n+ const { installHook } = require('src\/hook');\n+ const {\n+ getDefaultComponentFilters,\n+ saveComponentFilters,\n+ } = require('src\/utils');\n+\n+ \/\/ Fake timers let us flush Bridge operations between setup and assertions.\n+ jest.useFakeTimers();\n+\n+ const originalConsoleError = console.error;\n+ \/\/ $FlowFixMe\n+ console.error = (...args) => {\n+ if (args[0] === 'Warning: React DevTools encountered an error: %s') {\n+ \/\/ Rethrow errors from React.\n+ throw args[1];\n+ }\n+ originalConsoleError.apply(console, args);\n+ };\n+\n+ \/\/ Initialize filters to a known good state.\n+ saveComponentFilters(getDefaultComponentFilters());\n+ global.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = getDefaultComponentFilters();\n+\n+ installHook(global);\n+\n+ const bridgeListeners = [];\n+ const bridge = new Bridge({\n+ listen(callback) {\n+ bridgeListeners.push(callback);\n+ return () => {\n+ const index = bridgeListeners.indexOf(callback);\n+ if (index >= 0) {\n+ bridgeListeners.splice(index, 1);\n+ }\n+ };\n+ },\n+ send(event: string, payload: any, transferable?: Array<any>) {\n+ bridgeListeners.forEach(callback => callback({ event, payload }));\n+ },\n+ });\n+\n+ const agent = new Agent(((bridge: any): BackendBridge));\n+\n+ const hook = global.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+\n+ initBackend(hook, agent, global);\n+\n+ const store = new Store(((bridge: any): FrontendBridge));\n+\n+ global.agent = agent;\n+ global.bridge = bridge;\n+ global.store = store;\n+});\n+env.afterEach(() => {\n+ delete global.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+\n+ \/\/ It's important to reset modules between test runs;\n+ \/\/ Without this, ReactDOM won't re-inject itself into the new hook.\n+ \/\/ It's also important to reset after tests, rather than before,\n+ \/\/ so that we don't disconnect the ReactCurrentDispatcher ref.\n+ jest.resetModules();\n+});\ndiff --git a\/src\/__tests__\/store-test.js b\/src\/__tests__\/store-test.js\nnew file mode 100644\nindex 0000000000..7c273a7c31\n--- \/dev\/null\n+++ b\/src\/__tests__\/store-test.js\n@@ -0,0 +1,800 @@\n+\/\/ @flow\n+\n+describe('Store', () => {\n+ let React;\n+ let ReactDOM;\n+ let agent;\n+ let act;\n+ let getRendererID;\n+ let store;\n+\n+ beforeEach(() => {\n+ agent = global.agent;\n+ store = global.store;\n+\n+ React = require('react');\n+ ReactDOM = require('react-dom');\n+\n+ const utils = require('.\/utils');\n+ act = utils.act;\n+ getRendererID = utils.getRendererID;\n+ });\n+\n+ it('should not allow a root node to be collapsed', () => {\n+ const Component = () => <div>Hi<\/div>;\n+\n+ act(() =>\n+ ReactDOM.render(<Component count={4} \/>, document.createElement('div'))\n+ );\n+ expect(store).toMatchSnapshot('1: mount');\n+\n+ expect(store.roots).toHaveLength(1);\n+\n+ const rootID = store.roots[0];\n+\n+ expect(() => store.toggleIsCollapsed(rootID, true)).toThrow(\n+ 'Root nodes cannot be collapsed'\n+ );\n+ });\n+\n+ it('should properly handle a root with no visible nodes', () => {\n+ const Root = ({ children }) => children;\n+\n+ const container = document.createElement('div');\n+\n+ act(() => ReactDOM.render(<Root>{null}<\/Root>, container));\n+ expect(store).toMatchSnapshot('1: mount');\n+\n+ act(() => ReactDOM.render(<div \/>, container));\n+ expect(store).toMatchSnapshot('2: add host nodes');\n+ });\n+\n+ describe('collapseNodesByDefault:false', () => {\n+ beforeEach(() => {\n+ store.collapseNodesByDefault = false;\n+ });\n+\n+ it('should support mount and update operations', () => {\n+ const Grandparent = ({ count }) => (\n+ <React.Fragment>\n+ <Parent count={count} \/>\n+ <Parent count={count} \/>\n+ <\/React.Fragment>\n+ );\n+ const Parent = ({ count }) =>\n+ new Array(count).fill(true).map((_, index) => <Child key={index} \/>);\n+ const Child = () => <div>Hi!<\/div>;\n+\n+ const container = document.createElement('div');\n+\n+ act(() => ReactDOM.render(<Grandparent count={4} \/>, container));\n+ expect(store).toMatchSnapshot('1: mount');\n+\n+ act(() => ReactDOM.render(<Grandparent count={2} \/>, container));\n+ expect(store).toMatchSnapshot('2: update');\n+\n+ act(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(store).toMatchSnapshot('3: unmount');\n+ });\n+\n+ it('should support mount and update operations for multiple roots', () => {\n+ const Parent = ({ count }) =>\n+ new Array(count).fill(true).map((_, index) => <Child key={index} \/>);\n+ const Child = () => <div>Hi!<\/div>;\n+\n+ const containerA = document.createElement('div');\n+ const containerB = document.createElement('div');\n+\n+ act(() => {\n+ ReactDOM.render(<Parent key=\"A\" count={3} \/>, containerA);\n+ ReactDOM.render(<Parent key=\"B\" count={2} \/>, containerB);\n+ });\n+ expect(store).toMatchSnapshot('1: mount');\n+\n+ act(() => {\n+ ReactDOM.render(<Parent key=\"A\" count={4} \/>, containerA);\n+ ReactDOM.render(<Parent key=\"B\" count={1} \/>, containerB);\n+ });\n+ expect(store).toMatchSnapshot('2: update');\n+\n+ act(() => ReactDOM.unmountComponentAtNode(containerB));\n+ expect(store).toMatchSnapshot('3: unmount B');\n+\n+ act(() => ReactDOM.unmountComponentAtNode(containerA));\n+ expect(store).toMatchSnapshot('4: unmount A');\n+ });\n+\n+ it('should filter DOM nodes from the store tree', () => {\n+ const Grandparent = () => (\n+ <div>\n+ <div>\n+ <Parent \/>\n+ <\/div>\n+ <Parent \/>\n+ <\/div>\n+ );\n+ const Parent = () => (\n+ <div>\n+ <Child \/>\n+ <\/div>\n+ );\n+ const Child = () => <div>Hi!<\/div>;\n+\n+ act(() =>\n+ ReactDOM.render(\n+ <Grandparent count={4} \/>,\n+ document.createElement('div')\n+ )\n+ );\n+ expect(store).toMatchSnapshot('1: mount');\n+ });\n+\n+ it('should display Suspense nodes properly in various states', () => {\n+ const Loading = () => <div>Loading...<\/div>;\n+ const SuspendingComponent = () => {\n+ throw new Promise(() => {});\n+ };\n+ const Component = () => {\n+ return <div>Hello<\/div>;\n+ };\n+ const Wrapper = ({ shouldSuspense }) => (\n+ <React.Fragment>\n+ <Component key=\"Outside\" \/>\n+ <React.Suspense fallback={<Loading \/>}>\n+ {shouldSuspense ? (\n+ <SuspendingComponent \/>\n+ ) : (\n+ <Component key=\"Inside\" \/>\n+ )}\n+ <\/React.Suspense>\n+ <\/React.Fragment>\n+ );\n+\n+ const container = document.createElement('div');\n+ act(() => ReactDOM.render(<Wrapper shouldSuspense={true} \/>, container));\n+ expect(store).toMatchSnapshot('1: loading');\n+\n+ act(() => {\n+ ReactDOM.render(<Wrapper shouldSuspense={false} \/>, container);\n+ });\n+ expect(store).toMatchSnapshot('2: resolved');\n+ });\n+\n+ it('should support nested Suspense nodes', () => {\n+ const Component = () => null;\n+ const Loading = () => <div>Loading...<\/div>;\n+ const Never = () => {\n+ throw new Promise(() => {});\n+ };\n+\n+ const Wrapper = ({\n+ suspendFirst = false,\n+ suspendSecond = false,\n+ suspendParent = false,\n+ }) => (\n+ <React.Fragment>\n+ <Component key=\"Outside\" \/>\n+ <React.Suspense fallback={<Loading key=\"Parent Fallback\" \/>}>\n+ <Component key=\"Unrelated at Start\" \/>\n+ <React.Suspense fallback={<Loading key=\"Suspense 1 Fallback\" \/>}>\n+ {suspendFirst ? (\n+ <Never \/>\n+ ) : (\n+ <Component key=\"Suspense 1 Content\" \/>\n+ )}\n+ <\/React.Suspense>\n+ <React.Suspense fallback={<Loading key=\"Suspense 2 Fallback\" \/>}>\n+ {suspendSecond ? (\n+ <Never \/>\n+ ) : (\n+ <Component key=\"Suspense 2 Content\" \/>\n+ )}\n+ <\/React.Suspense>\n+ <React.Suspense fallback={<Loading key=\"Suspense 3 Fallback\" \/>}>\n+ <Never \/>\n+ <\/React.Suspense>\n+ {suspendParent && <Never \/>}\n+ <Component key=\"Unrelated at End\" \/>\n+ <\/React.Suspense>\n+ <\/React.Fragment>\n+ );\n+\n+ const container = document.createElement('div');\n+ act(() =>\n+ ReactDOM.render(\n+ <Wrapper\n+ suspendParent={false}\n+ suspendFirst={false}\n+ suspendSecond={false}\n+ \/>,\n+ container\n+ )\n+ );\n+ expect(store).toMatchSnapshot('1: third child is suspended');\n+ act(() =>\n+ ReactDOM.render(\n+ <Wrapper\n+ suspendParent={false}\n+ suspendFirst={true}\n+ suspendSecond={false}\n+ \/>,\n+ container\n+ )\n+ );\n+ expect(store).toMatchSnapshot('2: first and third child are suspended');\n+ act(() =>\n+ ReactDOM.render(\n+ <Wrapper\n+ suspendParent={false}\n+ suspendFirst={false}\n+ suspendSecond={true}\n+ \/>,\n+ container\n+ )\n+ );\n+ expect(store).toMatchSnapshot('3: second and third child are suspended');\n+ act(() =>\n+ ReactDOM.render(\n+ <Wrapper\n+ suspendParent={false}\n+ suspendFirst={true}\n+ suspendSecond={false}\n+ \/>,\n+ container\n+ )\n+ );\n+ expect(store).toMatchSnapshot('4: first and third child are suspended');\n+ act(() =>\n+ ReactDOM.render(\n+ <Wrapper\n+ suspendParent={true}\n+ suspendFirst={true}\n+ suspendSecond={false}\n+ \/>,\n+ container\n+ )\n+ );\n+ expect(store).toMatchSnapshot('5: parent is suspended');\n+ act(() =>\n+ ReactDOM.render(\n+ <Wrapper\n+ suspendParent={false}\n+ suspendFirst={true}\n+ suspendSecond={true}\n+ \/>,\n+ container\n+ )\n+ );\n+ expect(store).toMatchSnapshot('6: all children are suspended');\n+ act(() =>\n+ ReactDOM.render(\n+ <Wrapper\n+ suspendParent={false}\n+ suspendFirst={false}\n+ suspendSecond={false}\n+ \/>,\n+ container\n+ )\n+ );\n+ expect(store).toMatchSnapshot('7: only third child is suspended');\n+\n+ const rendererID = getRendererID();\n+ act(() =>\n+ agent.overrideSuspense({\n+ id: store.getElementIDAtIndex(4),\n+ rendererID,\n+ forceFallback: true,\n+ })\n+ );\n+ expect(store).toMatchSnapshot('8: first and third child are suspended');\n+ act(() =>\n+ agent.overrideSuspense({\n+ id: store.getElementIDAtIndex(2),\n+ rendererID,\n+ forceFallback: true,\n+ })\n+ );\n+ expect(store).toMatchSnapshot('9: parent is suspended');\n+ act(() =>\n+ ReactDOM.render(\n+ <Wrapper\n+ suspendParent={false}\n+ suspendFirst={true}\n+ suspendSecond={true}\n+ \/>,\n+ container\n+ )\n+ );\n+ expect(store).toMatchSnapshot('10: parent is suspended');\n+ act(() =>\n+ agent.overrideSuspense({\n+ id: store.getElementIDAtIndex(2),\n+ rendererID,\n+ forceFallback: false,\n+ })\n+ );\n+ expect(store).toMatchSnapshot('11: all children are suspended');\n+ act(() =>\n+ agent.overrideSuspense({\n+ id: store.getElementIDAtIndex(4),\n+ rendererID,\n+ forceFallback: false,\n+ })\n+ );\n+ expect(store).toMatchSnapshot('12: all children are suspended');\n+ act(() =>\n+ ReactDOM.render(\n+ <Wrapper\n+ suspendParent={false}\n+ suspendFirst={false}\n+ suspendSecond={false}\n+ \/>,\n+ container\n+ )\n+ );\n+ expect(store).toMatchSnapshot('13: third child is suspended');\n+ });\n+\n+ it('should support collapsing parts of the tree', () => {\n+ const Grandparent = ({ count }) => (\n+ <React.Fragment>\n+ <Parent count={count} \/>\n+ <Parent count={count} \/>\n+ <\/React.Fragment>\n+ );\n+ const Parent = ({ count }) =>\n+ new Array(count).fill(true).map((_, index) => <Child key={index} \/>);\n+ const Child = () => <div>Hi!<\/div>;\n+\n+ act(() =>\n+ ReactDOM.render(\n+ <Grandparent count={2} \/>,\n+ document.createElement('div')\n+ )\n+ );\n+ expect(store).toMatchSnapshot('1: mount');\n+\n+ const grandparentID = store.getElementIDAtIndex(0);\n+ const parentOneID = store.getElementIDAtIndex(1);\n+ const parentTwoID = store.getElementIDAtIndex(4);\n+\n+ act(() => store.toggleIsCollapsed(parentOneID, true));\n+ expect(store).toMatchSnapshot('2: collapse first Parent');\n+\n+ act(() => store.toggleIsCollapsed(parentTwoID, true));\n+ expect(store).toMatchSnapshot('3: collapse second Parent');\n+\n+ act(() => store.toggleIsCollapsed(parentOneID, false));\n+ expect(store).toMatchSnapshot('4: expand first Parent');\n+\n+ act(() => store.toggleIsCollapsed(grandparentID, true));\n+ expect(store).toMatchSnapshot('5: collapse Grandparent');\n+\n+ act(() => store.toggleIsCollapsed(grandparentID, false));\n+ expect(store).toMatchSnapshot('6: expand Grandparent');\n+ });\n+\n+ it('should support reordering of children', () => {\n+ const Root = ({ children }) => children;\n+ const Component = () => null;\n+\n+ const Foo = () => [<Component key=\"0\" \/>];\n+ const Bar = () => [<Component key=\"0\" \/>, <Component key=\"1\" \/>];\n+ const foo = <Foo key=\"foo\" \/>;\n+ const bar = <Bar key=\"bar\" \/>;\n+\n+ const container = document.createElement('div');\n+\n+ act(() => ReactDOM.render(<Root>{[foo, bar]}<\/Root>, container));\n+ expect(store).toMatchSnapshot('1: mount');\n+\n+ act(() => ReactDOM.render(<Root>{[bar, foo]}<\/Root>, container));\n+ expect(store).toMatchSnapshot('3: reorder children');\n+\n+ act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), true));\n+ expect(store).toMatchSnapshot('4: collapse root');\n+\n+ act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));\n+ expect(store).toMatchSnapshot('5: expand root');\n+ });\n+ });\n+\n+ describe('collapseNodesByDefault:true', () => {\n+ beforeEach(() => {\n+ store.collapseNodesByDefault = true;\n+ });\n+\n+ it('should support mount and update operations', () => {\n+ const Parent = ({ count }) =>\n+ new Array(count).fill(true).map((_, index) => <Child key={index} \/>);\n+ const Child = () => <div>Hi!<\/div>;\n+\n+ const container = document.createElement('div');\n+\n+ act(() =>\n+ ReactDOM.render(\n+ <React.Fragment>\n+ <Parent count={1} \/>\n+ <Parent count={3} \/>\n+ <\/React.Fragment>,\n+ container\n+ )\n+ );\n+ expect(store).toMatchSnapshot('1: mount');\n+\n+ act(() =>\n+ ReactDOM.render(\n+ <React.Fragment>\n+ <Parent count={2} \/>\n+ <Parent count={1} \/>\n+ <\/React.Fragment>,\n+ container\n+ )\n+ );\n+ expect(store).toMatchSnapshot('2: update');\n+\n+ act(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(store).toMatchSnapshot('3: unmount');\n+ });\n+\n+ it('should support mount and update operations for multiple roots', () => {\n+ const Parent = ({ count }) =>\n+ new Array(count).fill(true).map((_, index) => <Child key={index} \/>);\n+ const Child = () => <div>Hi!<\/div>;\n+\n+ const containerA = document.createElement('div');\n+ const containerB = document.createElement('div');\n+\n+ act(() => {\n+ ReactDOM.render(<Parent key=\"A\" count={3} \/>, containerA);\n+ ReactDOM.render(<Parent key=\"B\" count={2} \/>, containerB);\n+ });\n+ expect(store).toMatchSnapshot('1: mount');\n+\n+ act(() => {\n+ ReactDOM.render(<Parent key=\"A\" count={4} \/>, containerA);\n+ ReactDOM.render(<Parent key=\"B\" count={1} \/>, containerB);\n+ });\n+ expect(store).toMatchSnapshot('2: update');\n+\n+ act(() => ReactDOM.unmountComponentAtNode(containerB));\n+ expect(store).toMatchSnapshot('3: unmount B');\n+\n+ act(() => ReactDOM.unmountComponentAtNode(containerA));\n+ expect(store).toMatchSnapshot('4: unmount A');\n+ });\n+\n+ it('should filter DOM nodes from the store tree', () => {\n+ const Grandparent = () => (\n+ <div>\n+ <div>\n+ <Parent \/>\n+ <\/div>\n+ <Parent \/>\n+ <\/div>\n+ );\n+ const Parent = () => (\n+ <div>\n+ <Child \/>\n+ <\/div>\n+ );\n+ const Child = () => <div>Hi!<\/div>;\n+\n+ act(() =>\n+ ReactDOM.render(\n+ <Grandparent count={4} \/>,\n+ document.createElement('div')\n+ )\n+ );\n+ expect(store).toMatchSnapshot('1: mount');\n+\n+ act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));\n+ expect(store).toMatchSnapshot('2: expand Grandparent');\n+\n+ act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(1), false));\n+ expect(store).toMatchSnapshot('3: expand Parent');\n+ });\n+\n+ it('should display Suspense nodes properly in various states', () => {\n+ const Loading = () => <div>Loading...<\/div>;\n+ const SuspendingComponent = () => {\n+ throw new Promise(() => {});\n+ };\n+ const Component = () => {\n+ return <div>Hello<\/div>;\n+ };\n+ const Wrapper = ({ shouldSuspense }) => (\n+ <React.Fragment>\n+ <Component key=\"Outside\" \/>\n+ <React.Suspense fallback={<Loading \/>}>\n+ {shouldSuspense ? (\n+ <SuspendingComponent \/>\n+ ) : (\n+ <Component key=\"Inside\" \/>\n+ )}\n+ <\/React.Suspense>\n+ <\/React.Fragment>\n+ );\n+\n+ const container = document.createElement('div');\n+ act(() => ReactDOM.render(<Wrapper shouldSuspense={true} \/>, container));\n+ expect(store).toMatchSnapshot('1: loading');\n+\n+ \/\/ This test isn't meaningful unless we expand the suspended tree\n+ act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));\n+ act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(2), false));\n+ expect(store).toMatchSnapshot('2: expand Wrapper and Suspense');\n+\n+ act(() => {\n+ ReactDOM.render(<Wrapper shouldSuspense={false} \/>, container);\n+ });\n+ expect(store).toMatchSnapshot('2: resolved');\n+ });\n+\n+ it('should support expanding parts of the tree', () => {\n+ const Grandparent = ({ count }) => (\n+ <React.Fragment>\n+ <Parent count={count} \/>\n+ <Parent count={count} \/>\n+ <\/React.Fragment>\n+ );\n+ const Parent = ({ count }) =>\n+ new Array(count).fill(true).map((_, index) => <Child key={index} \/>);\n+ const Child = () => <div>Hi!<\/div>;\n+\n+ act(() =>\n+ ReactDOM.render(\n+ <Grandparent count={2} \/>,\n+ document.createElement('div')\n+ )\n+ );\n+ expect(store).toMatchSnapshot('1: mount');\n+\n+ const grandparentID = store.getElementIDAtIndex(0);\n+\n+ act(() => store.toggleIsCollapsed(grandparentID, false));\n+ expect(store).toMatchSnapshot('2: expand Grandparent');\n+\n+ const parentOneID = store.getElementIDAtIndex(1);\n+ const parentTwoID = store.getElementIDAtIndex(2);\n+\n+ act(() => store.toggleIsCollapsed(parentOneID, false));\n+ expect(store).toMatchSnapshot('3: expand first Parent');\n+\n+ act(() => store.toggleIsCollapsed(parentTwoID, false));\n+ expect(store).toMatchSnapshot('4: expand second Parent');\n+\n+ act(() => store.toggleIsCollapsed(parentOneID, true));\n+ expect(store).toMatchSnapshot('5: collapse first Parent');\n+\n+ act(() => store.toggleIsCollapsed(parentTwoID, true));\n+ expect(store).toMatchSnapshot('6: collapse second Parent');\n+\n+ act(() => store.toggleIsCollapsed(grandparentID, true));\n+ expect(store).toMatchSnapshot('7: collapse Grandparent');\n+ });\n+\n+ it('should support expanding deep parts of the tree', () => {\n+ const Wrapper = ({ forwardedRef }) => (\n+ <Nested depth={3} forwardedRef={forwardedRef} \/>\n+ );\n+ const Nested = ({ depth, forwardedRef }) =>\n+ depth > 0 ? (\n+ <Nested depth={depth - 1} forwardedRef={forwardedRef} \/>\n+ ) : (\n+ <div ref={forwardedRef} \/>\n+ );\n+\n+ const ref = React.createRef();\n+\n+ act(() =>\n+ ReactDOM.render(\n+ <Wrapper forwardedRef={ref} \/>,\n+ document.createElement('div')\n+ )\n+ );\n+ expect(store).toMatchSnapshot('1: mount');\n+\n+ const deepestedNodeID = agent.getIDForNode(ref.current);\n+\n+ act(() => store.toggleIsCollapsed(deepestedNodeID, false));\n+ expect(store).toMatchSnapshot('2: expand deepest node');\n+\n+ const rootID = store.getElementIDAtIndex(0);\n+\n+ act(() => store.toggleIsCollapsed(rootID, true));\n+ expect(store).toMatchSnapshot('3: collapse root');\n+\n+ act(() => store.toggleIsCollapsed(rootID, false));\n+ expect(store).toMatchSnapshot('4: expand root');\n+\n+ const id = store.getElementIDAtIndex(1);\n+\n+ act(() => store.toggleIsCollapsed(id, true));\n+ expect(store).toMatchSnapshot('5: collapse middle node');\n+\n+ act(() => store.toggleIsCollapsed(id, false));\n+ expect(store).toMatchSnapshot('6: expand middle node');\n+ });\n+\n+ it('should support reordering of children', () => {\n+ const Root = ({ children }) => children;\n+ const Component = () => null;\n+\n+ const Foo = () => [<Component key=\"0\" \/>];\n+ const Bar = () => [<Component key=\"0\" \/>, <Component key=\"1\" \/>];\n+ const foo = <Foo key=\"foo\" \/>;\n+ const bar = <Bar key=\"bar\" \/>;\n+\n+ const container = document.createElement('div');\n+\n+ act(() => ReactDOM.render(<Root>{[foo, bar]}<\/Root>, container));\n+ expect(store).toMatchSnapshot('1: mount');\n+\n+ act(() => ReactDOM.render(<Root>{[bar, foo]}<\/Root>, container));\n+ expect(store).toMatchSnapshot('3: reorder children');\n+\n+ act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));\n+ expect(store).toMatchSnapshot('4: expand root');\n+\n+ act(() => {\n+ store.toggleIsCollapsed(store.getElementIDAtIndex(2), false);\n+ store.toggleIsCollapsed(store.getElementIDAtIndex(1), false);\n+ });\n+ expect(store).toMatchSnapshot('5: expand leaves');\n+\n+ act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), true));\n+ expect(store).toMatchSnapshot('6: collapse root');\n+ });\n+\n+ it('should not add new nodes when suspense is toggled', () => {\n+ const SuspenseTree = () => {\n+ return (\n+ <React.Suspense fallback={<Fallback>Loading outer<\/Fallback>}>\n+ <Parent \/>\n+ <\/React.Suspense>\n+ );\n+ };\n+\n+ const Fallback = () => null;\n+ const Parent = () => <Child \/>;\n+ const Child = () => null;\n+\n+ act(() =>\n+ ReactDOM.render(<SuspenseTree \/>, document.createElement('div'))\n+ );\n+ expect(store).toMatchSnapshot('1: mount');\n+\n+ act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));\n+ act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(1), false));\n+ expect(store).toMatchSnapshot('2: expand tree');\n+\n+ const rendererID = getRendererID();\n+ const suspenseID = store.getElementIDAtIndex(1);\n+\n+ act(() =>\n+ agent.overrideSuspense({\n+ id: suspenseID,\n+ rendererID,\n+ forceFallback: true,\n+ })\n+ );\n+ expect(store).toMatchSnapshot('3: toggle fallback on');\n+\n+ act(() =>\n+ agent.overrideSuspense({\n+ id: suspenseID,\n+ rendererID,\n+ forceFallback: false,\n+ })\n+ );\n+ expect(store).toMatchSnapshot('4: toggle fallback on');\n+ });\n+ });\n+\n+ describe('getIndexOfElementID', () => {\n+ beforeEach(() => {\n+ store.collapseNodesByDefault = false;\n+ });\n+\n+ it('should support a single root with a single child', () => {\n+ const Grandparent = () => (\n+ <React.Fragment>\n+ <Parent \/>\n+ <Parent \/>\n+ <\/React.Fragment>\n+ );\n+ const Parent = () => <Child \/>;\n+ const Child = () => null;\n+\n+ act(() =>\n+ ReactDOM.render(<Grandparent \/>, document.createElement('div'))\n+ );\n+\n+ for (let i = 0; i < store.numElements; i++) {\n+ expect(store.getIndexOfElementID(store.getElementIDAtIndex(i))).toBe(i);\n+ }\n+ });\n+\n+ it('should support multiple roots with one children each', () => {\n+ const Grandparent = () => <Parent \/>;\n+ const Parent = () => <Child \/>;\n+ const Child = () => null;\n+\n+ act(() => {\n+ ReactDOM.render(<Grandparent \/>, document.createElement('div'));\n+ ReactDOM.render(<Grandparent \/>, document.createElement('div'));\n+ });\n+\n+ for (let i = 0; i < store.numElements; i++) {\n+ expect(store.getIndexOfElementID(store.getElementIDAtIndex(i))).toBe(i);\n+ }\n+ });\n+\n+ it('should support a single root with multiple top level children', () => {\n+ const Grandparent = () => <Parent \/>;\n+ const Parent = () => <Child \/>;\n+ const Child = () => null;\n+\n+ act(() =>\n+ ReactDOM.render(\n+ <React.Fragment>\n+ <Grandparent \/>\n+ <Grandparent \/>\n+ <\/React.Fragment>,\n+ document.createElement('div')\n+ )\n+ );\n+\n+ for (let i = 0; i < store.numElements; i++) {\n+ expect(store.getIndexOfElementID(store.getElementIDAtIndex(i))).toBe(i);\n+ }\n+ });\n+\n+ it('should support multiple roots with multiple top level children', () => {\n+ const Grandparent = () => <Parent \/>;\n+ const Parent = () => <Child \/>;\n+ const Child = () => null;\n+\n+ act(() => {\n+ ReactDOM.render(\n+ <React.Fragment>\n+ <Grandparent \/>\n+ <Grandparent \/>\n+ <\/React.Fragment>,\n+ document.createElement('div')\n+ );\n+ ReactDOM.render(\n+ <React.Fragment>\n+ <Grandparent \/>\n+ <Grandparent \/>\n+ <\/React.Fragment>,\n+ document.createElement('div')\n+ );\n+ });\n+\n+ for (let i = 0; i < store.numElements; i++) {\n+ expect(store.getIndexOfElementID(store.getElementIDAtIndex(i))).toBe(i);\n+ }\n+ });\n+ });\n+\n+ it('detects and updates profiling support based on the attached roots', () => {\n+ const Component = () => null;\n+\n+ const containerA = document.createElement('div');\n+ const containerB = document.createElement('div');\n+\n+ expect(store.supportsProfiling).toBe(false);\n+\n+ act(() => ReactDOM.render(<Component \/>, containerA));\n+ expect(store.supportsProfiling).toBe(true);\n+\n+ act(() => ReactDOM.render(<Component \/>, containerB));\n+ act(() => ReactDOM.unmountComponentAtNode(containerA));\n+ expect(store.supportsProfiling).toBe(true);\n+\n+ act(() => ReactDOM.unmountComponentAtNode(containerB));\n+ expect(store.supportsProfiling).toBe(false);\n+ });\n+});\ndiff --git a\/src\/__tests__\/storeComponentFilters-test.js b\/src\/__tests__\/storeComponentFilters-test.js\nnew file mode 100644\nindex 0000000000..5e2385b33b\n--- \/dev\/null\n+++ b\/src\/__tests__\/storeComponentFilters-test.js\n@@ -0,0 +1,223 @@\n+\/\/ @flow\n+\n+import type { FrontendBridge } from 'src\/bridge';\n+import type Store from 'src\/devtools\/store';\n+\n+describe('Store component filters', () => {\n+ let React;\n+ let ReactDOM;\n+ let TestUtils;\n+ let Types;\n+ let bridge: FrontendBridge;\n+ let store: Store;\n+ let utils;\n+\n+ const act = (callback: Function) => {\n+ TestUtils.act(() => {\n+ callback();\n+ });\n+ jest.runAllTimers(); \/\/ Flush Bridge operations\n+ };\n+\n+ beforeEach(() => {\n+ bridge = global.bridge;\n+ store = global.store;\n+ store.collapseNodesByDefault = false;\n+ store.componentFilters = [];\n+ store.recordChangeDescriptions = true;\n+\n+ React = require('react');\n+ ReactDOM = require('react-dom');\n+ TestUtils = require('react-dom\/test-utils');\n+ Types = require('src\/types');\n+ utils = require('.\/utils');\n+ });\n+\n+ it('should throw if filters are updated while profiling', () => {\n+ act(() => store.profilerStore.startProfiling());\n+ expect(() => (store.componentFilters = [])).toThrow(\n+ 'Cannot modify filter preferences while profiling'\n+ );\n+ });\n+\n+ it('should support filtering by element type', () => {\n+ class Root extends React.Component<{| children: React$Node |}> {\n+ render() {\n+ return <div>{this.props.children}<\/div>;\n+ }\n+ }\n+ const Component = () => <div>Hi<\/div>;\n+\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <Component \/>\n+ <\/Root>,\n+ document.createElement('div')\n+ )\n+ );\n+ expect(store).toMatchSnapshot('1: mount');\n+\n+ act(\n+ () =>\n+ (store.componentFilters = [\n+ utils.createElementTypeFilter(Types.ElementTypeHostComponent),\n+ ])\n+ );\n+\n+ expect(store).toMatchSnapshot('2: hide host components');\n+\n+ act(\n+ () =>\n+ (store.componentFilters = [\n+ utils.createElementTypeFilter(Types.ElementTypeClass),\n+ ])\n+ );\n+\n+ expect(store).toMatchSnapshot('3: hide class components');\n+\n+ act(\n+ () =>\n+ (store.componentFilters = [\n+ utils.createElementTypeFilter(Types.ElementTypeClass),\n+ utils.createElementTypeFilter(Types.ElementTypeFunction),\n+ ])\n+ );\n+\n+ expect(store).toMatchSnapshot('4: hide class and function components');\n+\n+ act(\n+ () =>\n+ (store.componentFilters = [\n+ utils.createElementTypeFilter(Types.ElementTypeClass, false),\n+ utils.createElementTypeFilter(Types.ElementTypeFunction, false),\n+ ])\n+ );\n+\n+ expect(store).toMatchSnapshot('5: disable all filters');\n+ });\n+\n+ it('should ignore invalid ElementTypeRoot filter', () => {\n+ const Root = () => <div>Hi<\/div>;\n+\n+ act(() => ReactDOM.render(<Root \/>, document.createElement('div')));\n+ expect(store).toMatchSnapshot('1: mount');\n+\n+ act(\n+ () =>\n+ (store.componentFilters = [\n+ utils.createElementTypeFilter(Types.ElementTypeRoot),\n+ ])\n+ );\n+\n+ expect(store).toMatchSnapshot('2: add invalid filter');\n+ });\n+\n+ it('should filter by display name', () => {\n+ const Text = ({ label }) => label;\n+ const Foo = () => <Text label=\"foo\" \/>;\n+ const Bar = () => <Text label=\"bar\" \/>;\n+ const Baz = () => <Text label=\"baz\" \/>;\n+\n+ act(() =>\n+ ReactDOM.render(\n+ <React.Fragment>\n+ <Foo \/>\n+ <Bar \/>\n+ <Baz \/>\n+ <\/React.Fragment>,\n+ document.createElement('div')\n+ )\n+ );\n+ expect(store).toMatchSnapshot('1: mount');\n+\n+ act(\n+ () => (store.componentFilters = [utils.createDisplayNameFilter('Foo')])\n+ );\n+ expect(store).toMatchSnapshot('2: filter \"Foo\"');\n+\n+ act(() => (store.componentFilters = [utils.createDisplayNameFilter('Ba')]));\n+ expect(store).toMatchSnapshot('3: filter \"Ba\"');\n+\n+ act(\n+ () => (store.componentFilters = [utils.createDisplayNameFilter('B.z')])\n+ );\n+ expect(store).toMatchSnapshot('4: filter \"B.z\"');\n+ });\n+\n+ it('should filter by path', () => {\n+ const Component = () => <div>Hi<\/div>;\n+\n+ act(() => ReactDOM.render(<Component \/>, document.createElement('div')));\n+ expect(store).toMatchSnapshot('1: mount');\n+\n+ act(\n+ () =>\n+ (store.componentFilters = [\n+ utils.createLocationFilter(__filename.replace(__dirname, '')),\n+ ])\n+ );\n+\n+ expect(store).toMatchSnapshot(\n+ '2: hide all components declared within this test filed'\n+ );\n+\n+ act(\n+ () =>\n+ (store.componentFilters = [\n+ utils.createLocationFilter('this:is:a:made:up:path'),\n+ ])\n+ );\n+\n+ expect(store).toMatchSnapshot('3: hide components in a made up fake path');\n+ });\n+\n+ it('should filter HOCs', () => {\n+ const Component = () => <div>Hi<\/div>;\n+ const Foo = () => <Component \/>;\n+ Foo.displayName = 'Foo(Component)';\n+ const Bar = () => <Foo \/>;\n+ Bar.displayName = 'Bar(Foo(Component))';\n+\n+ act(() => ReactDOM.render(<Bar \/>, document.createElement('div')));\n+ expect(store).toMatchSnapshot('1: mount');\n+\n+ act(() => (store.componentFilters = [utils.createHOCFilter(true)]));\n+\n+ expect(store).toMatchSnapshot('2: hide all HOCs');\n+\n+ act(() => (store.componentFilters = [utils.createHOCFilter(false)]));\n+\n+ expect(store).toMatchSnapshot('3: disable HOC filter');\n+ });\n+\n+ it('should not send a bridge update if the set of enabled filters has not changed', () => {\n+ act(() => (store.componentFilters = [utils.createHOCFilter(true)]));\n+\n+ bridge.addListener('updateComponentFilters', componentFilters => {\n+ throw Error('Unexpected component update');\n+ });\n+\n+ act(\n+ () =>\n+ (store.componentFilters = [\n+ utils.createHOCFilter(false),\n+ utils.createHOCFilter(true),\n+ ])\n+ );\n+ act(\n+ () =>\n+ (store.componentFilters = [\n+ utils.createHOCFilter(true),\n+ utils.createLocationFilter('abc', false),\n+ ])\n+ );\n+ act(\n+ () =>\n+ (store.componentFilters = [\n+ utils.createHOCFilter(true),\n+ utils.createElementTypeFilter(Types.ElementTypeHostComponent, false),\n+ ])\n+ );\n+ });\n+});\ndiff --git a\/src\/__tests__\/storeOwners-test.js b\/src\/__tests__\/storeOwners-test.js\nnew file mode 100644\nindex 0000000000..9ed0e53fdc\n--- \/dev\/null\n+++ b\/src\/__tests__\/storeOwners-test.js\n@@ -0,0 +1,164 @@\n+\/\/ @flow\n+\n+const { printOwnersList } = require('.\/storeSerializer');\n+\n+describe('Store owners list', () => {\n+ let React;\n+ let ReactDOM;\n+ let act;\n+ let store;\n+\n+ beforeEach(() => {\n+ store = global.store;\n+ store.collapseNodesByDefault = false;\n+\n+ React = require('react');\n+ ReactDOM = require('react-dom');\n+ act = require('.\/utils').act;\n+ });\n+\n+ it('should drill through intermediate components', () => {\n+ const Root = () => (\n+ <Intermediate>\n+ <div>\n+ <Leaf \/>\n+ <\/div>\n+ <\/Intermediate>\n+ );\n+ const Wrapper = ({ children }) => children;\n+ const Leaf = () => <div>Leaf<\/div>;\n+ const Intermediate = ({ children }) => <Wrapper>{children}<\/Wrapper>;\n+\n+ act(() => ReactDOM.render(<Root \/>, document.createElement('div')));\n+ expect(store).toMatchSnapshot('1: mount');\n+\n+ const rootID = store.getElementIDAtIndex(0);\n+ expect(\n+ printOwnersList(store.getOwnersListForElement(rootID))\n+ ).toMatchSnapshot('2: components owned by <Root>');\n+\n+ const intermediateID = store.getElementIDAtIndex(1);\n+ expect(\n+ printOwnersList(store.getOwnersListForElement(intermediateID))\n+ ).toMatchSnapshot('3: components owned by <Intermediate>');\n+ });\n+\n+ it('should drill through interleaved intermediate components', () => {\n+ const Root = () => [\n+ <Intermediate key=\"intermediate\">\n+ <Leaf \/>\n+ <\/Intermediate>,\n+ <Leaf key=\"leaf\" \/>,\n+ ];\n+ const Wrapper = ({ children }) => children;\n+ const Leaf = () => <div>Leaf<\/div>;\n+ const Intermediate = ({ children }) => [\n+ <Leaf key=\"leaf\" \/>,\n+ <Wrapper key=\"wrapper\">{children}<\/Wrapper>,\n+ ];\n+\n+ act(() => ReactDOM.render(<Root \/>, document.createElement('div')));\n+ expect(store).toMatchSnapshot('1: mount');\n+\n+ const rootID = store.getElementIDAtIndex(0);\n+ expect(\n+ printOwnersList(store.getOwnersListForElement(rootID))\n+ ).toMatchSnapshot('2: components owned by <Root>');\n+\n+ const intermediateID = store.getElementIDAtIndex(1);\n+ expect(\n+ printOwnersList(store.getOwnersListForElement(intermediateID))\n+ ).toMatchSnapshot('3: components owned by <Intermediate>');\n+ });\n+\n+ it('should show the proper owners list order and contents after insertions and deletions', () => {\n+ const Root = ({ includeDirect, includeIndirect }) => (\n+ <div>\n+ {includeDirect ? <Leaf \/> : null}\n+ {includeIndirect ? (\n+ <Intermediate>\n+ <Leaf \/>\n+ <\/Intermediate>\n+ ) : null}\n+ <\/div>\n+ );\n+ const Wrapper = ({ children }) => children;\n+ const Leaf = () => <div>Leaf<\/div>;\n+ const Intermediate = ({ children }) => <Wrapper>{children}<\/Wrapper>;\n+\n+ const container = document.createElement('div');\n+\n+ act(() =>\n+ ReactDOM.render(\n+ <Root includeDirect={false} includeIndirect={true} \/>,\n+ container\n+ )\n+ );\n+ expect(store).toMatchSnapshot('1: mount');\n+\n+ const rootID = store.getElementIDAtIndex(0);\n+ expect(\n+ printOwnersList(store.getOwnersListForElement(rootID))\n+ ).toMatchSnapshot('2: components owned by <Root>');\n+\n+ act(() =>\n+ ReactDOM.render(\n+ <Root includeDirect={true} includeIndirect={true} \/>,\n+ container\n+ )\n+ );\n+ expect(store).toMatchSnapshot('3: update to add direct');\n+\n+ expect(\n+ printOwnersList(store.getOwnersListForElement(rootID))\n+ ).toMatchSnapshot('4: components owned by <Root>');\n+\n+ act(() =>\n+ ReactDOM.render(\n+ <Root includeDirect={true} includeIndirect={false} \/>,\n+ container\n+ )\n+ );\n+ expect(store).toMatchSnapshot('5: update to remove indirect');\n+\n+ expect(\n+ printOwnersList(store.getOwnersListForElement(rootID))\n+ ).toMatchSnapshot('6: components owned by <Root>');\n+\n+ act(() =>\n+ ReactDOM.render(\n+ <Root includeDirect={false} includeIndirect={false} \/>,\n+ container\n+ )\n+ );\n+ expect(store).toMatchSnapshot('7: update to remove both');\n+\n+ expect(\n+ printOwnersList(store.getOwnersListForElement(rootID))\n+ ).toMatchSnapshot('8: components owned by <Root>');\n+ });\n+\n+ it('should show the proper owners list ordering after reordered children', () => {\n+ const Root = ({ ascending }) =>\n+ ascending\n+ ? [<Leaf key=\"A\" \/>, <Leaf key=\"B\" \/>, <Leaf key=\"C\" \/>]\n+ : [<Leaf key=\"C\" \/>, <Leaf key=\"B\" \/>, <Leaf key=\"A\" \/>];\n+ const Leaf = () => <div>Leaf<\/div>;\n+\n+ const container = document.createElement('div');\n+ act(() => ReactDOM.render(<Root ascending={true} \/>, container));\n+ expect(store).toMatchSnapshot('1: mount (ascending)');\n+\n+ const rootID = store.getElementIDAtIndex(0);\n+ expect(\n+ printOwnersList(store.getOwnersListForElement(rootID))\n+ ).toMatchSnapshot('2: components owned by <Root>');\n+\n+ act(() => ReactDOM.render(<Root ascending={false} \/>, container));\n+ expect(store).toMatchSnapshot('3: update (descending)');\n+\n+ expect(\n+ printOwnersList(store.getOwnersListForElement(rootID))\n+ ).toMatchSnapshot('4: components owned by <Root>');\n+ });\n+});\ndiff --git a\/src\/__tests__\/storeSerializer.js b\/src\/__tests__\/storeSerializer.js\nnew file mode 100644\nindex 0000000000..fd2d4e36f8\n--- \/dev\/null\n+++ b\/src\/__tests__\/storeSerializer.js\n@@ -0,0 +1,84 @@\n+\/\/ test() is part of Jest's serializer API\n+export function test(maybeStore) {\n+ \/\/ It's important to lazy-require the Store rather than imported at the head of the module.\n+ \/\/ Because we reset modules between tests, different Store implementations will be used for each test.\n+ \/\/ Unfortunately Jest does not reset its own serializer modules.\n+ return maybeStore instanceof require('src\/devtools\/store').default;\n+}\n+\n+\/\/ print() is part of Jest's serializer API\n+export function print(store, serialize, indent) {\n+ return printStore(store);\n+}\n+\n+export function printElement(element, includeWeight = false) {\n+ let prefix = ' ';\n+ if (element.children.length > 0) {\n+ prefix = element.isCollapsed ? '▸' : '▾';\n+ }\n+\n+ let key = '';\n+ if (element.key !== null) {\n+ key = ` key=\"${element.key}\"`;\n+ }\n+\n+ let hocs = '';\n+ if (element.hocDisplayNames !== null) {\n+ hocs = ` [${element.hocDisplayNames.join('][')}]`;\n+ }\n+\n+ let suffix = '';\n+ if (includeWeight) {\n+ suffix = ` (${element.isCollapsed ? 1 : element.weight})`;\n+ }\n+\n+ return `${' '.repeat(element.depth + 1)}${prefix} <${element.displayName ||\n+ 'null'}${key}>${hocs}${suffix}`;\n+}\n+\n+export function printOwnersList(elements, includeWeight = false) {\n+ return elements\n+ .map(element => printElement(element, includeWeight))\n+ .join('\\n');\n+}\n+\n+\/\/ Used for Jest snapshot testing.\n+\/\/ May also be useful for visually debugging the tree, so it lives on the Store.\n+export function printStore(store, includeWeight = false) {\n+ const snapshotLines = [];\n+\n+ let rootWeight = 0;\n+\n+ store.roots.forEach(rootID => {\n+ const { weight } = store.getElementByID(rootID);\n+\n+ snapshotLines.push('[root]' + (includeWeight ? ` (${weight})` : ''));\n+\n+ for (let i = rootWeight; i < rootWeight + weight; i++) {\n+ const element = store.getElementAtIndex(i);\n+\n+ if (element == null) {\n+ throw Error(`Could not find element at index ${i}`);\n+ }\n+\n+ snapshotLines.push(printElement(element, includeWeight));\n+ }\n+\n+ rootWeight += weight;\n+ });\n+\n+ \/\/ Make sure the pretty-printed test align with the Store's reported number of total rows.\n+ if (rootWeight !== store.numElements) {\n+ throw Error(\n+ `Inconsistent Store state. Individual root weights (${rootWeight}) do not match total weight (${\n+ store.numElements\n+ })`\n+ );\n+ }\n+\n+ \/\/ If roots have been unmounted, verify that they've been removed from maps.\n+ \/\/ This helps ensure the Store doesn't leak memory.\n+ store.assertExpectedRootMapSizes();\n+\n+ return snapshotLines.join('\\n');\n+}\ndiff --git a\/src\/__tests__\/storeStressSync-test.js b\/src\/__tests__\/storeStressSync-test.js\nnew file mode 100644\nindex 0000000000..8877d5d999\n--- \/dev\/null\n+++ b\/src\/__tests__\/storeStressSync-test.js\n@@ -0,0 +1,1095 @@\n+\/\/ @flow\n+\n+describe('StoreStress (Sync Mode)', () => {\n+ let React;\n+ let ReactDOM;\n+ let act;\n+ let bridge;\n+ let store;\n+ let print;\n+\n+ beforeEach(() => {\n+ bridge = global.bridge;\n+ store = global.store;\n+ store.collapseNodesByDefault = false;\n+\n+ React = require('react');\n+ ReactDOM = require('react-dom');\n+ act = require('.\/utils').act;\n+\n+ print = require('.\/storeSerializer').print;\n+ });\n+\n+ \/\/ This is a stress test for the tree mount\/update\/unmount traversal.\n+ \/\/ It renders different trees that should produce the same output.\n+ it('should handle a stress test with different tree operations (Sync Mode)', () => {\n+ let setShowX;\n+ const A = () => 'a';\n+ const B = () => 'b';\n+ const C = () => {\n+ \/\/ We'll be manually flipping this component back and forth in the test.\n+ \/\/ We only do this for a single node in order to verify that DevTools\n+ \/\/ can handle a subtree switching alternates while other subtrees are memoized.\n+ let [showX, _setShowX] = React.useState(false);\n+ setShowX = _setShowX;\n+ return showX ? <X \/> : 'c';\n+ };\n+ const D = () => 'd';\n+ const E = () => 'e';\n+ const X = () => 'x';\n+ const a = <A key=\"a\" \/>;\n+ const b = <B key=\"b\" \/>;\n+ const c = <C key=\"c\" \/>;\n+ const d = <D key=\"d\" \/>;\n+ const e = <E key=\"e\" \/>;\n+\n+ function Parent({ children }) {\n+ return children;\n+ }\n+\n+ \/\/ 1. Render a normal version of [a, b, c, d, e].\n+ let container = document.createElement('div');\n+ act(() => ReactDOM.render(<Parent>{[a, b, c, d, e]}<\/Parent>, container));\n+ expect(store).toMatchSnapshot('1: abcde');\n+ expect(container.textContent).toMatch('abcde');\n+ const snapshotForABCDE = print(store);\n+\n+ \/\/ 2. Render a version where <C \/> renders an <X \/> child instead of 'c'.\n+ \/\/ This is how we'll test an update to a single component.\n+ act(() => {\n+ setShowX(true);\n+ });\n+ expect(store).toMatchSnapshot('2: abxde');\n+ expect(container.textContent).toMatch('abxde');\n+ const snapshotForABXDE = print(store);\n+\n+ \/\/ 3. Verify flipping it back produces the original result.\n+ act(() => {\n+ setShowX(false);\n+ });\n+ expect(container.textContent).toMatch('abcde');\n+ expect(print(store)).toBe(snapshotForABCDE);\n+\n+ \/\/ 4. Clean up.\n+ act(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(print(store)).toBe('');\n+\n+ \/\/ Now comes the interesting part.\n+ \/\/ All of these cases are equivalent to [a, b, c, d, e] in output.\n+ \/\/ We'll verify that DevTools produces the same snapshots for them.\n+ \/\/ These cases are picked so that rendering them sequentially in the same\n+ \/\/ container results in a combination of mounts, updates, unmounts, and reorders.\n+ \/\/ prettier-ignore\n+ let cases = [\n+ [a, b, c, d, e],\n+ [[a], b, c, d, e],\n+ [[a, b], c, d, e],\n+ [[a, b], c, [d, e]],\n+ [[a, b], c, [d, '', e]],\n+ [[a], b, c, d, [e]],\n+ [a, b, [[c]], d, e],\n+ [[a, ''], [b], [c], [d], [e]],\n+ [a, b, [c, [d, ['', e]]]],\n+ [a, b, c, d, e],\n+ [<div key=\"0\">{a}<\/div>, b, c, d, e],\n+ [<div key=\"0\">{a}{b}<\/div>, c, d, e],\n+ [<div key=\"0\">{a}{b}<\/div>, c, <div key=\"1\">{d}{e}<\/div>],\n+ [<div key=\"1\">{a}{b}<\/div>, c, <div key=\"0\">{d}{e}<\/div>],\n+ [<div key=\"0\">{a}{b}<\/div>, c, <div key=\"1\">{d}{e}<\/div>],\n+ [<div key=\"2\">{a}{b}<\/div>, c, <div key=\"3\">{d}{e}<\/div>],\n+ [<span key=\"0\">{a}<\/span>, b, c, d, [e]],\n+ [a, b, <span key=\"0\"><span>{c}<\/span><\/span>, d, e],\n+ [<div key=\"0\">{a}<\/div>, [b], <span key=\"1\">{c}<\/span>, [d], <div key=\"2\">{e}<\/div>],\n+ [a, b, [c, <div key=\"0\">{d}<span>{e}<\/span><\/div>], ''],\n+ [a, [[]], b, c, [d, [[]], e]],\n+ [[[a, b, c, d], e]],\n+ [a, b, c, d, e]\n+ ];\n+\n+ \/\/ 5. Test fresh mount for each case.\n+ for (let i = 0; i < cases.length; i++) {\n+ \/\/ Ensure fresh mount.\n+ container = document.createElement('div');\n+\n+ \/\/ Verify mounting 'abcde'.\n+ act(() => ReactDOM.render(<Parent>{cases[i]}<\/Parent>, container));\n+ expect(container.textContent).toMatch('abcde');\n+ expect(print(store)).toEqual(snapshotForABCDE);\n+\n+ \/\/ Verify switching to 'abxde'.\n+ act(() => {\n+ setShowX(true);\n+ });\n+ expect(container.textContent).toMatch('abxde');\n+ expect(print(store)).toBe(snapshotForABXDE);\n+\n+ \/\/ Verify switching back to 'abcde'.\n+ act(() => {\n+ setShowX(false);\n+ });\n+ expect(container.textContent).toMatch('abcde');\n+ expect(print(store)).toBe(snapshotForABCDE);\n+\n+ \/\/ Clean up.\n+ act(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(print(store)).toBe('');\n+ }\n+\n+ \/\/ 6. Verify *updates* by reusing the container between iterations.\n+ \/\/ There'll be no unmounting until the very end.\n+ container = document.createElement('div');\n+ for (let i = 0; i < cases.length; i++) {\n+ \/\/ Verify mounting 'abcde'.\n+ act(() => ReactDOM.render(<Parent>{cases[i]}<\/Parent>, container));\n+ expect(container.textContent).toMatch('abcde');\n+ expect(print(store)).toEqual(snapshotForABCDE);\n+\n+ \/\/ Verify switching to 'abxde'.\n+ act(() => {\n+ setShowX(true);\n+ });\n+ expect(container.textContent).toMatch('abxde');\n+ expect(print(store)).toBe(snapshotForABXDE);\n+\n+ \/\/ Verify switching back to 'abcde'.\n+ act(() => {\n+ setShowX(false);\n+ });\n+ expect(container.textContent).toMatch('abcde');\n+ expect(print(store)).toBe(snapshotForABCDE);\n+ \/\/ Don't unmount. Reuse the container between iterations.\n+ }\n+ act(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(print(store)).toBe('');\n+ });\n+\n+ it('should handle stress test with reordering (Sync Mode)', () => {\n+ const A = () => 'a';\n+ const B = () => 'b';\n+ const C = () => 'c';\n+ const D = () => 'd';\n+ const E = () => 'e';\n+ const a = <A key=\"a\" \/>;\n+ const b = <B key=\"b\" \/>;\n+ const c = <C key=\"c\" \/>;\n+ const d = <D key=\"d\" \/>;\n+ const e = <E key=\"e\" \/>;\n+\n+ \/\/ prettier-ignore\n+ let steps = [\n+ a,\n+ b,\n+ c,\n+ d,\n+ e,\n+ [a],\n+ [b],\n+ [c],\n+ [d],\n+ [e],\n+ [a, b],\n+ [b, a],\n+ [b, c],\n+ [c, b],\n+ [a, c],\n+ [c, a],\n+ ];\n+\n+ const Root = ({ children }) => {\n+ return children;\n+ };\n+\n+ \/\/ 1. Capture the expected render result.\n+ let snapshots = [];\n+ let container = document.createElement('div');\n+ for (let i = 0; i < steps.length; i++) {\n+ act(() => ReactDOM.render(<Root>{steps[i]}<\/Root>, container));\n+ \/\/ We snapshot each step once so it doesn't regress.\n+ expect(store).toMatchSnapshot();\n+ snapshots.push(print(store));\n+ act(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(print(store)).toBe('');\n+ }\n+\n+ \/\/ 2. Verify that we can update from every step to every other step and back.\n+ for (let i = 0; i < steps.length; i++) {\n+ for (let j = 0; j < steps.length; j++) {\n+ let container = document.createElement('div');\n+ act(() => ReactDOM.render(<Root>{steps[i]}<\/Root>, container));\n+ expect(print(store)).toMatch(snapshots[i]);\n+ act(() => ReactDOM.render(<Root>{steps[j]}<\/Root>, container));\n+ expect(print(store)).toMatch(snapshots[j]);\n+ act(() => ReactDOM.render(<Root>{steps[i]}<\/Root>, container));\n+ expect(print(store)).toMatch(snapshots[i]);\n+ act(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(print(store)).toBe('');\n+ }\n+ }\n+\n+ \/\/ 3. Same test as above, but this time we wrap children in a host component.\n+ for (let i = 0; i < steps.length; i++) {\n+ for (let j = 0; j < steps.length; j++) {\n+ let container = document.createElement('div');\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <div>{steps[i]}<\/div>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+ expect(print(store)).toMatch(snapshots[i]);\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <div>{steps[j]}<\/div>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+ expect(print(store)).toMatch(snapshots[j]);\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <div>{steps[i]}<\/div>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+ expect(print(store)).toMatch(snapshots[i]);\n+ act(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(print(store)).toBe('');\n+ }\n+ }\n+ });\n+\n+ it('should handle a stress test for Suspense (Sync Mode)', async () => {\n+ const A = () => 'a';\n+ const B = () => 'b';\n+ const C = () => 'c';\n+ const X = () => 'x';\n+ const Y = () => 'y';\n+ const Z = () => 'z';\n+ const a = <A key=\"a\" \/>;\n+ const b = <B key=\"b\" \/>;\n+ const c = <C key=\"c\" \/>;\n+ const z = <Z key=\"z\" \/>;\n+\n+ \/\/ prettier-ignore\n+ const steps = [\n+ a,\n+ [a],\n+ [a, b, c],\n+ [c, b, a],\n+ [c, null, a],\n+ <React.Fragment>{c}{a}<\/React.Fragment>,\n+ <div>{c}{a}<\/div>,\n+ <div><span>{a}<\/span>{b}<\/div>,\n+ [[a]],\n+ null,\n+ b,\n+ a\n+ ];\n+\n+ const Never = () => {\n+ throw new Promise(() => {});\n+ };\n+\n+ const Root = ({ children }) => {\n+ return children;\n+ };\n+\n+ \/\/ 1. For each step, check Suspense can render them as initial primary content.\n+ \/\/ This is the only step where we use Jest snapshots.\n+ let snapshots = [];\n+ let container = document.createElement('div');\n+ for (let i = 0; i < steps.length; i++) {\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={z}>{steps[i]}<\/React.Suspense>\n+ <Y \/>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+ \/\/ We snapshot each step once so it doesn't regress.\n+ expect(store).toMatchSnapshot();\n+ snapshots.push(print(store));\n+ act(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(print(store)).toBe('');\n+ }\n+\n+ \/\/ 2. Verify check Suspense can render same steps as initial fallback content.\n+ for (let i = 0; i < steps.length; i++) {\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[i]}>\n+ <Z \/>\n+ <Never \/>\n+ <Z \/>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+ expect(print(store)).toEqual(snapshots[i]);\n+ act(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(print(store)).toBe('');\n+ }\n+\n+ \/\/ 3. Verify we can update from each step to each step in primary mode.\n+ for (let i = 0; i < steps.length; i++) {\n+ for (let j = 0; j < steps.length; j++) {\n+ \/\/ Always start with a fresh container and steps[i].\n+ container = document.createElement('div');\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={z}>{steps[i]}<\/React.Suspense>\n+ <Y \/>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+ expect(print(store)).toEqual(snapshots[i]);\n+ \/\/ Re-render with steps[j].\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={z}>{steps[j]}<\/React.Suspense>\n+ <Y \/>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+ \/\/ Verify the successful transition to steps[j].\n+ expect(print(store)).toEqual(snapshots[j]);\n+ \/\/ Check that we can transition back again.\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={z}>{steps[i]}<\/React.Suspense>\n+ <Y \/>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+ expect(print(store)).toEqual(snapshots[i]);\n+ \/\/ Clean up after every iteration.\n+ act(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(print(store)).toBe('');\n+ }\n+ }\n+\n+ \/\/ 4. Verify we can update from each step to each step in fallback mode.\n+ for (let i = 0; i < steps.length; i++) {\n+ for (let j = 0; j < steps.length; j++) {\n+ \/\/ Always start with a fresh container and steps[i].\n+ container = document.createElement('div');\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[i]}>\n+ <Z \/>\n+ <Never \/>\n+ <Z \/>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+ expect(print(store)).toEqual(snapshots[i]);\n+ \/\/ Re-render with steps[j].\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[j]}>\n+ <Z \/>\n+ <Never \/>\n+ <Z \/>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+ \/\/ Verify the successful transition to steps[j].\n+ expect(print(store)).toEqual(snapshots[j]);\n+ \/\/ Check that we can transition back again.\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[i]}>\n+ <Z \/>\n+ <Never \/>\n+ <Z \/>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+ expect(print(store)).toEqual(snapshots[i]);\n+ \/\/ Clean up after every iteration.\n+ act(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(print(store)).toBe('');\n+ }\n+ }\n+\n+ \/\/ 5. Verify we can update from each step to each step when moving primary -> fallback.\n+ for (let i = 0; i < steps.length; i++) {\n+ for (let j = 0; j < steps.length; j++) {\n+ \/\/ Always start with a fresh container and steps[i].\n+ container = document.createElement('div');\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={z}>{steps[i]}<\/React.Suspense>\n+ <Y \/>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+ expect(print(store)).toEqual(snapshots[i]);\n+ \/\/ Re-render with steps[j].\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[j]}>\n+ <Z \/>\n+ <Never \/>\n+ <Z \/>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+ \/\/ Verify the successful transition to steps[j].\n+ expect(print(store)).toEqual(snapshots[j]);\n+ \/\/ Check that we can transition back again.\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={z}>{steps[i]}<\/React.Suspense>\n+ <Y \/>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+ expect(print(store)).toEqual(snapshots[i]);\n+ \/\/ Clean up after every iteration.\n+ act(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(print(store)).toBe('');\n+ }\n+ }\n+\n+ \/\/ 6. Verify we can update from each step to each step when moving fallback -> primary.\n+ for (let i = 0; i < steps.length; i++) {\n+ for (let j = 0; j < steps.length; j++) {\n+ \/\/ Always start with a fresh container and steps[i].\n+ container = document.createElement('div');\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[i]}>\n+ <Z \/>\n+ <Never \/>\n+ <Z \/>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+ expect(print(store)).toEqual(snapshots[i]);\n+ \/\/ Re-render with steps[j].\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={z}>{steps[j]}<\/React.Suspense>\n+ <Y \/>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+ \/\/ Verify the successful transition to steps[j].\n+ expect(print(store)).toEqual(snapshots[j]);\n+ \/\/ Check that we can transition back again.\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[i]}>\n+ <Z \/>\n+ <Never \/>\n+ <Z \/>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+ expect(print(store)).toEqual(snapshots[i]);\n+ \/\/ Clean up after every iteration.\n+ act(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(print(store)).toBe('');\n+ }\n+ }\n+\n+ \/\/ 7. Verify we can update from each step to each step when toggling Suspense.\n+ for (let i = 0; i < steps.length; i++) {\n+ for (let j = 0; j < steps.length; j++) {\n+ \/\/ Always start with a fresh container and steps[i].\n+ container = document.createElement('div');\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[j]}>{steps[i]}<\/React.Suspense>\n+ <Y \/>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+\n+ \/\/ We get ID from the index in the tree above:\n+ \/\/ Root, X, Suspense, ...\n+ \/\/ ^ (index is 2)\n+ const suspenseID = store.getElementIDAtIndex(2);\n+\n+ \/\/ Force fallback.\n+ expect(print(store)).toEqual(snapshots[i]);\n+ act(() => {\n+ const suspenseID = store.getElementIDAtIndex(2);\n+ bridge.send('overrideSuspense', {\n+ id: suspenseID,\n+ rendererID: store.getRendererIDForElement(suspenseID),\n+ forceFallback: true,\n+ });\n+ });\n+ expect(print(store)).toEqual(snapshots[j]);\n+\n+ \/\/ Stop forcing fallback.\n+ act(() => {\n+ bridge.send('overrideSuspense', {\n+ id: suspenseID,\n+ rendererID: store.getRendererIDForElement(suspenseID),\n+ forceFallback: false,\n+ });\n+ });\n+ expect(print(store)).toEqual(snapshots[i]);\n+\n+ \/\/ Trigger actual fallback.\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[j]}>\n+ <Z \/>\n+ <Never \/>\n+ <Z \/>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+ expect(print(store)).toEqual(snapshots[j]);\n+\n+ \/\/ Force fallback while we're in fallback mode.\n+ act(() => {\n+ bridge.send('overrideSuspense', {\n+ id: suspenseID,\n+ rendererID: store.getRendererIDForElement(suspenseID),\n+ forceFallback: true,\n+ });\n+ });\n+ \/\/ Keep seeing fallback content.\n+ expect(print(store)).toEqual(snapshots[j]);\n+\n+ \/\/ Switch to primary mode.\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[j]}>{steps[i]}<\/React.Suspense>\n+ <Y \/>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+ \/\/ Fallback is still forced though.\n+ expect(print(store)).toEqual(snapshots[j]);\n+\n+ \/\/ Stop forcing fallback. This reverts to primary content.\n+ act(() => {\n+ bridge.send('overrideSuspense', {\n+ id: suspenseID,\n+ rendererID: store.getRendererIDForElement(suspenseID),\n+ forceFallback: false,\n+ });\n+ });\n+ \/\/ Now we see primary content.\n+ expect(print(store)).toEqual(snapshots[i]);\n+\n+ \/\/ Clean up after every iteration.\n+ act(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(print(store)).toBe('');\n+ }\n+ }\n+ });\n+\n+ it('should handle a stress test for Suspense without type change (Sync Mode)', () => {\n+ const A = () => 'a';\n+ const B = () => 'b';\n+ const C = () => 'c';\n+ const X = () => 'x';\n+ const Y = () => 'y';\n+ const Z = () => 'z';\n+ const a = <A key=\"a\" \/>;\n+ const b = <B key=\"b\" \/>;\n+ const c = <C key=\"c\" \/>;\n+ const z = <Z key=\"z\" \/>;\n+\n+ \/\/ prettier-ignore\n+ const steps = [\n+ a,\n+ [a],\n+ [a, b, c],\n+ [c, b, a],\n+ [c, null, a],\n+ <React.Fragment>{c}{a}<\/React.Fragment>,\n+ <div>{c}{a}<\/div>,\n+ <div><span>{a}<\/span>{b}<\/div>,\n+ [[a]],\n+ null,\n+ b,\n+ a\n+ ];\n+\n+ const Never = () => {\n+ throw new Promise(() => {});\n+ };\n+\n+ const MaybeSuspend = ({ children, suspend }) => {\n+ if (suspend) {\n+ return (\n+ <div>\n+ {children}\n+ <Never \/>\n+ <X \/>\n+ <\/div>\n+ );\n+ }\n+ return (\n+ <div>\n+ {children}\n+ <Z \/>\n+ <\/div>\n+ );\n+ };\n+\n+ const Root = ({ children }) => {\n+ return children;\n+ };\n+\n+ \/\/ 1. For each step, check Suspense can render them as initial primary content.\n+ \/\/ This is the only step where we use Jest snapshots.\n+ let snapshots = [];\n+ let container = document.createElement('div');\n+ for (let i = 0; i < steps.length; i++) {\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={z}>\n+ <MaybeSuspend suspend={false}>{steps[i]}<\/MaybeSuspend>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+ \/\/ We snapshot each step once so it doesn't regress.\n+ expect(store).toMatchSnapshot();\n+ snapshots.push(print(store));\n+ act(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(print(store)).toBe('');\n+ }\n+\n+ \/\/ 2. Verify check Suspense can render same steps as initial fallback content.\n+ \/\/ We don't actually assert here because the tree includes <MaybeSuspend>\n+ \/\/ which is different from the snapshots above. So we take more snapshots.\n+ let fallbackSnapshots = [];\n+ for (let i = 0; i < steps.length; i++) {\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[i]}>\n+ <Z \/>\n+ <MaybeSuspend suspend={true}>{steps[i]}<\/MaybeSuspend>\n+ <Z \/>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+ \/\/ We snapshot each step once so it doesn't regress.\n+ expect(store).toMatchSnapshot();\n+ fallbackSnapshots.push(print(store));\n+ act(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(print(store)).toBe('');\n+ }\n+\n+ \/\/ 3. Verify we can update from each step to each step in primary mode.\n+ for (let i = 0; i < steps.length; i++) {\n+ for (let j = 0; j < steps.length; j++) {\n+ \/\/ Always start with a fresh container and steps[i].\n+ container = document.createElement('div');\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={z}>\n+ <MaybeSuspend suspend={false}>{steps[i]}<\/MaybeSuspend>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+ expect(print(store)).toEqual(snapshots[i]);\n+ \/\/ Re-render with steps[j].\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={z}>\n+ <MaybeSuspend suspend={false}>{steps[j]}<\/MaybeSuspend>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+ \/\/ Verify the successful transition to steps[j].\n+ expect(print(store)).toEqual(snapshots[j]);\n+ \/\/ Check that we can transition back again.\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={z}>\n+ <MaybeSuspend suspend={false}>{steps[i]}<\/MaybeSuspend>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+ expect(print(store)).toEqual(snapshots[i]);\n+ \/\/ Clean up after every iteration.\n+ act(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(print(store)).toBe('');\n+ }\n+ }\n+\n+ \/\/ 4. Verify we can update from each step to each step in fallback mode.\n+ for (let i = 0; i < steps.length; i++) {\n+ for (let j = 0; j < steps.length; j++) {\n+ \/\/ Always start with a fresh container and steps[i].\n+ container = document.createElement('div');\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[i]}>\n+ <Z \/>\n+ <MaybeSuspend suspend={true}>\n+ <X \/>\n+ <Y \/>\n+ <\/MaybeSuspend>\n+ <Z \/>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+ expect(print(store)).toEqual(fallbackSnapshots[i]);\n+ \/\/ Re-render with steps[j].\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[j]}>\n+ <Z \/>\n+ <MaybeSuspend suspend={true}>\n+ <Y \/>\n+ <X \/>\n+ <\/MaybeSuspend>\n+ <Z \/>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+ \/\/ Verify the successful transition to steps[j].\n+ expect(print(store)).toEqual(fallbackSnapshots[j]);\n+ \/\/ Check that we can transition back again.\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[i]}>\n+ <Z \/>\n+ <MaybeSuspend suspend={true}>\n+ <X \/>\n+ <Y \/>\n+ <\/MaybeSuspend>\n+ <Z \/>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+ expect(print(store)).toEqual(fallbackSnapshots[i]);\n+ \/\/ Clean up after every iteration.\n+ act(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(print(store)).toBe('');\n+ }\n+ }\n+\n+ \/\/ 5. Verify we can update from each step to each step when moving primary -> fallback.\n+ for (let i = 0; i < steps.length; i++) {\n+ for (let j = 0; j < steps.length; j++) {\n+ \/\/ Always start with a fresh container and steps[i].\n+ container = document.createElement('div');\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={z}>\n+ <MaybeSuspend suspend={false}>{steps[i]}<\/MaybeSuspend>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+ expect(print(store)).toEqual(snapshots[i]);\n+ \/\/ Re-render with steps[j].\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[j]}>\n+ <MaybeSuspend suspend={true}>{steps[i]}<\/MaybeSuspend>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+ \/\/ Verify the successful transition to steps[j].\n+ expect(print(store)).toEqual(fallbackSnapshots[j]);\n+ \/\/ Check that we can transition back again.\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={z}>\n+ <MaybeSuspend suspend={false}>{steps[i]}<\/MaybeSuspend>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+ expect(print(store)).toEqual(snapshots[i]);\n+ \/\/ Clean up after every iteration.\n+ act(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(print(store)).toBe('');\n+ }\n+ }\n+\n+ \/\/ 6. Verify we can update from each step to each step when moving fallback -> primary.\n+ for (let i = 0; i < steps.length; i++) {\n+ for (let j = 0; j < steps.length; j++) {\n+ \/\/ Always start with a fresh container and steps[i].\n+ container = document.createElement('div');\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[i]}>\n+ <MaybeSuspend suspend={true}>{steps[j]}<\/MaybeSuspend>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+ expect(print(store)).toEqual(fallbackSnapshots[i]);\n+ \/\/ Re-render with steps[j].\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[i]}>\n+ <MaybeSuspend suspend={false}>{steps[j]}<\/MaybeSuspend>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+ \/\/ Verify the successful transition to steps[j].\n+ expect(print(store)).toEqual(snapshots[j]);\n+ \/\/ Check that we can transition back again.\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[i]}>\n+ <MaybeSuspend suspend={true}>{steps[j]}<\/MaybeSuspend>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+ expect(print(store)).toEqual(fallbackSnapshots[i]);\n+ \/\/ Clean up after every iteration.\n+ act(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(print(store)).toBe('');\n+ }\n+ }\n+\n+ \/\/ 7. Verify we can update from each step to each step when toggling Suspense.\n+ for (let i = 0; i < steps.length; i++) {\n+ for (let j = 0; j < steps.length; j++) {\n+ \/\/ Always start with a fresh container and steps[i].\n+ container = document.createElement('div');\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[j]}>\n+ <MaybeSuspend suspend={false}>{steps[i]}<\/MaybeSuspend>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+\n+ \/\/ We get ID from the index in the tree above:\n+ \/\/ Root, X, Suspense, ...\n+ \/\/ ^ (index is 2)\n+ const suspenseID = store.getElementIDAtIndex(2);\n+\n+ \/\/ Force fallback.\n+ expect(print(store)).toEqual(snapshots[i]);\n+ act(() => {\n+ const suspenseID = store.getElementIDAtIndex(2);\n+ bridge.send('overrideSuspense', {\n+ id: suspenseID,\n+ rendererID: store.getRendererIDForElement(suspenseID),\n+ forceFallback: true,\n+ });\n+ });\n+ expect(print(store)).toEqual(fallbackSnapshots[j]);\n+\n+ \/\/ Stop forcing fallback.\n+ act(() => {\n+ bridge.send('overrideSuspense', {\n+ id: suspenseID,\n+ rendererID: store.getRendererIDForElement(suspenseID),\n+ forceFallback: false,\n+ });\n+ });\n+ expect(print(store)).toEqual(snapshots[i]);\n+\n+ \/\/ Trigger actual fallback.\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[j]}>\n+ <MaybeSuspend suspend={true}>{steps[i]}<\/MaybeSuspend>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+ expect(print(store)).toEqual(fallbackSnapshots[j]);\n+\n+ \/\/ Force fallback while we're in fallback mode.\n+ act(() => {\n+ bridge.send('overrideSuspense', {\n+ id: suspenseID,\n+ rendererID: store.getRendererIDForElement(suspenseID),\n+ forceFallback: true,\n+ });\n+ });\n+ \/\/ Keep seeing fallback content.\n+ expect(print(store)).toEqual(fallbackSnapshots[j]);\n+\n+ \/\/ Switch to primary mode.\n+ act(() =>\n+ ReactDOM.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[j]}>\n+ <MaybeSuspend suspend={false}>{steps[i]}<\/MaybeSuspend>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>,\n+ container\n+ )\n+ );\n+ \/\/ Fallback is still forced though.\n+ expect(print(store)).toEqual(fallbackSnapshots[j]);\n+\n+ \/\/ Stop forcing fallback. This reverts to primary content.\n+ act(() => {\n+ bridge.send('overrideSuspense', {\n+ id: suspenseID,\n+ rendererID: store.getRendererIDForElement(suspenseID),\n+ forceFallback: false,\n+ });\n+ });\n+ \/\/ Now we see primary content.\n+ expect(print(store)).toEqual(snapshots[i]);\n+\n+ \/\/ Clean up after every iteration.\n+ act(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(print(store)).toBe('');\n+ }\n+ }\n+ });\n+});\ndiff --git a\/src\/__tests__\/storeStressTestConcurrent-test.js b\/src\/__tests__\/storeStressTestConcurrent-test.js\nnew file mode 100644\nindex 0000000000..d2a834ca98\n--- \/dev\/null\n+++ b\/src\/__tests__\/storeStressTestConcurrent-test.js\n@@ -0,0 +1,1094 @@\n+\/\/ @flow\n+\n+describe('StoreStressConcurrent', () => {\n+ let React;\n+ let ReactDOM;\n+ let act;\n+ let bridge;\n+ let store;\n+ let print;\n+\n+ beforeEach(() => {\n+ bridge = global.bridge;\n+ store = global.store;\n+ store.collapseNodesByDefault = false;\n+\n+ React = require('react');\n+ ReactDOM = require('react-dom');\n+ act = require('.\/utils').act;\n+\n+ print = require('.\/storeSerializer').print;\n+ });\n+\n+ \/\/ This is a stress test for the tree mount\/update\/unmount traversal.\n+ \/\/ It renders different trees that should produce the same output.\n+ it('should handle a stress test with different tree operations (Concurrent Mode)', () => {\n+ let setShowX;\n+ const A = () => 'a';\n+ const B = () => 'b';\n+ const C = () => {\n+ \/\/ We'll be manually flipping this component back and forth in the test.\n+ \/\/ We only do this for a single node in order to verify that DevTools\n+ \/\/ can handle a subtree switching alternates while other subtrees are memoized.\n+ let [showX, _setShowX] = React.useState(false);\n+ setShowX = _setShowX;\n+ return showX ? <X \/> : 'c';\n+ };\n+ const D = () => 'd';\n+ const E = () => 'e';\n+ const X = () => 'x';\n+ const a = <A key=\"a\" \/>;\n+ const b = <B key=\"b\" \/>;\n+ const c = <C key=\"c\" \/>;\n+ const d = <D key=\"d\" \/>;\n+ const e = <E key=\"e\" \/>;\n+\n+ function Parent({ children }) {\n+ return children;\n+ }\n+\n+ \/\/ 1. Render a normal version of [a, b, c, d, e].\n+ let container = document.createElement('div');\n+ \/\/ $FlowFixMe\n+ let root = ReactDOM.unstable_createRoot(container);\n+ act(() => root.render(<Parent>{[a, b, c, d, e]}<\/Parent>));\n+ expect(store).toMatchSnapshot('1: abcde');\n+ expect(container.textContent).toMatch('abcde');\n+ const snapshotForABCDE = print(store);\n+\n+ \/\/ 2. Render a version where <C \/> renders an <X \/> child instead of 'c'.\n+ \/\/ This is how we'll test an update to a single component.\n+ act(() => {\n+ setShowX(true);\n+ });\n+ expect(store).toMatchSnapshot('2: abxde');\n+ expect(container.textContent).toMatch('abxde');\n+ const snapshotForABXDE = print(store);\n+\n+ \/\/ 3. Verify flipping it back produces the original result.\n+ act(() => {\n+ setShowX(false);\n+ });\n+ expect(container.textContent).toMatch('abcde');\n+ expect(print(store)).toBe(snapshotForABCDE);\n+\n+ \/\/ 4. Clean up.\n+ act(() => root.unmount());\n+ expect(print(store)).toBe('');\n+\n+ \/\/ Now comes the interesting part.\n+ \/\/ All of these cases are equivalent to [a, b, c, d, e] in output.\n+ \/\/ We'll verify that DevTools produces the same snapshots for them.\n+ \/\/ These cases are picked so that rendering them sequentially in the same\n+ \/\/ container results in a combination of mounts, updates, unmounts, and reorders.\n+ \/\/ prettier-ignore\n+ let cases = [\n+ [a, b, c, d, e],\n+ [[a], b, c, d, e],\n+ [[a, b], c, d, e],\n+ [[a, b], c, [d, e]],\n+ [[a, b], c, [d, '', e]],\n+ [[a], b, c, d, [e]],\n+ [a, b, [[c]], d, e],\n+ [[a, ''], [b], [c], [d], [e]],\n+ [a, b, [c, [d, ['', e]]]],\n+ [a, b, c, d, e],\n+ [<div key=\"0\">{a}<\/div>, b, c, d, e],\n+ [<div key=\"0\">{a}{b}<\/div>, c, d, e],\n+ [<div key=\"0\">{a}{b}<\/div>, c, <div key=\"1\">{d}{e}<\/div>],\n+ [<div key=\"1\">{a}{b}<\/div>, c, <div key=\"0\">{d}{e}<\/div>],\n+ [<div key=\"0\">{a}{b}<\/div>, c, <div key=\"1\">{d}{e}<\/div>],\n+ [<div key=\"2\">{a}{b}<\/div>, c, <div key=\"3\">{d}{e}<\/div>],\n+ [<span key=\"0\">{a}<\/span>, b, c, d, [e]],\n+ [a, b, <span key=\"0\"><span>{c}<\/span><\/span>, d, e],\n+ [<div key=\"0\">{a}<\/div>, [b], <span key=\"1\">{c}<\/span>, [d], <div key=\"2\">{e}<\/div>],\n+ [a, b, [c, <div key=\"0\">{d}<span>{e}<\/span><\/div>], ''],\n+ [a, [[]], b, c, [d, [[]], e]],\n+ [[[a, b, c, d], e]],\n+ [a, b, c, d, e]\n+ ];\n+\n+ \/\/ 5. Test fresh mount for each case.\n+ for (let i = 0; i < cases.length; i++) {\n+ \/\/ Ensure fresh mount.\n+ container = document.createElement('div');\n+ \/\/ $FlowFixMe\n+ root = ReactDOM.unstable_createRoot(container);\n+\n+ \/\/ Verify mounting 'abcde'.\n+ act(() => root.render(<Parent>{cases[i]}<\/Parent>));\n+ expect(container.textContent).toMatch('abcde');\n+ expect(print(store)).toEqual(snapshotForABCDE);\n+\n+ \/\/ Verify switching to 'abxde'.\n+ act(() => {\n+ setShowX(true);\n+ });\n+ expect(container.textContent).toMatch('abxde');\n+ expect(print(store)).toBe(snapshotForABXDE);\n+\n+ \/\/ Verify switching back to 'abcde'.\n+ act(() => {\n+ setShowX(false);\n+ });\n+ expect(container.textContent).toMatch('abcde');\n+ expect(print(store)).toBe(snapshotForABCDE);\n+\n+ \/\/ Clean up.\n+ act(() => root.unmount());\n+ expect(print(store)).toBe('');\n+ }\n+\n+ \/\/ 6. Verify *updates* by reusing the container between iterations.\n+ \/\/ There'll be no unmounting until the very end.\n+ container = document.createElement('div');\n+ \/\/ $FlowFixMe\n+ root = ReactDOM.unstable_createRoot(container);\n+ for (let i = 0; i < cases.length; i++) {\n+ \/\/ Verify mounting 'abcde'.\n+ act(() => root.render(<Parent>{cases[i]}<\/Parent>));\n+ expect(container.textContent).toMatch('abcde');\n+ expect(print(store)).toEqual(snapshotForABCDE);\n+\n+ \/\/ Verify switching to 'abxde'.\n+ act(() => {\n+ setShowX(true);\n+ });\n+ expect(container.textContent).toMatch('abxde');\n+ expect(print(store)).toBe(snapshotForABXDE);\n+\n+ \/\/ Verify switching back to 'abcde'.\n+ act(() => {\n+ setShowX(false);\n+ });\n+ expect(container.textContent).toMatch('abcde');\n+ expect(print(store)).toBe(snapshotForABCDE);\n+ \/\/ Don't unmount. Reuse the container between iterations.\n+ }\n+ act(() => root.unmount());\n+ expect(print(store)).toBe('');\n+ });\n+\n+ it('should handle stress test with reordering (Concurrent Mode)', () => {\n+ const A = () => 'a';\n+ const B = () => 'b';\n+ const C = () => 'c';\n+ const D = () => 'd';\n+ const E = () => 'e';\n+ const a = <A key=\"a\" \/>;\n+ const b = <B key=\"b\" \/>;\n+ const c = <C key=\"c\" \/>;\n+ const d = <D key=\"d\" \/>;\n+ const e = <E key=\"e\" \/>;\n+\n+ \/\/ prettier-ignore\n+ let steps = [\n+ a,\n+ b,\n+ c,\n+ d,\n+ e,\n+ [a],\n+ [b],\n+ [c],\n+ [d],\n+ [e],\n+ [a, b],\n+ [b, a],\n+ [b, c],\n+ [c, b],\n+ [a, c],\n+ [c, a],\n+ ];\n+\n+ const Root = ({ children }) => {\n+ return children;\n+ };\n+\n+ \/\/ 1. Capture the expected render result.\n+ let snapshots = [];\n+ let container = document.createElement('div');\n+ \/\/ $FlowFixMe\n+ let root = ReactDOM.unstable_createRoot(container);\n+ for (let i = 0; i < steps.length; i++) {\n+ act(() => root.render(<Root>{steps[i]}<\/Root>));\n+ \/\/ We snapshot each step once so it doesn't regress.\n+ expect(store).toMatchSnapshot();\n+ snapshots.push(print(store));\n+ act(() => root.unmount());\n+ expect(print(store)).toBe('');\n+ }\n+\n+ \/\/ 2. Verify that we can update from every step to every other step and back.\n+ for (let i = 0; i < steps.length; i++) {\n+ for (let j = 0; j < steps.length; j++) {\n+ let container = document.createElement('div');\n+ \/\/ $FlowFixMe\n+ let root = ReactDOM.unstable_createRoot(container);\n+ act(() => root.render(<Root>{steps[i]}<\/Root>));\n+ expect(print(store)).toMatch(snapshots[i]);\n+ act(() => root.render(<Root>{steps[j]}<\/Root>));\n+ expect(print(store)).toMatch(snapshots[j]);\n+ act(() => root.render(<Root>{steps[i]}<\/Root>));\n+ expect(print(store)).toMatch(snapshots[i]);\n+ act(() => root.unmount());\n+ expect(print(store)).toBe('');\n+ }\n+ }\n+\n+ \/\/ 3. Same test as above, but this time we wrap children in a host component.\n+ for (let i = 0; i < steps.length; i++) {\n+ for (let j = 0; j < steps.length; j++) {\n+ let container = document.createElement('div');\n+ \/\/ $FlowFixMe\n+ let root = ReactDOM.unstable_createRoot(container);\n+ act(() =>\n+ root.render(\n+ <Root>\n+ <div>{steps[i]}<\/div>\n+ <\/Root>\n+ )\n+ );\n+ expect(print(store)).toMatch(snapshots[i]);\n+ act(() =>\n+ root.render(\n+ <Root>\n+ <div>{steps[j]}<\/div>\n+ <\/Root>\n+ )\n+ );\n+ expect(print(store)).toMatch(snapshots[j]);\n+ act(() =>\n+ root.render(\n+ <Root>\n+ <div>{steps[i]}<\/div>\n+ <\/Root>\n+ )\n+ );\n+ expect(print(store)).toMatch(snapshots[i]);\n+ act(() => root.unmount());\n+ expect(print(store)).toBe('');\n+ }\n+ }\n+ });\n+\n+ it('should handle a stress test for Suspense (Concurrent Mode)', async () => {\n+ const A = () => 'a';\n+ const B = () => 'b';\n+ const C = () => 'c';\n+ const X = () => 'x';\n+ const Y = () => 'y';\n+ const Z = () => 'z';\n+ const a = <A key=\"a\" \/>;\n+ const b = <B key=\"b\" \/>;\n+ const c = <C key=\"c\" \/>;\n+ const z = <Z key=\"z\" \/>;\n+\n+ \/\/ prettier-ignore\n+ const steps = [\n+ a,\n+ [a],\n+ [a, b, c],\n+ [c, b, a],\n+ [c, null, a],\n+ <React.Fragment>{c}{a}<\/React.Fragment>,\n+ <div>{c}{a}<\/div>,\n+ <div><span>{a}<\/span>{b}<\/div>,\n+ [[a]],\n+ null,\n+ b,\n+ a\n+ ];\n+\n+ const Never = () => {\n+ throw new Promise(() => {});\n+ };\n+\n+ const Root = ({ children }) => {\n+ return children;\n+ };\n+\n+ \/\/ 1. For each step, check Suspense can render them as initial primary content.\n+ \/\/ This is the only step where we use Jest snapshots.\n+ let snapshots = [];\n+ let container = document.createElement('div');\n+ \/\/ $FlowFixMe\n+ let root = ReactDOM.unstable_createRoot(container);\n+ for (let i = 0; i < steps.length; i++) {\n+ act(() =>\n+ root.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={z}>{steps[i]}<\/React.Suspense>\n+ <Y \/>\n+ <\/Root>\n+ )\n+ );\n+ \/\/ We snapshot each step once so it doesn't regress.\n+ expect(store).toMatchSnapshot();\n+ snapshots.push(print(store));\n+ act(() => root.unmount());\n+ expect(print(store)).toBe('');\n+ }\n+\n+ \/\/ 2. Verify check Suspense can render same steps as initial fallback content.\n+ for (let i = 0; i < steps.length; i++) {\n+ act(() =>\n+ root.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[i]}>\n+ <Z \/>\n+ <Never \/>\n+ <Z \/>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>\n+ )\n+ );\n+ expect(print(store)).toEqual(snapshots[i]);\n+ act(() => root.unmount());\n+ expect(print(store)).toBe('');\n+ }\n+\n+ \/\/ 3. Verify we can update from each step to each step in primary mode.\n+ for (let i = 0; i < steps.length; i++) {\n+ for (let j = 0; j < steps.length; j++) {\n+ \/\/ Always start with a fresh container and steps[i].\n+ container = document.createElement('div');\n+ \/\/ $FlowFixMe\n+ root = ReactDOM.unstable_createRoot(container);\n+ act(() =>\n+ root.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={z}>{steps[i]}<\/React.Suspense>\n+ <Y \/>\n+ <\/Root>\n+ )\n+ );\n+ expect(print(store)).toEqual(snapshots[i]);\n+ \/\/ Re-render with steps[j].\n+ act(() =>\n+ root.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={z}>{steps[j]}<\/React.Suspense>\n+ <Y \/>\n+ <\/Root>\n+ )\n+ );\n+ \/\/ Verify the successful transition to steps[j].\n+ expect(print(store)).toEqual(snapshots[j]);\n+ \/\/ Check that we can transition back again.\n+ act(() =>\n+ root.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={z}>{steps[i]}<\/React.Suspense>\n+ <Y \/>\n+ <\/Root>\n+ )\n+ );\n+ expect(print(store)).toEqual(snapshots[i]);\n+ \/\/ Clean up after every iteration.\n+ act(() => root.unmount());\n+ expect(print(store)).toBe('');\n+ }\n+ }\n+\n+ \/\/ 4. Verify we can update from each step to each step in fallback mode.\n+ for (let i = 0; i < steps.length; i++) {\n+ for (let j = 0; j < steps.length; j++) {\n+ \/\/ Always start with a fresh container and steps[i].\n+ container = document.createElement('div');\n+ \/\/ $FlowFixMe\n+ root = ReactDOM.unstable_createRoot(container);\n+ act(() =>\n+ root.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[i]}>\n+ <Z \/>\n+ <Never \/>\n+ <Z \/>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>\n+ )\n+ );\n+ expect(print(store)).toEqual(snapshots[i]);\n+ \/\/ Re-render with steps[j].\n+ act(() =>\n+ root.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[j]}>\n+ <Z \/>\n+ <Never \/>\n+ <Z \/>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>\n+ )\n+ );\n+ \/\/ Verify the successful transition to steps[j].\n+ expect(print(store)).toEqual(snapshots[j]);\n+ \/\/ Check that we can transition back again.\n+ act(() =>\n+ root.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[i]}>\n+ <Z \/>\n+ <Never \/>\n+ <Z \/>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>\n+ )\n+ );\n+ expect(print(store)).toEqual(snapshots[i]);\n+ \/\/ Clean up after every iteration.\n+ act(() => root.unmount());\n+ expect(print(store)).toBe('');\n+ }\n+ }\n+\n+ \/\/ 5. Verify we can update from each step to each step when moving primary -> fallback.\n+ for (let i = 0; i < steps.length; i++) {\n+ for (let j = 0; j < steps.length; j++) {\n+ \/\/ Always start with a fresh container and steps[i].\n+ container = document.createElement('div');\n+ \/\/ $FlowFixMe\n+ root = ReactDOM.unstable_createRoot(container);\n+ act(() =>\n+ root.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={z}>{steps[i]}<\/React.Suspense>\n+ <Y \/>\n+ <\/Root>\n+ )\n+ );\n+ expect(print(store)).toEqual(snapshots[i]);\n+ \/\/ Re-render with steps[j].\n+ act(() =>\n+ root.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[j]}>\n+ <Z \/>\n+ <Never \/>\n+ <Z \/>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>\n+ )\n+ );\n+ \/\/ Verify the successful transition to steps[j].\n+ expect(print(store)).toEqual(snapshots[j]);\n+ \/\/ Check that we can transition back again.\n+ act(() =>\n+ root.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={z}>{steps[i]}<\/React.Suspense>\n+ <Y \/>\n+ <\/Root>\n+ )\n+ );\n+ expect(print(store)).toEqual(snapshots[i]);\n+ \/\/ Clean up after every iteration.\n+ act(() => root.unmount());\n+ expect(print(store)).toBe('');\n+ }\n+ }\n+\n+ \/\/ 6. Verify we can update from each step to each step when moving fallback -> primary.\n+ for (let i = 0; i < steps.length; i++) {\n+ for (let j = 0; j < steps.length; j++) {\n+ \/\/ Always start with a fresh container and steps[i].\n+ container = document.createElement('div');\n+ \/\/ $FlowFixMe\n+ root = ReactDOM.unstable_createRoot(container);\n+ act(() =>\n+ root.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[i]}>\n+ <Z \/>\n+ <Never \/>\n+ <Z \/>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>\n+ )\n+ );\n+ expect(print(store)).toEqual(snapshots[i]);\n+ \/\/ Re-render with steps[j].\n+ act(() =>\n+ root.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={z}>{steps[j]}<\/React.Suspense>\n+ <Y \/>\n+ <\/Root>\n+ )\n+ );\n+ \/\/ Verify the successful transition to steps[j].\n+ expect(print(store)).toEqual(snapshots[j]);\n+ \/\/ Check that we can transition back again.\n+ act(() =>\n+ root.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[i]}>\n+ <Z \/>\n+ <Never \/>\n+ <Z \/>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>\n+ )\n+ );\n+ expect(print(store)).toEqual(snapshots[i]);\n+ \/\/ Clean up after every iteration.\n+ act(() => root.unmount());\n+ expect(print(store)).toBe('');\n+ }\n+ }\n+\n+ \/\/ 7. Verify we can update from each step to each step when toggling Suspense.\n+ for (let i = 0; i < steps.length; i++) {\n+ for (let j = 0; j < steps.length; j++) {\n+ \/\/ Always start with a fresh container and steps[i].\n+ container = document.createElement('div');\n+ \/\/ $FlowFixMe\n+ root = ReactDOM.unstable_createRoot(container);\n+ act(() =>\n+ root.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[j]}>{steps[i]}<\/React.Suspense>\n+ <Y \/>\n+ <\/Root>\n+ )\n+ );\n+\n+ \/\/ We get ID from the index in the tree above:\n+ \/\/ Root, X, Suspense, ...\n+ \/\/ ^ (index is 2)\n+ const suspenseID = store.getElementIDAtIndex(2);\n+\n+ \/\/ Force fallback.\n+ expect(print(store)).toEqual(snapshots[i]);\n+ act(() => {\n+ const suspenseID = store.getElementIDAtIndex(2);\n+ bridge.send('overrideSuspense', {\n+ id: suspenseID,\n+ rendererID: store.getRendererIDForElement(suspenseID),\n+ forceFallback: true,\n+ });\n+ });\n+ expect(print(store)).toEqual(snapshots[j]);\n+\n+ \/\/ Stop forcing fallback.\n+ act(() => {\n+ bridge.send('overrideSuspense', {\n+ id: suspenseID,\n+ rendererID: store.getRendererIDForElement(suspenseID),\n+ forceFallback: false,\n+ });\n+ });\n+ expect(print(store)).toEqual(snapshots[i]);\n+\n+ \/\/ Trigger actual fallback.\n+ act(() =>\n+ root.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[j]}>\n+ <Z \/>\n+ <Never \/>\n+ <Z \/>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>\n+ )\n+ );\n+ expect(print(store)).toEqual(snapshots[j]);\n+\n+ \/\/ Force fallback while we're in fallback mode.\n+ act(() => {\n+ bridge.send('overrideSuspense', {\n+ id: suspenseID,\n+ rendererID: store.getRendererIDForElement(suspenseID),\n+ forceFallback: true,\n+ });\n+ });\n+ \/\/ Keep seeing fallback content.\n+ expect(print(store)).toEqual(snapshots[j]);\n+\n+ \/\/ Switch to primary mode.\n+ act(() =>\n+ root.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[j]}>{steps[i]}<\/React.Suspense>\n+ <Y \/>\n+ <\/Root>\n+ )\n+ );\n+ \/\/ Fallback is still forced though.\n+ expect(print(store)).toEqual(snapshots[j]);\n+\n+ \/\/ Stop forcing fallback. This reverts to primary content.\n+ act(() => {\n+ bridge.send('overrideSuspense', {\n+ id: suspenseID,\n+ rendererID: store.getRendererIDForElement(suspenseID),\n+ forceFallback: false,\n+ });\n+ });\n+ \/\/ Now we see primary content.\n+ expect(print(store)).toEqual(snapshots[i]);\n+\n+ \/\/ Clean up after every iteration.\n+ act(() => root.unmount());\n+ expect(print(store)).toBe('');\n+ }\n+ }\n+ });\n+\n+ it('should handle a stress test for Suspense without type change (Concurrent Mode)', () => {\n+ const A = () => 'a';\n+ const B = () => 'b';\n+ const C = () => 'c';\n+ const X = () => 'x';\n+ const Y = () => 'y';\n+ const Z = () => 'z';\n+ const a = <A key=\"a\" \/>;\n+ const b = <B key=\"b\" \/>;\n+ const c = <C key=\"c\" \/>;\n+ const z = <Z key=\"z\" \/>;\n+\n+ \/\/ prettier-ignore\n+ const steps = [\n+ a,\n+ [a],\n+ [a, b, c],\n+ [c, b, a],\n+ [c, null, a],\n+ <React.Fragment>{c}{a}<\/React.Fragment>,\n+ <div>{c}{a}<\/div>,\n+ <div><span>{a}<\/span>{b}<\/div>,\n+ [[a]],\n+ null,\n+ b,\n+ a\n+ ];\n+\n+ const Never = () => {\n+ throw new Promise(() => {});\n+ };\n+\n+ const MaybeSuspend = ({ children, suspend }) => {\n+ if (suspend) {\n+ return (\n+ <div>\n+ {children}\n+ <Never \/>\n+ <X \/>\n+ <\/div>\n+ );\n+ }\n+ return (\n+ <div>\n+ {children}\n+ <Z \/>\n+ <\/div>\n+ );\n+ };\n+\n+ const Root = ({ children }) => {\n+ return children;\n+ };\n+\n+ \/\/ 1. For each step, check Suspense can render them as initial primary content.\n+ \/\/ This is the only step where we use Jest snapshots.\n+ let snapshots = [];\n+ let container = document.createElement('div');\n+ \/\/ $FlowFixMe\n+ let root = ReactDOM.unstable_createRoot(container);\n+ for (let i = 0; i < steps.length; i++) {\n+ act(() =>\n+ root.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={z}>\n+ <MaybeSuspend suspend={false}>{steps[i]}<\/MaybeSuspend>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>\n+ )\n+ );\n+ \/\/ We snapshot each step once so it doesn't regress.\n+ expect(store).toMatchSnapshot();\n+ snapshots.push(print(store));\n+ act(() => root.unmount());\n+ expect(print(store)).toBe('');\n+ }\n+\n+ \/\/ 2. Verify check Suspense can render same steps as initial fallback content.\n+ \/\/ We don't actually assert here because the tree includes <MaybeSuspend>\n+ \/\/ which is different from the snapshots above. So we take more snapshots.\n+ let fallbackSnapshots = [];\n+ for (let i = 0; i < steps.length; i++) {\n+ act(() =>\n+ root.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[i]}>\n+ <Z \/>\n+ <MaybeSuspend suspend={true}>{steps[i]}<\/MaybeSuspend>\n+ <Z \/>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>\n+ )\n+ );\n+ \/\/ We snapshot each step once so it doesn't regress.\n+ expect(store).toMatchSnapshot();\n+ fallbackSnapshots.push(print(store));\n+ act(() => root.unmount());\n+ expect(print(store)).toBe('');\n+ }\n+\n+ \/\/ 3. Verify we can update from each step to each step in primary mode.\n+ for (let i = 0; i < steps.length; i++) {\n+ for (let j = 0; j < steps.length; j++) {\n+ \/\/ Always start with a fresh container and steps[i].\n+ container = document.createElement('div');\n+ \/\/ $FlowFixMe\n+ root = ReactDOM.unstable_createRoot(container);\n+ act(() =>\n+ root.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={z}>\n+ <MaybeSuspend suspend={false}>{steps[i]}<\/MaybeSuspend>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>\n+ )\n+ );\n+ expect(print(store)).toEqual(snapshots[i]);\n+ \/\/ Re-render with steps[j].\n+ act(() =>\n+ root.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={z}>\n+ <MaybeSuspend suspend={false}>{steps[j]}<\/MaybeSuspend>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>\n+ )\n+ );\n+ \/\/ Verify the successful transition to steps[j].\n+ expect(print(store)).toEqual(snapshots[j]);\n+ \/\/ Check that we can transition back again.\n+ act(() =>\n+ root.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={z}>\n+ <MaybeSuspend suspend={false}>{steps[i]}<\/MaybeSuspend>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>\n+ )\n+ );\n+ expect(print(store)).toEqual(snapshots[i]);\n+ \/\/ Clean up after every iteration.\n+ act(() => root.unmount());\n+ expect(print(store)).toBe('');\n+ }\n+ }\n+\n+ \/\/ 4. Verify we can update from each step to each step in fallback mode.\n+ for (let i = 0; i < steps.length; i++) {\n+ for (let j = 0; j < steps.length; j++) {\n+ \/\/ Always start with a fresh container and steps[i].\n+ container = document.createElement('div');\n+ \/\/ $FlowFixMe\n+ root = ReactDOM.unstable_createRoot(container);\n+ act(() =>\n+ root.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[i]}>\n+ <Z \/>\n+ <MaybeSuspend suspend={true}>\n+ <X \/>\n+ <Y \/>\n+ <\/MaybeSuspend>\n+ <Z \/>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>\n+ )\n+ );\n+ expect(print(store)).toEqual(fallbackSnapshots[i]);\n+ \/\/ Re-render with steps[j].\n+ act(() =>\n+ root.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[j]}>\n+ <Z \/>\n+ <MaybeSuspend suspend={true}>\n+ <Y \/>\n+ <X \/>\n+ <\/MaybeSuspend>\n+ <Z \/>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>\n+ )\n+ );\n+ \/\/ Verify the successful transition to steps[j].\n+ expect(print(store)).toEqual(fallbackSnapshots[j]);\n+ \/\/ Check that we can transition back again.\n+ act(() =>\n+ root.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[i]}>\n+ <Z \/>\n+ <MaybeSuspend suspend={true}>\n+ <X \/>\n+ <Y \/>\n+ <\/MaybeSuspend>\n+ <Z \/>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>\n+ )\n+ );\n+ expect(print(store)).toEqual(fallbackSnapshots[i]);\n+ \/\/ Clean up after every iteration.\n+ act(() => root.unmount());\n+ expect(print(store)).toBe('');\n+ }\n+ }\n+\n+ \/\/ 5. Verify we can update from each step to each step when moving primary -> fallback.\n+ for (let i = 0; i < steps.length; i++) {\n+ for (let j = 0; j < steps.length; j++) {\n+ \/\/ Always start with a fresh container and steps[i].\n+ container = document.createElement('div');\n+ \/\/ $FlowFixMe\n+ root = ReactDOM.unstable_createRoot(container);\n+ act(() =>\n+ root.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={z}>\n+ <MaybeSuspend suspend={false}>{steps[i]}<\/MaybeSuspend>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>\n+ )\n+ );\n+ expect(print(store)).toEqual(snapshots[i]);\n+ \/\/ Re-render with steps[j].\n+ act(() =>\n+ root.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[j]}>\n+ <MaybeSuspend suspend={true}>{steps[i]}<\/MaybeSuspend>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>\n+ )\n+ );\n+ \/\/ Verify the successful transition to steps[j].\n+ expect(print(store)).toEqual(fallbackSnapshots[j]);\n+ \/\/ Check that we can transition back again.\n+ act(() =>\n+ root.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={z}>\n+ <MaybeSuspend suspend={false}>{steps[i]}<\/MaybeSuspend>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>\n+ )\n+ );\n+ expect(print(store)).toEqual(snapshots[i]);\n+ \/\/ Clean up after every iteration.\n+ act(() => root.unmount());\n+ expect(print(store)).toBe('');\n+ }\n+ }\n+\n+ \/\/ 6. Verify we can update from each step to each step when moving fallback -> primary.\n+ for (let i = 0; i < steps.length; i++) {\n+ for (let j = 0; j < steps.length; j++) {\n+ \/\/ Always start with a fresh container and steps[i].\n+ container = document.createElement('div');\n+ \/\/ $FlowFixMe\n+ root = ReactDOM.unstable_createRoot(container);\n+ act(() =>\n+ root.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[i]}>\n+ <MaybeSuspend suspend={true}>{steps[j]}<\/MaybeSuspend>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>\n+ )\n+ );\n+ expect(print(store)).toEqual(fallbackSnapshots[i]);\n+ \/\/ Re-render with steps[j].\n+ act(() =>\n+ root.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[i]}>\n+ <MaybeSuspend suspend={false}>{steps[j]}<\/MaybeSuspend>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>\n+ )\n+ );\n+ \/\/ Verify the successful transition to steps[j].\n+ expect(print(store)).toEqual(snapshots[j]);\n+ \/\/ Check that we can transition back again.\n+ act(() =>\n+ root.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[i]}>\n+ <MaybeSuspend suspend={true}>{steps[j]}<\/MaybeSuspend>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>\n+ )\n+ );\n+ expect(print(store)).toEqual(fallbackSnapshots[i]);\n+ \/\/ Clean up after every iteration.\n+ act(() => root.unmount());\n+ expect(print(store)).toBe('');\n+ }\n+ }\n+\n+ \/\/ 7. Verify we can update from each step to each step when toggling Suspense.\n+ for (let i = 0; i < steps.length; i++) {\n+ for (let j = 0; j < steps.length; j++) {\n+ \/\/ Always start with a fresh container and steps[i].\n+ container = document.createElement('div');\n+ \/\/ $FlowFixMe\n+ root = ReactDOM.unstable_createRoot(container);\n+ act(() =>\n+ root.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[j]}>\n+ <MaybeSuspend suspend={false}>{steps[i]}<\/MaybeSuspend>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>\n+ )\n+ );\n+\n+ \/\/ We get ID from the index in the tree above:\n+ \/\/ Root, X, Suspense, ...\n+ \/\/ ^ (index is 2)\n+ const suspenseID = store.getElementIDAtIndex(2);\n+\n+ \/\/ Force fallback.\n+ expect(print(store)).toEqual(snapshots[i]);\n+ act(() => {\n+ const suspenseID = store.getElementIDAtIndex(2);\n+ bridge.send('overrideSuspense', {\n+ id: suspenseID,\n+ rendererID: store.getRendererIDForElement(suspenseID),\n+ forceFallback: true,\n+ });\n+ });\n+ expect(print(store)).toEqual(fallbackSnapshots[j]);\n+\n+ \/\/ Stop forcing fallback.\n+ act(() => {\n+ bridge.send('overrideSuspense', {\n+ id: suspenseID,\n+ rendererID: store.getRendererIDForElement(suspenseID),\n+ forceFallback: false,\n+ });\n+ });\n+ expect(print(store)).toEqual(snapshots[i]);\n+\n+ \/\/ Trigger actual fallback.\n+ act(() =>\n+ root.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[j]}>\n+ <MaybeSuspend suspend={true}>{steps[i]}<\/MaybeSuspend>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>\n+ )\n+ );\n+ expect(print(store)).toEqual(fallbackSnapshots[j]);\n+\n+ \/\/ Force fallback while we're in fallback mode.\n+ act(() => {\n+ bridge.send('overrideSuspense', {\n+ id: suspenseID,\n+ rendererID: store.getRendererIDForElement(suspenseID),\n+ forceFallback: true,\n+ });\n+ });\n+ \/\/ Keep seeing fallback content.\n+ expect(print(store)).toEqual(fallbackSnapshots[j]);\n+\n+ \/\/ Switch to primary mode.\n+ act(() =>\n+ root.render(\n+ <Root>\n+ <X \/>\n+ <React.Suspense fallback={steps[j]}>\n+ <MaybeSuspend suspend={false}>{steps[i]}<\/MaybeSuspend>\n+ <\/React.Suspense>\n+ <Y \/>\n+ <\/Root>\n+ )\n+ );\n+ \/\/ Fallback is still forced though.\n+ expect(print(store)).toEqual(fallbackSnapshots[j]);\n+\n+ \/\/ Stop forcing fallback. This reverts to primary content.\n+ act(() => {\n+ bridge.send('overrideSuspense', {\n+ id: suspenseID,\n+ rendererID: store.getRendererIDForElement(suspenseID),\n+ forceFallback: false,\n+ });\n+ });\n+ \/\/ Now we see primary content.\n+ expect(print(store)).toEqual(snapshots[i]);\n+\n+ \/\/ Clean up after every iteration.\n+ act(() => root.unmount());\n+ expect(print(store)).toBe('');\n+ }\n+ }\n+ });\n+});\ndiff --git a\/src\/__tests__\/treeContext-test.js b\/src\/__tests__\/treeContext-test.js\nnew file mode 100644\nindex 0000000000..68d3ea422b\n--- \/dev\/null\n+++ b\/src\/__tests__\/treeContext-test.js\n@@ -0,0 +1,608 @@\n+\/\/ @flow\n+\n+import typeof ReactTestRenderer from 'react-test-renderer';\n+import type { FrontendBridge } from 'src\/bridge';\n+import type Store from 'src\/devtools\/store';\n+import type {\n+ DispatcherContext,\n+ StateContext,\n+} from 'src\/devtools\/views\/Components\/TreeContext';\n+\n+describe('TreeListContext', () => {\n+ let React;\n+ let ReactDOM;\n+ let TestRenderer: ReactTestRenderer;\n+ let bridge: FrontendBridge;\n+ let store: Store;\n+ let utils;\n+\n+ let BridgeContext;\n+ let StoreContext;\n+ let TreeContext;\n+\n+ let dispatch: DispatcherContext;\n+ let state: StateContext;\n+\n+ beforeEach(() => {\n+ utils = require('.\/utils');\n+ utils.beforeEachProfiling();\n+\n+ bridge = global.bridge;\n+ store = global.store;\n+ store.collapseNodesByDefault = false;\n+\n+ React = require('react');\n+ ReactDOM = require('react-dom');\n+ TestRenderer = utils.requireTestRenderer();\n+\n+ BridgeContext = require('src\/devtools\/views\/context').BridgeContext;\n+ StoreContext = require('src\/devtools\/views\/context').StoreContext;\n+ TreeContext = require('src\/devtools\/views\/Components\/TreeContext');\n+ });\n+\n+ afterEach(() => {\n+ \/\/ Reset between tests\n+ dispatch = ((null: any): DispatcherContext);\n+ state = ((null: any): StateContext);\n+ });\n+\n+ const Capture = () => {\n+ dispatch = React.useContext(TreeContext.TreeDispatcherContext);\n+ state = React.useContext(TreeContext.TreeStateContext);\n+ return null;\n+ };\n+\n+ const Contexts = () => {\n+ return (\n+ <BridgeContext.Provider value={bridge}>\n+ <StoreContext.Provider value={store}>\n+ <TreeContext.TreeContextController>\n+ <Capture \/>\n+ <\/TreeContext.TreeContextController>\n+ <\/StoreContext.Provider>\n+ <\/BridgeContext.Provider>\n+ );\n+ };\n+\n+ describe('tree state', () => {\n+ it('should select the next and previous elements in the tree', () => {\n+ const Grandparent = () => <Parent \/>;\n+ const Parent = () => (\n+ <React.Fragment>\n+ <Child \/>\n+ <Child \/>\n+ <\/React.Fragment>\n+ );\n+ const Child = () => null;\n+\n+ utils.act(() =>\n+ ReactDOM.render(<Grandparent \/>, document.createElement('div'))\n+ );\n+\n+ expect(store).toMatchSnapshot('0: mount');\n+\n+ let renderer;\n+ utils.act(() => (renderer = TestRenderer.create(<Contexts \/>)));\n+ expect(state).toMatchSnapshot('1: initial state');\n+\n+ utils.act(() => dispatch({ type: 'SELECT_NEXT_ELEMENT_IN_TREE' }));\n+ utils.act(() => renderer.update(<Contexts \/>));\n+ expect(state).toMatchSnapshot('2: select first element');\n+\n+ while (\n+ state.selectedElementIndex !== null &&\n+ state.selectedElementIndex < store.numElements - 1\n+ ) {\n+ const index = ((state.selectedElementIndex: any): number);\n+ utils.act(() => dispatch({ type: 'SELECT_NEXT_ELEMENT_IN_TREE' }));\n+ utils.act(() => renderer.update(<Contexts \/>));\n+ expect(state).toMatchSnapshot(`3: select element after (${index})`);\n+ }\n+\n+ while (\n+ state.selectedElementIndex !== null &&\n+ state.selectedElementIndex > 0\n+ ) {\n+ const index = ((state.selectedElementIndex: any): number);\n+ utils.act(() => dispatch({ type: 'SELECT_PREVIOUS_ELEMENT_IN_TREE' }));\n+ utils.act(() => renderer.update(<Contexts \/>));\n+ expect(state).toMatchSnapshot(`4: select element before (${index})`);\n+ }\n+\n+ utils.act(() => dispatch({ type: 'SELECT_PREVIOUS_ELEMENT_IN_TREE' }));\n+ utils.act(() => renderer.update(<Contexts \/>));\n+ expect(state).toMatchSnapshot('5: select previous wraps around to last');\n+\n+ utils.act(() => dispatch({ type: 'SELECT_NEXT_ELEMENT_IN_TREE' }));\n+ utils.act(() => renderer.update(<Contexts \/>));\n+ expect(state).toMatchSnapshot('6: select next wraps around to first');\n+ });\n+\n+ it('should select child elements', () => {\n+ const Grandparent = () => (\n+ <React.Fragment>\n+ <Parent \/>\n+ <Parent \/>\n+ <\/React.Fragment>\n+ );\n+ const Parent = () => (\n+ <React.Fragment>\n+ <Child \/>\n+ <Child \/>\n+ <\/React.Fragment>\n+ );\n+ const Child = () => null;\n+\n+ utils.act(() =>\n+ ReactDOM.render(<Grandparent \/>, document.createElement('div'))\n+ );\n+\n+ expect(store).toMatchSnapshot('0: mount');\n+\n+ let renderer;\n+ utils.act(() => (renderer = TestRenderer.create(<Contexts \/>)));\n+ expect(state).toMatchSnapshot('1: initial state');\n+\n+ utils.act(() =>\n+ dispatch({ type: 'SELECT_ELEMENT_AT_INDEX', payload: 0 })\n+ );\n+ utils.act(() => renderer.update(<Contexts \/>));\n+ expect(state).toMatchSnapshot('2: select first element');\n+\n+ utils.act(() => dispatch({ type: 'SELECT_CHILD_ELEMENT_IN_TREE' }));\n+ utils.act(() => renderer.update(<Contexts \/>));\n+ expect(state).toMatchSnapshot('3: select Parent');\n+\n+ utils.act(() => dispatch({ type: 'SELECT_CHILD_ELEMENT_IN_TREE' }));\n+ utils.act(() => renderer.update(<Contexts \/>));\n+ expect(state).toMatchSnapshot('4: select Child');\n+\n+ const previousState = state;\n+\n+ \/\/ There are no more children to select, so this should be a no-op\n+ utils.act(() => dispatch({ type: 'SELECT_CHILD_ELEMENT_IN_TREE' }));\n+ utils.act(() => renderer.update(<Contexts \/>));\n+ expect(state).toEqual(previousState);\n+ });\n+\n+ it('should select parent elements and then collapse', () => {\n+ const Grandparent = () => (\n+ <React.Fragment>\n+ <Parent \/>\n+ <Parent \/>\n+ <\/React.Fragment>\n+ );\n+ const Parent = () => (\n+ <React.Fragment>\n+ <Child \/>\n+ <Child \/>\n+ <\/React.Fragment>\n+ );\n+ const Child = () => null;\n+\n+ utils.act(() =>\n+ ReactDOM.render(<Grandparent \/>, document.createElement('div'))\n+ );\n+\n+ expect(store).toMatchSnapshot('0: mount');\n+\n+ let renderer;\n+ utils.act(() => (renderer = TestRenderer.create(<Contexts \/>)));\n+ expect(state).toMatchSnapshot('1: initial state');\n+\n+ const lastChildID = store.getElementIDAtIndex(store.numElements - 1);\n+\n+ utils.act(() =>\n+ dispatch({ type: 'SELECT_ELEMENT_BY_ID', payload: lastChildID })\n+ );\n+ utils.act(() => renderer.update(<Contexts \/>));\n+ expect(state).toMatchSnapshot('2: select last child');\n+\n+ utils.act(() => dispatch({ type: 'SELECT_PARENT_ELEMENT_IN_TREE' }));\n+ utils.act(() => renderer.update(<Contexts \/>));\n+ expect(state).toMatchSnapshot('3: select Parent');\n+\n+ utils.act(() => dispatch({ type: 'SELECT_PARENT_ELEMENT_IN_TREE' }));\n+ utils.act(() => renderer.update(<Contexts \/>));\n+ expect(state).toMatchSnapshot('4: select Grandparent');\n+\n+ const previousState = state;\n+\n+ \/\/ There are no more ancestors to select, so this should be a no-op\n+ utils.act(() => dispatch({ type: 'SELECT_PARENT_ELEMENT_IN_TREE' }));\n+ utils.act(() => renderer.update(<Contexts \/>));\n+ expect(state).toEqual(previousState);\n+ });\n+\n+ it('should clear selection if the selected element is unmounted', async done => {\n+ const Grandparent = props => props.children || null;\n+ const Parent = props => props.children || null;\n+ const Child = () => null;\n+\n+ const container = document.createElement('div');\n+ utils.act(() =>\n+ ReactDOM.render(\n+ <Grandparent>\n+ <Parent>\n+ <Child \/>\n+ <Child \/>\n+ <\/Parent>\n+ <\/Grandparent>,\n+ container\n+ )\n+ );\n+\n+ expect(store).toMatchSnapshot('0: mount');\n+\n+ let renderer;\n+ utils.act(() => (renderer = TestRenderer.create(<Contexts \/>)));\n+ expect(state).toMatchSnapshot('1: initial state');\n+\n+ utils.act(() =>\n+ dispatch({ type: 'SELECT_ELEMENT_AT_INDEX', payload: 3 })\n+ );\n+ utils.act(() => renderer.update(<Contexts \/>));\n+ expect(state).toMatchSnapshot('2: select second child');\n+\n+ await utils.actAsync(() =>\n+ ReactDOM.render(\n+ <Grandparent>\n+ <Parent \/>\n+ <\/Grandparent>,\n+ container\n+ )\n+ );\n+ expect(state).toMatchSnapshot(\n+ '3: remove children (parent should now be selected)'\n+ );\n+\n+ await utils.actAsync(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(state).toMatchSnapshot(\n+ '4: unmount root (nothing should be selected)'\n+ );\n+\n+ done();\n+ });\n+ });\n+\n+ describe('search state', () => {\n+ it('should find elements matching search text', () => {\n+ const Foo = () => null;\n+ const Bar = () => null;\n+ const Baz = () => null;\n+ const Qux = () => null;\n+\n+ Qux.displayName = `withHOC(${Qux.name})`;\n+\n+ utils.act(() =>\n+ ReactDOM.render(\n+ <React.Fragment>\n+ <Foo \/>\n+ <Bar \/>\n+ <Baz \/>\n+ <Qux \/>\n+ <\/React.Fragment>,\n+ document.createElement('div')\n+ )\n+ );\n+\n+ expect(store).toMatchSnapshot('0: mount');\n+\n+ let renderer;\n+ utils.act(() => (renderer = TestRenderer.create(<Contexts \/>)));\n+ expect(state).toMatchSnapshot('1: initial state');\n+\n+ \/\/ NOTE: multi-match\n+ utils.act(() => dispatch({ type: 'SET_SEARCH_TEXT', payload: 'ba' }));\n+ utils.act(() => renderer.update(<Contexts \/>));\n+ expect(state).toMatchSnapshot('2: search for \"ba\"');\n+\n+ \/\/ NOTE: single match\n+ utils.act(() => dispatch({ type: 'SET_SEARCH_TEXT', payload: 'f' }));\n+ utils.act(() => renderer.update(<Contexts \/>));\n+ expect(state).toMatchSnapshot('3: search for \"f\"');\n+\n+ \/\/ NOTE: no match\n+ utils.act(() => dispatch({ type: 'SET_SEARCH_TEXT', payload: 'y' }));\n+ utils.act(() => renderer.update(<Contexts \/>));\n+ expect(state).toMatchSnapshot('4: search for \"y\"');\n+\n+ \/\/ NOTE: HOC match\n+ utils.act(() => dispatch({ type: 'SET_SEARCH_TEXT', payload: 'w' }));\n+ utils.act(() => renderer.update(<Contexts \/>));\n+ expect(state).toMatchSnapshot('5: search for \"w\"');\n+ });\n+\n+ it('should select the next and previous items within the search results', () => {\n+ const Foo = () => null;\n+ const Bar = () => null;\n+ const Baz = () => null;\n+\n+ utils.act(() =>\n+ ReactDOM.render(\n+ <React.Fragment>\n+ <Foo \/>\n+ <Baz \/>\n+ <Bar \/>\n+ <Baz \/>\n+ <\/React.Fragment>,\n+ document.createElement('div')\n+ )\n+ );\n+\n+ expect(store).toMatchSnapshot('0: mount');\n+\n+ let renderer;\n+ utils.act(() => (renderer = TestRenderer.create(<Contexts \/>)));\n+ expect(state).toMatchSnapshot('1: initial state');\n+\n+ utils.act(() => dispatch({ type: 'SET_SEARCH_TEXT', payload: 'ba' }));\n+ utils.act(() => renderer.update(<Contexts \/>));\n+ expect(state).toMatchSnapshot('2: search for \"ba\"');\n+\n+ utils.act(() => dispatch({ type: 'GO_TO_NEXT_SEARCH_RESULT' }));\n+ utils.act(() => renderer.update(<Contexts \/>));\n+ expect(state).toMatchSnapshot('3: go to second result');\n+\n+ utils.act(() => dispatch({ type: 'GO_TO_NEXT_SEARCH_RESULT' }));\n+ utils.act(() => renderer.update(<Contexts \/>));\n+ expect(state).toMatchSnapshot('4: go to third result');\n+\n+ utils.act(() => dispatch({ type: 'GO_TO_PREVIOUS_SEARCH_RESULT' }));\n+ utils.act(() => renderer.update(<Contexts \/>));\n+ expect(state).toMatchSnapshot('5: go to second result');\n+\n+ utils.act(() => dispatch({ type: 'GO_TO_PREVIOUS_SEARCH_RESULT' }));\n+ utils.act(() => renderer.update(<Contexts \/>));\n+ expect(state).toMatchSnapshot('6: go to first result');\n+\n+ utils.act(() => dispatch({ type: 'GO_TO_PREVIOUS_SEARCH_RESULT' }));\n+ utils.act(() => renderer.update(<Contexts \/>));\n+ expect(state).toMatchSnapshot('7: wrap to last result');\n+\n+ utils.act(() => dispatch({ type: 'GO_TO_NEXT_SEARCH_RESULT' }));\n+ utils.act(() => renderer.update(<Contexts \/>));\n+ expect(state).toMatchSnapshot('8: wrap to first result');\n+ });\n+\n+ it('should add newly mounted elements to the search results set if they match the current text', async done => {\n+ const Foo = () => null;\n+ const Bar = () => null;\n+ const Baz = () => null;\n+\n+ const container = document.createElement('div');\n+\n+ utils.act(() =>\n+ ReactDOM.render(\n+ <React.Fragment>\n+ <Foo \/>\n+ <Bar \/>\n+ <\/React.Fragment>,\n+ container\n+ )\n+ );\n+\n+ expect(store).toMatchSnapshot('0: mount');\n+\n+ let renderer;\n+ utils.act(() => (renderer = TestRenderer.create(<Contexts \/>)));\n+ expect(state).toMatchSnapshot('1: initial state');\n+\n+ utils.act(() => dispatch({ type: 'SET_SEARCH_TEXT', payload: 'ba' }));\n+ utils.act(() => renderer.update(<Contexts \/>));\n+ expect(state).toMatchSnapshot('2: search for \"ba\"');\n+\n+ await utils.actAsync(() =>\n+ ReactDOM.render(\n+ <React.Fragment>\n+ <Foo \/>\n+ <Bar \/>\n+ <Baz \/>\n+ <\/React.Fragment>,\n+ container\n+ )\n+ );\n+ utils.act(() => renderer.update(<Contexts \/>));\n+ expect(state).toMatchSnapshot('3: mount Baz');\n+\n+ done();\n+ });\n+\n+ it('should remove unmounted elements from the search results set', async done => {\n+ const Foo = () => null;\n+ const Bar = () => null;\n+ const Baz = () => null;\n+\n+ const container = document.createElement('div');\n+\n+ utils.act(() =>\n+ ReactDOM.render(\n+ <React.Fragment>\n+ <Foo \/>\n+ <Bar \/>\n+ <Baz \/>\n+ <\/React.Fragment>,\n+ container\n+ )\n+ );\n+\n+ expect(store).toMatchSnapshot('0: mount');\n+\n+ let renderer;\n+ utils.act(() => (renderer = TestRenderer.create(<Contexts \/>)));\n+ expect(state).toMatchSnapshot('1: initial state');\n+\n+ utils.act(() => dispatch({ type: 'SET_SEARCH_TEXT', payload: 'ba' }));\n+ utils.act(() => renderer.update(<Contexts \/>));\n+ expect(state).toMatchSnapshot('2: search for \"ba\"');\n+\n+ utils.act(() => dispatch({ type: 'GO_TO_NEXT_SEARCH_RESULT' }));\n+ utils.act(() => renderer.update(<Contexts \/>));\n+ expect(state).toMatchSnapshot('3: go to second result');\n+\n+ await utils.actAsync(() =>\n+ ReactDOM.render(\n+ <React.Fragment>\n+ <Foo \/>\n+ <Bar \/>\n+ <\/React.Fragment>,\n+ container\n+ )\n+ );\n+ utils.act(() => renderer.update(<Contexts \/>));\n+ expect(state).toMatchSnapshot('4: unmount Baz');\n+\n+ done();\n+ });\n+ });\n+\n+ describe('owners state', () => {\n+ it('should support entering and existing the owners tree view', () => {\n+ const Grandparent = () => <Parent \/>;\n+ const Parent = () => (\n+ <React.Fragment>\n+ <Child \/>\n+ <Child \/>\n+ <\/React.Fragment>\n+ );\n+ const Child = () => null;\n+\n+ utils.act(() =>\n+ ReactDOM.render(<Grandparent \/>, document.createElement('div'))\n+ );\n+\n+ expect(store).toMatchSnapshot('0: mount');\n+\n+ let renderer;\n+ utils.act(() => (renderer = TestRenderer.create(<Contexts \/>)));\n+ expect(state).toMatchSnapshot('1: initial state');\n+\n+ let parentID = ((store.getElementIDAtIndex(1): any): number);\n+ utils.act(() => dispatch({ type: 'SELECT_OWNER', payload: parentID }));\n+ utils.act(() => renderer.update(<Contexts \/>));\n+ expect(state).toMatchSnapshot('2: parent owners tree');\n+\n+ utils.act(() => dispatch({ type: 'RESET_OWNER_STACK' }));\n+ utils.act(() => renderer.update(<Contexts \/>));\n+ expect(state).toMatchSnapshot('3: final state');\n+ });\n+\n+ it('should remove an element from the owners list if it is unmounted', async done => {\n+ const Grandparent = ({ count }) => <Parent count={count} \/>;\n+ const Parent = ({ count }) =>\n+ new Array(count).fill(true).map((_, index) => <Child key={index} \/>);\n+ const Child = () => null;\n+\n+ const container = document.createElement('div');\n+ utils.act(() => ReactDOM.render(<Grandparent count={2} \/>, container));\n+\n+ expect(store).toMatchSnapshot('0: mount');\n+\n+ let renderer;\n+ utils.act(() => (renderer = TestRenderer.create(<Contexts \/>)));\n+ expect(state).toMatchSnapshot('1: initial state');\n+\n+ let parentID = ((store.getElementIDAtIndex(1): any): number);\n+ utils.act(() => dispatch({ type: 'SELECT_OWNER', payload: parentID }));\n+ utils.act(() => renderer.update(<Contexts \/>));\n+ expect(state).toMatchSnapshot('2: parent owners tree');\n+\n+ await utils.actAsync(() =>\n+ ReactDOM.render(<Grandparent count={1} \/>, container)\n+ );\n+ expect(state).toMatchSnapshot('3: remove second child');\n+\n+ await utils.actAsync(() =>\n+ ReactDOM.render(<Grandparent count={0} \/>, container)\n+ );\n+ expect(state).toMatchSnapshot('4: remove first child');\n+\n+ done();\n+ });\n+\n+ it('should exit the owners list if the current owner is unmounted', async done => {\n+ const Parent = props => props.children || null;\n+ const Child = () => null;\n+\n+ const container = document.createElement('div');\n+ utils.act(() =>\n+ ReactDOM.render(\n+ <Parent>\n+ <Child \/>\n+ <\/Parent>,\n+ container\n+ )\n+ );\n+\n+ expect(store).toMatchSnapshot('0: mount');\n+\n+ let renderer;\n+ utils.act(() => (renderer = TestRenderer.create(<Contexts \/>)));\n+ expect(state).toMatchSnapshot('1: initial state');\n+\n+ let childID = ((store.getElementIDAtIndex(1): any): number);\n+ utils.act(() => dispatch({ type: 'SELECT_OWNER', payload: childID }));\n+ utils.act(() => renderer.update(<Contexts \/>));\n+ expect(state).toMatchSnapshot('2: child owners tree');\n+\n+ await utils.actAsync(() => ReactDOM.render(<Parent \/>, container));\n+ expect(state).toMatchSnapshot('3: remove child');\n+\n+ let parentID = ((store.getElementIDAtIndex(0): any): number);\n+ utils.act(() => dispatch({ type: 'SELECT_OWNER', payload: parentID }));\n+ utils.act(() => renderer.update(<Contexts \/>));\n+ expect(state).toMatchSnapshot('4: parent owners tree');\n+\n+ await utils.actAsync(() => ReactDOM.unmountComponentAtNode(container));\n+ expect(state).toMatchSnapshot('5: unmount root');\n+\n+ done();\n+ });\n+\n+ \/\/ This tests ensures support for toggling Suspense boundaries outside of the active owners list.\n+ it('should exit the owners list if an element outside the list is selected', () => {\n+ const Grandchild = () => null;\n+ const Child = () => (\n+ <React.Suspense fallback=\"Loading\">\n+ <Grandchild \/>\n+ <\/React.Suspense>\n+ );\n+ const Parent = () => (\n+ <React.Suspense fallback=\"Loading\">\n+ <Child \/>\n+ <\/React.Suspense>\n+ );\n+\n+ const container = document.createElement('div');\n+ utils.act(() => ReactDOM.render(<Parent \/>, container));\n+\n+ expect(store).toMatchSnapshot('0: mount');\n+\n+ let renderer;\n+ utils.act(() => (renderer = TestRenderer.create(<Contexts \/>)));\n+ expect(state).toMatchSnapshot('1: initial state');\n+\n+ const outerSuspenseID = ((store.getElementIDAtIndex(1): any): number);\n+ const childID = ((store.getElementIDAtIndex(2): any): number);\n+ const innerSuspenseID = ((store.getElementIDAtIndex(3): any): number);\n+\n+ utils.act(() => dispatch({ type: 'SELECT_OWNER', payload: childID }));\n+ utils.act(() => renderer.update(<Contexts \/>));\n+ expect(state).toMatchSnapshot('2: child owners tree');\n+\n+ \/\/ Toggling a Suspense boundary inside of the flat list should update selected index\n+ utils.act(() =>\n+ dispatch({ type: 'SELECT_ELEMENT_BY_ID', payload: innerSuspenseID })\n+ );\n+ utils.act(() => renderer.update(<Contexts \/>));\n+ expect(state).toMatchSnapshot('3: child owners tree');\n+\n+ \/\/ Toggling a Suspense boundary outside of the flat list should exit owners list and update index\n+ utils.act(() =>\n+ dispatch({ type: 'SELECT_ELEMENT_BY_ID', payload: outerSuspenseID })\n+ );\n+ utils.act(() => renderer.update(<Contexts \/>));\n+ expect(state).toMatchSnapshot('4: main tree');\n+ });\n+ });\n+});\ndiff --git a\/src\/__tests__\/utils.js b\/src\/__tests__\/utils.js\nnew file mode 100644\nindex 0000000000..bf0c816109\n--- \/dev\/null\n+++ b\/src\/__tests__\/utils.js\n@@ -0,0 +1,203 @@\n+\/\/ @flow\n+\n+import typeof ReactTestRenderer from 'react-test-renderer';\n+\n+import type { FrontendBridge } from 'src\/bridge';\n+import type Store from 'src\/devtools\/store';\n+import type { ProfilingDataFrontend } from 'src\/devtools\/views\/Profiler\/types';\n+import type { ElementType } from 'src\/types';\n+\n+export function act(callback: Function): void {\n+ const { act: actTestRenderer } = require('react-test-renderer');\n+ const { act: actDOM } = require('react-dom\/test-utils');\n+\n+ actDOM(() => {\n+ actTestRenderer(() => {\n+ callback();\n+ });\n+ });\n+\n+ \/\/ Flush Bridge operations\n+ actDOM(() => {\n+ actTestRenderer(() => {\n+ jest.runAllTimers();\n+ });\n+ });\n+}\n+\n+export async function actAsync(\n+ cb: () => *,\n+ recursivelyFlush: boolean = true\n+): Promise<void> {\n+ const { act: actTestRenderer } = require('react-test-renderer');\n+ const { act: actDOM } = require('react-dom\/test-utils');\n+\n+ \/\/ $FlowFixMe Flow doens't know about \"await act()\" yet\n+ await actDOM(async () => {\n+ await actTestRenderer(async () => {\n+ await cb();\n+ });\n+ });\n+\n+ if (recursivelyFlush) {\n+ while (jest.getTimerCount() > 0) {\n+ \/\/ $FlowFixMe Flow doens't know about \"await act()\" yet\n+ await actDOM(async () => {\n+ await actTestRenderer(async () => {\n+ jest.runAllTimers();\n+ });\n+ });\n+ }\n+ } else {\n+ \/\/ $FlowFixMe Flow doesn't know about \"await act()\" yet\n+ await actDOM(async () => {\n+ await actTestRenderer(async () => {\n+ jest.runOnlyPendingTimers();\n+ });\n+ });\n+ }\n+}\n+\n+export function beforeEachProfiling(): void {\n+ \/\/ Mock React's timing information so that test runs are predictable.\n+ jest.mock('scheduler', () => jest.requireActual('scheduler\/unstable_mock'));\n+\n+ \/\/ DevTools itself uses performance.now() to offset commit times\n+ \/\/ so they appear relative to when profiling was started in the UI.\n+ jest\n+ .spyOn(performance, 'now')\n+ .mockImplementation(\n+ jest.requireActual('scheduler\/unstable_mock').unstable_now\n+ );\n+}\n+\n+export function createDisplayNameFilter(\n+ source: string,\n+ isEnabled: boolean = true\n+) {\n+ const Types = require('src\/types');\n+ let isValid = true;\n+ try {\n+ new RegExp(source);\n+ } catch (error) {\n+ isValid = false;\n+ }\n+ return {\n+ type: Types.ComponentFilterDisplayName,\n+ isEnabled,\n+ isValid,\n+ value: source,\n+ };\n+}\n+\n+export function createHOCFilter(isEnabled: boolean = true) {\n+ const Types = require('src\/types');\n+ return {\n+ type: Types.ComponentFilterHOC,\n+ isEnabled,\n+ isValid: true,\n+ };\n+}\n+\n+export function createElementTypeFilter(\n+ elementType: ElementType,\n+ isEnabled: boolean = true\n+) {\n+ const Types = require('src\/types');\n+ return {\n+ type: Types.ComponentFilterElementType,\n+ isEnabled,\n+ value: elementType,\n+ };\n+}\n+\n+export function createLocationFilter(\n+ source: string,\n+ isEnabled: boolean = true\n+) {\n+ const Types = require('src\/types');\n+ let isValid = true;\n+ try {\n+ new RegExp(source);\n+ } catch (error) {\n+ isValid = false;\n+ }\n+ return {\n+ type: Types.ComponentFilterLocation,\n+ isEnabled,\n+ isValid,\n+ value: source,\n+ };\n+}\n+\n+export function getRendererID(): number {\n+ if (global.agent == null) {\n+ throw Error('Agent unavailable.');\n+ }\n+ const ids = Object.keys(global.agent._rendererInterfaces);\n+\n+ const id = ids.find(id => {\n+ const rendererInterface = global.agent._rendererInterfaces[id];\n+ return rendererInterface.renderer.rendererPackageName === 'react-dom';\n+ });\n+\n+ if (ids == null) {\n+ throw Error('Could not find renderer.');\n+ }\n+\n+ return parseInt(id, 10);\n+}\n+\n+export function requireTestRenderer(): ReactTestRenderer {\n+ let hook;\n+ try {\n+ \/\/ Hide the hook before requiring TestRenderer, so we don't end up with a loop.\n+ hook = global.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+ delete global.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+\n+ return require('react-test-renderer');\n+ } finally {\n+ global.__REACT_DEVTOOLS_GLOBAL_HOOK__ = hook;\n+ }\n+}\n+\n+export function exportImportHelper(bridge: FrontendBridge, store: Store): void {\n+ const { act } = require('.\/utils');\n+ const {\n+ prepareProfilingDataExport,\n+ prepareProfilingDataFrontendFromExport,\n+ } = require('src\/devtools\/views\/Profiler\/utils');\n+\n+ const { profilerStore } = store;\n+\n+ expect(profilerStore.profilingData).not.toBeNull();\n+\n+ const profilingDataFrontendInitial = ((profilerStore.profilingData: any): ProfilingDataFrontend);\n+\n+ const profilingDataExport = prepareProfilingDataExport(\n+ profilingDataFrontendInitial\n+ );\n+\n+ \/\/ Simulate writing\/reading to disk.\n+ const serializedProfilingDataExport = JSON.stringify(\n+ profilingDataExport,\n+ null,\n+ 2\n+ );\n+ const parsedProfilingDataExport = JSON.parse(serializedProfilingDataExport);\n+\n+ const profilingDataFrontend = prepareProfilingDataFrontendFromExport(\n+ (parsedProfilingDataExport: any)\n+ );\n+\n+ \/\/ Sanity check that profiling snapshots are serialized correctly.\n+ expect(profilingDataFrontendInitial).toEqual(profilingDataFrontend);\n+\n+ \/\/ Snapshot the JSON-parsed object, rather than the raw string, because Jest formats the diff nicer.\n+ expect(parsedProfilingDataExport).toMatchSnapshot('imported data');\n+\n+ act(() => {\n+ \/\/ Apply the new exported-then-reimported data so tests can re-run assertions.\n+ profilerStore.profilingData = profilingDataFrontend;\n+ });\n+}\ndiff --git a\/src\/backend\/NativeStyleEditor\/resolveBoxStyle.js b\/src\/backend\/NativeStyleEditor\/resolveBoxStyle.js\nnew file mode 100644\nindex 0000000000..0609272dc9\n--- \/dev\/null\n+++ b\/src\/backend\/NativeStyleEditor\/resolveBoxStyle.js\n@@ -0,0 +1,85 @@\n+\/\/ @flow\n+\n+import type { BoxStyle } from '.\/types';\n+\n+\/**\n+ * This mirrors react-native\/Libraries\/Inspector\/resolveBoxStyle.js (but without RTL support).\n+ *\n+ * Resolve a style property into it's component parts, e.g.\n+ *\n+ * resolveBoxStyle('margin', {margin: 5, marginBottom: 10})\n+ * -> {top: 5, left: 5, right: 5, bottom: 10}\n+ *\/\n+export default function resolveBoxStyle(\n+ prefix: string,\n+ style: Object\n+): BoxStyle | null {\n+ let hasParts = false;\n+ const result = {\n+ bottom: 0,\n+ left: 0,\n+ right: 0,\n+ top: 0,\n+ };\n+\n+ const styleForAll = style[prefix];\n+ if (styleForAll != null) {\n+ for (const key of Object.keys(result)) {\n+ result[key] = styleForAll;\n+ }\n+ hasParts = true;\n+ }\n+\n+ const styleForHorizontal = style[prefix + 'Horizontal'];\n+ if (styleForHorizontal != null) {\n+ result.left = styleForHorizontal;\n+ result.right = styleForHorizontal;\n+ hasParts = true;\n+ } else {\n+ const styleForLeft = style[prefix + 'Left'];\n+ if (styleForLeft != null) {\n+ result.left = styleForLeft;\n+ hasParts = true;\n+ }\n+\n+ const styleForRight = style[prefix + 'Right'];\n+ if (styleForRight != null) {\n+ result.right = styleForRight;\n+ hasParts = true;\n+ }\n+\n+ const styleForEnd = style[prefix + 'End'];\n+ if (styleForEnd != null) {\n+ \/\/ TODO RTL support\n+ result.right = styleForEnd;\n+ hasParts = true;\n+ }\n+ const styleForStart = style[prefix + 'Start'];\n+ if (styleForStart != null) {\n+ \/\/ TODO RTL support\n+ result.left = styleForStart;\n+ hasParts = true;\n+ }\n+ }\n+\n+ const styleForVertical = style[prefix + 'Vertical'];\n+ if (styleForVertical != null) {\n+ result.bottom = styleForVertical;\n+ result.top = styleForVertical;\n+ hasParts = true;\n+ } else {\n+ const styleForBottom = style[prefix + 'Bottom'];\n+ if (styleForBottom != null) {\n+ result.bottom = styleForBottom;\n+ hasParts = true;\n+ }\n+\n+ const styleForTop = style[prefix + 'Top'];\n+ if (styleForTop != null) {\n+ result.top = styleForTop;\n+ hasParts = true;\n+ }\n+ }\n+\n+ return hasParts ? result : null;\n+}\ndiff --git a\/src\/backend\/NativeStyleEditor\/setupNativeStyleEditor.js b\/src\/backend\/NativeStyleEditor\/setupNativeStyleEditor.js\nnew file mode 100644\nindex 0000000000..642dbb91eb\n--- \/dev\/null\n+++ b\/src\/backend\/NativeStyleEditor\/setupNativeStyleEditor.js\n@@ -0,0 +1,315 @@\n+\/\/ @flow\n+\n+import Agent from 'src\/backend\/agent';\n+import resolveBoxStyle from '.\/resolveBoxStyle';\n+\n+import type { BackendBridge } from 'src\/bridge';\n+import type { RendererID } from '..\/types';\n+import type { StyleAndLayout } from '.\/types';\n+\n+export type ResolveNativeStyle = (stylesheetID: number) => ?Object;\n+\n+export default function setupNativeStyleEditor(\n+ bridge: BackendBridge,\n+ agent: Agent,\n+ resolveNativeStyle: ResolveNativeStyle,\n+ validAttributes?: $ReadOnlyArray<string> | null\n+) {\n+ bridge.addListener(\n+ 'NativeStyleEditor_measure',\n+ ({ id, rendererID }: {| id: number, rendererID: RendererID |}) => {\n+ measureStyle(agent, bridge, resolveNativeStyle, id, rendererID);\n+ }\n+ );\n+\n+ bridge.addListener(\n+ 'NativeStyleEditor_renameAttribute',\n+ ({\n+ id,\n+ rendererID,\n+ oldName,\n+ newName,\n+ value,\n+ }: {|\n+ id: number,\n+ rendererID: RendererID,\n+ oldName: string,\n+ newName: string,\n+ value: string,\n+ |}) => {\n+ renameStyle(agent, id, rendererID, oldName, newName, value);\n+ setTimeout(() =>\n+ measureStyle(agent, bridge, resolveNativeStyle, id, rendererID)\n+ );\n+ }\n+ );\n+\n+ bridge.addListener(\n+ 'NativeStyleEditor_setValue',\n+ ({\n+ id,\n+ rendererID,\n+ name,\n+ value,\n+ }: {|\n+ id: number,\n+ rendererID: number,\n+ name: string,\n+ value: string,\n+ |}) => {\n+ setStyle(agent, id, rendererID, name, value);\n+ setTimeout(() =>\n+ measureStyle(agent, bridge, resolveNativeStyle, id, rendererID)\n+ );\n+ }\n+ );\n+\n+ bridge.send('isNativeStyleEditorSupported', {\n+ isSupported: true,\n+ validAttributes,\n+ });\n+}\n+\n+const EMPTY_BOX_STYLE = {\n+ top: 0,\n+ left: 0,\n+ right: 0,\n+ bottom: 0,\n+};\n+\n+const componentIDToStyleOverrides: Map<number, Object> = new Map();\n+\n+function measureStyle(\n+ agent: Agent,\n+ bridge: BackendBridge,\n+ resolveNativeStyle: ResolveNativeStyle,\n+ id: number,\n+ rendererID: RendererID\n+) {\n+ const data = agent.getInstanceAndStyle({ id, rendererID });\n+ if (!data || !data.style) {\n+ bridge.send(\n+ 'NativeStyleEditor_styleAndLayout',\n+ ({\n+ id,\n+ layout: null,\n+ style: null,\n+ }: StyleAndLayout)\n+ );\n+ return;\n+ }\n+\n+ const { instance, style } = data;\n+\n+ let resolvedStyle = resolveNativeStyle(style);\n+\n+ \/\/ If it's a host component we edited before, amend styles.\n+ const styleOverrides = componentIDToStyleOverrides.get(id);\n+ if (styleOverrides != null) {\n+ resolvedStyle = Object.assign({}, resolvedStyle, styleOverrides);\n+ }\n+\n+ if (!instance || typeof instance.measure !== 'function') {\n+ bridge.send(\n+ 'NativeStyleEditor_styleAndLayout',\n+ ({\n+ id,\n+ layout: null,\n+ style: resolvedStyle || null,\n+ }: StyleAndLayout)\n+ );\n+ return;\n+ }\n+\n+ \/\/ $FlowFixMe the parameter types of an unknown function are unknown\n+ instance.measure((x, y, width, height, left, top) => {\n+ \/\/ RN Android sometimes returns undefined here. Don't send measurements in this case.\n+ \/\/ https:\/\/github.com\/jhen0409\/react-native-debugger\/issues\/84#issuecomment-304611817\n+ if (typeof x !== 'number') {\n+ bridge.send(\n+ 'NativeStyleEditor_styleAndLayout',\n+ ({\n+ id,\n+ layout: null,\n+ style: resolvedStyle || null,\n+ }: StyleAndLayout)\n+ );\n+ return;\n+ }\n+ const margin = resolveBoxStyle('margin', resolvedStyle) || EMPTY_BOX_STYLE;\n+ const padding =\n+ resolveBoxStyle('padding', resolvedStyle) || EMPTY_BOX_STYLE;\n+ bridge.send(\n+ 'NativeStyleEditor_styleAndLayout',\n+ ({\n+ id,\n+ layout: {\n+ x,\n+ y,\n+ width,\n+ height,\n+ left,\n+ top,\n+ margin,\n+ padding,\n+ },\n+ style: resolvedStyle || null,\n+ }: StyleAndLayout)\n+ );\n+ });\n+}\n+\n+function shallowClone(object: Object): Object {\n+ const cloned = {};\n+ for (let n in object) {\n+ cloned[n] = object[n];\n+ }\n+ return cloned;\n+}\n+\n+function renameStyle(\n+ agent: Agent,\n+ id: number,\n+ rendererID: RendererID,\n+ oldName: string,\n+ newName: string,\n+ value: string\n+): void {\n+ const data = agent.getInstanceAndStyle({ id, rendererID });\n+ if (!data || !data.style) {\n+ return;\n+ }\n+\n+ const { instance, style } = data;\n+\n+ const newStyle = newName\n+ ? { [oldName]: undefined, [newName]: value }\n+ : { [oldName]: undefined };\n+\n+ let customStyle;\n+\n+ \/\/ TODO It would be nice if the renderer interface abstracted this away somehow.\n+ if (instance !== null && typeof instance.setNativeProps === 'function') {\n+ \/\/ In the case of a host component, we need to use setNativeProps().\n+ \/\/ Remember to \"correct\" resolved styles when we read them next time.\n+ const styleOverrides = componentIDToStyleOverrides.get(id);\n+ if (!styleOverrides) {\n+ componentIDToStyleOverrides.set(id, newStyle);\n+ } else {\n+ Object.assign(styleOverrides, newStyle);\n+ }\n+ \/\/ TODO Fabric does not support setNativeProps; chat with Sebastian or Eli\n+ instance.setNativeProps({ style: newStyle });\n+ } else if (Array.isArray(style)) {\n+ const lastIndex = style.length - 1;\n+ if (\n+ typeof style[lastIndex] === 'object' &&\n+ !Array.isArray(style[lastIndex])\n+ ) {\n+ customStyle = shallowClone(style[lastIndex]);\n+ delete customStyle[oldName];\n+ if (newName) {\n+ customStyle[newName] = value;\n+ } else {\n+ customStyle[oldName] = undefined;\n+ }\n+\n+ agent.overrideProps({\n+ id,\n+ rendererID,\n+ path: ['style', lastIndex],\n+ value: customStyle,\n+ });\n+ } else {\n+ agent.overrideProps({\n+ id,\n+ rendererID,\n+ path: ['style'],\n+ value: style.concat([newStyle]),\n+ });\n+ }\n+ } else if (typeof style === 'object') {\n+ customStyle = shallowClone(style);\n+ delete customStyle[oldName];\n+ if (newName) {\n+ customStyle[newName] = value;\n+ } else {\n+ customStyle[oldName] = undefined;\n+ }\n+\n+ agent.overrideProps({\n+ id,\n+ rendererID,\n+ path: ['style'],\n+ value: customStyle,\n+ });\n+ } else {\n+ agent.overrideProps({\n+ id,\n+ rendererID,\n+ path: ['style'],\n+ value: [style, newStyle],\n+ });\n+ }\n+\n+ agent.emit('hideNativeHighlight');\n+}\n+\n+function setStyle(\n+ agent: Agent,\n+ id: number,\n+ rendererID: RendererID,\n+ name: string,\n+ value: string\n+) {\n+ const data = agent.getInstanceAndStyle({ id, rendererID });\n+ if (!data || !data.style) {\n+ return;\n+ }\n+\n+ const { instance, style } = data;\n+ const newStyle = { [name]: value };\n+\n+ \/\/ TODO It would be nice if the renderer interface abstracted this away somehow.\n+ if (instance !== null && typeof instance.setNativeProps === 'function') {\n+ \/\/ In the case of a host component, we need to use setNativeProps().\n+ \/\/ Remember to \"correct\" resolved styles when we read them next time.\n+ const styleOverrides = componentIDToStyleOverrides.get(id);\n+ if (!styleOverrides) {\n+ componentIDToStyleOverrides.set(id, newStyle);\n+ } else {\n+ Object.assign(styleOverrides, newStyle);\n+ }\n+ \/\/ TODO Fabric does not support setNativeProps; chat with Sebastian or Eli\n+ instance.setNativeProps({ style: newStyle });\n+ } else if (Array.isArray(style)) {\n+ const lastLength = style.length - 1;\n+ if (\n+ typeof style[lastLength] === 'object' &&\n+ !Array.isArray(style[lastLength])\n+ ) {\n+ agent.overrideProps({\n+ id,\n+ rendererID,\n+ path: ['style', lastLength, name],\n+ value,\n+ });\n+ } else {\n+ agent.overrideProps({\n+ id,\n+ rendererID,\n+ path: ['style'],\n+ value: style.concat([newStyle]),\n+ });\n+ }\n+ } else {\n+ agent.overrideProps({\n+ id,\n+ rendererID,\n+ path: ['style'],\n+ value: [style, newStyle],\n+ });\n+ }\n+\n+ agent.emit('hideNativeHighlight');\n+}\ndiff --git a\/src\/backend\/NativeStyleEditor\/types.js b\/src\/backend\/NativeStyleEditor\/types.js\nnew file mode 100644\nindex 0000000000..f7040cb8d3\n--- \/dev\/null\n+++ b\/src\/backend\/NativeStyleEditor\/types.js\n@@ -0,0 +1,27 @@\n+\/\/ @flow\n+\n+export type BoxStyle = $ReadOnly<{|\n+ bottom: number,\n+ left: number,\n+ right: number,\n+ top: number,\n+|}>;\n+\n+export type Layout = {|\n+ x: number,\n+ y: number,\n+ width: number,\n+ height: number,\n+ left: number,\n+ top: number,\n+ margin: BoxStyle,\n+ padding: BoxStyle,\n+|};\n+\n+export type Style = Object;\n+\n+export type StyleAndLayout = {|\n+ id: number,\n+ style: Style | null,\n+ layout: Layout | null,\n+|};\ndiff --git a\/src\/backend\/ReactDebugHooks.js b\/src\/backend\/ReactDebugHooks.js\nnew file mode 100644\nindex 0000000000..6baaa25300\n--- \/dev\/null\n+++ b\/src\/backend\/ReactDebugHooks.js\n@@ -0,0 +1,636 @@\n+\/\/ @flow\n+\n+\/\/ This file was forked from the React GitHub repo:\n+\/\/ https:\/\/github.com\/facebook\/react\/blob\/master\/packages\/react-debug-tools\/src\/ReactDebugHooks.js\n+\/\/ It has been modified slightly though to account for \"shared\" imports and different lint configs.\n+\/\/ I've also removed some of the Flow types that don't exist in DevTools.\n+\/\/ TODO Remove this fork and use the NPM version of this package once it's released.\n+\n+import ErrorStackParser from 'error-stack-parser';\n+\n+import type {\n+ ReactContext,\n+ ReactEventResponder,\n+ ReactEventResponderListener,\n+} from '.\/types';\n+\n+type Fiber = any;\n+type Hook = any;\n+\n+\/\/ HACK: These values are copied from attachRendererFiber\n+\/\/ In the future, the react-debug-hooks package will be published to NPM,\n+\/\/ and be locked to a specific range of react versions\n+\/\/ For now we are just hard-coding the current\/latest versions.\n+const ContextProvider = 10;\n+const ForwardRef = 11;\n+const FunctionComponent = 0;\n+const SimpleMemoComponent = 15;\n+\n+\/\/ Used to track hooks called during a render\n+\n+type HookLogEntry = {\n+ primitive: string,\n+ stackError: Error,\n+ value: mixed,\n+};\n+\n+let hookLog: Array<HookLogEntry> = [];\n+\n+\/\/ Primitives\n+\n+type BasicStateAction<S> = (S => S) | S;\n+\n+type Dispatch<A> = A => void;\n+\n+let primitiveStackCache: null | Map<string, Array<any>> = null;\n+\n+function getPrimitiveStackCache(): Map<string, Array<any>> {\n+ \/\/ This initializes a cache of all primitive hooks so that the top\n+ \/\/ most stack frames added by calling the primitive hook can be removed.\n+ if (primitiveStackCache === null) {\n+ const cache = new Map();\n+ let readHookLog;\n+ try {\n+ \/\/ Use all hooks here to add them to the hook log.\n+ Dispatcher.useContext(({ _currentValue: null }: any));\n+ Dispatcher.useState(null);\n+ Dispatcher.useReducer((s, a) => s, null);\n+ Dispatcher.useRef(null);\n+ Dispatcher.useLayoutEffect(() => {});\n+ Dispatcher.useEffect(() => {});\n+ Dispatcher.useImperativeHandle(undefined, () => null);\n+ Dispatcher.useDebugValue(null);\n+ Dispatcher.useCallback(() => {});\n+ Dispatcher.useMemo(() => null);\n+ } finally {\n+ readHookLog = hookLog;\n+ hookLog = [];\n+ }\n+ for (let i = 0; i < readHookLog.length; i++) {\n+ const hook = readHookLog[i];\n+ cache.set(hook.primitive, ErrorStackParser.parse(hook.stackError));\n+ }\n+ primitiveStackCache = cache;\n+ }\n+ return primitiveStackCache;\n+}\n+\n+let currentHook: null | Hook = null;\n+function nextHook(): null | Hook {\n+ const hook = currentHook;\n+ if (hook !== null) {\n+ currentHook = hook.next;\n+ }\n+ return hook;\n+}\n+\n+function readContext<T>(\n+ context: ReactContext<T>,\n+ observedBits: void | number | boolean\n+): T {\n+ \/\/ For now we don't expose readContext usage in the hooks debugging info.\n+ return context._currentValue;\n+}\n+\n+function useContext<T>(\n+ context: ReactContext<T>,\n+ observedBits: void | number | boolean\n+): T {\n+ hookLog.push({\n+ primitive: 'Context',\n+ stackError: new Error(),\n+ value: context._currentValue,\n+ });\n+ return context._currentValue;\n+}\n+\n+function useState<S>(\n+ initialState: (() => S) | S\n+): [S, Dispatch<BasicStateAction<S>>] {\n+ const hook = nextHook();\n+ const state: S =\n+ hook !== null\n+ ? hook.memoizedState\n+ : typeof initialState === 'function'\n+ ? (initialState: any)()\n+ : initialState;\n+ hookLog.push({ primitive: 'State', stackError: new Error(), value: state });\n+ return [state, (action: BasicStateAction<S>) => {}];\n+}\n+\n+function useReducer<S, I, A>(\n+ reducer: (S, A) => S,\n+ initialArg: I,\n+ init?: I => S\n+): [S, Dispatch<A>] {\n+ const hook = nextHook();\n+ let state;\n+ if (hook !== null) {\n+ state = hook.memoizedState;\n+ } else {\n+ state = init !== undefined ? init(initialArg) : ((initialArg: any): S);\n+ }\n+ hookLog.push({\n+ primitive: 'Reducer',\n+ stackError: new Error(),\n+ value: state,\n+ });\n+ return [state, (action: A) => {}];\n+}\n+\n+function useRef<T>(initialValue: T): { current: T } {\n+ const hook = nextHook();\n+ const ref = hook !== null ? hook.memoizedState : { current: initialValue };\n+ hookLog.push({\n+ primitive: 'Ref',\n+ stackError: new Error(),\n+ value: ref.current,\n+ });\n+ return ref;\n+}\n+\n+function useLayoutEffect(\n+ create: () => (() => void) | void,\n+ inputs: Array<mixed> | void | null\n+): void {\n+ nextHook();\n+ hookLog.push({\n+ primitive: 'LayoutEffect',\n+ stackError: new Error(),\n+ value: create,\n+ });\n+}\n+\n+function useEffect(\n+ create: () => (() => void) | void,\n+ inputs: Array<mixed> | void | null\n+): void {\n+ nextHook();\n+ hookLog.push({ primitive: 'Effect', stackError: new Error(), value: create });\n+}\n+\n+function useImperativeHandle<T>(\n+ ref: { current: T | null } | ((inst: T | null) => mixed) | null | void,\n+ create: () => T,\n+ inputs: Array<mixed> | void | null\n+): void {\n+ nextHook();\n+ \/\/ We don't actually store the instance anywhere if there is no ref callback\n+ \/\/ and if there is a ref callback it might not store it but if it does we\n+ \/\/ have no way of knowing where. So let's only enable introspection of the\n+ \/\/ ref itself if it is using the object form.\n+ let instance = undefined;\n+ if (ref !== null && typeof ref === 'object') {\n+ instance = ref.current;\n+ }\n+ hookLog.push({\n+ primitive: 'ImperativeHandle',\n+ stackError: new Error(),\n+ value: instance,\n+ });\n+}\n+\n+function useDebugValue(value: any, formatterFn: ?(value: any) => any) {\n+ hookLog.push({\n+ primitive: 'DebugValue',\n+ stackError: new Error(),\n+ value: typeof formatterFn === 'function' ? formatterFn(value) : value,\n+ });\n+}\n+\n+function useCallback<T>(callback: T, inputs: Array<mixed> | void | null): T {\n+ const hook = nextHook();\n+ hookLog.push({\n+ primitive: 'Callback',\n+ stackError: new Error(),\n+ value: hook !== null ? hook.memoizedState[0] : callback,\n+ });\n+ return callback;\n+}\n+\n+function useMemo<T>(\n+ nextCreate: () => T,\n+ inputs: Array<mixed> | void | null\n+): T {\n+ const hook = nextHook();\n+ const value = hook !== null ? hook.memoizedState[0] : nextCreate();\n+ hookLog.push({ primitive: 'Memo', stackError: new Error(), value });\n+ return value;\n+}\n+\n+function useResponder(\n+ responder: ReactEventResponder<any, any>,\n+ listenerProps: Object\n+): ReactEventResponderListener<any, any> {\n+ \/\/ Don't put the actual event responder object in, just its displayName\n+ const value = {\n+ responder: responder.displayName || 'EventResponder',\n+ props: listenerProps,\n+ };\n+ hookLog.push({ primitive: 'Responder', stackError: new Error(), value });\n+ return {\n+ responder,\n+ props: listenerProps,\n+ };\n+}\n+\n+const Dispatcher = {\n+ readContext,\n+ useCallback,\n+ useContext,\n+ useEffect,\n+ useImperativeHandle,\n+ useDebugValue,\n+ useLayoutEffect,\n+ useMemo,\n+ useReducer,\n+ useRef,\n+ useState,\n+ useResponder,\n+};\n+\n+\/\/ Inspect\n+\n+type ReactCurrentDispatcher = {\n+ current: null | typeof Dispatcher,\n+};\n+\n+type HooksNode = {\n+ id: number | null,\n+ isStateEditable: boolean,\n+ name: string,\n+ value: mixed,\n+ subHooks: Array<HooksNode>,\n+};\n+type HooksTree = Array<HooksNode>;\n+\n+\/\/ Don't assume\n+\/\/\n+\/\/ We can't assume that stack frames are nth steps away from anything.\n+\/\/ E.g. we can't assume that the root call shares all frames with the stack\n+\/\/ of a hook call. A simple way to demonstrate this is wrapping `new Error()`\n+\/\/ in a wrapper constructor like a polyfill. That'll add an extra frame.\n+\/\/ Similar things can happen with the call to the dispatcher. The top frame\n+\/\/ may not be the primitive. Likewise the primitive can have fewer stack frames\n+\/\/ such as when a call to useState got inlined to use dispatcher.useState.\n+\/\/\n+\/\/ We also can't assume that the last frame of the root call is the same\n+\/\/ frame as the last frame of the hook call because long stack traces can be\n+\/\/ truncated to a stack trace limit.\n+\n+let mostLikelyAncestorIndex = 0;\n+\n+function findSharedIndex(hookStack, rootStack, rootIndex) {\n+ const source = rootStack[rootIndex].source;\n+ hookSearch: for (let i = 0; i < hookStack.length; i++) {\n+ if (hookStack[i].source === source) {\n+ \/\/ This looks like a match. Validate that the rest of both stack match up.\n+ for (\n+ let a = rootIndex + 1, b = i + 1;\n+ a < rootStack.length && b < hookStack.length;\n+ a++, b++\n+ ) {\n+ if (hookStack[b].source !== rootStack[a].source) {\n+ \/\/ If not, give up and try a different match.\n+ continue hookSearch;\n+ }\n+ }\n+ return i;\n+ }\n+ }\n+ return -1;\n+}\n+\n+function findCommonAncestorIndex(rootStack, hookStack) {\n+ let rootIndex = findSharedIndex(\n+ hookStack,\n+ rootStack,\n+ mostLikelyAncestorIndex\n+ );\n+ if (rootIndex !== -1) {\n+ return rootIndex;\n+ }\n+ \/\/ If the most likely one wasn't a hit, try any other frame to see if it is shared.\n+ \/\/ If that takes more than 5 frames, something probably went wrong.\n+ for (let i = 0; i < rootStack.length && i < 5; i++) {\n+ rootIndex = findSharedIndex(hookStack, rootStack, i);\n+ if (rootIndex !== -1) {\n+ mostLikelyAncestorIndex = i;\n+ return rootIndex;\n+ }\n+ }\n+ return -1;\n+}\n+\n+function isReactWrapper(functionName, primitiveName) {\n+ if (!functionName) {\n+ return false;\n+ }\n+ const expectedPrimitiveName = 'use' + primitiveName;\n+ if (functionName.length < expectedPrimitiveName.length) {\n+ return false;\n+ }\n+ return (\n+ functionName.lastIndexOf(expectedPrimitiveName) ===\n+ functionName.length - expectedPrimitiveName.length\n+ );\n+}\n+\n+function findPrimitiveIndex(hookStack, hook) {\n+ const stackCache = getPrimitiveStackCache();\n+ const primitiveStack = stackCache.get(hook.primitive);\n+ if (primitiveStack === undefined) {\n+ return -1;\n+ }\n+ for (let i = 0; i < primitiveStack.length && i < hookStack.length; i++) {\n+ if (primitiveStack[i].source !== hookStack[i].source) {\n+ \/\/ If the next two frames are functions called `useX` then we assume that they're part of the\n+ \/\/ wrappers that the React packager or other packages adds around the dispatcher.\n+ if (\n+ i < hookStack.length - 1 &&\n+ isReactWrapper(hookStack[i].functionName, hook.primitive)\n+ ) {\n+ i++;\n+ }\n+ if (\n+ i < hookStack.length - 1 &&\n+ isReactWrapper(hookStack[i].functionName, hook.primitive)\n+ ) {\n+ i++;\n+ }\n+ return i;\n+ }\n+ }\n+ return -1;\n+}\n+\n+function parseTrimmedStack(rootStack, hook) {\n+ \/\/ Get the stack trace between the primitive hook function and\n+ \/\/ the root function call. I.e. the stack frames of custom hooks.\n+ const hookStack = ErrorStackParser.parse(hook.stackError);\n+ const rootIndex = findCommonAncestorIndex(rootStack, hookStack);\n+ const primitiveIndex = findPrimitiveIndex(hookStack, hook);\n+ if (\n+ rootIndex === -1 ||\n+ primitiveIndex === -1 ||\n+ rootIndex - primitiveIndex < 2\n+ ) {\n+ \/\/ Something went wrong. Give up.\n+ return null;\n+ }\n+ return hookStack.slice(primitiveIndex, rootIndex - 1);\n+}\n+\n+function parseCustomHookName(functionName: void | string): string {\n+ if (!functionName) {\n+ return '';\n+ }\n+ let startIndex = functionName.lastIndexOf('.');\n+ if (startIndex === -1) {\n+ startIndex = 0;\n+ }\n+ if (functionName.substr(startIndex, 3) === 'use') {\n+ startIndex += 3;\n+ }\n+ return functionName.substr(startIndex);\n+}\n+\n+function buildTree(rootStack, readHookLog): HooksTree {\n+ const rootChildren = [];\n+ let prevStack = null;\n+ let levelChildren = rootChildren;\n+ let nativeHookID = 0;\n+ const stackOfChildren = [];\n+ for (let i = 0; i < readHookLog.length; i++) {\n+ const hook = readHookLog[i];\n+ const stack = parseTrimmedStack(rootStack, hook);\n+ if (stack !== null) {\n+ \/\/ Note: The indices 0 <= n < length-1 will contain the names.\n+ \/\/ The indices 1 <= n < length will contain the source locations.\n+ \/\/ That's why we get the name from n - 1 and don't check the source\n+ \/\/ of index 0.\n+ let commonSteps = 0;\n+ if (prevStack !== null) {\n+ \/\/ Compare the current level's stack to the new stack.\n+ while (commonSteps < stack.length && commonSteps < prevStack.length) {\n+ const stackSource = stack[stack.length - commonSteps - 1].source;\n+ const prevSource =\n+ prevStack[prevStack.length - commonSteps - 1].source;\n+ if (stackSource !== prevSource) {\n+ break;\n+ }\n+ commonSteps++;\n+ }\n+ \/\/ Pop back the stack as many steps as were not common.\n+ for (let j = prevStack.length - 1; j > commonSteps; j--) {\n+ levelChildren = stackOfChildren.pop();\n+ }\n+ }\n+ \/\/ The remaining part of the new stack are custom hooks. Push them\n+ \/\/ to the tree.\n+ for (let j = stack.length - commonSteps - 1; j >= 1; j--) {\n+ const children = [];\n+ levelChildren.push({\n+ id: null,\n+ isStateEditable: false,\n+ name: parseCustomHookName(stack[j - 1].functionName),\n+ value: undefined,\n+ subHooks: children,\n+ });\n+ stackOfChildren.push(levelChildren);\n+ levelChildren = children;\n+ }\n+ prevStack = stack;\n+ }\n+ const { primitive } = hook;\n+\n+ \/\/ For now, the \"id\" of stateful hooks is just the stateful hook index.\n+ \/\/ Custom hooks have no ids, nor do non-stateful native hooks (e.g. Context, DebugValue).\n+ const id =\n+ primitive === 'Context' || primitive === 'DebugValue'\n+ ? null\n+ : nativeHookID++;\n+\n+ \/\/ For the time being, only State and Reducer hooks support runtime overrides.\n+ const isStateEditable = primitive === 'Reducer' || primitive === 'State';\n+\n+ levelChildren.push({\n+ id,\n+ isStateEditable,\n+ name: primitive,\n+ value: hook.value,\n+ subHooks: [],\n+ });\n+ }\n+\n+ \/\/ Associate custom hook values (useDebugValue() hook entries) with the correct hooks.\n+ processDebugValues(rootChildren, null);\n+\n+ return rootChildren;\n+}\n+\n+\/\/ Custom hooks support user-configurable labels (via the special useDebugValue() hook).\n+\/\/ That hook adds user-provided values to the hooks tree,\n+\/\/ but these values aren't intended to appear alongside of the other hooks.\n+\/\/ Instead they should be attributed to their parent custom hook.\n+\/\/ This method walks the tree and assigns debug values to their custom hook owners.\n+function processDebugValues(\n+ hooksTree: HooksTree,\n+ parentHooksNode: HooksNode | null\n+): void {\n+ const debugValueHooksNodes: Array<HooksNode> = [];\n+\n+ for (let i = 0; i < hooksTree.length; i++) {\n+ const hooksNode = hooksTree[i];\n+ if (hooksNode.name === 'DebugValue' && hooksNode.subHooks.length === 0) {\n+ hooksTree.splice(i, 1);\n+ i--;\n+ debugValueHooksNodes.push(hooksNode);\n+ } else {\n+ processDebugValues(hooksNode.subHooks, hooksNode);\n+ }\n+ }\n+\n+ \/\/ Bubble debug value labels to their custom hook owner.\n+ \/\/ If there is no parent hook, just ignore them for now.\n+ \/\/ (We may warn about this in the future.)\n+ if (parentHooksNode !== null) {\n+ if (debugValueHooksNodes.length === 1) {\n+ parentHooksNode.value = debugValueHooksNodes[0].value;\n+ } else if (debugValueHooksNodes.length > 1) {\n+ parentHooksNode.value = debugValueHooksNodes.map(({ value }) => value);\n+ }\n+ }\n+}\n+\n+export function inspectHooks<Props>(\n+ renderFunction: Props => React$Node,\n+ props: Props,\n+ currentDispatcher: ReactCurrentDispatcher\n+): HooksTree {\n+ \/\/ DevTools will pass the current renderer's injected dispatcher.\n+ \/\/ Other apps might compile debug hooks as part of their app though.\n+ \/\/if (currentDispatcher == null) {\n+ \/\/currentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;\n+ \/\/}\n+\n+ const previousDispatcher = currentDispatcher.current;\n+ let readHookLog;\n+ currentDispatcher.current = Dispatcher;\n+ let ancestorStackError;\n+ try {\n+ ancestorStackError = new Error();\n+ renderFunction(props);\n+ } finally {\n+ readHookLog = hookLog;\n+ hookLog = [];\n+ currentDispatcher.current = previousDispatcher;\n+ }\n+ const rootStack = ErrorStackParser.parse(ancestorStackError);\n+ return buildTree(rootStack, readHookLog);\n+}\n+\n+function setupContexts(contextMap: Map<any, any>, fiber: Fiber) {\n+ let current = fiber;\n+ while (current) {\n+ if (current.tag === ContextProvider) {\n+ const providerType: any = current.type;\n+ const context: any = providerType._context;\n+ if (!contextMap.has(context)) {\n+ \/\/ Store the current value that we're going to restore later.\n+ contextMap.set(context, context._currentValue);\n+ \/\/ Set the inner most provider value on the context.\n+ context._currentValue = current.memoizedProps.value;\n+ }\n+ }\n+ current = current.return;\n+ }\n+}\n+\n+function restoreContexts(contextMap: Map<any, any>) {\n+ contextMap.forEach((value, context) => (context._currentValue = value));\n+}\n+\n+function inspectHooksOfForwardRef<Props, Ref>(\n+ renderFunction: (Props, Ref) => React$Node,\n+ props: Props,\n+ ref: Ref,\n+ currentDispatcher: ReactCurrentDispatcher\n+): HooksTree {\n+ const previousDispatcher = currentDispatcher.current;\n+ let readHookLog;\n+ currentDispatcher.current = Dispatcher;\n+ let ancestorStackError;\n+ try {\n+ ancestorStackError = new Error();\n+ renderFunction(props, ref);\n+ } finally {\n+ readHookLog = hookLog;\n+ hookLog = [];\n+ currentDispatcher.current = previousDispatcher;\n+ }\n+ const rootStack = ErrorStackParser.parse(ancestorStackError);\n+ return buildTree(rootStack, readHookLog);\n+}\n+\n+function resolveDefaultProps(Component, baseProps) {\n+ if (Component && Component.defaultProps) {\n+ \/\/ Resolve default props. Taken from ReactElement\n+ const props = Object.assign({}, baseProps);\n+ const defaultProps = Component.defaultProps;\n+ for (const propName in defaultProps) {\n+ if (props[propName] === undefined) {\n+ props[propName] = defaultProps[propName];\n+ }\n+ }\n+ return props;\n+ }\n+ return baseProps;\n+}\n+\n+export function inspectHooksOfFiber(\n+ fiber: Fiber,\n+ currentDispatcher: ReactCurrentDispatcher\n+) {\n+ \/\/ DevTools will pass the current renderer's injected dispatcher.\n+ \/\/ Other apps might compile debug hooks as part of their app though.\n+ \/\/if (currentDispatcher == null) {\n+ \/\/currentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;\n+ \/\/}\n+\n+ if (\n+ fiber.tag !== FunctionComponent &&\n+ fiber.tag !== SimpleMemoComponent &&\n+ fiber.tag !== ForwardRef\n+ ) {\n+ throw new Error(\n+ 'Unknown Fiber. Needs to be a function component to inspect hooks.'\n+ );\n+ }\n+ \/\/ Warm up the cache so that it doesn't consume the currentHook.\n+ getPrimitiveStackCache();\n+ const type = fiber.type;\n+ let props = fiber.memoizedProps;\n+ if (type !== fiber.elementType) {\n+ props = resolveDefaultProps(type, props);\n+ }\n+ \/\/ Set up the current hook so that we can step through and read the\n+ \/\/ current state from them.\n+ currentHook = (fiber.memoizedState: Hook);\n+ const contextMap = new Map();\n+ try {\n+ setupContexts(contextMap, fiber);\n+ if (fiber.tag === ForwardRef) {\n+ return inspectHooksOfForwardRef(\n+ type.render,\n+ props,\n+ fiber.ref,\n+ currentDispatcher\n+ );\n+ }\n+ return inspectHooks(type, props, currentDispatcher);\n+ } finally {\n+ currentHook = null;\n+ restoreContexts(contextMap);\n+ }\n+}\ndiff --git a\/src\/backend\/agent.js b\/src\/backend\/agent.js\nnew file mode 100644\nindex 0000000000..f246934a5d\n--- \/dev\/null\n+++ b\/src\/backend\/agent.js\n@@ -0,0 +1,485 @@\n+\/\/ @flow\n+\n+import EventEmitter from 'events';\n+import throttle from 'lodash.throttle';\n+import {\n+ SESSION_STORAGE_LAST_SELECTION_KEY,\n+ SESSION_STORAGE_RELOAD_AND_PROFILE_KEY,\n+ SESSION_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY,\n+ __DEBUG__,\n+} from '..\/constants';\n+import {\n+ sessionStorageGetItem,\n+ sessionStorageRemoveItem,\n+ sessionStorageSetItem,\n+} from 'src\/storage';\n+import setupHighlighter from '.\/views\/Highlighter';\n+import { patch as patchConsole, unpatch as unpatchConsole } from '.\/console';\n+\n+import type { BackendBridge } from 'src\/bridge';\n+import type {\n+ InstanceAndStyle,\n+ NativeType,\n+ OwnersList,\n+ PathFrame,\n+ PathMatch,\n+ RendererID,\n+ RendererInterface,\n+} from '.\/types';\n+import type { ComponentFilter } from '..\/types';\n+\n+const debug = (methodName, ...args) => {\n+ if (__DEBUG__) {\n+ console.log(\n+ `%cAgent %c${methodName}`,\n+ 'color: purple; font-weight: bold;',\n+ 'font-weight: bold;',\n+ ...args\n+ );\n+ }\n+};\n+\n+type ElementAndRendererID = {|\n+ id: number,\n+ rendererID: number,\n+|};\n+\n+type InspectElementParams = {|\n+ id: number,\n+ path?: Array<string | number>,\n+ rendererID: number,\n+|};\n+\n+type OverrideHookParams = {|\n+ id: number,\n+ hookID: number,\n+ path: Array<string | number>,\n+ rendererID: number,\n+ value: any,\n+|};\n+\n+type SetInParams = {|\n+ id: number,\n+ path: Array<string | number>,\n+ rendererID: number,\n+ value: any,\n+|};\n+\n+type OverrideSuspenseParams = {|\n+ id: number,\n+ rendererID: number,\n+ forceFallback: boolean,\n+|};\n+\n+type PersistedSelection = {|\n+ rendererID: number,\n+ path: Array<PathFrame>,\n+|};\n+\n+export default class Agent extends EventEmitter<{|\n+ hideNativeHighlight: [],\n+ showNativeHighlight: [NativeType],\n+ shutdown: [],\n+|}> {\n+ _bridge: BackendBridge;\n+ _isProfiling: boolean = false;\n+ _recordChangeDescriptions: boolean = false;\n+ _rendererInterfaces: { [key: RendererID]: RendererInterface } = {};\n+ _persistedSelection: PersistedSelection | null = null;\n+ _persistedSelectionMatch: PathMatch | null = null;\n+\n+ constructor(bridge: BackendBridge) {\n+ super();\n+\n+ if (\n+ sessionStorageGetItem(SESSION_STORAGE_RELOAD_AND_PROFILE_KEY) === 'true'\n+ ) {\n+ this._recordChangeDescriptions =\n+ sessionStorageGetItem(\n+ SESSION_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY\n+ ) === 'true';\n+ this._isProfiling = true;\n+\n+ sessionStorageRemoveItem(SESSION_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY);\n+ sessionStorageRemoveItem(SESSION_STORAGE_RELOAD_AND_PROFILE_KEY);\n+ }\n+\n+ const persistedSelectionString = sessionStorageGetItem(\n+ SESSION_STORAGE_LAST_SELECTION_KEY\n+ );\n+ if (persistedSelectionString != null) {\n+ this._persistedSelection = JSON.parse(persistedSelectionString);\n+ }\n+\n+ this._bridge = bridge;\n+\n+ bridge.addListener('getProfilingData', this.getProfilingData);\n+ bridge.addListener('getProfilingStatus', this.getProfilingStatus);\n+ bridge.addListener('getOwnersList', this.getOwnersList);\n+ bridge.addListener('inspectElement', this.inspectElement);\n+ bridge.addListener('logElementToConsole', this.logElementToConsole);\n+ bridge.addListener('overrideContext', this.overrideContext);\n+ bridge.addListener('overrideHookState', this.overrideHookState);\n+ bridge.addListener('overrideProps', this.overrideProps);\n+ bridge.addListener('overrideState', this.overrideState);\n+ bridge.addListener('overrideSuspense', this.overrideSuspense);\n+ bridge.addListener('reloadAndProfile', this.reloadAndProfile);\n+ bridge.addListener('startProfiling', this.startProfiling);\n+ bridge.addListener('stopProfiling', this.stopProfiling);\n+ bridge.addListener(\n+ 'syncSelectionFromNativeElementsPanel',\n+ this.syncSelectionFromNativeElementsPanel\n+ );\n+ bridge.addListener('shutdown', this.shutdown);\n+ bridge.addListener(\n+ 'updateAppendComponentStack',\n+ this.updateAppendComponentStack\n+ );\n+ bridge.addListener('updateComponentFilters', this.updateComponentFilters);\n+ bridge.addListener('viewElementSource', this.viewElementSource);\n+\n+ if (this._isProfiling) {\n+ bridge.send('profilingStatus', true);\n+ }\n+\n+ \/\/ Notify the frontend if the backend supports the Storage API (e.g. localStorage).\n+ \/\/ If not, features like reload-and-profile will not work correctly and must be disabled.\n+ let isBackendStorageAPISupported = false;\n+ try {\n+ localStorage.getItem('test');\n+ isBackendStorageAPISupported = true;\n+ } catch (error) {}\n+ bridge.send('isBackendStorageAPISupported', isBackendStorageAPISupported);\n+\n+ setupHighlighter(bridge, this);\n+ }\n+\n+ get rendererInterfaces(): { [key: RendererID]: RendererInterface } {\n+ return this._rendererInterfaces;\n+ }\n+\n+ getInstanceAndStyle({\n+ id,\n+ rendererID,\n+ }: ElementAndRendererID): InstanceAndStyle | null {\n+ const renderer = this._rendererInterfaces[rendererID];\n+ if (renderer == null) {\n+ console.warn(`Invalid renderer id \"${rendererID}\"`);\n+ return null;\n+ }\n+ return renderer.getInstanceAndStyle(id);\n+ }\n+\n+ getIDForNode(node: Object): number | null {\n+ for (let rendererID in this._rendererInterfaces) {\n+ const renderer = ((this._rendererInterfaces[\n+ (rendererID: any)\n+ ]: any): RendererInterface);\n+\n+ try {\n+ const id = renderer.getFiberIDForNative(node, true);\n+ if (id !== null) {\n+ return id;\n+ }\n+ } catch (error) {\n+ \/\/ Some old React versions might throw if they can't find a match.\n+ \/\/ If so we should ignore it...\n+ }\n+ }\n+ return null;\n+ }\n+\n+ getProfilingData = ({ rendererID }: {| rendererID: RendererID |}) => {\n+ const renderer = this._rendererInterfaces[rendererID];\n+ if (renderer == null) {\n+ console.warn(`Invalid renderer id \"${rendererID}\"`);\n+ }\n+\n+ this._bridge.send('profilingData', renderer.getProfilingData());\n+ };\n+\n+ getProfilingStatus = () => {\n+ this._bridge.send('profilingStatus', this._isProfiling);\n+ };\n+\n+ getOwnersList = ({ id, rendererID }: ElementAndRendererID) => {\n+ const renderer = this._rendererInterfaces[rendererID];\n+ if (renderer == null) {\n+ console.warn(`Invalid renderer id \"${rendererID}\" for element \"${id}\"`);\n+ } else {\n+ const owners = renderer.getOwnersList(id);\n+ this._bridge.send('ownersList', ({ id, owners }: OwnersList));\n+ }\n+ };\n+\n+ inspectElement = ({ id, path, rendererID }: InspectElementParams) => {\n+ const renderer = this._rendererInterfaces[rendererID];\n+ if (renderer == null) {\n+ console.warn(`Invalid renderer id \"${rendererID}\" for element \"${id}\"`);\n+ } else {\n+ this._bridge.send('inspectedElement', renderer.inspectElement(id, path));\n+\n+ \/\/ When user selects an element, stop trying to restore the selection,\n+ \/\/ and instead remember the current selection for the next reload.\n+ if (\n+ this._persistedSelectionMatch === null ||\n+ this._persistedSelectionMatch.id !== id\n+ ) {\n+ this._persistedSelection = null;\n+ this._persistedSelectionMatch = null;\n+ renderer.setTrackedPath(null);\n+ this._throttledPersistSelection(rendererID, id);\n+ }\n+\n+ \/\/ TODO: If there was a way to change the selected DOM element\n+ \/\/ in native Elements tab without forcing a switch to it, we'd do it here.\n+ \/\/ For now, it doesn't seem like there is a way to do that:\n+ \/\/ https:\/\/github.com\/bvaughn\/react-devtools-experimental\/issues\/102\n+ \/\/ (Setting $0 doesn't work, and calling inspect() switches the tab.)\n+ }\n+ };\n+\n+ logElementToConsole = ({ id, rendererID }: ElementAndRendererID) => {\n+ const renderer = this._rendererInterfaces[rendererID];\n+ if (renderer == null) {\n+ console.warn(`Invalid renderer id \"${rendererID}\" for element \"${id}\"`);\n+ } else {\n+ renderer.logElementToConsole(id);\n+ }\n+ };\n+\n+ reloadAndProfile = (recordChangeDescriptions: boolean) => {\n+ sessionStorageSetItem(SESSION_STORAGE_RELOAD_AND_PROFILE_KEY, 'true');\n+ sessionStorageSetItem(\n+ SESSION_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY,\n+ recordChangeDescriptions ? 'true' : 'false'\n+ );\n+\n+ \/\/ This code path should only be hit if the shell has explicitly told the Store that it supports profiling.\n+ \/\/ In that case, the shell must also listen for this specific message to know when it needs to reload the app.\n+ \/\/ The agent can't do this in a way that is renderer agnostic.\n+ this._bridge.send('reloadAppForProfiling');\n+ };\n+\n+ overrideContext = ({ id, path, rendererID, value }: SetInParams) => {\n+ const renderer = this._rendererInterfaces[rendererID];\n+ if (renderer == null) {\n+ console.warn(`Invalid renderer id \"${rendererID}\" for element \"${id}\"`);\n+ } else {\n+ renderer.setInContext(id, path, value);\n+ }\n+ };\n+\n+ overrideHookState = ({\n+ id,\n+ hookID,\n+ path,\n+ rendererID,\n+ value,\n+ }: OverrideHookParams) => {\n+ const renderer = this._rendererInterfaces[rendererID];\n+ if (renderer == null) {\n+ console.warn(`Invalid renderer id \"${rendererID}\" for element \"${id}\"`);\n+ } else {\n+ renderer.setInHook(id, hookID, path, value);\n+ }\n+ };\n+\n+ overrideProps = ({ id, path, rendererID, value }: SetInParams) => {\n+ const renderer = this._rendererInterfaces[rendererID];\n+ if (renderer == null) {\n+ console.warn(`Invalid renderer id \"${rendererID}\" for element \"${id}\"`);\n+ } else {\n+ renderer.setInProps(id, path, value);\n+ }\n+ };\n+\n+ overrideState = ({ id, path, rendererID, value }: SetInParams) => {\n+ const renderer = this._rendererInterfaces[rendererID];\n+ if (renderer == null) {\n+ console.warn(`Invalid renderer id \"${rendererID}\" for element \"${id}\"`);\n+ } else {\n+ renderer.setInState(id, path, value);\n+ }\n+ };\n+\n+ overrideSuspense = ({\n+ id,\n+ rendererID,\n+ forceFallback,\n+ }: OverrideSuspenseParams) => {\n+ const renderer = this._rendererInterfaces[rendererID];\n+ if (renderer == null) {\n+ console.warn(`Invalid renderer id \"${rendererID}\" for element \"${id}\"`);\n+ } else {\n+ renderer.overrideSuspense(id, forceFallback);\n+ }\n+ };\n+\n+ selectNode(target: Object): void {\n+ const id = this.getIDForNode(target);\n+ if (id !== null) {\n+ this._bridge.send('selectFiber', id);\n+ }\n+ }\n+\n+ setRendererInterface(\n+ rendererID: RendererID,\n+ rendererInterface: RendererInterface\n+ ) {\n+ this._rendererInterfaces[rendererID] = rendererInterface;\n+\n+ if (this._isProfiling) {\n+ rendererInterface.startProfiling(this._recordChangeDescriptions);\n+ }\n+\n+ \/\/ When the renderer is attached, we need to tell it whether\n+ \/\/ we remember the previous selection that we'd like to restore.\n+ \/\/ It'll start tracking mounts for matches to the last selection path.\n+ const selection = this._persistedSelection;\n+ if (selection !== null && selection.rendererID === rendererID) {\n+ rendererInterface.setTrackedPath(selection.path);\n+ }\n+ }\n+\n+ syncSelectionFromNativeElementsPanel = () => {\n+ const target = window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0;\n+ if (target == null) {\n+ return;\n+ }\n+ this.selectNode(target);\n+ };\n+\n+ shutdown = () => {\n+ \/\/ Clean up the overlay if visible, and associated events.\n+ this.emit('shutdown');\n+ };\n+\n+ startProfiling = (recordChangeDescriptions: boolean) => {\n+ this._recordChangeDescriptions = recordChangeDescriptions;\n+ this._isProfiling = true;\n+ for (let rendererID in this._rendererInterfaces) {\n+ const renderer = ((this._rendererInterfaces[\n+ (rendererID: any)\n+ ]: any): RendererInterface);\n+ renderer.startProfiling(recordChangeDescriptions);\n+ }\n+ this._bridge.send('profilingStatus', this._isProfiling);\n+ };\n+\n+ stopProfiling = () => {\n+ this._isProfiling = false;\n+ this._recordChangeDescriptions = false;\n+ for (let rendererID in this._rendererInterfaces) {\n+ const renderer = ((this._rendererInterfaces[\n+ (rendererID: any)\n+ ]: any): RendererInterface);\n+ renderer.stopProfiling();\n+ }\n+ this._bridge.send('profilingStatus', this._isProfiling);\n+ };\n+\n+ updateAppendComponentStack = (appendComponentStack: boolean) => {\n+ \/\/ If the frontend preference has change,\n+ \/\/ or in the case of React Native- if the backend is just finding out the preference-\n+ \/\/ then install or uninstall the console overrides.\n+ \/\/ It's safe to call these methods multiple times, so we don't need to worry about that.\n+ if (appendComponentStack) {\n+ patchConsole();\n+ } else {\n+ unpatchConsole();\n+ }\n+ };\n+\n+ updateComponentFilters = (componentFilters: Array<ComponentFilter>) => {\n+ for (let rendererID in this._rendererInterfaces) {\n+ const renderer = ((this._rendererInterfaces[\n+ (rendererID: any)\n+ ]: any): RendererInterface);\n+ renderer.updateComponentFilters(componentFilters);\n+ }\n+ };\n+\n+ viewElementSource = ({ id, rendererID }: ElementAndRendererID) => {\n+ const renderer = this._rendererInterfaces[rendererID];\n+ if (renderer == null) {\n+ console.warn(`Invalid renderer id \"${rendererID}\" for element \"${id}\"`);\n+ } else {\n+ renderer.prepareViewElementSource(id);\n+ }\n+ };\n+\n+ onHookOperations = (operations: Array<number>) => {\n+ if (__DEBUG__) {\n+ debug('onHookOperations', operations);\n+ }\n+\n+ \/\/ TODO:\n+ \/\/ The chrome.runtime does not currently support transferables; it forces JSON serialization.\n+ \/\/ See bug https:\/\/bugs.chromium.org\/p\/chromium\/issues\/detail?id=927134\n+ \/\/\n+ \/\/ Regarding transferables, the postMessage doc states:\n+ \/\/ If the ownership of an object is transferred, it becomes unusable (neutered)\n+ \/\/ in the context it was sent from and becomes available only to the worker it was sent to.\n+ \/\/\n+ \/\/ Even though Chrome is eventually JSON serializing the array buffer,\n+ \/\/ using the transferable approach also sometimes causes it to throw:\n+ \/\/ DOMException: Failed to execute 'postMessage' on 'Window': ArrayBuffer at index 0 is already neutered.\n+ \/\/\n+ \/\/ See bug https:\/\/github.com\/bvaughn\/react-devtools-experimental\/issues\/25\n+ \/\/\n+ \/\/ The Store has a fallback in place that parses the message as JSON if the type isn't an array.\n+ \/\/ For now the simplest fix seems to be to not transfer the array.\n+ \/\/ This will negatively impact performance on Firefox so it's unfortunate,\n+ \/\/ but until we're able to fix the Chrome error mentioned above, it seems necessary.\n+ \/\/\n+ \/\/ this._bridge.send('operations', operations, [operations.buffer]);\n+ this._bridge.send('operations', operations);\n+\n+ if (this._persistedSelection !== null) {\n+ const rendererID = operations[0];\n+ if (this._persistedSelection.rendererID === rendererID) {\n+ \/\/ Check if we can select a deeper match for the persisted selection.\n+ const renderer = this._rendererInterfaces[rendererID];\n+ if (renderer == null) {\n+ console.warn(`Invalid renderer id \"${rendererID}\"`);\n+ } else {\n+ const prevMatch = this._persistedSelectionMatch;\n+ const nextMatch = renderer.getBestMatchForTrackedPath();\n+ this._persistedSelectionMatch = nextMatch;\n+ const prevMatchID = prevMatch !== null ? prevMatch.id : null;\n+ const nextMatchID = nextMatch !== null ? nextMatch.id : null;\n+ if (prevMatchID !== nextMatchID) {\n+ if (nextMatchID !== null) {\n+ \/\/ We moved forward, unlocking a deeper node.\n+ this._bridge.send('selectFiber', nextMatchID);\n+ }\n+ }\n+ if (nextMatch !== null && nextMatch.isFullMatch) {\n+ \/\/ We've just unlocked the innermost selected node.\n+ \/\/ There's no point tracking it further.\n+ this._persistedSelection = null;\n+ this._persistedSelectionMatch = null;\n+ renderer.setTrackedPath(null);\n+ }\n+ }\n+ }\n+ }\n+ };\n+\n+ _throttledPersistSelection = throttle((rendererID: number, id: number) => {\n+ \/\/ This is throttled, so both renderer and selected ID\n+ \/\/ might not be available by the time we read them.\n+ \/\/ This is why we need the defensive checks here.\n+ const renderer = this._rendererInterfaces[rendererID];\n+ const path = renderer != null ? renderer.getPathForElement(id) : null;\n+ if (path !== null) {\n+ sessionStorageSetItem(\n+ SESSION_STORAGE_LAST_SELECTION_KEY,\n+ JSON.stringify(({ rendererID, path }: PersistedSelection))\n+ );\n+ } else {\n+ sessionStorageRemoveItem(SESSION_STORAGE_LAST_SELECTION_KEY);\n+ }\n+ }, 1000);\n+}\ndiff --git a\/src\/backend\/console.js b\/src\/backend\/console.js\nnew file mode 100644\nindex 0000000000..22f5db9515\n--- \/dev\/null\n+++ b\/src\/backend\/console.js\n@@ -0,0 +1,143 @@\n+\/\/ @flow\n+\n+import { getInternalReactConstants } from '.\/renderer';\n+import describeComponentFrame from '.\/describeComponentFrame';\n+\n+import type { Fiber, ReactRenderer } from '.\/types';\n+\n+const APPEND_STACK_TO_METHODS = ['error', 'trace', 'warn'];\n+\n+const FRAME_REGEX = \/\\n {4}in \/;\n+\n+const injectedRenderers: Map<\n+ ReactRenderer,\n+ {|\n+ getCurrentFiber: () => Fiber | null,\n+ getDisplayNameForFiber: (fiber: Fiber) => string | null,\n+ |}\n+> = new Map();\n+\n+let targetConsole: Object = console;\n+let targetConsoleMethods = {};\n+for (let method in console) {\n+ targetConsoleMethods[method] = console[method];\n+}\n+\n+let unpatchFn: null | (() => void) = null;\n+\n+\/\/ Enables e.g. Jest tests to inject a mock console object.\n+export function dangerous_setTargetConsoleForTesting(\n+ targetConsoleForTesting: Object\n+): void {\n+ targetConsole = targetConsoleForTesting;\n+\n+ targetConsoleMethods = {};\n+ for (let method in targetConsole) {\n+ targetConsoleMethods[method] = console[method];\n+ }\n+}\n+\n+\/\/ v16 renderers should use this method to inject internals necessary to generate a component stack.\n+\/\/ These internals will be used if the console is patched.\n+\/\/ Injecting them separately allows the console to easily be patched or unpacted later (at runtime).\n+export function registerRenderer(renderer: ReactRenderer): void {\n+ const { getCurrentFiber, findFiberByHostInstance, version } = renderer;\n+\n+ \/\/ Ignore React v15 and older because they don't expose a component stack anyway.\n+ if (typeof findFiberByHostInstance !== 'function') {\n+ return;\n+ }\n+\n+ if (typeof getCurrentFiber === 'function') {\n+ const { getDisplayNameForFiber } = getInternalReactConstants(version);\n+\n+ injectedRenderers.set(renderer, {\n+ getCurrentFiber,\n+ getDisplayNameForFiber,\n+ });\n+ }\n+}\n+\n+\/\/ Patches whitelisted console methods to append component stack for the current fiber.\n+\/\/ Call unpatch() to remove the injected behavior.\n+export function patch(): void {\n+ if (unpatchFn !== null) {\n+ \/\/ Don't patch twice.\n+ return;\n+ }\n+\n+ const originalConsoleMethods = {};\n+\n+ unpatchFn = () => {\n+ for (let method in originalConsoleMethods) {\n+ try {\n+ \/\/ $FlowFixMe property error|warn is not writable.\n+ targetConsole[method] = originalConsoleMethods[method];\n+ } catch (error) {}\n+ }\n+ };\n+\n+ APPEND_STACK_TO_METHODS.forEach(method => {\n+ try {\n+ const originalMethod = (originalConsoleMethods[method] =\n+ targetConsole[method]);\n+\n+ const overrideMethod = (...args) => {\n+ try {\n+ \/\/ If we are ever called with a string that already has a component stack, e.g. a React error\/warning,\n+ \/\/ don't append a second stack.\n+ const alreadyHasComponentStack =\n+ args.length > 0 && FRAME_REGEX.exec(args[args.length - 1]);\n+\n+ if (!alreadyHasComponentStack) {\n+ \/\/ If there's a component stack for at least one of the injected renderers, append it.\n+ \/\/ We don't handle the edge case of stacks for more than one (e.g. interleaved renderers?)\n+ for (let {\n+ getCurrentFiber,\n+ getDisplayNameForFiber,\n+ } of injectedRenderers.values()) {\n+ let current: ?Fiber = getCurrentFiber();\n+ let ownerStack: string = '';\n+ while (current != null) {\n+ const name = getDisplayNameForFiber(current);\n+ const owner = current._debugOwner;\n+ const ownerName =\n+ owner != null ? getDisplayNameForFiber(owner) : null;\n+\n+ ownerStack += describeComponentFrame(\n+ name,\n+ current._debugSource,\n+ ownerName\n+ );\n+\n+ current = owner;\n+ }\n+\n+ if (ownerStack !== '') {\n+ args.push(ownerStack);\n+ break;\n+ }\n+ }\n+ }\n+ } catch (error) {\n+ \/\/ Don't let a DevTools or React internal error interfere with logging.\n+ }\n+\n+ originalMethod(...args);\n+ };\n+\n+ overrideMethod.__REACT_DEVTOOLS_ORIGINAL_METHOD__ = originalMethod;\n+\n+ \/\/ $FlowFixMe property error|warn is not writable.\n+ targetConsole[method] = overrideMethod;\n+ } catch (error) {}\n+ });\n+}\n+\n+\/\/ Removed component stack patch from whitelisted console methods.\n+export function unpatch(): void {\n+ if (unpatchFn !== null) {\n+ unpatchFn();\n+ unpatchFn = null;\n+ }\n+}\ndiff --git a\/src\/backend\/describeComponentFrame.js b\/src\/backend\/describeComponentFrame.js\nnew file mode 100644\nindex 0000000000..5c632471ba\n--- \/dev\/null\n+++ b\/src\/backend\/describeComponentFrame.js\n@@ -0,0 +1,41 @@\n+\/\/ @flow\n+\n+\/\/ This file was forked from the React GitHub repo:\n+\/\/ https:\/\/raw.githubusercontent.com\/facebook\/react\/master\/packages\/shared\/describeComponentFrame.js\n+\/\/\n+\/\/ It has been modified sligthly to add a zero width space as commented below.\n+\n+const BEFORE_SLASH_RE = \/^(.*)[\\\\\/]\/;\n+\n+export default function describeComponentFrame(\n+ name: null | string,\n+ source: any,\n+ ownerName: null | string\n+) {\n+ let sourceInfo = '';\n+ if (source) {\n+ let path = source.fileName;\n+ let fileName = path.replace(BEFORE_SLASH_RE, '');\n+ if (__DEV__) {\n+ \/\/ In DEV, include code for a common special case:\n+ \/\/ prefer \"folder\/index.js\" instead of just \"index.js\".\n+ if (\/^index\\.\/.test(fileName)) {\n+ const match = path.match(BEFORE_SLASH_RE);\n+ if (match) {\n+ const pathBeforeSlash = match[1];\n+ if (pathBeforeSlash) {\n+ const folderName = pathBeforeSlash.replace(BEFORE_SLASH_RE, '');\n+ \/\/ Note the below string contains a zero width space after the \"\/\" character.\n+ \/\/ This is to prevent browsers like Chrome from formatting the file name as a link.\n+ \/\/ (Since this is a source link, it would not work to open the source file anyway.)\n+ fileName = folderName + '\/' + fileName;\n+ }\n+ }\n+ }\n+ }\n+ sourceInfo = ' (at ' + fileName + ':' + source.lineNumber + ')';\n+ } else if (ownerName) {\n+ sourceInfo = ' (created by ' + ownerName + ')';\n+ }\n+ return '\\n in ' + (name || 'Unknown') + sourceInfo;\n+}\ndiff --git a\/src\/backend\/index.js b\/src\/backend\/index.js\nnew file mode 100644\nindex 0000000000..feee4c00de\n--- \/dev\/null\n+++ b\/src\/backend\/index.js\n@@ -0,0 +1,95 @@\n+\/\/ @flow\n+\n+import Agent from '.\/agent';\n+\n+import { attach } from '.\/renderer';\n+import { attach as attachLegacy } from '.\/legacy\/renderer';\n+\n+import type { DevToolsHook, ReactRenderer, RendererInterface } from '.\/types';\n+\n+export function initBackend(\n+ hook: DevToolsHook,\n+ agent: Agent,\n+ global: Object\n+): () => void {\n+ const subs = [\n+ hook.sub(\n+ 'renderer-attached',\n+ ({\n+ id,\n+ renderer,\n+ rendererInterface,\n+ }: {\n+ id: number,\n+ renderer: ReactRenderer,\n+ rendererInterface: RendererInterface,\n+ }) => {\n+ agent.setRendererInterface(id, rendererInterface);\n+\n+ \/\/ Now that the Store and the renderer interface are connected,\n+ \/\/ it's time to flush the pending operation codes to the frontend.\n+ rendererInterface.flushInitialOperations();\n+ }\n+ ),\n+\n+ hook.sub('operations', agent.onHookOperations),\n+\n+ \/\/ TODO Add additional subscriptions required for profiling mode\n+ ];\n+\n+ const attachRenderer = (id: number, renderer: ReactRenderer) => {\n+ let rendererInterface = hook.rendererInterfaces.get(id);\n+\n+ \/\/ Inject any not-yet-injected renderers (if we didn't reload-and-profile)\n+ if (!rendererInterface) {\n+ if (typeof renderer.findFiberByHostInstance === 'function') {\n+ rendererInterface = attach(hook, id, renderer, global);\n+ } else {\n+ rendererInterface = attachLegacy(hook, id, renderer, global);\n+ }\n+\n+ hook.rendererInterfaces.set(id, rendererInterface);\n+ }\n+\n+ \/\/ Notify the DevTools frontend about new renderers.\n+ \/\/ This includes any that were attached early (via __REACT_DEVTOOLS_ATTACH__).\n+ hook.emit('renderer-attached', {\n+ id,\n+ renderer,\n+ rendererInterface,\n+ });\n+ };\n+\n+ \/\/ Connect renderers that have already injected themselves.\n+ hook.renderers.forEach((renderer, id) => {\n+ attachRenderer(id, renderer);\n+ });\n+\n+ \/\/ Connect any new renderers that injected themselves.\n+ subs.push(\n+ hook.sub(\n+ 'renderer',\n+ ({ id, renderer }: { id: number, renderer: ReactRenderer }) => {\n+ attachRenderer(id, renderer);\n+ }\n+ )\n+ );\n+\n+ hook.emit('react-devtools', agent);\n+ hook.reactDevtoolsAgent = agent;\n+ const onAgentShutdown = () => {\n+ subs.forEach(fn => fn());\n+ hook.rendererInterfaces.forEach(rendererInterface => {\n+ rendererInterface.cleanup();\n+ });\n+ hook.reactDevtoolsAgent = null;\n+ };\n+ agent.addListener('shutdown', onAgentShutdown);\n+ subs.push(() => {\n+ agent.removeListener('shutdown', onAgentShutdown);\n+ });\n+\n+ return () => {\n+ subs.forEach(fn => fn());\n+ };\n+}\ndiff --git a\/src\/backend\/legacy\/renderer.js b\/src\/backend\/legacy\/renderer.js\nnew file mode 100644\nindex 0000000000..51ca6a626a\n--- \/dev\/null\n+++ b\/src\/backend\/legacy\/renderer.js\n@@ -0,0 +1,936 @@\n+\/\/ @flow\n+\n+import {\n+ ElementTypeClass,\n+ ElementTypeFunction,\n+ ElementTypeRoot,\n+ ElementTypeHostComponent,\n+ ElementTypeOtherOrUnknown,\n+} from 'src\/types';\n+import { getUID, utfEncodeString, printOperationsArray } from '..\/..\/utils';\n+import { cleanForBridge, copyWithSet } from '..\/utils';\n+import { getDisplayName } from 'src\/utils';\n+import {\n+ __DEBUG__,\n+ TREE_OPERATION_ADD,\n+ TREE_OPERATION_REMOVE,\n+ TREE_OPERATION_REORDER_CHILDREN,\n+} from '..\/..\/constants';\n+import { decorateMany, forceUpdate, restoreMany } from '.\/utils';\n+\n+import type {\n+ DevToolsHook,\n+ GetFiberIDForNative,\n+ InspectedElementPayload,\n+ InstanceAndStyle,\n+ NativeType,\n+ PathFrame,\n+ PathMatch,\n+ RendererInterface,\n+} from '..\/types';\n+import type { ComponentFilter, ElementType } from 'src\/types';\n+import type { Owner, InspectedElement } from '..\/types';\n+\n+export type InternalInstance = Object;\n+type LegacyRenderer = Object;\n+\n+function getData(internalInstance: InternalInstance) {\n+ let displayName = null;\n+ let key = null;\n+\n+ \/\/ != used deliberately here to catch undefined and null\n+ if (internalInstance._currentElement != null) {\n+ if (internalInstance._currentElement.key) {\n+ key = String(internalInstance._currentElement.key);\n+ }\n+\n+ const elementType = internalInstance._currentElement.type;\n+ if (typeof elementType === 'string') {\n+ displayName = elementType;\n+ } else if (typeof elementType === 'function') {\n+ displayName = getDisplayName(elementType);\n+ }\n+ }\n+\n+ return {\n+ displayName,\n+ key,\n+ };\n+}\n+\n+function getElementType(internalInstance: InternalInstance): ElementType {\n+ \/\/ != used deliberately here to catch undefined and null\n+ if (internalInstance._currentElement != null) {\n+ const elementType = internalInstance._currentElement.type;\n+ if (typeof elementType === 'function') {\n+ const publicInstance = internalInstance.getPublicInstance();\n+ if (publicInstance !== null) {\n+ return ElementTypeClass;\n+ } else {\n+ return ElementTypeFunction;\n+ }\n+ } else if (typeof elementType === 'string') {\n+ return ElementTypeHostComponent;\n+ }\n+ }\n+ return ElementTypeOtherOrUnknown;\n+}\n+\n+function getChildren(internalInstance: Object): Array<any> {\n+ let children = [];\n+\n+ \/\/ If the parent is a native node without rendered children, but with\n+ \/\/ multiple string children, then the `element` that gets passed in here is\n+ \/\/ a plain value -- a string or number.\n+ if (typeof internalInstance !== 'object') {\n+ \/\/ No children\n+ } else if (\n+ internalInstance._currentElement === null ||\n+ internalInstance._currentElement === false\n+ ) {\n+ \/\/ No children\n+ } else if (internalInstance._renderedComponent) {\n+ const child = internalInstance._renderedComponent;\n+ if (getElementType(child) !== ElementTypeOtherOrUnknown) {\n+ children.push(child);\n+ }\n+ } else if (internalInstance._renderedChildren) {\n+ const renderedChildren = internalInstance._renderedChildren;\n+ for (let name in renderedChildren) {\n+ const child = renderedChildren[name];\n+ if (getElementType(child) !== ElementTypeOtherOrUnknown) {\n+ children.push(child);\n+ }\n+ }\n+ }\n+ \/\/ Note: we skip the case where children are just strings or numbers\n+ \/\/ because the new DevTools skips over host text nodes anyway.\n+ return children;\n+}\n+\n+export function attach(\n+ hook: DevToolsHook,\n+ rendererID: number,\n+ renderer: LegacyRenderer,\n+ global: Object\n+): RendererInterface {\n+ const idToInternalInstanceMap: Map<number, InternalInstance> = new Map();\n+ const internalInstanceToIDMap: WeakMap<\n+ InternalInstance,\n+ number\n+ > = new WeakMap();\n+ const internalInstanceToRootIDMap: WeakMap<\n+ InternalInstance,\n+ number\n+ > = new WeakMap();\n+\n+ let getInternalIDForNative: GetFiberIDForNative = ((null: any): GetFiberIDForNative);\n+ let findNativeNodeForInternalID: (id: number) => ?NativeType;\n+\n+ if (renderer.ComponentTree) {\n+ getInternalIDForNative = (node, findNearestUnfilteredAncestor) => {\n+ const internalInstance = renderer.ComponentTree.getClosestInstanceFromNode(\n+ node\n+ );\n+ return internalInstanceToIDMap.get(internalInstance) || null;\n+ };\n+ findNativeNodeForInternalID = (id: number) => {\n+ const internalInstance = idToInternalInstanceMap.get(id);\n+ return renderer.ComponentTree.getNodeFromInstance(internalInstance);\n+ };\n+ } else if (renderer.Mount.getID && renderer.Mount.getNode) {\n+ getInternalIDForNative = (node, findNearestUnfilteredAncestor) => {\n+ \/\/ Not implemented.\n+ return null;\n+ };\n+ findNativeNodeForInternalID = (id: number) => {\n+ \/\/ Not implemented.\n+ return null;\n+ };\n+ }\n+\n+ function getID(internalInstance: InternalInstance): number {\n+ if (typeof internalInstance !== 'object') {\n+ throw new Error('Invalid internal instance: ' + internalInstance);\n+ }\n+ if (!internalInstanceToIDMap.has(internalInstance)) {\n+ const id = getUID();\n+ internalInstanceToIDMap.set(internalInstance, id);\n+ idToInternalInstanceMap.set(id, internalInstance);\n+ }\n+ return ((internalInstanceToIDMap.get(internalInstance): any): number);\n+ }\n+\n+ function areEqualArrays(a, b) {\n+ if (a.length !== b.length) {\n+ return false;\n+ }\n+ for (let i = 0; i < a.length; i++) {\n+ if (a[i] !== b[i]) {\n+ return false;\n+ }\n+ }\n+ return true;\n+ }\n+\n+ \/\/ This is shared mutable state that lets us keep track of where we are.\n+ let parentIDStack = [];\n+\n+ let oldReconcilerMethods = null;\n+ if (renderer.Reconciler) {\n+ \/\/ React 15\n+ oldReconcilerMethods = decorateMany(renderer.Reconciler, {\n+ mountComponent(fn, args) {\n+ const internalInstance = args[0];\n+ const hostContainerInfo = args[3];\n+ if (getElementType(internalInstance) === ElementTypeOtherOrUnknown) {\n+ return fn.apply(this, args);\n+ }\n+ if (hostContainerInfo._topLevelWrapper === undefined) {\n+ \/\/ SSR\n+ return fn.apply(this, args);\n+ }\n+\n+ const id = getID(internalInstance);\n+ \/\/ Push the operation.\n+ const parentID =\n+ parentIDStack.length > 0\n+ ? parentIDStack[parentIDStack.length - 1]\n+ : 0;\n+ recordMount(internalInstance, id, parentID);\n+ parentIDStack.push(id);\n+\n+ \/\/ Remember the root.\n+ internalInstanceToRootIDMap.set(\n+ internalInstance,\n+ getID(hostContainerInfo._topLevelWrapper)\n+ );\n+\n+ try {\n+ const result = fn.apply(this, args);\n+ parentIDStack.pop();\n+ return result;\n+ } catch (err) {\n+ parentIDStack = [];\n+ throw err;\n+ } finally {\n+ if (parentIDStack.length === 0) {\n+ const rootID = internalInstanceToRootIDMap.get(internalInstance);\n+ if (rootID === undefined) {\n+ throw new Error('Expected to find root ID.');\n+ }\n+ flushPendingEvents(rootID);\n+ }\n+ }\n+ },\n+ performUpdateIfNecessary(fn, args) {\n+ const internalInstance = args[0];\n+ if (getElementType(internalInstance) === ElementTypeOtherOrUnknown) {\n+ return fn.apply(this, args);\n+ }\n+\n+ const id = getID(internalInstance);\n+ parentIDStack.push(id);\n+\n+ const prevChildren = getChildren(internalInstance);\n+ try {\n+ const result = fn.apply(this, args);\n+\n+ const nextChildren = getChildren(internalInstance);\n+ if (!areEqualArrays(prevChildren, nextChildren)) {\n+ \/\/ Push the operation\n+ recordReorder(internalInstance, id, nextChildren);\n+ }\n+\n+ parentIDStack.pop();\n+ return result;\n+ } catch (err) {\n+ parentIDStack = [];\n+ throw err;\n+ } finally {\n+ if (parentIDStack.length === 0) {\n+ const rootID = internalInstanceToRootIDMap.get(internalInstance);\n+ if (rootID === undefined) {\n+ throw new Error('Expected to find root ID.');\n+ }\n+ flushPendingEvents(rootID);\n+ }\n+ }\n+ },\n+ receiveComponent(fn, args) {\n+ const internalInstance = args[0];\n+ if (getElementType(internalInstance) === ElementTypeOtherOrUnknown) {\n+ return fn.apply(this, args);\n+ }\n+\n+ const id = getID(internalInstance);\n+ parentIDStack.push(id);\n+\n+ const prevChildren = getChildren(internalInstance);\n+ try {\n+ const result = fn.apply(this, args);\n+\n+ const nextChildren = getChildren(internalInstance);\n+ if (!areEqualArrays(prevChildren, nextChildren)) {\n+ \/\/ Push the operation\n+ recordReorder(internalInstance, id, nextChildren);\n+ }\n+\n+ parentIDStack.pop();\n+ return result;\n+ } catch (err) {\n+ parentIDStack = [];\n+ throw err;\n+ } finally {\n+ if (parentIDStack.length === 0) {\n+ const rootID = internalInstanceToRootIDMap.get(internalInstance);\n+ if (rootID === undefined) {\n+ throw new Error('Expected to find root ID.');\n+ }\n+ flushPendingEvents(rootID);\n+ }\n+ }\n+ },\n+ unmountComponent(fn, args) {\n+ const internalInstance = args[0];\n+ if (getElementType(internalInstance) === ElementTypeOtherOrUnknown) {\n+ return fn.apply(this, args);\n+ }\n+\n+ const id = getID(internalInstance);\n+ parentIDStack.push(id);\n+ try {\n+ const result = fn.apply(this, args);\n+ parentIDStack.pop();\n+\n+ \/\/ Push the operation.\n+ recordUnmount(internalInstance, id);\n+\n+ return result;\n+ } catch (err) {\n+ parentIDStack = [];\n+ throw err;\n+ } finally {\n+ if (parentIDStack.length === 0) {\n+ const rootID = internalInstanceToRootIDMap.get(internalInstance);\n+ if (rootID === undefined) {\n+ throw new Error('Expected to find root ID.');\n+ }\n+ flushPendingEvents(rootID);\n+ }\n+ }\n+ },\n+ });\n+ }\n+\n+ function cleanup() {\n+ if (oldReconcilerMethods !== null) {\n+ if (renderer.Component) {\n+ restoreMany(renderer.Component.Mixin, oldReconcilerMethods);\n+ } else {\n+ restoreMany(renderer.Reconciler, oldReconcilerMethods);\n+ }\n+ }\n+ oldReconcilerMethods = null;\n+ }\n+\n+ function recordMount(\n+ internalInstance: InternalInstance,\n+ id: number,\n+ parentID: number\n+ ) {\n+ const isRoot = parentID === 0;\n+\n+ if (__DEBUG__) {\n+ console.log(\n+ '%crecordMount()',\n+ 'color: green; font-weight: bold;',\n+ id,\n+ getData(internalInstance).displayName\n+ );\n+ }\n+\n+ if (isRoot) {\n+ \/\/ TODO Is this right? For all versions?\n+ const hasOwnerMetadata =\n+ internalInstance._currentElement != null &&\n+ internalInstance._currentElement._owner != null;\n+\n+ pushOperation(TREE_OPERATION_ADD);\n+ pushOperation(id);\n+ pushOperation(ElementTypeRoot);\n+ pushOperation(0); \/\/ isProfilingSupported?\n+ pushOperation(hasOwnerMetadata ? 1 : 0);\n+ } else {\n+ const type = getElementType(internalInstance);\n+ const { displayName, key } = getData(internalInstance);\n+\n+ const ownerID =\n+ internalInstance._currentElement != null &&\n+ internalInstance._currentElement._owner != null\n+ ? getID(internalInstance._currentElement._owner)\n+ : 0;\n+\n+ let displayNameStringID = getStringID(displayName);\n+ let keyStringID = getStringID(key);\n+ pushOperation(TREE_OPERATION_ADD);\n+ pushOperation(id);\n+ pushOperation(type);\n+ pushOperation(parentID);\n+ pushOperation(ownerID);\n+ pushOperation(displayNameStringID);\n+ pushOperation(keyStringID);\n+ }\n+ }\n+\n+ function recordReorder(\n+ internalInstance: InternalInstance,\n+ id: number,\n+ nextChildren: Array<InternalInstance>\n+ ) {\n+ pushOperation(TREE_OPERATION_REORDER_CHILDREN);\n+ pushOperation(id);\n+ const nextChildIDs = nextChildren.map(getID);\n+ pushOperation(nextChildIDs.length);\n+ for (let i = 0; i < nextChildIDs.length; i++) {\n+ pushOperation(nextChildIDs[i]);\n+ }\n+ }\n+\n+ function recordUnmount(internalInstance: InternalInstance, id: number) {\n+ pendingUnmountedIDs.push(id);\n+ idToInternalInstanceMap.delete(id);\n+ }\n+\n+ function crawlAndRecordInitialMounts(\n+ id: number,\n+ parentID: number,\n+ rootID: number\n+ ) {\n+ const internalInstance = idToInternalInstanceMap.get(id);\n+\n+ if (__DEBUG__) {\n+ console.group('crawlAndRecordInitialMounts() id:', id);\n+ }\n+\n+ internalInstanceToRootIDMap.set(internalInstance, rootID);\n+ recordMount(internalInstance, id, parentID);\n+ getChildren(internalInstance).forEach(child =>\n+ crawlAndRecordInitialMounts(getID(child), id, rootID)\n+ );\n+\n+ if (__DEBUG__) {\n+ console.groupEnd();\n+ }\n+ }\n+\n+ function flushInitialOperations() {\n+ \/\/ Crawl roots though and register any nodes that mounted before we were injected.\n+\n+ const roots =\n+ renderer.Mount._instancesByReactRootID ||\n+ renderer.Mount._instancesByContainerID;\n+\n+ for (let key in roots) {\n+ const internalInstance = roots[key];\n+ const id = getID(internalInstance);\n+ crawlAndRecordInitialMounts(id, 0, id);\n+ flushPendingEvents(id);\n+ }\n+ }\n+\n+ let pendingOperations: Array<number> = [];\n+ let pendingStringTable: Map<string, number> = new Map();\n+ let pendingUnmountedIDs: Array<number> = [];\n+ let pendingStringTableLength: number = 0;\n+ let pendingUnmountedRootID: number | null = null;\n+\n+ function flushPendingEvents(rootID: number) {\n+ if (\n+ pendingOperations.length === 0 &&\n+ pendingUnmountedIDs.length === 0 &&\n+ pendingUnmountedRootID === null\n+ ) {\n+ return;\n+ }\n+\n+ const numUnmountIDs =\n+ pendingUnmountedIDs.length + (pendingUnmountedRootID === null ? 0 : 1);\n+\n+ const operations = new Array(\n+ \/\/ Identify which renderer this update is coming from.\n+ 2 + \/\/ [rendererID, rootFiberID]\n+ \/\/ How big is the string table?\n+ 1 + \/\/ [stringTableLength]\n+ \/\/ Then goes the actual string table.\n+ pendingStringTableLength +\n+ \/\/ All unmounts are batched in a single message.\n+ \/\/ [TREE_OPERATION_REMOVE, removedIDLength, ...ids]\n+ (numUnmountIDs > 0 ? 2 + numUnmountIDs : 0) +\n+ \/\/ Mount operations\n+ pendingOperations.length\n+ );\n+\n+ \/\/ Identify which renderer this update is coming from.\n+ \/\/ This enables roots to be mapped to renderers,\n+ \/\/ Which in turn enables fiber properations, states, and hooks to be inspected.\n+ let i = 0;\n+ operations[i++] = rendererID;\n+ operations[i++] = rootID;\n+\n+ \/\/ Now fill in the string table.\n+ \/\/ [stringTableLength, str1Length, ...str1, str2Length, ...str2, ...]\n+ operations[i++] = pendingStringTableLength;\n+ pendingStringTable.forEach((value, key) => {\n+ operations[i++] = key.length;\n+ const encodedKey = utfEncodeString(key);\n+ for (let j = 0; j < encodedKey.length; j++) {\n+ operations[i + j] = encodedKey[j];\n+ }\n+ i += key.length;\n+ });\n+\n+ if (numUnmountIDs > 0) {\n+ \/\/ All unmounts except roots are batched in a single message.\n+ operations[i++] = TREE_OPERATION_REMOVE;\n+ \/\/ The first number is how many unmounted IDs we're gonna send.\n+ operations[i++] = numUnmountIDs;\n+ \/\/ Fill in the unmounts\n+ for (let j = 0; j < pendingUnmountedIDs.length; j++) {\n+ operations[i++] = pendingUnmountedIDs[j];\n+ }\n+ \/\/ The root ID should always be unmounted last.\n+ if (pendingUnmountedRootID !== null) {\n+ operations[i] = pendingUnmountedRootID;\n+ i++;\n+ }\n+ }\n+\n+ \/\/ Fill in the rest of the operations.\n+ for (let j = 0; j < pendingOperations.length; j++) {\n+ operations[i + j] = pendingOperations[j];\n+ }\n+ i += pendingOperations.length;\n+\n+ if (__DEBUG__) {\n+ printOperationsArray(operations);\n+ }\n+\n+ \/\/ If we've already connected to the frontend, just pass the operations through.\n+ hook.emit('operations', operations);\n+\n+ pendingOperations.length = 0;\n+ pendingUnmountedIDs = [];\n+ pendingUnmountedRootID = null;\n+ pendingStringTable.clear();\n+ pendingStringTableLength = 0;\n+ }\n+\n+ function pushOperation(op: number): void {\n+ if (__DEV__) {\n+ if (!Number.isInteger(op)) {\n+ console.error(\n+ 'pushOperation() was called but the value is not an integer.',\n+ op\n+ );\n+ }\n+ }\n+ pendingOperations.push(op);\n+ }\n+\n+ function getStringID(str: string | null): number {\n+ if (str === null) {\n+ return 0;\n+ }\n+ const existingID = pendingStringTable.get(str);\n+ if (existingID !== undefined) {\n+ return existingID;\n+ }\n+ const stringID = pendingStringTable.size + 1;\n+ pendingStringTable.set(str, stringID);\n+ \/\/ The string table total length needs to account\n+ \/\/ both for the string length, and for the array item\n+ \/\/ that contains the length itself. Hence + 1.\n+ pendingStringTableLength += str.length + 1;\n+ return stringID;\n+ }\n+\n+ let currentlyInspectedElementID: number | null = null;\n+ let currentlyInspectedPaths: Object = {};\n+\n+ \/\/ Track the intersection of currently inspected paths,\n+ \/\/ so that we can send their data along if the element is re-rendered.\n+ function mergeInspectedPaths(path: Array<string | number>) {\n+ let current = currentlyInspectedPaths;\n+ path.forEach(key => {\n+ if (!current[key]) {\n+ current[key] = {};\n+ }\n+ current = current[key];\n+ });\n+ }\n+\n+ function createIsPathWhitelisted(key: string) {\n+ \/\/ This function helps prevent previously-inspected paths from being dehydrated in updates.\n+ \/\/ This is important to avoid a bad user experience where expanded toggles collapse on update.\n+ return function isPathWhitelisted(path: Array<string | number>): boolean {\n+ let current = currentlyInspectedPaths[key];\n+ if (!current) {\n+ return false;\n+ }\n+ for (let i = 0; i < path.length; i++) {\n+ current = current[path[i]];\n+ if (!current) {\n+ return false;\n+ }\n+ }\n+ return true;\n+ };\n+ }\n+\n+ \/\/ Fast path props lookup for React Native style editor.\n+ function getInstanceAndStyle(id: number): InstanceAndStyle {\n+ let instance = null;\n+ let style = null;\n+\n+ const internalInstance = idToInternalInstanceMap.get(id);\n+ if (internalInstance != null) {\n+ instance = internalInstance._instance || null;\n+\n+ const element = internalInstance._currentElement;\n+ if (element != null && element.props != null) {\n+ style = element.props.style || null;\n+ }\n+ }\n+\n+ return {\n+ instance,\n+ style,\n+ };\n+ }\n+\n+ function updateSelectedElement(id: number): void {\n+ const internalInstance = idToInternalInstanceMap.get(id);\n+ if (internalInstance == null) {\n+ console.warn(`Could not find instance with id \"${id}\"`);\n+ return;\n+ }\n+\n+ switch (getElementType(internalInstance)) {\n+ case ElementTypeClass:\n+ global.$r = internalInstance._instance;\n+ break;\n+ case ElementTypeFunction:\n+ const element = internalInstance._currentElement;\n+ if (element == null) {\n+ console.warn(`Could not find element with id \"${id}\"`);\n+ return;\n+ }\n+\n+ global.$r = {\n+ props: element.props,\n+ type: element.type,\n+ };\n+ break;\n+ default:\n+ global.$r = null;\n+ break;\n+ }\n+ }\n+\n+ function inspectElement(\n+ id: number,\n+ path?: Array<string | number>\n+ ): InspectedElementPayload {\n+ if (currentlyInspectedElementID !== id) {\n+ currentlyInspectedElementID = id;\n+ currentlyInspectedPaths = {};\n+ }\n+\n+ const inspectedElement = inspectElementRaw(id);\n+ if (inspectedElement === null) {\n+ return {\n+ id,\n+ type: 'not-found',\n+ };\n+ }\n+\n+ if (path != null) {\n+ mergeInspectedPaths(path);\n+ }\n+\n+ \/\/ Any time an inspected element has an update,\n+ \/\/ we should update the selected $r value as wel.\n+ \/\/ Do this before dehyration (cleanForBridge).\n+ updateSelectedElement(id);\n+\n+ inspectedElement.context = cleanForBridge(\n+ inspectedElement.context,\n+ createIsPathWhitelisted('context')\n+ );\n+ inspectedElement.props = cleanForBridge(\n+ inspectedElement.props,\n+ createIsPathWhitelisted('props')\n+ );\n+ inspectedElement.state = cleanForBridge(\n+ inspectedElement.state,\n+ createIsPathWhitelisted('state')\n+ );\n+\n+ return {\n+ id,\n+ type: 'full-data',\n+ value: inspectedElement,\n+ };\n+ }\n+\n+ function inspectElementRaw(id: number): InspectedElement | null {\n+ const internalInstance = idToInternalInstanceMap.get(id);\n+ const displayName = getData(internalInstance).displayName;\n+ const type = getElementType(internalInstance);\n+\n+ let context = null;\n+ let owners = null;\n+ let props = null;\n+ let state = null;\n+ let source = null;\n+\n+ if (internalInstance != null) {\n+ const element = internalInstance._currentElement;\n+ if (element !== null) {\n+ props = element.props;\n+ source = element._source != null ? element._source : null;\n+\n+ let owner = element._owner;\n+ if (owner) {\n+ owners = [];\n+ while (owner != null) {\n+ owners.push({\n+ displayName: getData(owner).displayName || 'Unknown',\n+ id: getID(owner),\n+ type: getElementType(owner),\n+ });\n+ if (owner._currentElement) {\n+ owner = owner._currentElement._owner;\n+ }\n+ }\n+ }\n+ }\n+\n+ const publicInstance = internalInstance._instance;\n+ if (publicInstance != null) {\n+ context = publicInstance.context || null;\n+ state = publicInstance.state || null;\n+ }\n+ }\n+\n+ return {\n+ id,\n+\n+ \/\/ Hooks did not exist in legacy versions\n+ canEditHooks: false,\n+\n+ \/\/ Does the current renderer support editable function props?\n+ canEditFunctionProps: true,\n+\n+ \/\/ Suspense did not exist in legacy versions\n+ canToggleSuspense: false,\n+\n+ \/\/ Can view component source location.\n+ canViewSource: type === ElementTypeClass || type === ElementTypeFunction,\n+\n+ displayName: displayName,\n+\n+ type: type,\n+\n+ \/\/ Inspectable properties.\n+ context,\n+ hooks: null,\n+ props,\n+ state,\n+\n+ \/\/ List of owners\n+ owners,\n+\n+ \/\/ Location of component in source coude.\n+ source,\n+ };\n+ }\n+\n+ function logElementToConsole(id: number): void {\n+ const result = inspectElementRaw(id);\n+ if (result === null) {\n+ console.warn(`Could not find element with id \"${id}\"`);\n+ return;\n+ }\n+\n+ const supportsGroup = typeof console.groupCollapsed === 'function';\n+ if (supportsGroup) {\n+ console.groupCollapsed(\n+ `[Click to expand] %c<${result.displayName || 'Component'} \/>`,\n+ \/\/ --dom-tag-name-color is the CSS variable Chrome styles HTML elements with in the console.\n+ 'color: var(--dom-tag-name-color); font-weight: normal;'\n+ );\n+ }\n+ if (result.props !== null) {\n+ console.log('Props:', result.props);\n+ }\n+ if (result.state !== null) {\n+ console.log('State:', result.state);\n+ }\n+ if (result.context !== null) {\n+ console.log('Context:', result.context);\n+ }\n+ const nativeNode = findNativeNodeForInternalID(id);\n+ if (nativeNode !== null) {\n+ console.log('Node:', nativeNode);\n+ }\n+ if (window.chrome || \/firefox\/i.test(navigator.userAgent)) {\n+ console.log(\n+ 'Right-click any value to save it as a global variable for further inspection.'\n+ );\n+ }\n+ if (supportsGroup) {\n+ console.groupEnd();\n+ }\n+ }\n+\n+ function prepareViewElementSource(id: number): void {\n+ const internalInstance = idToInternalInstanceMap.get(id);\n+ if (internalInstance == null) {\n+ console.warn(`Could not find instance with id \"${id}\"`);\n+ return;\n+ }\n+\n+ const element = internalInstance._currentElement;\n+ if (element == null) {\n+ console.warn(`Could not find element with id \"${id}\"`);\n+ return;\n+ }\n+\n+ global.$type = element.type;\n+ }\n+\n+ function setInProps(id: number, path: Array<string | number>, value: any) {\n+ const internalInstance = idToInternalInstanceMap.get(id);\n+ if (internalInstance != null) {\n+ const element = internalInstance._currentElement;\n+ internalInstance._currentElement = {\n+ ...element,\n+ props: copyWithSet(element.props, path, value),\n+ };\n+ forceUpdate(internalInstance._instance);\n+ }\n+ }\n+\n+ function setInState(id: number, path: Array<string | number>, value: any) {\n+ const internalInstance = idToInternalInstanceMap.get(id);\n+ if (internalInstance != null) {\n+ const publicInstance = internalInstance._instance;\n+ if (publicInstance != null) {\n+ setIn(publicInstance.state, path, value);\n+ forceUpdate(publicInstance);\n+ }\n+ }\n+ }\n+\n+ function setInContext(id: number, path: Array<string | number>, value: any) {\n+ const internalInstance = idToInternalInstanceMap.get(id);\n+ if (internalInstance != null) {\n+ const publicInstance = internalInstance._instance;\n+ if (publicInstance != null) {\n+ setIn(publicInstance.context, path, value);\n+ forceUpdate(publicInstance);\n+ }\n+ }\n+ }\n+\n+ function setIn(obj: Object, path: Array<string | number>, value: any) {\n+ const last = path.pop();\n+ const parent = path.reduce(\n+ \/\/ $FlowFixMe\n+ (reduced, attr) => (reduced ? reduced[attr] : null),\n+ obj\n+ );\n+ if (parent) {\n+ \/\/ $FlowFixMe\n+ parent[last] = value;\n+ }\n+ }\n+\n+ \/\/ v16+ only features\n+ const getProfilingData = () => {\n+ throw new Error('getProfilingData not supported by this renderer');\n+ };\n+ const handleCommitFiberRoot = () => {\n+ throw new Error('handleCommitFiberRoot not supported by this renderer');\n+ };\n+ const handleCommitFiberUnmount = () => {\n+ throw new Error('handleCommitFiberUnmount not supported by this renderer');\n+ };\n+ const overrideSuspense = () => {\n+ throw new Error('overrideSuspense not supported by this renderer');\n+ };\n+ const setInHook = () => {\n+ throw new Error('setInHook not supported by this renderer');\n+ };\n+ const startProfiling = () => {\n+ throw new Error('startProfiling not supported by this renderer');\n+ };\n+ const stopProfiling = () => {\n+ throw new Error('stopProfiling not supported by this renderer');\n+ };\n+\n+ function getBestMatchForTrackedPath(): PathMatch | null {\n+ \/\/ Not implemented.\n+ return null;\n+ }\n+\n+ function getPathForElement(id: number): Array<PathFrame> | null {\n+ \/\/ Not implemented.\n+ return null;\n+ }\n+\n+ function updateComponentFilters(componentFilters: Array<ComponentFilter>) {\n+ \/\/ Not implemented.\n+ }\n+\n+ function setTrackedPath(path: Array<PathFrame> | null) {\n+ \/\/ Not implemented.\n+ }\n+\n+ function getOwnersList(id: number): Array<Owner> | null {\n+ \/\/ Not implemented.\n+ return null;\n+ }\n+\n+ return {\n+ cleanup,\n+ flushInitialOperations,\n+ getBestMatchForTrackedPath,\n+ getFiberIDForNative: getInternalIDForNative,\n+ getInstanceAndStyle,\n+ findNativeNodesForFiberID: (id: number) => {\n+ const nativeNode = findNativeNodeForInternalID(id);\n+ return nativeNode == null ? null : [nativeNode];\n+ },\n+ getOwnersList,\n+ getPathForElement,\n+ getProfilingData,\n+ handleCommitFiberRoot,\n+ handleCommitFiberUnmount,\n+ inspectElement,\n+ logElementToConsole,\n+ overrideSuspense,\n+ prepareViewElementSource,\n+ renderer,\n+ setInContext,\n+ setInHook,\n+ setInProps,\n+ setInState,\n+ setTrackedPath,\n+ startProfiling,\n+ stopProfiling,\n+ updateComponentFilters,\n+ };\n+}\ndiff --git a\/src\/backend\/legacy\/utils.js b\/src\/backend\/legacy\/utils.js\nnew file mode 100644\nindex 0000000000..9fbe307935\n--- \/dev\/null\n+++ b\/src\/backend\/legacy\/utils.js\n@@ -0,0 +1,39 @@\n+\/\/ @flow\n+\n+import type { InternalInstance } from '.\/renderer';\n+\n+export function decorate(object: Object, attr: string, fn: Function): Function {\n+ const old = object[attr];\n+ object[attr] = function(instance: InternalInstance) {\n+ return fn.call(this, old, arguments);\n+ };\n+ return old;\n+}\n+\n+export function decorateMany(\n+ source: Object,\n+ fns: { [attr: string]: Function }\n+): Object {\n+ const olds = {};\n+ for (const name in fns) {\n+ olds[name] = decorate(source, name, fns[name]);\n+ }\n+ return olds;\n+}\n+\n+export function restoreMany(source: Object, olds: Object): void {\n+ for (let name in olds) {\n+ source[name] = olds[name];\n+ }\n+}\n+\n+export function forceUpdate(instance: InternalInstance): void {\n+ if (typeof instance.forceUpdate === 'function') {\n+ instance.forceUpdate();\n+ } else if (\n+ instance.updater != null &&\n+ typeof instance.updater.enqueueForceUpdate === 'function'\n+ ) {\n+ instance.updater.enqueueForceUpdate(this, () => {}, 'forceUpdate');\n+ }\n+}\ndiff --git a\/src\/backend\/renderer.js b\/src\/backend\/renderer.js\nnew file mode 100644\nindex 0000000000..63aae20c87\n--- \/dev\/null\n+++ b\/src\/backend\/renderer.js\n@@ -0,0 +1,3006 @@\n+\/\/ @flow\n+\n+import { gte } from 'semver';\n+import {\n+ ComponentFilterDisplayName,\n+ ComponentFilterElementType,\n+ ComponentFilterHOC,\n+ ComponentFilterLocation,\n+ ElementTypeClass,\n+ ElementTypeContext,\n+ ElementTypeFunction,\n+ ElementTypeForwardRef,\n+ ElementTypeHostComponent,\n+ ElementTypeMemo,\n+ ElementTypeOtherOrUnknown,\n+ ElementTypeProfiler,\n+ ElementTypeRoot,\n+ ElementTypeSuspense,\n+} from 'src\/types';\n+import {\n+ getDisplayName,\n+ getDefaultComponentFilters,\n+ getInObject,\n+ getUID,\n+ setInObject,\n+ utfEncodeString,\n+} from 'src\/utils';\n+import { sessionStorageGetItem } from 'src\/storage';\n+import { cleanForBridge, copyWithSet } from '.\/utils';\n+import {\n+ __DEBUG__,\n+ SESSION_STORAGE_RELOAD_AND_PROFILE_KEY,\n+ SESSION_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY,\n+ TREE_OPERATION_ADD,\n+ TREE_OPERATION_REMOVE,\n+ TREE_OPERATION_REORDER_CHILDREN,\n+ TREE_OPERATION_UPDATE_TREE_BASE_DURATION,\n+} from '..\/constants';\n+import { inspectHooksOfFiber } from '.\/ReactDebugHooks';\n+import {\n+ patch as patchConsole,\n+ registerRenderer as registerRendererWithConsole,\n+} from '.\/console';\n+\n+import type {\n+ ChangeDescription,\n+ CommitDataBackend,\n+ DevToolsHook,\n+ Fiber,\n+ InspectedElement,\n+ InspectedElementPayload,\n+ InstanceAndStyle,\n+ Owner,\n+ PathFrame,\n+ PathMatch,\n+ ProfilingDataBackend,\n+ ProfilingDataForRootBackend,\n+ ReactRenderer,\n+ RendererInterface,\n+} from '.\/types';\n+import type { Interaction } from 'src\/devtools\/views\/Profiler\/types';\n+import type { ComponentFilter, ElementType } from 'src\/types';\n+\n+type getDisplayNameForFiberType = (fiber: Fiber) => string | null;\n+type getTypeSymbolType = (type: any) => Symbol | number;\n+\n+type ReactSymbolsType = {\n+ CONCURRENT_MODE_NUMBER: number,\n+ CONCURRENT_MODE_SYMBOL_STRING: string,\n+ DEPRECATED_ASYNC_MODE_SYMBOL_STRING: string,\n+ CONTEXT_CONSUMER_NUMBER: number,\n+ CONTEXT_CONSUMER_SYMBOL_STRING: string,\n+ CONTEXT_PROVIDER_NUMBER: number,\n+ CONTEXT_PROVIDER_SYMBOL_STRING: string,\n+ EVENT_COMPONENT_NUMBER: number,\n+ EVENT_COMPONENT_STRING: string,\n+ EVENT_TARGET_NUMBER: number,\n+ EVENT_TARGET_STRING: string,\n+ EVENT_TARGET_TOUCH_HIT_NUMBER: number,\n+ EVENT_TARGET_TOUCH_HIT_STRING: string,\n+ FORWARD_REF_NUMBER: number,\n+ FORWARD_REF_SYMBOL_STRING: string,\n+ MEMO_NUMBER: number,\n+ MEMO_SYMBOL_STRING: string,\n+ PROFILER_NUMBER: number,\n+ PROFILER_SYMBOL_STRING: string,\n+ STRICT_MODE_NUMBER: number,\n+ STRICT_MODE_SYMBOL_STRING: string,\n+ SUSPENSE_NUMBER: number,\n+ SUSPENSE_SYMBOL_STRING: string,\n+ DEPRECATED_PLACEHOLDER_SYMBOL_STRING: string,\n+};\n+\n+type ReactPriorityLevelsType = {|\n+ ImmediatePriority: number,\n+ UserBlockingPriority: number,\n+ NormalPriority: number,\n+ LowPriority: number,\n+ IdlePriority: number,\n+ NoPriority: number,\n+|};\n+\n+type ReactTypeOfWorkType = {|\n+ ClassComponent: number,\n+ ContextConsumer: number,\n+ ContextProvider: number,\n+ CoroutineComponent: number,\n+ CoroutineHandlerPhase: number,\n+ DehydratedSuspenseComponent: number,\n+ ForwardRef: number,\n+ Fragment: number,\n+ FunctionComponent: number,\n+ HostComponent: number,\n+ HostPortal: number,\n+ HostRoot: number,\n+ HostText: number,\n+ IncompleteClassComponent: number,\n+ IndeterminateComponent: number,\n+ LazyComponent: number,\n+ MemoComponent: number,\n+ Mode: number,\n+ Profiler: number,\n+ SimpleMemoComponent: number,\n+ SuspenseComponent: number,\n+ YieldComponent: number,\n+|};\n+\n+type ReactTypeOfSideEffectType = {|\n+ NoEffect: number,\n+ PerformedWork: number,\n+ Placement: number,\n+|};\n+\n+\/\/ Some environments (e.g. React Native \/ Hermes) don't support the performace API yet.\n+const getCurrentTime =\n+ typeof performance === 'object' && typeof performance.now === 'function'\n+ ? () => performance.now()\n+ : () => Date.now();\n+\n+export function getInternalReactConstants(\n+ version: string\n+): {|\n+ getDisplayNameForFiber: getDisplayNameForFiberType,\n+ getTypeSymbol: getTypeSymbolType,\n+ ReactPriorityLevels: ReactPriorityLevelsType,\n+ ReactSymbols: ReactSymbolsType,\n+ ReactTypeOfSideEffect: ReactTypeOfSideEffectType,\n+ ReactTypeOfWork: ReactTypeOfWorkType,\n+|} {\n+ const ReactSymbols: ReactSymbolsType = {\n+ CONCURRENT_MODE_NUMBER: 0xeacf,\n+ CONCURRENT_MODE_SYMBOL_STRING: 'Symbol(react.concurrent_mode)',\n+ DEPRECATED_ASYNC_MODE_SYMBOL_STRING: 'Symbol(react.async_mode)',\n+ CONTEXT_CONSUMER_NUMBER: 0xeace,\n+ CONTEXT_CONSUMER_SYMBOL_STRING: 'Symbol(react.context)',\n+ CONTEXT_PROVIDER_NUMBER: 0xeacd,\n+ CONTEXT_PROVIDER_SYMBOL_STRING: 'Symbol(react.provider)',\n+ EVENT_COMPONENT_NUMBER: 0xead5,\n+ EVENT_COMPONENT_STRING: 'Symbol(react.event_component)',\n+ EVENT_TARGET_NUMBER: 0xead6,\n+ EVENT_TARGET_STRING: 'Symbol(react.event_target)',\n+ EVENT_TARGET_TOUCH_HIT_NUMBER: 0xead7,\n+ EVENT_TARGET_TOUCH_HIT_STRING: 'Symbol(react.event_target.touch_hit)',\n+ FORWARD_REF_NUMBER: 0xead0,\n+ FORWARD_REF_SYMBOL_STRING: 'Symbol(react.forward_ref)',\n+ MEMO_NUMBER: 0xead3,\n+ MEMO_SYMBOL_STRING: 'Symbol(react.memo)',\n+ PROFILER_NUMBER: 0xead2,\n+ PROFILER_SYMBOL_STRING: 'Symbol(react.profiler)',\n+ STRICT_MODE_NUMBER: 0xeacc,\n+ STRICT_MODE_SYMBOL_STRING: 'Symbol(react.strict_mode)',\n+ SUSPENSE_NUMBER: 0xead1,\n+ SUSPENSE_SYMBOL_STRING: 'Symbol(react.suspense)',\n+ DEPRECATED_PLACEHOLDER_SYMBOL_STRING: 'Symbol(react.placeholder)',\n+ };\n+\n+ const ReactTypeOfSideEffect: ReactTypeOfSideEffectType = {\n+ NoEffect: 0b00,\n+ PerformedWork: 0b01,\n+ Placement: 0b10,\n+ };\n+\n+ \/\/ **********************************************************\n+ \/\/ The section below is copied from files in React repo.\n+ \/\/ Keep it in sync, and add version guards if it changes.\n+ \/\/\n+ \/\/ Technically these priority levels are invalid for versions before 16.9,\n+ \/\/ but 16.9 is the first version to report priority level to DevTools,\n+ \/\/ so we can avoid checking for earlier versions and support pre-16.9 canary releases in the process.\n+ const ReactPriorityLevels: ReactPriorityLevelsType = {\n+ ImmediatePriority: 99,\n+ UserBlockingPriority: 98,\n+ NormalPriority: 97,\n+ LowPriority: 96,\n+ IdlePriority: 95,\n+ NoPriority: 90,\n+ };\n+\n+ let ReactTypeOfWork: ReactTypeOfWorkType = ((null: any): ReactTypeOfWorkType);\n+\n+ \/\/ **********************************************************\n+ \/\/ The section below is copied from files in React repo.\n+ \/\/ Keep it in sync, and add version guards if it changes.\n+ if (gte(version, '16.6.0-beta.0')) {\n+ ReactTypeOfWork = {\n+ ClassComponent: 1,\n+ ContextConsumer: 9,\n+ ContextProvider: 10,\n+ CoroutineComponent: -1, \/\/ Removed\n+ CoroutineHandlerPhase: -1, \/\/ Removed\n+ DehydratedSuspenseComponent: 18, \/\/ Behind a flag\n+ ForwardRef: 11,\n+ Fragment: 7,\n+ FunctionComponent: 0,\n+ HostComponent: 5,\n+ HostPortal: 4,\n+ HostRoot: 3,\n+ HostText: 6,\n+ IncompleteClassComponent: 17,\n+ IndeterminateComponent: 2,\n+ LazyComponent: 16,\n+ MemoComponent: 14,\n+ Mode: 8,\n+ Profiler: 12,\n+ SimpleMemoComponent: 15,\n+ SuspenseComponent: 13,\n+ YieldComponent: -1, \/\/ Removed\n+ };\n+ } else if (gte(version, '16.4.3-alpha')) {\n+ ReactTypeOfWork = {\n+ ClassComponent: 2,\n+ ContextConsumer: 11,\n+ ContextProvider: 12,\n+ CoroutineComponent: -1, \/\/ Removed\n+ CoroutineHandlerPhase: -1, \/\/ Removed\n+ DehydratedSuspenseComponent: -1, \/\/ Doesn't exist yet\n+ ForwardRef: 13,\n+ Fragment: 9,\n+ FunctionComponent: 0,\n+ HostComponent: 7,\n+ HostPortal: 6,\n+ HostRoot: 5,\n+ HostText: 8,\n+ IncompleteClassComponent: -1, \/\/ Doesn't exist yet\n+ IndeterminateComponent: 4,\n+ LazyComponent: -1, \/\/ Doesn't exist yet\n+ MemoComponent: -1, \/\/ Doesn't exist yet\n+ Mode: 10,\n+ Profiler: 15,\n+ SimpleMemoComponent: -1, \/\/ Doesn't exist yet\n+ SuspenseComponent: 16,\n+ YieldComponent: -1, \/\/ Removed\n+ };\n+ } else {\n+ ReactTypeOfWork = {\n+ ClassComponent: 2,\n+ ContextConsumer: 12,\n+ ContextProvider: 13,\n+ CoroutineComponent: 7,\n+ CoroutineHandlerPhase: 8,\n+ DehydratedSuspenseComponent: -1, \/\/ Doesn't exist yet\n+ ForwardRef: 14,\n+ Fragment: 10,\n+ FunctionComponent: 1,\n+ HostComponent: 5,\n+ HostPortal: 4,\n+ HostRoot: 3,\n+ HostText: 6,\n+ IncompleteClassComponent: -1, \/\/ Doesn't exist yet\n+ IndeterminateComponent: 0,\n+ LazyComponent: -1, \/\/ Doesn't exist yet\n+ MemoComponent: -1, \/\/ Doesn't exist yet\n+ Mode: 11,\n+ Profiler: 15,\n+ SimpleMemoComponent: -1, \/\/ Doesn't exist yet\n+ SuspenseComponent: 16,\n+ YieldComponent: 9,\n+ };\n+ }\n+ \/\/ **********************************************************\n+ \/\/ End of copied code.\n+ \/\/ **********************************************************\n+\n+ function getTypeSymbol(type: any): Symbol | number {\n+ const symbolOrNumber =\n+ typeof type === 'object' && type !== null ? type.$$typeof : type;\n+\n+ return typeof symbolOrNumber === 'symbol'\n+ ? symbolOrNumber.toString()\n+ : symbolOrNumber;\n+ }\n+\n+ const {\n+ ClassComponent,\n+ IncompleteClassComponent,\n+ FunctionComponent,\n+ IndeterminateComponent,\n+ ForwardRef,\n+ HostRoot,\n+ HostComponent,\n+ HostPortal,\n+ HostText,\n+ Fragment,\n+ MemoComponent,\n+ SimpleMemoComponent,\n+ } = ReactTypeOfWork;\n+\n+ const {\n+ CONCURRENT_MODE_NUMBER,\n+ CONCURRENT_MODE_SYMBOL_STRING,\n+ DEPRECATED_ASYNC_MODE_SYMBOL_STRING,\n+ CONTEXT_PROVIDER_NUMBER,\n+ CONTEXT_PROVIDER_SYMBOL_STRING,\n+ CONTEXT_CONSUMER_NUMBER,\n+ CONTEXT_CONSUMER_SYMBOL_STRING,\n+ STRICT_MODE_NUMBER,\n+ STRICT_MODE_SYMBOL_STRING,\n+ SUSPENSE_NUMBER,\n+ SUSPENSE_SYMBOL_STRING,\n+ DEPRECATED_PLACEHOLDER_SYMBOL_STRING,\n+ PROFILER_NUMBER,\n+ PROFILER_SYMBOL_STRING,\n+ } = ReactSymbols;\n+\n+ \/\/ NOTICE Keep in sync with shouldFilterFiber() and other get*ForFiber methods\n+ function getDisplayNameForFiber(fiber: Fiber): string | null {\n+ const { elementType, type, tag } = fiber;\n+\n+ \/\/ This is to support lazy components with a Promise as the type.\n+ \/\/ see https:\/\/github.com\/facebook\/react\/pull\/13397\n+ let resolvedType = type;\n+ if (typeof type === 'object' && type !== null) {\n+ if (typeof type.then === 'function') {\n+ resolvedType = type._reactResult;\n+ }\n+ }\n+\n+ let resolvedContext: any = null;\n+\n+ switch (tag) {\n+ case ClassComponent:\n+ case IncompleteClassComponent:\n+ return getDisplayName(resolvedType);\n+ case FunctionComponent:\n+ case IndeterminateComponent:\n+ return getDisplayName(resolvedType);\n+ case ForwardRef:\n+ return (\n+ resolvedType.displayName ||\n+ getDisplayName(resolvedType.render, 'Anonymous')\n+ );\n+ case HostRoot:\n+ return null;\n+ case HostComponent:\n+ return type;\n+ case HostPortal:\n+ case HostText:\n+ case Fragment:\n+ return null;\n+ case MemoComponent:\n+ case SimpleMemoComponent:\n+ if (elementType.displayName) {\n+ return elementType.displayName;\n+ } else {\n+ return getDisplayName(type, 'Anonymous');\n+ }\n+ default:\n+ const typeSymbol = getTypeSymbol(type);\n+\n+ switch (typeSymbol) {\n+ case CONCURRENT_MODE_NUMBER:\n+ case CONCURRENT_MODE_SYMBOL_STRING:\n+ case DEPRECATED_ASYNC_MODE_SYMBOL_STRING:\n+ return null;\n+ case CONTEXT_PROVIDER_NUMBER:\n+ case CONTEXT_PROVIDER_SYMBOL_STRING:\n+ \/\/ 16.3.0 exposed the context object as \"context\"\n+ \/\/ PR #12501 changed it to \"_context\" for 16.3.1+\n+ \/\/ NOTE Keep in sync with inspectElementRaw()\n+ resolvedContext = fiber.type._context || fiber.type.context;\n+ return `${resolvedContext.displayName || 'Context'}.Provider`;\n+ case CONTEXT_CONSUMER_NUMBER:\n+ case CONTEXT_CONSUMER_SYMBOL_STRING:\n+ \/\/ 16.3-16.5 read from \"type\" because the Consumer is the actual context object.\n+ \/\/ 16.6+ should read from \"type._context\" because Consumer can be different (in DEV).\n+ \/\/ NOTE Keep in sync with inspectElementRaw()\n+ resolvedContext = fiber.type._context || fiber.type;\n+\n+ \/\/ NOTE: TraceUpdatesBackendManager depends on the name ending in '.Consumer'\n+ \/\/ If you change the name, figure out a more resilient way to detect it.\n+ return `${resolvedContext.displayName || 'Context'}.Consumer`;\n+ case STRICT_MODE_NUMBER:\n+ case STRICT_MODE_SYMBOL_STRING:\n+ return null;\n+ case SUSPENSE_NUMBER:\n+ case SUSPENSE_SYMBOL_STRING:\n+ case DEPRECATED_PLACEHOLDER_SYMBOL_STRING:\n+ return 'Suspense';\n+ case PROFILER_NUMBER:\n+ case PROFILER_SYMBOL_STRING:\n+ return `Profiler(${fiber.memoizedProps.id})`;\n+ default:\n+ \/\/ Unknown element type.\n+ \/\/ This may mean a new element type that has not yet been added to DevTools.\n+ return null;\n+ }\n+ }\n+ }\n+\n+ return {\n+ getDisplayNameForFiber,\n+ getTypeSymbol,\n+ ReactPriorityLevels,\n+ ReactTypeOfWork,\n+ ReactSymbols,\n+ ReactTypeOfSideEffect,\n+ };\n+}\n+\n+export function attach(\n+ hook: DevToolsHook,\n+ rendererID: number,\n+ renderer: ReactRenderer,\n+ global: Object\n+): RendererInterface {\n+ const {\n+ getDisplayNameForFiber,\n+ getTypeSymbol,\n+ ReactPriorityLevels,\n+ ReactTypeOfWork,\n+ ReactSymbols,\n+ ReactTypeOfSideEffect,\n+ } = getInternalReactConstants(renderer.version);\n+ const { NoEffect, PerformedWork, Placement } = ReactTypeOfSideEffect;\n+ const {\n+ FunctionComponent,\n+ ClassComponent,\n+ ContextConsumer,\n+ DehydratedSuspenseComponent,\n+ Fragment,\n+ ForwardRef,\n+ HostRoot,\n+ HostPortal,\n+ HostComponent,\n+ HostText,\n+ IncompleteClassComponent,\n+ IndeterminateComponent,\n+ MemoComponent,\n+ SimpleMemoComponent,\n+ SuspenseComponent,\n+ } = ReactTypeOfWork;\n+ const {\n+ ImmediatePriority,\n+ UserBlockingPriority,\n+ NormalPriority,\n+ LowPriority,\n+ IdlePriority,\n+ NoPriority,\n+ } = ReactPriorityLevels;\n+ const {\n+ CONCURRENT_MODE_NUMBER,\n+ CONCURRENT_MODE_SYMBOL_STRING,\n+ DEPRECATED_ASYNC_MODE_SYMBOL_STRING,\n+ CONTEXT_CONSUMER_NUMBER,\n+ CONTEXT_CONSUMER_SYMBOL_STRING,\n+ CONTEXT_PROVIDER_NUMBER,\n+ CONTEXT_PROVIDER_SYMBOL_STRING,\n+ PROFILER_NUMBER,\n+ PROFILER_SYMBOL_STRING,\n+ STRICT_MODE_NUMBER,\n+ STRICT_MODE_SYMBOL_STRING,\n+ SUSPENSE_NUMBER,\n+ SUSPENSE_SYMBOL_STRING,\n+ DEPRECATED_PLACEHOLDER_SYMBOL_STRING,\n+ } = ReactSymbols;\n+\n+ const {\n+ overrideHookState,\n+ overrideProps,\n+ setSuspenseHandler,\n+ scheduleUpdate,\n+ } = renderer;\n+ const supportsTogglingSuspense =\n+ typeof setSuspenseHandler === 'function' &&\n+ typeof scheduleUpdate === 'function';\n+\n+ \/\/ Patching the console enables DevTools to do a few useful things:\n+ \/\/ * Append component stacks to warnings and error messages\n+ \/\/ * Disable logging during re-renders to inspect hooks (see inspectHooksOfFiber)\n+ \/\/\n+ \/\/ Don't patch in test environments because we don't want to interfere with Jest's own console overrides.\n+ if (process.env.NODE_ENV !== 'test') {\n+ registerRendererWithConsole(renderer);\n+\n+ \/\/ The renderer interface can't read this preference directly,\n+ \/\/ because it is stored in localStorage within the context of the extension.\n+ \/\/ It relies on the extension to pass the preference through via the global.\n+ if (window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ !== false) {\n+ patchConsole();\n+ }\n+ }\n+\n+ const debug = (name: string, fiber: Fiber, parentFiber: ?Fiber): void => {\n+ if (__DEBUG__) {\n+ const displayName = getDisplayNameForFiber(fiber) || 'null';\n+ const parentDisplayName =\n+ (parentFiber != null && getDisplayNameForFiber(parentFiber)) || 'null';\n+ \/\/ NOTE: calling getFiberID or getPrimaryFiber is unsafe here\n+ \/\/ because it will put them in the map. For now, we'll omit them.\n+ \/\/ TODO: better debugging story for this.\n+ console.log(\n+ `[renderer] %c${name} %c${displayName} %c${\n+ parentFiber ? parentDisplayName : ''\n+ }`,\n+ 'color: red; font-weight: bold;',\n+ 'color: blue;',\n+ 'color: purple;'\n+ );\n+ }\n+ };\n+\n+ \/\/ Configurable Components tree filters.\n+ const hideElementsWithDisplayNames: Set<RegExp> = new Set();\n+ const hideElementsWithPaths: Set<RegExp> = new Set();\n+ const hideElementsWithTypes: Set<ElementType> = new Set();\n+\n+ function applyComponentFilters(componentFilters: Array<ComponentFilter>) {\n+ hideElementsWithTypes.clear();\n+ hideElementsWithDisplayNames.clear();\n+ hideElementsWithPaths.clear();\n+\n+ componentFilters.forEach(componentFilter => {\n+ if (!componentFilter.isEnabled) {\n+ return;\n+ }\n+\n+ switch (componentFilter.type) {\n+ case ComponentFilterDisplayName:\n+ if (componentFilter.isValid && componentFilter.value !== '') {\n+ hideElementsWithDisplayNames.add(\n+ new RegExp(componentFilter.value, 'i')\n+ );\n+ }\n+ break;\n+ case ComponentFilterElementType:\n+ hideElementsWithTypes.add(componentFilter.value);\n+ break;\n+ case ComponentFilterLocation:\n+ if (componentFilter.isValid && componentFilter.value !== '') {\n+ hideElementsWithPaths.add(new RegExp(componentFilter.value, 'i'));\n+ }\n+ break;\n+ case ComponentFilterHOC:\n+ hideElementsWithDisplayNames.add(new RegExp('\\\\('));\n+ break;\n+ default:\n+ console.warn(\n+ `Invalid component filter type \"${componentFilter.type}\"`\n+ );\n+ break;\n+ }\n+ });\n+ }\n+\n+ \/\/ The renderer interface can't read saved component filters directly,\n+ \/\/ because they are stored in localStorage within the context of the extension.\n+ \/\/ Instead it relies on the extension to pass filters through.\n+ if (window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ != null) {\n+ applyComponentFilters(window.__REACT_DEVTOOLS_COMPONENT_FILTERS__);\n+ } else {\n+ \/\/ Unfortunately this feature is not expected to work for React Native for now.\n+ \/\/ It would be annoying for us to spam YellowBox warnings with unactionable stuff,\n+ \/\/ so for now just skip this message...\n+ \/\/console.warn('⚛️ DevTools: Could not locate saved component filters');\n+\n+ \/\/ Fallback to assuming the default filters in this case.\n+ applyComponentFilters(getDefaultComponentFilters());\n+ }\n+\n+ \/\/ If necessary, we can revisit optimizing this operation.\n+ \/\/ For example, we could add a new recursive unmount tree operation.\n+ \/\/ The unmount operations are already significantly smaller than mount opreations though.\n+ \/\/ This is something to keep in mind for later.\n+ function updateComponentFilters(componentFilters: Array<ComponentFilter>) {\n+ if (isProfiling) {\n+ \/\/ Re-mounting a tree while profiling is in progress might break a lot of assumptions.\n+ \/\/ If necessary, we could support this- but it doesn't seem like a necessary use case.\n+ throw Error('Cannot modify filter preferences while profiling');\n+ }\n+\n+ \/\/ Recursively unmount all roots.\n+ hook.getFiberRoots(rendererID).forEach(root => {\n+ currentRootID = getFiberID(getPrimaryFiber(root.current));\n+ unmountFiberChildrenRecursively(root.current);\n+ recordUnmount(root.current, false);\n+ currentRootID = -1;\n+ });\n+\n+ applyComponentFilters(componentFilters);\n+\n+ \/\/ Reset psuedo counters so that new path selections will be persisted.\n+ rootDisplayNameCounter.clear();\n+\n+ \/\/ Recursively re-mount all roots with new filter criteria applied.\n+ hook.getFiberRoots(rendererID).forEach(root => {\n+ currentRootID = getFiberID(getPrimaryFiber(root.current));\n+ setRootPseudoKey(currentRootID, root.current);\n+ mountFiberRecursively(root.current, null);\n+ flushPendingEvents(root);\n+ currentRootID = -1;\n+ });\n+ }\n+\n+ \/\/ NOTICE Keep in sync with get*ForFiber methods\n+ function shouldFilterFiber(fiber: Fiber): boolean {\n+ const { _debugSource, tag, type } = fiber;\n+\n+ switch (tag) {\n+ case DehydratedSuspenseComponent:\n+ \/\/ TODO: ideally we would show dehydrated Suspense immediately.\n+ \/\/ However, it has some special behavior (like disconnecting\n+ \/\/ an alternate and turning into real Suspense) which breaks DevTools.\n+ \/\/ For now, ignore it, and only show it once it gets hydrated.\n+ \/\/ https:\/\/github.com\/bvaughn\/react-devtools-experimental\/issues\/197\n+ return true;\n+ case HostPortal:\n+ case HostText:\n+ case Fragment:\n+ return true;\n+ case HostRoot:\n+ \/\/ It is never valid to filter the root element.\n+ return false;\n+ default:\n+ const typeSymbol = getTypeSymbol(type);\n+\n+ switch (typeSymbol) {\n+ case CONCURRENT_MODE_NUMBER:\n+ case CONCURRENT_MODE_SYMBOL_STRING:\n+ case DEPRECATED_ASYNC_MODE_SYMBOL_STRING:\n+ case STRICT_MODE_NUMBER:\n+ case STRICT_MODE_SYMBOL_STRING:\n+ return true;\n+ default:\n+ break;\n+ }\n+ }\n+\n+ const elementType = getElementTypeForFiber(fiber);\n+ if (hideElementsWithTypes.has(elementType)) {\n+ return true;\n+ }\n+\n+ if (hideElementsWithDisplayNames.size > 0) {\n+ const displayName = getDisplayNameForFiber(fiber);\n+ if (displayName != null) {\n+ for (let displayNameRegExp of hideElementsWithDisplayNames) {\n+ if (displayNameRegExp.test(displayName)) {\n+ return true;\n+ }\n+ }\n+ }\n+ }\n+\n+ if (_debugSource != null && hideElementsWithPaths.size > 0) {\n+ const { fileName } = _debugSource;\n+ for (let pathRegExp of hideElementsWithPaths) {\n+ if (pathRegExp.test(fileName)) {\n+ return true;\n+ }\n+ }\n+ }\n+\n+ return false;\n+ }\n+ \/\/ NOTICE Keep in sync with shouldFilterFiber() and other get*ForFiber methods\n+ function getElementTypeForFiber(fiber: Fiber): ElementType {\n+ const { type, tag } = fiber;\n+\n+ switch (tag) {\n+ case ClassComponent:\n+ case IncompleteClassComponent:\n+ return ElementTypeClass;\n+ case FunctionComponent:\n+ case IndeterminateComponent:\n+ return ElementTypeFunction;\n+ case ForwardRef:\n+ return ElementTypeForwardRef;\n+ case HostRoot:\n+ return ElementTypeRoot;\n+ case HostComponent:\n+ return ElementTypeHostComponent;\n+ case HostPortal:\n+ case HostText:\n+ case Fragment:\n+ return ElementTypeOtherOrUnknown;\n+ case MemoComponent:\n+ case SimpleMemoComponent:\n+ return ElementTypeMemo;\n+ default:\n+ const typeSymbol = getTypeSymbol(type);\n+\n+ switch (typeSymbol) {\n+ case CONCURRENT_MODE_NUMBER:\n+ case CONCURRENT_MODE_SYMBOL_STRING:\n+ case DEPRECATED_ASYNC_MODE_SYMBOL_STRING:\n+ return ElementTypeOtherOrUnknown;\n+ case CONTEXT_PROVIDER_NUMBER:\n+ case CONTEXT_PROVIDER_SYMBOL_STRING:\n+ return ElementTypeContext;\n+ case CONTEXT_CONSUMER_NUMBER:\n+ case CONTEXT_CONSUMER_SYMBOL_STRING:\n+ return ElementTypeContext;\n+ case STRICT_MODE_NUMBER:\n+ case STRICT_MODE_SYMBOL_STRING:\n+ return ElementTypeOtherOrUnknown;\n+ case SUSPENSE_NUMBER:\n+ case SUSPENSE_SYMBOL_STRING:\n+ case DEPRECATED_PLACEHOLDER_SYMBOL_STRING:\n+ return ElementTypeSuspense;\n+ case PROFILER_NUMBER:\n+ case PROFILER_SYMBOL_STRING:\n+ return ElementTypeProfiler;\n+ default:\n+ return ElementTypeOtherOrUnknown;\n+ }\n+ }\n+ }\n+\n+ \/\/ This is a slightly annoying indirection.\n+ \/\/ It is currently necessary because DevTools wants to use unique objects as keys for instances.\n+ \/\/ However fibers have two versions.\n+ \/\/ We use this set to remember first encountered fiber for each conceptual instance.\n+ function getPrimaryFiber(fiber: Fiber): Fiber {\n+ if (primaryFibers.has(fiber)) {\n+ return fiber;\n+ }\n+ const { alternate } = fiber;\n+ if (alternate != null && primaryFibers.has(alternate)) {\n+ return alternate;\n+ }\n+ primaryFibers.add(fiber);\n+ return fiber;\n+ }\n+\n+ const fiberToIDMap: Map<Fiber, number> = new Map();\n+ const idToFiberMap: Map<number, Fiber> = new Map();\n+ const primaryFibers: Set<Fiber> = new Set();\n+\n+ \/\/ When profiling is supported, we store the latest tree base durations for each Fiber.\n+ \/\/ This is so that we can quickly capture a snapshot of those values if profiling starts.\n+ \/\/ If we didn't store these values, we'd have to crawl the tree when profiling started,\n+ \/\/ and use a slow path to find each of the current Fibers.\n+ const idToTreeBaseDurationMap: Map<number, number> = new Map();\n+\n+ \/\/ When profiling is supported, we store the latest tree base durations for each Fiber.\n+ \/\/ This map enables us to filter these times by root when sending them to the frontend.\n+ const idToRootMap: Map<number, number> = new Map();\n+\n+ \/\/ When a mount or update is in progress, this value tracks the root that is being operated on.\n+ let currentRootID: number = -1;\n+\n+ function getFiberID(primaryFiber: Fiber): number {\n+ if (!fiberToIDMap.has(primaryFiber)) {\n+ const id = getUID();\n+ fiberToIDMap.set(primaryFiber, id);\n+ idToFiberMap.set(id, primaryFiber);\n+ }\n+ return ((fiberToIDMap.get(primaryFiber): any): number);\n+ }\n+\n+ function getChangeDescription(\n+ prevFiber: Fiber | null,\n+ nextFiber: Fiber\n+ ): ChangeDescription | null {\n+ switch (getElementTypeForFiber(nextFiber)) {\n+ case ElementTypeClass:\n+ case ElementTypeFunction:\n+ case ElementTypeMemo:\n+ case ElementTypeForwardRef:\n+ if (prevFiber === null) {\n+ return {\n+ context: null,\n+ didHooksChange: false,\n+ isFirstMount: true,\n+ props: null,\n+ state: null,\n+ };\n+ } else {\n+ return {\n+ context: getContextChangedKeys(nextFiber),\n+ didHooksChange: didHooksChange(\n+ prevFiber.memoizedState,\n+ nextFiber.memoizedState\n+ ),\n+ isFirstMount: false,\n+ props: getChangedKeys(\n+ prevFiber.memoizedProps,\n+ nextFiber.memoizedProps\n+ ),\n+ state: getChangedKeys(\n+ prevFiber.memoizedState,\n+ nextFiber.memoizedState\n+ ),\n+ };\n+ }\n+ default:\n+ return null;\n+ }\n+ }\n+\n+ function updateContextsForFiber(fiber: Fiber) {\n+ switch (getElementTypeForFiber(fiber)) {\n+ case ElementTypeClass:\n+ if (idToContextsMap !== null) {\n+ const id = getFiberID(getPrimaryFiber(fiber));\n+ const contexts = getContextsForFiber(fiber);\n+ if (contexts !== null) {\n+ idToContextsMap.set(id, contexts);\n+ }\n+ }\n+ break;\n+ default:\n+ break;\n+ }\n+ }\n+\n+ \/\/ Differentiates between a null context value and no context.\n+ const NO_CONTEXT = {};\n+\n+ function getContextsForFiber(fiber: Fiber): [Object, any] | null {\n+ switch (getElementTypeForFiber(fiber)) {\n+ case ElementTypeClass:\n+ const instance = fiber.stateNode;\n+ let legacyContext = NO_CONTEXT;\n+ let modernContext = NO_CONTEXT;\n+ if (instance != null) {\n+ if (\n+ instance.constructor &&\n+ instance.constructor.contextType != null\n+ ) {\n+ modernContext = instance.context;\n+ } else {\n+ legacyContext = instance.context;\n+ if (legacyContext && Object.keys(legacyContext).length === 0) {\n+ legacyContext = NO_CONTEXT;\n+ }\n+ }\n+ }\n+ return [legacyContext, modernContext];\n+ default:\n+ return null;\n+ }\n+ }\n+\n+ \/\/ Record all contexts at the time profiling is started.\n+ \/\/ Fibers only store the current context value,\n+ \/\/ so we need to track them separatenly in order to determine changed keys.\n+ function crawlToInitializeContextsMap(fiber: Fiber) {\n+ updateContextsForFiber(fiber);\n+ let current = fiber.child;\n+ while (current !== null) {\n+ crawlToInitializeContextsMap(current);\n+ current = current.sibling;\n+ }\n+ }\n+\n+ function getContextChangedKeys(fiber: Fiber): null | boolean | Array<string> {\n+ switch (getElementTypeForFiber(fiber)) {\n+ case ElementTypeClass:\n+ if (idToContextsMap !== null) {\n+ const id = getFiberID(getPrimaryFiber(fiber));\n+ const prevContexts = idToContextsMap.has(id)\n+ ? idToContextsMap.get(id)\n+ : null;\n+ const nextContexts = getContextsForFiber(fiber);\n+\n+ if (prevContexts == null || nextContexts == null) {\n+ return null;\n+ }\n+\n+ const [prevLegacyContext, prevModernContext] = prevContexts;\n+ const [nextLegacyContext, nextModernContext] = nextContexts;\n+\n+ if (nextLegacyContext !== NO_CONTEXT) {\n+ return getChangedKeys(prevLegacyContext, nextLegacyContext);\n+ } else if (nextModernContext !== NO_CONTEXT) {\n+ return prevModernContext !== nextModernContext;\n+ }\n+ }\n+ break;\n+ default:\n+ break;\n+ }\n+ return null;\n+ }\n+\n+ function didHooksChange(prev: any, next: any): boolean {\n+ if (next == null) {\n+ return false;\n+ }\n+\n+ \/\/ We can't report anything meaningful for hooks changes.\n+ if (\n+ next.hasOwnProperty('baseState') &&\n+ next.hasOwnProperty('memoizedState') &&\n+ next.hasOwnProperty('next') &&\n+ next.hasOwnProperty('queue')\n+ ) {\n+ while (next !== null) {\n+ if (next.memoizedState !== prev.memoizedState) {\n+ return true;\n+ } else {\n+ next = next.next;\n+ prev = prev.next;\n+ }\n+ }\n+ }\n+\n+ return false;\n+ }\n+\n+ function getChangedKeys(prev: any, next: any): null | Array<string> {\n+ if (prev == null || next == null) {\n+ return null;\n+ }\n+\n+ \/\/ We can't report anything meaningful for hooks changes.\n+ if (\n+ next.hasOwnProperty('baseState') &&\n+ next.hasOwnProperty('memoizedState') &&\n+ next.hasOwnProperty('next') &&\n+ next.hasOwnProperty('queue')\n+ ) {\n+ return null;\n+ }\n+\n+ const keys = new Set([...Object.keys(prev), ...Object.keys(next)]);\n+ const changedKeys = [];\n+ for (let key of keys) {\n+ if (prev[key] !== next[key]) {\n+ changedKeys.push(key);\n+ }\n+ }\n+\n+ return changedKeys;\n+ }\n+\n+ \/\/ eslint-disable-next-line no-unused-vars\n+ function didFiberRender(prevFiber: Fiber, nextFiber: Fiber): boolean {\n+ switch (nextFiber.tag) {\n+ case ClassComponent:\n+ case FunctionComponent:\n+ case ContextConsumer:\n+ case MemoComponent:\n+ case SimpleMemoComponent:\n+ \/\/ For types that execute user code, we check PerformedWork effect.\n+ \/\/ We don't reflect bailouts (either referential or sCU) in DevTools.\n+ \/\/ eslint-disable-next-line no-bitwise\n+ return (nextFiber.effectTag & PerformedWork) === PerformedWork;\n+ \/\/ Note: ContextConsumer only gets PerformedWork effect in 16.3.3+\n+ \/\/ so it won't get highlighted with React 16.3.0 to 16.3.2.\n+ default:\n+ \/\/ For host components and other types, we compare inputs\n+ \/\/ to determine whether something is an update.\n+ return (\n+ prevFiber.memoizedProps !== nextFiber.memoizedProps ||\n+ prevFiber.memoizedState !== nextFiber.memoizedState ||\n+ prevFiber.ref !== nextFiber.ref\n+ );\n+ }\n+ }\n+\n+ let pendingOperations: Array<number> = [];\n+ let pendingRealUnmountedIDs: Array<number> = [];\n+ let pendingSimulatedUnmountedIDs: Array<number> = [];\n+ let pendingOperationsQueue: Array<Array<number>> | null = [];\n+ let pendingStringTable: Map<string, number> = new Map();\n+ let pendingStringTableLength: number = 0;\n+ let pendingUnmountedRootID: number | null = null;\n+\n+ function pushOperation(op: number): void {\n+ if (__DEV__) {\n+ if (!Number.isInteger(op)) {\n+ console.error(\n+ 'pushOperation() was called but the value is not an integer.',\n+ op\n+ );\n+ }\n+ }\n+ pendingOperations.push(op);\n+ }\n+\n+ function flushPendingEvents(root: Object): void {\n+ if (\n+ pendingOperations.length === 0 &&\n+ pendingRealUnmountedIDs.length === 0 &&\n+ pendingSimulatedUnmountedIDs.length === 0 &&\n+ pendingUnmountedRootID === null\n+ ) {\n+ \/\/ If we're currently profiling, send an \"operations\" method even if there are no mutations to the tree.\n+ \/\/ The frontend needs this no-op info to know how to reconstruct the tree for each commit,\n+ \/\/ even if a particular commit didn't change the shape of the tree.\n+ if (!isProfiling) {\n+ return;\n+ }\n+ }\n+\n+ const numUnmountIDs =\n+ pendingRealUnmountedIDs.length +\n+ pendingSimulatedUnmountedIDs.length +\n+ (pendingUnmountedRootID === null ? 0 : 1);\n+\n+ const operations = new Array(\n+ \/\/ Identify which renderer this update is coming from.\n+ 2 + \/\/ [rendererID, rootFiberID]\n+ \/\/ How big is the string table?\n+ 1 + \/\/ [stringTableLength]\n+ \/\/ Then goes the actual string table.\n+ pendingStringTableLength +\n+ \/\/ All unmounts are batched in a single message.\n+ \/\/ [TREE_OPERATION_REMOVE, removedIDLength, ...ids]\n+ (numUnmountIDs > 0 ? 2 + numUnmountIDs : 0) +\n+ \/\/ Regular operations\n+ pendingOperations.length\n+ );\n+\n+ \/\/ Identify which renderer this update is coming from.\n+ \/\/ This enables roots to be mapped to renderers,\n+ \/\/ Which in turn enables fiber props, states, and hooks to be inspected.\n+ let i = 0;\n+ operations[i++] = rendererID;\n+ operations[i++] = currentRootID; \/\/ Use this ID in case the root was unmounted!\n+\n+ \/\/ Now fill in the string table.\n+ \/\/ [stringTableLength, str1Length, ...str1, str2Length, ...str2, ...]\n+ operations[i++] = pendingStringTableLength;\n+ pendingStringTable.forEach((value, key) => {\n+ operations[i++] = key.length;\n+ const encodedKey = utfEncodeString(key);\n+ for (let j = 0; j < encodedKey.length; j++) {\n+ operations[i + j] = encodedKey[j];\n+ }\n+ i += key.length;\n+ });\n+\n+ if (numUnmountIDs > 0) {\n+ \/\/ All unmounts except roots are batched in a single message.\n+ operations[i++] = TREE_OPERATION_REMOVE;\n+ \/\/ The first number is how many unmounted IDs we're gonna send.\n+ operations[i++] = numUnmountIDs;\n+ \/\/ Fill in the real unmounts in the reverse order.\n+ \/\/ They were inserted parents-first by React, but we want children-first.\n+ \/\/ So we traverse our array backwards.\n+ for (let j = pendingRealUnmountedIDs.length - 1; j >= 0; j--) {\n+ operations[i++] = pendingRealUnmountedIDs[j];\n+ }\n+ \/\/ Fill in the simulated unmounts (hidden Suspense subtrees) in their order.\n+ \/\/ (We want children to go before parents.)\n+ \/\/ They go *after* the real unmounts because we know for sure they won't be\n+ \/\/ children of already pushed \"real\" IDs. If they were, we wouldn't be able\n+ \/\/ to discover them during the traversal, as they would have been deleted.\n+ for (let j = 0; j < pendingSimulatedUnmountedIDs.length; j++) {\n+ operations[i + j] = pendingSimulatedUnmountedIDs[j];\n+ }\n+ i += pendingSimulatedUnmountedIDs.length;\n+ \/\/ The root ID should always be unmounted last.\n+ if (pendingUnmountedRootID !== null) {\n+ operations[i] = pendingUnmountedRootID;\n+ i++;\n+ }\n+ }\n+ \/\/ Fill in the rest of the operations.\n+ for (let j = 0; j < pendingOperations.length; j++) {\n+ operations[i + j] = pendingOperations[j];\n+ }\n+ i += pendingOperations.length;\n+\n+ \/\/ Let the frontend know about tree operations.\n+ \/\/ The first value in this array will identify which root it corresponds to,\n+ \/\/ so we do no longer need to dispatch a separate root-committed event.\n+ if (pendingOperationsQueue !== null) {\n+ \/\/ Until the frontend has been connected, store the tree operations.\n+ \/\/ This will let us avoid walking the tree later when the frontend connects,\n+ \/\/ and it enables the Profiler's reload-and-profile functionality to work as well.\n+ pendingOperationsQueue.push(operations);\n+ } else {\n+ \/\/ If we've already connected to the frontend, just pass the operations through.\n+ hook.emit('operations', operations);\n+ }\n+\n+ pendingOperations.length = 0;\n+ pendingRealUnmountedIDs.length = 0;\n+ pendingSimulatedUnmountedIDs.length = 0;\n+ pendingUnmountedRootID = null;\n+ pendingStringTable.clear();\n+ pendingStringTableLength = 0;\n+ }\n+\n+ function getStringID(str: string | null): number {\n+ if (str === null) {\n+ return 0;\n+ }\n+ const existingID = pendingStringTable.get(str);\n+ if (existingID !== undefined) {\n+ return existingID;\n+ }\n+ const stringID = pendingStringTable.size + 1;\n+ pendingStringTable.set(str, stringID);\n+ \/\/ The string table total length needs to account\n+ \/\/ both for the string length, and for the array item\n+ \/\/ that contains the length itself. Hence + 1.\n+ pendingStringTableLength += str.length + 1;\n+ return stringID;\n+ }\n+\n+ function recordMount(fiber: Fiber, parentFiber: Fiber | null) {\n+ const isRoot = fiber.tag === HostRoot;\n+ const id = getFiberID(getPrimaryFiber(fiber));\n+\n+ const hasOwnerMetadata = fiber.hasOwnProperty('_debugOwner');\n+ const isProfilingSupported = fiber.hasOwnProperty('treeBaseDuration');\n+\n+ if (isRoot) {\n+ pushOperation(TREE_OPERATION_ADD);\n+ pushOperation(id);\n+ pushOperation(ElementTypeRoot);\n+ pushOperation(isProfilingSupported ? 1 : 0);\n+ pushOperation(hasOwnerMetadata ? 1 : 0);\n+\n+ if (isProfiling) {\n+ if (displayNamesByRootID !== null) {\n+ displayNamesByRootID.set(id, getDisplayNameForRoot(fiber));\n+ }\n+ }\n+ } else {\n+ const { key } = fiber;\n+ const displayName = getDisplayNameForFiber(fiber);\n+ const elementType = getElementTypeForFiber(fiber);\n+ const { _debugOwner } = fiber;\n+\n+ const ownerID =\n+ _debugOwner != null ? getFiberID(getPrimaryFiber(_debugOwner)) : 0;\n+ const parentID = parentFiber\n+ ? getFiberID(getPrimaryFiber(parentFiber))\n+ : 0;\n+\n+ let displayNameStringID = getStringID(displayName);\n+ let keyStringID = getStringID(key);\n+ pushOperation(TREE_OPERATION_ADD);\n+ pushOperation(id);\n+ pushOperation(elementType);\n+ pushOperation(parentID);\n+ pushOperation(ownerID);\n+ pushOperation(displayNameStringID);\n+ pushOperation(keyStringID);\n+ }\n+\n+ if (isProfilingSupported) {\n+ idToRootMap.set(id, currentRootID);\n+\n+ recordProfilingDurations(fiber);\n+ }\n+ }\n+\n+ function recordUnmount(fiber: Fiber, isSimulated: boolean) {\n+ if (trackedPathMatchFiber !== null) {\n+ \/\/ We're in the process of trying to restore previous selection.\n+ \/\/ If this fiber matched but is being unmounted, there's no use trying.\n+ \/\/ Reset the state so we don't keep holding onto it.\n+ if (\n+ fiber === trackedPathMatchFiber ||\n+ fiber === trackedPathMatchFiber.alternate\n+ ) {\n+ setTrackedPath(null);\n+ }\n+ }\n+\n+ const isRoot = fiber.tag === HostRoot;\n+ const primaryFiber = getPrimaryFiber(fiber);\n+ if (!fiberToIDMap.has(primaryFiber)) {\n+ \/\/ If we've never seen this Fiber, it might be because\n+ \/\/ it is inside a non-current Suspense fragment tree,\n+ \/\/ and so the store is not even aware of it.\n+ \/\/ In that case we can just ignore it, or otherwise\n+ \/\/ there will be errors later on.\n+ primaryFibers.delete(primaryFiber);\n+ \/\/ TODO: this is fragile and can obscure actual bugs.\n+ return;\n+ }\n+ const id = getFiberID(primaryFiber);\n+ if (isRoot) {\n+ \/\/ Roots must be removed only after all children (pending and simultated) have been removed.\n+ \/\/ So we track it separately.\n+ pendingUnmountedRootID = id;\n+ } else if (!shouldFilterFiber(fiber)) {\n+ \/\/ To maintain child-first ordering,\n+ \/\/ we'll push it into one of these queues,\n+ \/\/ and later arrange them in the correct order.\n+ if (isSimulated) {\n+ pendingSimulatedUnmountedIDs.push(id);\n+ } else {\n+ pendingRealUnmountedIDs.push(id);\n+ }\n+ }\n+ fiberToIDMap.delete(primaryFiber);\n+ idToFiberMap.delete(id);\n+ primaryFibers.delete(primaryFiber);\n+\n+ const isProfilingSupported = fiber.hasOwnProperty('treeBaseDuration');\n+ if (isProfilingSupported) {\n+ idToRootMap.delete(id);\n+ idToTreeBaseDurationMap.delete(id);\n+ }\n+ }\n+\n+ function mountFiberRecursively(\n+ fiber: Fiber,\n+ parentFiber: Fiber | null,\n+ traverseSiblings = false\n+ ) {\n+ if (__DEBUG__) {\n+ debug('mountFiberRecursively()', fiber, parentFiber);\n+ }\n+\n+ \/\/ If we have the tree selection from previous reload, try to match this Fiber.\n+ \/\/ Also remember whether to do the same for siblings.\n+ const mightSiblingsBeOnTrackedPath = updateTrackedPathStateBeforeMount(\n+ fiber\n+ );\n+\n+ const shouldIncludeInTree = !shouldFilterFiber(fiber);\n+ if (shouldIncludeInTree) {\n+ recordMount(fiber, parentFiber);\n+ }\n+\n+ const isTimedOutSuspense =\n+ fiber.tag === ReactTypeOfWork.SuspenseComponent &&\n+ fiber.memoizedState !== null;\n+\n+ if (isTimedOutSuspense) {\n+ \/\/ Special case: if Suspense mounts in a timed-out state,\n+ \/\/ get the fallback child from the inner fragment and mount\n+ \/\/ it as if it was our own child. Updates handle this too.\n+ const primaryChildFragment = fiber.child;\n+ const fallbackChildFragment = primaryChildFragment\n+ ? primaryChildFragment.sibling\n+ : null;\n+ const fallbackChild = fallbackChildFragment\n+ ? fallbackChildFragment.child\n+ : null;\n+ if (fallbackChild !== null) {\n+ mountFiberRecursively(\n+ fallbackChild,\n+ shouldIncludeInTree ? fiber : parentFiber,\n+ true\n+ );\n+ }\n+ } else {\n+ if (fiber.child !== null) {\n+ mountFiberRecursively(\n+ fiber.child,\n+ shouldIncludeInTree ? fiber : parentFiber,\n+ true\n+ );\n+ }\n+ }\n+\n+ \/\/ We're exiting this Fiber now, and entering its siblings.\n+ \/\/ If we have selection to restore, we might need to re-activate tracking.\n+ updateTrackedPathStateAfterMount(mightSiblingsBeOnTrackedPath);\n+\n+ if (traverseSiblings && fiber.sibling !== null) {\n+ mountFiberRecursively(fiber.sibling, parentFiber, true);\n+ }\n+ }\n+\n+ \/\/ We use this to simulate unmounting for Suspense trees\n+ \/\/ when we switch from primary to fallback.\n+ function unmountFiberChildrenRecursively(fiber: Fiber) {\n+ if (__DEBUG__) {\n+ debug('unmountFiberChildrenRecursively()', fiber);\n+ }\n+\n+ \/\/ We might meet a nested Suspense on our way.\n+ const isTimedOutSuspense =\n+ fiber.tag === ReactTypeOfWork.SuspenseComponent &&\n+ fiber.memoizedState !== null;\n+\n+ let child = fiber.child;\n+ if (isTimedOutSuspense) {\n+ \/\/ If it's showing fallback tree, let's traverse it instead.\n+ const primaryChildFragment = fiber.child;\n+ const fallbackChildFragment = primaryChildFragment\n+ ? primaryChildFragment.sibling\n+ : null;\n+ \/\/ Skip over to the real Fiber child.\n+ child = fallbackChildFragment ? fallbackChildFragment.child : null;\n+ }\n+\n+ while (child !== null) {\n+ \/\/ Record simulated unmounts children-first.\n+ \/\/ We skip nodes without return because those are real unmounts.\n+ if (child.return !== null) {\n+ unmountFiberChildrenRecursively(child);\n+ recordUnmount(child, true);\n+ }\n+ child = child.sibling;\n+ }\n+ }\n+\n+ function recordProfilingDurations(fiber: Fiber) {\n+ const id = getFiberID(getPrimaryFiber(fiber));\n+ const { actualDuration, treeBaseDuration } = fiber;\n+\n+ idToTreeBaseDurationMap.set(id, fiber.treeBaseDuration || 0);\n+\n+ if (isProfiling) {\n+ const { alternate } = fiber;\n+\n+ if (\n+ alternate == null ||\n+ treeBaseDuration !== alternate.treeBaseDuration\n+ ) {\n+ \/\/ Tree base duration updates are included in the operations typed array.\n+ \/\/ So we have to convert them from milliseconds to microseconds so we can send them as ints.\n+ const treeBaseDuration = Math.floor(\n+ (fiber.treeBaseDuration || 0) * 1000\n+ );\n+ pushOperation(TREE_OPERATION_UPDATE_TREE_BASE_DURATION);\n+ pushOperation(id);\n+ pushOperation(treeBaseDuration);\n+ }\n+\n+ if (alternate == null || didFiberRender(alternate, fiber)) {\n+ if (actualDuration != null) {\n+ \/\/ The actual duration reported by React includes time spent working on children.\n+ \/\/ This is useful information, but it's also useful to be able to exclude child durations.\n+ \/\/ The frontend can't compute this, since the immediate children may have been filtered out.\n+ \/\/ So we need to do this on the backend.\n+ \/\/ Note that this calculated self duration is not the same thing as the base duration.\n+ \/\/ The two are calculated differently (tree duration does not accumulate).\n+ let selfDuration = actualDuration;\n+ let child = fiber.child;\n+ while (child !== null) {\n+ selfDuration -= child.actualDuration || 0;\n+ child = child.sibling;\n+ }\n+\n+ \/\/ If profiling is active, store durations for elements that were rendered during the commit.\n+ \/\/ Note that we should do this for any fiber we performed work on, regardless of its actualDuration value.\n+ \/\/ In some cases actualDuration might be 0 for fibers we worked on (particularly if we're using Date.now)\n+ \/\/ In other cases (e.g. Memo) actualDuration might be greater than 0 even if we \"bailed out\".\n+ const metadata = ((currentCommitProfilingMetadata: any): CommitProfilingData);\n+ metadata.durations.push(id, actualDuration, selfDuration);\n+ metadata.maxActualDuration = Math.max(\n+ metadata.maxActualDuration,\n+ actualDuration\n+ );\n+\n+ if (recordChangeDescriptions) {\n+ const changeDescription = getChangeDescription(alternate, fiber);\n+ if (changeDescription !== null) {\n+ if (metadata.changeDescriptions !== null) {\n+ metadata.changeDescriptions.set(id, changeDescription);\n+ }\n+ }\n+\n+ updateContextsForFiber(fiber);\n+ }\n+ }\n+ }\n+ }\n+ }\n+\n+ function recordResetChildren(fiber: Fiber, childSet: Fiber) {\n+ \/\/ The frontend only really cares about the displayName, key, and children.\n+ \/\/ The first two don't really change, so we are only concerned with the order of children here.\n+ \/\/ This is trickier than a simple comparison though, since certain types of fibers are filtered.\n+ const nextChildren: Array<number> = [];\n+\n+ \/\/ This is a naive implimentation that shallowly recurses children.\n+ \/\/ We might want to revisit this if it proves to be too inefficient.\n+ let child = childSet;\n+ while (child !== null) {\n+ findReorderedChildrenRecursively(child, nextChildren);\n+ child = child.sibling;\n+ }\n+\n+ const numChildren = nextChildren.length;\n+ if (numChildren < 2) {\n+ \/\/ No need to reorder.\n+ return;\n+ }\n+ pushOperation(TREE_OPERATION_REORDER_CHILDREN);\n+ pushOperation(getFiberID(getPrimaryFiber(fiber)));\n+ pushOperation(numChildren);\n+ for (let i = 0; i < nextChildren.length; i++) {\n+ pushOperation(nextChildren[i]);\n+ }\n+ }\n+\n+ function findReorderedChildrenRecursively(\n+ fiber: Fiber,\n+ nextChildren: Array<number>\n+ ) {\n+ if (!shouldFilterFiber(fiber)) {\n+ nextChildren.push(getFiberID(getPrimaryFiber(fiber)));\n+ } else {\n+ let child = fiber.child;\n+ while (child !== null) {\n+ findReorderedChildrenRecursively(child, nextChildren);\n+ child = child.sibling;\n+ }\n+ }\n+ }\n+\n+ \/\/ Returns whether closest unfiltered fiber parent needs to reset its child list.\n+ function updateFiberRecursively(\n+ nextFiber: Fiber,\n+ prevFiber: Fiber,\n+ parentFiber: Fiber | null\n+ ): boolean {\n+ if (__DEBUG__) {\n+ debug('updateFiberRecursively()', nextFiber, parentFiber);\n+ }\n+\n+ if (\n+ mostRecentlyInspectedElement !== null &&\n+ mostRecentlyInspectedElement.id ===\n+ getFiberID(getPrimaryFiber(nextFiber)) &&\n+ didFiberRender(prevFiber, nextFiber)\n+ ) {\n+ \/\/ If this Fiber has updated, clear cached inspected data.\n+ \/\/ If it is inspected again, it may need to be re-run to obtain updated hooks values.\n+ hasElementUpdatedSinceLastInspected = true;\n+ }\n+\n+ const shouldIncludeInTree = !shouldFilterFiber(nextFiber);\n+ const isSuspense = nextFiber.tag === SuspenseComponent;\n+ let shouldResetChildren = false;\n+ \/\/ The behavior of timed-out Suspense trees is unique.\n+ \/\/ Rather than unmount the timed out content (and possibly lose important state),\n+ \/\/ React re-parents this content within a hidden Fragment while the fallback is showing.\n+ \/\/ This behavior doesn't need to be observable in the DevTools though.\n+ \/\/ It might even result in a bad user experience for e.g. node selection in the Elements panel.\n+ \/\/ The easiest fix is to strip out the intermediate Fragment fibers,\n+ \/\/ so the Elements panel and Profiler don't need to special case them.\n+ \/\/ Suspense components only have a non-null memoizedState if they're timed-out.\n+ const prevDidTimeout = isSuspense && prevFiber.memoizedState !== null;\n+ const nextDidTimeOut = isSuspense && nextFiber.memoizedState !== null;\n+ \/\/ The logic below is inspired by the codepaths in updateSuspenseComponent()\n+ \/\/ inside ReactFiberBeginWork in the React source code.\n+ if (prevDidTimeout && nextDidTimeOut) {\n+ \/\/ Fallback -> Fallback:\n+ \/\/ 1. Reconcile fallback set.\n+ const nextFiberChild = nextFiber.child;\n+ const nextFallbackChildSet = nextFiberChild\n+ ? nextFiberChild.sibling\n+ : null;\n+ \/\/ Note: We can't use nextFiber.child.sibling.alternate\n+ \/\/ because the set is special and alternate may not exist.\n+ const prevFiberChild = prevFiber.child;\n+ const prevFallbackChildSet = prevFiberChild\n+ ? prevFiberChild.sibling\n+ : null;\n+ if (\n+ nextFallbackChildSet != null &&\n+ prevFallbackChildSet != null &&\n+ updateFiberRecursively(\n+ nextFallbackChildSet,\n+ prevFallbackChildSet,\n+ nextFiber\n+ )\n+ ) {\n+ shouldResetChildren = true;\n+ }\n+ } else if (prevDidTimeout && !nextDidTimeOut) {\n+ \/\/ Fallback -> Primary:\n+ \/\/ 1. Unmount fallback set\n+ \/\/ Note: don't emulate fallback unmount because React actually did it.\n+ \/\/ 2. Mount primary set\n+ const nextPrimaryChildSet = nextFiber.child;\n+ if (nextPrimaryChildSet !== null) {\n+ mountFiberRecursively(nextPrimaryChildSet, nextFiber, true);\n+ }\n+ shouldResetChildren = true;\n+ } else if (!prevDidTimeout && nextDidTimeOut) {\n+ \/\/ Primary -> Fallback:\n+ \/\/ 1. Hide primary set\n+ \/\/ This is not a real unmount, so it won't get reported by React.\n+ \/\/ We need to manually walk the previous tree and record unmounts.\n+ unmountFiberChildrenRecursively(prevFiber);\n+ \/\/ 2. Mount fallback set\n+ const nextFiberChild = nextFiber.child;\n+ const nextFallbackChildSet = nextFiberChild\n+ ? nextFiberChild.sibling\n+ : null;\n+ if (nextFallbackChildSet != null) {\n+ mountFiberRecursively(nextFallbackChildSet, nextFiber, true);\n+ shouldResetChildren = true;\n+ }\n+ } else {\n+ \/\/ Common case: Primary -> Primary.\n+ \/\/ This is the same codepath as for non-Suspense fibers.\n+ if (nextFiber.child !== prevFiber.child) {\n+ \/\/ If the first child is different, we need to traverse them.\n+ \/\/ Each next child will be either a new child (mount) or an alternate (update).\n+ let nextChild = nextFiber.child;\n+ let prevChildAtSameIndex = prevFiber.child;\n+ while (nextChild) {\n+ \/\/ We already know children will be referentially different because\n+ \/\/ they are either new mounts or alternates of previous children.\n+ \/\/ Schedule updates and mounts depending on whether alternates exist.\n+ \/\/ We don't track deletions here because they are reported separately.\n+ if (nextChild.alternate) {\n+ const prevChild = nextChild.alternate;\n+ if (\n+ updateFiberRecursively(\n+ nextChild,\n+ prevChild,\n+ shouldIncludeInTree ? nextFiber : parentFiber\n+ )\n+ ) {\n+ \/\/ If a nested tree child order changed but it can't handle its own\n+ \/\/ child order invalidation (e.g. because it's filtered out like host nodes),\n+ \/\/ propagate the need to reset child order upwards to this Fiber.\n+ shouldResetChildren = true;\n+ }\n+ \/\/ However we also keep track if the order of the children matches\n+ \/\/ the previous order. They are always different referentially, but\n+ \/\/ if the instances line up conceptually we'll want to know that.\n+ if (prevChild !== prevChildAtSameIndex) {\n+ shouldResetChildren = true;\n+ }\n+ } else {\n+ mountFiberRecursively(\n+ nextChild,\n+ shouldIncludeInTree ? nextFiber : parentFiber\n+ );\n+ shouldResetChildren = true;\n+ }\n+ \/\/ Try the next child.\n+ nextChild = nextChild.sibling;\n+ \/\/ Advance the pointer in the previous list so that we can\n+ \/\/ keep comparing if they line up.\n+ if (!shouldResetChildren && prevChildAtSameIndex !== null) {\n+ prevChildAtSameIndex = prevChildAtSameIndex.sibling;\n+ }\n+ }\n+ \/\/ If we have no more children, but used to, they don't line up.\n+ if (prevChildAtSameIndex !== null) {\n+ shouldResetChildren = true;\n+ }\n+ }\n+ }\n+ if (shouldIncludeInTree) {\n+ const isProfilingSupported = nextFiber.hasOwnProperty('treeBaseDuration');\n+ if (isProfilingSupported) {\n+ recordProfilingDurations(nextFiber);\n+ }\n+ }\n+ if (shouldResetChildren) {\n+ \/\/ We need to crawl the subtree for closest non-filtered Fibers\n+ \/\/ so that we can display them in a flat children set.\n+ if (shouldIncludeInTree) {\n+ \/\/ Normally, search for children from the rendered child.\n+ let nextChildSet = nextFiber.child;\n+ if (nextDidTimeOut) {\n+ \/\/ Special case: timed-out Suspense renders the fallback set.\n+ const nextFiberChild = nextFiber.child;\n+ nextChildSet = nextFiberChild ? nextFiberChild.sibling : null;\n+ }\n+ if (nextChildSet != null) {\n+ recordResetChildren(nextFiber, nextChildSet);\n+ }\n+ \/\/ We've handled the child order change for this Fiber.\n+ \/\/ Since it's included, there's no need to invalidate parent child order.\n+ return false;\n+ } else {\n+ \/\/ Let the closest unfiltered parent Fiber reset its child order instead.\n+ return true;\n+ }\n+ } else {\n+ return false;\n+ }\n+ }\n+\n+ function cleanup() {\n+ \/\/ We don't patch any methods so there is no cleanup.\n+ }\n+\n+ function flushInitialOperations() {\n+ const localPendingOperationsQueue = pendingOperationsQueue;\n+\n+ pendingOperationsQueue = null;\n+\n+ if (\n+ localPendingOperationsQueue !== null &&\n+ localPendingOperationsQueue.length > 0\n+ ) {\n+ \/\/ We may have already queued up some operations before the frontend connected\n+ \/\/ If so, let the frontend know about them.\n+ localPendingOperationsQueue.forEach(operations => {\n+ hook.emit('operations', operations);\n+ });\n+ } else {\n+ \/\/ Before the traversals, remember to start tracking\n+ \/\/ our path in case we have selection to restore.\n+ if (trackedPath !== null) {\n+ mightBeOnTrackedPath = true;\n+ }\n+ \/\/ If we have not been profiling, then we can just walk the tree and build up its current state as-is.\n+ hook.getFiberRoots(rendererID).forEach(root => {\n+ currentRootID = getFiberID(getPrimaryFiber(root.current));\n+ setRootPseudoKey(currentRootID, root.current);\n+\n+ if (isProfiling) {\n+ \/\/ If profiling is active, store commit time and duration, and the current interactions.\n+ \/\/ The frontend may request this information after profiling has stopped.\n+ currentCommitProfilingMetadata = {\n+ changeDescriptions: recordChangeDescriptions ? new Map() : null,\n+ durations: [],\n+ commitTime: getCurrentTime() - profilingStartTime,\n+ interactions: Array.from(root.memoizedInteractions).map(\n+ (interaction: Interaction) => ({\n+ ...interaction,\n+ timestamp: interaction.timestamp - profilingStartTime,\n+ })\n+ ),\n+ maxActualDuration: 0,\n+ priorityLevel: null,\n+ };\n+ }\n+\n+ mountFiberRecursively(root.current, null);\n+ flushPendingEvents(root);\n+ currentRootID = -1;\n+ });\n+ }\n+ }\n+\n+ function handleCommitFiberUnmount(fiber) {\n+ \/\/ This is not recursive.\n+ \/\/ We can't traverse fibers after unmounting so instead\n+ \/\/ we rely on React telling us about each unmount.\n+ recordUnmount(fiber, false);\n+ }\n+\n+ function handleCommitFiberRoot(root, priorityLevel) {\n+ const current = root.current;\n+ const alternate = current.alternate;\n+\n+ currentRootID = getFiberID(getPrimaryFiber(current));\n+\n+ \/\/ Before the traversals, remember to start tracking\n+ \/\/ our path in case we have selection to restore.\n+ if (trackedPath !== null) {\n+ mightBeOnTrackedPath = true;\n+ }\n+\n+ if (isProfiling) {\n+ \/\/ If profiling is active, store commit time and duration, and the current interactions.\n+ \/\/ The frontend may request this information after profiling has stopped.\n+ currentCommitProfilingMetadata = {\n+ changeDescriptions: recordChangeDescriptions ? new Map() : null,\n+ durations: [],\n+ commitTime: getCurrentTime() - profilingStartTime,\n+ interactions: Array.from(root.memoizedInteractions).map(\n+ (interaction: Interaction) => ({\n+ ...interaction,\n+ timestamp: interaction.timestamp - profilingStartTime,\n+ })\n+ ),\n+ maxActualDuration: 0,\n+ priorityLevel:\n+ priorityLevel == null ? null : formatPriorityLevel(priorityLevel),\n+ };\n+ }\n+\n+ if (alternate) {\n+ \/\/ TODO: relying on this seems a bit fishy.\n+ const wasMounted =\n+ alternate.memoizedState != null &&\n+ alternate.memoizedState.element != null;\n+ const isMounted =\n+ current.memoizedState != null && current.memoizedState.element != null;\n+ if (!wasMounted && isMounted) {\n+ \/\/ Mount a new root.\n+ setRootPseudoKey(currentRootID, current);\n+ mountFiberRecursively(current, null);\n+ } else if (wasMounted && isMounted) {\n+ \/\/ Update an existing root.\n+ updateFiberRecursively(current, alternate, null);\n+ } else if (wasMounted && !isMounted) {\n+ \/\/ Unmount an existing root.\n+ removeRootPseudoKey(currentRootID);\n+ recordUnmount(current, false);\n+ }\n+ } else {\n+ \/\/ Mount a new root.\n+ setRootPseudoKey(currentRootID, current);\n+ mountFiberRecursively(current, null);\n+ }\n+\n+ if (isProfiling) {\n+ const commitProfilingMetadata = ((rootToCommitProfilingMetadataMap: any): CommitProfilingMetadataMap).get(\n+ currentRootID\n+ );\n+ if (commitProfilingMetadata != null) {\n+ commitProfilingMetadata.push(\n+ ((currentCommitProfilingMetadata: any): CommitProfilingData)\n+ );\n+ } else {\n+ ((rootToCommitProfilingMetadataMap: any): CommitProfilingMetadataMap).set(\n+ currentRootID,\n+ [((currentCommitProfilingMetadata: any): CommitProfilingData)]\n+ );\n+ }\n+ }\n+\n+ \/\/ We're done here.\n+ flushPendingEvents(root);\n+\n+ currentRootID = -1;\n+ }\n+\n+ function findAllCurrentHostFibers(id: number): $ReadOnlyArray<Fiber> {\n+ const fibers = [];\n+ const fiber = findCurrentFiberUsingSlowPathById(id);\n+ if (!fiber) {\n+ return fibers;\n+ }\n+\n+ \/\/ Next we'll drill down this component to find all HostComponent\/Text.\n+ let node: Fiber = fiber;\n+ while (true) {\n+ if (node.tag === HostComponent || node.tag === HostText) {\n+ fibers.push(node);\n+ } else if (node.child) {\n+ node.child.return = node;\n+ node = node.child;\n+ continue;\n+ }\n+ if (node === fiber) {\n+ return fibers;\n+ }\n+ while (!node.sibling) {\n+ if (!node.return || node.return === fiber) {\n+ return fibers;\n+ }\n+ node = node.return;\n+ }\n+ node.sibling.return = node.return;\n+ node = node.sibling;\n+ }\n+ \/\/ Flow needs the return here, but ESLint complains about it.\n+ \/\/ eslint-disable-next-line no-unreachable\n+ return fibers;\n+ }\n+\n+ function findNativeNodesForFiberID(id: number) {\n+ try {\n+ let fiber = findCurrentFiberUsingSlowPathById(id);\n+ if (fiber === null) {\n+ return null;\n+ }\n+ \/\/ Special case for a timed-out Suspense.\n+ const isTimedOutSuspense =\n+ fiber.tag === SuspenseComponent && fiber.memoizedState !== null;\n+ if (isTimedOutSuspense) {\n+ \/\/ A timed-out Suspense's findDOMNode is useless.\n+ \/\/ Try our best to find the fallback directly.\n+ const maybeFallbackFiber = fiber.child && fiber.child.sibling;\n+ if (maybeFallbackFiber != null) {\n+ fiber = maybeFallbackFiber;\n+ }\n+ }\n+ const hostFibers = findAllCurrentHostFibers(id);\n+ return hostFibers.map(hostFiber => hostFiber.stateNode).filter(Boolean);\n+ } catch (err) {\n+ \/\/ The fiber might have unmounted by now.\n+ return null;\n+ }\n+ }\n+\n+ function getFiberIDForNative(\n+ hostInstance,\n+ findNearestUnfilteredAncestor = false\n+ ) {\n+ let fiber = renderer.findFiberByHostInstance(hostInstance);\n+ if (fiber != null) {\n+ if (findNearestUnfilteredAncestor) {\n+ while (fiber !== null && shouldFilterFiber(fiber)) {\n+ fiber = fiber.return;\n+ }\n+ }\n+ return getFiberID(getPrimaryFiber(((fiber: any): Fiber)));\n+ }\n+ return null;\n+ }\n+\n+ const MOUNTING = 1;\n+ const MOUNTED = 2;\n+ const UNMOUNTED = 3;\n+\n+ \/\/ This function is copied from React and should be kept in sync:\n+ \/\/ https:\/\/github.com\/facebook\/react\/blob\/master\/packages\/react-reconciler\/src\/ReactFiberTreeReflection.js\n+ function isFiberMountedImpl(fiber: Fiber): number {\n+ let node = fiber;\n+ if (!fiber.alternate) {\n+ \/\/ If there is no alternate, this might be a new tree that isn't inserted\n+ \/\/ yet. If it is, then it will have a pending insertion effect on it.\n+ if ((node.effectTag & Placement) !== NoEffect) {\n+ return MOUNTING;\n+ }\n+ while (node.return) {\n+ node = node.return;\n+ if ((node.effectTag & Placement) !== NoEffect) {\n+ return MOUNTING;\n+ }\n+ }\n+ } else {\n+ while (node.return) {\n+ node = node.return;\n+ }\n+ }\n+ if (node.tag === HostRoot) {\n+ \/\/ TODO: Check if this was a nested HostRoot when used with\n+ \/\/ renderContainerIntoSubtree.\n+ return MOUNTED;\n+ }\n+ \/\/ If we didn't hit the root, that means that we're in an disconnected tree\n+ \/\/ that has been unmounted.\n+ return UNMOUNTED;\n+ }\n+\n+ \/\/ This function is copied from React and should be kept in sync:\n+ \/\/ https:\/\/github.com\/facebook\/react\/blob\/master\/packages\/react-reconciler\/src\/ReactFiberTreeReflection.js\n+ \/\/ It would be nice if we updated React to inject this function directly (vs just indirectly via findDOMNode).\n+ \/\/ BEGIN copied code\n+ function findCurrentFiberUsingSlowPathById(id: number): Fiber | null {\n+ const fiber = idToFiberMap.get(id);\n+ if (fiber == null) {\n+ console.warn(`Could not find Fiber with id \"${id}\"`);\n+ return null;\n+ }\n+\n+ let alternate = fiber.alternate;\n+ if (!alternate) {\n+ \/\/ If there is no alternate, then we only need to check if it is mounted.\n+ const state = isFiberMountedImpl(fiber);\n+ if (state === UNMOUNTED) {\n+ throw Error('Unable to find node on an unmounted component.');\n+ }\n+ if (state === MOUNTING) {\n+ return null;\n+ }\n+ return fiber;\n+ }\n+ \/\/ If we have two possible branches, we'll walk backwards up to the root\n+ \/\/ to see what path the root points to. On the way we may hit one of the\n+ \/\/ special cases and we'll deal with them.\n+ let a: Fiber = fiber;\n+ let b: Fiber = alternate;\n+ while (true) {\n+ let parentA = a.return;\n+ if (parentA === null) {\n+ \/\/ We're at the root.\n+ break;\n+ }\n+ let parentB = parentA.alternate;\n+ if (parentB === null) {\n+ \/\/ There is no alternate. This is an unusual case. Currently, it only\n+ \/\/ happens when a Suspense component is hidden. An extra fragment fiber\n+ \/\/ is inserted in between the Suspense fiber and its children. Skip\n+ \/\/ over this extra fragment fiber and proceed to the next parent.\n+ const nextParent = parentA.return;\n+ if (nextParent !== null) {\n+ a = b = nextParent;\n+ continue;\n+ }\n+ \/\/ If there's no parent, we're at the root.\n+ break;\n+ }\n+\n+ \/\/ If both copies of the parent fiber point to the same child, we can\n+ \/\/ assume that the child is current. This happens when we bailout on low\n+ \/\/ priority: the bailed out fiber's child reuses the current child.\n+ if (parentA.child === parentB.child) {\n+ let child = parentA.child;\n+ while (child) {\n+ if (child === a) {\n+ \/\/ We've determined that A is the current branch.\n+ if (isFiberMountedImpl(parentA) !== MOUNTED) {\n+ throw Error('Unable to find node on an unmounted component.');\n+ }\n+ return fiber;\n+ }\n+ if (child === b) {\n+ \/\/ We've determined that B is the current branch.\n+ if (isFiberMountedImpl(parentA) !== MOUNTED) {\n+ throw Error('Unable to find node on an unmounted component.');\n+ }\n+ return alternate;\n+ }\n+ child = child.sibling;\n+ }\n+ \/\/ We should never have an alternate for any mounting node. So the only\n+ \/\/ way this could possibly happen is if this was unmounted, if at all.\n+ throw Error('Unable to find node on an unmounted component.');\n+ }\n+\n+ if (a.return !== b.return) {\n+ \/\/ The return pointer of A and the return pointer of B point to different\n+ \/\/ fibers. We assume that return pointers never criss-cross, so A must\n+ \/\/ belong to the child set of A.return, and B must belong to the child\n+ \/\/ set of B.return.\n+ a = parentA;\n+ b = parentB;\n+ } else {\n+ \/\/ The return pointers point to the same fiber. We'll have to use the\n+ \/\/ default, slow path: scan the child sets of each parent alternate to see\n+ \/\/ which child belongs to which set.\n+ \/\/\n+ \/\/ Search parent A's child set\n+ let didFindChild = false;\n+ let child = parentA.child;\n+ while (child) {\n+ if (child === a) {\n+ didFindChild = true;\n+ a = parentA;\n+ b = parentB;\n+ break;\n+ }\n+ if (child === b) {\n+ didFindChild = true;\n+ b = parentA;\n+ a = parentB;\n+ break;\n+ }\n+ child = child.sibling;\n+ }\n+ if (!didFindChild) {\n+ \/\/ Search parent B's child set\n+ child = parentB.child;\n+ while (child) {\n+ if (child === a) {\n+ didFindChild = true;\n+ a = parentB;\n+ b = parentA;\n+ break;\n+ }\n+ if (child === b) {\n+ didFindChild = true;\n+ b = parentB;\n+ a = parentA;\n+ break;\n+ }\n+ child = child.sibling;\n+ }\n+ if (!didFindChild) {\n+ throw Error(\n+ 'Child was not found in either parent set. This indicates a bug ' +\n+ 'in React related to the return pointer. Please file an issue.'\n+ );\n+ }\n+ }\n+ }\n+\n+ if (a.alternate !== b) {\n+ throw Error(\n+ \"Return fibers should always be each others' alternates. \" +\n+ 'This error is likely caused by a bug in React. Please file an issue.'\n+ );\n+ }\n+ }\n+ \/\/ If the root is not a host container, we're in a disconnected tree. I.e.\n+ \/\/ unmounted.\n+ if (a.tag !== HostRoot) {\n+ throw Error('Unable to find node on an unmounted component.');\n+ }\n+ if (a.stateNode.current === a) {\n+ \/\/ We've determined that A is the current branch.\n+ return fiber;\n+ }\n+ \/\/ Otherwise B has to be current branch.\n+ return alternate;\n+ }\n+ \/\/ END copied code\n+\n+ function prepareViewElementSource(id: number): void {\n+ let fiber = idToFiberMap.get(id);\n+ if (fiber == null) {\n+ console.warn(`Could not find Fiber with id \"${id}\"`);\n+ return;\n+ }\n+\n+ const { elementType, tag, type } = fiber;\n+\n+ switch (tag) {\n+ case ClassComponent:\n+ case IncompleteClassComponent:\n+ case IndeterminateComponent:\n+ case FunctionComponent:\n+ global.$type = type;\n+ break;\n+ case ForwardRef:\n+ global.$type = type.render;\n+ break;\n+ case MemoComponent:\n+ case SimpleMemoComponent:\n+ global.$type =\n+ elementType != null && elementType.type != null\n+ ? elementType.type\n+ : type;\n+ break;\n+ default:\n+ global.$type = null;\n+ break;\n+ }\n+ }\n+\n+ function getOwnersList(id: number): Array<Owner> | null {\n+ let fiber = findCurrentFiberUsingSlowPathById(id);\n+ if (fiber == null) {\n+ return null;\n+ }\n+\n+ const { _debugOwner } = fiber;\n+\n+ const owners = [\n+ {\n+ displayName: getDisplayNameForFiber(fiber) || 'Anonymous',\n+ id,\n+ type: getElementTypeForFiber(fiber),\n+ },\n+ ];\n+\n+ if (_debugOwner) {\n+ let owner = _debugOwner;\n+ while (owner !== null) {\n+ owners.unshift({\n+ displayName: getDisplayNameForFiber(owner) || 'Anonymous',\n+ id: getFiberID(getPrimaryFiber(owner)),\n+ type: getElementTypeForFiber(owner),\n+ });\n+ owner = owner._debugOwner || null;\n+ }\n+ }\n+\n+ return owners;\n+ }\n+\n+ \/\/ Fast path props lookup for React Native style editor.\n+ \/\/ Could use inspectElementRaw() but that would require shallow rendering hooks components,\n+ \/\/ and could also mess with memoization.\n+ function getInstanceAndStyle(id: number): InstanceAndStyle {\n+ let instance = null;\n+ let style = null;\n+\n+ let fiber = findCurrentFiberUsingSlowPathById(id);\n+ if (fiber !== null) {\n+ instance = fiber.stateNode;\n+ style = fiber.memoizedProps.style;\n+ }\n+\n+ return { instance, style };\n+ }\n+\n+ function inspectElementRaw(id: number): InspectedElement | null {\n+ let fiber = findCurrentFiberUsingSlowPathById(id);\n+ if (fiber == null) {\n+ return null;\n+ }\n+\n+ const {\n+ _debugOwner,\n+ _debugSource,\n+ stateNode,\n+ memoizedProps,\n+ memoizedState,\n+ tag,\n+ type,\n+ } = fiber;\n+\n+ const usesHooks =\n+ (tag === FunctionComponent ||\n+ tag === SimpleMemoComponent ||\n+ tag === ForwardRef) &&\n+ !!memoizedState;\n+\n+ const typeSymbol = getTypeSymbol(type);\n+\n+ let canViewSource = false;\n+ let context = null;\n+ if (\n+ tag === ClassComponent ||\n+ tag === FunctionComponent ||\n+ tag === IncompleteClassComponent ||\n+ tag === IndeterminateComponent ||\n+ tag === MemoComponent ||\n+ tag === ForwardRef ||\n+ tag === SimpleMemoComponent\n+ ) {\n+ canViewSource = true;\n+ if (stateNode && stateNode.context != null) {\n+ context = stateNode.context;\n+ }\n+ } else if (\n+ typeSymbol === CONTEXT_CONSUMER_NUMBER ||\n+ typeSymbol === CONTEXT_CONSUMER_SYMBOL_STRING\n+ ) {\n+ \/\/ 16.3-16.5 read from \"type\" because the Consumer is the actual context object.\n+ \/\/ 16.6+ should read from \"type._context\" because Consumer can be different (in DEV).\n+ \/\/ NOTE Keep in sync with getDisplayNameForFiber()\n+ const consumerResolvedContext = type._context || type;\n+\n+ \/\/ Global context value.\n+ context = consumerResolvedContext._currentValue || null;\n+\n+ \/\/ Look for overridden value.\n+ let current = ((fiber: any): Fiber).return;\n+ while (current !== null) {\n+ const currentType = current.type;\n+ const currentTypeSymbol = getTypeSymbol(currentType);\n+ if (\n+ currentTypeSymbol === CONTEXT_PROVIDER_NUMBER ||\n+ currentTypeSymbol === CONTEXT_PROVIDER_SYMBOL_STRING\n+ ) {\n+ \/\/ 16.3.0 exposed the context object as \"context\"\n+ \/\/ PR #12501 changed it to \"_context\" for 16.3.1+\n+ \/\/ NOTE Keep in sync with getDisplayNameForFiber()\n+ const providerResolvedContext =\n+ currentType._context || currentType.context;\n+ if (providerResolvedContext === consumerResolvedContext) {\n+ context = current.memoizedProps.value;\n+ break;\n+ }\n+ }\n+\n+ current = current.return;\n+ }\n+ }\n+\n+ if (context !== null) {\n+ \/\/ To simplify hydration and display logic for context, wrap in a value object.\n+ \/\/ Otherwise simple values (e.g. strings, booleans) become harder to handle.\n+ context = { value: context };\n+ }\n+\n+ let owners = null;\n+ if (_debugOwner) {\n+ owners = [];\n+ let owner = _debugOwner;\n+ while (owner !== null) {\n+ owners.push({\n+ displayName: getDisplayNameForFiber(owner) || 'Anonymous',\n+ id: getFiberID(getPrimaryFiber(owner)),\n+ type: getElementTypeForFiber(owner),\n+ });\n+ owner = owner._debugOwner || null;\n+ }\n+ }\n+\n+ const isTimedOutSuspense =\n+ tag === SuspenseComponent && memoizedState !== null;\n+\n+ let hooks = null;\n+ if (usesHooks) {\n+ const originalConsoleMethods = {};\n+\n+ \/\/ Temporarily disable all console logging before re-running the hook.\n+ for (let method in console) {\n+ try {\n+ originalConsoleMethods[method] = console[method];\n+ \/\/ $FlowFixMe property error|warn is not writable.\n+ console[method] = () => {};\n+ } catch (error) {}\n+ }\n+\n+ try {\n+ hooks = inspectHooksOfFiber(\n+ fiber,\n+ (renderer.currentDispatcherRef: any)\n+ );\n+ } finally {\n+ \/\/ Restore original console functionality.\n+ for (let method in originalConsoleMethods) {\n+ try {\n+ \/\/ $FlowFixMe property error|warn is not writable.\n+ console[method] = originalConsoleMethods[method];\n+ } catch (error) {}\n+ }\n+ }\n+ }\n+\n+ return {\n+ id,\n+\n+ \/\/ Does the current renderer support editable hooks?\n+ canEditHooks: typeof overrideHookState === 'function',\n+\n+ \/\/ Does the current renderer support editable function props?\n+ canEditFunctionProps: typeof overrideProps === 'function',\n+\n+ canToggleSuspense:\n+ supportsTogglingSuspense &&\n+ \/\/ If it's showing the real content, we can always flip fallback.\n+ (!isTimedOutSuspense ||\n+ \/\/ If it's showing fallback because we previously forced it to,\n+ \/\/ allow toggling it back to remove the fallback override.\n+ forceFallbackForSuspenseIDs.has(id)),\n+\n+ \/\/ Can view component source location.\n+ canViewSource,\n+\n+ displayName: getDisplayNameForFiber(fiber),\n+ type: getElementTypeForFiber(fiber),\n+\n+ \/\/ Inspectable properties.\n+ \/\/ TODO Review sanitization approach for the below inspectable values.\n+ context,\n+ hooks,\n+ props: memoizedProps,\n+ state: usesHooks ? null : memoizedState,\n+\n+ \/\/ List of owners\n+ owners,\n+\n+ \/\/ Location of component in source coude.\n+ source: _debugSource || null,\n+ };\n+ }\n+\n+ let mostRecentlyInspectedElement: InspectedElement | null = null;\n+ let hasElementUpdatedSinceLastInspected: boolean = false;\n+ let currentlyInspectedPaths: Object = {};\n+\n+ function isMostRecentlyInspectedElementCurrent(id: number): boolean {\n+ return (\n+ mostRecentlyInspectedElement !== null &&\n+ mostRecentlyInspectedElement.id === id &&\n+ !hasElementUpdatedSinceLastInspected\n+ );\n+ }\n+\n+ \/\/ Track the intersection of currently inspected paths,\n+ \/\/ so that we can send their data along if the element is re-rendered.\n+ function mergeInspectedPaths(path: Array<string | number>) {\n+ let current = currentlyInspectedPaths;\n+ path.forEach(key => {\n+ if (!current[key]) {\n+ current[key] = {};\n+ }\n+ current = current[key];\n+ });\n+ }\n+\n+ function createIsPathWhitelisted(\n+ key: string | null,\n+ secondaryCategory: 'hooks' | null\n+ ) {\n+ \/\/ This function helps prevent previously-inspected paths from being dehydrated in updates.\n+ \/\/ This is important to avoid a bad user experience where expanded toggles collapse on update.\n+ return function isPathWhitelisted(path: Array<string | number>): boolean {\n+ switch (secondaryCategory) {\n+ case 'hooks':\n+ if (path.length === 1) {\n+ \/\/ Never dehydrate the \"hooks\" object at the top levels.\n+ return true;\n+ }\n+ if (\n+ path[path.length - 1] === 'subHooks' ||\n+ path[path.length - 2] === 'subHooks'\n+ ) {\n+ \/\/ Dehydrating the 'subHooks' property makes the HooksTree UI a lot more complicated,\n+ \/\/ so it's easiest for now if we just don't break on this boundary.\n+ \/\/ We can always dehydrate a level deeper (in the value object).\n+ return true;\n+ }\n+ break;\n+ default:\n+ break;\n+ }\n+\n+ let current =\n+ key === null ? currentlyInspectedPaths : currentlyInspectedPaths[key];\n+ if (!current) {\n+ return false;\n+ }\n+ for (let i = 0; i < path.length; i++) {\n+ current = current[path[i]];\n+ if (!current) {\n+ return false;\n+ }\n+ }\n+ return true;\n+ };\n+ }\n+\n+ function updateSelectedElement(inspectedElement: InspectedElement): void {\n+ const { hooks, id, props } = inspectedElement;\n+\n+ let fiber = idToFiberMap.get(id);\n+ if (fiber == null) {\n+ console.warn(`Could not find Fiber with id \"${id}\"`);\n+ return;\n+ }\n+\n+ const { elementType, stateNode, tag, type } = fiber;\n+\n+ switch (tag) {\n+ case ClassComponent:\n+ case IncompleteClassComponent:\n+ case IndeterminateComponent:\n+ global.$r = stateNode;\n+ break;\n+ case FunctionComponent:\n+ global.$r = {\n+ hooks,\n+ props,\n+ type,\n+ };\n+ break;\n+ case ForwardRef:\n+ global.$r = {\n+ props,\n+ type: type.render,\n+ };\n+ break;\n+ case MemoComponent:\n+ case SimpleMemoComponent:\n+ global.$r = {\n+ props,\n+ type:\n+ elementType != null && elementType.type != null\n+ ? elementType.type\n+ : type,\n+ };\n+ break;\n+ default:\n+ global.$r = null;\n+ break;\n+ }\n+ }\n+\n+ function inspectElement(\n+ id: number,\n+ path?: Array<string | number>\n+ ): InspectedElementPayload {\n+ const isCurrent = isMostRecentlyInspectedElementCurrent(id);\n+\n+ if (isCurrent) {\n+ if (path != null) {\n+ mergeInspectedPaths(path);\n+\n+ let secondaryCategory = null;\n+ if (path[0] === 'hooks') {\n+ secondaryCategory = 'hooks';\n+ }\n+\n+ \/\/ If this element has not been updated since it was last inspected,\n+ \/\/ we can just return the subset of data in the newly-inspected path.\n+ return {\n+ id,\n+ type: 'hydrated-path',\n+ path,\n+ value: cleanForBridge(\n+ getInObject(\n+ ((mostRecentlyInspectedElement: any): InspectedElement),\n+ path\n+ ),\n+ createIsPathWhitelisted(null, secondaryCategory),\n+ path\n+ ),\n+ };\n+ } else {\n+ \/\/ If this element has not been updated since it was last inspected, we don't need to re-run it.\n+ \/\/ Instead we can just return the ID to indicate that it has not changed.\n+ return {\n+ id,\n+ type: 'no-change',\n+ };\n+ }\n+ } else {\n+ hasElementUpdatedSinceLastInspected = false;\n+\n+ if (\n+ mostRecentlyInspectedElement === null ||\n+ mostRecentlyInspectedElement.id !== id\n+ ) {\n+ currentlyInspectedPaths = {};\n+ }\n+\n+ mostRecentlyInspectedElement = inspectElementRaw(id);\n+ if (mostRecentlyInspectedElement === null) {\n+ return {\n+ id,\n+ type: 'not-found',\n+ };\n+ }\n+\n+ if (path != null) {\n+ mergeInspectedPaths(path);\n+ }\n+\n+ \/\/ Any time an inspected element has an update,\n+ \/\/ we should update the selected $r value as wel.\n+ \/\/ Do this before dehyration (cleanForBridge).\n+ updateSelectedElement(mostRecentlyInspectedElement);\n+\n+ \/\/ Clone before cleaning so that we preserve the full data.\n+ \/\/ This will enable us to send patches without re-inspecting if hydrated paths are requested.\n+ \/\/ (Reducing how often we shallow-render is a better DX for function components that use hooks.)\n+ const cleanedInspectedElement = { ...mostRecentlyInspectedElement };\n+ cleanedInspectedElement.context = cleanForBridge(\n+ cleanedInspectedElement.context,\n+ createIsPathWhitelisted('context', null)\n+ );\n+ cleanedInspectedElement.hooks = cleanForBridge(\n+ cleanedInspectedElement.hooks,\n+ createIsPathWhitelisted('hooks', 'hooks')\n+ );\n+ cleanedInspectedElement.props = cleanForBridge(\n+ cleanedInspectedElement.props,\n+ createIsPathWhitelisted('props', null)\n+ );\n+ cleanedInspectedElement.state = cleanForBridge(\n+ cleanedInspectedElement.state,\n+ createIsPathWhitelisted('state', null)\n+ );\n+\n+ return {\n+ id,\n+ type: 'full-data',\n+ value: cleanedInspectedElement,\n+ };\n+ }\n+ }\n+\n+ function logElementToConsole(id) {\n+ const result = isMostRecentlyInspectedElementCurrent(id)\n+ ? mostRecentlyInspectedElement\n+ : inspectElementRaw(id);\n+ if (result === null) {\n+ console.warn(`Could not find Fiber with id \"${id}\"`);\n+ return;\n+ }\n+\n+ const supportsGroup = typeof console.groupCollapsed === 'function';\n+ if (supportsGroup) {\n+ console.groupCollapsed(\n+ `[Click to expand] %c<${result.displayName || 'Component'} \/>`,\n+ \/\/ --dom-tag-name-color is the CSS variable Chrome styles HTML elements with in the console.\n+ 'color: var(--dom-tag-name-color); font-weight: normal;'\n+ );\n+ }\n+ if (result.props !== null) {\n+ console.log('Props:', result.props);\n+ }\n+ if (result.state !== null) {\n+ console.log('State:', result.state);\n+ }\n+ if (result.hooks !== null) {\n+ console.log('Hooks:', result.hooks);\n+ }\n+ const nativeNodes = findNativeNodesForFiberID(id);\n+ if (nativeNodes !== null) {\n+ console.log('Nodes:', nativeNodes);\n+ }\n+ if (result.source !== null) {\n+ console.log('Location:', result.source);\n+ }\n+ if (window.chrome || \/firefox\/i.test(navigator.userAgent)) {\n+ console.log(\n+ 'Right-click any value to save it as a global variable for further inspection.'\n+ );\n+ }\n+ if (supportsGroup) {\n+ console.groupEnd();\n+ }\n+ }\n+\n+ function setInHook(\n+ id: number,\n+ index: number,\n+ path: Array<string | number>,\n+ value: any\n+ ) {\n+ const fiber = findCurrentFiberUsingSlowPathById(id);\n+ if (fiber !== null) {\n+ if (typeof overrideHookState === 'function') {\n+ overrideHookState(fiber, index, path, value);\n+ }\n+ }\n+ }\n+\n+ function setInProps(id: number, path: Array<string | number>, value: any) {\n+ const fiber = findCurrentFiberUsingSlowPathById(id);\n+ if (fiber !== null) {\n+ const instance = fiber.stateNode;\n+ if (instance === null) {\n+ if (typeof overrideProps === 'function') {\n+ overrideProps(fiber, path, value);\n+ }\n+ } else {\n+ fiber.pendingProps = copyWithSet(instance.props, path, value);\n+ instance.forceUpdate();\n+ }\n+ }\n+ }\n+\n+ function setInState(id: number, path: Array<string | number>, value: any) {\n+ const fiber = findCurrentFiberUsingSlowPathById(id);\n+ if (fiber !== null) {\n+ const instance = fiber.stateNode;\n+ setInObject(instance.state, path, value);\n+ instance.forceUpdate();\n+ }\n+ }\n+\n+ function setInContext(id: number, path: Array<string | number>, value: any) {\n+ \/\/ To simplify hydration and display of primative context values (e.g. number, string)\n+ \/\/ the inspectElement() method wraps context in a {value: ...} object.\n+ \/\/ We need to remove the first part of the path (the \"value\") before continuing.\n+ path = path.slice(1);\n+\n+ const fiber = findCurrentFiberUsingSlowPathById(id);\n+ if (fiber !== null) {\n+ const instance = fiber.stateNode;\n+ if (path.length === 0) {\n+ \/\/ Simple context value\n+ instance.context = value;\n+ } else {\n+ setInObject(instance.context, path, value);\n+ }\n+ instance.forceUpdate();\n+ }\n+ }\n+\n+ type CommitProfilingData = {|\n+ changeDescriptions: Map<number, ChangeDescription> | null,\n+ commitTime: number,\n+ durations: Array<number>,\n+ interactions: Array<Interaction>,\n+ maxActualDuration: number,\n+ priorityLevel: string | null,\n+ |};\n+\n+ type CommitProfilingMetadataMap = Map<number, Array<CommitProfilingData>>;\n+ type DisplayNamesByRootID = Map<number, string>;\n+\n+ let currentCommitProfilingMetadata: CommitProfilingData | null = null;\n+ let displayNamesByRootID: DisplayNamesByRootID | null = null;\n+ let idToContextsMap: Map<number, any> | null = null;\n+ let initialTreeBaseDurationsMap: Map<number, number> | null = null;\n+ let initialIDToRootMap: Map<number, number> | null = null;\n+ let isProfiling: boolean = false;\n+ let profilingStartTime: number = 0;\n+ let recordChangeDescriptions: boolean = false;\n+ let rootToCommitProfilingMetadataMap: CommitProfilingMetadataMap | null = null;\n+\n+ function getProfilingData(): ProfilingDataBackend {\n+ const dataForRoots: Array<ProfilingDataForRootBackend> = [];\n+\n+ if (rootToCommitProfilingMetadataMap === null) {\n+ throw Error(\n+ 'getProfilingData() called before any profiling data was recorded'\n+ );\n+ }\n+\n+ rootToCommitProfilingMetadataMap.forEach(\n+ (commitProfilingMetadata, rootID) => {\n+ const commitData: Array<CommitDataBackend> = [];\n+ const initialTreeBaseDurations: Array<[number, number]> = [];\n+ const allInteractions: Map<number, Interaction> = new Map();\n+ const interactionCommits: Map<number, Array<number>> = new Map();\n+\n+ const displayName =\n+ (displayNamesByRootID !== null && displayNamesByRootID.get(rootID)) ||\n+ 'Unknown';\n+\n+ if (initialTreeBaseDurationsMap != null) {\n+ initialTreeBaseDurationsMap.forEach((treeBaseDuration, id) => {\n+ if (\n+ initialIDToRootMap != null &&\n+ initialIDToRootMap.get(id) === rootID\n+ ) {\n+ \/\/ We don't need to convert milliseconds to microseconds in this case,\n+ \/\/ because the profiling summary is JSON serialized.\n+ initialTreeBaseDurations.push([id, treeBaseDuration]);\n+ }\n+ });\n+ }\n+\n+ commitProfilingMetadata.forEach((commitProfilingData, commitIndex) => {\n+ const {\n+ changeDescriptions,\n+ durations,\n+ interactions,\n+ maxActualDuration,\n+ priorityLevel,\n+ commitTime,\n+ } = commitProfilingData;\n+\n+ const interactionIDs: Array<number> = [];\n+\n+ interactions.forEach(interaction => {\n+ if (!allInteractions.has(interaction.id)) {\n+ allInteractions.set(interaction.id, interaction);\n+ }\n+\n+ interactionIDs.push(interaction.id);\n+\n+ const commitIndices = interactionCommits.get(interaction.id);\n+ if (commitIndices != null) {\n+ commitIndices.push(commitIndex);\n+ } else {\n+ interactionCommits.set(interaction.id, [commitIndex]);\n+ }\n+ });\n+\n+ const fiberActualDurations: Array<[number, number]> = [];\n+ const fiberSelfDurations: Array<[number, number]> = [];\n+ for (let i = 0; i < durations.length; i += 3) {\n+ const fiberID = durations[i];\n+ fiberActualDurations.push([fiberID, durations[i + 1]]);\n+ fiberSelfDurations.push([fiberID, durations[i + 2]]);\n+ }\n+\n+ commitData.push({\n+ changeDescriptions:\n+ changeDescriptions !== null\n+ ? Array.from(changeDescriptions.entries())\n+ : null,\n+ duration: maxActualDuration,\n+ fiberActualDurations,\n+ fiberSelfDurations,\n+ interactionIDs,\n+ priorityLevel,\n+ timestamp: commitTime,\n+ });\n+ });\n+\n+ dataForRoots.push({\n+ commitData,\n+ displayName,\n+ initialTreeBaseDurations,\n+ interactionCommits: Array.from(interactionCommits.entries()),\n+ interactions: Array.from(allInteractions.entries()),\n+ rootID,\n+ });\n+ }\n+ );\n+\n+ return {\n+ dataForRoots,\n+ rendererID,\n+ };\n+ }\n+\n+ function startProfiling(shouldRecordChangeDescriptions: boolean) {\n+ if (isProfiling) {\n+ return;\n+ }\n+\n+ recordChangeDescriptions = shouldRecordChangeDescriptions;\n+\n+ \/\/ Capture initial values as of the time profiling starts.\n+ \/\/ It's important we snapshot both the durations and the id-to-root map,\n+ \/\/ since either of these may change during the profiling session\n+ \/\/ (e.g. when a fiber is re-rendered or when a fiber gets removed).\n+ displayNamesByRootID = new Map();\n+ initialTreeBaseDurationsMap = new Map(idToTreeBaseDurationMap);\n+ initialIDToRootMap = new Map(idToRootMap);\n+ idToContextsMap = new Map();\n+\n+ hook.getFiberRoots(rendererID).forEach(root => {\n+ const rootID = getFiberID(getPrimaryFiber(root.current));\n+ ((displayNamesByRootID: any): DisplayNamesByRootID).set(\n+ rootID,\n+ getDisplayNameForRoot(root.current)\n+ );\n+\n+ if (shouldRecordChangeDescriptions) {\n+ \/\/ Record all contexts at the time profiling is started.\n+ \/\/ Fibers only store the current context value,\n+ \/\/ so we need to track them separatenly in order to determine changed keys.\n+ crawlToInitializeContextsMap(root.current);\n+ }\n+ });\n+\n+ isProfiling = true;\n+ profilingStartTime = getCurrentTime();\n+ rootToCommitProfilingMetadataMap = new Map();\n+ }\n+\n+ function stopProfiling() {\n+ isProfiling = false;\n+ recordChangeDescriptions = false;\n+ }\n+\n+ \/\/ Automatically start profiling so that we don't miss timing info from initial \"mount\".\n+ if (\n+ sessionStorageGetItem(SESSION_STORAGE_RELOAD_AND_PROFILE_KEY) === 'true'\n+ ) {\n+ startProfiling(\n+ sessionStorageGetItem(SESSION_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY) ===\n+ 'true'\n+ );\n+ }\n+\n+ \/\/ React will switch between these implementations depending on whether\n+ \/\/ we have any manually suspended Fibers or not.\n+\n+ function shouldSuspendFiberAlwaysFalse() {\n+ return false;\n+ }\n+\n+ let forceFallbackForSuspenseIDs = new Set();\n+ function shouldSuspendFiberAccordingToSet(fiber) {\n+ const id = getFiberID(getPrimaryFiber(((fiber: any): Fiber)));\n+ return forceFallbackForSuspenseIDs.has(id);\n+ }\n+\n+ function overrideSuspense(id, forceFallback) {\n+ if (\n+ typeof setSuspenseHandler !== 'function' ||\n+ typeof scheduleUpdate !== 'function'\n+ ) {\n+ throw new Error(\n+ 'Expected overrideSuspense() to not get called for earlier React versions.'\n+ );\n+ }\n+ if (forceFallback) {\n+ forceFallbackForSuspenseIDs.add(id);\n+ if (forceFallbackForSuspenseIDs.size === 1) {\n+ \/\/ First override is added. Switch React to slower path.\n+ setSuspenseHandler(shouldSuspendFiberAccordingToSet);\n+ }\n+ } else {\n+ forceFallbackForSuspenseIDs.delete(id);\n+ if (forceFallbackForSuspenseIDs.size === 0) {\n+ \/\/ Last override is gone. Switch React back to fast path.\n+ setSuspenseHandler(shouldSuspendFiberAlwaysFalse);\n+ }\n+ }\n+ const fiber = idToFiberMap.get(id);\n+ scheduleUpdate(fiber);\n+ }\n+\n+ \/\/ Remember if we're trying to restore the selection after reload.\n+ \/\/ In that case, we'll do some extra checks for matching mounts.\n+ let trackedPath: Array<PathFrame> | null = null;\n+ let trackedPathMatchFiber: Fiber | null = null;\n+ let trackedPathMatchDepth = -1;\n+ let mightBeOnTrackedPath = false;\n+\n+ function setTrackedPath(path: Array<PathFrame> | null) {\n+ if (path === null) {\n+ trackedPathMatchFiber = null;\n+ trackedPathMatchDepth = -1;\n+ mightBeOnTrackedPath = false;\n+ }\n+ trackedPath = path;\n+ }\n+\n+ \/\/ We call this before traversing a new mount.\n+ \/\/ It remembers whether this Fiber is the next best match for tracked path.\n+ \/\/ The return value signals whether we should keep matching siblings or not.\n+ function updateTrackedPathStateBeforeMount(fiber: Fiber): boolean {\n+ if (trackedPath === null || !mightBeOnTrackedPath) {\n+ \/\/ Fast path: there's nothing to track so do nothing and ignore siblings.\n+ return false;\n+ }\n+ const returnFiber = fiber.return;\n+ const returnAlternate = returnFiber !== null ? returnFiber.alternate : null;\n+ \/\/ By now we know there's some selection to restore, and this is a new Fiber.\n+ \/\/ Is this newly mounted Fiber a direct child of the current best match?\n+ \/\/ (This will also be true for new roots if we haven't matched anything yet.)\n+ if (\n+ trackedPathMatchFiber === returnFiber ||\n+ (trackedPathMatchFiber === returnAlternate && returnAlternate !== null)\n+ ) {\n+ \/\/ Is this the next Fiber we should select? Let's compare the frames.\n+ const actualFrame = getPathFrame(fiber);\n+ const expectedFrame = trackedPath[trackedPathMatchDepth + 1];\n+ if (expectedFrame === undefined) {\n+ throw new Error('Expected to see a frame at the next depth.');\n+ }\n+ if (\n+ actualFrame.index === expectedFrame.index &&\n+ actualFrame.key === expectedFrame.key &&\n+ actualFrame.displayName === expectedFrame.displayName\n+ ) {\n+ \/\/ We have our next match.\n+ trackedPathMatchFiber = fiber;\n+ trackedPathMatchDepth++;\n+ \/\/ Are we out of frames to match?\n+ if (trackedPathMatchDepth === trackedPath.length - 1) {\n+ \/\/ There's nothing that can possibly match afterwards.\n+ \/\/ Don't check the children.\n+ mightBeOnTrackedPath = false;\n+ } else {\n+ \/\/ Check the children, as they might reveal the next match.\n+ mightBeOnTrackedPath = true;\n+ }\n+ \/\/ In either case, since we have a match, we don't need\n+ \/\/ to check the siblings. They'll never match.\n+ return false;\n+ }\n+ }\n+ \/\/ This Fiber's parent is on the path, but this Fiber itself isn't.\n+ \/\/ There's no need to check its children--they won't be on the path either.\n+ mightBeOnTrackedPath = false;\n+ \/\/ However, one of its siblings may be on the path so keep searching.\n+ return true;\n+ }\n+\n+ function updateTrackedPathStateAfterMount(mightSiblingsBeOnTrackedPath) {\n+ \/\/ updateTrackedPathStateBeforeMount() told us whether to match siblings.\n+ \/\/ Now that we're entering siblings, let's use that information.\n+ mightBeOnTrackedPath = mightSiblingsBeOnTrackedPath;\n+ }\n+\n+ \/\/ Roots don't have a real persistent identity.\n+ \/\/ A root's \"pseudo key\" is \"childDisplayName:indexWithThatName\".\n+ \/\/ For example, \"App:0\" or, in case of similar roots, \"Story:0\", \"Story:1\", etc.\n+ \/\/ We will use this to try to disambiguate roots when restoring selection between reloads.\n+ const rootPseudoKeys: Map<number, string> = new Map();\n+ const rootDisplayNameCounter: Map<string, number> = new Map();\n+\n+ function setRootPseudoKey(id: number, fiber: Fiber) {\n+ const name = getDisplayNameForRoot(fiber);\n+ const counter = rootDisplayNameCounter.get(name) || 0;\n+ rootDisplayNameCounter.set(name, counter + 1);\n+ const pseudoKey = `${name}:${counter}`;\n+ rootPseudoKeys.set(id, pseudoKey);\n+ }\n+\n+ function removeRootPseudoKey(id: number) {\n+ const pseudoKey = rootPseudoKeys.get(id);\n+ if (pseudoKey === undefined) {\n+ throw new Error('Expected root pseudo key to be known.');\n+ }\n+ const name = pseudoKey.substring(0, pseudoKey.lastIndexOf(':'));\n+ const counter = rootDisplayNameCounter.get(name);\n+ if (counter === undefined) {\n+ throw new Error('Expected counter to be known.');\n+ }\n+ if (counter > 1) {\n+ rootDisplayNameCounter.set(name, counter - 1);\n+ } else {\n+ rootDisplayNameCounter.delete(name);\n+ }\n+ rootPseudoKeys.delete(id);\n+ }\n+\n+ function getDisplayNameForRoot(fiber: Fiber): string {\n+ let preferredDisplayName = null;\n+ let fallbackDisplayName = null;\n+ let child = fiber.child;\n+ \/\/ Go at most three levels deep into direct children\n+ \/\/ while searching for a child that has a displayName.\n+ for (let i = 0; i < 3; i++) {\n+ if (child === null) {\n+ break;\n+ }\n+ const displayName = getDisplayNameForFiber(child);\n+ if (displayName !== null) {\n+ \/\/ Prefer display names that we get from user-defined components.\n+ \/\/ We want to avoid using e.g. 'Suspense' unless we find nothing else.\n+ if (typeof child.type === 'function') {\n+ \/\/ There's a few user-defined tags, but we'll prefer the ones\n+ \/\/ that are usually explicitly named (function or class components).\n+ preferredDisplayName = displayName;\n+ } else if (fallbackDisplayName === null) {\n+ fallbackDisplayName = displayName;\n+ }\n+ }\n+ if (preferredDisplayName !== null) {\n+ break;\n+ }\n+ child = child.child;\n+ }\n+ return preferredDisplayName || fallbackDisplayName || 'Anonymous';\n+ }\n+\n+ function getPathFrame(fiber: Fiber): PathFrame {\n+ const { key } = fiber;\n+ let displayName = getDisplayNameForFiber(fiber);\n+ const index = fiber.index;\n+ switch (fiber.tag) {\n+ case HostRoot:\n+ \/\/ Roots don't have a real displayName, index, or key.\n+ \/\/ Instead, we'll use the pseudo key (childDisplayName:indexWithThatName).\n+ const id = getFiberID(getPrimaryFiber(fiber));\n+ const pseudoKey = rootPseudoKeys.get(id);\n+ if (pseudoKey === undefined) {\n+ throw new Error('Expected mounted root to have known pseudo key.');\n+ }\n+ displayName = pseudoKey;\n+ break;\n+ case HostComponent:\n+ displayName = fiber.type;\n+ break;\n+ default:\n+ break;\n+ }\n+ return {\n+ displayName,\n+ key,\n+ index,\n+ };\n+ }\n+\n+ \/\/ Produces a serializable representation that does a best effort\n+ \/\/ of identifying a particular Fiber between page reloads.\n+ \/\/ The return path will contain Fibers that are \"invisible\" to the store\n+ \/\/ because their keys and indexes are important to restoring the selection.\n+ function getPathForElement(id: number): Array<PathFrame> | null {\n+ let fiber = idToFiberMap.get(id);\n+ if (fiber == null) {\n+ return null;\n+ }\n+ const keyPath = [];\n+ while (fiber !== null) {\n+ keyPath.push(getPathFrame(fiber));\n+ fiber = fiber.return;\n+ }\n+ keyPath.reverse();\n+ return keyPath;\n+ }\n+\n+ function getBestMatchForTrackedPath(): PathMatch | null {\n+ if (trackedPath === null) {\n+ \/\/ Nothing to match.\n+ return null;\n+ }\n+ if (trackedPathMatchFiber === null) {\n+ \/\/ We didn't find anything.\n+ return null;\n+ }\n+ \/\/ Find the closest Fiber store is aware of.\n+ let fiber = trackedPathMatchFiber;\n+ while (fiber !== null && shouldFilterFiber(fiber)) {\n+ fiber = fiber.return;\n+ }\n+ if (fiber === null) {\n+ return null;\n+ }\n+ return {\n+ id: getFiberID(getPrimaryFiber(fiber)),\n+ isFullMatch: trackedPathMatchDepth === trackedPath.length - 1,\n+ };\n+ }\n+\n+ const formatPriorityLevel = (priorityLevel: ?number) => {\n+ if (priorityLevel == null) {\n+ return 'Unknown';\n+ }\n+\n+ switch (priorityLevel) {\n+ case ImmediatePriority:\n+ return 'Immediate';\n+ case UserBlockingPriority:\n+ return 'User-Blocking';\n+ case NormalPriority:\n+ return 'Normal';\n+ case LowPriority:\n+ return 'Low';\n+ case IdlePriority:\n+ return 'Idle';\n+ case NoPriority:\n+ default:\n+ return 'Unknown';\n+ }\n+ };\n+\n+ return {\n+ cleanup,\n+ findNativeNodesForFiberID,\n+ flushInitialOperations,\n+ getBestMatchForTrackedPath,\n+ getFiberIDForNative,\n+ getInstanceAndStyle,\n+ getOwnersList,\n+ getPathForElement,\n+ getProfilingData,\n+ handleCommitFiberRoot,\n+ handleCommitFiberUnmount,\n+ inspectElement,\n+ logElementToConsole,\n+ prepareViewElementSource,\n+ overrideSuspense,\n+ renderer,\n+ setInContext,\n+ setInHook,\n+ setInProps,\n+ setInState,\n+ setTrackedPath,\n+ startProfiling,\n+ stopProfiling,\n+ updateComponentFilters,\n+ };\n+}\ndiff --git a\/src\/backend\/types.js b\/src\/backend\/types.js\nnew file mode 100644\nindex 0000000000..75cd1e11f5\n--- \/dev\/null\n+++ b\/src\/backend\/types.js\n@@ -0,0 +1,377 @@\n+\/\/ @flow\n+\n+import type { ComponentFilter, ElementType } from 'src\/types';\n+import type { Interaction } from 'src\/devtools\/views\/Profiler\/types';\n+import type { ResolveNativeStyle } from 'src\/backend\/NativeStyleEditor\/setupNativeStyleEditor';\n+\n+type BundleType =\n+ | 0 \/\/ PROD\n+ | 1; \/\/ DEV\n+\n+export type WorkTag = number;\n+export type SideEffectTag = number;\n+export type ExpirationTime = number;\n+export type RefObject = {|\n+ current: any,\n+|};\n+export type Source = {|\n+ fileName: string,\n+ lineNumber: number,\n+|};\n+export type HookType =\n+ | 'useState'\n+ | 'useReducer'\n+ | 'useContext'\n+ | 'useRef'\n+ | 'useEffect'\n+ | 'useLayoutEffect'\n+ | 'useCallback'\n+ | 'useMemo'\n+ | 'useImperativeHandle'\n+ | 'useDebugValue';\n+\n+\/\/ The Fiber type is copied from React and should be kept in sync:\n+\/\/ https:\/\/github.com\/facebook\/react\/blob\/master\/packages\/react-reconciler\/src\/ReactFiber.js\n+\/\/ The properties we don't use in DevTools are omitted.\n+export type Fiber = {|\n+ tag: WorkTag,\n+\n+ key: null | string,\n+\n+ elementType: any,\n+\n+ type: any,\n+\n+ stateNode: any,\n+\n+ return: Fiber | null,\n+\n+ child: Fiber | null,\n+ sibling: Fiber | null,\n+ index: number,\n+\n+ ref: null | (((handle: mixed) => void) & { _stringRef: ?string }) | RefObject,\n+\n+ pendingProps: any, \/\/ This type will be more specific once we overload the tag.\n+ memoizedProps: any, \/\/ The props used to create the output.\n+\n+ memoizedState: any,\n+\n+ effectTag: SideEffectTag,\n+\n+ alternate: Fiber | null,\n+\n+ actualDuration?: number,\n+\n+ actualStartTime?: number,\n+\n+ treeBaseDuration?: number,\n+\n+ _debugSource?: Source | null,\n+ _debugOwner?: Fiber | null,\n+|};\n+\n+\/\/ TODO: If it's useful for the frontend to know which types of data an Element has\n+\/\/ (e.g. props, state, context, hooks) then we could add a bitmask field for this\n+\/\/ to keep the number of attributes small.\n+export type FiberData = {|\n+ key: string | null,\n+ displayName: string | null,\n+ type: ElementType,\n+|};\n+\n+export type NativeType = Object;\n+export type RendererID = number;\n+\n+type Dispatcher = any;\n+\n+export type GetFiberIDForNative = (\n+ component: NativeType,\n+ findNearestUnfilteredAncestor?: boolean\n+) => number | null;\n+export type FindNativeNodesForFiberID = (id: number) => ?Array<NativeType>;\n+\n+export type ReactProviderType<T> = {\n+ $$typeof: Symbol | number,\n+ _context: ReactContext<T>,\n+};\n+\n+export type ReactContext<T> = {\n+ $$typeof: Symbol | number,\n+ Consumer: ReactContext<T>,\n+ Provider: ReactProviderType<T>,\n+\n+ _calculateChangedBits: ((a: T, b: T) => number) | null,\n+\n+ _currentValue: T,\n+ _currentValue2: T,\n+ _threadCount: number,\n+\n+ \/\/ DEV only\n+ _currentRenderer?: Object | null,\n+ _currentRenderer2?: Object | null,\n+};\n+\n+export type ReactRenderer = {\n+ findFiberByHostInstance: (hostInstance: NativeType) => ?Fiber,\n+ version: string,\n+ bundleType: BundleType,\n+\n+ \/\/ 16.9+\n+ overrideHookState?: ?(\n+ fiber: Object,\n+ id: number,\n+ path: Array<string | number>,\n+ value: any\n+ ) => void,\n+\n+ \/\/ 16.7+\n+ overrideProps?: ?(\n+ fiber: Object,\n+ path: Array<string | number>,\n+ value: any\n+ ) => void,\n+\n+ \/\/ 16.9+\n+ scheduleUpdate?: ?(fiber: Object) => void,\n+ setSuspenseHandler?: ?(shouldSuspend: (fiber: Object) => boolean) => void,\n+\n+ \/\/ Only injected by React v16.8+ in order to support hooks inspection.\n+ currentDispatcherRef?: {| current: null | Dispatcher |},\n+\n+ \/\/ Only injected by React v16.9+ in DEV mode.\n+ \/\/ Enables DevTools to append owners-only component stack to error messages.\n+ getCurrentFiber?: () => Fiber | null,\n+\n+ \/\/ <= 15\n+ Mount?: any,\n+};\n+\n+export type ChangeDescription = {|\n+ context: Array<string> | boolean | null,\n+ didHooksChange: boolean,\n+ isFirstMount: boolean,\n+ props: Array<string> | null,\n+ state: Array<string> | null,\n+|};\n+\n+export type CommitDataBackend = {|\n+ \/\/ Tuple of fiber ID and change description\n+ changeDescriptions: Array<[number, ChangeDescription]> | null,\n+ duration: number,\n+ \/\/ Tuple of fiber ID and actual duration\n+ fiberActualDurations: Array<[number, number]>,\n+ \/\/ Tuple of fiber ID and computed \"self\" duration\n+ fiberSelfDurations: Array<[number, number]>,\n+ interactionIDs: Array<number>,\n+ priorityLevel: string | null,\n+ timestamp: number,\n+|};\n+\n+export type ProfilingDataForRootBackend = {|\n+ commitData: Array<CommitDataBackend>,\n+ displayName: string,\n+ \/\/ Tuple of Fiber ID and base duration\n+ initialTreeBaseDurations: Array<[number, number]>,\n+ \/\/ Tuple of Interaction ID and commit indices\n+ interactionCommits: Array<[number, Array<number>]>,\n+ interactions: Array<[number, Interaction]>,\n+ rootID: number,\n+|};\n+\n+\/\/ Profiling data collected by the renderer interface.\n+\/\/ This information will be passed to the frontend and combined with info it collects.\n+export type ProfilingDataBackend = {|\n+ dataForRoots: Array<ProfilingDataForRootBackend>,\n+ rendererID: number,\n+|};\n+\n+export type PathFrame = {|\n+ key: string | null,\n+ index: number,\n+ displayName: string | null,\n+|};\n+\n+export type PathMatch = {|\n+ id: number,\n+ isFullMatch: boolean,\n+|};\n+\n+export type Owner = {|\n+ displayName: string | null,\n+ id: number,\n+ type: ElementType,\n+|};\n+\n+export type OwnersList = {|\n+ id: number,\n+ owners: Array<Owner> | null,\n+|};\n+\n+export type InspectedElement = {|\n+ id: number,\n+\n+ displayName: string | null,\n+\n+ \/\/ Does the current renderer support editable hooks?\n+ canEditHooks: boolean,\n+\n+ \/\/ Does the current renderer support editable function props?\n+ canEditFunctionProps: boolean,\n+\n+ \/\/ Is this Suspense, and can its value be overriden now?\n+ canToggleSuspense: boolean,\n+\n+ \/\/ Can view component source location.\n+ canViewSource: boolean,\n+\n+ \/\/ Inspectable properties.\n+ context: Object | null,\n+ hooks: Object | null,\n+ props: Object | null,\n+ state: Object | null,\n+\n+ \/\/ List of owners\n+ owners: Array<Owner> | null,\n+\n+ \/\/ Location of component in source coude.\n+ source: Source | null,\n+\n+ type: ElementType,\n+|};\n+\n+export const InspectElementFullDataType = 'full-data';\n+export const InspectElementNoChangeType = 'no-change';\n+export const InspectElementNotFoundType = 'not-found';\n+export const InspectElementHydratedPathType = 'hydrated-path';\n+\n+type InspectElementFullData = {|\n+ id: number,\n+ type: 'full-data',\n+ value: InspectedElement,\n+|};\n+\n+type InspectElementHydratedPath = {|\n+ id: number,\n+ type: 'hydrated-path',\n+ path: Array<string | number>,\n+ value: any,\n+|};\n+\n+type InspectElementNoChange = {|\n+ id: number,\n+ type: 'no-change',\n+|};\n+\n+type InspectElementNotFound = {|\n+ id: number,\n+ type: 'not-found',\n+|};\n+\n+export type InspectedElementPayload =\n+ | InspectElementFullData\n+ | InspectElementHydratedPath\n+ | InspectElementNoChange\n+ | InspectElementNotFound;\n+\n+export type InstanceAndStyle = {|\n+ instance: Object | null,\n+ style: Object | null,\n+|};\n+\n+export type RendererInterface = {\n+ cleanup: () => void,\n+ findNativeNodesForFiberID: FindNativeNodesForFiberID,\n+ flushInitialOperations: () => void,\n+ getBestMatchForTrackedPath: () => PathMatch | null,\n+ getFiberIDForNative: GetFiberIDForNative,\n+ getInstanceAndStyle(id: number): InstanceAndStyle,\n+ getProfilingData(): ProfilingDataBackend,\n+ getOwnersList: (id: number) => Array<Owner> | null,\n+ getPathForElement: (id: number) => Array<PathFrame> | null,\n+ handleCommitFiberRoot: (fiber: Object, commitPriority?: number) => void,\n+ handleCommitFiberUnmount: (fiber: Object) => void,\n+ inspectElement: (\n+ id: number,\n+ path?: Array<string | number>\n+ ) => InspectedElementPayload,\n+ logElementToConsole: (id: number) => void,\n+ overrideSuspense: (id: number, forceFallback: boolean) => void,\n+ prepareViewElementSource: (id: number) => void,\n+ renderer: ReactRenderer | null,\n+ setInContext: (id: number, path: Array<string | number>, value: any) => void,\n+ setInHook: (\n+ id: number,\n+ index: number,\n+ path: Array<string | number>,\n+ value: any\n+ ) => void,\n+ setInProps: (id: number, path: Array<string | number>, value: any) => void,\n+ setInState: (id: number, path: Array<string | number>, value: any) => void,\n+ setTrackedPath: (path: Array<PathFrame> | null) => void,\n+ startProfiling: (recordChangeDescriptions: boolean) => void,\n+ stopProfiling: () => void,\n+ updateComponentFilters: (somponentFilters: Array<ComponentFilter>) => void,\n+};\n+\n+export type Handler = (data: any) => void;\n+\n+export type DevToolsHook = {\n+ listeners: { [key: string]: Array<Handler> },\n+ rendererInterfaces: Map<RendererID, RendererInterface>,\n+ renderers: Map<RendererID, ReactRenderer>,\n+\n+ emit: (event: string, data: any) => void,\n+ getFiberRoots: (rendererID: RendererID) => Set<Object>,\n+ inject: (renderer: ReactRenderer) => number | null,\n+ on: (event: string, handler: Handler) => void,\n+ off: (event: string, handler: Handler) => void,\n+ reactDevtoolsAgent?: ?Object,\n+ sub: (event: string, handler: Handler) => () => void,\n+\n+ \/\/ Used by react-native-web and Flipper\/Inspector\n+ resolveRNStyle?: ResolveNativeStyle,\n+ nativeStyleEditorValidAttributes?: $ReadOnlyArray<string>,\n+\n+ \/\/ React uses these methods.\n+ checkDCE: (fn: Function) => void,\n+ onCommitFiberUnmount: (rendererID: RendererID, fiber: Object) => void,\n+ onCommitFiberRoot: (\n+ rendererID: RendererID,\n+ fiber: Object,\n+ commitPriority?: number\n+ ) => void,\n+};\n+\n+export type HooksNode = {\n+ id: number,\n+ isStateEditable: boolean,\n+ name: string,\n+ value: mixed,\n+ subHooks: Array<HooksNode>,\n+};\n+export type HooksTree = Array<HooksNode>;\n+\n+export type ReactEventResponder<E, C> = {\n+ $$typeof: Symbol | number,\n+ displayName: string,\n+ targetEventTypes: null | Array<string>,\n+ rootEventTypes: null | Array<string>,\n+ getInitialState: null | ((props: Object) => Object),\n+ onEvent:\n+ | null\n+ | ((event: E, context: C, props: Object, state: Object) => void),\n+ onRootEvent:\n+ | null\n+ | ((event: E, context: C, props: Object, state: Object) => void),\n+ onMount: null | ((context: C, props: Object, state: Object) => void),\n+ onUnmount: null | ((context: C, props: Object, state: Object) => void),\n+ onOwnershipChange:\n+ | null\n+ | ((context: C, props: Object, state: Object) => void),\n+};\n+\n+export type ReactEventResponderListener<E, C> = {|\n+ props: Object,\n+ responder: ReactEventResponder<E, C>,\n+|};\ndiff --git a\/src\/backend\/utils.js b\/src\/backend\/utils.js\nnew file mode 100644\nindex 0000000000..020d841d46\n--- \/dev\/null\n+++ b\/src\/backend\/utils.js\n@@ -0,0 +1,39 @@\n+\/\/ @flow\n+\n+import { dehydrate } from '..\/hydration';\n+\n+import type { DehydratedData } from 'src\/devtools\/views\/Components\/types';\n+\n+export function cleanForBridge(\n+ data: Object | null,\n+ isPathWhitelisted: (path: Array<string | number>) => boolean,\n+ path?: Array<string | number> = []\n+): DehydratedData | null {\n+ if (data !== null) {\n+ const cleaned = [];\n+\n+ return {\n+ data: dehydrate(data, cleaned, path, isPathWhitelisted),\n+ cleaned,\n+ };\n+ } else {\n+ return null;\n+ }\n+}\n+\n+export function copyWithSet(\n+ obj: Object | Array<any>,\n+ path: Array<string | number>,\n+ value: any,\n+ index: number = 0\n+): Object | Array<any> {\n+ console.log('[utils] copyWithSet()', obj, path, index, value);\n+ if (index >= path.length) {\n+ return value;\n+ }\n+ const key = path[index];\n+ const updated = Array.isArray(obj) ? obj.slice() : { ...obj };\n+ \/\/ $FlowFixMe number or string is fine here\n+ updated[key] = copyWithSet(obj[key], path, value, index + 1);\n+ return updated;\n+}\ndiff --git a\/src\/backend\/views\/Highlighter\/Highlighter.js b\/src\/backend\/views\/Highlighter\/Highlighter.js\nnew file mode 100644\nindex 0000000000..1d838f8c12\n--- \/dev\/null\n+++ b\/src\/backend\/views\/Highlighter\/Highlighter.js\n@@ -0,0 +1,46 @@\n+\/\/ @flow\n+\n+import Overlay from '.\/Overlay';\n+\n+const SHOW_DURATION = 2000;\n+\n+let timeoutID: TimeoutID | null = null;\n+let overlay: Overlay | null = null;\n+\n+export function hideOverlay() {\n+ timeoutID = null;\n+\n+ if (overlay !== null) {\n+ overlay.remove();\n+ overlay = null;\n+ }\n+}\n+\n+export function showOverlay(\n+ elements: Array<HTMLElement> | null,\n+ componentName: string | null,\n+ hideAfterTimeout: boolean\n+) {\n+ \/\/ TODO (npm-packages) Detect RN and support it somehow\n+ if (window.document == null) {\n+ return;\n+ }\n+\n+ if (timeoutID !== null) {\n+ clearTimeout(timeoutID);\n+ }\n+\n+ if (elements == null) {\n+ return;\n+ }\n+\n+ if (overlay === null) {\n+ overlay = new Overlay();\n+ }\n+\n+ overlay.inspect(elements, componentName);\n+\n+ if (hideAfterTimeout) {\n+ timeoutID = setTimeout(hideOverlay, SHOW_DURATION);\n+ }\n+}\ndiff --git a\/src\/backend\/views\/Highlighter\/Overlay.js b\/src\/backend\/views\/Highlighter\/Overlay.js\nnew file mode 100644\nindex 0000000000..5e59c2b93f\n--- \/dev\/null\n+++ b\/src\/backend\/views\/Highlighter\/Overlay.js\n@@ -0,0 +1,454 @@\n+\/\/ @flow\n+\n+import assign from 'object-assign';\n+\n+type Rect = {\n+ bottom: number,\n+ height: number,\n+ left: number,\n+ right: number,\n+ top: number,\n+ width: number,\n+};\n+\n+type Box = {| top: number, left: number, width: number, height: number |};\n+\n+\/\/ Note that the Overlay components are not affected by the active Theme,\n+\/\/ because they highlight elements in the main Chrome window (outside of devtools).\n+\/\/ The colors below were chosen to roughly match those used by Chrome devtools.\n+\n+class OverlayRect {\n+ node: HTMLElement;\n+ border: HTMLElement;\n+ padding: HTMLElement;\n+ content: HTMLElement;\n+\n+ constructor(doc: Document, container: HTMLElement) {\n+ this.node = doc.createElement('div');\n+ this.border = doc.createElement('div');\n+ this.padding = doc.createElement('div');\n+ this.content = doc.createElement('div');\n+\n+ this.border.style.borderColor = overlayStyles.border;\n+ this.padding.style.borderColor = overlayStyles.padding;\n+ this.content.style.backgroundColor = overlayStyles.background;\n+\n+ assign(this.node.style, {\n+ borderColor: overlayStyles.margin,\n+ pointerEvents: 'none',\n+ position: 'fixed',\n+ });\n+\n+ this.node.style.zIndex = '10000000';\n+\n+ this.node.appendChild(this.border);\n+ this.border.appendChild(this.padding);\n+ this.padding.appendChild(this.content);\n+ container.appendChild(this.node);\n+ }\n+\n+ remove() {\n+ if (this.node.parentNode) {\n+ this.node.parentNode.removeChild(this.node);\n+ }\n+ }\n+\n+ update(box: Rect, dims: any) {\n+ boxWrap(dims, 'margin', this.node);\n+ boxWrap(dims, 'border', this.border);\n+ boxWrap(dims, 'padding', this.padding);\n+\n+ assign(this.content.style, {\n+ height:\n+ box.height -\n+ dims.borderTop -\n+ dims.borderBottom -\n+ dims.paddingTop -\n+ dims.paddingBottom +\n+ 'px',\n+ width:\n+ box.width -\n+ dims.borderLeft -\n+ dims.borderRight -\n+ dims.paddingLeft -\n+ dims.paddingRight +\n+ 'px',\n+ });\n+\n+ assign(this.node.style, {\n+ top: box.top - dims.marginTop + 'px',\n+ left: box.left - dims.marginLeft + 'px',\n+ });\n+ }\n+}\n+\n+class OverlayTip {\n+ tip: HTMLElement;\n+ nameSpan: HTMLElement;\n+ dimSpan: HTMLElement;\n+\n+ constructor(doc: Document, container: HTMLElement) {\n+ this.tip = doc.createElement('div');\n+ assign(this.tip.style, {\n+ display: 'flex',\n+ flexFlow: 'row nowrap',\n+ backgroundColor: '#333740',\n+ borderRadius: '2px',\n+ fontFamily:\n+ '\"SFMono-Regular\", Consolas, \"Liberation Mono\", Menlo, Courier, monospace',\n+ fontWeight: 'bold',\n+ padding: '3px 5px',\n+ pointerEvents: 'none',\n+ position: 'fixed',\n+ fontSize: '12px',\n+ whiteSpace: 'nowrap',\n+ });\n+\n+ this.nameSpan = doc.createElement('span');\n+ this.tip.appendChild(this.nameSpan);\n+ assign(this.nameSpan.style, {\n+ color: '#ee78e6',\n+ borderRight: '1px solid #aaaaaa',\n+ paddingRight: '0.5rem',\n+ marginRight: '0.5rem',\n+ });\n+ this.dimSpan = doc.createElement('span');\n+ this.tip.appendChild(this.dimSpan);\n+ assign(this.dimSpan.style, {\n+ color: '#d7d7d7',\n+ });\n+\n+ this.tip.style.zIndex = '10000000';\n+ container.appendChild(this.tip);\n+ }\n+\n+ remove() {\n+ if (this.tip.parentNode) {\n+ this.tip.parentNode.removeChild(this.tip);\n+ }\n+ }\n+\n+ updateText(name: string, width: number, height: number) {\n+ this.nameSpan.textContent = name;\n+ this.dimSpan.textContent =\n+ Math.round(width) + 'px × ' + Math.round(height) + 'px';\n+ }\n+\n+ updatePosition(dims: Box, bounds: Box) {\n+ const tipRect = this.tip.getBoundingClientRect();\n+ const tipPos = findTipPos(dims, bounds, {\n+ width: tipRect.width,\n+ height: tipRect.height,\n+ });\n+ assign(this.tip.style, tipPos.style);\n+ }\n+}\n+\n+export default class Overlay {\n+ window: window;\n+ tipBoundsWindow: window;\n+ container: HTMLElement;\n+ tip: OverlayTip;\n+ rects: Array<OverlayRect>;\n+\n+ constructor() {\n+ \/\/ Find the root window, because overlays are positioned relative to it.\n+ let currentWindow = window.__REACT_DEVTOOLS_TARGET_WINDOW__ || window;\n+ this.window = currentWindow;\n+\n+ \/\/ When opened in shells\/dev, the tooltip should be bound by the app iframe, not by the topmost window.\n+ let tipBoundsWindow = window.__REACT_DEVTOOLS_TARGET_WINDOW__ || window;\n+ this.tipBoundsWindow = tipBoundsWindow;\n+\n+ const doc = currentWindow.document;\n+ this.container = doc.createElement('div');\n+ this.container.style.zIndex = '10000000';\n+\n+ this.tip = new OverlayTip(doc, this.container);\n+ this.rects = [];\n+\n+ doc.body.appendChild(this.container);\n+ }\n+\n+ remove() {\n+ this.tip.remove();\n+ this.rects.forEach(rect => {\n+ rect.remove();\n+ });\n+ this.rects.length = 0;\n+ if (this.container.parentNode) {\n+ this.container.parentNode.removeChild(this.container);\n+ }\n+ }\n+\n+ inspect(nodes: Array<HTMLElement>, name?: ?string) {\n+ \/\/ We can't get the size of text nodes or comment nodes. React as of v15\n+ \/\/ heavily uses comment nodes to delimit text.\n+ const elements = nodes.filter(node => node.nodeType === Node.ELEMENT_NODE);\n+\n+ while (this.rects.length > elements.length) {\n+ const rect = this.rects.pop();\n+ rect.remove();\n+ }\n+ if (elements.length === 0) {\n+ return;\n+ }\n+\n+ while (this.rects.length < elements.length) {\n+ this.rects.push(new OverlayRect(this.window.document, this.container));\n+ }\n+\n+ const outerBox = {\n+ top: Number.POSITIVE_INFINITY,\n+ right: Number.NEGATIVE_INFINITY,\n+ bottom: Number.NEGATIVE_INFINITY,\n+ left: Number.POSITIVE_INFINITY,\n+ };\n+ elements.forEach((element, index) => {\n+ const box = getNestedBoundingClientRect(element, this.window);\n+ const dims = getElementDimensions(element);\n+\n+ outerBox.top = Math.min(outerBox.top, box.top - dims.marginTop);\n+ outerBox.right = Math.max(\n+ outerBox.right,\n+ box.left + box.width + dims.marginRight\n+ );\n+ outerBox.bottom = Math.max(\n+ outerBox.bottom,\n+ box.top + box.height + dims.marginBottom\n+ );\n+ outerBox.left = Math.min(outerBox.left, box.left - dims.marginLeft);\n+\n+ const rect = this.rects[index];\n+ rect.update(box, dims);\n+ });\n+\n+ if (!name) {\n+ name = elements[0].nodeName.toLowerCase();\n+ const ownerName = getOwnerDisplayName(elements[0]);\n+ if (ownerName) {\n+ name += ' (in ' + ownerName + ')';\n+ }\n+ }\n+\n+ this.tip.updateText(\n+ name,\n+ outerBox.right - outerBox.left,\n+ outerBox.bottom - outerBox.top\n+ );\n+ const tipBounds = getNestedBoundingClientRect(\n+ this.tipBoundsWindow.document.documentElement,\n+ this.window\n+ );\n+\n+ this.tip.updatePosition(\n+ {\n+ top: outerBox.top,\n+ left: outerBox.left,\n+ height: outerBox.bottom - outerBox.top,\n+ width: outerBox.right - outerBox.left,\n+ },\n+ {\n+ top: tipBounds.top + this.tipBoundsWindow.scrollY,\n+ left: tipBounds.left + this.tipBoundsWindow.scrollX,\n+ height: this.tipBoundsWindow.innerHeight,\n+ width: this.tipBoundsWindow.innerWidth,\n+ }\n+ );\n+ }\n+}\n+\n+function getOwnerDisplayName(node) {\n+ const fiber = getFiber(node);\n+ if (fiber === null) {\n+ return null;\n+ }\n+ const owner = fiber._debugOwner;\n+ if (owner && owner.type) {\n+ const ownerName = owner.type.displayName || owner.type.name;\n+ return ownerName || null;\n+ }\n+ return null;\n+}\n+\n+let lastFoundInternalKey = null;\n+function getFiber(node) {\n+ if (\n+ lastFoundInternalKey !== null &&\n+ node.hasOwnProperty(lastFoundInternalKey)\n+ ) {\n+ return (node: any)[lastFoundInternalKey];\n+ }\n+ let internalKey = Object.keys(node).find(\n+ key => key.indexOf('__reactInternalInstance') === 0\n+ );\n+ if (internalKey) {\n+ lastFoundInternalKey = internalKey;\n+ return (node: any)[lastFoundInternalKey];\n+ }\n+ return null;\n+}\n+\n+function findTipPos(dims, bounds, tipSize) {\n+ const tipHeight = Math.max(tipSize.height, 20);\n+ const tipWidth = Math.max(tipSize.width, 60);\n+ const margin = 5;\n+\n+ let top;\n+ if (dims.top + dims.height + tipHeight <= bounds.top + bounds.height) {\n+ if (dims.top + dims.height < bounds.top + 0) {\n+ top = bounds.top + margin;\n+ } else {\n+ top = dims.top + dims.height + margin;\n+ }\n+ } else if (dims.top - tipHeight <= bounds.top + bounds.height) {\n+ if (dims.top - tipHeight - margin < bounds.top + margin) {\n+ top = bounds.top + margin;\n+ } else {\n+ top = dims.top - tipHeight - margin;\n+ }\n+ } else {\n+ top = bounds.top + bounds.height - tipHeight - margin;\n+ }\n+\n+ let left = dims.left + margin;\n+ if (dims.left < bounds.left) {\n+ left = bounds.left + margin;\n+ }\n+ if (dims.left + tipWidth > bounds.left + bounds.width) {\n+ left = bounds.left + bounds.width - tipWidth - margin;\n+ }\n+\n+ top += 'px';\n+ left += 'px';\n+ return {\n+ style: { top, left },\n+ };\n+}\n+\n+export function getElementDimensions(domElement: Element) {\n+ const calculatedStyle = window.getComputedStyle(domElement);\n+ return {\n+ borderLeft: parseInt(calculatedStyle.borderLeftWidth, 10),\n+ borderRight: parseInt(calculatedStyle.borderRightWidth, 10),\n+ borderTop: parseInt(calculatedStyle.borderTopWidth, 10),\n+ borderBottom: parseInt(calculatedStyle.borderBottomWidth, 10),\n+ marginLeft: parseInt(calculatedStyle.marginLeft, 10),\n+ marginRight: parseInt(calculatedStyle.marginRight, 10),\n+ marginTop: parseInt(calculatedStyle.marginTop, 10),\n+ marginBottom: parseInt(calculatedStyle.marginBottom, 10),\n+ paddingLeft: parseInt(calculatedStyle.paddingLeft, 10),\n+ paddingRight: parseInt(calculatedStyle.paddingRight, 10),\n+ paddingTop: parseInt(calculatedStyle.paddingTop, 10),\n+ paddingBottom: parseInt(calculatedStyle.paddingBottom, 10),\n+ };\n+}\n+\n+\/\/ Get the window object for the document that a node belongs to,\n+\/\/ or return null if it cannot be found (node not attached to DOM,\n+\/\/ etc).\n+function getOwnerWindow(node: HTMLElement): typeof window | null {\n+ if (!node.ownerDocument) {\n+ return null;\n+ }\n+ return node.ownerDocument.defaultView;\n+}\n+\n+\/\/ Get the iframe containing a node, or return null if it cannot\n+\/\/ be found (node not within iframe, etc).\n+function getOwnerIframe(node: HTMLElement): HTMLElement | null {\n+ const nodeWindow = getOwnerWindow(node);\n+ if (nodeWindow) {\n+ return nodeWindow.frameElement;\n+ }\n+ return null;\n+}\n+\n+\/\/ Get a bounding client rect for a node, with an\n+\/\/ offset added to compensate for its border.\n+function getBoundingClientRectWithBorderOffset(node: HTMLElement) {\n+ const dimensions = getElementDimensions(node);\n+ return mergeRectOffsets([\n+ node.getBoundingClientRect(),\n+ {\n+ top: dimensions.borderTop,\n+ left: dimensions.borderLeft,\n+ bottom: dimensions.borderBottom,\n+ right: dimensions.borderRight,\n+ \/\/ This width and height won't get used by mergeRectOffsets (since this\n+ \/\/ is not the first rect in the array), but we set them so that this\n+ \/\/ object typechecks as a ClientRect.\n+ width: 0,\n+ height: 0,\n+ },\n+ ]);\n+}\n+\n+\/\/ Add together the top, left, bottom, and right properties of\n+\/\/ each ClientRect, but keep the width and height of the first one.\n+function mergeRectOffsets(rects: Array<Rect>): Rect {\n+ return rects.reduce((previousRect, rect) => {\n+ if (previousRect == null) {\n+ return rect;\n+ }\n+\n+ return {\n+ top: previousRect.top + rect.top,\n+ left: previousRect.left + rect.left,\n+ width: previousRect.width,\n+ height: previousRect.height,\n+ bottom: previousRect.bottom + rect.bottom,\n+ right: previousRect.right + rect.right,\n+ };\n+ });\n+}\n+\n+\/\/ Calculate a boundingClientRect for a node relative to boundaryWindow,\n+\/\/ taking into account any offsets caused by intermediate iframes.\n+function getNestedBoundingClientRect(\n+ node: HTMLElement,\n+ boundaryWindow: typeof window\n+): Rect {\n+ const ownerIframe = getOwnerIframe(node);\n+ if (ownerIframe && ownerIframe !== boundaryWindow) {\n+ const rects = [node.getBoundingClientRect()];\n+ let currentIframe = ownerIframe;\n+ let onlyOneMore = false;\n+ while (currentIframe) {\n+ const rect = getBoundingClientRectWithBorderOffset(currentIframe);\n+ rects.push(rect);\n+ currentIframe = getOwnerIframe(currentIframe);\n+\n+ if (onlyOneMore) {\n+ break;\n+ }\n+ \/\/ We don't want to calculate iframe offsets upwards beyond\n+ \/\/ the iframe containing the boundaryWindow, but we\n+ \/\/ need to calculate the offset relative to the boundaryWindow.\n+ if (currentIframe && getOwnerWindow(currentIframe) === boundaryWindow) {\n+ onlyOneMore = true;\n+ }\n+ }\n+\n+ return mergeRectOffsets(rects);\n+ } else {\n+ return node.getBoundingClientRect();\n+ }\n+}\n+\n+function boxWrap(dims, what, node) {\n+ assign(node.style, {\n+ borderTopWidth: dims[what + 'Top'] + 'px',\n+ borderLeftWidth: dims[what + 'Left'] + 'px',\n+ borderRightWidth: dims[what + 'Right'] + 'px',\n+ borderBottomWidth: dims[what + 'Bottom'] + 'px',\n+ borderStyle: 'solid',\n+ });\n+}\n+\n+const overlayStyles = {\n+ background: 'rgba(120, 170, 210, 0.7)',\n+ padding: 'rgba(77, 200, 0, 0.3)',\n+ margin: 'rgba(255, 155, 0, 0.3)',\n+ border: 'rgba(255, 200, 50, 0.3)',\n+};\ndiff --git a\/src\/backend\/views\/Highlighter\/index.js b\/src\/backend\/views\/Highlighter\/index.js\nnew file mode 100644\nindex 0000000000..c50ef74c56\n--- \/dev\/null\n+++ b\/src\/backend\/views\/Highlighter\/index.js\n@@ -0,0 +1,187 @@\n+\/\/ @flow\n+\n+import memoize from 'memoize-one';\n+import throttle from 'lodash.throttle';\n+import Agent from 'src\/backend\/agent';\n+import { hideOverlay, showOverlay } from '.\/Highlighter';\n+\n+import type { BackendBridge } from 'src\/bridge';\n+\n+\/\/ This plug-in provides in-page highlighting of the selected element.\n+\/\/ It is used by the browser extension nad the standalone DevTools shell (when connected to a browser).\n+\/\/ It is not currently the mechanism used to highlight React Native views.\n+\/\/ That is done by the React Native Inspector component.\n+\n+let iframesListeningTo: Set<HTMLIFrameElement> = new Set();\n+\n+export default function setupHighlighter(\n+ bridge: BackendBridge,\n+ agent: Agent\n+): void {\n+ bridge.addListener(\n+ 'clearNativeElementHighlight',\n+ clearNativeElementHighlight\n+ );\n+ bridge.addListener('highlightNativeElement', highlightNativeElement);\n+ bridge.addListener('shutdown', stopInspectingNative);\n+ bridge.addListener('startInspectingNative', startInspectingNative);\n+ bridge.addListener('stopInspectingNative', stopInspectingNative);\n+\n+ function startInspectingNative() {\n+ registerListenersOnWindow(window);\n+ }\n+\n+ function registerListenersOnWindow(window) {\n+ \/\/ This plug-in may run in non-DOM environments (e.g. React Native).\n+ if (window && typeof window.addEventListener === 'function') {\n+ window.addEventListener('click', onClick, true);\n+ window.addEventListener('mousedown', onMouseEvent, true);\n+ window.addEventListener('mouseover', onMouseEvent, true);\n+ window.addEventListener('mouseup', onMouseEvent, true);\n+ window.addEventListener('pointerdown', onPointerDown, true);\n+ window.addEventListener('pointerover', onPointerOver, true);\n+ window.addEventListener('pointerup', onPointerUp, true);\n+ }\n+ }\n+\n+ function stopInspectingNative() {\n+ hideOverlay();\n+ removeListenersOnWindow(window);\n+ iframesListeningTo.forEach(function(frame) {\n+ try {\n+ removeListenersOnWindow(frame.contentWindow);\n+ } catch (error) {\n+ \/\/ This can error when the iframe is on a cross-origin.\n+ }\n+ });\n+ iframesListeningTo = new Set();\n+ }\n+\n+ function removeListenersOnWindow(window) {\n+ \/\/ This plug-in may run in non-DOM environments (e.g. React Native).\n+ if (window && typeof window.removeEventListener === 'function') {\n+ window.removeEventListener('click', onClick, true);\n+ window.removeEventListener('mousedown', onMouseEvent, true);\n+ window.removeEventListener('mouseover', onMouseEvent, true);\n+ window.removeEventListener('mouseup', onMouseEvent, true);\n+ window.removeEventListener('pointerdown', onPointerDown, true);\n+ window.removeEventListener('pointerover', onPointerOver, true);\n+ window.removeEventListener('pointerup', onPointerUp, true);\n+ }\n+ }\n+\n+ function clearNativeElementHighlight() {\n+ hideOverlay();\n+ }\n+\n+ function highlightNativeElement({\n+ displayName,\n+ hideAfterTimeout,\n+ id,\n+ openNativeElementsPanel,\n+ rendererID,\n+ scrollIntoView,\n+ }: {\n+ displayName: string | null,\n+ hideAfterTimeout: boolean,\n+ id: number,\n+ openNativeElementsPanel: boolean,\n+ rendererID: number,\n+ scrollIntoView: boolean,\n+ }) {\n+ const renderer = agent.rendererInterfaces[rendererID];\n+ if (renderer == null) {\n+ console.warn(`Invalid renderer id \"${rendererID}\" for element \"${id}\"`);\n+ }\n+\n+ let nodes: ?Array<HTMLElement> = null;\n+ if (renderer !== null) {\n+ nodes = ((renderer.findNativeNodesForFiberID(\n+ id\n+ ): any): ?Array<HTMLElement>);\n+ }\n+\n+ if (nodes != null && nodes[0] != null) {\n+ const node = nodes[0];\n+ if (scrollIntoView && typeof node.scrollIntoView === 'function') {\n+ \/\/ If the node isn't visible show it before highlighting it.\n+ \/\/ We may want to reconsider this; it might be a little disruptive.\n+ node.scrollIntoView({ block: 'nearest', inline: 'nearest' });\n+ }\n+\n+ showOverlay(nodes, displayName, hideAfterTimeout);\n+\n+ if (openNativeElementsPanel) {\n+ window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 = node;\n+ bridge.send('syncSelectionToNativeElementsPanel');\n+ }\n+ } else {\n+ hideOverlay();\n+ }\n+ }\n+\n+ function onClick(event: MouseEvent) {\n+ event.preventDefault();\n+ event.stopPropagation();\n+\n+ stopInspectingNative();\n+\n+ bridge.send('stopInspectingNative', true);\n+ }\n+\n+ function onMouseEvent(event: MouseEvent) {\n+ event.preventDefault();\n+ event.stopPropagation();\n+ }\n+\n+ function onPointerDown(event: MouseEvent) {\n+ event.preventDefault();\n+ event.stopPropagation();\n+\n+ selectFiberForNode(((event.target: any): HTMLElement));\n+ }\n+\n+ function onPointerOver(event: MouseEvent) {\n+ event.preventDefault();\n+ event.stopPropagation();\n+\n+ const target = ((event.target: any): HTMLElement);\n+\n+ if (target.tagName === 'IFRAME') {\n+ const iframe: HTMLIFrameElement = (target: any);\n+ try {\n+ if (!iframesListeningTo.has(iframe)) {\n+ const window = iframe.contentWindow;\n+ registerListenersOnWindow(window);\n+ iframesListeningTo.add(iframe);\n+ }\n+ } catch (error) {\n+ \/\/ This can error when the iframe is on a cross-origin.\n+ }\n+ }\n+\n+ \/\/ Don't pass the name explicitly.\n+ \/\/ It will be inferred from DOM tag and Fiber owner.\n+ showOverlay([target], null, false);\n+\n+ selectFiberForNode(target);\n+ }\n+\n+ function onPointerUp(event: MouseEvent) {\n+ event.preventDefault();\n+ event.stopPropagation();\n+ }\n+\n+ const selectFiberForNode = throttle(\n+ memoize((node: HTMLElement) => {\n+ const id = agent.getIDForNode(node);\n+ if (id !== null) {\n+ bridge.send('selectFiber', id);\n+ }\n+ }),\n+ 200,\n+ \/\/ Don't change the selection in the very first 200ms\n+ \/\/ because those are usually unintentional as you lift the cursor.\n+ { leading: false }\n+ );\n+}\ndiff --git a\/src\/bridge.js b\/src\/bridge.js\nnew file mode 100644\nindex 0000000000..cc110f8e50\n--- \/dev\/null\n+++ b\/src\/bridge.js\n@@ -0,0 +1,237 @@\n+\/\/ @flow\n+\n+import EventEmitter from 'events';\n+\n+import type { ComponentFilter, Wall } from '.\/types';\n+import type {\n+ InspectedElementPayload,\n+ OwnersList,\n+ ProfilingDataBackend,\n+ RendererID,\n+} from 'src\/backend\/types';\n+import type { StyleAndLayout as StyleAndLayoutPayload } from 'src\/backend\/NativeStyleEditor\/types';\n+\n+const BATCH_DURATION = 100;\n+\n+type ElementAndRendererID = {| id: number, rendererID: RendererID |};\n+\n+type Message = {|\n+ event: string,\n+ payload: any,\n+|};\n+\n+type HighlightElementInDOM = {|\n+ ...ElementAndRendererID,\n+ displayName: string | null,\n+ hideAfterTimeout: boolean,\n+ openNativeElementsPanel: boolean,\n+ scrollIntoView: boolean,\n+|};\n+\n+type OverrideValue = {|\n+ ...ElementAndRendererID,\n+ path: Array<string | number>,\n+ value: any,\n+|};\n+\n+type OverrideHookState = {|\n+ ...OverrideValue,\n+ hookID: number,\n+|};\n+\n+type OverrideSuspense = {|\n+ ...ElementAndRendererID,\n+ forceFallback: boolean,\n+|};\n+\n+type InspectElementParams = {|\n+ ...ElementAndRendererID,\n+ path?: Array<string | number>,\n+|};\n+\n+type NativeStyleEditor_RenameAttributeParams = {|\n+ ...ElementAndRendererID,\n+ oldName: string,\n+ newName: string,\n+ value: string,\n+|};\n+\n+type NativeStyleEditor_SetValueParams = {|\n+ ...ElementAndRendererID,\n+ name: string,\n+ value: string,\n+|};\n+\n+type BackendEvents = {|\n+ inspectedElement: [InspectedElementPayload],\n+ isBackendStorageAPISupported: [boolean],\n+ operations: [Array<number>],\n+ ownersList: [OwnersList],\n+ overrideComponentFilters: [Array<ComponentFilter>],\n+ profilingData: [ProfilingDataBackend],\n+ profilingStatus: [boolean],\n+ reloadAppForProfiling: [],\n+ selectFiber: [number],\n+ shutdown: [],\n+ stopInspectingNative: [boolean],\n+ syncSelectionFromNativeElementsPanel: [],\n+ syncSelectionToNativeElementsPanel: [],\n+\n+ \/\/ React Native style editor plug-in.\n+ isNativeStyleEditorSupported: [\n+ {| isSupported: boolean, validAttributes: ?$ReadOnlyArray<string> |},\n+ ],\n+ NativeStyleEditor_styleAndLayout: [StyleAndLayoutPayload],\n+|};\n+\n+type FrontendEvents = {|\n+ clearNativeElementHighlight: [],\n+ getOwnersList: [ElementAndRendererID],\n+ getProfilingData: [{| rendererID: RendererID |}],\n+ getProfilingStatus: [],\n+ highlightNativeElement: [HighlightElementInDOM],\n+ inspectElement: [InspectElementParams],\n+ logElementToConsole: [ElementAndRendererID],\n+ overrideContext: [OverrideValue],\n+ overrideHookState: [OverrideHookState],\n+ overrideProps: [OverrideValue],\n+ overrideState: [OverrideValue],\n+ overrideSuspense: [OverrideSuspense],\n+ profilingData: [ProfilingDataBackend],\n+ reloadAndProfile: [boolean],\n+ selectFiber: [number],\n+ shutdown: [],\n+ startInspectingNative: [],\n+ startProfiling: [boolean],\n+ stopInspectingNative: [boolean],\n+ stopProfiling: [],\n+ updateAppendComponentStack: [boolean],\n+ updateComponentFilters: [Array<ComponentFilter>],\n+ viewElementSource: [ElementAndRendererID],\n+\n+ \/\/ React Native style editor plug-in.\n+ NativeStyleEditor_measure: [ElementAndRendererID],\n+ NativeStyleEditor_renameAttribute: [NativeStyleEditor_RenameAttributeParams],\n+ NativeStyleEditor_setValue: [NativeStyleEditor_SetValueParams],\n+|};\n+\n+class Bridge<\n+ OutgoingEvents: Object,\n+ IncomingEvents: Object\n+> extends EventEmitter<{|\n+ ...IncomingEvents,\n+ ...OutgoingEvents,\n+|}> {\n+ _isShutdown: boolean = false;\n+ _messageQueue: Array<any> = [];\n+ _timeoutID: TimeoutID | null = null;\n+ _wall: Wall;\n+ _wallUnlisten: Function | null = null;\n+\n+ constructor(wall: Wall) {\n+ super();\n+\n+ this._wall = wall;\n+\n+ this._wallUnlisten =\n+ wall.listen((message: Message) => {\n+ (this: any).emit(message.event, message.payload);\n+ }) || null;\n+ }\n+\n+ \/\/ Listening directly to the wall isn't advised.\n+ \/\/ It can be used to listen for legacy (v3) messages (since they use a different format).\n+ get wall(): Wall {\n+ return this._wall;\n+ }\n+\n+ send<EventName: $Keys<OutgoingEvents>>(\n+ event: EventName,\n+ ...payload: $ElementType<OutgoingEvents, EventName>\n+ ) {\n+ if (this._isShutdown) {\n+ console.warn(\n+ `Cannot send message \"${event}\" through a Bridge that has been shutdown.`\n+ );\n+ return;\n+ }\n+\n+ \/\/ When we receive a message:\n+ \/\/ - we add it to our queue of messages to be sent\n+ \/\/ - if there hasn't been a message recently, we set a timer for 0 ms in\n+ \/\/ the future, allowing all messages created in the same tick to be sent\n+ \/\/ together\n+ \/\/ - if there *has* been a message flushed in the last BATCH_DURATION ms\n+ \/\/ (or we're waiting for our setTimeout-0 to fire), then _timeoutID will\n+ \/\/ be set, and we'll simply add to the queue and wait for that\n+ this._messageQueue.push(event, payload);\n+ if (!this._timeoutID) {\n+ this._timeoutID = setTimeout(this._flush, 0);\n+ }\n+ }\n+\n+ shutdown() {\n+ if (this._isShutdown) {\n+ console.warn('Bridge was already shutdown.');\n+ return;\n+ }\n+\n+ \/\/ Queue the shutdown outgoing message for subscribers.\n+ this.send('shutdown');\n+\n+ \/\/ Mark this bridge as destroyed, i.e. disable its public API.\n+ this._isShutdown = true;\n+\n+ \/\/ Disable the API inherited from EventEmitter that can add more listeners and send more messages.\n+ \/\/ $FlowFixMe This property is not writable.\n+ this.addListener = function() {};\n+ \/\/ $FlowFixMe This property is not writable.\n+ this.emit = function() {};\n+ \/\/ NOTE: There's also EventEmitter API like `on` and `prependListener` that we didn't add to our Flow type of EventEmitter.\n+\n+ \/\/ Unsubscribe this bridge incoming message listeners to be sure, and so they don't have to do that.\n+ this.removeAllListeners();\n+\n+ \/\/ Stop accepting and emitting incoming messages from the wall.\n+ const wallUnlisten = this._wallUnlisten;\n+ if (wallUnlisten) {\n+ wallUnlisten();\n+ }\n+\n+ \/\/ Synchronously flush all queued outgoing messages.\n+ \/\/ At this step the subscribers' code may run in this call stack.\n+ do {\n+ this._flush();\n+ } while (this._messageQueue.length);\n+\n+ \/\/ Make sure once again that there is no dangling timer.\n+ clearTimeout(this._timeoutID);\n+ this._timeoutID = null;\n+ }\n+\n+ _flush = () => {\n+ \/\/ This method is used after the bridge is marked as destroyed in shutdown sequence,\n+ \/\/ so we do not bail out if the bridge marked as destroyed.\n+ \/\/ It is a private method that the bridge ensures is only called at the right times.\n+\n+ clearTimeout(this._timeoutID);\n+ this._timeoutID = null;\n+\n+ if (this._messageQueue.length) {\n+ for (let i = 0; i < this._messageQueue.length; i += 2) {\n+ this._wall.send(this._messageQueue[i], ...this._messageQueue[i + 1]);\n+ }\n+ this._messageQueue.length = 0;\n+\n+ \/\/ Check again for queued messages in BATCH_DURATION ms. This will keep\n+ \/\/ flushing in a loop as long as messages continue to be added. Once no\n+ \/\/ more are, the timer expires.\n+ this._timeoutID = setTimeout(this._flush, BATCH_DURATION);\n+ }\n+ };\n+}\n+\n+export type BackendBridge = Bridge<BackendEvents, FrontendEvents>;\n+export type FrontendBridge = Bridge<FrontendEvents, BackendEvents>;\n+\n+export default Bridge;\ndiff --git a\/src\/constants.js b\/src\/constants.js\nnew file mode 100644\nindex 0000000000..d27de3ed5b\n--- \/dev\/null\n+++ b\/src\/constants.js\n@@ -0,0 +1,57 @@\n+\/\/ @flow\n+\n+\/\/ Flip this flag to true to enable verbose console debug logging.\n+export const __DEBUG__ = false;\n+\n+export const TREE_OPERATION_ADD = 1;\n+export const TREE_OPERATION_REMOVE = 2;\n+export const TREE_OPERATION_REORDER_CHILDREN = 3;\n+export const TREE_OPERATION_UPDATE_TREE_BASE_DURATION = 4;\n+\n+export const LOCAL_STORAGE_FILTER_PREFERENCES_KEY =\n+ 'React::DevTools::componentFilters';\n+\n+export const SESSION_STORAGE_LAST_SELECTION_KEY =\n+ 'React::DevTools::lastSelection';\n+\n+export const SESSION_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY =\n+ 'React::DevTools::recordChangeDescriptions';\n+\n+export const SESSION_STORAGE_RELOAD_AND_PROFILE_KEY =\n+ 'React::DevTools::reloadAndProfile';\n+\n+export const LOCAL_STORAGE_SHOULD_PATCH_CONSOLE_KEY =\n+ 'React::DevTools::appendComponentStack';\n+\n+export const PROFILER_EXPORT_VERSION = 4;\n+\n+export const CHANGE_LOG_URL =\n+ 'https:\/\/github.com\/bvaughn\/react-devtools-experimental\/blob\/master\/CHANGELOG.md';\n+\n+\/\/ HACK\n+\/\/\n+\/\/ Extracting during build time avoids a temporarily invalid state for the inline target.\n+\/\/ Sometimes the inline target is rendered before root styles are applied,\n+\/\/ which would result in e.g. NaN itemSize being passed to react-window list.\n+\/\/\n+\/\/ We can't use the Webpack loader syntax in the context of Jest though,\n+\/\/ so tests need some reasonably meaningful fallback value.\n+let COMFORTABLE_LINE_HEIGHT = 15;\n+let COMPACT_LINE_HEIGHT = 10;\n+\n+if (!__TEST__) {\n+ \/\/ $FlowFixMe\n+ const rawStyleString = require('!!raw-loader!src\/devtools\/views\/root.css') \/\/ eslint-disable-line import\/no-webpack-loader-syntax\n+ .default;\n+\n+ const extractVar = varName => {\n+ const regExp = new RegExp(`${varName}: ([0-9]+)`);\n+ const match = rawStyleString.match(regExp);\n+ return parseInt(match[1], 10);\n+ };\n+\n+ COMFORTABLE_LINE_HEIGHT = extractVar('comfortable-line-height-data');\n+ COMPACT_LINE_HEIGHT = extractVar('compact-line-height-data');\n+}\n+\n+export { COMFORTABLE_LINE_HEIGHT, COMPACT_LINE_HEIGHT };\ndiff --git a\/src\/devtools\/ProfilerStore.js b\/src\/devtools\/ProfilerStore.js\nnew file mode 100644\nindex 0000000000..103947ac8c\n--- \/dev\/null\n+++ b\/src\/devtools\/ProfilerStore.js\n@@ -0,0 +1,330 @@\n+\/\/ @flow\n+\n+import EventEmitter from 'events';\n+import { prepareProfilingDataFrontendFromBackendAndStore } from '.\/views\/Profiler\/utils';\n+import ProfilingCache from '.\/ProfilingCache';\n+import Store from '.\/store';\n+\n+import type { FrontendBridge } from 'src\/bridge';\n+import type { ProfilingDataBackend } from 'src\/backend\/types';\n+import type {\n+ CommitDataFrontend,\n+ ProfilingDataForRootFrontend,\n+ ProfilingDataFrontend,\n+ SnapshotNode,\n+} from '.\/views\/Profiler\/types';\n+\n+export default class ProfilerStore extends EventEmitter<{|\n+ isProcessingData: [],\n+ isProfiling: [],\n+ profilingData: [],\n+|}> {\n+ _bridge: FrontendBridge;\n+\n+ \/\/ Suspense cache for lazily calculating derived profiling data.\n+ _cache: ProfilingCache;\n+\n+ \/\/ Temporary store of profiling data from the backend renderer(s).\n+ \/\/ This data will be converted to the ProfilingDataFrontend format after being collected from all renderers.\n+ _dataBackends: Array<ProfilingDataBackend> = [];\n+\n+ \/\/ Data from the most recently completed profiling session,\n+ \/\/ or data that has been imported from a previously exported session.\n+ \/\/ This object contains all necessary data to drive the Profiler UI interface,\n+ \/\/ even though some of it is lazily parsed\/derived via the ProfilingCache.\n+ _dataFrontend: ProfilingDataFrontend | null = null;\n+\n+ \/\/ Snapshot of all attached renderer IDs.\n+ \/\/ Once profiling is finished, this snapshot will be used to query renderers for profiling data.\n+ \/\/\n+ \/\/ This map is initialized when profiling starts and updated when a new root is added while profiling;\n+ \/\/ Upon completion, it is converted into the exportable ProfilingDataFrontend format.\n+ _initialRendererIDs: Set<number> = new Set();\n+\n+ \/\/ Snapshot of the state of the main Store (including all roots) when profiling started.\n+ \/\/ Once profiling is finished, this snapshot can be used along with \"operations\" messages emitted during profiling,\n+ \/\/ to reconstruct the state of each root for each commit.\n+ \/\/ It's okay to use a single root to store this information because node IDs are unique across all roots.\n+ \/\/\n+ \/\/ This map is initialized when profiling starts and updated when a new root is added while profiling;\n+ \/\/ Upon completion, it is converted into the exportable ProfilingDataFrontend format.\n+ _initialSnapshotsByRootID: Map<number, Map<number, SnapshotNode>> = new Map();\n+\n+ \/\/ Map of root (id) to a list of tree mutation that occur during profiling.\n+ \/\/ Once profiling is finished, these mutations can be used, along with the initial tree snapshots,\n+ \/\/ to reconstruct the state of each root for each commit.\n+ \/\/\n+ \/\/ This map is only updated while profiling is in progress;\n+ \/\/ Upon completion, it is converted into the exportable ProfilingDataFrontend format.\n+ _inProgressOperationsByRootID: Map<number, Array<Array<number>>> = new Map();\n+\n+ \/\/ The backend is currently profiling.\n+ \/\/ When profiling is in progress, operations are stored so that we can later reconstruct past commit trees.\n+ _isProfiling: boolean = false;\n+\n+ \/\/ After profiling, data is requested from each attached renderer using this queue.\n+ \/\/ So long as this queue is not empty, the store is retrieving and processing profiling data from the backend.\n+ _rendererQueue: Set<number> = new Set();\n+\n+ _store: Store;\n+\n+ constructor(\n+ bridge: FrontendBridge,\n+ store: Store,\n+ defaultIsProfiling: boolean\n+ ) {\n+ super();\n+\n+ this._bridge = bridge;\n+ this._isProfiling = defaultIsProfiling;\n+ this._store = store;\n+\n+ bridge.addListener('operations', this.onBridgeOperations);\n+ bridge.addListener('profilingData', this.onBridgeProfilingData);\n+ bridge.addListener('profilingStatus', this.onProfilingStatus);\n+ bridge.addListener('shutdown', this.onBridgeShutdown);\n+\n+ \/\/ It's possible that profiling has already started (e.g. \"reload and start profiling\")\n+ \/\/ so the frontend needs to ask the backend for its status after mounting.\n+ bridge.send('getProfilingStatus');\n+\n+ this._cache = new ProfilingCache(this);\n+ }\n+\n+ getCommitData(rootID: number, commitIndex: number): CommitDataFrontend {\n+ if (this._dataFrontend !== null) {\n+ const dataForRoot = this._dataFrontend.dataForRoots.get(rootID);\n+ if (dataForRoot != null) {\n+ const commitDatum = dataForRoot.commitData[commitIndex];\n+ if (commitDatum != null) {\n+ return commitDatum;\n+ }\n+ }\n+ }\n+\n+ throw Error(\n+ `Could not find commit data for root \"${rootID}\" and commit ${commitIndex}`\n+ );\n+ }\n+\n+ getDataForRoot(rootID: number): ProfilingDataForRootFrontend {\n+ if (this._dataFrontend !== null) {\n+ const dataForRoot = this._dataFrontend.dataForRoots.get(rootID);\n+ if (dataForRoot != null) {\n+ return dataForRoot;\n+ }\n+ }\n+\n+ throw Error(`Could not find commit data for root \"${rootID}\"`);\n+ }\n+\n+ \/\/ Profiling data has been recorded for at least one root.\n+ get didRecordCommits(): boolean {\n+ return (\n+ this._dataFrontend !== null && this._dataFrontend.dataForRoots.size > 0\n+ );\n+ }\n+\n+ get isProcessingData(): boolean {\n+ return this._rendererQueue.size > 0 || this._dataBackends.length > 0;\n+ }\n+\n+ get isProfiling(): boolean {\n+ return this._isProfiling;\n+ }\n+\n+ get profilingCache(): ProfilingCache {\n+ return this._cache;\n+ }\n+\n+ get profilingData(): ProfilingDataFrontend | null {\n+ return this._dataFrontend;\n+ }\n+ set profilingData(value: ProfilingDataFrontend | null): void {\n+ if (this._isProfiling) {\n+ console.warn(\n+ 'Profiling data cannot be updated while profiling is in progress.'\n+ );\n+ return;\n+ }\n+\n+ this._dataBackends.splice(0);\n+ this._dataFrontend = value;\n+ this._initialRendererIDs.clear();\n+ this._initialSnapshotsByRootID.clear();\n+ this._inProgressOperationsByRootID.clear();\n+ this._cache.invalidate();\n+\n+ this.emit('profilingData');\n+ }\n+\n+ clear(): void {\n+ this._dataBackends.splice(0);\n+ this._dataFrontend = null;\n+ this._initialRendererIDs.clear();\n+ this._initialSnapshotsByRootID.clear();\n+ this._inProgressOperationsByRootID.clear();\n+ this._rendererQueue.clear();\n+\n+ \/\/ Invalidate suspense cache if profiling data is being (re-)recorded.\n+ \/\/ Note that we clear now because any existing data is \"stale\".\n+ this._cache.invalidate();\n+\n+ this.emit('profilingData');\n+ }\n+\n+ startProfiling(): void {\n+ this._bridge.send('startProfiling', this._store.recordChangeDescriptions);\n+\n+ \/\/ Don't actually update the local profiling boolean yet!\n+ \/\/ Wait for onProfilingStatus() to confirm the status has changed.\n+ \/\/ This ensures the frontend and backend are in sync wrt which commits were profiled.\n+ \/\/ We do this to avoid mismatches on e.g. CommitTreeBuilder that would cause errors.\n+ }\n+\n+ stopProfiling(): void {\n+ this._bridge.send('stopProfiling');\n+\n+ \/\/ Don't actually update the local profiling boolean yet!\n+ \/\/ Wait for onProfilingStatus() to confirm the status has changed.\n+ \/\/ This ensures the frontend and backend are in sync wrt which commits were profiled.\n+ \/\/ We do this to avoid mismatches on e.g. CommitTreeBuilder that would cause errors.\n+ }\n+\n+ _takeProfilingSnapshotRecursive = (\n+ elementID: number,\n+ profilingSnapshots: Map<number, SnapshotNode>\n+ ) => {\n+ const element = this._store.getElementByID(elementID);\n+ if (element !== null) {\n+ const snapshotNode: SnapshotNode = {\n+ id: elementID,\n+ children: element.children.slice(0),\n+ displayName: element.displayName,\n+ key: element.key,\n+ type: element.type,\n+ };\n+ profilingSnapshots.set(elementID, snapshotNode);\n+\n+ element.children.forEach(childID =>\n+ this._takeProfilingSnapshotRecursive(childID, profilingSnapshots)\n+ );\n+ }\n+ };\n+\n+ onBridgeOperations = (operations: Array<number>) => {\n+ \/\/ The first two values are always rendererID and rootID\n+ const rendererID = operations[0];\n+ const rootID = operations[1];\n+\n+ if (this._isProfiling) {\n+ let profilingOperations = this._inProgressOperationsByRootID.get(rootID);\n+ if (profilingOperations == null) {\n+ profilingOperations = [operations];\n+ this._inProgressOperationsByRootID.set(rootID, profilingOperations);\n+ } else {\n+ profilingOperations.push(operations);\n+ }\n+\n+ if (!this._initialRendererIDs.has(rendererID)) {\n+ this._initialRendererIDs.add(rendererID);\n+ }\n+\n+ if (!this._initialSnapshotsByRootID.has(rootID)) {\n+ this._initialSnapshotsByRootID.set(rootID, new Map());\n+ }\n+ }\n+ };\n+\n+ onBridgeProfilingData = (dataBackend: ProfilingDataBackend) => {\n+ if (this._isProfiling) {\n+ \/\/ This should never happen, but if it does- ignore previous profiling data.\n+ return;\n+ }\n+\n+ const { rendererID } = dataBackend;\n+\n+ if (!this._rendererQueue.has(rendererID)) {\n+ throw Error(\n+ `Unexpected profiling data update from renderer \"${rendererID}\"`\n+ );\n+ }\n+\n+ this._dataBackends.push(dataBackend);\n+ this._rendererQueue.delete(rendererID);\n+\n+ if (this._rendererQueue.size === 0) {\n+ this._dataFrontend = prepareProfilingDataFrontendFromBackendAndStore(\n+ this._dataBackends,\n+ this._inProgressOperationsByRootID,\n+ this._initialSnapshotsByRootID\n+ );\n+\n+ this._dataBackends.splice(0);\n+\n+ this.emit('isProcessingData');\n+ }\n+ };\n+\n+ onBridgeShutdown = () => {\n+ this._bridge.removeListener('operations', this.onBridgeOperations);\n+ this._bridge.removeListener('profilingData', this.onBridgeProfilingData);\n+ this._bridge.removeListener('profilingStatus', this.onProfilingStatus);\n+ this._bridge.removeListener('shutdown', this.onBridgeShutdown);\n+ };\n+\n+ onProfilingStatus = (isProfiling: boolean) => {\n+ if (isProfiling) {\n+ this._dataBackends.splice(0);\n+ this._dataFrontend = null;\n+ this._initialRendererIDs.clear();\n+ this._initialSnapshotsByRootID.clear();\n+ this._inProgressOperationsByRootID.clear();\n+ this._rendererQueue.clear();\n+\n+ \/\/ Record all renderer IDs initially too (in case of unmount)\n+ for (let rendererID of this._store.rootIDToRendererID.values()) {\n+ if (!this._initialRendererIDs.has(rendererID)) {\n+ this._initialRendererIDs.add(rendererID);\n+ }\n+ }\n+\n+ \/\/ Record snapshot of tree at the time profiling is started.\n+ \/\/ This info is required to handle cases of e.g. nodes being removed during profiling.\n+ this._store.roots.forEach(rootID => {\n+ const profilingSnapshots = new Map();\n+ this._initialSnapshotsByRootID.set(rootID, profilingSnapshots);\n+ this._takeProfilingSnapshotRecursive(rootID, profilingSnapshots);\n+ });\n+ }\n+\n+ if (this._isProfiling !== isProfiling) {\n+ this._isProfiling = isProfiling;\n+\n+ \/\/ Invalidate suspense cache if profiling data is being (re-)recorded.\n+ \/\/ Note that we clear again, in case any views read from the cache while profiling.\n+ \/\/ (That would have resolved a now-stale value without any profiling data.)\n+ this._cache.invalidate();\n+\n+ this.emit('isProfiling');\n+\n+ \/\/ If we've just finished a profiling session, we need to fetch data stored in each renderer interface\n+ \/\/ and re-assemble it on the front-end into a format (ProfilingDataFrontend) that can power the Profiler UI.\n+ \/\/ During this time, DevTools UI should probably not be interactive.\n+ if (!isProfiling) {\n+ this._dataBackends.splice(0);\n+ this._rendererQueue.clear();\n+\n+ this._initialRendererIDs.forEach(rendererID => {\n+ if (!this._rendererQueue.has(rendererID)) {\n+ this._rendererQueue.add(rendererID);\n+\n+ this._bridge.send('getProfilingData', { rendererID });\n+ }\n+ });\n+\n+ this.emit('isProcessingData');\n+ }\n+ }\n+ };\n+}\ndiff --git a\/src\/devtools\/ProfilingCache.js b\/src\/devtools\/ProfilingCache.js\nnew file mode 100644\nindex 0000000000..d8f1819ddb\n--- \/dev\/null\n+++ b\/src\/devtools\/ProfilingCache.js\n@@ -0,0 +1,122 @@\n+\/\/ @flow\n+\n+import ProfilerStore from '.\/ProfilerStore';\n+import {\n+ getCommitTree,\n+ invalidateCommitTrees,\n+} from 'src\/devtools\/views\/Profiler\/CommitTreeBuilder';\n+import {\n+ getChartData as getFlamegraphChartData,\n+ invalidateChartData as invalidateFlamegraphChartData,\n+} from 'src\/devtools\/views\/Profiler\/FlamegraphChartBuilder';\n+import {\n+ getChartData as getInteractionsChartData,\n+ invalidateChartData as invalidateInteractionsChartData,\n+} from 'src\/devtools\/views\/Profiler\/InteractionsChartBuilder';\n+import {\n+ getChartData as getRankedChartData,\n+ invalidateChartData as invalidateRankedChartData,\n+} from 'src\/devtools\/views\/Profiler\/RankedChartBuilder';\n+\n+import type { CommitTree } from 'src\/devtools\/views\/Profiler\/types';\n+import type { ChartData as FlamegraphChartData } from 'src\/devtools\/views\/Profiler\/FlamegraphChartBuilder';\n+import type { ChartData as InteractionsChartData } from 'src\/devtools\/views\/Profiler\/InteractionsChartBuilder';\n+import type { ChartData as RankedChartData } from 'src\/devtools\/views\/Profiler\/RankedChartBuilder';\n+\n+export default class ProfilingCache {\n+ _fiberCommits: Map<number, Array<number>> = new Map();\n+ _profilerStore: ProfilerStore;\n+\n+ constructor(profilerStore: ProfilerStore) {\n+ this._profilerStore = profilerStore;\n+ }\n+\n+ getCommitTree = ({\n+ commitIndex,\n+ rootID,\n+ }: {|\n+ commitIndex: number,\n+ rootID: number,\n+ |}) =>\n+ getCommitTree({\n+ commitIndex,\n+ profilerStore: this._profilerStore,\n+ rootID,\n+ });\n+\n+ getFiberCommits = ({\n+ fiberID,\n+ rootID,\n+ }: {|\n+ fiberID: number,\n+ rootID: number,\n+ |}): Array<number> => {\n+ const cachedFiberCommits = this._fiberCommits.get(fiberID);\n+ if (cachedFiberCommits != null) {\n+ return cachedFiberCommits;\n+ }\n+\n+ const fiberCommits = [];\n+ const dataForRoot = this._profilerStore.getDataForRoot(rootID);\n+ dataForRoot.commitData.forEach((commitDatum, commitIndex) => {\n+ if (commitDatum.fiberActualDurations.has(fiberID)) {\n+ fiberCommits.push(commitIndex);\n+ }\n+ });\n+\n+ this._fiberCommits.set(fiberID, fiberCommits);\n+\n+ return fiberCommits;\n+ };\n+\n+ getFlamegraphChartData = ({\n+ commitIndex,\n+ commitTree,\n+ rootID,\n+ }: {|\n+ commitIndex: number,\n+ commitTree: CommitTree,\n+ rootID: number,\n+ |}): FlamegraphChartData =>\n+ getFlamegraphChartData({\n+ commitIndex,\n+ commitTree,\n+ profilerStore: this._profilerStore,\n+ rootID,\n+ });\n+\n+ getInteractionsChartData = ({\n+ rootID,\n+ }: {|\n+ rootID: number,\n+ |}): InteractionsChartData =>\n+ getInteractionsChartData({\n+ profilerStore: this._profilerStore,\n+ rootID,\n+ });\n+\n+ getRankedChartData = ({\n+ commitIndex,\n+ commitTree,\n+ rootID,\n+ }: {|\n+ commitIndex: number,\n+ commitTree: CommitTree,\n+ rootID: number,\n+ |}): RankedChartData =>\n+ getRankedChartData({\n+ commitIndex,\n+ commitTree,\n+ profilerStore: this._profilerStore,\n+ rootID,\n+ });\n+\n+ invalidate() {\n+ this._fiberCommits.clear();\n+\n+ invalidateCommitTrees();\n+ invalidateFlamegraphChartData();\n+ invalidateInteractionsChartData();\n+ invalidateRankedChartData();\n+ }\n+}\ndiff --git a\/src\/devtools\/cache.js b\/src\/devtools\/cache.js\nnew file mode 100644\nindex 0000000000..1e12798030\n--- \/dev\/null\n+++ b\/src\/devtools\/cache.js\n@@ -0,0 +1,198 @@\n+\/\/ @flow\n+\n+import React, { createContext } from 'react';\n+\n+\/\/ Cache implementation was forked from the React repo:\n+\/\/ https:\/\/github.com\/facebook\/react\/blob\/master\/packages\/react-cache\/src\/ReactCache.js\n+\/\/\n+\/\/ This cache is simpler than react-cache in that:\n+\/\/ 1. Individual items don't need to be invalidated.\n+\/\/ Profiling data is invalidated as a whole.\n+\/\/ 2. We didn't need the added overhead of an LRU cache.\n+\/\/ The size of this cache is bounded by how many renders were profiled,\n+\/\/ and it will be fully reset between profiling sessions.\n+\n+export type Thenable<T> = {\n+ then(resolve: (T) => mixed, reject: (mixed) => mixed): mixed,\n+};\n+\n+type Suspender = {\n+ then(resolve: () => mixed, reject: () => mixed): mixed,\n+};\n+\n+type PendingResult = {|\n+ status: 0,\n+ value: Suspender,\n+|};\n+\n+type ResolvedResult<Value> = {|\n+ status: 1,\n+ value: Value,\n+|};\n+\n+type RejectedResult = {|\n+ status: 2,\n+ value: mixed,\n+|};\n+\n+type Result<Value> = PendingResult | ResolvedResult<Value> | RejectedResult;\n+\n+export type Resource<Input, Key, Value> = {\n+ clear(): void,\n+ invalidate(Key): void,\n+ read(Input): Value,\n+ preload(Input): void,\n+ write(Key, Value): void,\n+};\n+\n+const Pending = 0;\n+const Resolved = 1;\n+const Rejected = 2;\n+\n+const ReactCurrentDispatcher = (React: any)\n+ .__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher;\n+\n+function readContext(Context, observedBits) {\n+ const dispatcher = ReactCurrentDispatcher.current;\n+ if (dispatcher === null) {\n+ throw new Error(\n+ 'react-cache: read and preload may only be called from within a ' +\n+ \"component's render. They are not supported in event handlers or \" +\n+ 'lifecycle methods.'\n+ );\n+ }\n+ return dispatcher.readContext(Context, observedBits);\n+}\n+\n+const CacheContext = createContext(null);\n+\n+type Config = {\n+ useWeakMap?: boolean,\n+};\n+\n+const entries: Map<\n+ Resource<any, any, any>,\n+ Map<any, any> | WeakMap<any, any>\n+> = new Map();\n+const resourceConfigs: Map<Resource<any, any, any>, Config> = new Map();\n+\n+function getEntriesForResource(\n+ resource: any\n+): Map<any, any> | WeakMap<any, any> {\n+ let entriesForResource = ((entries.get(resource): any): Map<any, any>);\n+ if (entriesForResource === undefined) {\n+ const config = resourceConfigs.get(resource);\n+ entriesForResource =\n+ config !== undefined && config.useWeakMap ? new WeakMap() : new Map();\n+ entries.set(resource, entriesForResource);\n+ }\n+ return entriesForResource;\n+}\n+\n+function accessResult<Input, Key, Value>(\n+ resource: any,\n+ fetch: Input => Thenable<Value>,\n+ input: Input,\n+ key: Key\n+): Result<Value> {\n+ const entriesForResource = getEntriesForResource(resource);\n+ const entry = entriesForResource.get(key);\n+ if (entry === undefined) {\n+ const thenable = fetch(input);\n+ thenable.then(\n+ value => {\n+ if (newResult.status === Pending) {\n+ const resolvedResult: ResolvedResult<Value> = (newResult: any);\n+ resolvedResult.status = Resolved;\n+ resolvedResult.value = value;\n+ }\n+ },\n+ error => {\n+ if (newResult.status === Pending) {\n+ const rejectedResult: RejectedResult = (newResult: any);\n+ rejectedResult.status = Rejected;\n+ rejectedResult.value = error;\n+ }\n+ }\n+ );\n+ const newResult: PendingResult = {\n+ status: Pending,\n+ value: thenable,\n+ };\n+ entriesForResource.set(key, newResult);\n+ return newResult;\n+ } else {\n+ return entry;\n+ }\n+}\n+\n+export function createResource<Input, Key, Value>(\n+ fetch: Input => Thenable<Value>,\n+ hashInput: Input => Key,\n+ config?: Config = {}\n+): Resource<Input, Key, Value> {\n+ const resource = {\n+ clear(): void {\n+ entries.delete(resource);\n+ },\n+\n+ invalidate(key: Key): void {\n+ const entriesForResource = getEntriesForResource(resource);\n+ entriesForResource.delete(key);\n+ },\n+\n+ read(input: Input): Value {\n+ \/\/ Prevent access outside of render.\n+ \/\/ eslint-disable-next-line react-hooks\/rules-of-hooks\n+ readContext(CacheContext);\n+\n+ const key = hashInput(input);\n+ const result: Result<Value> = accessResult(resource, fetch, input, key);\n+ switch (result.status) {\n+ case Pending: {\n+ const suspender = result.value;\n+ throw suspender;\n+ }\n+ case Resolved: {\n+ const value = result.value;\n+ return value;\n+ }\n+ case Rejected: {\n+ const error = result.value;\n+ throw error;\n+ }\n+ default:\n+ \/\/ Should be unreachable\n+ return (undefined: any);\n+ }\n+ },\n+\n+ preload(input: Input): void {\n+ \/\/ Prevent access outside of render.\n+ \/\/ eslint-disable-next-line react-hooks\/rules-of-hooks\n+ readContext(CacheContext);\n+\n+ const key = hashInput(input);\n+ accessResult(resource, fetch, input, key);\n+ },\n+\n+ write(key: Key, value: Value): void {\n+ const entriesForResource = getEntriesForResource(resource);\n+\n+ const resolvedResult: ResolvedResult<Value> = {\n+ status: Resolved,\n+ value,\n+ };\n+\n+ entriesForResource.set(key, resolvedResult);\n+ },\n+ };\n+\n+ resourceConfigs.set(resource, config);\n+\n+ return resource;\n+}\n+\n+export function invalidateResources(): void {\n+ entries.clear();\n+}\ndiff --git a\/src\/devtools\/index.js b\/src\/devtools\/index.js\nnew file mode 100644\nindex 0000000000..33e628e965\n--- \/dev\/null\n+++ b\/src\/devtools\/index.js\n@@ -0,0 +1,14 @@\n+\/\/ @flow\n+\n+import type { FrontendBridge } from 'src\/bridge';\n+\n+type Shell = {|\n+ connect: (callback: Function) => void,\n+ onReload: (reloadFn: Function) => void,\n+|};\n+\n+export function initDevTools(shell: Shell) {\n+ shell.connect((bridge: FrontendBridge) => {\n+ \/\/ TODO ...\n+ });\n+}\ndiff --git a\/src\/devtools\/store.js b\/src\/devtools\/store.js\nnew file mode 100644\nindex 0000000000..e032463957\n--- \/dev\/null\n+++ b\/src\/devtools\/store.js\n@@ -0,0 +1,1005 @@\n+\/\/ @flow\n+\n+import EventEmitter from 'events';\n+import { inspect } from 'util';\n+import {\n+ TREE_OPERATION_ADD,\n+ TREE_OPERATION_REMOVE,\n+ TREE_OPERATION_REORDER_CHILDREN,\n+ TREE_OPERATION_UPDATE_TREE_BASE_DURATION,\n+} from '..\/constants';\n+import { ElementTypeRoot } from '..\/types';\n+import {\n+ getSavedComponentFilters,\n+ saveComponentFilters,\n+ separateDisplayNameAndHOCs,\n+ shallowDiffers,\n+ utfDecodeString,\n+} from '..\/utils';\n+import { localStorageGetItem, localStorageSetItem } from '..\/storage';\n+import { __DEBUG__ } from '..\/constants';\n+import { printStore } from 'src\/__tests__\/storeSerializer';\n+import ProfilerStore from '.\/ProfilerStore';\n+\n+import type { Element } from '.\/views\/Components\/types';\n+import type { ComponentFilter, ElementType } from '..\/types';\n+import type { FrontendBridge } from 'src\/bridge';\n+\n+const debug = (methodName, ...args) => {\n+ if (__DEBUG__) {\n+ console.log(\n+ `%cStore %c${methodName}`,\n+ 'color: green; font-weight: bold;',\n+ 'font-weight: bold;',\n+ ...args\n+ );\n+ }\n+};\n+\n+const LOCAL_STORAGE_COLLAPSE_ROOTS_BY_DEFAULT_KEY =\n+ 'React::DevTools::collapseNodesByDefault';\n+const LOCAL_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY =\n+ 'React::DevTools::recordChangeDescriptions';\n+\n+type Config = {|\n+ isProfiling?: boolean,\n+ supportsNativeInspection?: boolean,\n+ supportsReloadAndProfile?: boolean,\n+ supportsProfiling?: boolean,\n+|};\n+\n+export type Capabilities = {|\n+ hasOwnerMetadata: boolean,\n+ supportsProfiling: boolean,\n+|};\n+\n+\/**\n+ * The store is the single source of truth for updates from the backend.\n+ * ContextProviders can subscribe to the Store for specific things they want to provide.\n+ *\/\n+export default class Store extends EventEmitter<{|\n+ collapseNodesByDefault: [],\n+ componentFilters: [],\n+ mutated: [[Array<number>, Map<number, number>]],\n+ recordChangeDescriptions: [],\n+ roots: [],\n+ supportsNativeStyleEditor: [],\n+ supportsProfiling: [],\n+ supportsReloadAndProfile: [],\n+|}> {\n+ _bridge: FrontendBridge;\n+\n+ \/\/ Should new nodes be collapsed by default when added to the tree?\n+ _collapseNodesByDefault: boolean = true;\n+\n+ _componentFilters: Array<ComponentFilter>;\n+\n+ \/\/ At least one of the injected renderers contains (DEV only) owner metadata.\n+ _hasOwnerMetadata: boolean = false;\n+\n+ \/\/ Map of ID to (mutable) Element.\n+ \/\/ Elements are mutated to avoid excessive cloning during tree updates.\n+ \/\/ The InspectedElementContext also relies on this mutability for its WeakMap usage.\n+ _idToElement: Map<number, Element> = new Map();\n+\n+ \/\/ Should the React Native style editor panel be shown?\n+ _isNativeStyleEditorSupported: boolean = false;\n+\n+ \/\/ Can the backend use the Storage API (e.g. localStorage)?\n+ \/\/ If not, features like reload-and-profile will not work correctly and must be disabled.\n+ _isBackendStorageAPISupported: boolean = false;\n+\n+ _nativeStyleEditorValidAttributes: $ReadOnlyArray<string> | null = null;\n+\n+ \/\/ Map of element (id) to the set of elements (ids) it owns.\n+ \/\/ This map enables getOwnersListForElement() to avoid traversing the entire tree.\n+ _ownersMap: Map<number, Set<number>> = new Map();\n+\n+ _profilerStore: ProfilerStore;\n+\n+ _recordChangeDescriptions: boolean = false;\n+\n+ \/\/ Incremented each time the store is mutated.\n+ \/\/ This enables a passive effect to detect a mutation between render and commit phase.\n+ _revision: number = 0;\n+\n+ \/\/ This Array must be treated as immutable!\n+ \/\/ Passive effects will check it for changes between render and mount.\n+ _roots: $ReadOnlyArray<number> = [];\n+\n+ _rootIDToCapabilities: Map<number, Capabilities> = new Map();\n+\n+ \/\/ Renderer ID is needed to support inspection fiber props, state, and hooks.\n+ _rootIDToRendererID: Map<number, number> = new Map();\n+\n+ \/\/ These options may be initially set by a confiugraiton option when constructing the Store.\n+ \/\/ In the case of \"supportsProfiling\", the option may be updated based on the injected renderers.\n+ _supportsNativeInspection: boolean = true;\n+ _supportsProfiling: boolean = false;\n+ _supportsReloadAndProfile: boolean = false;\n+\n+ \/\/ Total number of visible elements (within all roots).\n+ \/\/ Used for windowing purposes.\n+ _weightAcrossRoots: number = 0;\n+\n+ constructor(bridge: FrontendBridge, config?: Config) {\n+ super();\n+\n+ if (__DEBUG__) {\n+ debug('constructor', 'subscribing to Bridge');\n+ }\n+\n+ this._collapseNodesByDefault =\n+ localStorageGetItem(LOCAL_STORAGE_COLLAPSE_ROOTS_BY_DEFAULT_KEY) ===\n+ 'true';\n+\n+ this._recordChangeDescriptions =\n+ localStorageGetItem(LOCAL_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY) ===\n+ 'true';\n+\n+ this._componentFilters = getSavedComponentFilters();\n+\n+ let isProfiling = false;\n+ if (config != null) {\n+ isProfiling = config.isProfiling === true;\n+\n+ const {\n+ supportsNativeInspection,\n+ supportsProfiling,\n+ supportsReloadAndProfile,\n+ } = config;\n+ this._supportsNativeInspection = supportsNativeInspection !== false;\n+ if (supportsProfiling) {\n+ this._supportsProfiling = true;\n+ }\n+ if (supportsReloadAndProfile) {\n+ this._supportsReloadAndProfile = true;\n+ }\n+ }\n+\n+ this._bridge = bridge;\n+ bridge.addListener('operations', this.onBridgeOperations);\n+ bridge.addListener(\n+ 'overrideComponentFilters',\n+ this.onBridgeOverrideComponentFilters\n+ );\n+ bridge.addListener('shutdown', this.onBridgeShutdown);\n+ bridge.addListener(\n+ 'isBackendStorageAPISupported',\n+ this.onBridgeStorageSupported\n+ );\n+ bridge.addListener(\n+ 'isNativeStyleEditorSupported',\n+ this.onBridgeNativeStyleEditorSupported\n+ );\n+\n+ this._profilerStore = new ProfilerStore(bridge, this, isProfiling);\n+ }\n+\n+ \/\/ This is only used in tests to avoid memory leaks.\n+ assertExpectedRootMapSizes() {\n+ if (this.roots.length === 0) {\n+ \/\/ The only safe time to assert these maps are empty is when the store is empty.\n+ this.assertMapSizeMatchesRootCount(this._idToElement, '_idToElement');\n+ this.assertMapSizeMatchesRootCount(this._ownersMap, '_ownersMap');\n+ }\n+\n+ \/\/ These maps should always be the same size as the number of roots\n+ this.assertMapSizeMatchesRootCount(\n+ this._rootIDToCapabilities,\n+ '_rootIDToCapabilities'\n+ );\n+ this.assertMapSizeMatchesRootCount(\n+ this._rootIDToRendererID,\n+ '_rootIDToRendererID'\n+ );\n+ }\n+\n+ \/\/ This is only used in tests to avoid memory leaks.\n+ assertMapSizeMatchesRootCount(map: Map<any, any>, mapName: string) {\n+ const expectedSize = this.roots.length;\n+ if (map.size !== expectedSize) {\n+ throw new Error(\n+ `Expected ${mapName} to contain ${expectedSize} items, but it contains ${\n+ map.size\n+ } items\\n\\n${inspect(map, {\n+ depth: 20,\n+ })}`\n+ );\n+ }\n+ }\n+\n+ get collapseNodesByDefault(): boolean {\n+ return this._collapseNodesByDefault;\n+ }\n+ set collapseNodesByDefault(value: boolean): void {\n+ this._collapseNodesByDefault = value;\n+\n+ localStorageSetItem(\n+ LOCAL_STORAGE_COLLAPSE_ROOTS_BY_DEFAULT_KEY,\n+ value ? 'true' : 'false'\n+ );\n+\n+ this.emit('collapseNodesByDefault');\n+ }\n+\n+ get componentFilters(): Array<ComponentFilter> {\n+ return this._componentFilters;\n+ }\n+ set componentFilters(value: Array<ComponentFilter>): void {\n+ if (this._profilerStore.isProfiling) {\n+ \/\/ Re-mounting a tree while profiling is in progress might break a lot of assumptions.\n+ \/\/ If necessary, we could support this- but it doesn't seem like a necessary use case.\n+ throw Error('Cannot modify filter preferences while profiling');\n+ }\n+\n+ \/\/ Filter updates are expensive to apply (since they impact the entire tree).\n+ \/\/ Let's determine if they've changed and avoid doing this work if they haven't.\n+ const prevEnabledComponentFilters = this._componentFilters.filter(\n+ filter => filter.isEnabled\n+ );\n+ const nextEnabledComponentFilters = value.filter(\n+ filter => filter.isEnabled\n+ );\n+ let haveEnabledFiltersChanged =\n+ prevEnabledComponentFilters.length !== nextEnabledComponentFilters.length;\n+ if (!haveEnabledFiltersChanged) {\n+ for (let i = 0; i < nextEnabledComponentFilters.length; i++) {\n+ const prevFilter = prevEnabledComponentFilters[i];\n+ const nextFilter = nextEnabledComponentFilters[i];\n+ if (shallowDiffers(prevFilter, nextFilter)) {\n+ haveEnabledFiltersChanged = true;\n+ break;\n+ }\n+ }\n+ }\n+\n+ this._componentFilters = value;\n+\n+ \/\/ Update persisted filter preferences stored in localStorage.\n+ saveComponentFilters(value);\n+\n+ \/\/ Notify the renderer that filter prefernces have changed.\n+ \/\/ This is an expensive opreation; it unmounts and remounts the entire tree,\n+ \/\/ so only do it if the set of enabled component filters has changed.\n+ if (haveEnabledFiltersChanged) {\n+ this._bridge.send('updateComponentFilters', value);\n+ }\n+\n+ this.emit('componentFilters');\n+ }\n+\n+ get hasOwnerMetadata(): boolean {\n+ return this._hasOwnerMetadata;\n+ }\n+\n+ get nativeStyleEditorValidAttributes(): $ReadOnlyArray<string> | null {\n+ return this._nativeStyleEditorValidAttributes;\n+ }\n+\n+ get numElements(): number {\n+ return this._weightAcrossRoots;\n+ }\n+\n+ get profilerStore(): ProfilerStore {\n+ return this._profilerStore;\n+ }\n+\n+ get recordChangeDescriptions(): boolean {\n+ return this._recordChangeDescriptions;\n+ }\n+ set recordChangeDescriptions(value: boolean): void {\n+ this._recordChangeDescriptions = value;\n+\n+ localStorageSetItem(\n+ LOCAL_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY,\n+ value ? 'true' : 'false'\n+ );\n+\n+ this.emit('recordChangeDescriptions');\n+ }\n+\n+ get revision(): number {\n+ return this._revision;\n+ }\n+\n+ get rootIDToRendererID(): Map<number, number> {\n+ return this._rootIDToRendererID;\n+ }\n+\n+ get roots(): $ReadOnlyArray<number> {\n+ return this._roots;\n+ }\n+\n+ get supportsNativeInspection(): boolean {\n+ return this._supportsNativeInspection;\n+ }\n+\n+ get supportsNativeStyleEditor(): boolean {\n+ return this._isNativeStyleEditorSupported;\n+ }\n+\n+ get supportsProfiling(): boolean {\n+ return this._supportsProfiling;\n+ }\n+\n+ get supportsReloadAndProfile(): boolean {\n+ \/\/ Does the DevTools shell support reloading and eagerly injecting the renderer interface?\n+ \/\/ And if so, can the backend use the localStorage API?\n+ \/\/ Both of these are required for the reload-and-profile feature to work.\n+ return this._supportsReloadAndProfile && this._isBackendStorageAPISupported;\n+ }\n+\n+ containsElement(id: number): boolean {\n+ return this._idToElement.get(id) != null;\n+ }\n+\n+ getElementAtIndex(index: number): Element | null {\n+ if (index < 0 || index >= this.numElements) {\n+ console.warn(\n+ `Invalid index ${index} specified; store contains ${\n+ this.numElements\n+ } items.`\n+ );\n+\n+ return null;\n+ }\n+\n+ \/\/ Find wich root this element is in...\n+ let rootID;\n+ let root;\n+ let rootWeight = 0;\n+ for (let i = 0; i < this._roots.length; i++) {\n+ rootID = this._roots[i];\n+ root = ((this._idToElement.get(rootID): any): Element);\n+ if (root.children.length === 0) {\n+ continue;\n+ } else if (rootWeight + root.weight > index) {\n+ break;\n+ } else {\n+ rootWeight += root.weight;\n+ }\n+ }\n+\n+ \/\/ Find the element in the tree using the weight of each node...\n+ \/\/ Skip over the root itself, because roots aren't visible in the Elements tree.\n+ let currentElement = ((root: any): Element);\n+ let currentWeight = rootWeight - 1;\n+ while (index !== currentWeight) {\n+ const numChildren = currentElement.children.length;\n+ for (let i = 0; i < numChildren; i++) {\n+ const childID = currentElement.children[i];\n+ const child = ((this._idToElement.get(childID): any): Element);\n+ const childWeight = child.isCollapsed ? 1 : child.weight;\n+\n+ if (index <= currentWeight + childWeight) {\n+ currentWeight++;\n+ currentElement = child;\n+ break;\n+ } else {\n+ currentWeight += childWeight;\n+ }\n+ }\n+ }\n+\n+ return ((currentElement: any): Element) || null;\n+ }\n+\n+ getElementIDAtIndex(index: number): number | null {\n+ const element: Element | null = this.getElementAtIndex(index);\n+ return element === null ? null : element.id;\n+ }\n+\n+ getElementByID(id: number): Element | null {\n+ const element = this._idToElement.get(id);\n+ if (element == null) {\n+ console.warn(`No element found with id \"${id}\"`);\n+ return null;\n+ }\n+\n+ return element;\n+ }\n+\n+ getIndexOfElementID(id: number): number | null {\n+ const element = this.getElementByID(id);\n+\n+ if (element === null || element.parentID === 0) {\n+ return null;\n+ }\n+\n+ \/\/ Walk up the tree to the root.\n+ \/\/ Increment the index by one for each node we encounter,\n+ \/\/ and by the weight of all nodes to the left of the current one.\n+ \/\/ This should be a relatively fast way of determining the index of a node within the tree.\n+ let previousID = id;\n+ let currentID = element.parentID;\n+ let index = 0;\n+ while (true) {\n+ const current = ((this._idToElement.get(currentID): any): Element);\n+\n+ const { children } = current;\n+ for (let i = 0; i < children.length; i++) {\n+ const childID = children[i];\n+ if (childID === previousID) {\n+ break;\n+ }\n+ const child = ((this._idToElement.get(childID): any): Element);\n+ index += child.isCollapsed ? 1 : child.weight;\n+ }\n+\n+ if (current.parentID === 0) {\n+ \/\/ We found the root; stop crawling.\n+ break;\n+ }\n+\n+ index++;\n+\n+ previousID = current.id;\n+ currentID = current.parentID;\n+ }\n+\n+ \/\/ At this point, the current ID is a root (from the previous loop).\n+ \/\/ We also need to offset the index by previous root weights.\n+ for (let i = 0; i < this._roots.length; i++) {\n+ const rootID = this._roots[i];\n+ if (rootID === currentID) {\n+ break;\n+ }\n+ const root = ((this._idToElement.get(rootID): any): Element);\n+ index += root.weight;\n+ }\n+\n+ return index;\n+ }\n+\n+ getOwnersListForElement(ownerID: number): Array<Element> {\n+ const list = [];\n+ let element = this._idToElement.get(ownerID);\n+ if (element != null) {\n+ list.push({\n+ ...element,\n+ depth: 0,\n+ });\n+\n+ const unsortedIDs = this._ownersMap.get(ownerID);\n+ if (unsortedIDs !== undefined) {\n+ const depthMap: Map<number, number> = new Map([[ownerID, 0]]);\n+\n+ \/\/ Items in a set are ordered based on insertion.\n+ \/\/ This does not correlate with their order in the tree.\n+ \/\/ So first we need to order them.\n+ \/\/ I wish we could avoid this sorting operation; we could sort at insertion time,\n+ \/\/ but then we'd have to pay sorting costs even if the owners list was never used.\n+ \/\/ Seems better to defer the cost, since the set of ids is probably pretty small.\n+ const sortedIDs = Array.from(unsortedIDs).sort(\n+ (idA, idB) =>\n+ ((this.getIndexOfElementID(idA): any): number) -\n+ ((this.getIndexOfElementID(idB): any): number)\n+ );\n+\n+ \/\/ Next we need to determine the appropriate depth for each element in the list.\n+ \/\/ The depth in the list may not correspond to the depth in the tree,\n+ \/\/ because the list has been filtered to remove intermediate components.\n+ \/\/ Perhaps the easiest way to do this is to walk up the tree until we reach either:\n+ \/\/ (1) another node that's already in the tree, or (2) the root (owner)\n+ \/\/ at which point, our depth is just the depth of that node plus one.\n+ sortedIDs.forEach(id => {\n+ const element = this._idToElement.get(id);\n+ if (element != null) {\n+ let parentID = element.parentID;\n+\n+ let depth = 0;\n+ while (parentID > 0) {\n+ if (parentID === ownerID || unsortedIDs.has(parentID)) {\n+ depth = depthMap.get(parentID) + 1;\n+ depthMap.set(id, depth);\n+ break;\n+ }\n+ const parent = this._idToElement.get(parentID);\n+ if (parent == null) {\n+ break;\n+ }\n+ parentID = parent.parentID;\n+ }\n+\n+ if (depth === 0) {\n+ throw Error('Invalid owners list');\n+ }\n+\n+ list.push({ ...element, depth });\n+ }\n+ });\n+ }\n+ }\n+\n+ return list;\n+ }\n+\n+ getRendererIDForElement(id: number): number | null {\n+ let current = this._idToElement.get(id);\n+ while (current != null) {\n+ if (current.parentID === 0) {\n+ const rendererID = this._rootIDToRendererID.get(current.id);\n+ return rendererID == null ? null : rendererID;\n+ } else {\n+ current = this._idToElement.get(current.parentID);\n+ }\n+ }\n+ return null;\n+ }\n+\n+ getRootIDForElement(id: number): number | null {\n+ let current = this._idToElement.get(id);\n+ while (current != null) {\n+ if (current.parentID === 0) {\n+ return current.id;\n+ } else {\n+ current = this._idToElement.get(current.parentID);\n+ }\n+ }\n+ return null;\n+ }\n+\n+ isInsideCollapsedSubTree(id: number): boolean {\n+ let current = this._idToElement.get(id);\n+ while (current != null) {\n+ if (current.parentID === 0) {\n+ return false;\n+ } else {\n+ current = this._idToElement.get(current.parentID);\n+ if (current != null && current.isCollapsed) {\n+ return true;\n+ }\n+ }\n+ }\n+ return false;\n+ }\n+\n+ \/\/ TODO Maybe split this into two methods: expand() and collapse()\n+ toggleIsCollapsed(id: number, isCollapsed: boolean): void {\n+ let didMutate = false;\n+\n+ const element = this.getElementByID(id);\n+ if (element !== null) {\n+ if (isCollapsed) {\n+ if (element.type === ElementTypeRoot) {\n+ throw Error('Root nodes cannot be collapsed');\n+ }\n+\n+ if (!element.isCollapsed) {\n+ didMutate = true;\n+ element.isCollapsed = true;\n+\n+ const weightDelta = 1 - element.weight;\n+\n+ let parentElement = ((this._idToElement.get(\n+ element.parentID\n+ ): any): Element);\n+ while (parentElement != null) {\n+ \/\/ We don't need to break on a collapsed parent in the same way as the expand case below.\n+ \/\/ That's because collapsing a node doesn't \"bubble\" and affect its parents.\n+ parentElement.weight += weightDelta;\n+ parentElement = this._idToElement.get(parentElement.parentID);\n+ }\n+ }\n+ } else {\n+ let currentElement = element;\n+ while (currentElement != null) {\n+ const oldWeight = currentElement.isCollapsed\n+ ? 1\n+ : currentElement.weight;\n+\n+ if (currentElement.isCollapsed) {\n+ didMutate = true;\n+ currentElement.isCollapsed = false;\n+\n+ const newWeight = currentElement.isCollapsed\n+ ? 1\n+ : currentElement.weight;\n+ const weightDelta = newWeight - oldWeight;\n+\n+ let parentElement = ((this._idToElement.get(\n+ currentElement.parentID\n+ ): any): Element);\n+ while (parentElement != null) {\n+ parentElement.weight += weightDelta;\n+ if (parentElement.isCollapsed) {\n+ \/\/ It's important to break on a collapsed parent when expanding nodes.\n+ \/\/ That's because expanding a node \"bubbles\" up and expands all parents as well.\n+ \/\/ Breaking in this case prevents us from over-incrementing the expanded weights.\n+ break;\n+ }\n+ parentElement = this._idToElement.get(parentElement.parentID);\n+ }\n+ }\n+\n+ currentElement =\n+ currentElement.parentID !== 0\n+ ? this.getElementByID(currentElement.parentID)\n+ : null;\n+ }\n+ }\n+\n+ \/\/ Only re-calculate weights and emit an \"update\" event if the store was mutated.\n+ if (didMutate) {\n+ let weightAcrossRoots = 0;\n+ this._roots.forEach(rootID => {\n+ const { weight } = ((this.getElementByID(rootID): any): Element);\n+ weightAcrossRoots += weight;\n+ });\n+ this._weightAcrossRoots = weightAcrossRoots;\n+\n+ \/\/ The Tree context's search reducer expects an explicit list of ids for nodes that were added or removed.\n+ \/\/ In this case, we can pass it empty arrays since nodes in a collapsed tree are still there (just hidden).\n+ \/\/ Updating the selected search index later may require auto-expanding a collapsed subtree though.\n+ this.emit('mutated', [[], new Map()]);\n+ }\n+ }\n+ }\n+\n+ _adjustParentTreeWeight = (\n+ parentElement: Element | null,\n+ weightDelta: number\n+ ) => {\n+ let isInsideCollapsedSubTree = false;\n+\n+ while (parentElement != null) {\n+ parentElement.weight += weightDelta;\n+\n+ \/\/ Additions and deletions within a collapsed subtree should not bubble beyond the collapsed parent.\n+ \/\/ Their weight will bubble up when the parent is expanded.\n+ if (parentElement.isCollapsed) {\n+ isInsideCollapsedSubTree = true;\n+ break;\n+ }\n+\n+ parentElement = ((this._idToElement.get(\n+ parentElement.parentID\n+ ): any): Element);\n+ }\n+\n+ \/\/ Additions and deletions within a collapsed subtree should not affect the overall number of elements.\n+ if (!isInsideCollapsedSubTree) {\n+ this._weightAcrossRoots += weightDelta;\n+ }\n+ };\n+\n+ onBridgeNativeStyleEditorSupported = ({\n+ isSupported,\n+ validAttributes,\n+ }: {|\n+ isSupported: boolean,\n+ validAttributes: ?$ReadOnlyArray<string>,\n+ |}) => {\n+ this._isNativeStyleEditorSupported = isSupported;\n+ this._nativeStyleEditorValidAttributes = validAttributes || null;\n+\n+ this.emit('supportsNativeStyleEditor');\n+ };\n+\n+ onBridgeOperations = (operations: Array<number>) => {\n+ if (__DEBUG__) {\n+ console.groupCollapsed('onBridgeOperations');\n+ debug('onBridgeOperations', operations.join(','));\n+ }\n+\n+ let haveRootsChanged = false;\n+\n+ \/\/ The first two values are always rendererID and rootID\n+ const rendererID = operations[0];\n+\n+ const addedElementIDs: Array<number> = [];\n+ \/\/ This is a mapping of removed ID -> parent ID:\n+ const removedElementIDs: Map<number, number> = new Map();\n+ \/\/ We'll use the parent ID to adjust selection if it gets deleted.\n+\n+ let i = 2;\n+\n+ \/\/ Reassemble the string table.\n+ const stringTable = [\n+ null, \/\/ ID = 0 corresponds to the null string.\n+ ];\n+ const stringTableSize = operations[i++];\n+ const stringTableEnd = i + stringTableSize;\n+ while (i < stringTableEnd) {\n+ const nextLength = operations[i++];\n+ const nextString = utfDecodeString(\n+ (operations.slice(i, i + nextLength): any)\n+ );\n+ stringTable.push(nextString);\n+ i += nextLength;\n+ }\n+\n+ while (i < operations.length) {\n+ const operation = operations[i];\n+ switch (operation) {\n+ case TREE_OPERATION_ADD: {\n+ const id = ((operations[i + 1]: any): number);\n+ const type = ((operations[i + 2]: any): ElementType);\n+\n+ i = i + 3;\n+\n+ if (this._idToElement.has(id)) {\n+ throw Error(\n+ `Cannot add node ${id} because a node with that id is already in the Store.`\n+ );\n+ }\n+\n+ let ownerID: number = 0;\n+ let parentID: number = ((null: any): number);\n+ if (type === ElementTypeRoot) {\n+ if (__DEBUG__) {\n+ debug('Add', `new root node ${id}`);\n+ }\n+\n+ const supportsProfiling = operations[i] > 0;\n+ i++;\n+\n+ const hasOwnerMetadata = operations[i] > 0;\n+ i++;\n+\n+ this._roots = this._roots.concat(id);\n+ this._rootIDToRendererID.set(id, rendererID);\n+ this._rootIDToCapabilities.set(id, {\n+ hasOwnerMetadata,\n+ supportsProfiling,\n+ });\n+\n+ this._idToElement.set(id, {\n+ children: [],\n+ depth: -1,\n+ displayName: null,\n+ hocDisplayNames: null,\n+ id,\n+ isCollapsed: false, \/\/ Never collapse roots; it would hide the entire tree.\n+ key: null,\n+ ownerID: 0,\n+ parentID: 0,\n+ type,\n+ weight: 0,\n+ });\n+\n+ haveRootsChanged = true;\n+ } else {\n+ parentID = ((operations[i]: any): number);\n+ i++;\n+\n+ ownerID = ((operations[i]: any): number);\n+ i++;\n+\n+ const displayNameStringID = operations[i];\n+ const displayName = stringTable[displayNameStringID];\n+ i++;\n+\n+ const keyStringID = operations[i];\n+ const key = stringTable[keyStringID];\n+ i++;\n+\n+ if (__DEBUG__) {\n+ debug(\n+ 'Add',\n+ `node ${id} (${displayName || 'null'}) as child of ${parentID}`\n+ );\n+ }\n+\n+ if (!this._idToElement.has(parentID)) {\n+ throw Error(\n+ `Cannot add child ${id} to parent ${parentID} because parent node was not found in the Store.`\n+ );\n+ }\n+\n+ const parentElement = ((this._idToElement.get(\n+ parentID\n+ ): any): Element);\n+ parentElement.children.push(id);\n+\n+ const [\n+ displayNameWithoutHOCs,\n+ hocDisplayNames,\n+ ] = separateDisplayNameAndHOCs(displayName, type);\n+\n+ const element: Element = {\n+ children: [],\n+ depth: parentElement.depth + 1,\n+ displayName: displayNameWithoutHOCs,\n+ hocDisplayNames,\n+ id,\n+ isCollapsed: this._collapseNodesByDefault,\n+ key,\n+ ownerID,\n+ parentID: parentElement.id,\n+ type,\n+ weight: 1,\n+ };\n+\n+ this._idToElement.set(id, element);\n+ addedElementIDs.push(id);\n+ this._adjustParentTreeWeight(parentElement, 1);\n+\n+ if (ownerID > 0) {\n+ let set = this._ownersMap.get(ownerID);\n+ if (set === undefined) {\n+ set = new Set();\n+ this._ownersMap.set(ownerID, set);\n+ }\n+ set.add(id);\n+ }\n+ }\n+ break;\n+ }\n+ case TREE_OPERATION_REMOVE: {\n+ const removeLength = ((operations[i + 1]: any): number);\n+ i = i + 2;\n+\n+ for (let removeIndex = 0; removeIndex < removeLength; removeIndex++) {\n+ const id = ((operations[i]: any): number);\n+\n+ if (!this._idToElement.has(id)) {\n+ throw Error(\n+ `Cannot remove node ${id} because no matching node was found in the Store.`\n+ );\n+ }\n+\n+ i = i + 1;\n+\n+ const element = ((this._idToElement.get(id): any): Element);\n+ const { children, ownerID, parentID, weight } = element;\n+ if (children.length > 0) {\n+ throw new Error(`Node ${id} was removed before its children.`);\n+ }\n+\n+ this._idToElement.delete(id);\n+\n+ let parentElement = null;\n+ if (parentID === 0) {\n+ if (__DEBUG__) {\n+ debug('Remove', `node ${id} root`);\n+ }\n+\n+ this._roots = this._roots.filter(rootID => rootID !== id);\n+ this._rootIDToRendererID.delete(id);\n+ this._rootIDToCapabilities.delete(id);\n+\n+ haveRootsChanged = true;\n+ } else {\n+ if (__DEBUG__) {\n+ debug('Remove', `node ${id} from parent ${parentID}`);\n+ }\n+ parentElement = ((this._idToElement.get(parentID): any): Element);\n+ if (parentElement === undefined) {\n+ throw Error(\n+ `Cannot remove node ${id} from parent ${parentID} because no matching node was found in the Store.`\n+ );\n+ }\n+ const index = parentElement.children.indexOf(id);\n+ parentElement.children.splice(index, 1);\n+ }\n+\n+ this._adjustParentTreeWeight(parentElement, -weight);\n+ removedElementIDs.set(id, parentID);\n+\n+ this._ownersMap.delete(id);\n+ if (ownerID > 0) {\n+ const set = this._ownersMap.get(ownerID);\n+ if (set !== undefined) {\n+ set.delete(id);\n+ }\n+ }\n+ }\n+ break;\n+ }\n+ case TREE_OPERATION_REORDER_CHILDREN: {\n+ const id = ((operations[i + 1]: any): number);\n+ const numChildren = ((operations[i + 2]: any): number);\n+ i = i + 3;\n+\n+ if (!this._idToElement.has(id)) {\n+ throw Error(\n+ `Cannot reorder children for node ${id} because no matching node was found in the Store.`\n+ );\n+ }\n+\n+ const element = ((this._idToElement.get(id): any): Element);\n+ const children = element.children;\n+ if (children.length !== numChildren) {\n+ throw Error(\n+ `Children cannot be added or removed during a reorder operation.`\n+ );\n+ }\n+\n+ for (let j = 0; j < numChildren; j++) {\n+ const childID = operations[i + j];\n+ children[j] = childID;\n+ if (__DEV__) {\n+ \/\/ This check is more expensive so it's gated by __DEV__.\n+ const childElement = this._idToElement.get(childID);\n+ if (childElement == null || childElement.parentID !== id) {\n+ console.error(\n+ `Children cannot be added or removed during a reorder operation.`\n+ );\n+ }\n+ }\n+ }\n+ i = i + numChildren;\n+\n+ if (__DEBUG__) {\n+ debug('Re-order', `Node ${id} children ${children.join(',')}`);\n+ }\n+ break;\n+ }\n+ case TREE_OPERATION_UPDATE_TREE_BASE_DURATION:\n+ \/\/ Base duration updates are only sent while profiling is in progress.\n+ \/\/ We can ignore them at this point.\n+ \/\/ The profiler UI uses them lazily in order to generate the tree.\n+ i = i + 3;\n+ break;\n+ default:\n+ throw Error(`Unsupported Bridge operation ${operation}`);\n+ }\n+ }\n+\n+ this._revision++;\n+\n+ if (haveRootsChanged) {\n+ const prevSupportsProfiling = this._supportsProfiling;\n+\n+ this._hasOwnerMetadata = false;\n+ this._supportsProfiling = false;\n+ this._rootIDToCapabilities.forEach(\n+ ({ hasOwnerMetadata, supportsProfiling }) => {\n+ if (hasOwnerMetadata) {\n+ this._hasOwnerMetadata = true;\n+ }\n+ if (supportsProfiling) {\n+ this._supportsProfiling = true;\n+ }\n+ }\n+ );\n+\n+ this.emit('roots');\n+\n+ if (this._supportsProfiling !== prevSupportsProfiling) {\n+ this.emit('supportsProfiling');\n+ }\n+ }\n+\n+ if (__DEBUG__) {\n+ console.log(printStore(this, true));\n+ console.groupEnd();\n+ }\n+\n+ this.emit('mutated', [addedElementIDs, removedElementIDs]);\n+ };\n+\n+ \/\/ Certain backends save filters on a per-domain basis.\n+ \/\/ In order to prevent filter preferences and applied filters from being out of sync,\n+ \/\/ this message enables the backend to override the frontend's current (\"saved\") filters.\n+ \/\/ This action should also override the saved filters too,\n+ \/\/ else reloading the frontend without reloading the backend would leave things out of sync.\n+ onBridgeOverrideComponentFilters = (\n+ componentFilters: Array<ComponentFilter>\n+ ) => {\n+ this._componentFilters = componentFilters;\n+\n+ saveComponentFilters(componentFilters);\n+ };\n+\n+ onBridgeShutdown = () => {\n+ if (__DEBUG__) {\n+ debug('onBridgeShutdown', 'unsubscribing from Bridge');\n+ }\n+\n+ this._bridge.removeListener('operations', this.onBridgeOperations);\n+ this._bridge.removeListener('shutdown', this.onBridgeShutdown);\n+ this._bridge.removeListener(\n+ 'isBackendStorageAPISupported',\n+ this.onBridgeStorageSupported\n+ );\n+ };\n+\n+ onBridgeStorageSupported = (isBackendStorageAPISupported: boolean) => {\n+ this._isBackendStorageAPISupported = isBackendStorageAPISupported;\n+\n+ this.emit('supportsReloadAndProfile');\n+ };\n+}\ndiff --git a\/src\/devtools\/views\/Button.css b\/src\/devtools\/views\/Button.css\nnew file mode 100644\nindex 0000000000..d3885372b4\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Button.css\n@@ -0,0 +1,37 @@\n+.Button {\n+ border: none;\n+ background: var(--color-button-background);\n+ color: var(--color-button);\n+ padding: 0;\n+ border-radius: 0.25rem;\n+ flex: 0 0 auto;\n+}\n+.ButtonContent {\n+ display: inline-flex;\n+ align-items: center;\n+ border-radius: 0.25rem;\n+ padding: 0.25rem;\n+}\n+\n+.Button:hover {\n+ color: var(--color-button-hover);\n+}\n+.Button:active {\n+ color: var(--color-button-focus);\n+ outline: none;\n+}\n+.Button:focus,\n+.ButtonContent:focus {\n+ outline: none;\n+}\n+\n+.Button:focus > .ButtonContent {\n+ background: var(--color-button-background-focus);\n+}\n+\n+.Button:disabled,\n+.Button:disabled:active {\n+ background: var(--color-button-background);\n+ color: var(--color-button-disabled);\n+ cursor: default;\n+}\ndiff --git a\/src\/devtools\/views\/Button.js b\/src\/devtools\/views\/Button.js\nnew file mode 100644\nindex 0000000000..bb55bca22f\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Button.js\n@@ -0,0 +1,38 @@\n+\/\/ @flow\n+\n+import React from 'react';\n+import Tooltip from '@reach\/tooltip';\n+\n+import styles from '.\/Button.css';\n+import tooltipStyles from '.\/Tooltip.css';\n+\n+type Props = {\n+ children: React$Node,\n+ className?: string,\n+ title?: string,\n+};\n+\n+export default function Button({\n+ children,\n+ className = '',\n+ title = '',\n+ ...rest\n+}: Props) {\n+ let button = (\n+ <button className={`${styles.Button} ${className}`} {...rest}>\n+ <span className={`${styles.ButtonContent} ${className}`} tabIndex={-1}>\n+ {children}\n+ <\/span>\n+ <\/button>\n+ );\n+\n+ if (title) {\n+ button = (\n+ <Tooltip className={tooltipStyles.Tooltip} label={title}>\n+ {button}\n+ <\/Tooltip>\n+ );\n+ }\n+\n+ return button;\n+}\ndiff --git a\/src\/devtools\/views\/ButtonIcon.css b\/src\/devtools\/views\/ButtonIcon.css\nnew file mode 100644\nindex 0000000000..b21c094828\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/ButtonIcon.css\n@@ -0,0 +1,5 @@\n+.ButtonIcon {\n+ width: 1rem;\n+ height: 1rem;\n+ fill: currentColor;\n+}\ndiff --git a\/src\/devtools\/views\/ButtonIcon.js b\/src\/devtools\/views\/ButtonIcon.js\nnew file mode 100644\nindex 0000000000..6c3887fe66\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/ButtonIcon.js\n@@ -0,0 +1,240 @@\n+\/\/ @flow\n+\n+import React from 'react';\n+import styles from '.\/ButtonIcon.css';\n+\n+export type IconType =\n+ | 'add'\n+ | 'cancel'\n+ | 'clear'\n+ | 'close'\n+ | 'collapsed'\n+ | 'copy'\n+ | 'delete'\n+ | 'down'\n+ | 'expanded'\n+ | 'export'\n+ | 'filter'\n+ | 'import'\n+ | 'log-data'\n+ | 'more'\n+ | 'next'\n+ | 'previous'\n+ | 'record'\n+ | 'reload'\n+ | 'save'\n+ | 'search'\n+ | 'settings'\n+ | 'suspend'\n+ | 'undo'\n+ | 'up'\n+ | 'view-dom'\n+ | 'view-source';\n+\n+type Props = {|\n+ className?: string,\n+ type: IconType,\n+|};\n+\n+export default function ButtonIcon({ className = '', type }: Props) {\n+ let pathData = null;\n+ switch (type) {\n+ case 'add':\n+ pathData = PATH_ADD;\n+ break;\n+ case 'cancel':\n+ pathData = PATH_CANCEL;\n+ break;\n+ case 'clear':\n+ pathData = PATH_CLEAR;\n+ break;\n+ case 'close':\n+ pathData = PATH_CLOSE;\n+ break;\n+ case 'collapsed':\n+ pathData = PATH_COLLAPSED;\n+ break;\n+ case 'copy':\n+ pathData = PATH_COPY;\n+ break;\n+ case 'delete':\n+ pathData = PATH_DELETE;\n+ break;\n+ case 'down':\n+ pathData = PATH_DOWN;\n+ break;\n+ case 'expanded':\n+ pathData = PATH_EXPANDED;\n+ break;\n+ case 'export':\n+ pathData = PATH_EXPORT;\n+ break;\n+ case 'filter':\n+ pathData = PATH_FILTER;\n+ break;\n+ case 'import':\n+ pathData = PATH_IMPORT;\n+ break;\n+ case 'log-data':\n+ pathData = PATH_LOG_DATA;\n+ break;\n+ case 'more':\n+ pathData = PATH_MORE;\n+ break;\n+ case 'next':\n+ pathData = PATH_NEXT;\n+ break;\n+ case 'previous':\n+ pathData = PATH_PREVIOUS;\n+ break;\n+ case 'record':\n+ pathData = PATH_RECORD;\n+ break;\n+ case 'reload':\n+ pathData = PATH_RELOAD;\n+ break;\n+ case 'save':\n+ pathData = PATH_SAVE;\n+ break;\n+ case 'search':\n+ pathData = PATH_SEARCH;\n+ break;\n+ case 'settings':\n+ pathData = PATH_SETTINGS;\n+ break;\n+ case 'suspend':\n+ pathData = PATH_SUSPEND;\n+ break;\n+ case 'undo':\n+ pathData = PATH_UNDO;\n+ break;\n+ case 'up':\n+ pathData = PATH_UP;\n+ break;\n+ case 'view-dom':\n+ pathData = PATH_VIEW_DOM;\n+ break;\n+ case 'view-source':\n+ pathData = PATH_VIEW_SOURCE;\n+ break;\n+ default:\n+ console.warn(`Unsupported type \"${type}\" specified for ButtonIcon`);\n+ break;\n+ }\n+\n+ return (\n+ <svg\n+ xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\n+ className={`${styles.ButtonIcon} ${className}`}\n+ width=\"24\"\n+ height=\"24\"\n+ viewBox=\"0 0 24 24\"\n+ >\n+ <path d=\"M0 0h24v24H0z\" fill=\"none\" \/>\n+ <path fill=\"currentColor\" d={pathData} \/>\n+ <\/svg>\n+ );\n+}\n+\n+const PATH_ADD =\n+ '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';\n+\n+const PATH_CANCEL = `\n+ 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\n+`;\n+\n+const PATH_CLEAR = `\n+ 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\n+ 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\n+`;\n+\n+const PATH_CLOSE =\n+ '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';\n+\n+const PATH_COLLAPSED = 'M10 17l5-5-5-5v10z';\n+\n+const PATH_COPY = `\n+ M3 13h2v-2H3v2zm0 4h2v-2H3v2zm2 4v-2H3a2 2 0 0 0 2 2zM3 9h2V7H3v2zm12 12h2v-2h-2v2zm4-18H9a2 2 0 0 0-2\n+ 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\n+`;\n+\n+const PATH_DELETE = `\n+ 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\n+ 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\n+`;\n+\n+const PATH_DOWN = 'M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z';\n+\n+const PATH_EXPANDED = 'M7 10l5 5 5-5z';\n+\n+const PATH_EXPORT = 'M15.82,2.14v7H21l-9,9L3,9.18H8.18v-7ZM3,20.13H21v1.73H3Z';\n+\n+const PATH_FILTER = 'M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z';\n+\n+const PATH_IMPORT = 'M8.18,18.13v-7H3l9-8.95,9,9H15.82v7ZM3,20.13H21v1.73H3Z';\n+\n+const PATH_LOG_DATA = `\n+ 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\n+ 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\n+ 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\n+ 8h-4v-2h4v2zm0-4h-4v-2h4v2z\n+`;\n+\n+const PATH_MORE = `\n+ 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 \n+ 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\n+`;\n+\n+const PATH_NEXT = 'M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z';\n+\n+const PATH_PREVIOUS =\n+ 'M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z';\n+\n+const PATH_RECORD = 'M4,12a8,8 0 1,0 16,0a8,8 0 1,0 -16,0';\n+\n+const PATH_RELOAD = `\n+ 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\n+ 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\n+ 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\n+`;\n+\n+const PATH_SAVE = `\n+ 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\n+`;\n+\n+const PATH_SEARCH = `\n+ 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\n+ 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\n+`;\n+\n+const PATH_SETTINGS = `\n+ 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\n+ 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\n+ 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\n+ 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\n+ 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\n+ 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\n+ 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z\n+`;\n+\n+const PATH_SUSPEND = `\n+ 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\n+ 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\n+`;\n+\n+const PATH_UNDO = `\n+ 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\n+ 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z\n+`;\n+\n+const PATH_UP = 'M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z';\n+\n+const PATH_VIEW_DOM = `\n+ 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\n+ 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\n+ 3-1.34 3-3-1.34-3-3-3z\n+`;\n+\n+const PATH_VIEW_SOURCE = `\n+ 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\n+ `;\ndiff --git a\/src\/devtools\/views\/Components\/Badge.css b\/src\/devtools\/views\/Components\/Badge.css\nnew file mode 100644\nindex 0000000000..22f749cc5b\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/Badge.css\n@@ -0,0 +1,17 @@\n+.Badge {\n+ display: inline-block;\n+ background-color: var(--color-component-badge-background);\n+ color: var(--color-text);\n+ padding: 0.125rem 0.25rem;\n+ line-height: normal;\n+ border-radius: 0.125rem;\n+ margin-right: 0.25rem;\n+ font-family: var(--font-family-monospace);\n+ font-size: var(--font-size-monospace-small);\n+}\n+\n+.ExtraLabel {\n+ font-family: var(--font-family-monospace);\n+ font-size: var(--font-size-monospace-small);\n+ color: var(--color-component-badge-count);\n+}\ndiff --git a\/src\/devtools\/views\/Components\/Badge.js b\/src\/devtools\/views\/Components\/Badge.js\nnew file mode 100644\nindex 0000000000..76ac7bf624\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/Badge.js\n@@ -0,0 +1,47 @@\n+\/\/ @flow\n+\n+import React, { Fragment } from 'react';\n+import { ElementTypeMemo, ElementTypeForwardRef } from 'src\/types';\n+import styles from '.\/Badge.css';\n+\n+import type { ElementType } from 'src\/types';\n+\n+type Props = {|\n+ className?: string,\n+ hocDisplayNames: Array<string> | null,\n+ type: ElementType,\n+|};\n+\n+export default function Badge({ className, hocDisplayNames, type }: Props) {\n+ let hocDisplayName = null;\n+ let totalBadgeCount = 0;\n+ let typeLabel = null;\n+\n+ if (hocDisplayNames !== null) {\n+ hocDisplayName = hocDisplayNames[0];\n+ totalBadgeCount += hocDisplayNames.length;\n+ }\n+\n+ if (type === ElementTypeMemo) {\n+ typeLabel = 'Memo';\n+ totalBadgeCount++;\n+ } else if (type === ElementTypeForwardRef) {\n+ typeLabel = 'ForwardRef';\n+ totalBadgeCount++;\n+ }\n+\n+ if (hocDisplayNames === null && typeLabel === null) {\n+ return null;\n+ }\n+\n+ return (\n+ <Fragment>\n+ <div className={`${styles.Badge} ${className || ''}`}>\n+ {hocDisplayName || typeLabel}\n+ <\/div>\n+ {totalBadgeCount > 1 && (\n+ <div className={styles.ExtraLabel}>+{totalBadgeCount - 1}<\/div>\n+ )}\n+ <\/Fragment>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/Components\/Components.css b\/src\/devtools\/views\/Components\/Components.css\nnew file mode 100644\nindex 0000000000..f37b3eaa73\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/Components.css\n@@ -0,0 +1,45 @@\n+.Components {\n+ position: relative;\n+ width: 100%;\n+ height: 100%;\n+ display: flex;\n+ flex-direction: row;\n+ background-color: var(--color-background);\n+ color: var(--color-text);\n+ font-family: var(--font-family-sans);\n+}\n+\n+.TreeWrapper {\n+ flex: 0 0 65%;\n+ overflow: auto;\n+}\n+\n+.SelectedElementWrapper {\n+ flex: 0 0 35%;\n+ overflow-x: hidden;\n+ overflow-y: auto;\n+}\n+\n+@media screen and (max-width: 600px) {\n+ .Components {\n+ flex-direction: column;\n+ }\n+\n+ .TreeWrapper {\n+ flex: 0 0 50%;\n+ }\n+\n+ .SelectedElementWrapper {\n+ flex: 0 0 50%;\n+ }\n+}\n+\n+.Loading {\n+ height: 100%;\n+ padding-left: 0.5rem;\n+ display: flex;\n+ align-items: center;\n+ justify-content: center;\n+ font-size: var(--font-size-sans-large);\n+ color: var(--color-dim);\n+}\ndiff --git a\/src\/devtools\/views\/Components\/Components.js b\/src\/devtools\/views\/Components\/Components.js\nnew file mode 100644\nindex 0000000000..2623041e0c\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/Components.js\n@@ -0,0 +1,46 @@\n+\/\/ @flow\n+\n+import React, { Suspense } from 'react';\n+import Tree from '.\/Tree';\n+import SelectedElement from '.\/SelectedElement';\n+import { InspectedElementContextController } from '.\/InspectedElementContext';\n+import { NativeStyleContextController } from '.\/NativeStyleEditor\/context';\n+import { OwnersListContextController } from '.\/OwnersListContext';\n+import portaledContent from '..\/portaledContent';\n+import { ModalDialog } from '..\/ModalDialog';\n+import SettingsModal from 'src\/devtools\/views\/Settings\/SettingsModal';\n+import { SettingsModalContextController } from 'src\/devtools\/views\/Settings\/SettingsModalContext';\n+\n+import styles from '.\/Components.css';\n+\n+function Components(_: {||}) {\n+ \/\/ TODO Flex wrappers below should be user resizable.\n+ return (\n+ <SettingsModalContextController>\n+ <OwnersListContextController>\n+ <InspectedElementContextController>\n+ <div className={styles.Components}>\n+ <div className={styles.TreeWrapper}>\n+ <Tree \/>\n+ <\/div>\n+ <div className={styles.SelectedElementWrapper}>\n+ <NativeStyleContextController>\n+ <Suspense fallback={<Loading \/>}>\n+ <SelectedElement \/>\n+ <\/Suspense>\n+ <\/NativeStyleContextController>\n+ <\/div>\n+ <ModalDialog \/>\n+ <SettingsModal \/>\n+ <\/div>\n+ <\/InspectedElementContextController>\n+ <\/OwnersListContextController>\n+ <\/SettingsModalContextController>\n+ );\n+}\n+\n+function Loading() {\n+ return <div className={styles.Loading}>Loading...<\/div>;\n+}\n+\n+export default portaledContent(Components);\ndiff --git a\/src\/devtools\/views\/Components\/EditableValue.css b\/src\/devtools\/views\/Components\/EditableValue.css\nnew file mode 100644\nindex 0000000000..3087b85261\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/EditableValue.css\n@@ -0,0 +1,30 @@\n+.CheckboxLabel {\n+ flex: 1 1 100%;\n+ display: flex;\n+}\n+.CheckboxLabel:focus-within {\n+ background-color: var(--color-button-background-focus);\n+}\n+\n+.Checkbox:focus {\n+ outline: none;\n+}\n+\n+.Input {\n+ flex: 1 1;\n+ background: none;\n+ border: 1px solid transparent;\n+ color: var(--color-attribute-editable-value);\n+ border-radius: 0.125rem;\n+ font-family: var(--font-family-monospace);\n+ font-size: var(--font-size-monospace-normal);\n+}\n+.Input:focus {\n+ background-color: var(--color-button-background-focus);\n+ outline: none;\n+}\n+\n+.ResetButton {\n+ flex: 0 0 auto;\n+ padding: 0 0.5rem;\n+}\ndiff --git a\/src\/devtools\/views\/Components\/EditableValue.js b\/src\/devtools\/views\/Components\/EditableValue.js\nnew file mode 100644\nindex 0000000000..3238315a15\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/EditableValue.js\n@@ -0,0 +1,139 @@\n+\/\/ @flow\n+\n+import React, { Fragment, useCallback, useRef, useState } from 'react';\n+import Button from '..\/Button';\n+import ButtonIcon from '..\/ButtonIcon';\n+import styles from '.\/EditableValue.css';\n+\n+type OverrideValueFn = (path: Array<string | number>, value: any) => void;\n+\n+type EditableValueProps = {|\n+ dataType: string,\n+ overrideValueFn: OverrideValueFn,\n+ path: Array<string | number>,\n+ value: any,\n+|};\n+\n+export default function EditableValue({\n+ dataType,\n+ overrideValueFn,\n+ path,\n+ value,\n+}: EditableValueProps) {\n+ const [hasPendingChanges, setHasPendingChanges] = useState(false);\n+ const [editableValue, setEditableValue] = useState(value);\n+ const inputRef = useRef<HTMLInputElement | null>(null);\n+\n+ if (hasPendingChanges && editableValue === value) {\n+ setHasPendingChanges(false);\n+ }\n+\n+ const handleChange = useCallback(\n+ ({ target }) => {\n+ if (dataType === 'boolean') {\n+ setEditableValue(target.checked);\n+ overrideValueFn(path, target.checked);\n+ } else {\n+ setEditableValue(target.value);\n+ }\n+ setHasPendingChanges(true);\n+ },\n+ [dataType, overrideValueFn, path]\n+ );\n+\n+ const handleReset = useCallback(() => {\n+ setEditableValue(value);\n+ setHasPendingChanges(false);\n+\n+ if (inputRef.current !== null) {\n+ inputRef.current.focus();\n+ }\n+ }, [value]);\n+\n+ const handleKeyDown = useCallback(\n+ event => {\n+ \/\/ Prevent keydown events from e.g. change selected element in the tree\n+ event.stopPropagation();\n+\n+ const { key } = event;\n+\n+ if (key === 'Enter') {\n+ if (dataType === 'number') {\n+ const parsedValue = parseFloat(editableValue);\n+ if (!Number.isNaN(parsedValue)) {\n+ overrideValueFn(path, parsedValue);\n+ }\n+ } else {\n+ overrideValueFn(path, editableValue);\n+ }\n+\n+ \/\/ Don't reset the pending change flag here.\n+ \/\/ The inspected fiber won't be updated until after the next \"inspectElement\" message.\n+ \/\/ We'll reset that flag during a subsequent render.\n+ } else if (key === 'Escape') {\n+ setEditableValue(value);\n+ setHasPendingChanges(false);\n+ }\n+ },\n+ [editableValue, dataType, overrideValueFn, path, value]\n+ );\n+\n+ \/\/ Render different input types based on the dataType\n+ let type = 'text';\n+ if (dataType === 'boolean') {\n+ type = 'checkbox';\n+ } else if (dataType === 'number') {\n+ type = 'number';\n+ }\n+\n+ let inputValue = value == null ? '' : value;\n+ if (hasPendingChanges) {\n+ inputValue = editableValue == null ? '' : editableValue;\n+ }\n+\n+ let placeholder = '';\n+ if (value === null) {\n+ placeholder = '(null)';\n+ } else if (value === undefined) {\n+ placeholder = '(undefined)';\n+ } else if (dataType === 'string') {\n+ placeholder = '(string)';\n+ }\n+\n+ return (\n+ <Fragment>\n+ {dataType === 'boolean' && (\n+ <label className={styles.CheckboxLabel}>\n+ <input\n+ checked={inputValue}\n+ className={styles.Checkbox}\n+ onChange={handleChange}\n+ onKeyDown={handleKeyDown}\n+ ref={inputRef}\n+ type={type}\n+ \/>\n+ <\/label>\n+ )}\n+ {dataType !== 'boolean' && (\n+ <input\n+ className={styles.Input}\n+ onChange={handleChange}\n+ onKeyDown={handleKeyDown}\n+ placeholder={placeholder}\n+ ref={inputRef}\n+ type={type}\n+ value={inputValue}\n+ \/>\n+ )}\n+ {hasPendingChanges && dataType !== 'boolean' && (\n+ <Button\n+ className={styles.ResetButton}\n+ onClick={handleReset}\n+ title=\"Reset value\"\n+ >\n+ <ButtonIcon type=\"undo\" \/>\n+ <\/Button>\n+ )}\n+ <\/Fragment>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/Components\/Element.css b\/src\/devtools\/views\/Components\/Element.css\nnew file mode 100644\nindex 0000000000..f71e9f479f\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/Element.css\n@@ -0,0 +1,75 @@\n+.Element,\n+.InactiveSelectedElement,\n+.SelectedElement,\n+.HoveredElement {\n+ color: var(--color-component-name);\n+}\n+.HoveredElement {\n+ background-color: var(--color-background-hover);\n+}\n+.InactiveSelectedElement {\n+ background-color: var(--color-background-inactive);\n+}\n+\n+.Wrapper {\n+ padding: 0 0.25rem;\n+ white-space: nowrap;\n+ height: var(--line-height-data);\n+ line-height: var(--line-height-data);\n+ display: inline-flex;\n+ align-items: center;\n+ cursor: default;\n+ user-select: none;\n+}\n+\n+.ScrollAnchor {\n+ height: 100%;\n+ width: 0;\n+}\n+\n+.SelectedElement {\n+ background-color: var(--color-background-selected);\n+ color: var(--color-text-selected);\n+\n+ \/* Invert colors *\/\n+ --color-component-name: var(--color-component-name-inverted);\n+ --color-text: var(--color-text-selected);\n+ --color-component-badge-background: var(\n+ --color-component-badge-background-inverted\n+ );\n+ --color-component-badge-count: var(--color-component-badge-count-inverted);\n+ --color-attribute-name: var(--color-attribute-name-inverted);\n+ --color-attribute-value: var(--color-attribute-value-inverted);\n+ --color-expand-collapse-toggle: var(--color-component-name-inverted);\n+}\n+\n+.KeyName {\n+ color: var(--color-attribute-name);\n+}\n+\n+.KeyValue {\n+ color: var(--color-attribute-value);\n+ user-select: text;\n+ max-width: 100px;\n+ overflow-x: hidden;\n+ text-overflow: ellipsis;\n+}\n+\n+.Highlight {\n+ background-color: var(--color-search-match);\n+}\n+.CurrentHighlight {\n+ background-color: var(--color-search-match-current);\n+}\n+\n+.ExpandCollapseToggle {\n+ display: inline-flex;\n+ width: 1rem;\n+ height: 1rem;\n+ flex: 0 0 1rem;\n+ color: var(--color-expand-collapse-toggle);\n+}\n+\n+.Badge {\n+ margin-left: 0.25rem;\n+}\ndiff --git a\/src\/devtools\/views\/Components\/Element.js b\/src\/devtools\/views\/Components\/Element.js\nnew file mode 100644\nindex 0000000000..dc7f52c065\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/Element.js\n@@ -0,0 +1,231 @@\n+\/\/ @flow\n+\n+import React, { Fragment, useContext, useMemo, useState } from 'react';\n+import Store from 'src\/devtools\/store';\n+import Badge from '.\/Badge';\n+import ButtonIcon from '..\/ButtonIcon';\n+import { createRegExp } from '..\/utils';\n+import { TreeDispatcherContext, TreeStateContext } from '.\/TreeContext';\n+import { StoreContext } from '..\/context';\n+\n+import type { ItemData } from '.\/Tree';\n+import type { Element } from '.\/types';\n+\n+import styles from '.\/Element.css';\n+\n+type Props = {\n+ data: ItemData,\n+ index: number,\n+ style: Object,\n+};\n+\n+export default function ElementView({ data, index, style }: Props) {\n+ const store = useContext(StoreContext);\n+ const { ownerFlatTree, ownerID, selectedElementID } = useContext(\n+ TreeStateContext\n+ );\n+ const dispatch = useContext(TreeDispatcherContext);\n+\n+ const element =\n+ ownerFlatTree !== null\n+ ? ownerFlatTree[index]\n+ : store.getElementAtIndex(index);\n+\n+ const [isHovered, setIsHovered] = useState(false);\n+\n+ const { isNavigatingWithKeyboard, onElementMouseEnter, treeFocused } = data;\n+ const id = element === null ? null : element.id;\n+ const isSelected = selectedElementID === id;\n+\n+ const handleDoubleClick = () => {\n+ if (id !== null) {\n+ dispatch({ type: 'SELECT_OWNER', payload: id });\n+ }\n+ };\n+\n+ const handleMouseDown = ({ metaKey }) => {\n+ if (id !== null) {\n+ dispatch({\n+ type: 'SELECT_ELEMENT_BY_ID',\n+ payload: metaKey ? null : id,\n+ });\n+ }\n+ };\n+\n+ const handleMouseEnter = () => {\n+ setIsHovered(true);\n+ if (id !== null) {\n+ onElementMouseEnter(id);\n+ }\n+ };\n+\n+ const handleMouseLeave = () => {\n+ setIsHovered(false);\n+ };\n+\n+ const handleKeyDoubleClick = event => {\n+ \/\/ Double clicks on key value are used for text selection (if the text has been truncated).\n+ \/\/ They should not enter the owners tree view.\n+ event.stopPropagation();\n+ event.preventDefault();\n+ };\n+\n+ \/\/ Handle elements that are removed from the tree while an async render is in progress.\n+ if (element == null) {\n+ console.warn(`<ElementView> Could not find element at index ${index}`);\n+\n+ \/\/ This return needs to happen after hooks, since hooks can't be conditional.\n+ return null;\n+ }\n+\n+ const {\n+ depth,\n+ displayName,\n+ hocDisplayNames,\n+ key,\n+ type,\n+ } = ((element: any): Element);\n+\n+ let className = styles.Element;\n+ if (isSelected) {\n+ className = treeFocused\n+ ? styles.SelectedElement\n+ : styles.InactiveSelectedElement;\n+ } else if (isHovered && !isNavigatingWithKeyboard) {\n+ className = styles.HoveredElement;\n+ }\n+\n+ return (\n+ <div\n+ className={className}\n+ onMouseEnter={handleMouseEnter}\n+ onMouseLeave={handleMouseLeave}\n+ onMouseDown={handleMouseDown}\n+ onDoubleClick={handleDoubleClick}\n+ style={style}\n+ data-depth={depth}\n+ >\n+ {\/* This wrapper is used by Tree for measurement purposes. *\/}\n+ <div\n+ className={styles.Wrapper}\n+ style={{\n+ \/\/ Left offset presents the appearance of a nested tree structure.\n+ \/\/ We must use padding rather than margin\/left because of the selected background color.\n+ transform: `translateX(calc(${depth} * var(--indentation-size)))`,\n+ }}\n+ >\n+ {ownerID === null ? (\n+ <ExpandCollapseToggle element={element} store={store} \/>\n+ ) : null}\n+ <DisplayName displayName={displayName} id={((id: any): number)} \/>\n+ {key && (\n+ <Fragment>\n+ <span className={styles.KeyName}>key<\/span>=\"\n+ <span\n+ className={styles.KeyValue}\n+ title={key}\n+ onDoubleClick={handleKeyDoubleClick}\n+ >\n+ {key}\n+ <\/span>\n+ \"\n+ <\/Fragment>\n+ )}\n+ <Badge\n+ className={styles.Badge}\n+ hocDisplayNames={hocDisplayNames}\n+ type={type}\n+ \/>\n+ <\/div>\n+ <\/div>\n+ );\n+}\n+\n+\/\/ Prevent double clicks on toggle from drilling into the owner list.\n+const swallowDoubleClick = event => {\n+ event.preventDefault();\n+ event.stopPropagation();\n+};\n+\n+type ExpandCollapseToggleProps = {|\n+ element: Element,\n+ store: Store,\n+|};\n+\n+function ExpandCollapseToggle({ element, store }: ExpandCollapseToggleProps) {\n+ const { children, id, isCollapsed } = element;\n+\n+ const toggleCollapsed = event => {\n+ event.preventDefault();\n+ event.stopPropagation();\n+\n+ store.toggleIsCollapsed(id, !isCollapsed);\n+ };\n+\n+ const stopPropagation = event => {\n+ \/\/ Prevent the row from selecting\n+ event.stopPropagation();\n+ };\n+\n+ if (children.length === 0) {\n+ return <div className={styles.ExpandCollapseToggle} \/>;\n+ }\n+\n+ return (\n+ <div\n+ className={styles.ExpandCollapseToggle}\n+ onMouseDown={stopPropagation}\n+ onClick={toggleCollapsed}\n+ onDoubleClick={swallowDoubleClick}\n+ >\n+ <ButtonIcon type={isCollapsed ? 'collapsed' : 'expanded'} \/>\n+ <\/div>\n+ );\n+}\n+\n+type DisplayNameProps = {|\n+ displayName: string | null,\n+ id: number,\n+|};\n+\n+function DisplayName({ displayName, id }: DisplayNameProps) {\n+ const { searchIndex, searchResults, searchText } = useContext(\n+ TreeStateContext\n+ );\n+ const isSearchResult = useMemo(() => {\n+ return searchResults.includes(id);\n+ }, [id, searchResults]);\n+ const isCurrentResult =\n+ searchIndex !== null && id === searchResults[searchIndex];\n+\n+ if (!isSearchResult || displayName === null) {\n+ return displayName;\n+ }\n+\n+ const match = createRegExp(searchText).exec(displayName);\n+\n+ if (match === null) {\n+ return displayName;\n+ }\n+\n+ const startIndex = match.index;\n+ const stopIndex = startIndex + match[0].length;\n+\n+ const children = [];\n+ if (startIndex > 0) {\n+ children.push(<span key=\"begin\">{displayName.slice(0, startIndex)}<\/span>);\n+ }\n+ children.push(\n+ <mark\n+ key=\"middle\"\n+ className={isCurrentResult ? styles.CurrentHighlight : styles.Highlight}\n+ >\n+ {displayName.slice(startIndex, stopIndex)}\n+ <\/mark>\n+ );\n+ if (stopIndex < displayName.length) {\n+ children.push(<span key=\"end\">{displayName.slice(stopIndex)}<\/span>);\n+ }\n+\n+ return children;\n+}\ndiff --git a\/src\/devtools\/views\/Components\/ExpandCollapseToggle.css b\/src\/devtools\/views\/Components\/ExpandCollapseToggle.css\nnew file mode 100644\nindex 0000000000..38b2aa6f7e\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/ExpandCollapseToggle.css\n@@ -0,0 +1,7 @@\n+.ExpandCollapseToggle {\n+ flex: 0 0 1rem;\n+ width: 1rem;\n+ height: 1rem;\n+ padding: 0;\n+ color: var(--color-expand-collapse-toggle);\n+}\ndiff --git a\/src\/devtools\/views\/Components\/ExpandCollapseToggle.js b\/src\/devtools\/views\/Components\/ExpandCollapseToggle.js\nnew file mode 100644\nindex 0000000000..61fdca7f33\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/ExpandCollapseToggle.js\n@@ -0,0 +1,27 @@\n+\/\/ @flow\n+\n+import React from 'react';\n+import Button from '..\/Button';\n+import ButtonIcon from '..\/ButtonIcon';\n+\n+import styles from '.\/ExpandCollapseToggle.css';\n+\n+type ExpandCollapseToggleProps = {|\n+ isOpen: boolean,\n+ setIsOpen: Function,\n+|};\n+\n+export default function ExpandCollapseToggle({\n+ isOpen,\n+ setIsOpen,\n+}: ExpandCollapseToggleProps) {\n+ return (\n+ <Button\n+ className={styles.ExpandCollapseToggle}\n+ onClick={() => setIsOpen(prevIsOpen => !prevIsOpen)}\n+ title={`${isOpen ? 'Collapse' : 'Expand'} prop value`}\n+ >\n+ <ButtonIcon type={isOpen ? 'expanded' : 'collapsed'} \/>\n+ <\/Button>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/Components\/HocBadges.css b\/src\/devtools\/views\/Components\/HocBadges.css\nnew file mode 100644\nindex 0000000000..4b37be0325\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/HocBadges.css\n@@ -0,0 +1,16 @@\n+.HocBadges {\n+ padding: 0.125rem 0.25rem;\n+ user-select: none;\n+}\n+\n+.Badge {\n+ display: inline-block;\n+ background-color: var(--color-component-badge-background);\n+ color: var(--color-text);\n+ padding: 0.125rem 0.25rem;\n+ line-height: normal;\n+ border-radius: 0.125rem;\n+ margin-right: 0.25rem;\n+ font-family: var(--font-family-monospace);\n+ font-size: var(--font-size-monospace-small);\n+}\ndiff --git a\/src\/devtools\/views\/Components\/HocBadges.js b\/src\/devtools\/views\/Components\/HocBadges.js\nnew file mode 100644\nindex 0000000000..6cd329e826\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/HocBadges.js\n@@ -0,0 +1,38 @@\n+\/\/ @flow\n+\n+import React from 'react';\n+import { ElementTypeForwardRef, ElementTypeMemo } from 'src\/types';\n+import styles from '.\/HocBadges.css';\n+\n+import type { Element } from '.\/types';\n+\n+type Props = {|\n+ element: Element,\n+|};\n+\n+export default function HocBadges({ element }: Props) {\n+ const { hocDisplayNames, type } = ((element: any): Element);\n+\n+ let typeBadge = null;\n+ if (type === ElementTypeMemo) {\n+ typeBadge = 'Memo';\n+ } else if (type === ElementTypeForwardRef) {\n+ typeBadge = 'ForwardRef';\n+ }\n+\n+ if (hocDisplayNames === null && typeBadge === null) {\n+ return null;\n+ }\n+\n+ return (\n+ <div className={styles.HocBadges}>\n+ {typeBadge !== null && <div className={styles.Badge}>{typeBadge}<\/div>}\n+ {hocDisplayNames !== null &&\n+ hocDisplayNames.map(hocDisplayName => (\n+ <div key={hocDisplayName} className={styles.Badge}>\n+ {hocDisplayName}\n+ <\/div>\n+ ))}\n+ <\/div>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/Components\/HooksTree.css b\/src\/devtools\/views\/Components\/HooksTree.css\nnew file mode 100644\nindex 0000000000..1304c276cc\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/HooksTree.css\n@@ -0,0 +1,69 @@\n+.HooksTreeView {\n+ padding: 0.25rem;\n+ border-top: 1px solid var(--color-border);\n+}\n+\n+.Hook {\n+}\n+\n+.Children {\n+ padding-left: 1rem;\n+}\n+\n+.HeaderRow {\n+ display: flex;\n+ align-items: center;\n+}\n+\n+.Header {\n+ flex: 1 1;\n+ font-family: var(--font-family-sans);\n+}\n+\n+.NameValueRow {\n+ display: flex;\n+}\n+\n+.Name,\n+.NameAnonymous {\n+ flex: 0 0 auto;\n+ user-select: none;\n+}\n+.Name {\n+ color: var(--color-dim);\n+}\n+.NameAnonymous {\n+ color: var(--color-dimmer);\n+}\n+\n+.EditableName {\n+ color: var(--color-attribute-name);\n+ flex: 0 0 auto;\n+ user-select: none;\n+}\n+.EditableName:after,\n+.Name:after {\n+ color: var(--color-text);\n+ content: ': ';\n+ margin-right: 0.5rem;\n+}\n+\n+.Value {\n+ color: var(--color-attribute-value);\n+ overflow: hidden;\n+ text-overflow: ellipsis;\n+}\n+\n+.None {\n+ color: var(--color-dimmer);\n+ font-style: italic;\n+}\n+\n+.TruncationIndicator {\n+ color: var(--color-dimmer);\n+}\n+\n+.ExpandCollapseToggleSpacer {\n+ flex: 0 0 1rem;\n+ width: 1rem;\n+}\ndiff --git a\/src\/devtools\/views\/Components\/HooksTree.js b\/src\/devtools\/views\/Components\/HooksTree.js\nnew file mode 100644\nindex 0000000000..10df0c470a\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/HooksTree.js\n@@ -0,0 +1,286 @@\n+\/\/ @flow\n+\n+import { copy } from 'clipboard-js';\n+import React, { useCallback, useContext, useState } from 'react';\n+import { BridgeContext, StoreContext } from '..\/context';\n+import Button from '..\/Button';\n+import ButtonIcon from '..\/ButtonIcon';\n+import EditableValue from '.\/EditableValue';\n+import ExpandCollapseToggle from '.\/ExpandCollapseToggle';\n+import { InspectedElementContext } from '.\/InspectedElementContext';\n+import KeyValue from '.\/KeyValue';\n+import { serializeHooksForCopy } from '..\/utils';\n+import styles from '.\/HooksTree.css';\n+import { meta } from '..\/..\/..\/hydration';\n+\n+import type { InspectPath } from '.\/SelectedElement';\n+import type { HooksNode, HooksTree } from 'src\/backend\/types';\n+\n+type HooksTreeViewProps = {|\n+ canEditHooks: boolean,\n+ hooks: HooksTree | null,\n+ id: number,\n+|};\n+\n+export function HooksTreeView({ canEditHooks, hooks, id }: HooksTreeViewProps) {\n+ const { getInspectedElementPath } = useContext(InspectedElementContext);\n+ const inspectPath = useCallback(\n+ (path: Array<string | number>) => {\n+ getInspectedElementPath(id, ['hooks', ...path]);\n+ },\n+ [getInspectedElementPath, id]\n+ );\n+ const handleCopy = useCallback(() => copy(serializeHooksForCopy(hooks)), [\n+ hooks,\n+ ]);\n+\n+ if (hooks === null) {\n+ return null;\n+ } else {\n+ return (\n+ <div className={styles.HooksTreeView}>\n+ <div className={styles.HeaderRow}>\n+ <div className={styles.Header}>hooks<\/div>\n+ <Button onClick={handleCopy} title=\"Copy to clipboard\">\n+ <ButtonIcon type=\"copy\" \/>\n+ <\/Button>\n+ <\/div>\n+ <InnerHooksTreeView\n+ canEditHooks={canEditHooks}\n+ hooks={hooks}\n+ id={id}\n+ inspectPath={inspectPath}\n+ path={[]}\n+ \/>\n+ <\/div>\n+ );\n+ }\n+}\n+\n+type InnerHooksTreeViewProps = {|\n+ canEditHooks: boolean,\n+ hooks: HooksTree,\n+ id: number,\n+ inspectPath: InspectPath,\n+ path: Array<string | number>,\n+|};\n+\n+export function InnerHooksTreeView({\n+ canEditHooks,\n+ hooks,\n+ id,\n+ inspectPath,\n+ path,\n+}: InnerHooksTreeViewProps) {\n+ \/\/ $FlowFixMe \"Missing type annotation for U\" whatever that means\n+ return hooks.map((hook, index) => (\n+ <HookView\n+ key={index}\n+ canEditHooks={canEditHooks}\n+ hook={hooks[index]}\n+ id={id}\n+ inspectPath={inspectPath}\n+ path={path.concat([index])}\n+ \/>\n+ ));\n+}\n+\n+type HookViewProps = {|\n+ canEditHooks: boolean,\n+ hook: HooksNode,\n+ id: number,\n+ inspectPath: InspectPath,\n+ path: Array<string | number>,\n+|};\n+\n+function HookView({\n+ canEditHooks,\n+ hook,\n+ id,\n+ inspectPath,\n+ path,\n+}: HookViewProps) {\n+ const { name, id: hookID, isStateEditable, subHooks, value } = hook;\n+\n+ const bridge = useContext(BridgeContext);\n+ const store = useContext(StoreContext);\n+\n+ const [isOpen, setIsOpen] = useState<boolean>(false);\n+\n+ const toggleIsOpen = useCallback(\n+ () => setIsOpen(prevIsOpen => !prevIsOpen),\n+ []\n+ );\n+\n+ if (hook.hasOwnProperty(meta.inspected)) {\n+ \/\/ This Hook is too deep and hasn't been hydrated.\n+ if (__DEV__) {\n+ console.warn('Unexpected dehydrated hook; this is a DevTools error.');\n+ }\n+ return (\n+ <div className={styles.Hook}>\n+ <div className={styles.NameValueRow}>\n+ <span className={styles.TruncationIndicator}>...<\/span>\n+ <\/div>\n+ <\/div>\n+ );\n+ }\n+\n+ const isCustomHook = subHooks.length > 0;\n+\n+ const type = typeof value;\n+\n+ let displayValue;\n+ let isComplexDisplayValue = false;\n+\n+ \/\/ Format data for display to mimic the props\/state\/context for now.\n+ if (type === 'string') {\n+ displayValue = `\"${((value: any): string)}\"`;\n+ } else if (type === 'boolean') {\n+ displayValue = value ? 'true' : 'false';\n+ } else if (type === 'number') {\n+ displayValue = value;\n+ } else if (value === null) {\n+ displayValue = 'null';\n+ } else if (value === undefined) {\n+ displayValue = null;\n+ } else if (Array.isArray(value)) {\n+ isComplexDisplayValue = true;\n+ displayValue = 'Array';\n+ } else if (type === 'object') {\n+ isComplexDisplayValue = true;\n+ displayValue = 'Object';\n+ }\n+\n+ if (isCustomHook) {\n+ const subHooksView = Array.isArray(subHooks) ? (\n+ <InnerHooksTreeView\n+ canEditHooks={canEditHooks}\n+ hooks={subHooks}\n+ id={id}\n+ inspectPath={inspectPath}\n+ path={path.concat(['subHooks'])}\n+ \/>\n+ ) : (\n+ <KeyValue\n+ depth={1}\n+ inspectPath={inspectPath}\n+ name=\"subHooks\"\n+ path={path.concat(['subHooks'])}\n+ value={subHooks}\n+ \/>\n+ );\n+\n+ if (isComplexDisplayValue) {\n+ return (\n+ <div className={styles.Hook}>\n+ <div className={styles.NameValueRow}>\n+ <ExpandCollapseToggle isOpen={isOpen} setIsOpen={setIsOpen} \/>\n+ <span\n+ onClick={toggleIsOpen}\n+ className={name !== '' ? styles.Name : styles.NameAnonymous}\n+ >\n+ {name || 'Anonymous'}\n+ <\/span>\n+ <\/div>\n+ <div className={styles.Children} hidden={!isOpen}>\n+ <KeyValue\n+ depth={1}\n+ inspectPath={inspectPath}\n+ name=\"DebugValue\"\n+ path={path.concat(['value'])}\n+ value={value}\n+ \/>\n+ {subHooksView}\n+ <\/div>\n+ <\/div>\n+ );\n+ } else {\n+ return (\n+ <div className={styles.Hook}>\n+ <div className={styles.NameValueRow}>\n+ <ExpandCollapseToggle isOpen={isOpen} setIsOpen={setIsOpen} \/>\n+ <span\n+ onClick={toggleIsOpen}\n+ className={name !== '' ? styles.Name : styles.NameAnonymous}\n+ >\n+ {name || 'Anonymous'}\n+ <\/span>{' '}\n+ {\/* $FlowFixMe *\/}\n+ <span className={styles.Value}>{displayValue}<\/span>\n+ <\/div>\n+ <div className={styles.Children} hidden={!isOpen}>\n+ {subHooksView}\n+ <\/div>\n+ <\/div>\n+ );\n+ }\n+ } else {\n+ let overrideValueFn = null;\n+ \/\/ TODO Maybe read editable value from debug hook?\n+ if (canEditHooks && isStateEditable) {\n+ overrideValueFn = (absolutePath: Array<string | number>, value: any) => {\n+ const rendererID = store.getRendererIDForElement(id);\n+ if (rendererID !== null) {\n+ bridge.send('overrideHookState', {\n+ id,\n+ hookID,\n+ \/\/ Hooks override function expects a relative path for the specified hook (id),\n+ \/\/ starting with its id within the (flat) hooks list structure.\n+ \/\/ This relative path does not include the fake tree structure DevTools uses for display,\n+ \/\/ so it's important that we remove that part of the path before sending the update.\n+ path: absolutePath.slice(path.length + 1),\n+ rendererID,\n+ value,\n+ });\n+ }\n+ };\n+ }\n+\n+ if (isComplexDisplayValue) {\n+ return (\n+ <div className={styles.Hook}>\n+ <KeyValue\n+ depth={1}\n+ inspectPath={inspectPath}\n+ name={name}\n+ overrideValueFn={overrideValueFn}\n+ path={path.concat(['value'])}\n+ value={value}\n+ \/>\n+ <\/div>\n+ );\n+ } else {\n+ return (\n+ <div className={styles.Hook}>\n+ <div className={styles.NameValueRow}>\n+ <span className={styles.ExpandCollapseToggleSpacer} \/>\n+ <span\n+ className={\n+ typeof overrideValueFn === 'function'\n+ ? styles.EditableName\n+ : styles.Name\n+ }\n+ >\n+ {name}\n+ <\/span>\n+ {typeof overrideValueFn === 'function' ? (\n+ <EditableValue\n+ dataType={type}\n+ overrideValueFn={overrideValueFn}\n+ path={[]}\n+ value={value}\n+ \/>\n+ ) : (\n+ \/\/ $FlowFixMe Cannot create span element because in property children\n+ <span className={styles.Value}>{displayValue}<\/span>\n+ )}\n+ <\/div>\n+ <\/div>\n+ );\n+ }\n+ }\n+}\n+\n+\/\/ $FlowFixMe\n+export default React.memo(HooksTreeView);\ndiff --git a\/src\/devtools\/views\/Components\/InspectHostNodesToggle.js b\/src\/devtools\/views\/Components\/InspectHostNodesToggle.js\nnew file mode 100644\nindex 0000000000..06fad24c10\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/InspectHostNodesToggle.js\n@@ -0,0 +1,41 @@\n+\/\/ @flow\n+\n+import React, { useCallback, useContext, useEffect, useState } from 'react';\n+import { BridgeContext } from '..\/context';\n+import Toggle from '..\/Toggle';\n+import ButtonIcon from '..\/ButtonIcon';\n+\n+export default function InspectHostNodesToggle() {\n+ const [isInspecting, setIsInspecting] = useState(false);\n+ const bridge = useContext(BridgeContext);\n+\n+ const handleChange = useCallback(\n+ (isChecked: boolean) => {\n+ setIsInspecting(isChecked);\n+\n+ if (isChecked) {\n+ bridge.send('startInspectingNative');\n+ } else {\n+ bridge.send('stopInspectingNative', false);\n+ }\n+ },\n+ [bridge]\n+ );\n+\n+ useEffect(() => {\n+ const onStopInspectingNative = () => setIsInspecting(false);\n+ bridge.addListener('stopInspectingNative', onStopInspectingNative);\n+ return () =>\n+ bridge.removeListener('stopInspectingNative', onStopInspectingNative);\n+ }, [bridge]);\n+\n+ return (\n+ <Toggle\n+ onChange={handleChange}\n+ isChecked={isInspecting}\n+ title=\"Select an element in the page to inspect it\"\n+ >\n+ <ButtonIcon type=\"search\" \/>\n+ <\/Toggle>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/Components\/InspectedElementContext.js b\/src\/devtools\/views\/Components\/InspectedElementContext.js\nnew file mode 100644\nindex 0000000000..cc9d1f5969\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/InspectedElementContext.js\n@@ -0,0 +1,309 @@\n+\/\/ @flow\n+\n+import React, {\n+ createContext,\n+ useCallback,\n+ useContext,\n+ useEffect,\n+ useMemo,\n+ useState,\n+} from 'react';\n+import { unstable_batchedUpdates as batchedUpdates } from 'react-dom';\n+import { createResource } from '..\/..\/cache';\n+import { BridgeContext, StoreContext } from '..\/context';\n+import { hydrate, fillInPath } from 'src\/hydration';\n+import { TreeStateContext } from '.\/TreeContext';\n+import { separateDisplayNameAndHOCs } from 'src\/utils';\n+\n+import type {\n+ InspectedElement as InspectedElementBackend,\n+ InspectedElementPayload,\n+} from 'src\/backend\/types';\n+import type {\n+ DehydratedData,\n+ Element,\n+ InspectedElement as InspectedElementFrontend,\n+} from 'src\/devtools\/views\/Components\/types';\n+import type { Resource, Thenable } from '..\/..\/cache';\n+\n+export type GetInspectedElementPath = (\n+ id: number,\n+ path: Array<string | number>\n+) => void;\n+export type GetInspectedElement = (\n+ id: number\n+) => InspectedElementFrontend | null;\n+\n+type Context = {|\n+ getInspectedElementPath: GetInspectedElementPath,\n+ getInspectedElement: GetInspectedElement,\n+|};\n+\n+const InspectedElementContext = createContext<Context>(((null: any): Context));\n+InspectedElementContext.displayName = 'InspectedElementContext';\n+\n+type ResolveFn = (inspectedElement: InspectedElementFrontend) => void;\n+type InProgressRequest = {|\n+ promise: Thenable<InspectedElementFrontend>,\n+ resolveFn: ResolveFn,\n+|};\n+\n+const inProgressRequests: WeakMap<Element, InProgressRequest> = new WeakMap();\n+const resource: Resource<\n+ Element,\n+ Element,\n+ InspectedElementFrontend\n+> = createResource(\n+ (element: Element) => {\n+ let request = inProgressRequests.get(element);\n+ if (request != null) {\n+ return request.promise;\n+ }\n+\n+ let resolveFn = ((null: any): ResolveFn);\n+ const promise = new Promise(resolve => {\n+ resolveFn = resolve;\n+ });\n+\n+ inProgressRequests.set(element, { promise, resolveFn });\n+\n+ return promise;\n+ },\n+ (element: Element) => element,\n+ { useWeakMap: true }\n+);\n+\n+type Props = {|\n+ children: React$Node,\n+|};\n+\n+function InspectedElementContextController({ children }: Props) {\n+ const bridge = useContext(BridgeContext);\n+ const store = useContext(StoreContext);\n+\n+ \/\/ Ask the backend to fill in a \"dehydrated\" path; this will result in a \"inspectedElement\".\n+ const getInspectedElementPath = useCallback<GetInspectedElementPath>(\n+ (id: number, path: Array<string | number>) => {\n+ const rendererID = store.getRendererIDForElement(id);\n+ if (rendererID !== null) {\n+ bridge.send('inspectElement', { id, path, rendererID });\n+ }\n+ },\n+ [bridge, store]\n+ );\n+\n+ const getInspectedElement = useCallback<GetInspectedElement>(\n+ (id: number) => {\n+ const element = store.getElementByID(id);\n+ if (element !== null) {\n+ return resource.read(element);\n+ } else {\n+ return null;\n+ }\n+ },\n+ [store]\n+ );\n+\n+ \/\/ It's very important that this context consumes selectedElementID and not inspectedElementID.\n+ \/\/ Otherwise the effect that sends the \"inspect\" message across the bridge-\n+ \/\/ would itself be blocked by the same render that suspends (waiting for the data).\n+ const { selectedElementID } = useContext(TreeStateContext);\n+\n+ const [\n+ currentlyInspectedElement,\n+ setCurrentlyInspectedElement,\n+ ] = useState<InspectedElementFrontend | null>(null);\n+\n+ \/\/ This effect handler invalidates the suspense cache and schedules rendering updates with React.\n+ useEffect(() => {\n+ const onInspectedElement = (data: InspectedElementPayload) => {\n+ const { id } = data;\n+\n+ let element;\n+\n+ switch (data.type) {\n+ case 'no-change':\n+ case 'not-found':\n+ \/\/ No-op\n+ break;\n+ case 'hydrated-path':\n+ \/\/ Merge new data into previous object and invalidate cache\n+ element = store.getElementByID(id);\n+ if (element !== null) {\n+ if (currentlyInspectedElement != null) {\n+ const value = hydrateHelper(data.value, data.path);\n+ const inspectedElement = { ...currentlyInspectedElement };\n+\n+ fillInPath(inspectedElement, data.path, value);\n+\n+ resource.write(element, inspectedElement);\n+\n+ \/\/ Schedule update with React if the curently-selected element has been invalidated.\n+ if (id === selectedElementID) {\n+ setCurrentlyInspectedElement(inspectedElement);\n+ }\n+ }\n+ }\n+ break;\n+ case 'full-data':\n+ const {\n+ canEditFunctionProps,\n+ canEditHooks,\n+ canToggleSuspense,\n+ canViewSource,\n+ source,\n+ type,\n+ owners,\n+ context,\n+ hooks,\n+ props,\n+ state,\n+ } = ((data.value: any): InspectedElementBackend);\n+\n+ const inspectedElement: InspectedElementFrontend = {\n+ canEditFunctionProps,\n+ canEditHooks,\n+ canToggleSuspense,\n+ canViewSource,\n+ id,\n+ source,\n+ type,\n+ owners:\n+ owners === null\n+ ? null\n+ : owners.map(owner => {\n+ const [\n+ displayName,\n+ hocDisplayNames,\n+ ] = separateDisplayNameAndHOCs(\n+ owner.displayName,\n+ owner.type\n+ );\n+ return {\n+ ...owner,\n+ displayName,\n+ hocDisplayNames,\n+ };\n+ }),\n+ context: hydrateHelper(context),\n+ hooks: hydrateHelper(hooks),\n+ props: hydrateHelper(props),\n+ state: hydrateHelper(state),\n+ };\n+\n+ element = store.getElementByID(id);\n+ if (element !== null) {\n+ const request = inProgressRequests.get(element);\n+ if (request != null) {\n+ inProgressRequests.delete(element);\n+ batchedUpdates(() => {\n+ request.resolveFn(inspectedElement);\n+ setCurrentlyInspectedElement(inspectedElement);\n+ });\n+ } else {\n+ resource.write(element, inspectedElement);\n+\n+ \/\/ Schedule update with React if the curently-selected element has been invalidated.\n+ if (id === selectedElementID) {\n+ setCurrentlyInspectedElement(inspectedElement);\n+ }\n+ }\n+ }\n+ break;\n+ default:\n+ break;\n+ }\n+ };\n+\n+ bridge.addListener('inspectedElement', onInspectedElement);\n+ return () => bridge.removeListener('inspectedElement', onInspectedElement);\n+ }, [bridge, currentlyInspectedElement, selectedElementID, store]);\n+\n+ \/\/ This effect handler polls for updates on the currently selected element.\n+ useEffect(() => {\n+ if (selectedElementID === null) {\n+ return () => {};\n+ }\n+\n+ const rendererID = store.getRendererIDForElement(selectedElementID);\n+\n+ let timeoutID: TimeoutID | null = null;\n+\n+ const sendRequest = () => {\n+ timeoutID = null;\n+\n+ if (rendererID !== null) {\n+ bridge.send('inspectElement', { id: selectedElementID, rendererID });\n+ }\n+ };\n+\n+ \/\/ Send the initial inspection request.\n+ \/\/ We'll poll for an update in the response handler below.\n+ sendRequest();\n+\n+ const onInspectedElement = (data: InspectedElementPayload) => {\n+ \/\/ If this is the element we requested, wait a little bit and then ask for another update.\n+ if (data.id === selectedElementID) {\n+ switch (data.type) {\n+ case 'no-change':\n+ case 'full-data':\n+ case 'hydrated-path':\n+ if (timeoutID !== null) {\n+ clearTimeout(timeoutID);\n+ }\n+ timeoutID = setTimeout(sendRequest, 1000);\n+ break;\n+ default:\n+ break;\n+ }\n+ }\n+ };\n+\n+ bridge.addListener('inspectedElement', onInspectedElement);\n+\n+ return () => {\n+ bridge.removeListener('inspectedElement', onInspectedElement);\n+\n+ if (timeoutID !== null) {\n+ clearTimeout(timeoutID);\n+ }\n+ };\n+ }, [bridge, selectedElementID, store]);\n+\n+ const value = useMemo(\n+ () => ({ getInspectedElement, getInspectedElementPath }),\n+ \/\/ InspectedElement is used to invalidate the cache and schedule an update with React.\n+ \/\/ eslint-disable-next-line react-hooks\/exhaustive-deps\n+ [currentlyInspectedElement, getInspectedElement, getInspectedElementPath]\n+ );\n+\n+ return (\n+ <InspectedElementContext.Provider value={value}>\n+ {children}\n+ <\/InspectedElementContext.Provider>\n+ );\n+}\n+\n+function hydrateHelper(\n+ dehydratedData: DehydratedData | null,\n+ path?: Array<string | number>\n+): Object | null {\n+ if (dehydratedData !== null) {\n+ let { cleaned, data } = dehydratedData;\n+\n+ if (path) {\n+ const { length } = path;\n+ if (length > 0) {\n+ \/\/ Hydration helper requires full paths, but inspection dehydrates with relative paths.\n+ \/\/ In that event it's important that we adjust the \"cleaned\" paths to match.\n+ cleaned = cleaned.map(cleanedPath => cleanedPath.slice(length));\n+ }\n+ }\n+\n+ return hydrate(data, cleaned);\n+ } else {\n+ return null;\n+ }\n+}\n+\n+export { InspectedElementContext, InspectedElementContextController };\ndiff --git a\/src\/devtools\/views\/Components\/InspectedElementTree.css b\/src\/devtools\/views\/Components\/InspectedElementTree.css\nnew file mode 100644\nindex 0000000000..620fbf412d\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/InspectedElementTree.css\n@@ -0,0 +1,48 @@\n+.InspectedElementTree {\n+ padding: 0.25rem;\n+ border-top: 1px solid var(--color-border);\n+}\n+.InspectedElementTree:first-of-type {\n+ border-top: none;\n+}\n+\n+.HeaderRow {\n+ display: flex;\n+ align-items: center;\n+}\n+\n+.Header {\n+ flex: 1 1;\n+ font-family: var(--font-family-sans);\n+}\n+\n+.Item {\n+ display: flex;\n+}\n+\n+.Name {\n+ color: var(--color-attribute-name);\n+ flex: 0 0 auto;\n+}\n+.Name:after {\n+ content: ': ';\n+ color: var(--color-text);\n+ margin-right: 0.5rem;\n+}\n+\n+.Value {\n+ color: var(--color-attribute-value);\n+ overflow: hidden;\n+ text-overflow: ellipsis;\n+}\n+\n+.None {\n+ color: var(--color-dimmer);\n+ font-style: italic;\n+}\n+\n+.Empty {\n+ color: var(--color-dimmer);\n+ font-style: italic;\n+ padding-left: 0.75rem;\n+}\ndiff --git a\/src\/devtools\/views\/Components\/InspectedElementTree.js b\/src\/devtools\/views\/Components\/InspectedElementTree.js\nnew file mode 100644\nindex 0000000000..5475b236c8\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/InspectedElementTree.js\n@@ -0,0 +1,65 @@\n+\/\/ @flow\n+\n+import { copy } from 'clipboard-js';\n+import React, { useCallback } from 'react';\n+import Button from '..\/Button';\n+import ButtonIcon from '..\/ButtonIcon';\n+import KeyValue from '.\/KeyValue';\n+import { serializeDataForCopy } from '..\/utils';\n+import styles from '.\/InspectedElementTree.css';\n+\n+import type { InspectPath } from '.\/SelectedElement';\n+\n+type OverrideValueFn = (path: Array<string | number>, value: any) => void;\n+\n+type Props = {|\n+ data: Object | null,\n+ inspectPath?: InspectPath,\n+ label: string,\n+ overrideValueFn?: ?OverrideValueFn,\n+ showWhenEmpty?: boolean,\n+|};\n+\n+export default function InspectedElementTree({\n+ data,\n+ inspectPath,\n+ label,\n+ overrideValueFn,\n+ showWhenEmpty = false,\n+}: Props) {\n+ const isEmpty = data === null || Object.keys(data).length === 0;\n+\n+ const handleCopy = useCallback(() => copy(serializeDataForCopy(data)), [\n+ data,\n+ ]);\n+\n+ if (isEmpty && !showWhenEmpty) {\n+ return null;\n+ } else {\n+ return (\n+ <div className={styles.InspectedElementTree}>\n+ <div className={styles.HeaderRow}>\n+ <div className={styles.Header}>{label}<\/div>\n+ {!isEmpty && (\n+ <Button onClick={handleCopy} title=\"Copy to clipboard\">\n+ <ButtonIcon type=\"copy\" \/>\n+ <\/Button>\n+ )}\n+ <\/div>\n+ {isEmpty && <div className={styles.Empty}>None<\/div>}\n+ {!isEmpty &&\n+ Object.keys((data: any)).map(name => (\n+ <KeyValue\n+ key={name}\n+ depth={1}\n+ inspectPath={inspectPath}\n+ name={name}\n+ overrideValueFn={overrideValueFn}\n+ path={[name]}\n+ value={(data: any)[name]}\n+ \/>\n+ ))}\n+ <\/div>\n+ );\n+ }\n+}\ndiff --git a\/src\/devtools\/views\/Components\/KeyValue.css b\/src\/devtools\/views\/Components\/KeyValue.css\nnew file mode 100644\nindex 0000000000..5ccbeb1e66\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/KeyValue.css\n@@ -0,0 +1,37 @@\n+.Item:not([hidden]) {\n+ display: flex;\n+}\n+\n+.Name {\n+ color: var(--color-dim);\n+ flex: 0 0 auto;\n+ user-select: none;\n+}\n+.EditableName {\n+ color: var(--color-attribute-name);\n+ flex: 0 0 auto;\n+ user-select: none;\n+}\n+.EditableName:after,\n+.Name:after {\n+ content: ': ';\n+ color: var(--color-text);\n+ margin-right: 0.5rem;\n+}\n+\n+.Value {\n+ color: var(--color-attribute-value);\n+ white-space: nowrap;\n+ overflow: hidden;\n+ text-overflow: ellipsis;\n+}\n+\n+.None {\n+ color: var(--color-dimmer);\n+ font-style: italic;\n+}\n+\n+.ExpandCollapseToggleSpacer {\n+ flex: 0 0 1rem;\n+ width: 1rem;\n+}\ndiff --git a\/src\/devtools\/views\/Components\/KeyValue.js b\/src\/devtools\/views\/Components\/KeyValue.js\nnew file mode 100644\nindex 0000000000..7fd333a0a8\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/KeyValue.js\n@@ -0,0 +1,194 @@\n+\/\/ @flow\n+\n+import React, { useEffect, useRef, useState } from 'react';\n+import type { Element } from 'react';\n+import EditableValue from '.\/EditableValue';\n+import ExpandCollapseToggle from '.\/ExpandCollapseToggle';\n+import { getMetaValueLabel } from '..\/utils';\n+import { meta } from '..\/..\/..\/hydration';\n+import styles from '.\/KeyValue.css';\n+\n+import type { InspectPath } from '.\/SelectedElement';\n+\n+type OverrideValueFn = (path: Array<string | number>, value: any) => void;\n+\n+type KeyValueProps = {|\n+ depth: number,\n+ hidden?: boolean,\n+ inspectPath?: InspectPath,\n+ name: string,\n+ overrideValueFn?: ?OverrideValueFn,\n+ path: Array<any>,\n+ value: any,\n+|};\n+\n+export default function KeyValue({\n+ depth,\n+ inspectPath,\n+ hidden,\n+ name,\n+ overrideValueFn,\n+ path,\n+ value,\n+}: KeyValueProps) {\n+ const [isOpen, setIsOpen] = useState<boolean>(false);\n+ const prevIsOpenRef = useRef(isOpen);\n+\n+ const isInspectable =\n+ value !== null &&\n+ typeof value === 'object' &&\n+ value[meta.inspectable] &&\n+ value[meta.size] !== 0;\n+\n+ useEffect(() => {\n+ if (\n+ isInspectable &&\n+ isOpen &&\n+ !prevIsOpenRef.current &&\n+ typeof inspectPath === 'function'\n+ ) {\n+ inspectPath(path);\n+ }\n+ prevIsOpenRef.current = isOpen;\n+ }, [inspectPath, isInspectable, isOpen, path]);\n+\n+ const toggleIsOpen = () => setIsOpen(prevIsOpen => !prevIsOpen);\n+\n+ const dataType = typeof value;\n+ const isSimpleType =\n+ dataType === 'number' ||\n+ dataType === 'string' ||\n+ dataType === 'boolean' ||\n+ value == null;\n+\n+ const style = {\n+ paddingLeft: `${(depth - 1) * 0.75}rem`,\n+ };\n+\n+ let children = null;\n+ if (isSimpleType) {\n+ let displayValue = value;\n+ if (dataType === 'string') {\n+ displayValue = `\"${value}\"`;\n+ } else if (dataType === 'boolean') {\n+ displayValue = value ? 'true' : 'false';\n+ } else if (value === null) {\n+ displayValue = 'null';\n+ } else if (value === undefined) {\n+ displayValue = 'undefined';\n+ }\n+\n+ const nameClassName =\n+ typeof overrideValueFn === 'function' ? styles.EditableName : styles.Name;\n+\n+ children = (\n+ <div key=\"root\" className={styles.Item} hidden={hidden} style={style}>\n+ <div className={styles.ExpandCollapseToggleSpacer} \/>\n+ <span className={nameClassName}>{name}<\/span>\n+ {typeof overrideValueFn === 'function' ? (\n+ <EditableValue\n+ dataType={dataType}\n+ overrideValueFn={overrideValueFn}\n+ path={path}\n+ value={value}\n+ \/>\n+ ) : (\n+ <span className={styles.Value}>{displayValue}<\/span>\n+ )}\n+ <\/div>\n+ );\n+ } else if (value.hasOwnProperty(meta.type)) {\n+ children = (\n+ <div key=\"root\" className={styles.Item} hidden={hidden} style={style}>\n+ {isInspectable ? (\n+ <ExpandCollapseToggle isOpen={isOpen} setIsOpen={setIsOpen} \/>\n+ ) : (\n+ <div className={styles.ExpandCollapseToggleSpacer} \/>\n+ )}\n+ <span\n+ className={styles.Name}\n+ onClick={isInspectable ? toggleIsOpen : undefined}\n+ >\n+ {name}\n+ <\/span>\n+ <span className={styles.Value}>{getMetaValueLabel(value)}<\/span>\n+ <\/div>\n+ );\n+ } else {\n+ if (Array.isArray(value)) {\n+ const hasChildren = value.length > 0;\n+\n+ children = value.map((innerValue, index) => (\n+ <KeyValue\n+ key={index}\n+ depth={depth + 1}\n+ inspectPath={inspectPath}\n+ hidden={hidden || !isOpen}\n+ name={index}\n+ overrideValueFn={overrideValueFn}\n+ path={path.concat(index)}\n+ value={value[index]}\n+ \/>\n+ ));\n+ children.unshift(\n+ <div\n+ key={`${depth}-root`}\n+ className={styles.Item}\n+ hidden={hidden}\n+ style={style}\n+ >\n+ {hasChildren ? (\n+ <ExpandCollapseToggle isOpen={isOpen} setIsOpen={setIsOpen} \/>\n+ ) : (\n+ <div className={styles.ExpandCollapseToggleSpacer} \/>\n+ )}\n+ <span\n+ className={styles.Name}\n+ onClick={hasChildren ? toggleIsOpen : undefined}\n+ >\n+ {name}\n+ <\/span>\n+ <span>Array<\/span>\n+ <\/div>\n+ );\n+ } else {\n+ const hasChildren = Object.entries(value).length > 0;\n+\n+ children = Object.entries(value).map<Element<any>>(([name, value]) => (\n+ <KeyValue\n+ key={name}\n+ depth={depth + 1}\n+ inspectPath={inspectPath}\n+ hidden={hidden || !isOpen}\n+ name={name}\n+ overrideValueFn={overrideValueFn}\n+ path={path.concat(name)}\n+ value={value}\n+ \/>\n+ ));\n+ children.unshift(\n+ <div\n+ key={`${depth}-root`}\n+ className={styles.Item}\n+ hidden={hidden}\n+ style={style}\n+ >\n+ {hasChildren ? (\n+ <ExpandCollapseToggle isOpen={isOpen} setIsOpen={setIsOpen} \/>\n+ ) : (\n+ <div className={styles.ExpandCollapseToggleSpacer} \/>\n+ )}\n+ <span\n+ className={styles.Name}\n+ onClick={hasChildren ? toggleIsOpen : undefined}\n+ >\n+ {name}\n+ <\/span>\n+ <span>Object<\/span>\n+ <\/div>\n+ );\n+ }\n+ }\n+\n+ return children;\n+}\ndiff --git a\/src\/devtools\/views\/Components\/NativeStyleEditor\/AutoSizeInput.css b\/src\/devtools\/views\/Components\/NativeStyleEditor\/AutoSizeInput.css\nnew file mode 100644\nindex 0000000000..d231c8b8af\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/NativeStyleEditor\/AutoSizeInput.css\n@@ -0,0 +1,26 @@\n+.Input {\n+ width: 0;\n+ min-width: 0.5rem;\n+ flex: 1 1 auto;\n+ border: none;\n+ background: transparent;\n+ outline: none;\n+ padding: 0;\n+ border: none;\n+ font-family: var(--font-family-monospace);\n+ font-size: var(--font-size-monospace-normal);\n+}\n+\n+.Input:focus {\n+ border-color: var(--color-border);\n+}\n+\n+.HiddenDiv {\n+ position: absolute;\n+ top: 0;\n+ left: 0;\n+ visibility: hidden;\n+ height: 0;\n+ overflow: scroll;\n+ white-space: pre;\n+}\ndiff --git a\/src\/devtools\/views\/Components\/NativeStyleEditor\/AutoSizeInput.js b\/src\/devtools\/views\/Components\/NativeStyleEditor\/AutoSizeInput.js\nnew file mode 100644\nindex 0000000000..b9fc9b6e0b\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/NativeStyleEditor\/AutoSizeInput.js\n@@ -0,0 +1,97 @@\n+\/\/ @flow\n+\n+import React, { Fragment, useLayoutEffect, useRef } from 'react';\n+import styles from '.\/AutoSizeInput.css';\n+\n+type Props = {\n+ className?: string,\n+ onFocus?: (event: FocusEvent) => void,\n+ placeholder?: string,\n+ value: any,\n+};\n+\n+export default function AutoSizeInput({\n+ className,\n+ onFocus,\n+ placeholder,\n+ value,\n+ ...rest\n+}: Props) {\n+ const hiddenDivRef = useRef<HTMLDivElement | null>(null);\n+ const inputRef = useRef<HTMLInputElement | null>(null);\n+\n+ const onFocusWrapper = event => {\n+ if (inputRef.current !== null) {\n+ inputRef.current.selectionStart = 0;\n+ inputRef.current.selectionEnd = value.length;\n+ }\n+\n+ if (typeof onFocus === 'function') {\n+ onFocus(event);\n+ }\n+ };\n+\n+ \/\/ Copy text stlyes from <input> to hidden sizing <div>\n+ useLayoutEffect(() => {\n+ if (\n+ typeof window.getComputedStyle !== 'function' ||\n+ inputRef.current === null\n+ ) {\n+ return;\n+ }\n+\n+ const inputStyle = window.getComputedStyle(inputRef.current);\n+ if (!inputStyle) {\n+ return;\n+ }\n+\n+ if (hiddenDivRef.current !== null) {\n+ const divStyle = hiddenDivRef.current.style;\n+ divStyle.border = inputStyle.border;\n+ divStyle.fontFamily = inputStyle.fontFamily;\n+ divStyle.fontSize = inputStyle.fontSize;\n+ divStyle.fontStyle = inputStyle.fontStyle;\n+ divStyle.fontWeight = inputStyle.fontWeight;\n+ divStyle.letterSpacing = inputStyle.letterSpacing;\n+ divStyle.padding = inputStyle.padding;\n+ }\n+ }, []);\n+\n+ \/\/ Resize input any time text changes\n+ useLayoutEffect(() => {\n+ if (hiddenDivRef.current === null) {\n+ return;\n+ }\n+\n+ const scrollWidth = hiddenDivRef.current.getBoundingClientRect().width;\n+ if (!scrollWidth) {\n+ return;\n+ }\n+\n+ \/\/ Adding an extra pixel avoids a slight horizontal scroll when changing text selection\/cursor.\n+ \/\/ Not sure why this is, but the old DevTools did a similar thing.\n+ const targetWidth = Math.ceil(scrollWidth) + 1;\n+\n+ if (inputRef.current !== null) {\n+ inputRef.current.style.width = `${targetWidth}px`;\n+ }\n+ }, [value]);\n+\n+ const isEmpty = value === '' || value === '\"\"';\n+\n+ return (\n+ <Fragment>\n+ <input\n+ ref={inputRef}\n+ className={`${className ? className : ''} ${styles.Input}`}\n+ onFocus={onFocusWrapper}\n+ placeholder={placeholder}\n+ value={isEmpty ? '' : value}\n+ {...rest}\n+ \/>\n+ <div ref={hiddenDivRef} className={styles.HiddenDiv}>\n+ {isEmpty ? placeholder : value}\n+ <\/div>\n+ <\/Fragment>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/Components\/NativeStyleEditor\/LayoutViewer.css b\/src\/devtools\/views\/Components\/NativeStyleEditor\/LayoutViewer.css\nnew file mode 100644\nindex 0000000000..d21b49197a\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/NativeStyleEditor\/LayoutViewer.css\n@@ -0,0 +1,50 @@\n+.LayoutViewer {\n+ padding: 0.25rem;\n+ border-top: 1px solid var(--color-border);\n+ font-family: var(--font-family-monospace);\n+ font-size: var(--font-size-monospace-small);\n+}\n+\n+.Header {\n+ font-family: var(--font-family-sans);\n+}\n+\n+.DashedBox,\n+.SolidBox {\n+ flex: 1 1 auto;\n+ display: flex;\n+ flex-direction: column;\n+ align-items: center;\n+ border-width: 1px;\n+ border-color: var(--color-dim);\n+ padding: 0.25rem;\n+ margin: 0.25rem;\n+}\n+.DashedBox {\n+ border-style: dashed;\n+}\n+.SolidBox {\n+ border-style: solid;\n+}\n+\n+.LabelRow {\n+ width: 100%;\n+ position: relative;\n+ display: flex;\n+ align-items: center;\n+ justify-content: center;\n+}\n+\n+.Label {\n+ position: absolute;\n+ left: 0.5rem;\n+ flex: 1 0 100px;\n+ color: var(--color-attribute-name);\n+}\n+\n+.BoxRow {\n+ width: 100%;\n+ display: flex;\n+ flex-direction: row;\n+ align-items: center;\n+}\ndiff --git a\/src\/devtools\/views\/Components\/NativeStyleEditor\/LayoutViewer.js b\/src\/devtools\/views\/Components\/NativeStyleEditor\/LayoutViewer.js\nnew file mode 100644\nindex 0000000000..1a47248011\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/NativeStyleEditor\/LayoutViewer.js\n@@ -0,0 +1,64 @@\n+\/\/ @flow\n+\n+import React from 'react';\n+import styles from '.\/LayoutViewer.css';\n+\n+import type { Layout } from '.\/types';\n+\n+type Props = {|\n+ id: number,\n+ layout: Layout,\n+|};\n+\n+export default function LayoutViewer({ id, layout }: Props) {\n+ const { height, margin, padding, y, width, x } = layout;\n+\n+ return (\n+ <div className={styles.LayoutViewer}>\n+ <div className={styles.Header}>layout<\/div>\n+ <div className={styles.DashedBox}>\n+ <div className={styles.LabelRow}>\n+ <label className={styles.Label}>margin<\/label>\n+\n+ <label>{margin.top || '-'}<\/label>\n+ <\/div>\n+\n+ <div className={styles.BoxRow}>\n+ <label>{margin.left || '-'}<\/label>\n+\n+ <div className={styles.SolidBox}>\n+ <div className={styles.LabelRow}>\n+ <label className={styles.Label}>padding<\/label>\n+\n+ <label>{padding.top || '-'}<\/label>\n+ <\/div>\n+\n+ <div className={styles.BoxRow}>\n+ <label>{padding.left || '-'}<\/label>\n+\n+ <div className={styles.DashedBox}>\n+ <div className={styles.LabelRow}>\n+ {format(width)} x {format(height)} ({format(x)}, {format(y)})\n+ <\/div>\n+ <\/div>\n+\n+ <label>{padding.right || '-'}<\/label>\n+ <\/div>\n+\n+ <label>{padding.bottom || '-'}<\/label>\n+ <\/div>\n+ <label>{margin.right || '-'}<\/label>\n+ <\/div>\n+ <label>{margin.bottom || '-'}<\/label>\n+ <\/div>\n+ <\/div>\n+ );\n+}\n+\n+function format(number: number): string | number {\n+ if (Math.round(number) === number) {\n+ return number;\n+ } else {\n+ return number.toFixed(1);\n+ }\n+}\ndiff --git a\/src\/devtools\/views\/Components\/NativeStyleEditor\/StyleEditor.css b\/src\/devtools\/views\/Components\/NativeStyleEditor\/StyleEditor.css\nnew file mode 100644\nindex 0000000000..bbaaf16ea5\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/NativeStyleEditor\/StyleEditor.css\n@@ -0,0 +1,58 @@\n+.StyleEditor {\n+ font-family: var(--font-family-monospace);\n+ font-size: var(--font-size-monospace-normal);\n+ padding: 0.25rem;\n+ border-top: 1px solid var(--color-border);\n+}\n+\n+.HeaderRow {\n+ display: flex;\n+ align-items: center;\n+}\n+\n+.Header {\n+ flex: 1 1;\n+}\n+\n+.Brackets {\n+ font-family: var(--font-family-sans);\n+ font-size: var(--font-size-sans-small);\n+}\n+\n+.Row {\n+ white-space: nowrap;\n+ padding-left: 1rem;\n+ display: flex;\n+ align-items: center;\n+}\n+\n+.Invalid {\n+ background-color: var(--color-background-invalid);\n+ color: var(--color-text-invalid);\n+\n+ --color-border: var(--color-text-invalid);\n+}\n+.Attribute {\n+ color: var(--color-attribute-name);\n+}\n+\n+.Value {\n+ color: var(--color-attribute-value);\n+}\n+\n+.Input {\n+ flex: 0 1 auto;\n+ padding: 1px;\n+ box-shadow: 0px 1px 3px transparent;\n+}\n+.Input:focus {\n+ color: var(--color-text);\n+ box-shadow: 0px 1px 3px var(--color-shadow);\n+}\n+\n+.Empty {\n+ color: var(--color-dimmer);\n+ font-style: italic;\n+ user-select: none;\n+ padding-left: 1rem;\n+}\ndiff --git a\/src\/devtools\/views\/Components\/NativeStyleEditor\/StyleEditor.js b\/src\/devtools\/views\/Components\/NativeStyleEditor\/StyleEditor.js\nnew file mode 100644\nindex 0000000000..94d6923c37\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/NativeStyleEditor\/StyleEditor.js\n@@ -0,0 +1,284 @@\n+\/\/ @flow\n+\n+import React, { useContext, useMemo, useRef, useState } from 'react';\n+import { unstable_batchedUpdates as batchedUpdates } from 'react-dom';\n+import { copy } from 'clipboard-js';\n+import { BridgeContext, StoreContext } from 'src\/devtools\/views\/context';\n+import Button from '..\/..\/Button';\n+import ButtonIcon from '..\/..\/ButtonIcon';\n+import { serializeDataForCopy } from '..\/..\/utils';\n+import AutoSizeInput from '.\/AutoSizeInput';\n+import styles from '.\/StyleEditor.css';\n+\n+import type { Style } from '.\/types';\n+\n+type Props = {|\n+ id: number,\n+ style: Style,\n+|};\n+\n+type ChangeAttributeFn = (oldName: string, newName: string, value: any) => void;\n+type ChangeValueFn = (name: string, value: any) => void;\n+\n+export default function StyleEditor({ id, style }: Props) {\n+ const bridge = useContext(BridgeContext);\n+ const store = useContext(StoreContext);\n+\n+ const changeAttribute = (oldName: string, newName: string, value: any) => {\n+ const rendererID = store.getRendererIDForElement(id);\n+ if (rendererID !== null) {\n+ bridge.send('NativeStyleEditor_renameAttribute', {\n+ id,\n+ rendererID,\n+ oldName,\n+ newName,\n+ value,\n+ });\n+ }\n+ };\n+\n+ const changeValue = (name: string, value: any) => {\n+ const rendererID = store.getRendererIDForElement(id);\n+ if (rendererID !== null) {\n+ bridge.send('NativeStyleEditor_setValue', {\n+ id,\n+ rendererID,\n+ name,\n+ value,\n+ });\n+ }\n+ };\n+\n+ const keys = useMemo(() => Array.from(Object.keys(style)), [style]);\n+\n+ const handleCopy = () => copy(serializeDataForCopy(style));\n+\n+ return (\n+ <div className={styles.StyleEditor}>\n+ <div className={styles.HeaderRow}>\n+ <div className={styles.Header}>\n+ <div className={styles.Brackets}>{'style {'}<\/div>\n+ <\/div>\n+ <Button onClick={handleCopy} title=\"Copy to clipboard\">\n+ <ButtonIcon type=\"copy\" \/>\n+ <\/Button>\n+ <\/div>\n+ {keys.length > 0 &&\n+ keys.map(attribute => (\n+ <Row\n+ key={attribute}\n+ attribute={attribute}\n+ changeAttribute={changeAttribute}\n+ changeValue={changeValue}\n+ validAttributes={store.nativeStyleEditorValidAttributes}\n+ value={style[attribute]}\n+ \/>\n+ ))}\n+ <NewRow\n+ changeAttribute={changeAttribute}\n+ changeValue={changeValue}\n+ validAttributes={store.nativeStyleEditorValidAttributes}\n+ \/>\n+ <div className={styles.Brackets}>{'}'}<\/div>\n+ <\/div>\n+ );\n+}\n+\n+type NewRowProps = {|\n+ changeAttribute: ChangeAttributeFn,\n+ changeValue: ChangeValueFn,\n+ validAttributes: $ReadOnlyArray<string> | null,\n+|};\n+\n+function NewRow({\n+ changeAttribute,\n+ changeValue,\n+ validAttributes,\n+}: NewRowProps) {\n+ const [key, setKey] = useState<number>(0);\n+ const reset = () => setKey(key + 1);\n+\n+ const newAttributeRef = useRef<string>('');\n+\n+ const changeAttributeWrapper = (\n+ oldAttribute: string,\n+ newAttribute: string,\n+ value: any\n+ ) => {\n+ \/\/ Ignore attribute changes until a value has been specified\n+ newAttributeRef.current = newAttribute;\n+ };\n+\n+ const changeValueWrapper = (attribute: string, value: any) => {\n+ \/\/ Blur events should reset\/cancel if there's no value or no attribute\n+ if (newAttributeRef.current !== '') {\n+ if (value !== '') {\n+ changeValue(newAttributeRef.current, value);\n+ }\n+ reset();\n+ }\n+ };\n+\n+ return (\n+ <Row\n+ key={key}\n+ attribute={''}\n+ attributePlaceholder=\"attribute\"\n+ changeAttribute={changeAttributeWrapper}\n+ changeValue={changeValueWrapper}\n+ validAttributes={validAttributes}\n+ value={''}\n+ valuePlaceholder=\"value\"\n+ \/>\n+ );\n+}\n+\n+type RowProps = {|\n+ attribute: string,\n+ attributePlaceholder?: string,\n+ changeAttribute: ChangeAttributeFn,\n+ changeValue: ChangeValueFn,\n+ validAttributes: $ReadOnlyArray<string> | null,\n+ value: any,\n+ valuePlaceholder?: string,\n+|};\n+\n+function Row({\n+ attribute,\n+ attributePlaceholder,\n+ changeAttribute,\n+ changeValue,\n+ validAttributes,\n+ value,\n+ valuePlaceholder,\n+}: RowProps) {\n+ \/\/ TODO (RN style editor) Use @reach\/combobox to auto-complete attributes.\n+ \/\/ The list of valid attributes would need to be injected by RN backend,\n+ \/\/ which would need to require them from ReactNativeViewViewConfig \"validAttributes.style\" keys.\n+ \/\/ This would need to degrade gracefully for react-native-web,\n+ \/\/ althoguh we could let it also inject a custom set of whitelisted attributes.\n+\n+ const [localAttribute, setLocalAttribute] = useState(attribute);\n+ const [localValue, setLocalValue] = useState(JSON.stringify(value));\n+ const [isAttributeValid, setIsAttributeValid] = useState(true);\n+ const [isValueValid, setIsValueValid] = useState(true);\n+\n+ const validateAndSetLocalAttribute = attribute => {\n+ const isValid =\n+ attribute === '' ||\n+ validAttributes === null ||\n+ validAttributes.indexOf(attribute) >= 0;\n+\n+ batchedUpdates(() => {\n+ setLocalAttribute(attribute);\n+ setIsAttributeValid(isValid);\n+ });\n+ };\n+\n+ const validateAndSetLocalValue = value => {\n+ let isValid = false;\n+ try {\n+ JSON.parse(value);\n+ isValid = true;\n+ } catch (error) {}\n+\n+ batchedUpdates(() => {\n+ setLocalValue(value);\n+ setIsValueValid(isValid);\n+ });\n+ };\n+\n+ const resetAttribute = () => {\n+ setLocalAttribute(attribute);\n+ };\n+\n+ const resetValue = () => {\n+ setLocalValue(value);\n+ };\n+\n+ const submitValueChange = () => {\n+ if (isValueValid) {\n+ const parsedLocalValue = JSON.parse(localValue);\n+ if (value !== parsedLocalValue) {\n+ changeValue(attribute, parsedLocalValue);\n+ }\n+ }\n+ };\n+\n+ const submitAttributeChange = () => {\n+ if (isAttributeValid && attribute !== localAttribute) {\n+ changeAttribute(attribute, localAttribute, value);\n+ }\n+ };\n+\n+ return (\n+ <div className={styles.Row}>\n+ <Field\n+ className={isAttributeValid ? styles.Attribute : styles.Invalid}\n+ onChange={validateAndSetLocalAttribute}\n+ onReset={resetAttribute}\n+ onSubmit={submitAttributeChange}\n+ placeholder={attributePlaceholder}\n+ value={localAttribute}\n+ \/>\n+ : \n+ <Field\n+ className={isValueValid ? styles.Value : styles.Invalid}\n+ onChange={validateAndSetLocalValue}\n+ onReset={resetValue}\n+ onSubmit={submitValueChange}\n+ placeholder={valuePlaceholder}\n+ value={localValue}\n+ \/>\n+ ;\n+ <\/div>\n+ );\n+}\n+\n+type FieldProps = {|\n+ className: string,\n+ onChange: (value: any) => void,\n+ onReset: () => void,\n+ onSubmit: () => void,\n+ placeholder?: string,\n+ value: any,\n+|};\n+\n+function Field({\n+ className,\n+ onChange,\n+ onReset,\n+ onSubmit,\n+ placeholder,\n+ value,\n+}: FieldProps) {\n+ const onKeyDown = event => {\n+ switch (event.key) {\n+ case 'Enter':\n+ onSubmit();\n+ break;\n+ case 'Escape':\n+ onReset();\n+ break;\n+ case 'ArrowDown':\n+ case 'ArrowLeft':\n+ case 'ArrowRight':\n+ case 'ArrowUp':\n+ event.stopPropagation();\n+ break;\n+ default:\n+ break;\n+ }\n+ };\n+\n+ return (\n+ <AutoSizeInput\n+ className={`${className} ${styles.Input}`}\n+ onBlur={onSubmit}\n+ onChange={event => onChange(event.target.value)}\n+ onKeyDown={onKeyDown}\n+ placeholder={placeholder}\n+ value={value}\n+ \/>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/Components\/NativeStyleEditor\/context.js b\/src\/devtools\/views\/Components\/NativeStyleEditor\/context.js\nnew file mode 100644\nindex 0000000000..f062fef43e\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/NativeStyleEditor\/context.js\n@@ -0,0 +1,189 @@\n+\/\/ @flow\n+\n+import React, {\n+ createContext,\n+ useCallback,\n+ useContext,\n+ useEffect,\n+ useMemo,\n+ useState,\n+} from 'react';\n+import { unstable_batchedUpdates as batchedUpdates } from 'react-dom';\n+import { createResource } from 'src\/devtools\/cache';\n+import { BridgeContext, StoreContext } from 'src\/devtools\/views\/context';\n+import { TreeStateContext } from '..\/TreeContext';\n+\n+import type { StyleAndLayout as StyleAndLayoutBackend } from 'src\/backend\/NativeStyleEditor\/types';\n+import type { StyleAndLayout as StyleAndLayoutFrontend } from '.\/types';\n+import type { Element } from 'src\/devtools\/views\/Components\/types';\n+import type { Resource, Thenable } from 'src\/devtools\/cache';\n+\n+export type GetStyleAndLayout = (id: number) => StyleAndLayoutFrontend | null;\n+\n+type Context = {|\n+ getStyleAndLayout: GetStyleAndLayout,\n+|};\n+\n+const NativeStyleContext = createContext<Context>(((null: any): Context));\n+NativeStyleContext.displayName = 'NativeStyleContext';\n+\n+type ResolveFn = (styleAndLayout: StyleAndLayoutFrontend) => void;\n+type InProgressRequest = {|\n+ promise: Thenable<StyleAndLayoutFrontend>,\n+ resolveFn: ResolveFn,\n+|};\n+\n+const inProgressRequests: WeakMap<Element, InProgressRequest> = new WeakMap();\n+const resource: Resource<\n+ Element,\n+ Element,\n+ StyleAndLayoutFrontend\n+> = createResource(\n+ (element: Element) => {\n+ let request = inProgressRequests.get(element);\n+ if (request != null) {\n+ return request.promise;\n+ }\n+\n+ let resolveFn = ((null: any): ResolveFn);\n+ const promise = new Promise(resolve => {\n+ resolveFn = resolve;\n+ });\n+\n+ inProgressRequests.set(element, { promise, resolveFn });\n+\n+ return promise;\n+ },\n+ (element: Element) => element,\n+ { useWeakMap: true }\n+);\n+\n+type Props = {|\n+ children: React$Node,\n+|};\n+\n+function NativeStyleContextController({ children }: Props) {\n+ const bridge = useContext(BridgeContext);\n+ const store = useContext(StoreContext);\n+\n+ const getStyleAndLayout = useCallback<GetStyleAndLayout>(\n+ (id: number) => {\n+ const element = store.getElementByID(id);\n+ if (element !== null) {\n+ return resource.read(element);\n+ } else {\n+ return null;\n+ }\n+ },\n+ [store]\n+ );\n+\n+ \/\/ It's very important that this context consumes selectedElementID and not NativeStyleID.\n+ \/\/ Otherwise the effect that sends the \"inspect\" message across the bridge-\n+ \/\/ would itself be blocked by the same render that suspends (waiting for the data).\n+ const { selectedElementID } = useContext(TreeStateContext);\n+\n+ const [\n+ currentStyleAndLayout,\n+ setCurrentStyleAndLayout,\n+ ] = useState<StyleAndLayoutFrontend | null>(null);\n+\n+ \/\/ This effect handler invalidates the suspense cache and schedules rendering updates with React.\n+ useEffect(() => {\n+ const onStyleAndLayout = ({ id, layout, style }: StyleAndLayoutBackend) => {\n+ let element = store.getElementByID(id);\n+ if (element !== null) {\n+ const styleAndLayout: StyleAndLayoutFrontend = {\n+ layout,\n+ style,\n+ };\n+ const request = inProgressRequests.get(element);\n+ if (request != null) {\n+ inProgressRequests.delete(element);\n+ batchedUpdates(() => {\n+ request.resolveFn(styleAndLayout);\n+ setCurrentStyleAndLayout(styleAndLayout);\n+ });\n+ } else {\n+ resource.write(element, styleAndLayout);\n+\n+ \/\/ Schedule update with React if the curently-selected element has been invalidated.\n+ if (id === selectedElementID) {\n+ setCurrentStyleAndLayout(styleAndLayout);\n+ }\n+ }\n+ }\n+ };\n+\n+ bridge.addListener('NativeStyleEditor_styleAndLayout', onStyleAndLayout);\n+ return () =>\n+ bridge.removeListener(\n+ 'NativeStyleEditor_styleAndLayout',\n+ onStyleAndLayout\n+ );\n+ }, [bridge, currentStyleAndLayout, selectedElementID, store]);\n+\n+ \/\/ This effect handler polls for updates on the currently selected element.\n+ useEffect(() => {\n+ if (selectedElementID === null) {\n+ return () => {};\n+ }\n+\n+ const rendererID = store.getRendererIDForElement(selectedElementID);\n+\n+ let timeoutID: TimeoutID | null = null;\n+\n+ const sendRequest = () => {\n+ timeoutID = null;\n+\n+ if (rendererID !== null) {\n+ bridge.send('NativeStyleEditor_measure', {\n+ id: selectedElementID,\n+ rendererID,\n+ });\n+ }\n+ };\n+\n+ \/\/ Send the initial measurement request.\n+ \/\/ We'll poll for an update in the response handler below.\n+ sendRequest();\n+\n+ const onStyleAndLayout = ({ id }: StyleAndLayoutBackend) => {\n+ \/\/ If this is the element we requested, wait a little bit and then ask for another update.\n+ if (id === selectedElementID) {\n+ if (timeoutID !== null) {\n+ clearTimeout(timeoutID);\n+ }\n+ timeoutID = setTimeout(sendRequest, 1000);\n+ }\n+ };\n+\n+ bridge.addListener('NativeStyleEditor_styleAndLayout', onStyleAndLayout);\n+\n+ return () => {\n+ bridge.removeListener(\n+ 'NativeStyleEditor_styleAndLayout',\n+ onStyleAndLayout\n+ );\n+\n+ if (timeoutID !== null) {\n+ clearTimeout(timeoutID);\n+ }\n+ };\n+ }, [bridge, selectedElementID, store]);\n+\n+ const value = useMemo(\n+ () => ({ getStyleAndLayout }),\n+ \/\/ NativeStyle is used to invalidate the cache and schedule an update with React.\n+ \/\/ eslint-disable-next-line react-hooks\/exhaustive-deps\n+ [currentStyleAndLayout, getStyleAndLayout]\n+ );\n+\n+ return (\n+ <NativeStyleContext.Provider value={value}>\n+ {children}\n+ <\/NativeStyleContext.Provider>\n+ );\n+}\n+\n+export { NativeStyleContext, NativeStyleContextController };\ndiff --git a\/src\/devtools\/views\/Components\/NativeStyleEditor\/index.js b\/src\/devtools\/views\/Components\/NativeStyleEditor\/index.js\nnew file mode 100644\nindex 0000000000..def85e5610\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/NativeStyleEditor\/index.js\n@@ -0,0 +1,68 @@\n+\/\/ @flow\n+\n+import React, { Fragment, useContext, useMemo } from 'react';\n+import Store from 'src\/devtools\/store';\n+import { StoreContext } from 'src\/devtools\/views\/context';\n+import { useSubscription } from 'src\/devtools\/views\/hooks';\n+import { NativeStyleContext } from '.\/context';\n+import LayoutViewer from '.\/LayoutViewer';\n+import StyleEditor from '.\/StyleEditor';\n+import { TreeStateContext } from '..\/TreeContext';\n+\n+type Props = {||};\n+\n+export default function NativeStyleEditorWrapper(_: Props) {\n+ const store = useContext(StoreContext);\n+\n+ const subscription = useMemo(\n+ () => ({\n+ getCurrentValue: () => store.supportsNativeStyleEditor,\n+ subscribe: (callback: Function) => {\n+ store.addListener('supportsNativeStyleEditor', callback);\n+ return () => {\n+ store.removeListener('supportsNativeStyleEditor', callback);\n+ };\n+ },\n+ }),\n+ [store]\n+ );\n+ const supportsNativeStyleEditor = useSubscription<boolean, Store>(\n+ subscription\n+ );\n+\n+ if (!supportsNativeStyleEditor) {\n+ return null;\n+ }\n+\n+ return <NativeStyleEditor \/>;\n+}\n+\n+function NativeStyleEditor(_: Props) {\n+ const { getStyleAndLayout } = useContext(NativeStyleContext);\n+\n+ const { inspectedElementID } = useContext(TreeStateContext);\n+ if (inspectedElementID === null) {\n+ return null;\n+ }\n+\n+ const maybeStyleAndLayout = getStyleAndLayout(inspectedElementID);\n+ if (maybeStyleAndLayout === null) {\n+ return null;\n+ }\n+\n+ const { layout, style } = maybeStyleAndLayout;\n+\n+ return (\n+ <Fragment>\n+ {layout !== null && (\n+ <LayoutViewer id={inspectedElementID} layout={layout} \/>\n+ )}\n+ {style !== null && (\n+ <StyleEditor\n+ id={inspectedElementID}\n+ style={style !== null ? style : {}}\n+ \/>\n+ )}\n+ <\/Fragment>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/Components\/NativeStyleEditor\/types.js b\/src\/devtools\/views\/Components\/NativeStyleEditor\/types.js\nnew file mode 100644\nindex 0000000000..882412af3a\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/NativeStyleEditor\/types.js\n@@ -0,0 +1,13 @@\n+\/\/ @flow\n+\n+import type {\n+ Layout as LayoutBackend,\n+ Style as StyleBackend,\n+} from 'src\/backend\/NativeStyleEditor\/types';\n+\n+export type Layout = LayoutBackend;\n+export type Style = StyleBackend;\n+export type StyleAndLayout = {|\n+ layout: LayoutBackend | null,\n+ style: StyleBackend | null,\n+|};\ndiff --git a\/src\/devtools\/views\/Components\/OwnersListContext.js b\/src\/devtools\/views\/Components\/OwnersListContext.js\nnew file mode 100644\nindex 0000000000..6da02d3546\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/OwnersListContext.js\n@@ -0,0 +1,124 @@\n+\/\/ @flow\n+\n+import React, {\n+ createContext,\n+ useCallback,\n+ useContext,\n+ useEffect,\n+} from 'react';\n+import { createResource } from '..\/..\/cache';\n+import { BridgeContext, StoreContext } from '..\/context';\n+import { TreeStateContext } from '.\/TreeContext';\n+import { separateDisplayNameAndHOCs } from 'src\/utils';\n+\n+import type { OwnersList } from 'src\/backend\/types';\n+import type { Element, Owner } from 'src\/devtools\/views\/Components\/types';\n+import type { Resource, Thenable } from '..\/..\/cache';\n+\n+type Context = (id: number) => Array<Owner> | null;\n+\n+const OwnersListContext = createContext<Context>(((null: any): Context));\n+OwnersListContext.displayName = 'OwnersListContext';\n+\n+type ResolveFn = (ownersList: Array<Owner> | null) => void;\n+type InProgressRequest = {|\n+ promise: Thenable<Array<Owner>>,\n+ resolveFn: ResolveFn,\n+|};\n+\n+const inProgressRequests: WeakMap<Element, InProgressRequest> = new WeakMap();\n+const resource: Resource<Element, Element, Array<Owner>> = createResource(\n+ (element: Element) => {\n+ let request = inProgressRequests.get(element);\n+ if (request != null) {\n+ return request.promise;\n+ }\n+\n+ let resolveFn = ((null: any): ResolveFn);\n+ const promise = new Promise(resolve => {\n+ resolveFn = resolve;\n+ });\n+\n+ inProgressRequests.set(element, { promise, resolveFn });\n+\n+ return promise;\n+ },\n+ (element: Element) => element,\n+ { useWeakMap: true }\n+);\n+\n+type Props = {|\n+ children: React$Node,\n+|};\n+\n+function OwnersListContextController({ children }: Props) {\n+ const bridge = useContext(BridgeContext);\n+ const store = useContext(StoreContext);\n+ const { ownerID } = useContext(TreeStateContext);\n+\n+ const read = useCallback(\n+ (id: number) => {\n+ const element = store.getElementByID(id);\n+ if (element !== null) {\n+ return resource.read(element);\n+ } else {\n+ return null;\n+ }\n+ },\n+ [store]\n+ );\n+\n+ useEffect(() => {\n+ const onOwnersList = (ownersList: OwnersList) => {\n+ const id = ownersList.id;\n+\n+ const element = store.getElementByID(id);\n+ if (element !== null) {\n+ const request = inProgressRequests.get(element);\n+ if (request != null) {\n+ inProgressRequests.delete(element);\n+\n+ request.resolveFn(\n+ ownersList.owners === null\n+ ? null\n+ : ownersList.owners.map(owner => {\n+ const [\n+ displayNameWithoutHOCs,\n+ hocDisplayNames,\n+ ] = separateDisplayNameAndHOCs(owner.displayName, owner.type);\n+\n+ return {\n+ ...owner,\n+ displayName: displayNameWithoutHOCs,\n+ hocDisplayNames,\n+ };\n+ })\n+ );\n+ }\n+ }\n+ };\n+\n+ bridge.addListener('ownersList', onOwnersList);\n+ return () => bridge.removeListener('ownersList', onOwnersList);\n+ }, [bridge, store]);\n+\n+ \/\/ This effect requests an updated owners list any time the selected owner changes\n+ useEffect(() => {\n+ if (ownerID !== null) {\n+ const rendererID = store.getRendererIDForElement(ownerID);\n+ if (rendererID !== null) {\n+ bridge.send('getOwnersList', { id: ownerID, rendererID });\n+ }\n+ }\n+\n+ return () => {};\n+ }, [bridge, ownerID, store]);\n+\n+ return (\n+ <OwnersListContext.Provider value={read}>\n+ {children}\n+ <\/OwnersListContext.Provider>\n+ );\n+}\n+\n+export { OwnersListContext, OwnersListContextController };\ndiff --git a\/src\/devtools\/views\/Components\/OwnersStack.css b\/src\/devtools\/views\/Components\/OwnersStack.css\nnew file mode 100644\nindex 0000000000..5fed9e61d4\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/OwnersStack.css\n@@ -0,0 +1,104 @@\n+.OwnerStack {\n+ max-width: 100%;\n+ overflow-x: auto;\n+ flex: 1;\n+ display: flex;\n+ align-items: center;\n+ position: relative;\n+}\n+\n+.Component,\n+.Component[data-reach-menu-item] {\n+ font-family: var(--font-family-monospace);\n+ font-size: var(--font-size-monospace-normal);\n+ user-select: none;\n+ white-space: nowrap;\n+ display: flex;\n+ align-items: center;\n+}\n+\n+.Component[data-reach-menu-item][data-selected],\n+.Component[data-reach-menu-item][data-selected]:hover {\n+ color: var(--color-text-selected);\n+ background: var(--color-background-selected);\n+}\n+.Component[data-reach-menu-item][data-selected]:focus {\n+ outline: none;\n+}\n+\n+.Bar {\n+ display: flex;\n+ flex: 1 1 auto;\n+ overflow-x: auto;\n+}\n+\n+.VRule {\n+ flex: 0 0 auto;\n+ height: 20px;\n+ width: 1px;\n+ background-color: var(--color-border);\n+ margin: 0 0.5rem;\n+}\n+\n+.MenuButton {\n+ border-radius: 0.25rem;\n+ display: inline-flex;\n+ align-items: center;\n+ padding: 0;\n+ flex: 0 0 auto;\n+ border: none;\n+ background: var(--color-button-background);\n+ color: var(--color-button);\n+}\n+.MenuButtonContent {\n+ display: inline-flex;\n+ align-items: center;\n+ border-radius: 0.25rem;\n+ padding: 0.25rem;\n+}\n+.MenuButton:hover {\n+ color: var(--color-button-hover);\n+}\n+.MenuButton[aria-expanded='true'],\n+.MenuButton[aria-expanded='true']:active {\n+ color: var(--color-button-active);\n+ outline: none;\n+}\n+\n+.MenuButton:focus,\n+.MenuButtonContent:focus {\n+ outline: none;\n+}\n+.MenuButton:focus > .MenuButtonContent {\n+ background: var(--color-button-background-focus);\n+}\n+\n+.Modal[data-reach-menu-list] {\n+ display: inline-flex;\n+ flex-direction: column;\n+ background-color: var(--color-background);\n+ color: var(--color-button);\n+ padding: 0.25rem 0;\n+ padding-right: 0;\n+ border: 1px solid var(--color-border);\n+ border-radius: 0.25rem;\n+ max-height: 10rem;\n+ overflow: auto;\n+\n+ \/* Make sure this is above the DevTools, which are above the Overlay *\/\n+ z-index: 10000002;\n+ position: relative;\n+\n+ \/* Reach UI tries to set its own :( *\/\n+ font-family: var(--font-family-monospace);\n+ font-size: var(--font-size-monospace-normal);\n+}\n+\n+.NotInStore,\n+.NotInStore:hover {\n+ color: var(--color-dimmest);\n+}\n+\n+.Badge {\n+ margin-left: 0.25rem;\n+}\ndiff --git a\/src\/devtools\/views\/Components\/OwnersStack.js b\/src\/devtools\/views\/Components\/OwnersStack.js\nnew file mode 100644\nindex 0000000000..befae507de\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/OwnersStack.js\n@@ -0,0 +1,304 @@\n+\/\/ @flow\n+import React, {\n+ Fragment,\n+ useCallback,\n+ useContext,\n+ useLayoutEffect,\n+ useReducer,\n+ useRef,\n+ useState,\n+} from 'react';\n+import Tooltip from '@reach\/tooltip';\n+import { Menu, MenuList, MenuButton, MenuItem } from '@reach\/menu-button';\n+import Button from '..\/Button';\n+import ButtonIcon from '..\/ButtonIcon';\n+import Toggle from '..\/Toggle';\n+import Badge from '.\/Badge';\n+import { OwnersListContext } from '.\/OwnersListContext';\n+import { TreeDispatcherContext, TreeStateContext } from '.\/TreeContext';\n+import { useIsOverflowing } from '..\/hooks';\n+import { StoreContext } from '..\/context';\n+\n+import type { Owner } from '.\/types';\n+\n+import styles from '.\/OwnersStack.css';\n+\n+type SelectOwner = (owner: Owner | null) => void;\n+\n+type ACTION_UPDATE_OWNER_ID = {|\n+ type: 'UPDATE_OWNER_ID',\n+ ownerID: number | null,\n+ owners: Array<Owner>,\n+|};\n+type ACTION_UPDATE_SELECTED_INDEX = {|\n+ type: 'UPDATE_SELECTED_INDEX',\n+ selectedIndex: number,\n+|};\n+\n+type Action = ACTION_UPDATE_OWNER_ID | ACTION_UPDATE_SELECTED_INDEX;\n+\n+type State = {|\n+ ownerID: number | null,\n+ owners: Array<Owner>,\n+ selectedIndex: number,\n+|};\n+\n+function dialogReducer(state, action) {\n+ switch (action.type) {\n+ case 'UPDATE_OWNER_ID':\n+ const selectedIndex = action.owners.findIndex(\n+ owner => owner.id === action.ownerID\n+ );\n+ return {\n+ ownerID: action.ownerID,\n+ owners: action.owners,\n+ selectedIndex,\n+ };\n+ case 'UPDATE_SELECTED_INDEX':\n+ return {\n+ ...state,\n+ selectedIndex: action.selectedIndex,\n+ };\n+ default:\n+ throw new Error(`Invalid action \"${action.type}\"`);\n+ }\n+}\n+\n+export default function OwnerStack() {\n+ const read = useContext(OwnersListContext);\n+ const { ownerID } = useContext(TreeStateContext);\n+ const treeDispatch = useContext(TreeDispatcherContext);\n+\n+ const [state, dispatch] = useReducer<State, Action>(dialogReducer, {\n+ ownerID: null,\n+ owners: [],\n+ selectedIndex: 0,\n+ });\n+\n+ \/\/ When an owner is selected, we either need to update the selected index, or we need to fetch a new list of owners.\n+ \/\/ We use a reducer here so that we can avoid fetching a new list unless the owner ID has actually changed.\n+ if (ownerID === null) {\n+ dispatch({\n+ type: 'UPDATE_OWNER_ID',\n+ ownerID: null,\n+ owners: [],\n+ });\n+ } else if (ownerID !== state.ownerID) {\n+ const isInStore =\n+ state.owners.findIndex(owner => owner.id === ownerID) >= 0;\n+ dispatch({\n+ type: 'UPDATE_OWNER_ID',\n+ ownerID,\n+ owners: isInStore ? state.owners : read(ownerID) || [],\n+ });\n+ }\n+\n+ const { owners, selectedIndex } = state;\n+\n+ const selectOwner = useCallback<SelectOwner>(\n+ (owner: Owner | null) => {\n+ if (owner !== null) {\n+ const index = owners.indexOf(owner);\n+ dispatch({\n+ type: 'UPDATE_SELECTED_INDEX',\n+ selectedIndex: index >= 0 ? index : 0,\n+ });\n+ treeDispatch({ type: 'SELECT_OWNER', payload: owner.id });\n+ } else {\n+ dispatch({\n+ type: 'UPDATE_SELECTED_INDEX',\n+ selectedIndex: 0,\n+ });\n+ treeDispatch({ type: 'RESET_OWNER_STACK' });\n+ }\n+ },\n+ [owners, treeDispatch]\n+ );\n+\n+ const [elementsTotalWidth, setElementsTotalWidth] = useState(0);\n+ const elementsBarRef = useRef<HTMLDivElement | null>(null);\n+ const isOverflowing = useIsOverflowing(elementsBarRef, elementsTotalWidth);\n+\n+ const selectedOwner = owners[selectedIndex];\n+\n+ useLayoutEffect(() => {\n+ \/\/ If we're already overflowing, then we don't need to re-measure items.\n+ \/\/ That's because once the owners stack is open, it can only get larger (by driling in).\n+ \/\/ A totally new stack can only be reached by exiting this mode and re-entering it.\n+ if (elementsBarRef.current === null || isOverflowing) {\n+ return () => {};\n+ }\n+\n+ let elementsTotalWidth = 0;\n+ for (let i = 0; i < owners.length; i++) {\n+ const element = elementsBarRef.current.children[i];\n+ const computedStyle = getComputedStyle(element);\n+\n+ elementsTotalWidth +=\n+ element.offsetWidth +\n+ parseInt(computedStyle.marginLeft, 10) +\n+ parseInt(computedStyle.marginRight, 10);\n+ }\n+\n+ setElementsTotalWidth(elementsTotalWidth);\n+ }, [elementsBarRef, isOverflowing, owners.length]);\n+\n+ return (\n+ <div className={styles.OwnerStack}>\n+ <div className={styles.Bar} ref={elementsBarRef}>\n+ {isOverflowing && (\n+ <Fragment>\n+ <ElementsDropdown\n+ owners={owners}\n+ selectedIndex={selectedIndex}\n+ selectOwner={selectOwner}\n+ \/>\n+ <BackToOwnerButton\n+ owners={owners}\n+ selectedIndex={selectedIndex}\n+ selectOwner={selectOwner}\n+ \/>\n+ {selectedOwner != null && (\n+ <ElementView\n+ owner={selectedOwner}\n+ isSelected\n+ selectOwner={selectOwner}\n+ \/>\n+ )}\n+ <\/Fragment>\n+ )}\n+ {!isOverflowing &&\n+ owners.map((owner, index) => (\n+ <ElementView\n+ key={index}\n+ owner={owner}\n+ isSelected={index === selectedIndex}\n+ selectOwner={selectOwner}\n+ \/>\n+ ))}\n+ <\/div>\n+ <div className={styles.VRule} \/>\n+ <Button\n+ className={styles.IconButton}\n+ onClick={() => selectOwner(null)}\n+ title=\"Back to tree view\"\n+ >\n+ <ButtonIcon type=\"close\" \/>\n+ <\/Button>\n+ <\/div>\n+ );\n+}\n+\n+type ElementsDropdownProps = {\n+ owners: Array<Owner>,\n+ selectedIndex: number,\n+ selectOwner: SelectOwner,\n+};\n+function ElementsDropdown({\n+ owners,\n+ selectedIndex,\n+ selectOwner,\n+}: ElementsDropdownProps) {\n+ const store = useContext(StoreContext);\n+\n+ const menuItems = [];\n+ for (let index = owners.length - 1; index >= 0; index--) {\n+ const owner = owners[index];\n+ const isInStore = store.containsElement(owner.id);\n+ menuItems.push(\n+ <MenuItem\n+ key={owner.id}\n+ className={`${styles.Component} ${isInStore ? '' : styles.NotInStore}`}\n+ onSelect={() => (isInStore ? selectOwner(owner) : null)}\n+ >\n+ {owner.displayName}\n+\n+ <Badge\n+ className={styles.Badge}\n+ hocDisplayNames={owner.hocDisplayNames}\n+ type={owner.type}\n+ \/>\n+ <\/MenuItem>\n+ );\n+ }\n+\n+ return (\n+ <Menu>\n+ <MenuButton className={styles.MenuButton}>\n+ <Tooltip label=\"Open elements dropdown\">\n+ <span className={styles.MenuButtonContent} tabIndex={-1}>\n+ <ButtonIcon type=\"more\" \/>\n+ <\/span>\n+ <\/Tooltip>\n+ <\/MenuButton>\n+ <MenuList className={styles.Modal}>{menuItems}<\/MenuList>\n+ <\/Menu>\n+ );\n+}\n+\n+type ElementViewProps = {\n+ isSelected: boolean,\n+ owner: Owner,\n+ selectOwner: SelectOwner,\n+};\n+function ElementView({ isSelected, owner, selectOwner }: ElementViewProps) {\n+ const store = useContext(StoreContext);\n+\n+ const { displayName, hocDisplayNames, type } = owner;\n+ const isInStore = store.containsElement(owner.id);\n+\n+ const handleChange = useCallback(() => {\n+ if (isInStore) {\n+ selectOwner(owner);\n+ }\n+ }, [isInStore, selectOwner, owner]);\n+\n+ return (\n+ <Toggle\n+ className={`${styles.Component} ${isInStore ? '' : styles.NotInStore}`}\n+ isChecked={isSelected}\n+ onChange={handleChange}\n+ >\n+ {displayName}\n+\n+ <Badge\n+ className={styles.Badge}\n+ hocDisplayNames={hocDisplayNames}\n+ type={type}\n+ \/>\n+ <\/Toggle>\n+ );\n+}\n+\n+type BackToOwnerButtonProps = {|\n+ owners: Array<Owner>,\n+ selectedIndex: number,\n+ selectOwner: SelectOwner,\n+|};\n+function BackToOwnerButton({\n+ owners,\n+ selectedIndex,\n+ selectOwner,\n+}: BackToOwnerButtonProps) {\n+ const store = useContext(StoreContext);\n+\n+ if (selectedIndex <= 0) {\n+ return null;\n+ }\n+\n+ const owner = owners[selectedIndex - 1];\n+ if (owner == null) {\n+ debugger;\n+ }\n+ const isInStore = store.containsElement(owner.id);\n+\n+ return (\n+ <Button\n+ className={isInStore ? undefined : styles.NotInStore}\n+ onClick={() => (isInStore ? selectOwner(owner) : null)}\n+ title={`Up to ${owner.displayName || 'owner'}`}\n+ >\n+ <ButtonIcon type=\"previous\" \/>\n+ <\/Button>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/Components\/SearchInput.css b\/src\/devtools\/views\/Components\/SearchInput.css\nnew file mode 100644\nindex 0000000000..5db009aa13\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/SearchInput.css\n@@ -0,0 +1,42 @@\n+.SearchInput {\n+ flex: 1 1;\n+ display: flex;\n+ align-items: center;\n+}\n+\n+.Input {\n+ flex: 1 1 100px;\n+ width: 100px;\n+ font-size: var(--font-size-sans-large);\n+ outline: none;\n+ border: none;\n+ background-color: var(--color-background);\n+ color: var(--color-text);\n+ padding-left: 1.5rem;\n+ margin-left: -1rem;\n+}\n+\n+.InputIcon {\n+ pointer-events: none;\n+ z-index: 2;\n+ color: var(--color-dimmer);\n+}\n+\n+.IndexLabel {\n+ color: var(--color-dim);\n+ font-size: var(--font-size-sans-normal);\n+ white-space: pre;\n+}\n+\n+.LeftVRule,\n+.RightVRule {\n+ height: 20px;\n+ width: 1px;\n+ background-color: var(--color-border);\n+}\n+.LeftVRule {\n+ margin: 0 0.25rem 0 0.5rem;\n+}\n+.RightVRule {\n+ margin: 0 0.5rem 0 0.25rem;\n+}\ndiff --git a\/src\/devtools\/views\/Components\/SearchInput.js b\/src\/devtools\/views\/Components\/SearchInput.js\nnew file mode 100644\nindex 0000000000..ecae6beb2e\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/SearchInput.js\n@@ -0,0 +1,130 @@\n+\/\/ @flow\n+\n+import React, { useCallback, useContext, useEffect, useRef } from 'react';\n+import { TreeDispatcherContext, TreeStateContext } from '.\/TreeContext';\n+import Button from '..\/Button';\n+import ButtonIcon from '..\/ButtonIcon';\n+import Icon from '..\/Icon';\n+\n+import styles from '.\/SearchInput.css';\n+\n+type Props = {||};\n+\n+export default function SearchInput(props: Props) {\n+ const { searchIndex, searchResults, searchText } = useContext(\n+ TreeStateContext\n+ );\n+ const dispatch = useContext(TreeDispatcherContext);\n+\n+ const inputRef = useRef<HTMLInputElement | null>(null);\n+\n+ const handleTextChange = useCallback(\n+ ({ currentTarget }) =>\n+ dispatch({ type: 'SET_SEARCH_TEXT', payload: currentTarget.value }),\n+ [dispatch]\n+ );\n+ const resetSearch = useCallback(\n+ () => dispatch({ type: 'SET_SEARCH_TEXT', payload: '' }),\n+ [dispatch]\n+ );\n+\n+ const handleKeyDown = useCallback(\n+ event => {\n+ \/\/ For convenience, let up\/down arrow keys change Tree selection.\n+ switch (event.key) {\n+ case 'ArrowDown':\n+ dispatch({ type: 'SELECT_NEXT_ELEMENT_IN_TREE' });\n+ event.preventDefault();\n+ break;\n+ case 'ArrowUp':\n+ dispatch({ type: 'SELECT_PREVIOUS_ELEMENT_IN_TREE' });\n+ event.preventDefault();\n+ break;\n+ default:\n+ break;\n+ }\n+ },\n+ [dispatch]\n+ );\n+\n+ const handleInputKeyPress = useCallback(\n+ ({ key }) => {\n+ if (key === 'Enter') {\n+ dispatch({ type: 'GO_TO_NEXT_SEARCH_RESULT' });\n+ }\n+ },\n+ [dispatch]\n+ );\n+\n+ \/\/ Auto-focus search input\n+ useEffect(() => {\n+ if (inputRef.current === null) {\n+ return () => {};\n+ }\n+\n+ const handleWindowKey = (event: KeyboardEvent) => {\n+ const { key, metaKey } = event;\n+ if (key === 'f' && metaKey) {\n+ if (inputRef.current !== null) {\n+ inputRef.current.focus();\n+ event.preventDefault();\n+ event.stopPropagation();\n+ }\n+ }\n+ };\n+\n+ \/\/ It's important to listen to the ownerDocument to support the browser extension.\n+ \/\/ Here we use portals to render individual tabs (e.g. Profiler),\n+ \/\/ and the root document might belong to a different window.\n+ const ownerDocument = inputRef.current.ownerDocument;\n+ ownerDocument.addEventListener('keydown', handleWindowKey);\n+\n+ return () => ownerDocument.removeEventListener('keydown', handleWindowKey);\n+ }, [inputRef]);\n+\n+ return (\n+ <div className={styles.SearchInput}>\n+ <Icon className={styles.InputIcon} type=\"search\" \/>\n+ <input\n+ className={styles.Input}\n+ onChange={handleTextChange}\n+ onKeyDown={handleKeyDown}\n+ onKeyPress={handleInputKeyPress}\n+ placeholder=\"Search (text or \/regex\/)\"\n+ ref={inputRef}\n+ value={searchText}\n+ \/>\n+ {!!searchText && (\n+ <span className={styles.IndexLabel}>\n+ {Math.min(searchIndex + 1, searchResults.length)} |{' '}\n+ {searchResults.length}\n+ <\/span>\n+ )}\n+ <div className={styles.LeftVRule} \/>\n+ <Button\n+ className={styles.IconButton}\n+ disabled={!searchText}\n+ onClick={() => dispatch({ type: 'GO_TO_PREVIOUS_SEARCH_RESULT' })}\n+ title=\"Scroll to previous search result\"\n+ >\n+ <ButtonIcon type=\"up\" \/>\n+ <\/Button>\n+ <Button\n+ className={styles.IconButton}\n+ disabled={!searchText}\n+ onClick={() => dispatch({ type: 'GO_TO_NEXT_SEARCH_RESULT' })}\n+ title=\"Scroll to next search result\"\n+ >\n+ <ButtonIcon type=\"down\" \/>\n+ <\/Button>\n+ <Button\n+ className={styles.IconButton}\n+ disabled={!searchText}\n+ onClick={resetSearch}\n+ title=\"Reset search\"\n+ >\n+ <ButtonIcon type=\"close\" \/>\n+ <\/Button>\n+ <\/div>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/Components\/SelectedElement.css b\/src\/devtools\/views\/Components\/SelectedElement.css\nnew file mode 100644\nindex 0000000000..c6fa68ddb7\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/SelectedElement.css\n@@ -0,0 +1,89 @@\n+.SelectedElement {\n+ display: flex;\n+ flex-direction: column;\n+ height: 100%;\n+ width: 100%;\n+ border-left: 1px solid var(--color-border);\n+ border-top: 1px solid var(--color-border);\n+}\n+\n+.TitleRow {\n+ flex: 0 0 42px;\n+ display: flex;\n+ align-items: center;\n+ font-size: var(--font-size-monospace-large);\n+ border-bottom: 1px solid var(--color-border);\n+ padding: 0.5rem;\n+}\n+\n+.SelectedComponentName {\n+ flex: 1 1 auto;\n+ overflow: hidden;\n+ text-overflow: ellipsis;\n+}\n+\n+.Owners {\n+ padding: 0.25rem;\n+ border-top: 1px solid var(--color-border);\n+}\n+\n+.OwnersHeader {\n+ font-family: var(--font-family-sans);\n+}\n+\n+.Component,\n+.Owner {\n+ color: var(--color-component-name);\n+ font-family: var(--font-family-monospace);\n+ font-size: var(--font-size-monospace-normal);\n+ white-space: nowrap;\n+ overflow: hidden;\n+ text-overflow: ellipsis;\n+ max-width: 100%;\n+}\n+\n+.Component {\n+ flex: 1 1 auto;\n+}\n+\n+.InspectedElement {\n+ overflow-x: hidden;\n+ overflow-y: auto;\n+ font-family: var(--font-family-monospace);\n+ font-size: var(--font-size-monospace-normal);\n+ line-height: var(--line-height-data);\n+}\n+\n+.Owner {\n+ border-radius: 0.25rem;\n+ padding: 0.125rem 0.25rem;\n+ cursor: pointer;\n+ background: none;\n+ border: none;\n+ display: block;\n+}\n+.Owner:focus {\n+ outline: none;\n+ background-color: var(--color-button-background-focus);\n+}\n+\n+.Loading {\n+ padding: 0.25rem;\n+ color: var(--color-dimmer);\n+ font-style: italic;\n+}\n+\n+.CannotSuspendWarningMessage {\n+}\n+\n+.NotInStore {\n+ color: var(--color-dim);\n+ cursor: default;\n+}\n+\n+.OwnerButton {\n+ display: flex;\n+ align-items: center;\n+ margin-left: 0.5rem;\n+ padding: 0;\n+}\ndiff --git a\/src\/devtools\/views\/Components\/SelectedElement.js b\/src\/devtools\/views\/Components\/SelectedElement.js\nnew file mode 100644\nindex 0000000000..30e9bd5270\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/SelectedElement.js\n@@ -0,0 +1,462 @@\n+\/\/ @flow\n+\n+import React, { useCallback, useContext } from 'react';\n+import { TreeDispatcherContext, TreeStateContext } from '.\/TreeContext';\n+import { BridgeContext, StoreContext } from '..\/context';\n+import Button from '..\/Button';\n+import ButtonIcon from '..\/ButtonIcon';\n+import HooksTree from '.\/HooksTree';\n+import { ModalDialogContext } from '..\/ModalDialog';\n+import HocBadges from '.\/HocBadges';\n+import InspectedElementTree from '.\/InspectedElementTree';\n+import { InspectedElementContext } from '.\/InspectedElementContext';\n+import ViewElementSourceContext from '.\/ViewElementSourceContext';\n+import NativeStyleEditor from '.\/NativeStyleEditor';\n+import Toggle from '..\/Toggle';\n+import Badge from '.\/Badge';\n+import {\n+ ComponentFilterElementType,\n+ ElementTypeClass,\n+ ElementTypeForwardRef,\n+ ElementTypeFunction,\n+ ElementTypeMemo,\n+ ElementTypeSuspense,\n+} from 'src\/types';\n+\n+import styles from '.\/SelectedElement.css';\n+\n+import type { GetInspectedElementPath } from '.\/InspectedElementContext';\n+import type { Element, InspectedElement } from '.\/types';\n+import type { ElementType } from 'src\/types';\n+\n+export type Props = {||};\n+\n+export default function SelectedElement(_: Props) {\n+ const { inspectedElementID } = useContext(TreeStateContext);\n+ const dispatch = useContext(TreeDispatcherContext);\n+ const {\n+ canViewElementSourceFunction,\n+ viewElementSourceFunction,\n+ } = useContext(ViewElementSourceContext);\n+ const bridge = useContext(BridgeContext);\n+ const store = useContext(StoreContext);\n+ const { dispatch: modalDialogDispatch } = useContext(ModalDialogContext);\n+\n+ const { getInspectedElementPath, getInspectedElement } = useContext(\n+ InspectedElementContext\n+ );\n+\n+ const element =\n+ inspectedElementID !== null\n+ ? store.getElementByID(inspectedElementID)\n+ : null;\n+\n+ const inspectedElement =\n+ inspectedElementID != null ? getInspectedElement(inspectedElementID) : null;\n+\n+ const highlightElement = useCallback(() => {\n+ if (element !== null && inspectedElementID !== null) {\n+ const rendererID = store.getRendererIDForElement(inspectedElementID);\n+ if (rendererID !== null) {\n+ bridge.send('highlightNativeElement', {\n+ displayName: element.displayName,\n+ hideAfterTimeout: true,\n+ id: inspectedElementID,\n+ openNativeElementsPanel: true,\n+ rendererID,\n+ scrollIntoView: true,\n+ });\n+ }\n+ }\n+ }, [bridge, element, inspectedElementID, store]);\n+\n+ const logElement = useCallback(() => {\n+ if (inspectedElementID !== null) {\n+ const rendererID = store.getRendererIDForElement(inspectedElementID);\n+ if (rendererID !== null) {\n+ bridge.send('logElementToConsole', {\n+ id: inspectedElementID,\n+ rendererID,\n+ });\n+ }\n+ }\n+ }, [bridge, inspectedElementID, store]);\n+\n+ const viewSource = useCallback(() => {\n+ if (viewElementSourceFunction != null && inspectedElement !== null) {\n+ viewElementSourceFunction(\n+ inspectedElement.id,\n+ ((inspectedElement: any): InspectedElement)\n+ );\n+ }\n+ }, [inspectedElement, viewElementSourceFunction]);\n+\n+ \/\/ In some cases (e.g. FB internal usage) the standalone shell might not be able to view the source.\n+ \/\/ To detect this case, we defer to an injected helper function (if present).\n+ const canViewSource =\n+ inspectedElement !== null &&\n+ inspectedElement.canViewSource &&\n+ viewElementSourceFunction !== null &&\n+ (canViewElementSourceFunction === null ||\n+ canViewElementSourceFunction(inspectedElement));\n+\n+ const isSuspended =\n+ element !== null &&\n+ element.type === ElementTypeSuspense &&\n+ inspectedElement != null &&\n+ inspectedElement.state != null;\n+\n+ const canToggleSuspense =\n+ inspectedElement != null && inspectedElement.canToggleSuspense;\n+\n+ \/\/ TODO (suspense toggle) Would be nice to eventually use a two setState pattern here as well.\n+ const toggleSuspended = useCallback(() => {\n+ let nearestSuspenseElement = null;\n+ let currentElement = element;\n+ while (currentElement !== null) {\n+ if (currentElement.type === ElementTypeSuspense) {\n+ nearestSuspenseElement = currentElement;\n+ break;\n+ } else if (currentElement.parentID > 0) {\n+ currentElement = store.getElementByID(currentElement.parentID);\n+ } else {\n+ currentElement = null;\n+ }\n+ }\n+\n+ \/\/ If we didn't find a Suspense ancestor, we can't suspend.\n+ \/\/ Instead we can show a warning to the user.\n+ if (nearestSuspenseElement === null) {\n+ modalDialogDispatch({\n+ type: 'SHOW',\n+ content: <CannotSuspendWarningMessage \/>,\n+ });\n+ } else {\n+ const nearestSuspenseElementID = nearestSuspenseElement.id;\n+\n+ \/\/ If we're suspending from an arbitary (non-Suspense) component, select the nearest Suspense element in the Tree.\n+ \/\/ This way when the fallback UI is shown and the current element is hidden, something meaningful is selected.\n+ if (nearestSuspenseElement !== element) {\n+ dispatch({\n+ type: 'SELECT_ELEMENT_BY_ID',\n+ payload: nearestSuspenseElementID,\n+ });\n+ }\n+\n+ const rendererID = store.getRendererIDForElement(\n+ nearestSuspenseElementID\n+ );\n+\n+ \/\/ Toggle suspended\n+ if (rendererID !== null) {\n+ bridge.send('overrideSuspense', {\n+ id: nearestSuspenseElementID,\n+ rendererID,\n+ forceFallback: !isSuspended,\n+ });\n+ }\n+ }\n+ }, [bridge, dispatch, element, isSuspended, modalDialogDispatch, store]);\n+\n+ if (element === null) {\n+ return (\n+ <div className={styles.SelectedElement}>\n+ <div className={styles.TitleRow} \/>\n+ <\/div>\n+ );\n+ }\n+\n+ return (\n+ <div className={styles.SelectedElement}>\n+ <div className={styles.TitleRow}>\n+ <div className={styles.SelectedComponentName}>\n+ <div className={styles.Component} title={element.displayName}>\n+ {element.displayName}\n+ <\/div>\n+ <\/div>\n+\n+ {canToggleSuspense && (\n+ <Toggle\n+ className={styles.IconButton}\n+ isChecked={isSuspended}\n+ onChange={toggleSuspended}\n+ title={\n+ isSuspended\n+ ? 'Unsuspend the selected component'\n+ : 'Suspend the selected component'\n+ }\n+ >\n+ <ButtonIcon type=\"suspend\" \/>\n+ <\/Toggle>\n+ )}\n+ {store.supportsNativeInspection && (\n+ <Button\n+ className={styles.IconButton}\n+ onClick={highlightElement}\n+ title=\"Inspect the matching DOM element\"\n+ >\n+ <ButtonIcon type=\"view-dom\" \/>\n+ <\/Button>\n+ )}\n+ <Button\n+ className={styles.IconButton}\n+ onClick={logElement}\n+ title=\"Log this component data to the console\"\n+ >\n+ <ButtonIcon type=\"log-data\" \/>\n+ <\/Button>\n+ <Button\n+ className={styles.IconButton}\n+ disabled={!canViewSource}\n+ onClick={viewSource}\n+ title=\"View source for this element\"\n+ >\n+ <ButtonIcon type=\"view-source\" \/>\n+ <\/Button>\n+ <\/div>\n+\n+ {inspectedElement === null && (\n+ <div className={styles.Loading}>Loading...<\/div>\n+ )}\n+\n+ {inspectedElement !== null && (\n+ <InspectedElementView\n+ key={\n+ inspectedElementID \/* Force reset when seleted Element changes *\/\n+ }\n+ element={element}\n+ getInspectedElementPath={getInspectedElementPath}\n+ inspectedElement={inspectedElement}\n+ \/>\n+ )}\n+ <\/div>\n+ );\n+}\n+\n+export type InspectPath = (path: Array<string | number>) => void;\n+\n+type InspectedElementViewProps = {|\n+ element: Element,\n+ getInspectedElementPath: GetInspectedElementPath,\n+ inspectedElement: InspectedElement,\n+|};\n+\n+const IS_SUSPENDED = 'Suspended';\n+\n+function InspectedElementView({\n+ element,\n+ getInspectedElementPath,\n+ inspectedElement,\n+}: InspectedElementViewProps) {\n+ const { id, type } = element;\n+ const {\n+ canEditFunctionProps,\n+ canEditHooks,\n+ canToggleSuspense,\n+ context,\n+ hooks,\n+ owners,\n+ props,\n+ state,\n+ } = inspectedElement;\n+\n+ const { ownerID } = useContext(TreeStateContext);\n+ const bridge = useContext(BridgeContext);\n+ const store = useContext(StoreContext);\n+\n+ const inspectContextPath = useCallback(\n+ (path: Array<string | number>) => {\n+ getInspectedElementPath(id, ['context', ...path]);\n+ },\n+ [getInspectedElementPath, id]\n+ );\n+ const inspectPropsPath = useCallback(\n+ (path: Array<string | number>) => {\n+ getInspectedElementPath(id, ['props', ...path]);\n+ },\n+ [getInspectedElementPath, id]\n+ );\n+ const inspectStatePath = useCallback(\n+ (path: Array<string | number>) => {\n+ getInspectedElementPath(id, ['state', ...path]);\n+ },\n+ [getInspectedElementPath, id]\n+ );\n+\n+ let overrideContextFn = null;\n+ let overridePropsFn = null;\n+ let overrideStateFn = null;\n+ let overrideSuspenseFn = null;\n+ if (type === ElementTypeClass) {\n+ overrideContextFn = (path: Array<string | number>, value: any) => {\n+ const rendererID = store.getRendererIDForElement(id);\n+ if (rendererID !== null) {\n+ bridge.send('overrideContext', { id, path, rendererID, value });\n+ }\n+ };\n+ overridePropsFn = (path: Array<string | number>, value: any) => {\n+ const rendererID = store.getRendererIDForElement(id);\n+ if (rendererID !== null) {\n+ bridge.send('overrideProps', { id, path, rendererID, value });\n+ }\n+ };\n+ overrideStateFn = (path: Array<string | number>, value: any) => {\n+ const rendererID = store.getRendererIDForElement(id);\n+ if (rendererID !== null) {\n+ bridge.send('overrideState', { id, path, rendererID, value });\n+ }\n+ };\n+ } else if (\n+ (type === ElementTypeFunction ||\n+ type === ElementTypeMemo ||\n+ type === ElementTypeForwardRef) &&\n+ canEditFunctionProps\n+ ) {\n+ overridePropsFn = (path: Array<string | number>, value: any) => {\n+ const rendererID = store.getRendererIDForElement(id);\n+ if (rendererID !== null) {\n+ bridge.send('overrideProps', { id, path, rendererID, value });\n+ }\n+ };\n+ } else if (type === ElementTypeSuspense && canToggleSuspense) {\n+ overrideSuspenseFn = (path: Array<string | number>, value: boolean) => {\n+ if (path.length !== 1 && path !== IS_SUSPENDED) {\n+ throw new Error('Unexpected path.');\n+ }\n+ const rendererID = store.getRendererIDForElement(id);\n+ if (rendererID !== null) {\n+ bridge.send('overrideSuspense', {\n+ id,\n+ rendererID,\n+ forceFallback: value,\n+ });\n+ }\n+ };\n+ }\n+\n+ return (\n+ <div className={styles.InspectedElement}>\n+ <HocBadges element={element} \/>\n+ <InspectedElementTree\n+ label=\"props\"\n+ data={props}\n+ inspectPath={inspectPropsPath}\n+ overrideValueFn={overridePropsFn}\n+ showWhenEmpty\n+ \/>\n+ {type === ElementTypeSuspense ? (\n+ <InspectedElementTree\n+ label=\"suspense\"\n+ data={{\n+ [IS_SUSPENDED]: state !== null,\n+ }}\n+ overrideValueFn={overrideSuspenseFn}\n+ \/>\n+ ) : (\n+ <InspectedElementTree\n+ label=\"state\"\n+ data={state}\n+ inspectPath={inspectStatePath}\n+ overrideValueFn={overrideStateFn}\n+ \/>\n+ )}\n+ <HooksTree canEditHooks={canEditHooks} hooks={hooks} id={id} \/>\n+ <InspectedElementTree\n+ label=\"context\"\n+ data={context}\n+ inspectPath={inspectContextPath}\n+ overrideValueFn={overrideContextFn}\n+ \/>\n+\n+ <NativeStyleEditor \/>\n+\n+ {ownerID === null && owners !== null && owners.length > 0 && (\n+ <div className={styles.Owners}>\n+ <div className={styles.OwnersHeader}>rendered by<\/div>\n+ {owners.map(owner => (\n+ <OwnerView\n+ key={owner.id}\n+ displayName={owner.displayName || 'Anonymous'}\n+ hocDisplayNames={owner.hocDisplayNames}\n+ id={owner.id}\n+ isInStore={store.containsElement(owner.id)}\n+ type={owner.type}\n+ \/>\n+ ))}\n+ <\/div>\n+ )}\n+ <\/div>\n+ );\n+}\n+\n+type OwnerViewProps = {|\n+ displayName: string,\n+ hocDisplayNames: Array<string> | null,\n+ id: number,\n+ isInStore: boolean,\n+ type: ElementType,\n+|};\n+\n+function OwnerView({\n+ displayName,\n+ hocDisplayNames,\n+ id,\n+ isInStore,\n+ type,\n+}: OwnerViewProps) {\n+ const dispatch = useContext(TreeDispatcherContext);\n+\n+ const handleClick = useCallback(\n+ () =>\n+ dispatch({\n+ type: 'SELECT_ELEMENT_BY_ID',\n+ payload: id,\n+ }),\n+ [dispatch, id]\n+ );\n+\n+ return (\n+ <Button\n+ key={id}\n+ className={styles.OwnerButton}\n+ disabled={!isInStore}\n+ onClick={handleClick}\n+ >\n+ <span\n+ className={`${styles.Owner} ${isInStore ? '' : styles.NotInStore}`}\n+ title={displayName}\n+ >\n+ {displayName}\n+ <\/span>\n+ <Badge hocDisplayNames={hocDisplayNames} type={type} \/>\n+ <\/Button>\n+ );\n+}\n+\n+function CannotSuspendWarningMessage() {\n+ const store = useContext(StoreContext);\n+ const areSuspenseElementsHidden = !!store.componentFilters.find(\n+ filter =>\n+ filter.type === ComponentFilterElementType &&\n+ filter.value === ElementTypeSuspense &&\n+ filter.isEnabled\n+ );\n+\n+ \/\/ Has the user filted out Suspense nodes from the tree?\n+ \/\/ If so, the selected element might actually be in a Suspense tree after all.\n+ if (areSuspenseElementsHidden) {\n+ return (\n+ <div className={styles.CannotSuspendWarningMessage}>\n+ Suspended state cannot be toggled while Suspense components are hidden.\n+ Disable the filter and try agan.\n+ <\/div>\n+ );\n+ } else {\n+ return (\n+ <div className={styles.CannotSuspendWarningMessage}>\n+ The selected element is not within a Suspense container. Suspending it\n+ would cause an error.\n+ <\/div>\n+ );\n+ }\n+}\ndiff --git a\/src\/devtools\/views\/Components\/SelectedTreeHighlight.css b\/src\/devtools\/views\/Components\/SelectedTreeHighlight.css\nnew file mode 100644\nindex 0000000000..19b64a8ef4\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/SelectedTreeHighlight.css\n@@ -0,0 +1,16 @@\n+.Active,\n+.Inactive {\n+ position: absolute;\n+ left: 0;\n+ width: 100%;\n+ z-index: 0;\n+ pointer-events: none;\n+}\n+\n+.Active {\n+ background-color: var(--color-selected-tree-highlight-active);\n+}\n+\n+.Inactive {\n+ background-color: var(--color-selected-tree-highlight-inactive);\n+}\ndiff --git a\/src\/devtools\/views\/Components\/SelectedTreeHighlight.js b\/src\/devtools\/views\/Components\/SelectedTreeHighlight.js\nnew file mode 100644\nindex 0000000000..9260784384\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/SelectedTreeHighlight.js\n@@ -0,0 +1,101 @@\n+\/\/ @flow\n+\n+import React, { useContext, useMemo } from 'react';\n+import { TreeStateContext } from '.\/TreeContext';\n+import { SettingsContext } from '..\/Settings\/SettingsContext';\n+import TreeFocusedContext from '.\/TreeFocusedContext';\n+import { StoreContext } from '..\/context';\n+import { useSubscription } from '..\/hooks';\n+import Store from '..\/..\/store';\n+\n+import styles from '.\/SelectedTreeHighlight.css';\n+\n+type Data = {|\n+ startIndex: number,\n+ stopIndex: number,\n+|};\n+\n+export default function SelectedTreeHighlight(_: {||}) {\n+ const { lineHeight } = useContext(SettingsContext);\n+ const store = useContext(StoreContext);\n+ const treeFocused = useContext(TreeFocusedContext);\n+ const { ownerID, selectedElementID } = useContext(TreeStateContext);\n+\n+ const subscription = useMemo(\n+ () => ({\n+ getCurrentValue: () => {\n+ if (\n+ selectedElementID === null ||\n+ store.isInsideCollapsedSubTree(selectedElementID)\n+ ) {\n+ return null;\n+ }\n+\n+ const element = store.getElementByID(selectedElementID);\n+ if (\n+ element === null ||\n+ element.isCollapsed ||\n+ element.children.length === 0\n+ ) {\n+ return null;\n+ }\n+\n+ const startIndex = store.getIndexOfElementID(element.children[0]);\n+ if (startIndex === null) {\n+ return null;\n+ }\n+\n+ let stopIndex = null;\n+ let current = element;\n+ while (current !== null) {\n+ if (current.isCollapsed || current.children.length === 0) {\n+ \/\/ We've found the last\/deepest descendant.\n+ stopIndex = store.getIndexOfElementID(current.id);\n+ current = null;\n+ } else {\n+ const lastChildID = current.children[current.children.length - 1];\n+ current = store.getElementByID(lastChildID);\n+ }\n+ }\n+\n+ if (stopIndex === null) {\n+ return null;\n+ }\n+\n+ return {\n+ startIndex,\n+ stopIndex,\n+ };\n+ },\n+ subscribe: (callback: Function) => {\n+ store.addListener('mutated', callback);\n+ return () => {\n+ store.removeListener('mutated', callback);\n+ };\n+ },\n+ }),\n+ [selectedElementID, store]\n+ );\n+ const data = useSubscription<Data | null, Store>(subscription);\n+\n+ if (ownerID !== null) {\n+ return null;\n+ }\n+\n+ if (data === null) {\n+ return null;\n+ }\n+\n+ const { startIndex, stopIndex } = data;\n+\n+ return (\n+ <div\n+ className={treeFocused ? styles.Active : styles.Inactive}\n+ style={{\n+ position: 'absolute',\n+ top: `${startIndex * lineHeight}px`,\n+ height: `${(stopIndex + 1 - startIndex) * lineHeight}px`,\n+ }}\n+ \/>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/Components\/Tree.css b\/src\/devtools\/views\/Components\/Tree.css\nnew file mode 100644\nindex 0000000000..64a5983ee0\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/Tree.css\n@@ -0,0 +1,60 @@\n+.Tree {\n+ position: relative;\n+ height: 100%;\n+ width: 100%;\n+ display: flex;\n+ flex-direction: column;\n+ border-top: 1px solid var(--color-border);\n+\n+ \/* Default size will be adjusted by Tree after scrolling *\/\n+ --indentation-size: 12px;\n+}\n+\n+.List {\n+ overflow-x: hidden !important;\n+}\n+\n+.InnerElementType {\n+ overflow-x: hidden;\n+}\n+\n+.SearchInput {\n+ flex: 0 0 42px;\n+ display: flex;\n+ align-items: center;\n+ border-bottom: 1px solid var(--color-border);\n+ padding: 0.5rem;\n+}\n+\n+.AutoSizerWrapper {\n+ width: 100%;\n+ overflow: hidden;\n+ flex: 1 0 auto;\n+}\n+.AutoSizerWrapper:focus {\n+ outline: none;\n+}\n+\n+.List {\n+ font-family: var(--font-family-monospace);\n+ font-size: var(--font-size-monospace-normal);\n+ line-height: var(--line-height-data);\n+}\n+\n+.VRule {\n+ height: 20px;\n+ width: 1px;\n+ margin: 0 0.5rem;\n+ background-color: var(--color-border);\n+}\n+\n+.Loading {\n+ height: 100%;\n+ padding-left: 0.5rem;\n+ display: flex;\n+ align-items: center;\n+ flex: 1;\n+ justify-content: flex-start;\n+ font-size: var(--font-size-sans-large);\n+ color: var(--color-dim);\n+}\ndiff --git a\/src\/devtools\/views\/Components\/Tree.js b\/src\/devtools\/views\/Components\/Tree.js\nnew file mode 100644\nindex 0000000000..7c575e450a\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/Tree.js\n@@ -0,0 +1,495 @@\n+\/\/ @flow\n+\n+import React, {\n+ Fragment,\n+ Suspense,\n+ useCallback,\n+ useContext,\n+ useEffect,\n+ useMemo,\n+ useRef,\n+ useState,\n+} from 'react';\n+import AutoSizer from 'react-virtualized-auto-sizer';\n+import { FixedSizeList } from 'react-window';\n+import { TreeDispatcherContext, TreeStateContext } from '.\/TreeContext';\n+import { SettingsContext } from '..\/Settings\/SettingsContext';\n+import { BridgeContext, StoreContext } from '..\/context';\n+import ElementView from '.\/Element';\n+import InspectHostNodesToggle from '.\/InspectHostNodesToggle';\n+import OwnersStack from '.\/OwnersStack';\n+import SearchInput from '.\/SearchInput';\n+import SettingsModalContextToggle from 'src\/devtools\/views\/Settings\/SettingsModalContextToggle';\n+import SelectedTreeHighlight from '.\/SelectedTreeHighlight';\n+import TreeFocusedContext from '.\/TreeFocusedContext';\n+\n+import styles from '.\/Tree.css';\n+\n+\/\/ Never indent more than this number of pixels (even if we have the room).\n+const DEFAULT_INDENTATION_SIZE = 12;\n+\n+export type ItemData = {|\n+ numElements: number,\n+ isNavigatingWithKeyboard: boolean,\n+ lastScrolledIDRef: { current: number | null },\n+ onElementMouseEnter: (id: number) => void,\n+ treeFocused: boolean,\n+|};\n+\n+type Props = {||};\n+\n+export default function Tree(props: Props) {\n+ const dispatch = useContext(TreeDispatcherContext);\n+ const {\n+ numElements,\n+ ownerID,\n+ searchIndex,\n+ searchResults,\n+ selectedElementID,\n+ selectedElementIndex,\n+ } = useContext(TreeStateContext);\n+ const bridge = useContext(BridgeContext);\n+ const store = useContext(StoreContext);\n+ const [isNavigatingWithKeyboard, setIsNavigatingWithKeyboard] = useState(\n+ false\n+ );\n+ const treeRef = useRef<HTMLDivElement | null>(null);\n+ const focusTargetRef = useRef<HTMLDivElement | null>(null);\n+\n+ const [treeFocused, setTreeFocused] = useState<boolean>(false);\n+\n+ const { lineHeight } = useContext(SettingsContext);\n+\n+ \/\/ Make sure a newly selected element is visible in the list.\n+ \/\/ This is helpful for things like the owners list and search.\n+ \/\/\n+ \/\/ TRICKY:\n+ \/\/ It's important to use a callback ref for this, rather than a ref object and an effect.\n+ \/\/ As an optimization, the AutoSizer component does not render children when their size would be 0.\n+ \/\/ This means that in some cases (if the browser panel size is initially really small),\n+ \/\/ the Tree component might render without rendering an inner List.\n+ \/\/ In this case, the list ref would be null on mount (when the scroll effect runs),\n+ \/\/ meaning the scroll action would be skipped (since ref updates don't re-run effects).\n+ \/\/ Using a callback ref accounts for this case...\n+ const listCallbackRef = useCallback(\n+ list => {\n+ if (list != null && selectedElementIndex !== null) {\n+ list.scrollToItem(selectedElementIndex, 'smart');\n+ }\n+ },\n+ [selectedElementIndex]\n+ );\n+\n+ \/\/ Picking an element in the inspector should put focus into the tree.\n+ \/\/ This ensures that keyboard navigation works right after picking a node.\n+ useEffect(() => {\n+ function handleStopInspectingNative(didSelectNode) {\n+ if (didSelectNode && focusTargetRef.current !== null) {\n+ focusTargetRef.current.focus();\n+ }\n+ }\n+ bridge.addListener('stopInspectingNative', handleStopInspectingNative);\n+ return () =>\n+ bridge.removeListener('stopInspectingNative', handleStopInspectingNative);\n+ }, [bridge]);\n+\n+ \/\/ This ref is passed down the context to elements.\n+ \/\/ It lets them avoid autoscrolling to the same item many times\n+ \/\/ when a selected virtual row goes in and out of the viewport.\n+ const lastScrolledIDRef = useRef<number | null>(null);\n+\n+ \/\/ Navigate the tree with up\/down arrow keys.\n+ useEffect(() => {\n+ if (treeRef.current === null) {\n+ return () => {};\n+ }\n+\n+ const handleKeyDown = (event: KeyboardEvent) => {\n+ if ((event: any).target.tagName === 'INPUT' || event.defaultPrevented) {\n+ return;\n+ }\n+\n+ \/\/ TODO We should ignore arrow keys if the focus is outside of DevTools.\n+ \/\/ Otherwise the inline (embedded) DevTools might change selection unexpectedly,\n+ \/\/ e.g. when a text input or a select has focus.\n+\n+ let element;\n+ switch (event.key) {\n+ case 'ArrowDown':\n+ event.preventDefault();\n+ dispatch({ type: 'SELECT_NEXT_ELEMENT_IN_TREE' });\n+ break;\n+ case 'ArrowLeft':\n+ event.preventDefault();\n+ element =\n+ selectedElementID !== null\n+ ? store.getElementByID(selectedElementID)\n+ : null;\n+ if (element !== null) {\n+ if (element.children.length > 0 && !element.isCollapsed) {\n+ store.toggleIsCollapsed(element.id, true);\n+ } else {\n+ dispatch({ type: 'SELECT_PARENT_ELEMENT_IN_TREE' });\n+ }\n+ }\n+ break;\n+ case 'ArrowRight':\n+ event.preventDefault();\n+ element =\n+ selectedElementID !== null\n+ ? store.getElementByID(selectedElementID)\n+ : null;\n+ if (element !== null) {\n+ if (element.children.length > 0 && element.isCollapsed) {\n+ store.toggleIsCollapsed(element.id, false);\n+ } else {\n+ dispatch({ type: 'SELECT_CHILD_ELEMENT_IN_TREE' });\n+ }\n+ }\n+ break;\n+ case 'ArrowUp':\n+ event.preventDefault();\n+ dispatch({ type: 'SELECT_PREVIOUS_ELEMENT_IN_TREE' });\n+ break;\n+ default:\n+ return;\n+ }\n+ setIsNavigatingWithKeyboard(true);\n+ };\n+\n+ \/\/ It's important to listen to the ownerDocument to support the browser extension.\n+ \/\/ Here we use portals to render individual tabs (e.g. Profiler),\n+ \/\/ and the root document might belong to a different window.\n+ const ownerDocument = treeRef.current.ownerDocument;\n+ ownerDocument.addEventListener('keydown', handleKeyDown);\n+\n+ return () => {\n+ ownerDocument.removeEventListener('keydown', handleKeyDown);\n+ };\n+ }, [dispatch, selectedElementID, store]);\n+\n+ \/\/ Focus management.\n+ const handleBlur = useCallback(() => setTreeFocused(false), []);\n+ const handleFocus = useCallback(() => {\n+ setTreeFocused(true);\n+\n+ if (selectedElementIndex === null && numElements > 0) {\n+ dispatch({\n+ type: 'SELECT_ELEMENT_AT_INDEX',\n+ payload: 0,\n+ });\n+ }\n+ }, [dispatch, numElements, selectedElementIndex]);\n+\n+ const handleKeyPress = useCallback(\n+ event => {\n+ switch (event.key) {\n+ case 'Enter':\n+ case ' ':\n+ if (selectedElementID !== null) {\n+ dispatch({ type: 'SELECT_OWNER', payload: selectedElementID });\n+ }\n+ break;\n+ default:\n+ break;\n+ }\n+ },\n+ [dispatch, selectedElementID]\n+ );\n+\n+ const highlightNativeElement = useCallback(\n+ (id: number) => {\n+ const element = store.getElementByID(id);\n+ const rendererID = store.getRendererIDForElement(id);\n+ if (element !== null && rendererID !== null) {\n+ bridge.send('highlightNativeElement', {\n+ displayName: element.displayName,\n+ hideAfterTimeout: false,\n+ id,\n+ openNativeElementsPanel: false,\n+ rendererID,\n+ scrollIntoView: false,\n+ });\n+ }\n+ },\n+ [store, bridge]\n+ );\n+\n+ \/\/ If we switch the selected element while using the keyboard,\n+ \/\/ start highlighting it in the DOM instead of the last hovered node.\n+ const searchRef = useRef({ searchIndex, searchResults });\n+ useEffect(() => {\n+ let didSelectNewSearchResult = false;\n+ if (\n+ searchRef.current.searchIndex !== searchIndex ||\n+ searchRef.current.searchResults !== searchResults\n+ ) {\n+ searchRef.current.searchIndex = searchIndex;\n+ searchRef.current.searchResults = searchResults;\n+ didSelectNewSearchResult = true;\n+ }\n+ if (isNavigatingWithKeyboard || didSelectNewSearchResult) {\n+ if (selectedElementID !== null) {\n+ highlightNativeElement(selectedElementID);\n+ } else {\n+ bridge.send('clearNativeElementHighlight');\n+ }\n+ }\n+ }, [\n+ bridge,\n+ isNavigatingWithKeyboard,\n+ highlightNativeElement,\n+ searchIndex,\n+ searchResults,\n+ selectedElementID,\n+ ]);\n+\n+ \/\/ Highlight last hovered element.\n+ const handleElementMouseEnter = useCallback(\n+ id => {\n+ \/\/ Ignore hover while we're navigating with keyboard.\n+ \/\/ This avoids flicker from the hovered nodes under the mouse.\n+ if (!isNavigatingWithKeyboard) {\n+ highlightNativeElement(id);\n+ }\n+ },\n+ [isNavigatingWithKeyboard, highlightNativeElement]\n+ );\n+\n+ const handleMouseMove = useCallback(() => {\n+ \/\/ We started using the mouse again.\n+ \/\/ This will enable hover styles in individual rows.\n+ setIsNavigatingWithKeyboard(false);\n+ }, []);\n+\n+ const handleMouseLeave = useCallback(() => {\n+ bridge.send('clearNativeElementHighlight');\n+ }, [bridge]);\n+\n+ \/\/ Let react-window know to re-render any time the underlying tree data changes.\n+ \/\/ This includes the owner context, since it controls a filtered view of the tree.\n+ const itemData = useMemo<ItemData>(\n+ () => ({\n+ numElements,\n+ isNavigatingWithKeyboard,\n+ onElementMouseEnter: handleElementMouseEnter,\n+ lastScrolledIDRef,\n+ treeFocused,\n+ }),\n+ [\n+ numElements,\n+ isNavigatingWithKeyboard,\n+ handleElementMouseEnter,\n+ lastScrolledIDRef,\n+ treeFocused,\n+ ]\n+ );\n+\n+ const itemKey = useCallback(\n+ (index: number) => store.getElementIDAtIndex(index),\n+ [store]\n+ );\n+\n+ return (\n+ <TreeFocusedContext.Provider value={treeFocused}>\n+ <div className={styles.Tree} ref={treeRef}>\n+ <div className={styles.SearchInput}>\n+ {store.supportsNativeInspection && (\n+ <Fragment>\n+ <InspectHostNodesToggle \/>\n+ <div className={styles.VRule} \/>\n+ <\/Fragment>\n+ )}\n+ <Suspense fallback={<Loading \/>}>\n+ {ownerID !== null ? <OwnersStack \/> : <SearchInput \/>}\n+ <\/Suspense>\n+ <div className={styles.VRule} \/>\n+ <SettingsModalContextToggle \/>\n+ <\/div>\n+ <div\n+ className={styles.AutoSizerWrapper}\n+ onBlur={handleBlur}\n+ onFocus={handleFocus}\n+ onKeyPress={handleKeyPress}\n+ onMouseMove={handleMouseMove}\n+ onMouseLeave={handleMouseLeave}\n+ ref={focusTargetRef}\n+ tabIndex={0}\n+ >\n+ <AutoSizer>\n+ {({ height, width }) => (\n+ \/\/ $FlowFixMe https:\/\/github.com\/facebook\/flow\/issues\/7341\n+ <FixedSizeList\n+ className={styles.List}\n+ height={height}\n+ innerElementType={InnerElementType}\n+ itemCount={numElements}\n+ itemData={itemData}\n+ itemKey={itemKey}\n+ itemSize={lineHeight}\n+ ref={listCallbackRef}\n+ width={width}\n+ >\n+ {ElementView}\n+ <\/FixedSizeList>\n+ )}\n+ <\/AutoSizer>\n+ <\/div>\n+ <\/div>\n+ <\/TreeFocusedContext.Provider>\n+ );\n+}\n+\n+\/\/ Indentation size can be adjusted but child width is fixed.\n+\/\/ We need to adjust indentations so the widest child can fit without overflowing.\n+\/\/ Sometimes the widest child is also the deepest in the tree:\n+\/\/ ┏----------------------┓\n+\/\/ ┆ <Foo> ┆\n+\/\/ ┆ ••••<Foobar> ┆\n+\/\/ ┆ ••••••••<Baz> ┆\n+\/\/ ┗----------------------┛\n+\/\/\n+\/\/ But this is not always the case.\n+\/\/ Even with the above example, a change in indentation may change the overall widest child:\n+\/\/ ┏----------------------┓\n+\/\/ ┆ <Foo> ┆\n+\/\/ ┆ ••<Foobar> ┆\n+\/\/ ┆ ••••<Baz> ┆\n+\/\/ ┗----------------------┛\n+\/\/\n+\/\/ In extreme cases this difference can be important:\n+\/\/ ┏----------------------┓\n+\/\/ ┆ <ReallyLongName> ┆\n+\/\/ ┆ ••<Foo> ┆\n+\/\/ ┆ ••••<Bar> ┆\n+\/\/ ┆ ••••••<Baz> ┆\n+\/\/ ┆ ••••••••<Qux> ┆\n+\/\/ ┗----------------------┛\n+\/\/\n+\/\/ In the above example, the current indentation is fine,\n+\/\/ but if we naively assumed that the widest element is also the deepest element,\n+\/\/ we would end up compressing the indentation unnecessarily:\n+\/\/ ┏----------------------┓\n+\/\/ ┆ <ReallyLongName> ┆\n+\/\/ ┆ •<Foo> ┆\n+\/\/ ┆ ••<Bar> ┆\n+\/\/ ┆ •••<Baz> ┆\n+\/\/ ┆ ••••<Qux> ┆\n+\/\/ ┗----------------------┛\n+\/\/\n+\/\/ The way we deal with this is to compute the max indentation size that can fit each child,\n+\/\/ given the child's fixed width and depth within the tree.\n+\/\/ Then we take the smallest of these indentation sizes...\n+function updateIndentationSizeVar(\n+ innerDiv: HTMLDivElement,\n+ cachedChildWidths: WeakMap<HTMLElement, number>,\n+ indentationSizeRef: {| current: number |},\n+ prevListWidthRef: {| current: number |}\n+): void {\n+ const list = ((innerDiv.parentElement: any): HTMLDivElement);\n+ const listWidth = list.clientWidth;\n+\n+ \/\/ Skip measurements when the Components panel is hidden.\n+ if (listWidth === 0) {\n+ return;\n+ }\n+\n+ \/\/ Reset the max indentation size if the width of the tree has increased.\n+ if (listWidth > prevListWidthRef.current) {\n+ indentationSizeRef.current = DEFAULT_INDENTATION_SIZE;\n+ }\n+ prevListWidthRef.current = listWidth;\n+\n+ let maxIndentationSize: number = indentationSizeRef.current;\n+\n+ for (let child of innerDiv.children) {\n+ const depth = parseInt(child.getAttribute('data-depth'), 10) || 0;\n+\n+ let childWidth: number = 0;\n+\n+ const cachedChildWidth = cachedChildWidths.get(child);\n+ if (cachedChildWidth != null) {\n+ childWidth = cachedChildWidth;\n+ } else {\n+ const { firstElementChild } = child;\n+\n+ \/\/ Skip over e.g. the guideline element\n+ if (firstElementChild != null) {\n+ childWidth = firstElementChild.clientWidth;\n+ cachedChildWidths.set(child, childWidth);\n+ }\n+ }\n+\n+ const remainingWidth = Math.max(0, listWidth - childWidth);\n+\n+ maxIndentationSize = Math.min(maxIndentationSize, remainingWidth \/ depth);\n+ }\n+\n+ indentationSizeRef.current = maxIndentationSize;\n+\n+ list.style.setProperty('--indentation-size', `${maxIndentationSize}px`);\n+}\n+\n+function InnerElementType({ children, style, ...rest }) {\n+ const { ownerID } = useContext(TreeStateContext);\n+\n+ const cachedChildWidths = useMemo<WeakMap<HTMLElement, number>>(\n+ () => new WeakMap(),\n+ []\n+ );\n+\n+ \/\/ This ref tracks the current indentation size.\n+ \/\/ We decrease indentation to fit wider\/deeper trees.\n+ \/\/ We indentionally do not increase it again afterward, to avoid the perception of content \"jumping\"\n+ \/\/ e.g. clicking to toggle\/collapse a row might otherwise jump horizontally beneath your cursor,\n+ \/\/ e.g. scrolling a wide row off screen could cause narrower rows to jump to the right some.\n+ \/\/\n+ \/\/ There are two exceptions for this:\n+ \/\/ 1. The first is when the width of the tree increases.\n+ \/\/ The user may have resized the window specifically to make more room for DevTools.\n+ \/\/ In either case, this should reset our max indentation size logic.\n+ \/\/ 2. The second is when the user enters or exits an owner tree.\n+ const indentationSizeRef = useRef<number>(DEFAULT_INDENTATION_SIZE);\n+ const prevListWidthRef = useRef<number>(0);\n+ const prevOwnerIDRef = useRef<number | null>(ownerID);\n+ const divRef = useRef<HTMLDivElement | null>(null);\n+\n+ \/\/ We shouldn't retain this width across different conceptual trees though,\n+ \/\/ so when the user opens the \"owners tree\" view, we should discard the previous width.\n+ if (ownerID !== prevOwnerIDRef.current) {\n+ prevOwnerIDRef.current = ownerID;\n+ indentationSizeRef.current = DEFAULT_INDENTATION_SIZE;\n+ }\n+\n+ \/\/ When we render new content, measure to see if we need to shrink indentation to fit it.\n+ useEffect(() => {\n+ if (divRef.current !== null) {\n+ updateIndentationSizeVar(\n+ divRef.current,\n+ cachedChildWidths,\n+ indentationSizeRef,\n+ prevListWidthRef\n+ );\n+ }\n+ });\n+\n+ \/\/ This style override enables the background color to fill the full visible width,\n+ \/\/ when combined with the CSS tweaks in Element.\n+ \/\/ A lot of options were considered; this seemed the one that requires the least code.\n+ \/\/ See https:\/\/github.com\/bvaughn\/react-devtools-experimental\/issues\/9\n+ return (\n+ <div\n+ className={styles.InnerElementType}\n+ ref={divRef}\n+ style={style}\n+ {...rest}\n+ >\n+ <SelectedTreeHighlight \/>\n+ {children}\n+ <\/div>\n+ );\n+}\n+\n+function Loading() {\n+ return <div className={styles.Loading}>Loading...<\/div>;\n+}\ndiff --git a\/src\/devtools\/views\/Components\/TreeContext.js b\/src\/devtools\/views\/Components\/TreeContext.js\nnew file mode 100644\nindex 0000000000..9ae209da69\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/TreeContext.js\n@@ -0,0 +1,808 @@\n+\/\/ @flow\n+\n+\/\/ This context combines tree\/selection state, search, and the owners stack.\n+\/\/ These values are managed together because changes in one often impact the others.\n+\/\/ Combining them enables us to avoid cascading renders.\n+\/\/\n+\/\/ Changes to search state may impact tree state.\n+\/\/ For example, updating the selected search result also updates the tree's selected value.\n+\/\/ Search does not fundamanetally change the tree though.\n+\/\/ It is also possible to update the selected tree value independently.\n+\/\/\n+\/\/ Changes to owners state mask search and tree values.\n+\/\/ When owners statck is not empty, search is temporarily disabnled,\n+\/\/ and tree values (e.g. num elements, selected element) are masked.\n+\/\/ Both tree and search values are restored when the owners stack is cleared.\n+\/\/\n+\/\/ For this reason, changes to the tree context are processed in sequence: tree -> search -> owners\n+\/\/ This enables each section to potentially override (or mask) previous values.\n+\n+import React, {\n+ createContext,\n+ useCallback,\n+ useContext,\n+ useEffect,\n+ useLayoutEffect,\n+ useMemo,\n+ useReducer,\n+ useRef,\n+} from 'react';\n+import {\n+ unstable_next as next,\n+ unstable_runWithPriority as runWithPriority,\n+ unstable_UserBlockingPriority as UserBlockingPriority,\n+} from 'scheduler';\n+import { createRegExp } from '..\/utils';\n+import { BridgeContext, StoreContext } from '..\/context';\n+import Store from '..\/..\/store';\n+\n+import type { Element } from '.\/types';\n+\n+export type StateContext = {|\n+ \/\/ Tree\n+ numElements: number,\n+ selectedElementID: number | null,\n+ selectedElementIndex: number | null,\n+\n+ \/\/ Search\n+ searchIndex: number | null,\n+ searchResults: Array<number>,\n+ searchText: string,\n+\n+ \/\/ Owners\n+ ownerID: number | null,\n+ ownerFlatTree: Array<Element> | null,\n+\n+ \/\/ Inspection element panel\n+ inspectedElementID: number | null,\n+|};\n+\n+type ACTION_GO_TO_NEXT_SEARCH_RESULT = {|\n+ type: 'GO_TO_NEXT_SEARCH_RESULT',\n+|};\n+type ACTION_GO_TO_PREVIOUS_SEARCH_RESULT = {|\n+ type: 'GO_TO_PREVIOUS_SEARCH_RESULT',\n+|};\n+type ACTION_HANDLE_STORE_MUTATION = {|\n+ type: 'HANDLE_STORE_MUTATION',\n+ payload: [Array<number>, Map<number, number>],\n+|};\n+type ACTION_RESET_OWNER_STACK = {|\n+ type: 'RESET_OWNER_STACK',\n+|};\n+type ACTION_SELECT_CHILD_ELEMENT_IN_TREE = {|\n+ type: 'SELECT_CHILD_ELEMENT_IN_TREE',\n+|};\n+type ACTION_SELECT_ELEMENT_AT_INDEX = {|\n+ type: 'SELECT_ELEMENT_AT_INDEX',\n+ payload: number | null,\n+|};\n+type ACTION_SELECT_ELEMENT_BY_ID = {|\n+ type: 'SELECT_ELEMENT_BY_ID',\n+ payload: number | null,\n+|};\n+type ACTION_SELECT_NEXT_ELEMENT_IN_TREE = {|\n+ type: 'SELECT_NEXT_ELEMENT_IN_TREE',\n+|};\n+type ACTION_SELECT_PARENT_ELEMENT_IN_TREE = {|\n+ type: 'SELECT_PARENT_ELEMENT_IN_TREE',\n+|};\n+type ACTION_SELECT_PREVIOUS_ELEMENT_IN_TREE = {|\n+ type: 'SELECT_PREVIOUS_ELEMENT_IN_TREE',\n+|};\n+type ACTION_SELECT_OWNER = {|\n+ type: 'SELECT_OWNER',\n+ payload: number,\n+|};\n+type ACTION_SET_SEARCH_TEXT = {|\n+ type: 'SET_SEARCH_TEXT',\n+ payload: string,\n+|};\n+type ACTION_UPDATE_INSPECTED_ELEMENT_ID = {|\n+ type: 'UPDATE_INSPECTED_ELEMENT_ID',\n+|};\n+\n+type Action =\n+ | ACTION_GO_TO_NEXT_SEARCH_RESULT\n+ | ACTION_GO_TO_PREVIOUS_SEARCH_RESULT\n+ | ACTION_HANDLE_STORE_MUTATION\n+ | ACTION_RESET_OWNER_STACK\n+ | ACTION_SELECT_CHILD_ELEMENT_IN_TREE\n+ | ACTION_SELECT_ELEMENT_AT_INDEX\n+ | ACTION_SELECT_ELEMENT_BY_ID\n+ | ACTION_SELECT_NEXT_ELEMENT_IN_TREE\n+ | ACTION_SELECT_PARENT_ELEMENT_IN_TREE\n+ | ACTION_SELECT_PREVIOUS_ELEMENT_IN_TREE\n+ | ACTION_SELECT_OWNER\n+ | ACTION_SET_SEARCH_TEXT\n+ | ACTION_UPDATE_INSPECTED_ELEMENT_ID;\n+\n+export type DispatcherContext = (action: Action) => void;\n+\n+const TreeStateContext = createContext<StateContext>(\n+ ((null: any): StateContext)\n+);\n+TreeStateContext.displayName = 'TreeStateContext';\n+\n+const TreeDispatcherContext = createContext<DispatcherContext>(\n+ ((null: any): DispatcherContext)\n+);\n+TreeDispatcherContext.displayName = 'TreeDispatcherContext';\n+\n+type State = {|\n+ \/\/ Tree\n+ numElements: number,\n+ selectedElementID: number | null,\n+ selectedElementIndex: number | null,\n+\n+ \/\/ Search\n+ searchIndex: number | null,\n+ searchResults: Array<number>,\n+ searchText: string,\n+\n+ \/\/ Owners\n+ ownerID: number | null,\n+ ownerFlatTree: Array<Element> | null,\n+\n+ \/\/ Inspection element panel\n+ inspectedElementID: number | null,\n+|};\n+\n+function reduceTreeState(store: Store, state: State, action: Action): State {\n+ let { numElements, ownerID, selectedElementIndex, selectedElementID } = state;\n+\n+ let lookupIDForIndex = true;\n+\n+ \/\/ Base tree should ignore selected element changes when the owner's tree is active.\n+ if (ownerID === null) {\n+ switch (action.type) {\n+ case 'HANDLE_STORE_MUTATION':\n+ numElements = store.numElements;\n+\n+ \/\/ If the currently-selected Element has been removed from the tree, update selection state.\n+ const removedIDs = action.payload[1];\n+ \/\/ Find the closest parent that wasn't removed during this batch.\n+ \/\/ We deduce the parent-child mapping from removedIDs (id -> parentID)\n+ \/\/ because by now it's too late to read them from the store.\n+ while (\n+ selectedElementID !== null &&\n+ removedIDs.has(selectedElementID)\n+ ) {\n+ selectedElementID = ((removedIDs.get(\n+ selectedElementID\n+ ): any): number);\n+ }\n+ if (selectedElementID === 0) {\n+ \/\/ The whole root was removed.\n+ selectedElementIndex = null;\n+ }\n+ break;\n+ case 'SELECT_CHILD_ELEMENT_IN_TREE':\n+ if (selectedElementIndex !== null) {\n+ const selectedElement = store.getElementAtIndex(\n+ ((selectedElementIndex: any): number)\n+ );\n+ if (\n+ selectedElement !== null &&\n+ selectedElement.children.length > 0 &&\n+ !selectedElement.isCollapsed\n+ ) {\n+ const firstChildID = selectedElement.children[0];\n+ const firstChildIndex = store.getIndexOfElementID(firstChildID);\n+ if (firstChildIndex !== null) {\n+ selectedElementIndex = firstChildIndex;\n+ }\n+ }\n+ }\n+ break;\n+ case 'SELECT_ELEMENT_AT_INDEX':\n+ selectedElementIndex = (action: ACTION_SELECT_ELEMENT_AT_INDEX).payload;\n+ break;\n+ case 'SELECT_ELEMENT_BY_ID':\n+ \/\/ Skip lookup in this case; it would be redundant.\n+ \/\/ It might also cause problems if the specified element was inside of a (not yet expanded) subtree.\n+ lookupIDForIndex = false;\n+\n+ selectedElementID = (action: ACTION_SELECT_ELEMENT_BY_ID).payload;\n+ selectedElementIndex =\n+ selectedElementID === null\n+ ? null\n+ : store.getIndexOfElementID(selectedElementID);\n+ break;\n+ case 'SELECT_NEXT_ELEMENT_IN_TREE':\n+ if (\n+ selectedElementIndex === null ||\n+ selectedElementIndex + 1 >= numElements\n+ ) {\n+ selectedElementIndex = 0;\n+ } else {\n+ selectedElementIndex++;\n+ }\n+ break;\n+ case 'SELECT_PARENT_ELEMENT_IN_TREE':\n+ if (selectedElementIndex !== null) {\n+ const selectedElement = store.getElementAtIndex(\n+ ((selectedElementIndex: any): number)\n+ );\n+ if (selectedElement !== null && selectedElement.parentID !== null) {\n+ const parentIndex = store.getIndexOfElementID(\n+ selectedElement.parentID\n+ );\n+ if (parentIndex !== null) {\n+ selectedElementIndex = parentIndex;\n+ }\n+ }\n+ }\n+ break;\n+ case 'SELECT_PREVIOUS_ELEMENT_IN_TREE':\n+ if (selectedElementIndex === null || selectedElementIndex === 0) {\n+ selectedElementIndex = numElements - 1;\n+ } else {\n+ selectedElementIndex--;\n+ }\n+ break;\n+ default:\n+ \/\/ React can bailout of no-op updates.\n+ return state;\n+ }\n+ }\n+\n+ \/\/ Keep selected item ID and index in sync.\n+ if (lookupIDForIndex && selectedElementIndex !== state.selectedElementIndex) {\n+ if (selectedElementIndex === null) {\n+ selectedElementID = null;\n+ } else {\n+ selectedElementID = store.getElementIDAtIndex(\n+ ((selectedElementIndex: any): number)\n+ );\n+ }\n+ }\n+\n+ return {\n+ ...state,\n+\n+ numElements,\n+ selectedElementIndex,\n+ selectedElementID,\n+ };\n+}\n+\n+function reduceSearchState(store: Store, state: State, action: Action): State {\n+ let {\n+ ownerID,\n+ searchIndex,\n+ searchResults,\n+ searchText,\n+ selectedElementID,\n+ selectedElementIndex,\n+ } = state;\n+\n+ const prevSearchIndex = searchIndex;\n+ const prevSearchText = searchText;\n+ const numPrevSearchResults = searchResults.length;\n+\n+ \/\/ We track explicitly whether search was requested because\n+ \/\/ we might want to search even if search index didn't change.\n+ \/\/ For example, if you press \"next result\" on a search with a single\n+ \/\/ result but a different current selection, we'll set this to true.\n+ let didRequestSearch = false;\n+\n+ \/\/ Search isn't supported when the owner's tree is active.\n+ if (ownerID === null) {\n+ switch (action.type) {\n+ case 'GO_TO_NEXT_SEARCH_RESULT':\n+ if (numPrevSearchResults > 0) {\n+ didRequestSearch = true;\n+ searchIndex =\n+ searchIndex + 1 < numPrevSearchResults ? searchIndex + 1 : 0;\n+ }\n+ break;\n+ case 'GO_TO_PREVIOUS_SEARCH_RESULT':\n+ if (numPrevSearchResults > 0) {\n+ didRequestSearch = true;\n+ searchIndex =\n+ ((searchIndex: any): number) > 0\n+ ? ((searchIndex: any): number) - 1\n+ : numPrevSearchResults - 1;\n+ }\n+ break;\n+ case 'HANDLE_STORE_MUTATION':\n+ if (searchText !== '') {\n+ const [\n+ addedElementIDs,\n+ removedElementIDs,\n+ ] = (action: ACTION_HANDLE_STORE_MUTATION).payload;\n+\n+ removedElementIDs.forEach((parentID, id) => {\n+ \/\/ Prune this item from the search results.\n+ const index = searchResults.indexOf(id);\n+ if (index >= 0) {\n+ searchResults = searchResults\n+ .slice(0, index)\n+ .concat(searchResults.slice(index + 1));\n+\n+ \/\/ If the results are now empty, also deselect things.\n+ if (searchResults.length === 0) {\n+ searchIndex = null;\n+ } else if (((searchIndex: any): number) >= searchResults.length) {\n+ searchIndex = searchResults.length - 1;\n+ }\n+ }\n+ });\n+\n+ addedElementIDs.forEach(id => {\n+ const element = ((store.getElementByID(id): any): Element);\n+\n+ \/\/ It's possible that multiple tree operations will fire before this action has run.\n+ \/\/ So it's important to check for elements that may have been added and then removed.\n+ if (element !== null) {\n+ const { displayName } = element;\n+\n+ \/\/ Add this item to the search results if it matches.\n+ const regExp = createRegExp(searchText);\n+ if (displayName !== null && regExp.test(displayName)) {\n+ const newElementIndex = ((store.getIndexOfElementID(\n+ id\n+ ): any): number);\n+\n+ let foundMatch = false;\n+ for (let index = 0; index < searchResults.length; index++) {\n+ const id = searchResults[index];\n+ if (\n+ newElementIndex <\n+ ((store.getIndexOfElementID(id): any): number)\n+ ) {\n+ foundMatch = true;\n+ searchResults = searchResults\n+ .slice(0, index)\n+ .concat(id)\n+ .concat(searchResults.slice(index));\n+ break;\n+ }\n+ }\n+ if (!foundMatch) {\n+ searchResults = searchResults.concat(id);\n+ }\n+\n+ searchIndex = searchIndex === null ? 0 : searchIndex;\n+ }\n+ }\n+ });\n+ }\n+ break;\n+ case 'SET_SEARCH_TEXT':\n+ searchIndex = null;\n+ searchResults = [];\n+ searchText = (action: ACTION_SET_SEARCH_TEXT).payload;\n+\n+ if (searchText !== '') {\n+ const regExp = createRegExp(searchText);\n+ store.roots.forEach(rootID => {\n+ recursivelySearchTree(store, rootID, regExp, searchResults);\n+ });\n+ if (searchResults.length > 0) {\n+ if (prevSearchIndex === null) {\n+ if (selectedElementIndex !== null) {\n+ searchIndex = getNearestResultIndex(\n+ store,\n+ searchResults,\n+ selectedElementIndex\n+ );\n+ } else {\n+ searchIndex = 0;\n+ }\n+ } else {\n+ searchIndex = Math.min(\n+ ((prevSearchIndex: any): number),\n+ searchResults.length - 1\n+ );\n+ }\n+ }\n+ }\n+ break;\n+ default:\n+ \/\/ React can bailout of no-op updates.\n+ return state;\n+ }\n+ }\n+\n+ if (searchText !== prevSearchText) {\n+ const newSearchIndex = searchResults.indexOf(selectedElementID);\n+ if (newSearchIndex === -1) {\n+ \/\/ Only move the selection if the new query\n+ \/\/ doesn't match the current selection anymore.\n+ didRequestSearch = true;\n+ } else {\n+ \/\/ Selected item still matches the new search query.\n+ \/\/ Adjust the index to reflect its position in new results.\n+ searchIndex = newSearchIndex;\n+ }\n+ }\n+ if (didRequestSearch && searchIndex !== null) {\n+ selectedElementID = ((searchResults[searchIndex]: any): number);\n+ selectedElementIndex = store.getIndexOfElementID(\n+ ((selectedElementID: any): number)\n+ );\n+ }\n+\n+ return {\n+ ...state,\n+\n+ selectedElementID,\n+ selectedElementIndex,\n+\n+ searchIndex,\n+ searchResults,\n+ searchText,\n+ };\n+}\n+\n+function reduceOwnersState(store: Store, state: State, action: Action): State {\n+ let {\n+ numElements,\n+ selectedElementID,\n+ selectedElementIndex,\n+ ownerID,\n+ ownerFlatTree,\n+ searchIndex,\n+ searchResults,\n+ searchText,\n+ } = state;\n+\n+ let prevSelectedElementIndex = selectedElementIndex;\n+\n+ switch (action.type) {\n+ case 'HANDLE_STORE_MUTATION':\n+ if (ownerID !== null) {\n+ if (!store.containsElement(ownerID)) {\n+ ownerID = null;\n+ ownerFlatTree = null;\n+ selectedElementID = null;\n+ } else {\n+ ownerFlatTree = store.getOwnersListForElement(ownerID);\n+ if (selectedElementID !== null) {\n+ \/\/ Mutation might have caused the index of this ID to shift.\n+ selectedElementIndex = ownerFlatTree.findIndex(\n+ element => element.id === selectedElementID\n+ );\n+ }\n+ }\n+ } else {\n+ if (selectedElementID !== null) {\n+ \/\/ Mutation might have caused the index of this ID to shift.\n+ selectedElementIndex = store.getIndexOfElementID(selectedElementID);\n+ }\n+ }\n+ if (selectedElementIndex === -1) {\n+ \/\/ If we couldn't find this ID after mutation, unselect it.\n+ selectedElementIndex = null;\n+ selectedElementID = null;\n+ }\n+ break;\n+ case 'RESET_OWNER_STACK':\n+ ownerID = null;\n+ ownerFlatTree = null;\n+ selectedElementIndex =\n+ selectedElementID !== null\n+ ? store.getIndexOfElementID(selectedElementID)\n+ : null;\n+ break;\n+ case 'SELECT_ELEMENT_AT_INDEX':\n+ if (ownerFlatTree !== null) {\n+ selectedElementIndex = (action: ACTION_SELECT_ELEMENT_AT_INDEX).payload;\n+ }\n+ break;\n+ case 'SELECT_ELEMENT_BY_ID':\n+ if (ownerFlatTree !== null) {\n+ const payload = (action: ACTION_SELECT_ELEMENT_BY_ID).payload;\n+ if (payload === null) {\n+ selectedElementIndex = null;\n+ } else {\n+ selectedElementIndex = ownerFlatTree.findIndex(\n+ element => element.id === payload\n+ );\n+\n+ \/\/ If the selected element is outside of the current owners list,\n+ \/\/ exit the list and select the element in the main tree.\n+ \/\/ This supports features like toggling Suspense.\n+ if (selectedElementIndex !== null && selectedElementIndex < 0) {\n+ ownerID = null;\n+ ownerFlatTree = null;\n+ selectedElementIndex = store.getIndexOfElementID(payload);\n+ }\n+ }\n+ }\n+ break;\n+ case 'SELECT_NEXT_ELEMENT_IN_TREE':\n+ if (ownerFlatTree !== null && ownerFlatTree.length > 0) {\n+ if (selectedElementIndex === null) {\n+ selectedElementIndex = 0;\n+ } else if (selectedElementIndex + 1 < ownerFlatTree.length) {\n+ selectedElementIndex++;\n+ }\n+ }\n+ break;\n+ case 'SELECT_PREVIOUS_ELEMENT_IN_TREE':\n+ if (ownerFlatTree !== null && ownerFlatTree.length > 0) {\n+ if (selectedElementIndex !== null && selectedElementIndex > 0) {\n+ selectedElementIndex--;\n+ }\n+ }\n+ break;\n+ case 'SELECT_OWNER':\n+ \/\/ If the Store doesn't have any owners metadata, don't drill into an empty stack.\n+ \/\/ This is a confusing user experience.\n+ if (store.hasOwnerMetadata) {\n+ ownerID = (action: ACTION_SELECT_OWNER).payload;\n+ ownerFlatTree = store.getOwnersListForElement(ownerID);\n+\n+ \/\/ Always force reset selection to be the top of the new owner tree.\n+ selectedElementIndex = 0;\n+ prevSelectedElementIndex = null;\n+ }\n+ break;\n+ default:\n+ \/\/ React can bailout of no-op updates.\n+ return state;\n+ }\n+\n+ \/\/ Changes in the selected owner require re-calculating the owners tree.\n+ if (\n+ ownerFlatTree !== state.ownerFlatTree ||\n+ action.type === 'HANDLE_STORE_MUTATION'\n+ ) {\n+ if (ownerFlatTree === null) {\n+ numElements = store.numElements;\n+ } else {\n+ numElements = ownerFlatTree.length;\n+ }\n+ }\n+\n+ \/\/ Keep selected item ID and index in sync.\n+ if (selectedElementIndex !== prevSelectedElementIndex) {\n+ if (selectedElementIndex === null) {\n+ selectedElementID = null;\n+ } else {\n+ if (ownerFlatTree !== null) {\n+ selectedElementID = ownerFlatTree[selectedElementIndex].id;\n+ }\n+ }\n+ }\n+\n+ return {\n+ ...state,\n+\n+ numElements,\n+ selectedElementID,\n+ selectedElementIndex,\n+\n+ searchIndex,\n+ searchResults,\n+ searchText,\n+\n+ ownerID,\n+ ownerFlatTree,\n+ };\n+}\n+\n+function reduceSuspenseState(\n+ store: Store,\n+ state: State,\n+ action: Action\n+): State {\n+ const { type } = action;\n+ switch (type) {\n+ case 'UPDATE_INSPECTED_ELEMENT_ID':\n+ if (state.inspectedElementID !== state.selectedElementID) {\n+ return {\n+ ...state,\n+ inspectedElementID: state.selectedElementID,\n+ };\n+ }\n+ break;\n+ default:\n+ break;\n+ }\n+\n+ \/\/ React can bailout of no-op updates.\n+ return state;\n+}\n+\n+type Props = {|\n+ children: React$Node,\n+\n+ \/\/ Used for automated testing\n+ defaultOwnerID?: ?number,\n+ defaultSelectedElementID?: ?number,\n+ defaultSelectedElementIndex?: ?number,\n+|};\n+\n+\/\/ TODO Remove TreeContextController wrapper element once global ConsearchText.write API exists.\n+function TreeContextController({\n+ children,\n+ defaultOwnerID,\n+ defaultSelectedElementID,\n+ defaultSelectedElementIndex,\n+}: Props) {\n+ const bridge = useContext(BridgeContext);\n+ const store = useContext(StoreContext);\n+\n+ const initialRevision = useMemo(() => store.revision, [store]);\n+\n+ \/\/ This reducer is created inline because it needs access to the Store.\n+ \/\/ The store is mutable, but the Store itself is global and lives for the lifetime of the DevTools,\n+ \/\/ so it's okay for the reducer to have an empty dependencies array.\n+ const reducer = useMemo(\n+ () => (state: State, action: Action): State => {\n+ const { type } = action;\n+ switch (type) {\n+ case 'GO_TO_NEXT_SEARCH_RESULT':\n+ case 'GO_TO_PREVIOUS_SEARCH_RESULT':\n+ case 'HANDLE_STORE_MUTATION':\n+ case 'RESET_OWNER_STACK':\n+ case 'SELECT_ELEMENT_AT_INDEX':\n+ case 'SELECT_ELEMENT_BY_ID':\n+ case 'SELECT_CHILD_ELEMENT_IN_TREE':\n+ case 'SELECT_NEXT_ELEMENT_IN_TREE':\n+ case 'SELECT_PARENT_ELEMENT_IN_TREE':\n+ case 'SELECT_PREVIOUS_ELEMENT_IN_TREE':\n+ case 'SELECT_OWNER':\n+ case 'UPDATE_INSPECTED_ELEMENT_ID':\n+ case 'SET_SEARCH_TEXT':\n+ state = reduceTreeState(store, state, action);\n+ state = reduceSearchState(store, state, action);\n+ state = reduceOwnersState(store, state, action);\n+ state = reduceSuspenseState(store, state, action);\n+\n+ \/\/ If the selected ID is in a collapsed subtree, reset the selected index to null.\n+ \/\/ We'll know the correct index after the layout effect will toggle the tree,\n+ \/\/ and the store tree is mutated to account for that.\n+ if (\n+ state.selectedElementID !== null &&\n+ store.isInsideCollapsedSubTree(state.selectedElementID)\n+ ) {\n+ return {\n+ ...state,\n+ selectedElementIndex: null,\n+ };\n+ }\n+\n+ return state;\n+ default:\n+ throw new Error(`Unrecognized action \"${type}\"`);\n+ }\n+ },\n+ [store]\n+ );\n+\n+ const [state, dispatch] = useReducer(reducer, {\n+ \/\/ Tree\n+ numElements: store.numElements,\n+ selectedElementID:\n+ defaultSelectedElementID == null ? null : defaultSelectedElementID,\n+ selectedElementIndex:\n+ defaultSelectedElementIndex == null ? null : defaultSelectedElementIndex,\n+\n+ \/\/ Search\n+ searchIndex: null,\n+ searchResults: [],\n+ searchText: '',\n+\n+ \/\/ Owners\n+ ownerID: defaultOwnerID == null ? null : defaultOwnerID,\n+ ownerFlatTree: null,\n+\n+ \/\/ Inspection element panel\n+ inspectedElementID: null,\n+ });\n+\n+ const dispatchWrapper = useCallback(\n+ (action: Action) => {\n+ \/\/ Run the first update at \"user-blocking\" priority in case dispatch is called from a non-React event.\n+ \/\/ In this case, the current (and \"next\") priorities would both be \"normal\",\n+ \/\/ and suspense would potentially block both updates.\n+ runWithPriority(UserBlockingPriority, () => dispatch(action));\n+ next(() => dispatch({ type: 'UPDATE_INSPECTED_ELEMENT_ID' }));\n+ },\n+ [dispatch]\n+ );\n+\n+ \/\/ Listen for host element selections.\n+ useEffect(() => {\n+ const handleSelectFiber = (id: number) =>\n+ dispatchWrapper({ type: 'SELECT_ELEMENT_BY_ID', payload: id });\n+ bridge.addListener('selectFiber', handleSelectFiber);\n+ return () => bridge.removeListener('selectFiber', handleSelectFiber);\n+ }, [bridge, dispatchWrapper]);\n+\n+ \/\/ If a newly-selected search result or inspection selection is inside of a collapsed subtree, auto expand it.\n+ \/\/ This needs to be a layout effect to avoid temporarily flashing an incorrect selection.\n+ const prevSelectedElementID = useRef<number | null>(null);\n+ useLayoutEffect(() => {\n+ if (state.selectedElementID !== prevSelectedElementID.current) {\n+ prevSelectedElementID.current = state.selectedElementID;\n+\n+ if (state.selectedElementID !== null) {\n+ let element = store.getElementByID(state.selectedElementID);\n+ if (element !== null && element.parentID > 0) {\n+ store.toggleIsCollapsed(element.parentID, false);\n+ }\n+ }\n+ }\n+ }, [state.selectedElementID, store]);\n+\n+ \/\/ Mutations to the underlying tree may impact this context (e.g. search results, selection state).\n+ useEffect(() => {\n+ const handleStoreMutated = ([addedElementIDs, removedElementIDs]: [\n+ Array<number>,\n+ Map<number, number>,\n+ ]) => {\n+ dispatchWrapper({\n+ type: 'HANDLE_STORE_MUTATION',\n+ payload: [addedElementIDs, removedElementIDs],\n+ });\n+ };\n+\n+ \/\/ Since this is a passive effect, the tree may have been mutated before our initial subscription.\n+ if (store.revision !== initialRevision) {\n+ \/\/ At the moment, we can treat this as a mutation.\n+ \/\/ We don't know which Elements were newly added\/removed, but that should be okay in this case.\n+ \/\/ It would only impact the search state, which is unlikely to exist yet at this point.\n+ dispatchWrapper({\n+ type: 'HANDLE_STORE_MUTATION',\n+ payload: [[], new Map()],\n+ });\n+ }\n+\n+ store.addListener('mutated', handleStoreMutated);\n+\n+ return () => store.removeListener('mutated', handleStoreMutated);\n+ }, [dispatchWrapper, initialRevision, store]);\n+\n+ return (\n+ <TreeStateContext.Provider value={state}>\n+ <TreeDispatcherContext.Provider value={dispatchWrapper}>\n+ {children}\n+ <\/TreeDispatcherContext.Provider>\n+ <\/TreeStateContext.Provider>\n+ );\n+}\n+function recursivelySearchTree(\n+ store: Store,\n+ elementID: number,\n+ regExp: RegExp,\n+ searchResults: Array<number>\n+): void {\n+ const { children, displayName, hocDisplayNames } = ((store.getElementByID(\n+ elementID\n+ ): any): Element);\n+\n+ if (displayName != null && regExp.test(displayName) === true) {\n+ searchResults.push(elementID);\n+ } else if (\n+ hocDisplayNames != null &&\n+ hocDisplayNames.length > 0 &&\n+ hocDisplayNames.some(name => regExp.test(name)) === true\n+ ) {\n+ searchResults.push(elementID);\n+ }\n+\n+ children.forEach(childID =>\n+ recursivelySearchTree(store, childID, regExp, searchResults)\n+ );\n+}\n+\n+function getNearestResultIndex(\n+ store: Store,\n+ searchResults: Array<number>,\n+ selectedElementIndex: number\n+): number {\n+ const index = searchResults.findIndex(id => {\n+ const index = store.getIndexOfElementID(id);\n+ return index !== null && index >= selectedElementIndex;\n+ });\n+\n+ return index === -1 ? 0 : index;\n+}\n+\n+export { TreeDispatcherContext, TreeStateContext, TreeContextController };\ndiff --git a\/src\/devtools\/views\/Components\/TreeFocusedContext.js b\/src\/devtools\/views\/Components\/TreeFocusedContext.js\nnew file mode 100644\nindex 0000000000..7851db1316\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/TreeFocusedContext.js\n@@ -0,0 +1,7 @@\n+\/\/ @flow\n+\n+import { createContext } from 'react';\n+\n+const TreeFocusedContext = createContext<boolean>(false);\n+\n+export default TreeFocusedContext;\ndiff --git a\/src\/devtools\/views\/Components\/ViewElementSourceContext.js b\/src\/devtools\/views\/Components\/ViewElementSourceContext.js\nnew file mode 100644\nindex 0000000000..30a3f017af\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/ViewElementSourceContext.js\n@@ -0,0 +1,18 @@\n+\/\/ @flow\n+\n+import { createContext } from 'react';\n+\n+import type {\n+ CanViewElementSource,\n+ ViewElementSource,\n+} from 'src\/devtools\/views\/DevTools';\n+\n+export type Context = {|\n+ canViewElementSourceFunction: CanViewElementSource | null,\n+ viewElementSourceFunction: ViewElementSource | null,\n+|};\n+\n+const ViewElementSourceContext = createContext<Context>(((null: any): Context));\n+ViewElementSourceContext.displayName = 'ViewElementSourceContext';\n+\n+export default ViewElementSourceContext;\ndiff --git a\/src\/devtools\/views\/Components\/types.js b\/src\/devtools\/views\/Components\/types.js\nnew file mode 100644\nindex 0000000000..bba0b300c9\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/types.js\n@@ -0,0 +1,87 @@\n+\/\/ @flow\n+\n+import type { ElementType } from 'src\/types';\n+\n+\/\/ Each element on the frontend corresponds to a Fiber on the backend.\n+\/\/ Some of its information (e.g. id, type, displayName) come from the backend.\n+\/\/ Other bits (e.g. weight and depth) are computed on the frontend for windowing and display purposes.\n+\/\/ Elements are udpated on a push basis– meaning the backend pushes updates to the frontend when needed.\n+export type Element = {|\n+ id: number,\n+ parentID: number,\n+ children: Array<number>,\n+ type: ElementType,\n+ displayName: string | null,\n+ key: number | string | null,\n+\n+ hocDisplayNames: null | Array<string>,\n+\n+ \/\/ Should the elements children be visible in the tree?\n+ isCollapsed: boolean,\n+\n+ \/\/ Owner (if available)\n+ ownerID: number,\n+\n+ \/\/ How many levels deep within the tree is this element?\n+ \/\/ This determines how much indentation (left padding) should be used in the Elements tree.\n+ depth: number,\n+\n+ \/\/ How many nodes (including itself) are below this Element within the tree.\n+ \/\/ This property is used to quickly determine the total number of Elements,\n+ \/\/ and the Element at any given index (for windowing purposes).\n+ weight: number,\n+|};\n+\n+export type Owner = {|\n+ displayName: string | null,\n+ id: number,\n+ hocDisplayNames: Array<string> | null,\n+ type: ElementType,\n+|};\n+\n+export type OwnersList = {|\n+ id: number,\n+ owners: Array<Owner> | null,\n+|};\n+\n+export type Source = {|\n+ fileName: string,\n+ lineNumber: number,\n+|};\n+\n+export type InspectedElement = {|\n+ id: number,\n+\n+ \/\/ Does the current renderer support editable hooks?\n+ canEditHooks: boolean,\n+\n+ \/\/ Does the current renderer support editable function props?\n+ canEditFunctionProps: boolean,\n+\n+ \/\/ Is this Suspense, and can its value be overriden now?\n+ canToggleSuspense: boolean,\n+\n+ \/\/ Can view component source location.\n+ canViewSource: boolean,\n+\n+ \/\/ Inspectable properties.\n+ context: Object | null,\n+ hooks: Object | null,\n+ props: Object | null,\n+ state: Object | null,\n+\n+ \/\/ List of owners\n+ owners: Array<Owner> | null,\n+\n+ \/\/ Location of component in source coude.\n+ source: Source | null,\n+\n+ type: ElementType,\n+|};\n+\n+\/\/ TODO: Add profiling type\n+\n+export type DehydratedData = {|\n+ cleaned: Array<Array<string | number>>,\n+ data: Object,\n+|};\ndiff --git a\/src\/devtools\/views\/DevTools.css b\/src\/devtools\/views\/DevTools.css\nnew file mode 100644\nindex 0000000000..efc59b78db\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/DevTools.css\n@@ -0,0 +1,54 @@\n+.DevTools {\n+ width: 100%;\n+ height: 100%;\n+ display: flex;\n+ flex-direction: column;\n+ background-color: var(--color-background);\n+ color: var(--color-text);\n+}\n+\n+.TabBar {\n+ flex: 0 0 auto;\n+ display: flex;\n+ align-items: center;\n+ padding: 0 0.5rem;\n+ background-color: var(--color-background);\n+ border-top: 1px solid var(--color-border);\n+ font-family: var(--font-family-sans);\n+ font-size: var(--font-size-sans-large);\n+ user-select: none;\n+\n+ \/* Electron drag area *\/\n+ -webkit-app-region: drag;\n+}\n+\n+.Spacer {\n+ flex: 1;\n+}\n+\n+.TabContent {\n+ flex: 1 1 100%;\n+ overflow: auto;\n+}\n+\n+.DevToolsVersion {\n+ font-size: var(--font-size-sans-normal);\n+ margin-right: 0.5rem;\n+}\n+\n+.DevToolsVersion:before {\n+ font-size: var(--font-size-sans-large);\n+ content: 'DevTools ';\n+}\n+\n+@media screen and (max-width: 400px) {\n+ .DevToolsVersion:before {\n+ content: '';\n+ }\n+}\n+\n+@media screen and (max-width: 300px) {\n+ .DevToolsVersion {\n+ display: none;\n+ }\n+}\ndiff --git a\/src\/devtools\/views\/DevTools.js b\/src\/devtools\/views\/DevTools.js\nnew file mode 100644\nindex 0000000000..44d48b6131\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/DevTools.js\n@@ -0,0 +1,160 @@\n+\/\/ @flow\n+\n+\/\/ Reach styles need to come before any component styles.\n+\/\/ This makes overridding the styles simpler.\n+import '@reach\/menu-button\/styles.css';\n+import '@reach\/tooltip\/styles.css';\n+\n+import React, { useMemo, useState } from 'react';\n+import Store from '..\/store';\n+import { BridgeContext, StoreContext } from '.\/context';\n+import Components from '.\/Components\/Components';\n+import Profiler from '.\/Profiler\/Profiler';\n+import TabBar from '.\/TabBar';\n+import { SettingsContextController } from '.\/Settings\/SettingsContext';\n+import { TreeContextController } from '.\/Components\/TreeContext';\n+import ViewElementSourceContext from '.\/Components\/ViewElementSourceContext';\n+import { ProfilerContextController } from '.\/Profiler\/ProfilerContext';\n+import { ModalDialogContextController } from '.\/ModalDialog';\n+import ReactLogo from '.\/ReactLogo';\n+import WarnIfLegacyBackendDetected from '.\/WarnIfLegacyBackendDetected';\n+import ShowWelcomeToTheNewDevToolsDialog from '.\/ShowWelcomeToTheNewDevToolsDialog';\n+\n+import styles from '.\/DevTools.css';\n+\n+import '.\/root.css';\n+\n+import type { InspectedElement } from 'src\/devtools\/views\/Components\/types';\n+import type { FrontendBridge } from 'src\/bridge';\n+\n+export type BrowserTheme = 'dark' | 'light';\n+export type TabID = 'components' | 'profiler';\n+export type ViewElementSource = (\n+ id: number,\n+ inspectedElement: InspectedElement\n+) => void;\n+export type CanViewElementSource = (\n+ inspectedElement: InspectedElement\n+) => boolean;\n+\n+export type Props = {|\n+ bridge: FrontendBridge,\n+ browserTheme?: BrowserTheme,\n+ canViewElementSourceFunction?: ?CanViewElementSource,\n+ defaultTab?: TabID,\n+ showTabBar?: boolean,\n+ showWelcomeToTheNewDevToolsDialog?: boolean,\n+ store: Store,\n+ warnIfLegacyBackendDetected?: boolean,\n+ viewElementSourceFunction?: ?ViewElementSource,\n+\n+ \/\/ This property is used only by the web extension target.\n+ \/\/ The built-in tab UI is hidden in that case, in favor of the browser's own panel tabs.\n+ \/\/ This is done to save space within the app.\n+ \/\/ Because of this, the extension needs to be able to change which tab is active\/rendered.\n+ overrideTab?: TabID,\n+\n+ \/\/ To avoid potential multi-root trickiness, the web extension uses portals to render tabs.\n+ \/\/ The root <DevTools> app is rendered in the top-level extension window,\n+ \/\/ but individual tabs (e.g. Components, Profiling) can be rendered into portals within their browser panels.\n+ componentsPortalContainer?: Element,\n+ profilerPortalContainer?: Element,\n+|};\n+\n+const componentsTab = {\n+ id: ('components': TabID),\n+ icon: 'components',\n+ label: 'Components',\n+ title: 'React Components',\n+};\n+const profilerTab = {\n+ id: ('profiler': TabID),\n+ icon: 'profiler',\n+ label: 'Profiler',\n+ title: 'React Profiler',\n+};\n+\n+const tabs = [componentsTab, profilerTab];\n+\n+export default function DevTools({\n+ bridge,\n+ browserTheme = 'light',\n+ canViewElementSourceFunction = null,\n+ defaultTab = 'components',\n+ componentsPortalContainer,\n+ overrideTab,\n+ profilerPortalContainer,\n+ showTabBar = false,\n+ showWelcomeToTheNewDevToolsDialog = false,\n+ store,\n+ warnIfLegacyBackendDetected = false,\n+ viewElementSourceFunction = null,\n+}: Props) {\n+ const [tab, setTab] = useState(defaultTab);\n+ if (overrideTab != null && overrideTab !== tab) {\n+ setTab(overrideTab);\n+ }\n+\n+ const viewElementSource = useMemo(\n+ () => ({\n+ canViewElementSourceFunction,\n+ viewElementSourceFunction,\n+ }),\n+ [canViewElementSourceFunction, viewElementSourceFunction]\n+ );\n+\n+ return (\n+ <BridgeContext.Provider value={bridge}>\n+ <StoreContext.Provider value={store}>\n+ <ModalDialogContextController>\n+ <SettingsContextController\n+ browserTheme={browserTheme}\n+ componentsPortalContainer={componentsPortalContainer}\n+ profilerPortalContainer={profilerPortalContainer}\n+ >\n+ <ViewElementSourceContext.Provider value={viewElementSource}>\n+ <TreeContextController>\n+ <ProfilerContextController>\n+ <div className={styles.DevTools}>\n+ {showTabBar && (\n+ <div className={styles.TabBar}>\n+ <ReactLogo \/>\n+ <span className={styles.DevToolsVersion}>\n+ {process.env.DEVTOOLS_VERSION}\n+ <\/span>\n+ <div className={styles.Spacer} \/>\n+ <TabBar\n+ currentTab={tab}\n+ id=\"DevTools\"\n+ selectTab={setTab}\n+ tabs={tabs}\n+ type=\"navigation\"\n+ \/>\n+ <\/div>\n+ )}\n+ <div\n+ className={styles.TabContent}\n+ hidden={tab !== 'components'}\n+ >\n+ <Components portalContainer={componentsPortalContainer} \/>\n+ <\/div>\n+ <div\n+ className={styles.TabContent}\n+ hidden={tab !== 'profiler'}\n+ >\n+ <Profiler portalContainer={profilerPortalContainer} \/>\n+ <\/div>\n+ <\/div>\n+ <\/ProfilerContextController>\n+ <\/TreeContextController>\n+ <\/ViewElementSourceContext.Provider>\n+ <\/SettingsContextController>\n+ {warnIfLegacyBackendDetected && <WarnIfLegacyBackendDetected \/>}\n+ {showWelcomeToTheNewDevToolsDialog && (\n+ <ShowWelcomeToTheNewDevToolsDialog \/>\n+ )}\n+ <\/ModalDialogContextController>\n+ <\/StoreContext.Provider>\n+ <\/BridgeContext.Provider>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/ErrorBoundary.css b\/src\/devtools\/views\/ErrorBoundary.css\nnew file mode 100644\nindex 0000000000..8a4b506c85\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/ErrorBoundary.css\n@@ -0,0 +1,24 @@\n+.ErrorBoundary {\n+ height: 100%;\n+ width: 100%;\n+ background-color: white;\n+ color: red;\n+ padding: 0.5rem;\n+ overflow: auto;\n+}\n+\n+.Header {\n+ font-size: var(--font-size-sans-large);\n+ font-weight: bold;\n+}\n+\n+.Stack {\n+ margin-top: 0.5rem;\n+ white-space: pre-wrap;\n+ font-family: var(--font-family-monospace);\n+ font-size: var(--font-size-monospace-small);\n+ background-color: hsl(0, 100%, 97%);\n+ border: 1px solid hsl(0, 100%, 92%);\n+ border-radius: 0.25rem;\n+ padding: 0.5rem;\n+}\ndiff --git a\/src\/devtools\/views\/ErrorBoundary.js b\/src\/devtools\/views\/ErrorBoundary.js\nnew file mode 100644\nindex 0000000000..c6cd9b16c1\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/ErrorBoundary.js\n@@ -0,0 +1,105 @@\n+\/\/ @flow\n+\n+import React, { Component } from 'react';\n+import styles from '.\/ErrorBoundary.css';\n+\n+type Props = {|\n+ children: React$Node,\n+|};\n+\n+type State = {|\n+ callStack: string | null,\n+ componentStack: string | null,\n+ errorMessage: string | null,\n+ hasError: boolean,\n+|};\n+\n+export default class ErrorBoundary extends Component<Props, State> {\n+ state: State = {\n+ callStack: null,\n+ componentStack: null,\n+ errorMessage: null,\n+ hasError: false,\n+ };\n+\n+ componentDidCatch(error: any, { componentStack }: any) {\n+ const errorMessage =\n+ typeof error === 'object' && error.hasOwnProperty('message')\n+ ? error.message\n+ : error;\n+\n+ const callStack =\n+ typeof error === 'object' && error.hasOwnProperty('stack')\n+ ? error.stack\n+ .split('\\n')\n+ .slice(1)\n+ .join('\\n')\n+ : null;\n+\n+ this.setState({\n+ callStack,\n+ componentStack,\n+ errorMessage,\n+ hasError: true,\n+ });\n+ }\n+\n+ render() {\n+ const { children } = this.props;\n+ const { callStack, componentStack, errorMessage, hasError } = this.state;\n+\n+ let bugURL = process.env.GITHUB_URL;\n+ if (bugURL) {\n+ const title = `Error: \"${errorMessage || ''}\"`;\n+ const label = '😭 bug';\n+\n+ let body = '\\n';\n+ body += '\\n---------------------------------------------';\n+ body += '\\nPlease do not remove the text below this line';\n+ body += '\\n---------------------------------------------';\n+ body += `\\n\\nDevTools version: ${process.env.DEVTOOLS_VERSION || ''}`;\n+ if (callStack) {\n+ body += `\\n\\nCall stack: ${callStack.trim()}`;\n+ }\n+ if (componentStack) {\n+ body += `\\n\\nComponent stack: ${componentStack.trim()}`;\n+ }\n+\n+ bugURL += `\/issues\/new?labels=${encodeURI(label)}&title=${encodeURI(\n+ title\n+ )}&body=${encodeURI(body)}`;\n+ }\n+\n+ if (hasError) {\n+ return (\n+ <div className={styles.ErrorBoundary}>\n+ <div className={styles.Header}>\n+ An error was thrown: \"{errorMessage}\"\n+ <\/div>\n+ {bugURL && (\n+ <a\n+ href={bugURL}\n+ rel=\"noopener noreferrer\"\n+ target=\"_blank\"\n+ title=\"Report bug\"\n+ >\n+ Report this issue\n+ <\/a>\n+ )}\n+ {!!callStack && (\n+ <div className={styles.Stack}>\n+ The error was thrown {callStack.trim()}\n+ <\/div>\n+ )}\n+ {!!componentStack && (\n+ <div className={styles.Stack}>\n+ The error occurred {componentStack.trim()}\n+ <\/div>\n+ )}\n+ <\/div>\n+ );\n+ }\n+\n+ return children;\n+ }\n+}\ndiff --git a\/src\/devtools\/views\/Icon.css b\/src\/devtools\/views\/Icon.css\nnew file mode 100644\nindex 0000000000..2141ede58b\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Icon.css\n@@ -0,0 +1,5 @@\n+.Icon {\n+ width: 1rem;\n+ height: 1rem;\n+ fill: currentColor;\n+}\ndiff --git a\/src\/devtools\/views\/Icon.js b\/src\/devtools\/views\/Icon.js\nnew file mode 100644\nindex 0000000000..b3b1c2c45c\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Icon.js\n@@ -0,0 +1,111 @@\n+\/\/ @flow\n+\n+import React from 'react';\n+import styles from '.\/Icon.css';\n+\n+export type IconType =\n+ | 'arrow'\n+ | 'components'\n+ | 'flame-chart'\n+ | 'interactions'\n+ | 'profiler'\n+ | 'ranked-chart'\n+ | 'search'\n+ | 'settings';\n+\n+type Props = {|\n+ className?: string,\n+ type: IconType,\n+|};\n+\n+export default function Icon({ className = '', type }: Props) {\n+ let pathData = null;\n+ switch (type) {\n+ case 'arrow':\n+ pathData = PATH_ARROW;\n+ break;\n+ case 'components':\n+ pathData = PATH_COMPONENTS;\n+ break;\n+ case 'flame-chart':\n+ pathData = PATH_FLAME_CHART;\n+ break;\n+ case 'interactions':\n+ pathData = PATH_INTERACTIONS;\n+ break;\n+ case 'profiler':\n+ pathData = PATH_PROFILER;\n+ break;\n+ case 'ranked-chart':\n+ pathData = PATH_RANKED_CHART;\n+ break;\n+ case 'search':\n+ pathData = PATH_SEARCH;\n+ break;\n+ case 'settings':\n+ pathData = PATH_SETTINGS;\n+ break;\n+ default:\n+ console.warn(`Unsupported type \"${type}\" specified for Icon`);\n+ break;\n+ }\n+\n+ return (\n+ <svg\n+ xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\n+ className={`${styles.Icon} ${className}`}\n+ width=\"24\"\n+ height=\"24\"\n+ viewBox=\"0 0 24 24\"\n+ >\n+ <path d=\"M0 0h24v24H0z\" fill=\"none\" \/>\n+ <path fill=\"currentColor\" d={pathData} \/>\n+ <\/svg>\n+ );\n+}\n+\n+const PATH_ARROW = 'M8 5v14l11-7z';\n+\n+const PATH_COMPONENTS =\n+ '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';\n+\n+const PATH_FLAME_CHART = `\n+ M10.0650893,21.5040462 C7.14020814,20.6850349 5,18.0558698 5,14.9390244 C5,14.017627\n+ 5,9.81707317 7.83333333,7.37804878 C7.83333333,7.37804878 7.58333333,11.199187 10,\n+ 10.6300813 C11.125,10.326087 13.0062497,7.63043487 8.91666667,2.5 C14.1666667,3.06910569\n+ 19,9.32926829 19,14.9390244 C19,18.0558698 16.8597919,20.6850349 13.9349107,21.5040462\n+ C14.454014,21.0118505 14.7765152,20.3233394 14.7765152,19.5613412 C14.7765152,17.2826087\n+ 12,15.0875871 12,15.0875871 C12,15.0875871 9.22348485,17.2826087 9.22348485,19.5613412\n+ C9.22348485,20.3233394 9.54598603,21.0118505 10.0650893,21.5040462 Z M12.0833333,20.6514763\n+ C11.3814715,20.6514763 10.8125,20.1226027 10.8125,19.4702042 C10.8125,18.6069669\n+ 12.0833333,16.9347829 12.0833333,16.9347829 C12.0833333,16.9347829 13.3541667,18.6069669\n+ 13.3541667,19.4702042 C13.3541667,20.1226027 12.7851952,20.6514763 12.0833333,20.6514763 Z\n+`;\n+\n+const PATH_INTERACTIONS = `\n+ 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\n+ 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\n+ 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\n+ 9.36 8 9.18 8 9c0-1.1.9-2 2-2s2 .9 2 2c0 .18-.02.36-.07.52l2.55\n+ 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\n+`;\n+\n+const PATH_PROFILER = 'M5 9.2h3V19H5zM10.6 5h2.8v14h-2.8zm5.6 8H19v6h-2.8z';\n+\n+const PATH_SEARCH = `\n+ 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\n+ 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\n+ 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\n+`;\n+\n+const PATH_RANKED_CHART = 'M3 5h18v3H3zM3 10.5h13v3H3zM3 16h8v3H3z';\n+\n+const PATH_SETTINGS = `\n+ 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\n+ 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\n+ 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\n+ 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\n+ 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\n+ 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\n+ 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z\n+`;\ndiff --git a\/src\/devtools\/views\/ModalDialog.css b\/src\/devtools\/views\/ModalDialog.css\nnew file mode 100644\nindex 0000000000..378e8e73b4\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/ModalDialog.css\n@@ -0,0 +1,40 @@\n+.Background {\n+ position: absolute;\n+ width: 100%;\n+ height: 100%;\n+ display: flex;\n+ align-items: flex-start;\n+ justify-content: center;\n+ padding: 1rem;\n+ background-color: var(--color-modal-background);\n+ overflow: auto;\n+}\n+\n+.Dialog {\n+ position: relative;\n+ z-index: 3;\n+ width: 25rem;\n+ min-width: 20rem;\n+ max-width: 100%;\n+ display: inline-block;\n+ background-color: var(--color-background);\n+ box-shadow: 0 2px 4px var(--color-shadow);\n+ padding: 0.5rem;\n+ border: 1px solid var(--color-border);\n+ border-radius: 0.25rem;\n+ font-size: var(--font-size-sans-normal);\n+}\n+\n+.Title {\n+ font-size: var(--font-size-sans-large);\n+ margin-bottom: 0.5rem;\n+}\n+\n+.Buttons {\n+ text-align: right;\n+ margin-top: 0.5rem;\n+}\n+\n+.Button {\n+ font-size: var(--font-size-sans-large);\n+}\ndiff --git a\/src\/devtools\/views\/ModalDialog.js b\/src\/devtools\/views\/ModalDialog.js\nnew file mode 100644\nindex 0000000000..e8fd44c93a\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/ModalDialog.js\n@@ -0,0 +1,150 @@\n+\/\/ @flow\n+\n+import React, {\n+ createContext,\n+ useCallback,\n+ useContext,\n+ useMemo,\n+ useReducer,\n+ useRef,\n+} from 'react';\n+import Button from '.\/Button';\n+import { useModalDismissSignal } from '.\/hooks';\n+\n+import styles from '.\/ModalDialog.css';\n+\n+type DIALOG_ACTION_HIDE = {|\n+ type: 'HIDE',\n+|};\n+type DIALOG_ACTION_SHOW = {|\n+ type: 'SHOW',\n+ canBeDismissed?: boolean,\n+ content: React$Node,\n+ title?: React$Node | null,\n+|};\n+\n+type Action = DIALOG_ACTION_HIDE | DIALOG_ACTION_SHOW;\n+\n+type Dispatch = (action: Action) => void;\n+\n+type State = {|\n+ canBeDismissed: boolean,\n+ content: React$Node | null,\n+ isVisible: boolean,\n+ title: React$Node | null,\n+|};\n+\n+type ModalDialogContextType = {|\n+ ...State,\n+ dispatch: Dispatch,\n+|};\n+\n+const ModalDialogContext = createContext<ModalDialogContextType>(\n+ ((null: any): ModalDialogContextType)\n+);\n+ModalDialogContext.displayName = 'ModalDialogContext';\n+\n+function dialogReducer(state, action) {\n+ switch (action.type) {\n+ case 'HIDE':\n+ return {\n+ canBeDismissed: true,\n+ content: null,\n+ isVisible: false,\n+ title: null,\n+ };\n+ case 'SHOW':\n+ return {\n+ canBeDismissed: action.canBeDismissed !== false,\n+ content: action.content,\n+ isVisible: true,\n+ title: action.title || null,\n+ };\n+ default:\n+ throw new Error(`Invalid action \"${action.type}\"`);\n+ }\n+}\n+\n+type Props = {|\n+ children: React$Node,\n+|};\n+\n+function ModalDialogContextController({ children }: Props) {\n+ const [state, dispatch] = useReducer<State, Action>(dialogReducer, {\n+ canBeDismissed: true,\n+ content: null,\n+ isVisible: false,\n+ title: null,\n+ });\n+\n+ const value = useMemo<ModalDialogContextType>(\n+ () => ({\n+ canBeDismissed: state.canBeDismissed,\n+ content: state.content,\n+ isVisible: state.isVisible,\n+ title: state.title,\n+ dispatch,\n+ }),\n+ [state, dispatch]\n+ );\n+\n+ return (\n+ <ModalDialogContext.Provider value={value}>\n+ {children}\n+ <\/ModalDialogContext.Provider>\n+ );\n+}\n+\n+function ModalDialog(_: {||}) {\n+ const { isVisible } = useContext(ModalDialogContext);\n+ return isVisible ? <ModalDialogImpl \/> : null;\n+}\n+\n+function ModalDialogImpl(_: {||}) {\n+ const { canBeDismissed, content, dispatch, title } = useContext(\n+ ModalDialogContext\n+ );\n+ const dismissModal = useCallback(() => {\n+ if (canBeDismissed) {\n+ dispatch({ type: 'HIDE' });\n+ }\n+ }, [canBeDismissed, dispatch]);\n+ const dialogRef = useRef<HTMLDivElement | null>(null);\n+\n+ \/\/ It's important to trap click events within the dialog,\n+ \/\/ so the dismiss hook will use it for click hit detection.\n+ \/\/ Because multiple tabs may be showing this ModalDialog,\n+ \/\/ the normal `dialog.contains(target)` check would fail on a background tab.\n+ useModalDismissSignal(dialogRef, dismissModal, false);\n+\n+ \/\/ Clicks on the dialog should not bubble.\n+ \/\/ This way we can dismiss by listening to clicks on the background.\n+ const handleDialogClick = (event: any) => {\n+ event.stopPropagation();\n+\n+ \/\/ It is important that we don't also prevent default,\n+ \/\/ or clicks within the dialog (e.g. on links) won't work.\n+ };\n+\n+ return (\n+ <div className={styles.Background} onClick={dismissModal}>\n+ <div\n+ ref={dialogRef}\n+ className={styles.Dialog}\n+ onClick={handleDialogClick}\n+ >\n+ {title !== null && <div className={styles.Title}>{title}<\/div>}\n+ {content}\n+ {canBeDismissed && (\n+ <div className={styles.Buttons}>\n+ <Button autoFocus className={styles.Button} onClick={dismissModal}>\n+ Okay\n+ <\/Button>\n+ <\/div>\n+ )}\n+ <\/div>\n+ <\/div>\n+ );\n+}\n+\n+export { ModalDialog, ModalDialogContext, ModalDialogContextController };\ndiff --git a\/src\/devtools\/views\/Profiler\/ChartNode.css b\/src\/devtools\/views\/Profiler\/ChartNode.css\nnew file mode 100644\nindex 0000000000..3117ea1932\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/ChartNode.css\n@@ -0,0 +1,31 @@\n+.Group {\n+ transition: all ease-in-out 250ms;\n+}\n+\n+.Rect {\n+ cursor: pointer;\n+ stroke: var(--color-background);\n+ transition: all ease-in-out 250ms;\n+}\n+\n+.ForeignObject {\n+ pointer-events: none;\n+ transition: all ease-in-out 250ms;\n+}\n+\n+.Div {\n+ pointer-events: none;\n+ white-space: nowrap;\n+ text-overflow: ellipsis;\n+ overflow: hidden;\n+ font-family: var(--font-family-sans);\n+ font-size: var(--font-size-sans-normal);\n+ margin-left: 0.25rem;\n+ margin-right: 0.25rem;\n+ line-height: 1.5;\n+ padding: 0 0 0;\n+ font-weight: 400;\n+ color: var(--color-commit-gradient-text);\n+ text-align: left;\n+ transition: all ease-in-out 250ms;\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/ChartNode.js b\/src\/devtools\/views\/Profiler\/ChartNode.js\nnew file mode 100644\nindex 0000000000..a85f7702a3\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/ChartNode.js\n@@ -0,0 +1,68 @@\n+\/\/ @flow\n+\n+import React from 'react';\n+\n+import styles from '.\/ChartNode.css';\n+\n+type Props = {|\n+ color: string,\n+ height: number,\n+ isDimmed?: boolean,\n+ label: string,\n+ onClick: (event: SyntheticMouseEvent<*>) => mixed,\n+ onDoubleClick?: (event: SyntheticMouseEvent<*>) => mixed,\n+ placeLabelAboveNode?: boolean,\n+ textStyle?: Object,\n+ width: number,\n+ x: number,\n+ y: number,\n+|};\n+\n+const minWidthToDisplay = 35;\n+\n+export default function ChartNode({\n+ color,\n+ height,\n+ isDimmed = false,\n+ label,\n+ onClick,\n+ onDoubleClick,\n+ textStyle,\n+ width,\n+ x,\n+ y,\n+}: Props) {\n+ return (\n+ <g className={styles.Group} transform={`translate(${x},${y})`}>\n+ <title>{label}<\/title>\n+ <rect\n+ width={width}\n+ height={height}\n+ fill={color}\n+ onClick={onClick}\n+ onDoubleClick={onDoubleClick}\n+ className={styles.Rect}\n+ style={{\n+ opacity: isDimmed ? 0.5 : 1,\n+ }}\n+ \/>\n+ {width >= minWidthToDisplay && (\n+ <foreignObject\n+ width={width}\n+ height={height}\n+ className={styles.ForeignObject}\n+ style={{\n+ paddingLeft: x < 0 ? -x : 0,\n+ opacity: isDimmed ? 0.75 : 1,\n+ display: width < minWidthToDisplay ? 'none' : 'block',\n+ }}\n+ y={0}\n+ >\n+ <div className={styles.Div} style={textStyle}>\n+ {label}\n+ <\/div>\n+ <\/foreignObject>\n+ )}\n+ <\/g>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/ClearProfilingDataButton.js b\/src\/devtools\/views\/Profiler\/ClearProfilingDataButton.js\nnew file mode 100644\nindex 0000000000..d3223eb8de\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/ClearProfilingDataButton.js\n@@ -0,0 +1,25 @@\n+\/\/ @flow\n+\n+import React, { useCallback, useContext } from 'react';\n+import { ProfilerContext } from '.\/ProfilerContext';\n+import Button from '..\/Button';\n+import ButtonIcon from '..\/ButtonIcon';\n+import { StoreContext } from '..\/context';\n+\n+export default function ClearProfilingDataButton() {\n+ const store = useContext(StoreContext);\n+ const { didRecordCommits, isProfiling } = useContext(ProfilerContext);\n+ const { profilerStore } = store;\n+\n+ const clear = useCallback(() => profilerStore.clear(), [profilerStore]);\n+\n+ return (\n+ <Button\n+ disabled={isProfiling || !didRecordCommits}\n+ onClick={clear}\n+ title=\"Clear profiling data\"\n+ >\n+ <ButtonIcon type=\"clear\" \/>\n+ <\/Button>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/CommitFlamegraph.css b\/src\/devtools\/views\/Profiler\/CommitFlamegraph.css\nnew file mode 100644\nindex 0000000000..143f83b043\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/CommitFlamegraph.css\n@@ -0,0 +1,10 @@\n+.Container {\n+ width: 100%;\n+ flex: 1;\n+ padding: 0.5rem;\n+}\n+\n+.PatternPath {\n+ stroke: var(--color-commit-did-not-render-pattern);\n+ stroke-width: 1;\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/CommitFlamegraph.js b\/src\/devtools\/views\/Profiler\/CommitFlamegraph.js\nnew file mode 100644\nindex 0000000000..676a2f1334\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/CommitFlamegraph.js\n@@ -0,0 +1,164 @@\n+\/\/ @flow\n+\n+import React, { forwardRef, useCallback, useContext, useMemo } from 'react';\n+import AutoSizer from 'react-virtualized-auto-sizer';\n+import { FixedSizeList } from 'react-window';\n+import { ProfilerContext } from '.\/ProfilerContext';\n+import NoCommitData from '.\/NoCommitData';\n+import CommitFlamegraphListItem from '.\/CommitFlamegraphListItem';\n+import { scale } from '.\/utils';\n+import { StoreContext } from '..\/context';\n+import { SettingsContext } from '..\/Settings\/SettingsContext';\n+\n+import styles from '.\/CommitFlamegraph.css';\n+\n+import type { ChartData, ChartNode } from '.\/FlamegraphChartBuilder';\n+import type { CommitTree } from '.\/types';\n+\n+export type ItemData = {|\n+ chartData: ChartData,\n+ scaleX: (value: number, fallbackValue: number) => number,\n+ selectedChartNode: ChartNode | null,\n+ selectedChartNodeIndex: number,\n+ selectFiber: (id: number | null, name: string | null) => void,\n+ width: number,\n+|};\n+\n+export default function CommitFlamegraphAutoSizer(_: {||}) {\n+ const { profilerStore } = useContext(StoreContext);\n+ const { rootID, selectedCommitIndex, selectFiber } = useContext(\n+ ProfilerContext\n+ );\n+ const { profilingCache } = profilerStore;\n+\n+ const deselectCurrentFiber = useCallback(\n+ event => {\n+ event.stopPropagation();\n+ selectFiber(null, null);\n+ },\n+ [selectFiber]\n+ );\n+\n+ let commitTree: CommitTree | null = null;\n+ let chartData: ChartData | null = null;\n+ if (selectedCommitIndex !== null) {\n+ commitTree = profilingCache.getCommitTree({\n+ commitIndex: selectedCommitIndex,\n+ rootID: ((rootID: any): number),\n+ });\n+\n+ chartData = profilingCache.getFlamegraphChartData({\n+ commitIndex: selectedCommitIndex,\n+ commitTree,\n+ rootID: ((rootID: any): number),\n+ });\n+ }\n+\n+ if (commitTree != null && chartData != null && chartData.depth > 0) {\n+ return (\n+ <div className={styles.Container} onClick={deselectCurrentFiber}>\n+ <AutoSizer>\n+ {({ height, width }) => (\n+ \/\/ Force Flow types to avoid checking for `null` here because there's no static proof that\n+ \/\/ by the time this render prop function is called, the values of the `let` variables have not changed.\n+ <CommitFlamegraph\n+ chartData={((chartData: any): ChartData)}\n+ commitTree={((commitTree: any): CommitTree)}\n+ height={height}\n+ width={width}\n+ \/>\n+ )}\n+ <\/AutoSizer>\n+ <\/div>\n+ );\n+ } else {\n+ return <NoCommitData \/>;\n+ }\n+}\n+\n+type Props = {|\n+ chartData: ChartData,\n+ commitTree: CommitTree,\n+ height: number,\n+ width: number,\n+|};\n+\n+function CommitFlamegraph({ chartData, commitTree, height, width }: Props) {\n+ const { lineHeight } = useContext(SettingsContext);\n+ const { selectFiber, selectedFiberID } = useContext(ProfilerContext);\n+\n+ const selectedChartNodeIndex = useMemo<number>(() => {\n+ if (selectedFiberID === null) {\n+ return 0;\n+ }\n+ \/\/ The selected node might not be in the tree for this commit,\n+ \/\/ so it's important that we have a fallback plan.\n+ const depth = chartData.idToDepthMap.get(selectedFiberID);\n+ return depth !== undefined ? depth - 1 : 0;\n+ }, [chartData, selectedFiberID]);\n+\n+ const selectedChartNode = useMemo(() => {\n+ let chartNode = null;\n+ if (selectedFiberID !== null) {\n+ const foundChartNode = chartData.rows[selectedChartNodeIndex].find(\n+ chartNode => chartNode.id === selectedFiberID\n+ );\n+\n+ if (foundChartNode !== undefined) {\n+ chartNode = foundChartNode;\n+ }\n+ }\n+ return chartNode;\n+ }, [chartData, selectedFiberID, selectedChartNodeIndex]);\n+\n+ const itemData = useMemo<ItemData>(\n+ () => ({\n+ chartData,\n+ scaleX: scale(\n+ 0,\n+ selectedChartNode !== null\n+ ? selectedChartNode.treeBaseDuration\n+ : chartData.baseDuration,\n+ 0,\n+ width\n+ ),\n+ selectedChartNode,\n+ selectedChartNodeIndex,\n+ selectFiber,\n+ width,\n+ }),\n+ [chartData, selectedChartNode, selectedChartNodeIndex, selectFiber, width]\n+ );\n+\n+ return (\n+ <FixedSizeList\n+ height={height}\n+ innerElementType={InnerElementType}\n+ itemCount={chartData.depth}\n+ itemData={itemData}\n+ itemSize={lineHeight}\n+ width={width}\n+ >\n+ {CommitFlamegraphListItem}\n+ <\/FixedSizeList>\n+ );\n+}\n+\n+const InnerElementType = forwardRef(({ children, ...rest }, ref) => (\n+ <svg ref={ref} {...rest}>\n+ <defs>\n+ <pattern\n+ id=\"didNotRenderPattern\"\n+ patternUnits=\"userSpaceOnUse\"\n+ width=\"4\"\n+ height=\"4\"\n+ >\n+ <path\n+ d=\"M-1,1 l2,-2 M0,4 l4,-4 M3,5 l2,-2\"\n+ className={styles.PatternPath}\n+ \/>\n+ <\/pattern>\n+ <\/defs>\n+ {children}\n+ <\/svg>\n+));\ndiff --git a\/src\/devtools\/views\/Profiler\/CommitFlamegraphListItem.js b\/src\/devtools\/views\/Profiler\/CommitFlamegraphListItem.js\nnew file mode 100644\nindex 0000000000..00566d272b\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/CommitFlamegraphListItem.js\n@@ -0,0 +1,110 @@\n+\/\/ @flow\n+\n+import React, { Fragment, memo, useCallback, useContext } from 'react';\n+import { areEqual } from 'react-window';\n+import { barWidthThreshold } from '.\/constants';\n+import { getGradientColor } from '.\/utils';\n+import ChartNode from '.\/ChartNode';\n+import { SettingsContext } from '..\/Settings\/SettingsContext';\n+\n+import type { ItemData } from '.\/CommitFlamegraph';\n+\n+type Props = {\n+ data: ItemData,\n+ index: number,\n+ style: Object,\n+};\n+\n+function CommitFlamegraphListItem({ data, index, style }: Props) {\n+ const {\n+ chartData,\n+ scaleX,\n+ selectedChartNode,\n+ selectedChartNodeIndex,\n+ selectFiber,\n+ width,\n+ } = data;\n+ const { renderPathNodes, maxSelfDuration, rows } = chartData;\n+\n+ const { lineHeight } = useContext(SettingsContext);\n+ const handleClick = useCallback(\n+ (event: SyntheticMouseEvent<*>, id: number, name: string) => {\n+ event.stopPropagation();\n+ selectFiber(id, name);\n+ },\n+ [selectFiber]\n+ );\n+\n+ \/\/ List items are absolutely positioned using the CSS \"top\" attribute.\n+ \/\/ The \"left\" value will always be 0.\n+ \/\/ Since height is fixed, and width is based on the node's duration,\n+ \/\/ We can ignore those values as well.\n+ const top = parseInt(style.top, 10);\n+\n+ const row = rows[index];\n+\n+ let selectedNodeOffset = scaleX(\n+ selectedChartNode !== null ? selectedChartNode.offset : 0,\n+ width\n+ );\n+\n+ return (\n+ <Fragment>\n+ {row.map(chartNode => {\n+ const {\n+ didRender,\n+ id,\n+ label,\n+ name,\n+ offset,\n+ selfDuration,\n+ treeBaseDuration,\n+ } = chartNode;\n+\n+ const nodeOffset = scaleX(offset, width);\n+ const nodeWidth = scaleX(treeBaseDuration, width);\n+\n+ \/\/ Filter out nodes that are too small to see or click.\n+ \/\/ This also helps render large trees faster.\n+ if (nodeWidth < barWidthThreshold) {\n+ return null;\n+ }\n+\n+ \/\/ Filter out nodes that are outside of the horizontal window.\n+ if (\n+ nodeOffset + nodeWidth < selectedNodeOffset ||\n+ nodeOffset > selectedNodeOffset + width\n+ ) {\n+ return null;\n+ }\n+\n+ let color = 'url(#didNotRenderPattern)';\n+ let textColor = 'var(--color-commit-did-not-render-pattern-text)';\n+ if (didRender) {\n+ color = getGradientColor(selfDuration \/ maxSelfDuration);\n+ textColor = 'var(--color-commit-gradient-text)';\n+ } else if (renderPathNodes.has(id)) {\n+ color = 'var(--color-commit-did-not-render-fill)';\n+ textColor = 'var(--color-commit-did-not-render-fill-text)';\n+ }\n+\n+ return (\n+ <ChartNode\n+ color={color}\n+ height={lineHeight}\n+ isDimmed={index < selectedChartNodeIndex}\n+ key={id}\n+ label={label}\n+ onClick={event => handleClick(event, id, name)}\n+ textStyle={{ color: textColor }}\n+ width={nodeWidth}\n+ x={nodeOffset - selectedNodeOffset}\n+ y={top}\n+ \/>\n+ );\n+ })}\n+ <\/Fragment>\n+ );\n+}\n+\n+export default memo<Props>(CommitFlamegraphListItem, areEqual);\ndiff --git a\/src\/devtools\/views\/Profiler\/CommitRanked.css b\/src\/devtools\/views\/Profiler\/CommitRanked.css\nnew file mode 100644\nindex 0000000000..c226f30486\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/CommitRanked.css\n@@ -0,0 +1,5 @@\n+.Container {\n+ width: 100%;\n+ flex: 1;\n+ padding: 0.5rem;\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/CommitRanked.js b\/src\/devtools\/views\/Profiler\/CommitRanked.js\nnew file mode 100644\nindex 0000000000..379dab481d\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/CommitRanked.js\n@@ -0,0 +1,130 @@\n+\/\/ @flow\n+\n+import React, { useCallback, useContext, useMemo } from 'react';\n+import AutoSizer from 'react-virtualized-auto-sizer';\n+import { FixedSizeList } from 'react-window';\n+import { ProfilerContext } from '.\/ProfilerContext';\n+import NoCommitData from '.\/NoCommitData';\n+import CommitRankedListItem from '.\/CommitRankedListItem';\n+import { scale } from '.\/utils';\n+import { StoreContext } from '..\/context';\n+import { SettingsContext } from '..\/Settings\/SettingsContext';\n+\n+import styles from '.\/CommitRanked.css';\n+\n+import type { ChartData } from '.\/RankedChartBuilder';\n+import type { CommitTree } from '.\/types';\n+\n+export type ItemData = {|\n+ chartData: ChartData,\n+ scaleX: (value: number, fallbackValue: number) => number,\n+ selectedFiberID: number | null,\n+ selectedFiberIndex: number,\n+ selectFiber: (id: number | null, name: string | null) => void,\n+ width: number,\n+|};\n+\n+export default function CommitRankedAutoSizer(_: {||}) {\n+ const { profilerStore } = useContext(StoreContext);\n+ const { rootID, selectedCommitIndex, selectFiber } = useContext(\n+ ProfilerContext\n+ );\n+ const { profilingCache } = profilerStore;\n+\n+ const deselectCurrentFiber = useCallback(\n+ event => {\n+ event.stopPropagation();\n+ selectFiber(null, null);\n+ },\n+ [selectFiber]\n+ );\n+\n+ let commitTree: CommitTree | null = null;\n+ let chartData: ChartData | null = null;\n+ if (selectedCommitIndex !== null) {\n+ commitTree = profilingCache.getCommitTree({\n+ commitIndex: selectedCommitIndex,\n+ rootID: ((rootID: any): number),\n+ });\n+\n+ chartData = profilingCache.getRankedChartData({\n+ commitIndex: selectedCommitIndex,\n+ commitTree,\n+ rootID: ((rootID: any): number),\n+ });\n+ }\n+\n+ if (commitTree != null && chartData != null && chartData.nodes.length > 0) {\n+ return (\n+ <div className={styles.Container} onClick={deselectCurrentFiber}>\n+ <AutoSizer>\n+ {({ height, width }) => (\n+ <CommitRanked\n+ chartData={((chartData: any): ChartData)}\n+ commitTree={((commitTree: any): CommitTree)}\n+ height={height}\n+ width={width}\n+ \/>\n+ )}\n+ <\/AutoSizer>\n+ <\/div>\n+ );\n+ } else {\n+ return <NoCommitData \/>;\n+ }\n+}\n+\n+type Props = {|\n+ chartData: ChartData,\n+ commitTree: CommitTree,\n+ height: number,\n+ width: number,\n+|};\n+\n+function CommitRanked({ chartData, commitTree, height, width }: Props) {\n+ const { lineHeight } = useContext(SettingsContext);\n+ const { selectedFiberID, selectFiber } = useContext(ProfilerContext);\n+\n+ const selectedFiberIndex = useMemo(\n+ () => getNodeIndex(chartData, selectedFiberID),\n+ [chartData, selectedFiberID]\n+ );\n+\n+ const itemData = useMemo<ItemData>(\n+ () => ({\n+ chartData,\n+ scaleX: scale(0, chartData.nodes[selectedFiberIndex].value, 0, width),\n+ selectedFiberID,\n+ selectedFiberIndex,\n+ selectFiber,\n+ width,\n+ }),\n+ [chartData, selectedFiberID, selectedFiberIndex, selectFiber, width]\n+ );\n+\n+ return (\n+ <FixedSizeList\n+ height={height}\n+ innerElementType=\"svg\"\n+ itemCount={chartData.nodes.length}\n+ itemData={itemData}\n+ itemSize={lineHeight}\n+ width={width}\n+ >\n+ {CommitRankedListItem}\n+ <\/FixedSizeList>\n+ );\n+}\n+\n+const getNodeIndex = (chartData: ChartData, id: number | null): number => {\n+ if (id === null) {\n+ return 0;\n+ }\n+ const { nodes } = chartData;\n+ for (let index = 0; index < nodes.length; index++) {\n+ if (nodes[index].id === id) {\n+ return index;\n+ }\n+ }\n+ return 0;\n+};\ndiff --git a\/src\/devtools\/views\/Profiler\/CommitRankedListItem.js b\/src\/devtools\/views\/Profiler\/CommitRankedListItem.js\nnew file mode 100644\nindex 0000000000..5a25b3c49d\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/CommitRankedListItem.js\n@@ -0,0 +1,54 @@\n+\/\/ @flow\n+\n+import React, { memo, useCallback, useContext } from 'react';\n+import { areEqual } from 'react-window';\n+import { minBarWidth } from '.\/constants';\n+import { getGradientColor } from '.\/utils';\n+import ChartNode from '.\/ChartNode';\n+import { SettingsContext } from '..\/Settings\/SettingsContext';\n+\n+import type { ItemData } from '.\/CommitRanked';\n+\n+type Props = {\n+ data: ItemData,\n+ index: number,\n+ style: Object,\n+};\n+\n+function CommitRankedListItem({ data, index, style }: Props) {\n+ const { chartData, scaleX, selectedFiberIndex, selectFiber, width } = data;\n+\n+ const node = chartData.nodes[index];\n+\n+ const { lineHeight } = useContext(SettingsContext);\n+\n+ const handleClick = useCallback(\n+ event => {\n+ event.stopPropagation();\n+ selectFiber(node.id, node.name);\n+ },\n+ [node, selectFiber]\n+ );\n+\n+ \/\/ List items are absolutely positioned using the CSS \"top\" attribute.\n+ \/\/ The \"left\" value will always be 0.\n+ \/\/ Since height is fixed, and width is based on the node's duration,\n+ \/\/ We can ignore those values as well.\n+ const top = parseInt(style.top, 10);\n+\n+ return (\n+ <ChartNode\n+ color={getGradientColor(node.value \/ chartData.maxValue)}\n+ height={lineHeight}\n+ isDimmed={index < selectedFiberIndex}\n+ key={node.id}\n+ label={node.label}\n+ onClick={handleClick}\n+ width={Math.max(minBarWidth, scaleX(node.value, width))}\n+ x={0}\n+ y={top}\n+ \/>\n+ );\n+}\n+\n+export default memo<Props>(CommitRankedListItem, areEqual);\ndiff --git a\/src\/devtools\/views\/Profiler\/CommitTreeBuilder.js b\/src\/devtools\/views\/Profiler\/CommitTreeBuilder.js\nnew file mode 100644\nindex 0000000000..d805f92b1c\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/CommitTreeBuilder.js\n@@ -0,0 +1,363 @@\n+\/\/ @flow\n+\n+import {\n+ __DEBUG__,\n+ TREE_OPERATION_ADD,\n+ TREE_OPERATION_REMOVE,\n+ TREE_OPERATION_REORDER_CHILDREN,\n+ TREE_OPERATION_UPDATE_TREE_BASE_DURATION,\n+} from 'src\/constants';\n+import { utfDecodeString } from 'src\/utils';\n+import { ElementTypeRoot } from 'src\/types';\n+import ProfilerStore from 'src\/devtools\/ProfilerStore';\n+\n+import type { ElementType } from 'src\/types';\n+import type {\n+ CommitTree,\n+ CommitTreeNode,\n+ ProfilingDataForRootFrontend,\n+} from 'src\/devtools\/views\/Profiler\/types';\n+\n+const debug = (methodName, ...args) => {\n+ if (__DEBUG__) {\n+ console.log(\n+ `%cCommitTreeBuilder %c${methodName}`,\n+ 'color: pink; font-weight: bold;',\n+ 'font-weight: bold;',\n+ ...args\n+ );\n+ }\n+};\n+\n+const rootToCommitTreeMap: Map<number, Array<CommitTree>> = new Map();\n+\n+export function getCommitTree({\n+ commitIndex,\n+ profilerStore,\n+ rootID,\n+}: {|\n+ commitIndex: number,\n+ profilerStore: ProfilerStore,\n+ rootID: number,\n+|}): CommitTree {\n+ if (!rootToCommitTreeMap.has(rootID)) {\n+ rootToCommitTreeMap.set(rootID, []);\n+ }\n+\n+ const commitTrees = ((rootToCommitTreeMap.get(\n+ rootID\n+ ): any): Array<CommitTree>);\n+\n+ if (commitIndex < commitTrees.length) {\n+ return commitTrees[commitIndex];\n+ }\n+\n+ const { profilingData } = profilerStore;\n+ if (profilingData === null) {\n+ throw Error(`No profiling data available`);\n+ }\n+\n+ const dataForRoot = profilingData.dataForRoots.get(rootID);\n+ if (dataForRoot == null) {\n+ throw Error(`Could not find profiling data for root \"${rootID}\"`);\n+ }\n+\n+ const { operations } = dataForRoot;\n+\n+ \/\/ Commits are generated sequentially and cached.\n+ \/\/ If this is the very first commit, start with the cached snapshot and apply the first mutation.\n+ \/\/ Otherwise load (or generate) the previous commit and append a mutation to it.\n+ if (commitIndex === 0) {\n+ const nodes = new Map();\n+\n+ \/\/ Construct the initial tree.\n+ recursivelyInitializeTree(rootID, 0, nodes, dataForRoot);\n+\n+ \/\/ Mutate the tree\n+ if (operations != null && commitIndex < operations.length) {\n+ const commitTree = updateTree({ nodes, rootID }, operations[commitIndex]);\n+\n+ if (__DEBUG__) {\n+ __printTree(commitTree);\n+ }\n+\n+ commitTrees.push(commitTree);\n+ return commitTree;\n+ }\n+ } else {\n+ const previousCommitTree = getCommitTree({\n+ commitIndex: commitIndex - 1,\n+ profilerStore,\n+ rootID,\n+ });\n+\n+ if (operations != null && commitIndex < operations.length) {\n+ const commitTree = updateTree(\n+ previousCommitTree,\n+ operations[commitIndex]\n+ );\n+\n+ if (__DEBUG__) {\n+ __printTree(commitTree);\n+ }\n+\n+ commitTrees.push(commitTree);\n+ return commitTree;\n+ }\n+ }\n+\n+ throw Error(\n+ `getCommitTree(): Unable to reconstruct tree for root \"${rootID}\" and commit ${commitIndex}`\n+ );\n+}\n+\n+function recursivelyInitializeTree(\n+ id: number,\n+ parentID: number,\n+ nodes: Map<number, CommitTreeNode>,\n+ dataForRoot: ProfilingDataForRootFrontend\n+): void {\n+ const node = dataForRoot.snapshots.get(id);\n+ if (node != null) {\n+ nodes.set(id, {\n+ id,\n+ children: node.children,\n+ displayName: node.displayName,\n+ key: node.key,\n+ parentID,\n+ treeBaseDuration: ((dataForRoot.initialTreeBaseDurations.get(\n+ id\n+ ): any): number),\n+ type: node.type,\n+ });\n+\n+ node.children.forEach(childID =>\n+ recursivelyInitializeTree(childID, id, nodes, dataForRoot)\n+ );\n+ }\n+}\n+\n+function updateTree(\n+ commitTree: CommitTree,\n+ operations: Array<number>\n+): CommitTree {\n+ \/\/ Clone the original tree so edits don't affect it.\n+ const nodes = new Map(commitTree.nodes);\n+\n+ \/\/ Clone nodes before mutating them so edits don't affect them.\n+ const getClonedNode = (id: number): CommitTreeNode => {\n+ const clonedNode = ((Object.assign(\n+ {},\n+ nodes.get(id)\n+ ): any): CommitTreeNode);\n+ nodes.set(id, clonedNode);\n+ return clonedNode;\n+ };\n+\n+ let i = 2;\n+\n+ \/\/ Reassemble the string table.\n+ const stringTable = [\n+ null, \/\/ ID = 0 corresponds to the null string.\n+ ];\n+ const stringTableSize = operations[i++];\n+ const stringTableEnd = i + stringTableSize;\n+ while (i < stringTableEnd) {\n+ const nextLength = operations[i++];\n+ const nextString = utfDecodeString(\n+ (operations.slice(i, i + nextLength): any)\n+ );\n+ stringTable.push(nextString);\n+ i += nextLength;\n+ }\n+\n+ while (i < operations.length) {\n+ const operation = operations[i];\n+\n+ switch (operation) {\n+ case TREE_OPERATION_ADD:\n+ const id = ((operations[i + 1]: any): number);\n+ const type = ((operations[i + 2]: any): ElementType);\n+\n+ i = i + 3;\n+\n+ if (nodes.has(id)) {\n+ throw new Error(\n+ 'Commit tree already contains fiber ' +\n+ id +\n+ '. This is a bug in React DevTools.'\n+ );\n+ }\n+\n+ if (type === ElementTypeRoot) {\n+ i++; \/\/ supportsProfiling flag\n+ i++; \/\/ hasOwnerMetadata flag\n+\n+ if (__DEBUG__) {\n+ debug('Add', `new root fiber ${id}`);\n+ }\n+\n+ const node: CommitTreeNode = {\n+ children: [],\n+ displayName: null,\n+ id,\n+ key: null,\n+ parentID: 0,\n+ treeBaseDuration: 0, \/\/ This will be updated by a subsequent operation\n+ type,\n+ };\n+\n+ nodes.set(id, node);\n+ } else {\n+ const parentID = ((operations[i]: any): number);\n+ i++;\n+\n+ i++; \/\/ ownerID\n+\n+ const displayNameStringID = operations[i];\n+ const displayName = stringTable[displayNameStringID];\n+ i++;\n+\n+ const keyStringID = operations[i];\n+ const key = stringTable[keyStringID];\n+ i++;\n+\n+ if (__DEBUG__) {\n+ debug(\n+ 'Add',\n+ `fiber ${id} (${displayName || 'null'}) as child of ${parentID}`\n+ );\n+ }\n+\n+ const parentNode = getClonedNode(parentID);\n+ parentNode.children = parentNode.children.concat(id);\n+\n+ const node: CommitTreeNode = {\n+ children: [],\n+ displayName,\n+ id,\n+ key,\n+ parentID,\n+ treeBaseDuration: 0, \/\/ This will be updated by a subsequent operation\n+ type,\n+ };\n+\n+ nodes.set(id, node);\n+ }\n+\n+ break;\n+ case TREE_OPERATION_REMOVE: {\n+ const removeLength = ((operations[i + 1]: any): number);\n+ i = i + 2;\n+\n+ for (let removeIndex = 0; removeIndex < removeLength; removeIndex++) {\n+ const id = ((operations[i]: any): number);\n+ i = i + 1;\n+\n+ if (!nodes.has(id)) {\n+ throw new Error(\n+ 'Commit tree does not contain fiber ' +\n+ id +\n+ '. This is a bug in React DevTools.'\n+ );\n+ }\n+\n+ const node = getClonedNode(id);\n+ const parentID = node.parentID;\n+\n+ nodes.delete(id);\n+\n+ if (!nodes.has(parentID)) {\n+ \/\/ No-op\n+ } else {\n+ const parentNode = getClonedNode(parentID);\n+\n+ if (__DEBUG__) {\n+ debug('Remove', `fiber ${id} from parent ${parentID}`);\n+ }\n+\n+ parentNode.children = parentNode.children.filter(\n+ childID => childID !== id\n+ );\n+ }\n+ }\n+ break;\n+ }\n+ case TREE_OPERATION_REORDER_CHILDREN: {\n+ const id = ((operations[i + 1]: any): number);\n+ const numChildren = ((operations[i + 2]: any): number);\n+ const children = ((operations.slice(\n+ i + 3,\n+ i + 3 + numChildren\n+ ): any): Array<number>);\n+\n+ i = i + 3 + numChildren;\n+\n+ if (__DEBUG__) {\n+ debug('Re-order', `fiber ${id} children ${children.join(',')}`);\n+ }\n+\n+ const node = getClonedNode(id);\n+ node.children = Array.from(children);\n+\n+ break;\n+ }\n+ case TREE_OPERATION_UPDATE_TREE_BASE_DURATION: {\n+ const id = operations[i + 1];\n+\n+ const node = getClonedNode(id);\n+ node.treeBaseDuration = operations[i + 2] \/ 1000; \/\/ Convert microseconds back to milliseconds;\n+\n+ if (__DEBUG__) {\n+ debug(\n+ 'Update',\n+ `fiber ${id} treeBaseDuration to ${node.treeBaseDuration}`\n+ );\n+ }\n+\n+ i = i + 3;\n+ break;\n+ }\n+ default:\n+ throw Error(`Unsupported Bridge operation ${operation}`);\n+ }\n+ }\n+\n+ return {\n+ nodes,\n+ rootID: commitTree.rootID,\n+ };\n+}\n+\n+export function invalidateCommitTrees(): void {\n+ rootToCommitTreeMap.clear();\n+}\n+\n+\/\/ DEBUG\n+const __printTree = (commitTree: CommitTree) => {\n+ if (__DEBUG__) {\n+ const { nodes, rootID } = commitTree;\n+ console.group('__printTree()');\n+ const queue = [rootID, 0];\n+ while (queue.length > 0) {\n+ const id = queue.shift();\n+ const depth = queue.shift();\n+\n+ const node = nodes.get(id);\n+ if (node == null) {\n+ throw Error(`Could not find node with id \"${id}\" in commit tree`);\n+ }\n+\n+ console.log(\n+ `${'•'.repeat(depth)}${node.id}:${node.displayName || ''} ${\n+ node.key ? `key:\"${node.key}\"` : ''\n+ } (${node.treeBaseDuration})`\n+ );\n+\n+ node.children.forEach(childID => {\n+ queue.push(childID, depth + 1);\n+ });\n+ }\n+ console.groupEnd();\n+ }\n+};\ndiff --git a\/src\/devtools\/views\/Profiler\/FlamegraphChartBuilder.js b\/src\/devtools\/views\/Profiler\/FlamegraphChartBuilder.js\nnew file mode 100644\nindex 0000000000..9530febfc7\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/FlamegraphChartBuilder.js\n@@ -0,0 +1,179 @@\n+\/\/ @flow\n+\n+import { ElementTypeForwardRef, ElementTypeMemo } from 'src\/types';\n+import { formatDuration } from '.\/utils';\n+import ProfilerStore from 'src\/devtools\/ProfilerStore';\n+\n+import type { CommitTree } from '.\/types';\n+\n+export type ChartNode = {|\n+ actualDuration: number,\n+ didRender: boolean,\n+ id: number,\n+ label: string,\n+ name: string,\n+ offset: number,\n+ selfDuration: number,\n+ treeBaseDuration: number,\n+|};\n+\n+export type ChartData = {|\n+ baseDuration: number,\n+ depth: number,\n+ idToDepthMap: Map<number, number>,\n+ maxSelfDuration: number,\n+ renderPathNodes: Set<number>,\n+ rows: Array<Array<ChartNode>>,\n+|};\n+\n+const cachedChartData: Map<string, ChartData> = new Map();\n+\n+export function getChartData({\n+ commitIndex,\n+ commitTree,\n+ profilerStore,\n+ rootID,\n+}: {|\n+ commitIndex: number,\n+ commitTree: CommitTree,\n+ profilerStore: ProfilerStore,\n+ rootID: number,\n+|}): ChartData {\n+ const commitDatum = profilerStore.getCommitData(rootID, commitIndex);\n+\n+ const { fiberActualDurations, fiberSelfDurations } = commitDatum;\n+ const { nodes } = commitTree;\n+\n+ const key = `${rootID}-${commitIndex}`;\n+ if (cachedChartData.has(key)) {\n+ return ((cachedChartData.get(key): any): ChartData);\n+ }\n+\n+ const idToDepthMap: Map<number, number> = new Map();\n+ const renderPathNodes: Set<number> = new Set();\n+ const rows: Array<Array<ChartNode>> = [];\n+\n+ let maxDepth = 0;\n+ let maxSelfDuration = 0;\n+\n+ \/\/ Generate flame graph structure using tree base durations.\n+ const walkTree = (id: number, rightOffset: number, currentDepth: number) => {\n+ idToDepthMap.set(id, currentDepth);\n+\n+ const node = nodes.get(id);\n+ if (node == null) {\n+ throw Error(`Could not find node with id \"${id}\" in commit tree`);\n+ }\n+\n+ const { children, displayName, key, treeBaseDuration, type } = node;\n+\n+ const actualDuration = fiberActualDurations.get(id) || 0;\n+ const selfDuration = fiberSelfDurations.get(id) || 0;\n+ const didRender = fiberActualDurations.has(id);\n+\n+ const name = displayName || 'Anonymous';\n+ const maybeKey = key !== null ? ` key=\"${key}\"` : '';\n+\n+ let maybeBadge = '';\n+ if (type === ElementTypeForwardRef) {\n+ maybeBadge = ' (ForwardRef)';\n+ } else if (type === ElementTypeMemo) {\n+ maybeBadge = ' (Memo)';\n+ }\n+\n+ let label = `${name}${maybeBadge}${maybeKey}`;\n+ if (didRender) {\n+ label += ` (${formatDuration(selfDuration)}ms of ${formatDuration(\n+ actualDuration\n+ )}ms)`;\n+ }\n+\n+ maxDepth = Math.max(maxDepth, currentDepth);\n+ maxSelfDuration = Math.max(maxSelfDuration, selfDuration);\n+\n+ const chartNode: ChartNode = {\n+ actualDuration,\n+ didRender,\n+ id,\n+ label,\n+ name,\n+ offset: rightOffset - treeBaseDuration,\n+ selfDuration,\n+ treeBaseDuration,\n+ };\n+\n+ if (currentDepth > rows.length) {\n+ rows.push([chartNode]);\n+ } else {\n+ rows[currentDepth - 1].push(chartNode);\n+ }\n+\n+ for (let i = children.length - 1; i >= 0; i--) {\n+ const childID = children[i];\n+ const childChartNode = walkTree(childID, rightOffset, currentDepth + 1);\n+ rightOffset -= childChartNode.treeBaseDuration;\n+ }\n+\n+ return chartNode;\n+ };\n+\n+ let baseDuration = 0;\n+\n+ \/\/ Special case to handle unmounted roots.\n+ if (nodes.size > 0) {\n+ \/\/ Skip over the root; we don't want to show it in the flamegraph.\n+ const root = nodes.get(rootID);\n+ if (root == null) {\n+ throw Error(\n+ `Could not find root node with id \"${rootID}\" in commit tree`\n+ );\n+ }\n+\n+ \/\/ Don't assume a single root.\n+ \/\/ Component filters or Fragments might lead to multiple \"roots\" in a flame graph.\n+ for (let i = root.children.length - 1; i >= 0; i--) {\n+ const id = root.children[i];\n+ const node = nodes.get(id);\n+ if (node == null) {\n+ throw Error(`Could not find node with id \"${id}\" in commit tree`);\n+ }\n+ baseDuration += node.treeBaseDuration;\n+ walkTree(id, baseDuration, 1);\n+ }\n+\n+ fiberActualDurations.forEach((duration, id) => {\n+ const node = nodes.get(id);\n+ if (node != null) {\n+ let currentID = node.parentID;\n+ while (currentID !== 0) {\n+ if (renderPathNodes.has(currentID)) {\n+ \/\/ We've already walked this path; we can skip it.\n+ break;\n+ } else {\n+ renderPathNodes.add(currentID);\n+ }\n+\n+ const node = nodes.get(currentID);\n+ currentID = node != null ? node.parentID : 0;\n+ }\n+ }\n+ });\n+ }\n+\n+ const chartData = {\n+ baseDuration,\n+ depth: maxDepth,\n+ idToDepthMap,\n+ maxSelfDuration,\n+ renderPathNodes,\n+ rows,\n+ };\n+\n+ cachedChartData.set(key, chartData);\n+\n+ return chartData;\n+}\n+\n+export function invalidateChartData(): void {\n+ cachedChartData.clear();\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/InteractionListItem.css b\/src\/devtools\/views\/Profiler\/InteractionListItem.css\nnew file mode 100644\nindex 0000000000..62784d3333\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/InteractionListItem.css\n@@ -0,0 +1,43 @@\n+.Interaction,\n+.SelectedInteraction {\n+ display: flex;\n+ align-items: center;\n+ padding: 0 0.25rem;\n+ border-bottom: 1px solid var(--color-border);\n+}\n+\n+.Interaction:hover {\n+ background-color: var(--color-background-hover);\n+}\n+\n+.SelectedInteraction {\n+ background-color: var(--color-background-hover);\n+}\n+\n+.Name {\n+ white-space: nowrap;\n+ overflow-x: hidden;\n+ text-overflow: ellipsis;\n+}\n+\n+.Timeline {\n+ position: relative;\n+ height: 100%;\n+}\n+\n+.InteractionLine {\n+ position: absolute;\n+ height: 3px;\n+ background-color: var(--color-commit-did-not-render-fill);\n+ color: var(--color-commit-did-not-render-fill-text);\n+ border-radius: 0.125rem;\n+}\n+\n+.CommitBox {\n+ position: absolute;\n+ width: var(--interaction-commit-size);\n+ height: var(--interaction-commit-size);\n+ background-color: var(--color-commit-did-not-render-fill);\n+ color: var(--color-commit-did-not-render-fill-text);\n+ cursor: pointer;\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/InteractionListItem.js b\/src\/devtools\/views\/Profiler\/InteractionListItem.js\nnew file mode 100644\nindex 0000000000..4e6d8c746b\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/InteractionListItem.js\n@@ -0,0 +1,98 @@\n+\/\/ @flow\n+\n+import React, { memo, useCallback } from 'react';\n+import { areEqual } from 'react-window';\n+import { getGradientColor } from '.\/utils';\n+\n+import styles from '.\/InteractionListItem.css';\n+\n+import type { ItemData } from '.\/Interactions';\n+\n+type Props = {\n+ data: ItemData,\n+ index: number,\n+ style: Object,\n+};\n+\n+function InteractionListItem({ data: itemData, index, style }: Props) {\n+ const {\n+ chartData,\n+ dataForRoot,\n+ labelWidth,\n+ scaleX,\n+ selectedInteractionID,\n+ selectCommitIndex,\n+ selectInteraction,\n+ selectTab,\n+ } = itemData;\n+\n+ const { commitData, interactionCommits } = dataForRoot;\n+ const { interactions, lastInteractionTime, maxCommitDuration } = chartData;\n+\n+ const interaction = interactions[index];\n+ if (interaction == null) {\n+ throw Error(`Could not find interaction #${index}`);\n+ }\n+\n+ const handleClick = useCallback(() => {\n+ selectInteraction(interaction.id);\n+ }, [interaction, selectInteraction]);\n+\n+ const commits = interactionCommits.get(interaction.id) || [];\n+\n+ const startTime = interaction.timestamp;\n+ const stopTime = lastInteractionTime;\n+\n+ const viewCommit = (commitIndex: number) => {\n+ selectTab('flame-chart');\n+ selectCommitIndex(commitIndex);\n+ };\n+\n+ return (\n+ <div\n+ className={\n+ selectedInteractionID === interaction.id\n+ ? styles.SelectedInteraction\n+ : styles.Interaction\n+ }\n+ onClick={handleClick}\n+ style={style}\n+ >\n+ <div\n+ className={styles.Name}\n+ style={{ maxWidth: labelWidth }}\n+ title={interaction.name}\n+ >\n+ {interaction.name}\n+ <\/div>\n+ <div\n+ className={styles.InteractionLine}\n+ style={{\n+ left: labelWidth + scaleX(startTime, 0),\n+ width: scaleX(stopTime - startTime, 0),\n+ }}\n+ \/>\n+ {commits.map(commitIndex => (\n+ <div\n+ className={styles.CommitBox}\n+ key={commitIndex}\n+ onClick={() => viewCommit(commitIndex)}\n+ style={{\n+ backgroundColor: getGradientColor(\n+ Math.min(\n+ 1,\n+ Math.max(\n+ 0,\n+ commitData[commitIndex].duration \/ maxCommitDuration\n+ )\n+ ) || 0\n+ ),\n+ left: labelWidth + scaleX(commitData[commitIndex].timestamp, 0),\n+ }}\n+ \/>\n+ ))}\n+ <\/div>\n+ );\n+}\n+\n+export default memo<Props>(InteractionListItem, areEqual);\ndiff --git a\/src\/devtools\/views\/Profiler\/Interactions.css b\/src\/devtools\/views\/Profiler\/Interactions.css\nnew file mode 100644\nindex 0000000000..81fd9da918\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/Interactions.css\n@@ -0,0 +1,9 @@\n+.Container {\n+ width: 100%;\n+ flex: 1;\n+ padding: 0.5rem;\n+}\n+\n+.FocusTarget:focus {\n+ outline: none;\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/Interactions.js b\/src\/devtools\/views\/Profiler\/Interactions.js\nnew file mode 100644\nindex 0000000000..1ec5597603\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/Interactions.js\n@@ -0,0 +1,139 @@\n+\/\/ @flow\n+\n+import React, { useCallback, useContext, useMemo } from 'react';\n+import AutoSizer from 'react-virtualized-auto-sizer';\n+import { FixedSizeList } from 'react-window';\n+import { ProfilerContext } from '.\/ProfilerContext';\n+import InteractionListItem from '.\/InteractionListItem';\n+import NoInteractions from '.\/NoInteractions';\n+import { StoreContext } from '..\/context';\n+import { scale } from '.\/utils';\n+\n+import styles from '.\/Interactions.css';\n+\n+import type { ProfilingDataForRootFrontend } from '.\/types';\n+import type { ChartData } from '.\/InteractionsChartBuilder';\n+import type { TabID } from '.\/ProfilerContext';\n+\n+export type ItemData = {|\n+ chartData: ChartData,\n+ dataForRoot: ProfilingDataForRootFrontend,\n+ labelWidth: number,\n+ scaleX: (value: number, fallbackValue: number) => number,\n+ selectedInteractionID: number | null,\n+ selectCommitIndex: (id: number | null) => void,\n+ selectInteraction: (id: number | null) => void,\n+ selectTab: (id: TabID) => void,\n+|};\n+\n+export default function InteractionsAutoSizer(_: {||}) {\n+ return (\n+ <div className={styles.Container}>\n+ <AutoSizer>\n+ {({ height, width }) => <Interactions height={height} width={width} \/>}\n+ <\/AutoSizer>\n+ <\/div>\n+ );\n+}\n+\n+function Interactions({ height, width }: {| height: number, width: number |}) {\n+ const {\n+ rootID,\n+ selectedInteractionID,\n+ selectInteraction,\n+ selectCommitIndex,\n+ selectTab,\n+ } = useContext(ProfilerContext);\n+ const { profilerStore } = useContext(StoreContext);\n+ const { profilingCache } = profilerStore;\n+\n+ const dataForRoot = profilerStore.getDataForRoot(((rootID: any): number));\n+\n+ const chartData = profilingCache.getInteractionsChartData({\n+ rootID: ((rootID: any): number),\n+ });\n+\n+ const { interactions } = chartData;\n+\n+ const handleKeyDown = useCallback(\n+ event => {\n+ let index;\n+ switch (event.key) {\n+ case 'ArrowDown':\n+ index = interactions.findIndex(\n+ interaction => interaction.id === selectedInteractionID\n+ );\n+ selectInteraction(Math.min(interactions.length - 1, index + 1));\n+ event.stopPropagation();\n+ break;\n+ case 'ArrowUp':\n+ index = interactions.findIndex(\n+ interaction => interaction.id === selectedInteractionID\n+ );\n+ selectInteraction(Math.max(0, index - 1));\n+ event.stopPropagation();\n+ break;\n+ default:\n+ break;\n+ }\n+ },\n+ [interactions, selectedInteractionID, selectInteraction]\n+ );\n+\n+ const itemData = useMemo<ItemData>(() => {\n+ const interactionCommitSize = parseInt(\n+ getComputedStyle((document.body: any)).getPropertyValue(\n+ '--interaction-commit-size'\n+ ),\n+ 10\n+ );\n+ const interactionLabelWidth = parseInt(\n+ getComputedStyle((document.body: any)).getPropertyValue(\n+ '--interaction-label-width'\n+ ),\n+ 10\n+ );\n+\n+ const labelWidth = Math.min(interactionLabelWidth, width \/ 5);\n+ const timelineWidth = width - labelWidth - interactionCommitSize;\n+\n+ return {\n+ chartData,\n+ dataForRoot,\n+ labelWidth,\n+ scaleX: scale(0, chartData.lastInteractionTime, 0, timelineWidth),\n+ selectedInteractionID,\n+ selectCommitIndex,\n+ selectInteraction,\n+ selectTab,\n+ };\n+ }, [\n+ chartData,\n+ dataForRoot,\n+ selectedInteractionID,\n+ selectCommitIndex,\n+ selectInteraction,\n+ selectTab,\n+ width,\n+ ]);\n+\n+ \/\/ If a commit contains no fibers with an actualDuration > 0,\n+ \/\/ Display a fallback message.\n+ if (interactions.length === 0) {\n+ return <NoInteractions height={height} width={width} \/>;\n+ }\n+\n+ return (\n+ <div className={styles.FocusTarget} onKeyDown={handleKeyDown} tabIndex={0}>\n+ <FixedSizeList\n+ height={height}\n+ itemCount={interactions.length}\n+ itemData={itemData}\n+ itemSize={30}\n+ width={width}\n+ >\n+ {InteractionListItem}\n+ <\/FixedSizeList>\n+ <\/div>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/InteractionsChartBuilder.js b\/src\/devtools\/views\/Profiler\/InteractionsChartBuilder.js\nnew file mode 100644\nindex 0000000000..6171749ef0\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/InteractionsChartBuilder.js\n@@ -0,0 +1,55 @@\n+\/\/ @flow\n+\n+import ProfilerStore from 'src\/devtools\/ProfilerStore';\n+\n+import type { Interaction } from '.\/types';\n+\n+export type ChartData = {|\n+ interactions: Array<Interaction>,\n+ lastInteractionTime: number,\n+ maxCommitDuration: number,\n+|};\n+\n+const cachedChartData: Map<number, ChartData> = new Map();\n+\n+export function getChartData({\n+ profilerStore,\n+ rootID,\n+}: {|\n+ profilerStore: ProfilerStore,\n+ rootID: number,\n+|}): ChartData {\n+ if (cachedChartData.has(rootID)) {\n+ return ((cachedChartData.get(rootID): any): ChartData);\n+ }\n+\n+ const dataForRoot = profilerStore.getDataForRoot(rootID);\n+ if (dataForRoot == null) {\n+ throw Error(`Could not find profiling data for root \"${rootID}\"`);\n+ }\n+\n+ const { commitData, interactions } = dataForRoot;\n+\n+ const lastInteractionTime =\n+ commitData.length > 0 ? commitData[commitData.length - 1].timestamp : 0;\n+\n+ let maxCommitDuration = 0;\n+\n+ commitData.forEach(commitDatum => {\n+ maxCommitDuration = Math.max(maxCommitDuration, commitDatum.duration);\n+ });\n+\n+ const chartData = {\n+ interactions: Array.from(interactions.values()),\n+ lastInteractionTime,\n+ maxCommitDuration,\n+ };\n+\n+ cachedChartData.set(rootID, chartData);\n+\n+ return chartData;\n+}\n+\n+export function invalidateChartData(): void {\n+ cachedChartData.clear();\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/NoCommitData.css b\/src\/devtools\/views\/Profiler\/NoCommitData.css\nnew file mode 100644\nindex 0000000000..059e7c9938\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/NoCommitData.css\n@@ -0,0 +1,18 @@\n+.NoCommitData {\n+ width: 100%;\n+ height: 100%;\n+ display: flex;\n+ flex-direction: column;\n+ align-items: center;\n+ justify-content: center;\n+}\n+\n+.Header {\n+ font-size: var(--font-size-sans-large);\n+ margin-bottom: 0.5rem;\n+}\n+\n+.FilterMessage {\n+ display: flex;\n+ align-items: center;\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/NoCommitData.js b\/src\/devtools\/views\/Profiler\/NoCommitData.js\nnew file mode 100644\nindex 0000000000..32b2860fbc\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/NoCommitData.js\n@@ -0,0 +1,18 @@\n+\/\/ @flow\n+\n+import React from 'react';\n+\n+import styles from '.\/NoCommitData.css';\n+\n+export default function NoCommitData(_: {||}) {\n+ return (\n+ <div className={styles.NoCommitData}>\n+ <div className={styles.Header}>\n+ There is no data matching the current filter criteria.\n+ <\/div>\n+ <div className={styles.FilterMessage}>\n+ Try adjusting the commit filter in Profiler settings.\n+ <\/div>\n+ <\/div>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/NoInteractions.css b\/src\/devtools\/views\/Profiler\/NoInteractions.css\nnew file mode 100644\nindex 0000000000..6c6872058a\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/NoInteractions.css\n@@ -0,0 +1,16 @@\n+.NoInteractions {\n+ width: 100%;\n+ height: 100%;\n+ display: flex;\n+ flex-direction: column;\n+ align-items: center;\n+ justify-content: center;\n+}\n+\n+.Header {\n+ font-size: var(--font-size-sans-large);\n+}\n+\n+.Link {\n+ color: var(--color-button);\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/NoInteractions.js b\/src\/devtools\/views\/Profiler\/NoInteractions.js\nnew file mode 100644\nindex 0000000000..f317aa2b62\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/NoInteractions.js\n@@ -0,0 +1,29 @@\n+\/\/ @flow\n+\n+import React from 'react';\n+\n+import styles from '.\/NoInteractions.css';\n+\n+export default function NoInteractions({\n+ height,\n+ width,\n+}: {|\n+ height: number,\n+ width: number,\n+|}) {\n+ return (\n+ <div className={styles.NoInteractions} style={{ height, width }}>\n+ <p className={styles.Header}>No interactions were recorded.<\/p>\n+ <p>\n+ <a\n+ className={styles.Link}\n+ href=\"http:\/\/fb.me\/react-interaction-tracing\"\n+ rel=\"noopener noreferrer\"\n+ target=\"_blank\"\n+ >\n+ Learn more about the interaction tracing API here.\n+ <\/a>\n+ <\/p>\n+ <\/div>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/Profiler.css b\/src\/devtools\/views\/Profiler\/Profiler.css\nnew file mode 100644\nindex 0000000000..e9157aa35c\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/Profiler.css\n@@ -0,0 +1,112 @@\n+.Profiler {\n+ width: 100%;\n+ height: 100%;\n+ position: relative;\n+ display: flex;\n+ flex-direction: row;\n+ align-items: stretch;\n+ font-family: var(--font-family-sans);\n+ font-size: var(--font-size-sans-normal);\n+ background-color: var(--color-background);\n+ color: var(--color-text);\n+}\n+\n+.LeftColumn {\n+ display: flex;\n+ flex-direction: column;\n+ flex: 2 1 200px;\n+ border-top: 1px solid var(--color-border);\n+}\n+\n+.RightColumn {\n+ display: flex;\n+ flex-direction: column;\n+ flex: 1 1 100px;\n+ max-width: 300px;\n+ overflow-x: hidden;\n+ border-left: 1px solid var(--color-border);\n+ border-top: 1px solid var(--color-border);\n+}\n+\n+.Content {\n+ position: relative;\n+ flex: 1 1 auto;\n+ display: flex;\n+ flex-direction: column;\n+ align-items: center;\n+ justify-content: center;\n+}\n+\n+.Column {\n+ display: flex;\n+ flex-direction: column;\n+ align-items: center;\n+ justify-content: center;\n+ padding: 0 1rem;\n+}\n+\n+.Paragraph {\n+ text-align: center;\n+}\n+\n+.Row {\n+ display: flex;\n+ flex-direction: row;\n+ align-items: center;\n+ justify-content: center;\n+}\n+\n+.Header {\n+ font-size: var(--font-size-sans-large);\n+ margin-bottom: 0.5rem;\n+}\n+\n+.Toolbar {\n+ height: 2.25rem;\n+ padding: 0 0.25rem;\n+ flex: 0 0 auto;\n+ display: flex;\n+ align-items: center;\n+ border-bottom: 1px solid var(--color-border);\n+}\n+\n+.VRule {\n+ height: 20px;\n+ width: 1px;\n+ border-left: 1px solid var(--color-border);\n+ padding-left: 0.25rem;\n+ margin-left: 0.25rem;\n+}\n+\n+.Spacer {\n+ flex: 1;\n+}\n+\n+.StopRecordingButton {\n+ font-size: var(--font-size-sans-large);\n+ padding: 0.5rem;\n+}\n+\n+.ContentFallback {\n+ width: 100%;\n+ height: 100%;\n+ display: flex;\n+ align-items: center;\n+ justify-content: center;\n+ font-size: var(--font-size-sans-large);\n+ color: var(--color-dim);\n+}\n+\n+.SnapshotSelectorFallback {\n+ height: 100%;\n+ padding-left: 0.5rem;\n+ display: flex;\n+ align-items: center;\n+ justify-content: center;\n+ font-size: var(--font-size-sans-large);\n+ color: var(--color-dim);\n+}\n+\n+.Link {\n+ color: var(--color-button);\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/Profiler.js b\/src\/devtools\/views\/Profiler\/Profiler.js\nnew file mode 100644\nindex 0000000000..a4a5ce935f\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/Profiler.js\n@@ -0,0 +1,188 @@\n+\/\/ @flow\n+\n+import React, { Fragment, useContext } from 'react';\n+import { ModalDialog } from '..\/ModalDialog';\n+import { ProfilerContext } from '.\/ProfilerContext';\n+import TabBar from '..\/TabBar';\n+import ClearProfilingDataButton from '.\/ClearProfilingDataButton';\n+import CommitFlamegraph from '.\/CommitFlamegraph';\n+import CommitRanked from '.\/CommitRanked';\n+import Interactions from '.\/Interactions';\n+import RootSelector from '.\/RootSelector';\n+import RecordToggle from '.\/RecordToggle';\n+import ReloadAndProfileButton from '.\/ReloadAndProfileButton';\n+import ProfilingImportExportButtons from '.\/ProfilingImportExportButtons';\n+import SnapshotSelector from '.\/SnapshotSelector';\n+import SidebarCommitInfo from '.\/SidebarCommitInfo';\n+import SidebarInteractions from '.\/SidebarInteractions';\n+import SidebarSelectedFiberInfo from '.\/SidebarSelectedFiberInfo';\n+import SettingsModal from 'src\/devtools\/views\/Settings\/SettingsModal';\n+import SettingsModalContextToggle from 'src\/devtools\/views\/Settings\/SettingsModalContextToggle';\n+import { SettingsModalContextController } from 'src\/devtools\/views\/Settings\/SettingsModalContext';\n+import portaledContent from '..\/portaledContent';\n+\n+import styles from '.\/Profiler.css';\n+\n+function Profiler(_: {||}) {\n+ const {\n+ didRecordCommits,\n+ isProcessingData,\n+ isProfiling,\n+ selectedFiberID,\n+ selectedTabID,\n+ selectTab,\n+ supportsProfiling,\n+ } = useContext(ProfilerContext);\n+\n+ let view = null;\n+ if (didRecordCommits) {\n+ switch (selectedTabID) {\n+ case 'flame-chart':\n+ view = <CommitFlamegraph \/>;\n+ break;\n+ case 'ranked-chart':\n+ view = <CommitRanked \/>;\n+ break;\n+ case 'interactions':\n+ view = <Interactions \/>;\n+ break;\n+ default:\n+ break;\n+ }\n+ } else if (isProfiling) {\n+ view = <RecordingInProgress \/>;\n+ } else if (isProcessingData) {\n+ view = <ProcessingData \/>;\n+ } else if (supportsProfiling) {\n+ view = <NoProfilingData \/>;\n+ } else {\n+ view = <ProfilingNotSupported \/>;\n+ }\n+\n+ let sidebar = null;\n+ if (!isProfiling && !isProcessingData && didRecordCommits) {\n+ switch (selectedTabID) {\n+ case 'interactions':\n+ sidebar = <SidebarInteractions \/>;\n+ break;\n+ case 'flame-chart':\n+ case 'ranked-chart':\n+ if (selectedFiberID !== null) {\n+ sidebar = <SidebarSelectedFiberInfo \/>;\n+ } else {\n+ sidebar = <SidebarCommitInfo \/>;\n+ }\n+ break;\n+ default:\n+ break;\n+ }\n+ }\n+\n+ return (\n+ <SettingsModalContextController>\n+ <div className={styles.Profiler}>\n+ <div className={styles.LeftColumn}>\n+ <div className={styles.Toolbar}>\n+ <RecordToggle disabled={!supportsProfiling} \/>\n+ <ReloadAndProfileButton \/>\n+ <ClearProfilingDataButton \/>\n+ <ProfilingImportExportButtons \/>\n+ <div className={styles.VRule} \/>\n+ <TabBar\n+ currentTab={selectedTabID}\n+ id=\"Profiler\"\n+ selectTab={selectTab}\n+ tabs={tabs}\n+ type=\"profiler\"\n+ \/>\n+ <RootSelector \/>\n+ <div className={styles.Spacer} \/>\n+ <SettingsModalContextToggle \/>\n+ {didRecordCommits && (\n+ <Fragment>\n+ <div className={styles.VRule} \/>\n+ <SnapshotSelector \/>\n+ <\/Fragment>\n+ )}\n+ <\/div>\n+ <div className={styles.Content}>\n+ {view}\n+ <ModalDialog \/>\n+ <\/div>\n+ <\/div>\n+ <div className={styles.RightColumn}>{sidebar}<\/div>\n+ <SettingsModal \/>\n+ <\/div>\n+ <\/SettingsModalContextController>\n+ );\n+}\n+\n+const tabs = [\n+ {\n+ id: 'flame-chart',\n+ icon: 'flame-chart',\n+ label: 'Flamegraph',\n+ title: 'Flamegraph chart',\n+ },\n+ {\n+ id: 'ranked-chart',\n+ icon: 'ranked-chart',\n+ label: 'Ranked',\n+ title: 'Ranked chart',\n+ },\n+ {\n+ id: 'interactions',\n+ icon: 'interactions',\n+ label: 'Interactions',\n+ title: 'Profiled interactions',\n+ },\n+];\n+\n+const NoProfilingData = () => (\n+ <div className={styles.Column}>\n+ <div className={styles.Header}>No profiling data has been recorded.<\/div>\n+ <div className={styles.Row}>\n+ Click the record button <RecordToggle \/> to start recording.\n+ <\/div>\n+ <\/div>\n+);\n+\n+const ProfilingNotSupported = () => (\n+ <div className={styles.Column}>\n+ <div className={styles.Header}>Profiling not supported.<\/div>\n+ <p className={styles.Paragraph}>\n+ Profiling support requires either a development or production-profiling\n+ build of React v16.5+.\n+ <\/p>\n+ <p className={styles.Paragraph}>\n+ Learn more at{' '}\n+ <a\n+ className={styles.Link}\n+ href=\"https:\/\/fb.me\/react-profiling\"\n+ rel=\"noopener noreferrer\"\n+ target=\"_blank\"\n+ >\n+ fb.me\/react-profiling\n+ <\/a>\n+ .\n+ <\/p>\n+ <\/div>\n+);\n+\n+const ProcessingData = () => (\n+ <div className={styles.Column}>\n+ <div className={styles.Header}>Processing data...<\/div>\n+ <div className={styles.Row}>This should only take a minute.<\/div>\n+ <\/div>\n+);\n+\n+const RecordingInProgress = () => (\n+ <div className={styles.Column}>\n+ <div className={styles.Header}>Profiling is in progress...<\/div>\n+ <div className={styles.Row}>\n+ Click the record button <RecordToggle \/> to stop recording.\n+ <\/div>\n+ <\/div>\n+);\n+\n+export default portaledContent(Profiler);\ndiff --git a\/src\/devtools\/views\/Profiler\/ProfilerContext.js b\/src\/devtools\/views\/Profiler\/ProfilerContext.js\nnew file mode 100644\nindex 0000000000..f50947e1cf\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/ProfilerContext.js\n@@ -0,0 +1,288 @@\n+\/\/ @flow\n+\n+import React, {\n+ createContext,\n+ useCallback,\n+ useContext,\n+ useMemo,\n+ useState,\n+} from 'react';\n+import { unstable_batchedUpdates as batchedUpdates } from 'react-dom';\n+import { useLocalStorage, useSubscription } from '..\/hooks';\n+import {\n+ TreeDispatcherContext,\n+ TreeStateContext,\n+} from '..\/Components\/TreeContext';\n+import { StoreContext } from '..\/context';\n+import Store from '..\/..\/store';\n+\n+import type { ProfilingDataFrontend } from '.\/types';\n+\n+export type TabID = 'flame-chart' | 'ranked-chart' | 'interactions';\n+\n+export type Context = {|\n+ \/\/ Which tab is selexted in the Profiler UI?\n+ selectedTabID: TabID,\n+ selectTab(id: TabID): void,\n+\n+ \/\/ Store subscription based values.\n+ \/\/ The isProfiling value may be modified by the record button in the Profiler toolbar,\n+ \/\/ or from the backend itself (after a reload-and-profile action).\n+ \/\/ It is synced between the backend and frontend via a Store subscription.\n+ didRecordCommits: boolean,\n+ isProcessingData: boolean,\n+ isProfiling: boolean,\n+ profilingData: ProfilingDataFrontend | null,\n+ startProfiling(): void,\n+ stopProfiling(): void,\n+ supportsProfiling: boolean,\n+\n+ \/\/ Which root should profiling data be shown for?\n+ \/\/ This value should be initialized to either:\n+ \/\/ 1. The selected root in the Components tree (if it has any profiling data) or\n+ \/\/ 2. The first root in the list with profiling data.\n+ rootID: number | null,\n+ setRootID: (id: number) => void,\n+\n+ \/\/ Controls whether commits are filtered by duration.\n+ \/\/ This value is controlled by a filter toggle UI in the Profiler toolbar.\n+ \/\/ It impacts the commit selector UI as well as the fiber commits bar chart.\n+ isCommitFilterEnabled: boolean,\n+ setIsCommitFilterEnabled: (value: boolean) => void,\n+ minCommitDuration: number,\n+ setMinCommitDuration: (value: number) => void,\n+\n+ \/\/ Which commit is currently selected in the commit selector UI.\n+ \/\/ Note that this is the index of the commit in all commits (non-filtered) that were profiled.\n+ \/\/ This value is controlled by the commit selector UI in the Profiler toolbar.\n+ \/\/ It impacts the flame graph and ranked charts.\n+ selectedCommitIndex: number | null,\n+ selectCommitIndex: (value: number | null) => void,\n+\n+ \/\/ Which fiber is currently selected in the Ranked or Flamegraph charts?\n+ selectedFiberID: number | null,\n+ selectedFiberName: string | null,\n+ selectFiber: (id: number | null, name: string | null) => void,\n+\n+ \/\/ Which interaction is currently selected in the Interactions graph?\n+ selectedInteractionID: number | null,\n+ selectInteraction: (id: number | null) => void,\n+|};\n+\n+const ProfilerContext = createContext<Context>(((null: any): Context));\n+ProfilerContext.displayName = 'ProfilerContext';\n+\n+type StoreProfilingState = {|\n+ didRecordCommits: boolean,\n+ isProcessingData: boolean,\n+ isProfiling: boolean,\n+ profilingData: ProfilingDataFrontend | null,\n+ supportsProfiling: boolean,\n+|};\n+\n+type Props = {|\n+ children: React$Node,\n+|};\n+\n+function ProfilerContextController({ children }: Props) {\n+ const store = useContext(StoreContext);\n+ const { selectedElementID } = useContext(TreeStateContext);\n+ const dispatch = useContext(TreeDispatcherContext);\n+\n+ const { profilerStore } = store;\n+\n+ const subscription = useMemo(\n+ () => ({\n+ getCurrentValue: () => ({\n+ didRecordCommits: profilerStore.didRecordCommits,\n+ isProcessingData: profilerStore.isProcessingData,\n+ isProfiling: profilerStore.isProfiling,\n+ profilingData: profilerStore.profilingData,\n+ supportsProfiling: store.supportsProfiling,\n+ }),\n+ subscribe: (callback: Function) => {\n+ profilerStore.addListener('profilingData', callback);\n+ profilerStore.addListener('isProcessingData', callback);\n+ profilerStore.addListener('isProfiling', callback);\n+ store.addListener('supportsProfiling', callback);\n+ return () => {\n+ profilerStore.removeListener('profilingData', callback);\n+ profilerStore.removeListener('isProcessingData', callback);\n+ profilerStore.removeListener('isProfiling', callback);\n+ store.removeListener('supportsProfiling', callback);\n+ };\n+ },\n+ }),\n+ [profilerStore, store]\n+ );\n+ const {\n+ didRecordCommits,\n+ isProcessingData,\n+ isProfiling,\n+ profilingData,\n+ supportsProfiling,\n+ } = useSubscription<StoreProfilingState, Store>(subscription);\n+\n+ const [prevProfilingData, setPrevProfilingData] = useState();\n+ const [rootID, setRootID] = useState<number | null>(null);\n+\n+ if (prevProfilingData !== profilingData) {\n+ setPrevProfilingData(profilingData);\n+\n+ const dataForRoots =\n+ profilingData !== null ? profilingData.dataForRoots : null;\n+ if (dataForRoots != null) {\n+ const firstRootID = dataForRoots.keys().next().value || null;\n+\n+ if (rootID === null || !dataForRoots.has(rootID)) {\n+ let selectedElementRootID = null;\n+ if (selectedElementID !== null) {\n+ selectedElementRootID = store.getRootIDForElement(selectedElementID);\n+ }\n+ if (\n+ selectedElementRootID !== null &&\n+ dataForRoots.has(selectedElementRootID)\n+ ) {\n+ setRootID(selectedElementRootID);\n+ } else {\n+ setRootID(firstRootID);\n+ }\n+ }\n+ }\n+ }\n+\n+ const startProfiling = useCallback(\n+ () => store.profilerStore.startProfiling(),\n+ [store]\n+ );\n+ const stopProfiling = useCallback(() => store.profilerStore.stopProfiling(), [\n+ store,\n+ ]);\n+\n+ const [\n+ isCommitFilterEnabled,\n+ setIsCommitFilterEnabled,\n+ ] = useLocalStorage<boolean>('React::DevTools::isCommitFilterEnabled', false);\n+ const [minCommitDuration, setMinCommitDuration] = useLocalStorage<number>(\n+ 'minCommitDuration',\n+ 0\n+ );\n+\n+ const [selectedCommitIndex, selectCommitIndex] = useState<number | null>(\n+ null\n+ );\n+ const [selectedTabID, selectTab] = useState<TabID>('flame-chart');\n+ const [selectedFiberID, selectFiberID] = useState<number | null>(null);\n+ const [selectedFiberName, selectFiberName] = useState<string | null>(null);\n+ const [selectedInteractionID, selectInteraction] = useState<number | null>(\n+ null\n+ );\n+\n+ const selectFiber = useCallback(\n+ (id: number | null, name: string | null) => {\n+ selectFiberID(id);\n+ selectFiberName(name);\n+\n+ \/\/ Sync selection to the Components tab for convenience.\n+ if (id !== null) {\n+ const element = store.getElementByID(id);\n+\n+ \/\/ Keep in mind that profiling data may be from a previous session.\n+ \/\/ In that case, IDs may match up arbitrarily; to be safe, compare both ID and display name.\n+ if (element !== null && element.displayName === name) {\n+ dispatch({\n+ type: 'SELECT_ELEMENT_BY_ID',\n+ payload: id,\n+ });\n+ }\n+ }\n+ },\n+ [dispatch, selectFiberID, selectFiberName, store]\n+ );\n+\n+ if (isProfiling) {\n+ batchedUpdates(() => {\n+ if (selectedCommitIndex !== null) {\n+ selectCommitIndex(null);\n+ }\n+ if (selectedFiberID !== null) {\n+ selectFiberID(null);\n+ selectFiberName(null);\n+ }\n+ if (selectedInteractionID !== null) {\n+ selectInteraction(null);\n+ }\n+ });\n+ }\n+\n+ const value = useMemo(\n+ () => ({\n+ selectedTabID,\n+ selectTab,\n+\n+ didRecordCommits,\n+ isProcessingData,\n+ isProfiling,\n+ profilingData,\n+ startProfiling,\n+ stopProfiling,\n+ supportsProfiling,\n+\n+ rootID,\n+ setRootID,\n+\n+ isCommitFilterEnabled,\n+ setIsCommitFilterEnabled,\n+ minCommitDuration,\n+ setMinCommitDuration,\n+\n+ selectedCommitIndex,\n+ selectCommitIndex,\n+\n+ selectedFiberID,\n+ selectedFiberName,\n+ selectFiber,\n+\n+ selectedInteractionID,\n+ selectInteraction,\n+ }),\n+ [\n+ selectedTabID,\n+ selectTab,\n+\n+ didRecordCommits,\n+ isProcessingData,\n+ isProfiling,\n+ profilingData,\n+ startProfiling,\n+ stopProfiling,\n+ supportsProfiling,\n+\n+ rootID,\n+ setRootID,\n+\n+ isCommitFilterEnabled,\n+ setIsCommitFilterEnabled,\n+ minCommitDuration,\n+ setMinCommitDuration,\n+\n+ selectedCommitIndex,\n+ selectCommitIndex,\n+\n+ selectedFiberID,\n+ selectedFiberName,\n+ selectFiber,\n+\n+ selectedInteractionID,\n+ selectInteraction,\n+ ]\n+ );\n+\n+ return (\n+ <ProfilerContext.Provider value={value}>\n+ {children}\n+ <\/ProfilerContext.Provider>\n+ );\n+}\n+\n+export { ProfilerContext, ProfilerContextController };\ndiff --git a\/src\/devtools\/views\/Profiler\/ProfilingImportExportButtons.css b\/src\/devtools\/views\/Profiler\/ProfilingImportExportButtons.css\nnew file mode 100644\nindex 0000000000..8d24f56505\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/ProfilingImportExportButtons.css\n@@ -0,0 +1,25 @@\n+.VRule {\n+ height: 20px;\n+ width: 1px;\n+ border-left: 1px solid var(--color-border);\n+ padding-left: 0.25rem;\n+ margin-left: 0.25rem;\n+}\n+\n+\/**\n+ * https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/File\/Using_files_from_web_applications\n+ *\/\n+.Input {\n+ position: absolute !important;\n+ height: 1px;\n+ width: 1px;\n+ overflow: hidden;\n+ clip: rect(1px, 1px, 1px, 1px);\n+}\n+\n+.ErrorMessage {\n+ margin: 0.5rem 0;\n+ color: var(--color-dim);\n+ font-family: var(--font-family-monospace);\n+ font-size: var(--font-size-monospace-normal);\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/ProfilingImportExportButtons.js b\/src\/devtools\/views\/Profiler\/ProfilingImportExportButtons.js\nnew file mode 100644\nindex 0000000000..50a31fe897\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/ProfilingImportExportButtons.js\n@@ -0,0 +1,120 @@\n+\/\/ @flow\n+\n+import React, { Fragment, useContext, useCallback, useRef } from 'react';\n+import { ProfilerContext } from '.\/ProfilerContext';\n+import { ModalDialogContext } from '..\/ModalDialog';\n+import Button from '..\/Button';\n+import ButtonIcon from '..\/ButtonIcon';\n+import { StoreContext } from '..\/context';\n+import {\n+ prepareProfilingDataExport,\n+ prepareProfilingDataFrontendFromExport,\n+} from '.\/utils';\n+import { downloadFile } from '..\/utils';\n+\n+import styles from '.\/ProfilingImportExportButtons.css';\n+\n+import type { ProfilingDataExport } from '.\/types';\n+\n+export default function ProfilingImportExportButtons() {\n+ const { isProfiling, profilingData, rootID } = useContext(ProfilerContext);\n+ const store = useContext(StoreContext);\n+ const { profilerStore } = store;\n+\n+ const inputRef = useRef<HTMLInputElement | null>(null);\n+\n+ const { dispatch: modalDialogDispatch } = useContext(ModalDialogContext);\n+\n+ const downloadData = useCallback(() => {\n+ if (rootID === null) {\n+ return;\n+ }\n+\n+ if (profilingData !== null) {\n+ const profilingDataExport = prepareProfilingDataExport(profilingData);\n+ const date = new Date();\n+ const dateString = date\n+ .toLocaleDateString(undefined, {\n+ year: 'numeric',\n+ month: '2-digit',\n+ day: '2-digit',\n+ })\n+ .replace(\/\\\/\/g, '-');\n+ const timeString = date\n+ .toLocaleTimeString(undefined, {\n+ hour12: false,\n+ })\n+ .replace(\/:\/g, '-');\n+ downloadFile(\n+ `profiling-data.${dateString}.${timeString}.json`,\n+ JSON.stringify(profilingDataExport, null, 2)\n+ );\n+ }\n+ }, [rootID, profilingData]);\n+\n+ const uploadData = useCallback(() => {\n+ if (inputRef.current !== null) {\n+ inputRef.current.click();\n+ }\n+ }, []);\n+\n+ const handleFiles = useCallback(() => {\n+ const input = inputRef.current;\n+ if (input !== null && input.files.length > 0) {\n+ const fileReader = new FileReader();\n+ fileReader.addEventListener('load', () => {\n+ try {\n+ const raw = ((fileReader.result: any): string);\n+ const profilingDataExport = ((JSON.parse(\n+ raw\n+ ): any): ProfilingDataExport);\n+ profilerStore.profilingData = prepareProfilingDataFrontendFromExport(\n+ profilingDataExport\n+ );\n+ } catch (error) {\n+ modalDialogDispatch({\n+ type: 'SHOW',\n+ title: 'Import failed',\n+ content: (\n+ <Fragment>\n+ <div>The profiling data you selected cannot be imported.<\/div>\n+ {error !== null && (\n+ <div className={styles.ErrorMessage}>{error.message}<\/div>\n+ )}\n+ <\/Fragment>\n+ ),\n+ });\n+ }\n+ });\n+ \/\/ TODO (profiling) Handle fileReader errors.\n+ fileReader.readAsText(input.files[0]);\n+ }\n+ }, [modalDialogDispatch, profilerStore]);\n+\n+ return (\n+ <Fragment>\n+ <div className={styles.VRule} \/>\n+ <input\n+ ref={inputRef}\n+ className={styles.Input}\n+ type=\"file\"\n+ onChange={handleFiles}\n+ tabIndex={-1}\n+ \/>\n+ <Button\n+ disabled={isProfiling}\n+ onClick={uploadData}\n+ title=\"Load profile...\"\n+ >\n+ <ButtonIcon type=\"import\" \/>\n+ <\/Button>\n+ <Button\n+ disabled={isProfiling || !profilerStore.didRecordCommits}\n+ onClick={downloadData}\n+ title=\"Save profile...\"\n+ >\n+ <ButtonIcon type=\"export\" \/>\n+ <\/Button>\n+ <\/Fragment>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/RankedChartBuilder.js b\/src\/devtools\/views\/Profiler\/RankedChartBuilder.js\nnew file mode 100644\nindex 0000000000..67b38fccbf\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/RankedChartBuilder.js\n@@ -0,0 +1,96 @@\n+\/\/ @flow\n+\n+import { ElementTypeForwardRef, ElementTypeMemo } from 'src\/types';\n+import { formatDuration } from '.\/utils';\n+import ProfilerStore from 'src\/devtools\/ProfilerStore';\n+\n+import type { CommitTree } from '.\/types';\n+\n+export type ChartNode = {|\n+ id: number,\n+ label: string,\n+ name: string,\n+ value: number,\n+|};\n+\n+export type ChartData = {|\n+ maxValue: number,\n+ nodes: Array<ChartNode>,\n+|};\n+\n+const cachedChartData: Map<string, ChartData> = new Map();\n+\n+export function getChartData({\n+ commitIndex,\n+ commitTree,\n+ profilerStore,\n+ rootID,\n+}: {|\n+ commitIndex: number,\n+ commitTree: CommitTree,\n+ profilerStore: ProfilerStore,\n+ rootID: number,\n+|}): ChartData {\n+ const commitDatum = profilerStore.getCommitData(rootID, commitIndex);\n+\n+ const { fiberActualDurations, fiberSelfDurations } = commitDatum;\n+ const { nodes } = commitTree;\n+\n+ const key = `${rootID}-${commitIndex}`;\n+ if (cachedChartData.has(key)) {\n+ return ((cachedChartData.get(key): any): ChartData);\n+ }\n+\n+ let maxSelfDuration = 0;\n+\n+ const chartNodes: Array<ChartNode> = [];\n+ fiberActualDurations.forEach((actualDuration, id) => {\n+ const node = nodes.get(id);\n+\n+ if (node == null) {\n+ throw Error(`Could not find node with id \"${id}\" in commit tree`);\n+ }\n+\n+ const { displayName, key, parentID, type } = node;\n+\n+ \/\/ Don't show the root node in this chart.\n+ if (parentID === 0) {\n+ return;\n+ }\n+ const selfDuration = fiberSelfDurations.get(id) || 0;\n+ maxSelfDuration = Math.max(maxSelfDuration, selfDuration);\n+\n+ const name = displayName || 'Anonymous';\n+ const maybeKey = key !== null ? ` key=\"${key}\"` : '';\n+\n+ let maybeBadge = '';\n+ if (type === ElementTypeForwardRef) {\n+ maybeBadge = ' (ForwardRef)';\n+ } else if (type === ElementTypeMemo) {\n+ maybeBadge = ' (Memo)';\n+ }\n+\n+ const label = `${name}${maybeBadge}${maybeKey} (${formatDuration(\n+ selfDuration\n+ )}ms)`;\n+ chartNodes.push({\n+ id,\n+ label,\n+ name,\n+ value: selfDuration,\n+ });\n+ });\n+\n+ const chartData = {\n+ maxValue: maxSelfDuration,\n+ nodes: chartNodes.sort((a, b) => b.value - a.value),\n+ };\n+\n+ cachedChartData.set(key, chartData);\n+\n+ return chartData;\n+}\n+\n+export function invalidateChartData(): void {\n+ cachedChartData.clear();\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/RecordToggle.css b\/src\/devtools\/views\/Profiler\/RecordToggle.css\nnew file mode 100644\nindex 0000000000..467bca27e3\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/RecordToggle.css\n@@ -0,0 +1,38 @@\n+.ActiveRecordToggle {\n+ color: var(--color-record-active);\n+}\n+.ActiveRecordToggle:hover {\n+ color: var(--color-record-active);\n+}\n+.ActiveRecordToggle:focus {\n+ color: var(--color-record-active);\n+}\n+.ActiveRecordToggle:active {\n+ color: var(--color-record-hover);\n+}\n+\n+.InactiveRecordToggle {\n+ color: var(--color-record-inactive);\n+}\n+.InactiveRecordToggle:hover {\n+ color: var(--color-record-hover);\n+}\n+.InactiveRecordToggle:focus {\n+ color: var(--color-record-inactive);\n+}\n+.InactiveRecordToggle:active {\n+ color: var(--color-record-hover);\n+}\n+\n+.DisabledRecordToggle {\n+ color: var(--color-button-disabled);\n+}\n+.DisabledRecordToggle:hover {\n+ color: var(--color-button-disabled);\n+}\n+.DisabledRecordToggle:focus {\n+ color: var(--color-button-disabled);\n+}\n+.DisabledRecordToggle:active {\n+ color: var(--color-button-disabled);\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/RecordToggle.js b\/src\/devtools\/views\/Profiler\/RecordToggle.js\nnew file mode 100644\nindex 0000000000..a3d494c716\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/RecordToggle.js\n@@ -0,0 +1,36 @@\n+\/\/ @flow\n+\n+import React, { useContext } from 'react';\n+import Button from '..\/Button';\n+import ButtonIcon from '..\/ButtonIcon';\n+import { ProfilerContext } from '.\/ProfilerContext';\n+\n+import styles from '.\/RecordToggle.css';\n+\n+export type Props = {|\n+ disabled?: boolean,\n+|};\n+\n+export default function RecordToggle({ disabled }: Props) {\n+ const { isProfiling, startProfiling, stopProfiling } = useContext(\n+ ProfilerContext\n+ );\n+\n+ let className = styles.InactiveRecordToggle;\n+ if (disabled) {\n+ className = styles.DisabledRecordToggle;\n+ } else if (isProfiling) {\n+ className = styles.ActiveRecordToggle;\n+ }\n+\n+ return (\n+ <Button\n+ className={className}\n+ disabled={disabled}\n+ onClick={isProfiling ? stopProfiling : startProfiling}\n+ title={isProfiling ? 'Stop profiling' : 'Start profiling'}\n+ >\n+ <ButtonIcon type=\"record\" \/>\n+ <\/Button>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/ReloadAndProfileButton.js b\/src\/devtools\/views\/Profiler\/ReloadAndProfileButton.js\nnew file mode 100644\nindex 0000000000..0c92ae6efe\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/ReloadAndProfileButton.js\n@@ -0,0 +1,64 @@\n+\/\/ @flow\n+\n+import React, { useCallback, useContext, useMemo } from 'react';\n+import Button from '..\/Button';\n+import ButtonIcon from '..\/ButtonIcon';\n+import { BridgeContext, StoreContext } from '..\/context';\n+import { useSubscription } from '..\/hooks';\n+import Store from 'src\/devtools\/store';\n+\n+type SubscriptionData = {|\n+ recordChangeDescriptions: boolean,\n+ supportsReloadAndProfile: boolean,\n+|};\n+\n+export default function ReloadAndProfileButton() {\n+ const bridge = useContext(BridgeContext);\n+ const store = useContext(StoreContext);\n+\n+ const subscription = useMemo(\n+ () => ({\n+ getCurrentValue: () => ({\n+ recordChangeDescriptions: store.recordChangeDescriptions,\n+ supportsReloadAndProfile: store.supportsReloadAndProfile,\n+ }),\n+ subscribe: (callback: Function) => {\n+ store.addListener('recordChangeDescriptions', callback);\n+ store.addListener('supportsReloadAndProfile', callback);\n+ return () => {\n+ store.removeListener('recordChangeDescriptions', callback);\n+ store.removeListener('supportsReloadAndProfile', callback);\n+ };\n+ },\n+ }),\n+ [store]\n+ );\n+ const {\n+ recordChangeDescriptions,\n+ supportsReloadAndProfile,\n+ } = useSubscription<SubscriptionData, Store>(subscription);\n+\n+ const reloadAndProfile = useCallback(() => {\n+ \/\/ TODO If we want to support reload-and-profile for e.g. React Native,\n+ \/\/ we might need to also start profiling here before reloading the app (since DevTools itself isn't reloaded).\n+ \/\/ We'd probably want to do this before reloading though, to avoid sending a message on a disconnected port in the browser.\n+ \/\/ For now, let's just skip doing it entirely to avoid paying snapshot costs for data we don't need.\n+ \/\/ startProfiling();\n+\n+ bridge.send('reloadAndProfile', recordChangeDescriptions);\n+ }, [bridge, recordChangeDescriptions]);\n+\n+ if (!supportsReloadAndProfile) {\n+ return null;\n+ }\n+\n+ return (\n+ <Button\n+ disabled={!store.supportsProfiling}\n+ onClick={reloadAndProfile}\n+ title=\"Reload and start profiling\"\n+ >\n+ <ButtonIcon type=\"reload\" \/>\n+ <\/Button>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/RootSelector.css b\/src\/devtools\/views\/Profiler\/RootSelector.css\nnew file mode 100644\nindex 0000000000..ff1a970d46\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/RootSelector.css\n@@ -0,0 +1,3 @@\n+.Spacer {\n+ flex: 1;\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/RootSelector.js b\/src\/devtools\/views\/Profiler\/RootSelector.js\nnew file mode 100644\nindex 0000000000..b4e89af824\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/RootSelector.js\n@@ -0,0 +1,42 @@\n+\/\/ @flow\n+\n+import React, { Fragment, useCallback, useContext } from 'react';\n+import { ProfilerContext } from '.\/ProfilerContext';\n+\n+import styles from '.\/RootSelector.css';\n+\n+export default function RootSelector(_: {||}) {\n+ const { profilingData, rootID, setRootID } = useContext(ProfilerContext);\n+\n+ const options = [];\n+ if (profilingData !== null) {\n+ profilingData.dataForRoots.forEach((dataForRoot, rootID) => {\n+ options.push(\n+ <option key={rootID} value={rootID}>\n+ {dataForRoot.displayName}\n+ <\/option>\n+ );\n+ });\n+ }\n+\n+ const handleChange = useCallback(\n+ ({ currentTarget }) => {\n+ setRootID(parseInt(currentTarget.value, 10));\n+ },\n+ [setRootID]\n+ );\n+\n+ if (profilingData === null || profilingData.dataForRoots.size <= 1) {\n+ \/\/ Don't take up visual space if there's only one root.\n+ return null;\n+ }\n+\n+ return (\n+ <Fragment>\n+ <div className={styles.Spacer} \/>\n+ <select value={rootID} onChange={handleChange}>\n+ {options}\n+ <\/select>\n+ <\/Fragment>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/SidebarCommitInfo.css b\/src\/devtools\/views\/Profiler\/SidebarCommitInfo.css\nnew file mode 100644\nindex 0000000000..c0564e0d8c\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/SidebarCommitInfo.css\n@@ -0,0 +1,65 @@\n+.Toolbar {\n+ height: 2.25rem;\n+ padding: 0 0.5rem;\n+ flex: 0 0 auto;\n+ display: flex;\n+ align-items: center;\n+ border-bottom: 1px solid var(--color-border);\n+}\n+\n+.Content {\n+ padding: 0.5rem;\n+ user-select: none;\n+ overflow: auto;\n+}\n+\n+.List {\n+ list-style: none;\n+ margin: 0;\n+ padding: 0;\n+}\n+\n+.ListItem {\n+ margin: 0 0 0.5rem;\n+}\n+\n+.NoInteractions {\n+ color: var(--color-dim);\n+}\n+\n+.Interactions {\n+ margin: 0 0 0.5rem;\n+}\n+.Interaction {\n+ display: block;\n+ width: 100%;\n+ text-align: left;\n+ background: none;\n+ border: none;\n+ padding: 0.25rem 0.5rem;\n+ color: var(--color-text);\n+}\n+.Interaction:focus,\n+.Interaction:hover {\n+ outline: none;\n+ background-color: var(--color-background-hover);\n+}\n+\n+.Label {\n+ overflow: hidden;\n+ text-overflow: ellipsis;\n+ font-weight: bold;\n+}\n+\n+.Value {\n+ font-family: var(--font-family-monospace);\n+ font-size: var(--font-size-monospace-normal);\n+}\n+\n+.NothingSelected {\n+ display: flex;\n+ align-items: center;\n+ justify-content: center;\n+ height: 100%;\n+ color: var(--color-dim);\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/SidebarCommitInfo.js b\/src\/devtools\/views\/Profiler\/SidebarCommitInfo.js\nnew file mode 100644\nindex 0000000000..527d0ebffa\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/SidebarCommitInfo.js\n@@ -0,0 +1,85 @@\n+\/\/ @flow\n+\n+import React, { Fragment, useContext } from 'react';\n+import { ProfilerContext } from '.\/ProfilerContext';\n+import { formatDuration, formatTime } from '.\/utils';\n+import { StoreContext } from '..\/context';\n+\n+import styles from '.\/SidebarCommitInfo.css';\n+\n+export type Props = {||};\n+\n+export default function SidebarCommitInfo(_: Props) {\n+ const {\n+ selectedCommitIndex,\n+ rootID,\n+ selectInteraction,\n+ selectTab,\n+ } = useContext(ProfilerContext);\n+\n+ const { profilerStore } = useContext(StoreContext);\n+\n+ if (rootID === null || selectedCommitIndex === null) {\n+ return <div className={styles.NothingSelected}>Nothing selected<\/div>;\n+ }\n+\n+ const { interactions } = profilerStore.getDataForRoot(rootID);\n+ const {\n+ duration,\n+ interactionIDs,\n+ priorityLevel,\n+ timestamp,\n+ } = profilerStore.getCommitData(rootID, selectedCommitIndex);\n+\n+ const viewInteraction = interactionID => {\n+ selectTab('interactions');\n+ selectInteraction(interactionID);\n+ };\n+\n+ return (\n+ <Fragment>\n+ <div className={styles.Toolbar}>Commit information<\/div>\n+ <div className={styles.Content}>\n+ <ul className={styles.List}>\n+ {priorityLevel !== null && (\n+ <li className={styles.ListItem}>\n+ <label className={styles.Label}>Priority<\/label>:{' '}\n+ <span className={styles.Value}>{priorityLevel}<\/span>\n+ <\/li>\n+ )}\n+ <li className={styles.ListItem}>\n+ <label className={styles.Label}>Committed at<\/label>:{' '}\n+ <span className={styles.Value}>{formatTime(timestamp)}s<\/span>\n+ <\/li>\n+ <li className={styles.ListItem}>\n+ <label className={styles.Label}>Render duration<\/label>:{' '}\n+ <span className={styles.Value}>{formatDuration(duration)}ms<\/span>\n+ <\/li>\n+ <li className={styles.Interactions}>\n+ <label className={styles.Label}>Interactions<\/label>:\n+ <div className={styles.InteractionList}>\n+ {interactionIDs.length === 0 ? (\n+ <div className={styles.NoInteractions}>None<\/div>\n+ ) : null}\n+ {interactionIDs.map(interactionID => {\n+ const interaction = interactions.get(interactionID);\n+ if (interaction == null) {\n+ throw Error(`Invalid interaction \"${interactionID}\"`);\n+ }\n+ return (\n+ <button\n+ key={interactionID}\n+ className={styles.Interaction}\n+ onClick={() => viewInteraction(interactionID)}\n+ >\n+ {interaction.name}\n+ <\/button>\n+ );\n+ })}\n+ <\/div>\n+ <\/li>\n+ <\/ul>\n+ <\/div>\n+ <\/Fragment>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/SidebarInteractions.css b\/src\/devtools\/views\/Profiler\/SidebarInteractions.css\nnew file mode 100644\nindex 0000000000..c5643dfcd7\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/SidebarInteractions.css\n@@ -0,0 +1,55 @@\n+.Toolbar {\n+ height: 2.25rem;\n+ padding: 0 0.5rem;\n+ flex: 0 0 auto;\n+ display: flex;\n+ align-items: center;\n+}\n+\n+.Content {\n+ padding: 0.5rem;\n+ user-select: none;\n+ border-top: 1px solid var(--color-border);\n+ overflow: auto;\n+}\n+\n+.Name {\n+ font-size: var(--font-size-sans-large);\n+ white-space: nowrap;\n+ overflow-x: hidden;\n+ text-overflow: ellipsis;\n+}\n+\n+.NothingSelected {\n+ display: flex;\n+ align-items: center;\n+ justify-content: center;\n+ height: 100%;\n+ color: var(--color-dim);\n+}\n+\n+.Commits {\n+ font-weight: bold;\n+}\n+\n+.List {\n+ list-style: none;\n+ margin: 0;\n+ padding: 0;\n+}\n+\n+.ListItem {\n+ display: flex;\n+ flex-direction: row;\n+ align-items: center;\n+ padding: 0.25rem 0.5rem;\n+}\n+.ListItem:hover {\n+ background-color: var(--color-background-hover);\n+}\n+\n+.CommitBox {\n+ width: 20px;\n+ height: 20px;\n+ margin-right: 0.5rem;\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/SidebarInteractions.js b\/src\/devtools\/views\/Profiler\/SidebarInteractions.js\nnew file mode 100644\nindex 0000000000..c23a2106fc\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/SidebarInteractions.js\n@@ -0,0 +1,91 @@\n+\/\/ @flow\n+\n+import React, { Fragment, useContext } from 'react';\n+import { ProfilerContext } from '.\/ProfilerContext';\n+import { formatDuration, formatTime } from '.\/utils';\n+import { StoreContext } from '..\/context';\n+import { getGradientColor } from '.\/utils';\n+\n+import styles from '.\/SidebarInteractions.css';\n+\n+export type Props = {||};\n+\n+export default function SidebarInteractions(_: Props) {\n+ const {\n+ selectedInteractionID,\n+ rootID,\n+ selectCommitIndex,\n+ selectTab,\n+ } = useContext(ProfilerContext);\n+\n+ const { profilerStore } = useContext(StoreContext);\n+ const { profilingCache } = profilerStore;\n+\n+ if (selectedInteractionID === null) {\n+ return <div className={styles.NothingSelected}>Nothing selected<\/div>;\n+ }\n+\n+ const { interactionCommits, interactions } = profilerStore.getDataForRoot(\n+ ((rootID: any): number)\n+ );\n+ const interaction = interactions.get(selectedInteractionID);\n+ if (interaction == null) {\n+ throw Error(\n+ `Could not find interaction by selected interaction id \"${selectedInteractionID}\"`\n+ );\n+ }\n+\n+ const { maxCommitDuration } = profilingCache.getInteractionsChartData({\n+ rootID: ((rootID: any): number),\n+ });\n+\n+ const viewCommit = (commitIndex: number) => {\n+ selectTab('flame-chart');\n+ selectCommitIndex(commitIndex);\n+ };\n+\n+ const listItems: Array<React$Node> = [];\n+ const commitIndices = interactionCommits.get(selectedInteractionID);\n+ if (commitIndices != null) {\n+ commitIndices.forEach(commitIndex => {\n+ const { duration, timestamp } = profilerStore.getCommitData(\n+ ((rootID: any): number),\n+ commitIndex\n+ );\n+\n+ listItems.push(\n+ <li\n+ key={commitIndex}\n+ className={styles.ListItem}\n+ onClick={() => viewCommit(commitIndex)}\n+ >\n+ <div\n+ className={styles.CommitBox}\n+ style={{\n+ backgroundColor: getGradientColor(\n+ Math.min(1, Math.max(0, duration \/ maxCommitDuration)) || 0\n+ ),\n+ }}\n+ \/>\n+ <div>\n+ timestamp: {formatTime(timestamp)}s\n+ <br \/>\n+ duration: {formatDuration(duration)}ms\n+ <\/div>\n+ <\/li>\n+ );\n+ });\n+ }\n+\n+ return (\n+ <Fragment>\n+ <div className={styles.Toolbar}>\n+ <div className={styles.Name}>{interaction.name}<\/div>\n+ <\/div>\n+ <div className={styles.Content}>\n+ <div className={styles.Commits}>Commits:<\/div>\n+ <ul className={styles.List}>{listItems}<\/ul>\n+ <\/div>\n+ <\/Fragment>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/SidebarSelectedFiberInfo.css b\/src\/devtools\/views\/Profiler\/SidebarSelectedFiberInfo.css\nnew file mode 100644\nindex 0000000000..2ea9526d96\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/SidebarSelectedFiberInfo.css\n@@ -0,0 +1,76 @@\n+.Toolbar {\n+ height: 2.25rem;\n+ padding: 0 0.5rem;\n+ flex: 0 0 auto;\n+ display: flex;\n+ align-items: center;\n+ border-bottom: 1px solid var(--color-border);\n+}\n+\n+.Content {\n+ padding: 0.5rem;\n+ user-select: none;\n+ overflow-y: auto;\n+}\n+\n+.WhatChanged {\n+ margin-bottom: 1rem;\n+}\n+\n+.Component {\n+ flex: 1;\n+ color: var(--color-component-name);\n+ font-family: var(--font-family-monospace);\n+ font-size: var(--font-size-monospace-normal);\n+ white-space: nowrap;\n+ overflow-x: hidden;\n+ text-overflow: ellipsis;\n+}\n+\n+.Label {\n+ font-weight: bold;\n+ margin-bottom: 0.5rem;\n+}\n+\n+.CurrentCommit,\n+.Commit {\n+ display: block;\n+ width: 100%;\n+ text-align: left;\n+ background: none;\n+ border: none;\n+ padding: 0.25rem 0.5rem;\n+ color: var(--color-text);\n+}\n+.Commit:focus,\n+.Commit:hover {\n+ outline: none;\n+ background-color: var(--color-background-hover);\n+}\n+\n+.CurrentCommit {\n+ background-color: var(--color-background-selected);\n+ color: var(--color-text-selected);\n+}\n+.CurrentCommit:focus {\n+ outline: none;\n+}\n+\n+.WhatChangedItem {\n+ margin-top: 0.25rem;\n+}\n+\n+.WhatChangedKey {\n+ font-family: var(--font-family-monospace);\n+ font-size: var(--font-size-monospace-small);\n+ line-height: 1;\n+}\n+.WhatChangedKey:first-of-type::before {\n+ content: ' (';\n+}\n+.WhatChangedKey::after {\n+ content: ', ';\n+}\n+.WhatChangedKey:last-of-type::after {\n+ content: ')';\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/SidebarSelectedFiberInfo.js b\/src\/devtools\/views\/Profiler\/SidebarSelectedFiberInfo.js\nnew file mode 100644\nindex 0000000000..9a34361a17\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/SidebarSelectedFiberInfo.js\n@@ -0,0 +1,207 @@\n+\/\/ @flow\n+\n+import React, { Fragment, useContext } from 'react';\n+import ProfilerStore from 'src\/devtools\/ProfilerStore';\n+import { ProfilerContext } from '.\/ProfilerContext';\n+import { formatDuration, formatTime } from '.\/utils';\n+import { StoreContext } from '..\/context';\n+import Button from '..\/Button';\n+import ButtonIcon from '..\/ButtonIcon';\n+\n+import styles from '.\/SidebarSelectedFiberInfo.css';\n+\n+export type Props = {||};\n+\n+export default function SidebarSelectedFiberInfo(_: Props) {\n+ const { profilerStore } = useContext(StoreContext);\n+ const {\n+ rootID,\n+ selectCommitIndex,\n+ selectedCommitIndex,\n+ selectedFiberID,\n+ selectedFiberName,\n+ selectFiber,\n+ } = useContext(ProfilerContext);\n+ const { profilingCache } = profilerStore;\n+\n+ const commitIndices = profilingCache.getFiberCommits({\n+ fiberID: ((selectedFiberID: any): number),\n+ rootID: ((rootID: any): number),\n+ });\n+\n+ const listItems = [];\n+ for (let i = 0; i < commitIndices.length; i++) {\n+ const commitIndex = commitIndices[i];\n+\n+ const { duration, timestamp } = profilerStore.getCommitData(\n+ ((rootID: any): number),\n+ commitIndex\n+ );\n+\n+ listItems.push(\n+ <button\n+ key={commitIndex}\n+ className={\n+ selectedCommitIndex === commitIndex\n+ ? styles.CurrentCommit\n+ : styles.Commit\n+ }\n+ onClick={() => selectCommitIndex(commitIndex)}\n+ >\n+ {formatTime(timestamp)}s for {formatDuration(duration)}ms\n+ <\/button>\n+ );\n+ }\n+\n+ return (\n+ <Fragment>\n+ <div className={styles.Toolbar}>\n+ <div className={styles.Component}>\n+ {selectedFiberName || 'Selected component'}\n+ <\/div>\n+\n+ <Button\n+ className={styles.IconButton}\n+ onClick={() => selectFiber(null, null)}\n+ title=\"Back to commit view\"\n+ >\n+ <ButtonIcon type=\"close\" \/>\n+ <\/Button>\n+ <\/div>\n+ <div className={styles.Content}>\n+ <WhatChanged\n+ commitIndex={((selectedCommitIndex: any): number)}\n+ fiberID={((selectedFiberID: any): number)}\n+ profilerStore={profilerStore}\n+ rootID={((rootID: any): number)}\n+ \/>\n+ {listItems.length > 0 && (\n+ <Fragment>\n+ <label className={styles.Label}>Rendered at<\/label>: {listItems}\n+ <\/Fragment>\n+ )}\n+ {listItems.length === 0 && (\n+ <div>Did not render during this profiling session.<\/div>\n+ )}\n+ <\/div>\n+ <\/Fragment>\n+ );\n+}\n+\n+type WhatChangedProps = {|\n+ commitIndex: number,\n+ fiberID: number,\n+ profilerStore: ProfilerStore,\n+ rootID: number,\n+|};\n+\n+function WhatChanged({\n+ commitIndex,\n+ fiberID,\n+ profilerStore,\n+ rootID,\n+}: WhatChangedProps) {\n+ const { changeDescriptions } = profilerStore.getCommitData(\n+ ((rootID: any): number),\n+ commitIndex\n+ );\n+ if (changeDescriptions === null) {\n+ return null;\n+ }\n+\n+ const changeDescription = changeDescriptions.get(fiberID);\n+ if (changeDescription == null) {\n+ return null;\n+ }\n+\n+ if (changeDescription.isFirstMount) {\n+ return (\n+ <div className={styles.WhatChanged}>\n+ <label className={styles.Label}>Why did this render?<\/label>\n+ <div className={styles.WhatChangedItem}>\n+ This is the first time the component rendered.\n+ <\/div>\n+ <\/div>\n+ );\n+ }\n+\n+ const changes = [];\n+\n+ if (changeDescription.context === true) {\n+ changes.push(\n+ <div key=\"context\" className={styles.WhatChangedItem}>\n+ • Context changed\n+ <\/div>\n+ );\n+ } else if (\n+ typeof changeDescription.context === 'object' &&\n+ changeDescription.context !== null &&\n+ changeDescription.context.length !== 0\n+ ) {\n+ changes.push(\n+ <div key=\"context\" className={styles.WhatChangedItem}>\n+ • Context changed:\n+ {changeDescription.context.map(key => (\n+ <span key={key} className={styles.WhatChangedKey}>\n+ {key}\n+ <\/span>\n+ ))}\n+ <\/div>\n+ );\n+ }\n+\n+ if (changeDescription.didHooksChange) {\n+ changes.push(\n+ <div key=\"hooks\" className={styles.WhatChangedItem}>\n+ • Hooks changed\n+ <\/div>\n+ );\n+ }\n+\n+ if (\n+ changeDescription.props !== null &&\n+ changeDescription.props.length !== 0\n+ ) {\n+ changes.push(\n+ <div key=\"props\" className={styles.WhatChangedItem}>\n+ • Props changed:\n+ {changeDescription.props.map(key => (\n+ <span key={key} className={styles.WhatChangedKey}>\n+ {key}\n+ <\/span>\n+ ))}\n+ <\/div>\n+ );\n+ }\n+\n+ if (\n+ changeDescription.state !== null &&\n+ changeDescription.state.length !== 0\n+ ) {\n+ changes.push(\n+ <div key=\"state\" className={styles.WhatChangedItem}>\n+ • State changed:\n+ {changeDescription.state.map(key => (\n+ <span key={key} className={styles.WhatChangedKey}>\n+ {key}\n+ <\/span>\n+ ))}\n+ <\/div>\n+ );\n+ }\n+\n+ if (changes.length === 0) {\n+ changes.push(\n+ <div key=\"nothing\" className={styles.WhatChangedItem}>\n+ The parent component rendered.\n+ <\/div>\n+ );\n+ }\n+\n+ return (\n+ <div className={styles.WhatChanged}>\n+ <label className={styles.Label}>Why did this render?<\/label>\n+ {changes}\n+ <\/div>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/SnapshotCommitList.css b\/src\/devtools\/views\/Profiler\/SnapshotCommitList.css\nnew file mode 100644\nindex 0000000000..53faae5c38\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/SnapshotCommitList.css\n@@ -0,0 +1,9 @@\n+.List {\n+ \/**\n+ * The decision to suppress the default (horizontal) scroll bars is intentional.\n+ * The snapshot selector is small enough that the scrollbar renders it essentially useless.\n+ * There are two alternative navigation mechanisms (arrow keys and arrow buttons).\n+ * If necessary, we could also expand the click-and-drag mechanism to scroll.\n+ *\/\n+ overflow-x: hidden !important;\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/SnapshotCommitList.js b\/src\/devtools\/views\/Profiler\/SnapshotCommitList.js\nnew file mode 100644\nindex 0000000000..433750fdd8\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/SnapshotCommitList.js\n@@ -0,0 +1,178 @@\n+\/\/ @flow\n+\n+import React, {\n+ useCallback,\n+ useEffect,\n+ useMemo,\n+ useRef,\n+ useState,\n+} from 'react';\n+import AutoSizer from 'react-virtualized-auto-sizer';\n+import { FixedSizeList } from 'react-window';\n+import SnapshotCommitListItem from '.\/SnapshotCommitListItem';\n+import { minBarWidth } from '.\/constants';\n+\n+import styles from '.\/SnapshotCommitList.css';\n+\n+export type ItemData = {|\n+ commitDurations: Array<number>,\n+ commitTimes: Array<number>,\n+ filteredCommitIndices: Array<number>,\n+ isMouseDown: boolean,\n+ maxDuration: number,\n+ selectedCommitIndex: number | null,\n+ selectedFilteredCommitIndex: number | null,\n+ selectCommitIndex: (index: number) => void,\n+|};\n+\n+type Props = {|\n+ commitDurations: Array<number>,\n+ commitTimes: Array<number>,\n+ filteredCommitIndices: Array<number>,\n+ selectedCommitIndex: number | null,\n+ selectedFilteredCommitIndex: number | null,\n+ selectCommitIndex: (index: number) => void,\n+|};\n+\n+export default function SnapshotCommitList({\n+ commitDurations,\n+ commitTimes,\n+ filteredCommitIndices,\n+ selectedCommitIndex,\n+ selectedFilteredCommitIndex,\n+ selectCommitIndex,\n+}: Props) {\n+ return (\n+ <AutoSizer>\n+ {({ height, width }) => (\n+ <List\n+ commitDurations={commitDurations}\n+ commitTimes={commitTimes}\n+ height={height}\n+ filteredCommitIndices={filteredCommitIndices}\n+ selectedCommitIndex={selectedCommitIndex}\n+ selectedFilteredCommitIndex={selectedFilteredCommitIndex}\n+ selectCommitIndex={selectCommitIndex}\n+ width={width}\n+ \/>\n+ )}\n+ <\/AutoSizer>\n+ );\n+}\n+\n+type ListProps = {|\n+ commitDurations: Array<number>,\n+ commitTimes: Array<number>,\n+ height: number,\n+ filteredCommitIndices: Array<number>,\n+ selectedCommitIndex: number | null,\n+ selectedFilteredCommitIndex: number | null,\n+ selectCommitIndex: (index: number) => void,\n+ width: number,\n+|};\n+\n+function List({\n+ commitDurations,\n+ selectedCommitIndex,\n+ commitTimes,\n+ height,\n+ filteredCommitIndices,\n+ selectedFilteredCommitIndex,\n+ selectCommitIndex,\n+ width,\n+}: ListProps) {\n+ const listRef = useRef<FixedSizeList<ItemData> | null>(null);\n+ const divRef = useRef<HTMLDivElement | null>(null);\n+ const prevCommitIndexRef = useRef<number | null>(null);\n+\n+ \/\/ Make sure a newly selected snapshot is fully visible within the list.\n+ useEffect(() => {\n+ if (selectedFilteredCommitIndex !== prevCommitIndexRef.current) {\n+ prevCommitIndexRef.current = selectedFilteredCommitIndex;\n+ if (selectedFilteredCommitIndex !== null && listRef.current !== null) {\n+ listRef.current.scrollToItem(selectedFilteredCommitIndex);\n+ }\n+ }\n+ }, [listRef, selectedFilteredCommitIndex]);\n+\n+ \/\/ When the mouse is down, dragging over a commit should auto-select it.\n+ \/\/ This provides a nice way for users to swipe across a range of commits to compare them.\n+ const [isMouseDown, setIsMouseDown] = useState(false);\n+ const handleMouseDown = useCallback(() => {\n+ setIsMouseDown(true);\n+ }, []);\n+ const handleMouseUp = useCallback(() => {\n+ setIsMouseDown(false);\n+ }, []);\n+ useEffect(() => {\n+ if (divRef.current === null) {\n+ return () => {};\n+ }\n+\n+ \/\/ It's important to listen to the ownerDocument to support the browser extension.\n+ \/\/ Here we use portals to render individual tabs (e.g. Profiler),\n+ \/\/ and the root document might belong to a different window.\n+ const ownerDocument = divRef.current.ownerDocument;\n+ ownerDocument.addEventListener('mouseup', handleMouseUp);\n+ return () => ownerDocument.removeEventListener('mouseup', handleMouseUp);\n+ }, [divRef, handleMouseUp]);\n+\n+ const itemSize = useMemo(\n+ () => Math.max(minBarWidth, width \/ filteredCommitIndices.length),\n+ [filteredCommitIndices, width]\n+ );\n+ const maxDuration = useMemo(\n+ () =>\n+ commitDurations.reduce(\n+ (maxDuration, duration) => Math.max(maxDuration, duration),\n+ 0\n+ ),\n+ [commitDurations]\n+ );\n+\n+ \/\/ Pass required contextual data down to the ListItem renderer.\n+ const itemData = useMemo<ItemData>(\n+ () => ({\n+ commitDurations,\n+ commitTimes,\n+ filteredCommitIndices,\n+ isMouseDown,\n+ maxDuration,\n+ selectedCommitIndex,\n+ selectedFilteredCommitIndex,\n+ selectCommitIndex,\n+ }),\n+ [\n+ commitDurations,\n+ commitTimes,\n+ filteredCommitIndices,\n+ isMouseDown,\n+ maxDuration,\n+ selectedCommitIndex,\n+ selectedFilteredCommitIndex,\n+ selectCommitIndex,\n+ ]\n+ );\n+\n+ return (\n+ <div\n+ onMouseDown={handleMouseDown}\n+ onMouseUp={handleMouseUp}\n+ ref={divRef}\n+ style={{ height, width }}\n+ >\n+ <FixedSizeList\n+ className={styles.List}\n+ layout=\"horizontal\"\n+ height={height}\n+ itemCount={filteredCommitIndices.length}\n+ itemData={itemData}\n+ itemSize={itemSize}\n+ ref={(listRef: any) \/* Flow bug? *\/}\n+ width={width}\n+ >\n+ {SnapshotCommitListItem}\n+ <\/FixedSizeList>\n+ <\/div>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/SnapshotCommitListItem.css b\/src\/devtools\/views\/Profiler\/SnapshotCommitListItem.css\nnew file mode 100644\nindex 0000000000..dc6592a931\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/SnapshotCommitListItem.css\n@@ -0,0 +1,16 @@\n+.Outer {\n+ user-select: none;\n+ cursor: pointer;\n+ border-bottom: 3px solid transparent;\n+ padding-top: 4px;\n+ padding-bottom: 1px;\n+ display: flex;\n+ align-items: flex-end;\n+}\n+\n+.Inner {\n+ width: 100%;\n+ min-height: 5px;\n+ background-color: var(--color-commit-did-not-render-fill);\n+ color: var(--color-commit-did-not-render-fill-text);\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/SnapshotCommitListItem.js b\/src\/devtools\/views\/Profiler\/SnapshotCommitListItem.js\nnew file mode 100644\nindex 0000000000..4116d41f36\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/SnapshotCommitListItem.js\n@@ -0,0 +1,74 @@\n+\/\/ @flow\n+\n+import React, { memo, useCallback } from 'react';\n+import { areEqual } from 'react-window';\n+import { getGradientColor, formatDuration, formatTime } from '.\/utils';\n+\n+import styles from '.\/SnapshotCommitListItem.css';\n+\n+import type { ItemData } from '.\/SnapshotCommitList';\n+\n+type Props = {\n+ data: ItemData,\n+ index: number,\n+ style: Object,\n+};\n+\n+function SnapshotCommitListItem({ data: itemData, index, style }: Props) {\n+ const {\n+ commitDurations,\n+ commitTimes,\n+ filteredCommitIndices,\n+ isMouseDown,\n+ maxDuration,\n+ selectedCommitIndex,\n+ selectCommitIndex,\n+ } = itemData;\n+\n+ index = filteredCommitIndices[index];\n+\n+ const commitDuration = commitDurations[index];\n+ const commitTime = commitTimes[index];\n+\n+ const handleClick = useCallback(() => selectCommitIndex(index), [\n+ index,\n+ selectCommitIndex,\n+ ]);\n+\n+ \/\/ Guard against commits with duration 0\n+ const percentage =\n+ Math.min(1, Math.max(0, commitDuration \/ maxDuration)) || 0;\n+ const isSelected = selectedCommitIndex === index;\n+\n+ \/\/ Leave a 1px gap between snapshots\n+ const width = parseFloat(style.width) - 1;\n+\n+ return (\n+ <div\n+ className={styles.Outer}\n+ onClick={handleClick}\n+ onMouseEnter={isMouseDown ? handleClick : null}\n+ style={{\n+ ...style,\n+ width,\n+ borderBottom: isSelected\n+ ? '3px solid var(--color-tab-selected-border)'\n+ : undefined,\n+ }}\n+ title={`Duration ${formatDuration(commitDuration)}ms at ${formatTime(\n+ commitTime\n+ )}s`}\n+ >\n+ <div\n+ className={styles.Inner}\n+ style={{\n+ height: `${Math.round(percentage * 100)}%`,\n+ backgroundColor:\n+ percentage > 0 ? getGradientColor(percentage) : undefined,\n+ }}\n+ \/>\n+ <\/div>\n+ );\n+}\n+\n+export default memo<Props>(SnapshotCommitListItem, areEqual);\ndiff --git a\/src\/devtools\/views\/Profiler\/SnapshotSelector.css b\/src\/devtools\/views\/Profiler\/SnapshotSelector.css\nnew file mode 100644\nindex 0000000000..e4f8aec57d\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/SnapshotSelector.css\n@@ -0,0 +1,30 @@\n+.Button {\n+ flex: 0 0 auto;\n+ margin-left: 0.25rem;\n+}\n+\n+.Commits {\n+ height: 100%;\n+ min-width: 30px;\n+ margin-left: 0.25rem;\n+ overflow: hidden;\n+}\n+.Commits:focus {\n+ outline: none;\n+ background-color: var(--color-button-background-focus);\n+}\n+\n+.IndexLabel {\n+ flex: 0 0 auto;\n+ white-space: nowrap;\n+ font-family: var(--font-family-monospace);\n+ margin-left: 0.25rem;\n+}\n+\n+.NoCommits {\n+ height: 100%;\n+ display: flex;\n+ align-items: center;\n+ justify-content: center;\n+ color: var(--color-dim);\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/SnapshotSelector.js b\/src\/devtools\/views\/Profiler\/SnapshotSelector.js\nnew file mode 100644\nindex 0000000000..a41187d89d\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/SnapshotSelector.js\n@@ -0,0 +1,173 @@\n+\/\/ @flow\n+\n+import React, { Fragment, useCallback, useContext, useMemo } from 'react';\n+import Button from '..\/Button';\n+import ButtonIcon from '..\/ButtonIcon';\n+import { ProfilerContext } from '.\/ProfilerContext';\n+import SnapshotCommitList from '.\/SnapshotCommitList';\n+import { maxBarWidth } from '.\/constants';\n+import { StoreContext } from '..\/context';\n+\n+import styles from '.\/SnapshotSelector.css';\n+\n+export type Props = {||};\n+\n+export default function SnapshotSelector(_: Props) {\n+ const {\n+ isCommitFilterEnabled,\n+ minCommitDuration,\n+ rootID,\n+ selectedCommitIndex,\n+ selectCommitIndex,\n+ } = useContext(ProfilerContext);\n+\n+ const { profilerStore } = useContext(StoreContext);\n+ const { commitData } = profilerStore.getDataForRoot(((rootID: any): number));\n+\n+ const commitDurations: Array<number> = [];\n+ const commitTimes: Array<number> = [];\n+ commitData.forEach(commitDatum => {\n+ commitDurations.push(commitDatum.duration);\n+ commitTimes.push(commitDatum.timestamp);\n+ });\n+\n+ const filteredCommitIndices = useMemo(\n+ () =>\n+ commitData.reduce((reduced, commitDatum, index) => {\n+ if (\n+ !isCommitFilterEnabled ||\n+ commitDatum.duration >= minCommitDuration\n+ ) {\n+ reduced.push(index);\n+ }\n+ return reduced;\n+ }, []),\n+ [commitData, isCommitFilterEnabled, minCommitDuration]\n+ );\n+\n+ const numFilteredCommits = filteredCommitIndices.length;\n+\n+ \/\/ Map the (unfiltered) selected commit index to an index within the filtered data.\n+ const selectedFilteredCommitIndex = useMemo(() => {\n+ if (selectedCommitIndex !== null) {\n+ for (let i = 0; i < filteredCommitIndices.length; i++) {\n+ if (filteredCommitIndices[i] === selectedCommitIndex) {\n+ return i;\n+ }\n+ }\n+ }\n+ return null;\n+ }, [filteredCommitIndices, selectedCommitIndex]);\n+\n+ \/\/ TODO (profiling) This should be managed by the context controller (reducer).\n+ \/\/ It doesn't currently know about the filtered commits though (since it doesn't suspend).\n+ \/\/ Maybe this component should pass filteredCommitIndices up?\n+ if (selectedFilteredCommitIndex === null) {\n+ if (numFilteredCommits > 0) {\n+ selectCommitIndex(0);\n+ } else {\n+ selectCommitIndex(null);\n+ }\n+ } else if (selectedFilteredCommitIndex >= numFilteredCommits) {\n+ selectCommitIndex(numFilteredCommits === 0 ? null : numFilteredCommits - 1);\n+ }\n+\n+ let label = null;\n+ if (numFilteredCommits > 0) {\n+ label =\n+ `${selectedFilteredCommitIndex + 1}`.padStart(\n+ `${numFilteredCommits}`.length,\n+ '0'\n+ ) +\n+ ' \/ ' +\n+ numFilteredCommits;\n+ }\n+\n+ const viewNextCommit = useCallback(() => {\n+ const nextCommitIndex = Math.min(\n+ ((selectedFilteredCommitIndex: any): number) + 1,\n+ filteredCommitIndices.length - 1\n+ );\n+ selectCommitIndex(filteredCommitIndices[nextCommitIndex]);\n+ }, [selectedFilteredCommitIndex, filteredCommitIndices, selectCommitIndex]);\n+ const viewPrevCommit = useCallback(() => {\n+ const nextCommitIndex = Math.max(\n+ ((selectedFilteredCommitIndex: any): number) - 1,\n+ 0\n+ );\n+ selectCommitIndex(filteredCommitIndices[nextCommitIndex]);\n+ }, [selectedFilteredCommitIndex, filteredCommitIndices, selectCommitIndex]);\n+\n+ const handleKeyDown = useCallback(\n+ event => {\n+ switch (event.key) {\n+ case 'ArrowLeft':\n+ viewPrevCommit();\n+ event.stopPropagation();\n+ break;\n+ case 'ArrowRight':\n+ viewNextCommit();\n+ event.stopPropagation();\n+ break;\n+ default:\n+ break;\n+ }\n+ },\n+ [viewNextCommit, viewPrevCommit]\n+ );\n+\n+ if (commitData.length === 0) {\n+ return null;\n+ }\n+\n+ return (\n+ <Fragment>\n+ <span className={styles.IndexLabel}>{label}<\/span>\n+ <Button\n+ className={styles.Button}\n+ disabled={selectedFilteredCommitIndex === 0 || numFilteredCommits === 0}\n+ onClick={viewPrevCommit}\n+ title=\"Select previous commit\"\n+ >\n+ <ButtonIcon type=\"previous\" \/>\n+ <\/Button>\n+ <div\n+ className={styles.Commits}\n+ onKeyDown={handleKeyDown}\n+ style={{\n+ flex: numFilteredCommits > 0 ? '1 1 auto' : '0 0 auto',\n+ maxWidth:\n+ numFilteredCommits > 0\n+ ? numFilteredCommits * maxBarWidth\n+ : undefined,\n+ }}\n+ tabIndex={0}\n+ >\n+ {numFilteredCommits > 0 && (\n+ <SnapshotCommitList\n+ commitDurations={commitDurations}\n+ commitTimes={commitTimes}\n+ filteredCommitIndices={filteredCommitIndices}\n+ selectedCommitIndex={selectedCommitIndex}\n+ selectedFilteredCommitIndex={selectedFilteredCommitIndex}\n+ selectCommitIndex={selectCommitIndex}\n+ \/>\n+ )}\n+ {numFilteredCommits === 0 && (\n+ <div className={styles.NoCommits}>No commits<\/div>\n+ )}\n+ <\/div>\n+ <Button\n+ className={styles.Button}\n+ disabled={\n+ selectedFilteredCommitIndex === null ||\n+ selectedFilteredCommitIndex >= numFilteredCommits - 1\n+ }\n+ onClick={viewNextCommit}\n+ title=\"Select next commit\"\n+ >\n+ <ButtonIcon type=\"next\" \/>\n+ <\/Button>\n+ <\/Fragment>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/constants.js b\/src\/devtools\/views\/Profiler\/constants.js\nnew file mode 100644\nindex 0000000000..664dfe354b\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/constants.js\n@@ -0,0 +1,7 @@\n+\/\/ @flow\n+\n+export const barWidthThreshold = 2;\n+export const interactionCommitSize = 10;\n+export const interactionLabelWidth = 200;\n+export const maxBarWidth = 30;\n+export const minBarWidth = 5;\ndiff --git a\/src\/devtools\/views\/Profiler\/types.js b\/src\/devtools\/views\/Profiler\/types.js\nnew file mode 100644\nindex 0000000000..d8c954e5b7\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/types.js\n@@ -0,0 +1,132 @@\n+\/\/ @flow\n+\n+import type { ElementType } from 'src\/types';\n+\n+export type CommitTreeNode = {|\n+ id: number,\n+ children: Array<number>,\n+ displayName: string | null,\n+ key: number | string | null,\n+ parentID: number,\n+ treeBaseDuration: number,\n+ type: ElementType,\n+|};\n+\n+export type CommitTree = {|\n+ nodes: Map<number, CommitTreeNode>,\n+ rootID: number,\n+|};\n+\n+export type Interaction = {|\n+ id: number,\n+ name: string,\n+ timestamp: number,\n+|};\n+\n+export type SnapshotNode = {|\n+ id: number,\n+ children: Array<number>,\n+ displayName: string | null,\n+ key: number | string | null,\n+ type: ElementType,\n+|};\n+\n+export type ChangeDescription = {|\n+ context: Array<string> | boolean | null,\n+ didHooksChange: boolean,\n+ isFirstMount: boolean,\n+ props: Array<string> | null,\n+ state: Array<string> | null,\n+|};\n+\n+export type CommitDataFrontend = {|\n+ \/\/ Map of Fiber (ID) to a description of what changed in this commit.\n+ changeDescriptions: Map<number, ChangeDescription> | null,\n+\n+ \/\/ How long was this commit?\n+ duration: number,\n+\n+ \/\/ Map of Fiber (ID) to actual duration for this commit;\n+ \/\/ Fibers that did not render will not have entries in this Map.\n+ fiberActualDurations: Map<number, number>,\n+\n+ \/\/ Map of Fiber (ID) to \"self duration\" for this commit;\n+ \/\/ Fibers that did not render will not have entries in this Map.\n+ fiberSelfDurations: Map<number, number>,\n+\n+ \/\/ Which interactions (IDs) were associated with this commit.\n+ interactionIDs: Array<number>,\n+\n+ \/\/ Priority level of the commit (if React provided this info)\n+ priorityLevel: string | null,\n+\n+ \/\/ When did this commit occur (relative to the start of profiling)\n+ timestamp: number,\n+|};\n+\n+export type ProfilingDataForRootFrontend = {|\n+ \/\/ Timing, duration, and other metadata about each commit.\n+ commitData: Array<CommitDataFrontend>,\n+\n+ \/\/ Display name of the nearest descendant component (ideally a function or class component).\n+ \/\/ This value is used by the root selector UI.\n+ displayName: string,\n+\n+ \/\/ Map of fiber id to (initial) tree base duration when Profiling session was started.\n+ \/\/ This info can be used along with commitOperations to reconstruct the tree for any commit.\n+ initialTreeBaseDurations: Map<number, number>,\n+\n+ \/\/ All interactions recorded (for this root) during the current session.\n+ interactionCommits: Map<number, Array<number>>,\n+\n+ \/\/ All interactions recorded (for this root) during the current session.\n+ interactions: Map<number, Interaction>,\n+\n+ \/\/ List of tree mutation that occur during profiling.\n+ \/\/ These mutations can be used along with initial snapshots to reconstruct the tree for any commit.\n+ operations: Array<Array<number>>,\n+\n+ \/\/ Identifies the root this profiler data corresponds to.\n+ rootID: number,\n+\n+ \/\/ Map of fiber id to node when the Profiling session was started.\n+ \/\/ This info can be used along with commitOperations to reconstruct the tree for any commit.\n+ snapshots: Map<number, SnapshotNode>,\n+|};\n+\n+\/\/ Combination of profiling data collected by the renderer interface (backend) and Store (frontend).\n+export type ProfilingDataFrontend = {|\n+ \/\/ Profiling data per root.\n+ dataForRoots: Map<number, ProfilingDataForRootFrontend>,\n+|};\n+\n+export type CommitDataExport = {|\n+ changeDescriptions: Array<[number, ChangeDescription]> | null,\n+ duration: number,\n+ \/\/ Tuple of fiber ID and actual duration\n+ fiberActualDurations: Array<[number, number]>,\n+ \/\/ Tuple of fiber ID and computed \"self\" duration\n+ fiberSelfDurations: Array<[number, number]>,\n+ interactionIDs: Array<number>,\n+ priorityLevel: string | null,\n+ timestamp: number,\n+|};\n+\n+export type ProfilingDataForRootExport = {|\n+ commitData: Array<CommitDataExport>,\n+ displayName: string,\n+ \/\/ Tuple of Fiber ID and base duration\n+ initialTreeBaseDurations: Array<[number, number]>,\n+ \/\/ Tuple of Interaction ID and commit indices\n+ interactionCommits: Array<[number, Array<number>]>,\n+ interactions: Array<[number, Interaction]>,\n+ operations: Array<Array<number>>,\n+ rootID: number,\n+ snapshots: Array<[number, SnapshotNode]>,\n+|};\n+\n+\/\/ Serializable vefrsion of ProfilingDataFrontend data.\n+export type ProfilingDataExport = {|\n+ version: 4,\n+ dataForRoots: Array<ProfilingDataForRootExport>,\n+|};\ndiff --git a\/src\/devtools\/views\/Profiler\/utils.js b\/src\/devtools\/views\/Profiler\/utils.js\nnew file mode 100644\nindex 0000000000..973d5ba2d5\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/utils.js\n@@ -0,0 +1,229 @@\n+\/\/ @flow\n+\n+import { PROFILER_EXPORT_VERSION } from 'src\/constants';\n+\n+import type { ProfilingDataBackend } from 'src\/backend\/types';\n+import type {\n+ ProfilingDataExport,\n+ ProfilingDataForRootExport,\n+ ProfilingDataForRootFrontend,\n+ ProfilingDataFrontend,\n+ SnapshotNode,\n+} from '.\/types';\n+\n+const commitGradient = [\n+ 'var(--color-commit-gradient-0)',\n+ 'var(--color-commit-gradient-1)',\n+ 'var(--color-commit-gradient-2)',\n+ 'var(--color-commit-gradient-3)',\n+ 'var(--color-commit-gradient-4)',\n+ 'var(--color-commit-gradient-5)',\n+ 'var(--color-commit-gradient-6)',\n+ 'var(--color-commit-gradient-7)',\n+ 'var(--color-commit-gradient-8)',\n+ 'var(--color-commit-gradient-9)',\n+];\n+\n+\/\/ Combines info from the Store (frontend) and renderer interfaces (backend) into the format required by the Profiler UI.\n+\/\/ This format can then be quickly exported (and re-imported).\n+export function prepareProfilingDataFrontendFromBackendAndStore(\n+ dataBackends: Array<ProfilingDataBackend>,\n+ operationsByRootID: Map<number, Array<Array<number>>>,\n+ snapshotsByRootID: Map<number, Map<number, SnapshotNode>>\n+): ProfilingDataFrontend {\n+ const dataForRoots: Map<number, ProfilingDataForRootFrontend> = new Map();\n+\n+ dataBackends.forEach(dataBackend => {\n+ dataBackend.dataForRoots.forEach(\n+ ({\n+ commitData,\n+ displayName,\n+ initialTreeBaseDurations,\n+ interactionCommits,\n+ interactions,\n+ rootID,\n+ }) => {\n+ const operations = operationsByRootID.get(rootID);\n+ if (operations == null) {\n+ throw Error(`Could not find profiling operations for root ${rootID}`);\n+ }\n+\n+ const snapshots = snapshotsByRootID.get(rootID);\n+ if (snapshots == null) {\n+ throw Error(`Could not find profiling snapshots for root ${rootID}`);\n+ }\n+\n+ dataForRoots.set(rootID, {\n+ commitData: commitData.map((commitDataBackend, commitIndex) => ({\n+ changeDescriptions:\n+ commitDataBackend.changeDescriptions != null\n+ ? new Map(commitDataBackend.changeDescriptions)\n+ : null,\n+ duration: commitDataBackend.duration,\n+ fiberActualDurations: new Map(\n+ commitDataBackend.fiberActualDurations\n+ ),\n+ fiberSelfDurations: new Map(commitDataBackend.fiberSelfDurations),\n+ interactionIDs: commitDataBackend.interactionIDs,\n+ priorityLevel: commitDataBackend.priorityLevel,\n+ timestamp: commitDataBackend.timestamp,\n+ })),\n+ displayName,\n+ initialTreeBaseDurations: new Map(initialTreeBaseDurations),\n+ interactionCommits: new Map(interactionCommits),\n+ interactions: new Map(interactions),\n+ operations,\n+ rootID,\n+ snapshots,\n+ });\n+ }\n+ );\n+ });\n+\n+ return { dataForRoots };\n+}\n+\n+\/\/ Converts a Profiling data export into the format required by the Store.\n+export function prepareProfilingDataFrontendFromExport(\n+ profilingDataExport: ProfilingDataExport\n+): ProfilingDataFrontend {\n+ const { version } = profilingDataExport;\n+\n+ if (version !== PROFILER_EXPORT_VERSION) {\n+ throw Error(`Unsupported profiler export version \"${version}\"`);\n+ }\n+\n+ const dataForRoots: Map<number, ProfilingDataForRootFrontend> = new Map();\n+ profilingDataExport.dataForRoots.forEach(\n+ ({\n+ commitData,\n+ displayName,\n+ initialTreeBaseDurations,\n+ interactionCommits,\n+ interactions,\n+ operations,\n+ rootID,\n+ snapshots,\n+ }) => {\n+ dataForRoots.set(rootID, {\n+ commitData: commitData.map(\n+ ({\n+ changeDescriptions,\n+ duration,\n+ fiberActualDurations,\n+ fiberSelfDurations,\n+ interactionIDs,\n+ priorityLevel,\n+ timestamp,\n+ }) => ({\n+ changeDescriptions:\n+ changeDescriptions != null ? new Map(changeDescriptions) : null,\n+ duration,\n+ fiberActualDurations: new Map(fiberActualDurations),\n+ fiberSelfDurations: new Map(fiberSelfDurations),\n+ interactionIDs,\n+ priorityLevel,\n+ timestamp,\n+ })\n+ ),\n+ displayName,\n+ initialTreeBaseDurations: new Map(initialTreeBaseDurations),\n+ interactionCommits: new Map(interactionCommits),\n+ interactions: new Map(interactions),\n+ operations,\n+ rootID,\n+ snapshots: new Map(snapshots),\n+ });\n+ }\n+ );\n+\n+ return { dataForRoots };\n+}\n+\n+\/\/ Converts a Store Profiling data into a format that can be safely (JSON) serialized for export.\n+export function prepareProfilingDataExport(\n+ profilingDataFrontend: ProfilingDataFrontend\n+): ProfilingDataExport {\n+ const dataForRoots: Array<ProfilingDataForRootExport> = [];\n+ profilingDataFrontend.dataForRoots.forEach(\n+ ({\n+ commitData,\n+ displayName,\n+ initialTreeBaseDurations,\n+ interactionCommits,\n+ interactions,\n+ operations,\n+ rootID,\n+ snapshots,\n+ }) => {\n+ dataForRoots.push({\n+ commitData: commitData.map(\n+ ({\n+ changeDescriptions,\n+ duration,\n+ fiberActualDurations,\n+ fiberSelfDurations,\n+ interactionIDs,\n+ priorityLevel,\n+ timestamp,\n+ }) => ({\n+ changeDescriptions:\n+ changeDescriptions != null\n+ ? Array.from(changeDescriptions.entries())\n+ : null,\n+ duration,\n+ fiberActualDurations: Array.from(fiberActualDurations.entries()),\n+ fiberSelfDurations: Array.from(fiberSelfDurations.entries()),\n+ interactionIDs,\n+ priorityLevel,\n+ timestamp,\n+ })\n+ ),\n+ displayName,\n+ initialTreeBaseDurations: Array.from(\n+ initialTreeBaseDurations.entries()\n+ ),\n+ interactionCommits: Array.from(interactionCommits.entries()),\n+ interactions: Array.from(interactions.entries()),\n+ operations,\n+ rootID,\n+ snapshots: Array.from(snapshots.entries()),\n+ });\n+ }\n+ );\n+\n+ return {\n+ version: PROFILER_EXPORT_VERSION,\n+ dataForRoots,\n+ };\n+}\n+\n+export const getGradientColor = (value: number) => {\n+ const maxIndex = commitGradient.length - 1;\n+ let index;\n+ if (Number.isNaN(value)) {\n+ index = 0;\n+ } else if (!Number.isFinite(value)) {\n+ index = maxIndex;\n+ } else {\n+ index = Math.max(0, Math.min(maxIndex, value)) * maxIndex;\n+ }\n+ return commitGradient[Math.round(index)];\n+};\n+\n+export const formatDuration = (duration: number) =>\n+ Math.round(duration * 10) \/ 10 || '<0.1';\n+export const formatPercentage = (percentage: number) =>\n+ Math.round(percentage * 100);\n+export const formatTime = (timestamp: number) =>\n+ Math.round(Math.round(timestamp) \/ 100) \/ 10;\n+\n+export const scale = (\n+ minValue: number,\n+ maxValue: number,\n+ minRange: number,\n+ maxRange: number\n+) => (value: number, fallbackValue: number) =>\n+ maxValue - minValue === 0\n+ ? fallbackValue\n+ : ((value - minValue) \/ (maxValue - minValue)) * (maxRange - minRange);\ndiff --git a\/src\/devtools\/views\/ReactLogo.css b\/src\/devtools\/views\/ReactLogo.css\nnew file mode 100644\nindex 0000000000..a209f908d7\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/ReactLogo.css\n@@ -0,0 +1,6 @@\n+.ReactLogo {\n+ width: 1.75rem;\n+ height: 1.75rem;\n+ margin: 0 0.75rem 0 0.25rem;\n+ color: var(--color-button-active);\n+}\ndiff --git a\/src\/devtools\/views\/ReactLogo.js b\/src\/devtools\/views\/ReactLogo.js\nnew file mode 100644\nindex 0000000000..358a3a8ec8\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/ReactLogo.js\n@@ -0,0 +1,26 @@\n+\/\/ @flow\n+\n+import React from 'react';\n+\n+import styles from '.\/ReactLogo.css';\n+\n+type Props = {|\n+ className?: string,\n+|};\n+\n+export default function ReactLogo({ className }: Props) {\n+ return (\n+ <svg\n+ xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\n+ className={`${styles.ReactLogo} ${className || ''}`}\n+ viewBox=\"-11.5 -10.23174 23 20.46348\"\n+ >\n+ <circle cx=\"0\" cy=\"0\" r=\"2.05\" fill=\"currentColor\" \/>\n+ <g stroke=\"currentColor\" strokeWidth=\"1\" fill=\"none\">\n+ <ellipse rx=\"11\" ry=\"4.2\" \/>\n+ <ellipse rx=\"11\" ry=\"4.2\" transform=\"rotate(60)\" \/>\n+ <ellipse rx=\"11\" ry=\"4.2\" transform=\"rotate(120)\" \/>\n+ <\/g>\n+ <\/svg>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/Settings\/ComponentsSettings.js b\/src\/devtools\/views\/Settings\/ComponentsSettings.js\nnew file mode 100644\nindex 0000000000..6b62b935f1\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Settings\/ComponentsSettings.js\n@@ -0,0 +1,396 @@\n+\/\/ @flow\n+\n+import React, {\n+ useCallback,\n+ useContext,\n+ useEffect,\n+ useMemo,\n+ useRef,\n+ useState,\n+} from 'react';\n+import { useSubscription } from '..\/hooks';\n+import { StoreContext } from '..\/context';\n+import Store from 'src\/devtools\/store';\n+import Button from '..\/Button';\n+import ButtonIcon from '..\/ButtonIcon';\n+import Toggle from '..\/Toggle';\n+import {\n+ ComponentFilterDisplayName,\n+ ComponentFilterElementType,\n+ ComponentFilterHOC,\n+ ComponentFilterLocation,\n+ ElementTypeClass,\n+ ElementTypeContext,\n+ ElementTypeFunction,\n+ ElementTypeForwardRef,\n+ ElementTypeHostComponent,\n+ ElementTypeMemo,\n+ ElementTypeOtherOrUnknown,\n+ ElementTypeProfiler,\n+ ElementTypeSuspense,\n+} from 'src\/types';\n+\n+import styles from '.\/SettingsShared.css';\n+\n+import type {\n+ BooleanComponentFilter,\n+ ComponentFilter,\n+ ComponentFilterType,\n+ ElementType,\n+ ElementTypeComponentFilter,\n+ RegExpComponentFilter,\n+} from 'src\/types';\n+\n+export default function ComponentsSettings(_: {||}) {\n+ const store = useContext(StoreContext);\n+\n+ const collapseNodesByDefaultSubscription = useMemo(\n+ () => ({\n+ getCurrentValue: () => store.collapseNodesByDefault,\n+ subscribe: (callback: Function) => {\n+ store.addListener('collapseNodesByDefault', callback);\n+ return () => store.removeListener('collapseNodesByDefault', callback);\n+ },\n+ }),\n+ [store]\n+ );\n+ const collapseNodesByDefault = useSubscription<boolean, Store>(\n+ collapseNodesByDefaultSubscription\n+ );\n+\n+ const updateCollapseNodesByDefault = useCallback(\n+ ({ currentTarget }) => {\n+ store.collapseNodesByDefault = !currentTarget.checked;\n+ },\n+ [store]\n+ );\n+\n+ const [componentFilters, setComponentFilters] = useState<\n+ Array<ComponentFilter>\n+ >(() => [...store.componentFilters]);\n+\n+ const addFilter = useCallback(() => {\n+ setComponentFilters(componentFilters => {\n+ return [\n+ ...componentFilters,\n+ {\n+ type: ComponentFilterElementType,\n+ value: ElementTypeHostComponent,\n+ isEnabled: true,\n+ },\n+ ];\n+ });\n+ }, []);\n+\n+ const changeFilterType = useCallback(\n+ (componentFilter: ComponentFilter, type: ComponentFilterType) => {\n+ setComponentFilters(componentFilters => {\n+ const cloned: Array<ComponentFilter> = [...componentFilters];\n+ const index = componentFilters.indexOf(componentFilter);\n+ if (index >= 0) {\n+ if (type === ComponentFilterElementType) {\n+ cloned[index] = {\n+ type: ComponentFilterElementType,\n+ isEnabled: componentFilter.isEnabled,\n+ value: ElementTypeHostComponent,\n+ };\n+ } else if (type === ComponentFilterDisplayName) {\n+ cloned[index] = {\n+ type: ComponentFilterDisplayName,\n+ isEnabled: componentFilter.isEnabled,\n+ isValid: true,\n+ value: '',\n+ };\n+ } else if (type === ComponentFilterLocation) {\n+ cloned[index] = {\n+ type: ComponentFilterLocation,\n+ isEnabled: componentFilter.isEnabled,\n+ isValid: true,\n+ value: '',\n+ };\n+ } else if (type === ComponentFilterHOC) {\n+ cloned[index] = {\n+ type: ComponentFilterHOC,\n+ isEnabled: componentFilter.isEnabled,\n+ isValid: true,\n+ };\n+ }\n+ }\n+ return cloned;\n+ });\n+ },\n+ []\n+ );\n+\n+ const updateFilterValueElementType = useCallback(\n+ (componentFilter: ComponentFilter, value: ElementType) => {\n+ if (componentFilter.type !== ComponentFilterElementType) {\n+ throw Error('Invalid value for element type filter');\n+ }\n+\n+ setComponentFilters(componentFilters => {\n+ const cloned: Array<ComponentFilter> = [...componentFilters];\n+ if (componentFilter.type === ComponentFilterElementType) {\n+ const index = componentFilters.indexOf(componentFilter);\n+ if (index >= 0) {\n+ cloned[index] = {\n+ ...componentFilter,\n+ value,\n+ };\n+ }\n+ }\n+ return cloned;\n+ });\n+ },\n+ []\n+ );\n+\n+ const updateFilterValueRegExp = useCallback(\n+ (componentFilter: ComponentFilter, value: string) => {\n+ if (componentFilter.type === ComponentFilterElementType) {\n+ throw Error('Invalid value for element type filter');\n+ }\n+\n+ setComponentFilters(componentFilters => {\n+ const cloned: Array<ComponentFilter> = [...componentFilters];\n+ if (\n+ componentFilter.type === ComponentFilterDisplayName ||\n+ componentFilter.type === ComponentFilterLocation\n+ ) {\n+ const index = componentFilters.indexOf(componentFilter);\n+ if (index >= 0) {\n+ let isValid = true;\n+ try {\n+ new RegExp(value);\n+ } catch (error) {\n+ isValid = false;\n+ }\n+ cloned[index] = {\n+ ...componentFilter,\n+ isValid,\n+ value,\n+ };\n+ }\n+ }\n+ return cloned;\n+ });\n+ },\n+ []\n+ );\n+\n+ const removeFilter = useCallback((index: number) => {\n+ setComponentFilters(componentFilters => {\n+ const cloned: Array<ComponentFilter> = [...componentFilters];\n+ cloned.splice(index, 1);\n+ return cloned;\n+ });\n+ }, []);\n+\n+ const toggleFilterIsEnabled = useCallback(\n+ (componentFilter: ComponentFilter, isEnabled: boolean) => {\n+ setComponentFilters(componentFilters => {\n+ const cloned: Array<ComponentFilter> = [...componentFilters];\n+ const index = componentFilters.indexOf(componentFilter);\n+ if (index >= 0) {\n+ if (componentFilter.type === ComponentFilterElementType) {\n+ cloned[index] = {\n+ ...((cloned[index]: any): ElementTypeComponentFilter),\n+ isEnabled,\n+ };\n+ } else if (\n+ componentFilter.type === ComponentFilterDisplayName ||\n+ componentFilter.type === ComponentFilterLocation\n+ ) {\n+ cloned[index] = {\n+ ...((cloned[index]: any): RegExpComponentFilter),\n+ isEnabled,\n+ };\n+ } else if (componentFilter.type === ComponentFilterHOC) {\n+ cloned[index] = {\n+ ...((cloned[index]: any): BooleanComponentFilter),\n+ isEnabled,\n+ };\n+ }\n+ }\n+ return cloned;\n+ });\n+ },\n+ []\n+ );\n+\n+ \/\/ Filter updates are expensive to apply (since they impact the entire tree).\n+ \/\/ Only apply them on unmount.\n+ \/\/ The Store will avoid doing any expensive work unless they've changed.\n+ \/\/ We just want to batch the work in the event that they do change.\n+ const componentFiltersRef = useRef<Array<ComponentFilter>>(componentFilters);\n+ useEffect(() => {\n+ componentFiltersRef.current = componentFilters;\n+ return () => {};\n+ }, [componentFilters]);\n+ useEffect(\n+ () => () => {\n+ store.componentFilters = [...componentFiltersRef.current];\n+ },\n+ [store]\n+ );\n+\n+ return (\n+ <div className={styles.Settings}>\n+ <label className={styles.Setting}>\n+ <input\n+ type=\"checkbox\"\n+ checked={!collapseNodesByDefault}\n+ onChange={updateCollapseNodesByDefault}\n+ \/>{' '}\n+ Expand component tree by default\n+ <\/label>\n+\n+ <div className={styles.Header}>Hide components where...<\/div>\n+\n+ <table className={styles.Table}>\n+ <tbody>\n+ {componentFilters.length === 0 && (\n+ <tr className={styles.TableRow}>\n+ <td className={styles.NoFiltersCell}>\n+ No filters have been added.\n+ <\/td>\n+ <\/tr>\n+ )}\n+ {componentFilters.map((componentFilter, index) => (\n+ <tr className={styles.TableRow} key={index}>\n+ <td className={styles.TableCell}>\n+ <Toggle\n+ className={\n+ componentFilter.isValid !== false\n+ ? ''\n+ : styles.InvalidRegExp\n+ }\n+ isChecked={componentFilter.isEnabled}\n+ onChange={isEnabled =>\n+ toggleFilterIsEnabled(componentFilter, isEnabled)\n+ }\n+ title={\n+ componentFilter.isValid === false\n+ ? 'Filter invalid'\n+ : componentFilter.isEnabled\n+ ? 'Filter enabled'\n+ : 'Filter disabled'\n+ }\n+ >\n+ <ToggleIcon\n+ isEnabled={componentFilter.isEnabled}\n+ isValid={\n+ componentFilter.isValid == null ||\n+ componentFilter.isValid === true\n+ }\n+ \/>\n+ <\/Toggle>\n+ <\/td>\n+ <td className={styles.TableCell}>\n+ <select\n+ className={styles.Select}\n+ value={componentFilter.type}\n+ onChange={({ currentTarget }) =>\n+ changeFilterType(\n+ componentFilter,\n+ ((parseInt(\n+ currentTarget.value,\n+ 10\n+ ): any): ComponentFilterType)\n+ )\n+ }\n+ >\n+ <option value={ComponentFilterLocation}>location<\/option>\n+ <option value={ComponentFilterDisplayName}>name<\/option>\n+ <option value={ComponentFilterElementType}>type<\/option>\n+ <option value={ComponentFilterHOC}>hoc<\/option>\n+ <\/select>\n+ <\/td>\n+ <td className={styles.TableCell}>\n+ {componentFilter.type === ComponentFilterElementType &&\n+ 'equals'}\n+ {(componentFilter.type === ComponentFilterLocation ||\n+ componentFilter.type === ComponentFilterDisplayName) &&\n+ 'matches'}\n+ <\/td>\n+ <td className={styles.TableCell}>\n+ {componentFilter.type === ComponentFilterElementType && (\n+ <select\n+ className={styles.Select}\n+ value={componentFilter.value}\n+ onChange={({ currentTarget }) =>\n+ updateFilterValueElementType(\n+ componentFilter,\n+ ((parseInt(currentTarget.value, 10): any): ElementType)\n+ )\n+ }\n+ >\n+ <option value={ElementTypeClass}>class<\/option>\n+ <option value={ElementTypeContext}>context<\/option>\n+ <option value={ElementTypeFunction}>function<\/option>\n+ <option value={ElementTypeForwardRef}>forward ref<\/option>\n+ <option value={ElementTypeHostComponent}>\n+ host (e.g. <div>)\n+ <\/option>\n+ <option value={ElementTypeMemo}>memo<\/option>\n+ <option value={ElementTypeOtherOrUnknown}>other<\/option>\n+ <option value={ElementTypeProfiler}>profiler<\/option>\n+ <option value={ElementTypeSuspense}>suspense<\/option>\n+ <\/select>\n+ )}\n+ {(componentFilter.type === ComponentFilterLocation ||\n+ componentFilter.type === ComponentFilterDisplayName) && (\n+ <input\n+ className={styles.Input}\n+ type=\"text\"\n+ placeholder=\"Regular expression\"\n+ onChange={({ currentTarget }) =>\n+ updateFilterValueRegExp(\n+ componentFilter,\n+ currentTarget.value\n+ )\n+ }\n+ value={componentFilter.value}\n+ \/>\n+ )}\n+ <\/td>\n+ <td className={styles.TableCell}>\n+ <Button\n+ onClick={() => removeFilter(index)}\n+ title=\"Delete filter\"\n+ >\n+ <ButtonIcon type=\"delete\" \/>\n+ <\/Button>\n+ <\/td>\n+ <\/tr>\n+ ))}\n+ <\/tbody>\n+ <\/table>\n+\n+ <Button onClick={addFilter}>\n+ <ButtonIcon className={styles.ButtonIcon} type=\"add\" \/>\n+ Add filter\n+ <\/Button>\n+ <\/div>\n+ );\n+}\n+\n+type ToggleIconProps = {|\n+ isEnabled: boolean,\n+ isValid: boolean,\n+|};\n+function ToggleIcon({ isEnabled, isValid }: ToggleIconProps) {\n+ let className;\n+ if (isValid) {\n+ className = isEnabled ? styles.ToggleOn : styles.ToggleOff;\n+ } else {\n+ className = isEnabled ? styles.ToggleOnInvalid : styles.ToggleOffInvalid;\n+ }\n+ return (\n+ <div className={className}>\n+ <div\n+ className={isEnabled ? styles.ToggleInsideOn : styles.ToggleInsideOff}\n+ \/>\n+ <\/div>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/Settings\/GeneralSettings.js b\/src\/devtools\/views\/Settings\/GeneralSettings.js\nnew file mode 100644\nindex 0000000000..8b8692d739\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Settings\/GeneralSettings.js\n@@ -0,0 +1,72 @@\n+\/\/ @flow\n+\n+import React, { useContext } from 'react';\n+import { SettingsContext } from '.\/SettingsContext';\n+import { CHANGE_LOG_URL } from 'src\/constants';\n+\n+import styles from '.\/SettingsShared.css';\n+\n+export default function GeneralSettings(_: {||}) {\n+ const {\n+ displayDensity,\n+ setDisplayDensity,\n+ theme,\n+ setTheme,\n+ appendComponentStack,\n+ setAppendComponentStack,\n+ } = useContext(SettingsContext);\n+\n+ const updateDisplayDensity = ({ currentTarget }) =>\n+ setDisplayDensity(currentTarget.value);\n+ const updateTheme = ({ currentTarget }) => setTheme(currentTarget.value);\n+ const updateappendComponentStack = ({ currentTarget }) =>\n+ setAppendComponentStack(currentTarget.checked);\n+\n+ return (\n+ <div className={styles.Settings}>\n+ <div className={styles.Setting}>\n+ <div className={styles.RadioLabel}>Theme<\/div>\n+ <select className={styles.Select} value={theme} onChange={updateTheme}>\n+ <option value=\"auto\">Auto<\/option>\n+ <option value=\"light\">Light<\/option>\n+ <option value=\"dark\">Dark<\/option>\n+ <\/select>\n+ <\/div>\n+\n+ <div className={styles.Setting}>\n+ <div className={styles.RadioLabel}>Display density<\/div>\n+ <select\n+ className={styles.Select}\n+ value={displayDensity}\n+ onChange={updateDisplayDensity}\n+ >\n+ <option value=\"compact\">Compact<\/option>\n+ <option value=\"comfortable\">Comfortable<\/option>\n+ <\/select>\n+ <\/div>\n+\n+ <div className={styles.Setting}>\n+ <label>\n+ <input\n+ type=\"checkbox\"\n+ checked={appendComponentStack}\n+ onChange={updateappendComponentStack}\n+ \/>{' '}\n+ Append component stacks to console warnings and errors.\n+ <\/label>\n+ <\/div>\n+\n+ <div className={styles.ReleaseNotes}>\n+ <a\n+ className={styles.ReleaseNotesLink}\n+ target=\"_blank\"\n+ rel=\"noopener noreferrer\"\n+ href={CHANGE_LOG_URL}\n+ >\n+ View release notes\n+ <\/a>{' '}\n+ for DevTools version {process.env.DEVTOOLS_VERSION}\n+ <\/div>\n+ <\/div>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/Settings\/ProfilerSettings.js b\/src\/devtools\/views\/Settings\/ProfilerSettings.js\nnew file mode 100644\nindex 0000000000..b13f7ad6e8\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Settings\/ProfilerSettings.js\n@@ -0,0 +1,97 @@\n+\/\/ @flow\n+\n+import React, { useCallback, useContext, useMemo, useRef } from 'react';\n+import { useSubscription } from '..\/hooks';\n+import { StoreContext } from '..\/context';\n+import { ProfilerContext } from 'src\/devtools\/views\/Profiler\/ProfilerContext';\n+import Store from 'src\/devtools\/store';\n+\n+import styles from '.\/SettingsShared.css';\n+\n+export default function ProfilerSettings(_: {||}) {\n+ const {\n+ isCommitFilterEnabled,\n+ minCommitDuration,\n+ setIsCommitFilterEnabled,\n+ setMinCommitDuration,\n+ } = useContext(ProfilerContext);\n+ const store = useContext(StoreContext);\n+\n+ const recordChangeDescriptionsSubscription = useMemo(\n+ () => ({\n+ getCurrentValue: () => store.recordChangeDescriptions,\n+ subscribe: (callback: Function) => {\n+ store.addListener('recordChangeDescriptions', callback);\n+ return () => store.removeListener('recordChangeDescriptions', callback);\n+ },\n+ }),\n+ [store]\n+ );\n+ const recordChangeDescriptions = useSubscription<boolean, Store>(\n+ recordChangeDescriptionsSubscription\n+ );\n+\n+ const updateRecordChangeDescriptions = useCallback(\n+ ({ currentTarget }) => {\n+ store.recordChangeDescriptions = currentTarget.checked;\n+ },\n+ [store]\n+ );\n+ const updateMinCommitDuration = useCallback(\n+ (event: SyntheticEvent<HTMLInputElement>) => {\n+ const newValue = parseFloat(event.currentTarget.value);\n+ setMinCommitDuration(\n+ Number.isNaN(newValue) || newValue <= 0 ? 0 : newValue\n+ );\n+ },\n+ [setMinCommitDuration]\n+ );\n+ const updateIsCommitFilterEnabled = useCallback(\n+ (event: SyntheticEvent<HTMLInputElement>) => {\n+ const checked = event.currentTarget.checked;\n+ setIsCommitFilterEnabled(checked);\n+ if (checked) {\n+ if (minCommitDurationInputRef.current !== null) {\n+ minCommitDurationInputRef.current.focus();\n+ }\n+ }\n+ },\n+ [setIsCommitFilterEnabled]\n+ );\n+\n+ const minCommitDurationInputRef = useRef<HTMLInputElement | null>(null);\n+\n+ return (\n+ <div className={styles.Settings}>\n+ <div className={styles.Setting}>\n+ <label>\n+ <input\n+ type=\"checkbox\"\n+ checked={recordChangeDescriptions}\n+ onChange={updateRecordChangeDescriptions}\n+ \/>{' '}\n+ Record why each component rendered while profiling.\n+ <\/label>\n+ <\/div>\n+\n+ <div className={styles.Setting}>\n+ <label>\n+ <input\n+ checked={isCommitFilterEnabled}\n+ onChange={updateIsCommitFilterEnabled}\n+ type=\"checkbox\"\n+ \/>{' '}\n+ Hide commits below\n+ <\/label>{' '}\n+ <input\n+ className={styles.Input}\n+ onChange={updateMinCommitDuration}\n+ ref={minCommitDurationInputRef}\n+ type=\"number\"\n+ value={minCommitDuration}\n+ \/>{' '}\n+ (ms)\n+ <\/div>\n+ <\/div>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/Settings\/SettingsContext.js b\/src\/devtools\/views\/Settings\/SettingsContext.js\nnew file mode 100644\nindex 0000000000..62f3ae01da\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Settings\/SettingsContext.js\n@@ -0,0 +1,327 @@\n+\/\/ @flow\n+\n+import React, {\n+ createContext,\n+ useContext,\n+ useEffect,\n+ useLayoutEffect,\n+ useMemo,\n+} from 'react';\n+import {\n+ COMFORTABLE_LINE_HEIGHT,\n+ COMPACT_LINE_HEIGHT,\n+ LOCAL_STORAGE_SHOULD_PATCH_CONSOLE_KEY,\n+} from 'src\/constants';\n+import { useLocalStorage } from '..\/hooks';\n+import { BridgeContext } from '..\/context';\n+\n+import type { BrowserTheme } from '..\/DevTools';\n+\n+export type DisplayDensity = 'comfortable' | 'compact';\n+export type Theme = 'auto' | 'light' | 'dark';\n+\n+type Context = {|\n+ displayDensity: DisplayDensity,\n+ setDisplayDensity(value: DisplayDensity): void,\n+\n+ \/\/ Derived from display density.\n+ \/\/ Specified as a separate prop so it can trigger a re-render of FixedSizeList.\n+ lineHeight: number,\n+\n+ appendComponentStack: boolean,\n+ setAppendComponentStack: (value: boolean) => void,\n+\n+ theme: Theme,\n+ setTheme(value: Theme): void,\n+|};\n+\n+const SettingsContext = createContext<Context>(((null: any): Context));\n+SettingsContext.displayName = 'SettingsContext';\n+\n+type DocumentElements = Array<HTMLElement>;\n+\n+type Props = {|\n+ browserTheme: BrowserTheme,\n+ children: React$Node,\n+ componentsPortalContainer?: Element,\n+ profilerPortalContainer?: Element,\n+|};\n+\n+function SettingsContextController({\n+ browserTheme,\n+ children,\n+ componentsPortalContainer,\n+ profilerPortalContainer,\n+}: Props) {\n+ const bridge = useContext(BridgeContext);\n+\n+ const [displayDensity, setDisplayDensity] = useLocalStorage<DisplayDensity>(\n+ 'React::DevTools::displayDensity',\n+ 'compact'\n+ );\n+ const [theme, setTheme] = useLocalStorage<Theme>(\n+ 'React::DevTools::theme',\n+ 'auto'\n+ );\n+ const [\n+ appendComponentStack,\n+ setAppendComponentStack,\n+ ] = useLocalStorage<boolean>(LOCAL_STORAGE_SHOULD_PATCH_CONSOLE_KEY, true);\n+\n+ const documentElements = useMemo<DocumentElements>(() => {\n+ const array: Array<HTMLElement> = [\n+ ((document.documentElement: any): HTMLElement),\n+ ];\n+ if (componentsPortalContainer != null) {\n+ array.push(\n+ ((componentsPortalContainer.ownerDocument\n+ .documentElement: any): HTMLElement)\n+ );\n+ }\n+ if (profilerPortalContainer != null) {\n+ array.push(\n+ ((profilerPortalContainer.ownerDocument\n+ .documentElement: any): HTMLElement)\n+ );\n+ }\n+ return array;\n+ }, [componentsPortalContainer, profilerPortalContainer]);\n+\n+ useLayoutEffect(() => {\n+ switch (displayDensity) {\n+ case 'comfortable':\n+ updateDisplayDensity('comfortable', documentElements);\n+ break;\n+ case 'compact':\n+ updateDisplayDensity('compact', documentElements);\n+ break;\n+ default:\n+ throw Error(`Unsupported displayDensity value \"${displayDensity}\"`);\n+ }\n+ }, [displayDensity, documentElements]);\n+\n+ useLayoutEffect(() => {\n+ switch (theme) {\n+ case 'light':\n+ updateThemeVariables('light', documentElements);\n+ break;\n+ case 'dark':\n+ updateThemeVariables('dark', documentElements);\n+ break;\n+ case 'auto':\n+ updateThemeVariables(browserTheme, documentElements);\n+ break;\n+ default:\n+ throw Error(`Unsupported theme value \"${theme}\"`);\n+ }\n+ }, [browserTheme, theme, documentElements]);\n+\n+ useEffect(() => {\n+ bridge.send('updateAppendComponentStack', appendComponentStack);\n+ }, [bridge, appendComponentStack]);\n+\n+ const value = useMemo(\n+ () => ({\n+ displayDensity,\n+ setDisplayDensity,\n+ theme,\n+ setTheme,\n+ appendComponentStack,\n+ setAppendComponentStack,\n+ lineHeight:\n+ displayDensity === 'compact'\n+ ? COMPACT_LINE_HEIGHT\n+ : COMFORTABLE_LINE_HEIGHT,\n+ }),\n+ [\n+ displayDensity,\n+ setDisplayDensity,\n+ setTheme,\n+ appendComponentStack,\n+ setAppendComponentStack,\n+ theme,\n+ ]\n+ );\n+\n+ return (\n+ <SettingsContext.Provider value={value}>\n+ {children}\n+ <\/SettingsContext.Provider>\n+ );\n+}\n+\n+function setStyleVariable(\n+ name: string,\n+ value: string,\n+ documentElements: DocumentElements\n+) {\n+ documentElements.forEach(documentElement =>\n+ documentElement.style.setProperty(name, value)\n+ );\n+}\n+\n+function updateStyleHelper(\n+ themeKey: string,\n+ style: string,\n+ documentElements: DocumentElements\n+) {\n+ setStyleVariable(\n+ `--${style}`,\n+ `var(--${themeKey}-${style})`,\n+ documentElements\n+ );\n+}\n+\n+function updateDisplayDensity(\n+ displayDensity: DisplayDensity,\n+ documentElements: DocumentElements\n+): void {\n+ updateStyleHelper(\n+ displayDensity,\n+ 'font-size-monospace-normal',\n+ documentElements\n+ );\n+ updateStyleHelper(\n+ displayDensity,\n+ 'font-size-monospace-large',\n+ documentElements\n+ );\n+ updateStyleHelper(\n+ displayDensity,\n+ 'font-size-monospace-small',\n+ documentElements\n+ );\n+ updateStyleHelper(displayDensity, 'font-size-sans-normal', documentElements);\n+ updateStyleHelper(displayDensity, 'font-size-sans-large', documentElements);\n+ updateStyleHelper(displayDensity, 'font-size-sans-small', documentElements);\n+ updateStyleHelper(displayDensity, 'line-height-data', documentElements);\n+\n+ \/\/ Sizes and paddings\/margins are all rem-based,\n+ \/\/ so update the root font-size as well when the display preference changes.\n+ const computedStyle = getComputedStyle((document.body: any));\n+ const fontSize = computedStyle.getPropertyValue(\n+ `--${displayDensity}-root-font-size`\n+ );\n+ const root = ((document.querySelector(':root'): any): HTMLElement);\n+ root.style.fontSize = fontSize;\n+}\n+\n+function updateThemeVariables(\n+ theme: Theme,\n+ documentElements: DocumentElements\n+): void {\n+ updateStyleHelper(theme, 'color-attribute-name', documentElements);\n+ updateStyleHelper(theme, 'color-attribute-name-inverted', documentElements);\n+ updateStyleHelper(theme, 'color-attribute-value', documentElements);\n+ updateStyleHelper(theme, 'color-attribute-value-inverted', documentElements);\n+ updateStyleHelper(theme, 'color-attribute-editable-value', documentElements);\n+ updateStyleHelper(theme, 'color-background', documentElements);\n+ updateStyleHelper(theme, 'color-background-hover', documentElements);\n+ updateStyleHelper(theme, 'color-background-inactive', documentElements);\n+ updateStyleHelper(theme, 'color-background-invalid', documentElements);\n+ updateStyleHelper(theme, 'color-background-selected', documentElements);\n+ updateStyleHelper(theme, 'color-border', documentElements);\n+ updateStyleHelper(theme, 'color-button-background', documentElements);\n+ updateStyleHelper(theme, 'color-button-background-focus', documentElements);\n+ updateStyleHelper(theme, 'color-button', documentElements);\n+ updateStyleHelper(theme, 'color-button-active', documentElements);\n+ updateStyleHelper(theme, 'color-button-disabled', documentElements);\n+ updateStyleHelper(theme, 'color-button-focus', documentElements);\n+ updateStyleHelper(theme, 'color-button-hover', documentElements);\n+ updateStyleHelper(\n+ theme,\n+ 'color-commit-did-not-render-fill',\n+ documentElements\n+ );\n+ updateStyleHelper(\n+ theme,\n+ 'color-commit-did-not-render-fill-text',\n+ documentElements\n+ );\n+ updateStyleHelper(\n+ theme,\n+ 'color-commit-did-not-render-pattern',\n+ documentElements\n+ );\n+ updateStyleHelper(\n+ theme,\n+ 'color-commit-did-not-render-pattern-text',\n+ documentElements\n+ );\n+ updateStyleHelper(theme, 'color-commit-gradient-0', documentElements);\n+ updateStyleHelper(theme, 'color-commit-gradient-1', documentElements);\n+ updateStyleHelper(theme, 'color-commit-gradient-2', documentElements);\n+ updateStyleHelper(theme, 'color-commit-gradient-3', documentElements);\n+ updateStyleHelper(theme, 'color-commit-gradient-4', documentElements);\n+ updateStyleHelper(theme, 'color-commit-gradient-5', documentElements);\n+ updateStyleHelper(theme, 'color-commit-gradient-6', documentElements);\n+ updateStyleHelper(theme, 'color-commit-gradient-7', documentElements);\n+ updateStyleHelper(theme, 'color-commit-gradient-8', documentElements);\n+ updateStyleHelper(theme, 'color-commit-gradient-9', documentElements);\n+ updateStyleHelper(theme, 'color-commit-gradient-text', documentElements);\n+ updateStyleHelper(theme, 'color-component-name', documentElements);\n+ updateStyleHelper(theme, 'color-component-name-inverted', documentElements);\n+ updateStyleHelper(\n+ theme,\n+ 'color-component-badge-background',\n+ documentElements\n+ );\n+ updateStyleHelper(\n+ theme,\n+ 'color-component-badge-background-inverted',\n+ documentElements\n+ );\n+ updateStyleHelper(theme, 'color-component-badge-count', documentElements);\n+ updateStyleHelper(\n+ theme,\n+ 'color-component-badge-count-inverted',\n+ documentElements\n+ );\n+ updateStyleHelper(theme, 'color-dim', documentElements);\n+ updateStyleHelper(theme, 'color-dimmer', documentElements);\n+ updateStyleHelper(theme, 'color-dimmest', documentElements);\n+ updateStyleHelper(theme, 'color-expand-collapse-toggle', documentElements);\n+ updateStyleHelper(theme, 'color-modal-background', documentElements);\n+ updateStyleHelper(theme, 'color-record-active', documentElements);\n+ updateStyleHelper(theme, 'color-record-hover', documentElements);\n+ updateStyleHelper(theme, 'color-record-inactive', documentElements);\n+ updateStyleHelper(theme, 'color-color-scroll-thumb', documentElements);\n+ updateStyleHelper(theme, 'color-color-scroll-track', documentElements);\n+ updateStyleHelper(theme, 'color-search-match', documentElements);\n+ updateStyleHelper(theme, 'color-shadow', documentElements);\n+ updateStyleHelper(theme, 'color-search-match-current', documentElements);\n+ updateStyleHelper(\n+ theme,\n+ 'color-selected-tree-highlight-active',\n+ documentElements\n+ );\n+ updateStyleHelper(\n+ theme,\n+ 'color-selected-tree-highlight-inactive',\n+ documentElements\n+ );\n+ updateStyleHelper(theme, 'color-tab-selected-border', documentElements);\n+ updateStyleHelper(theme, 'color-text', documentElements);\n+ updateStyleHelper(theme, 'color-text-invalid', documentElements);\n+ updateStyleHelper(theme, 'color-text-selected', documentElements);\n+ updateStyleHelper(theme, 'color-toggle-background-invalid', documentElements);\n+ updateStyleHelper(theme, 'color-toggle-background-on', documentElements);\n+ updateStyleHelper(theme, 'color-toggle-background-off', documentElements);\n+ updateStyleHelper(theme, 'color-toggle-text', documentElements);\n+ updateStyleHelper(theme, 'color-tooltip-background', documentElements);\n+ updateStyleHelper(theme, 'color-tooltip-text', documentElements);\n+\n+ \/\/ Font smoothing varies based on the theme.\n+ updateStyleHelper(theme, 'font-smoothing', documentElements);\n+\n+ \/\/ Update scrollbar color to match theme.\n+ \/\/ this CSS property is currently only supported in Firefox,\n+ \/\/ but it makes a significant UI improvement in dark mode.\n+ \/\/ https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/scrollbar-color\n+ documentElements.forEach(documentElement => {\n+ \/\/ $FlowFixMe scrollbarColor is missing in CSSStyleDeclaration\n+ documentElement.style.scrollbarColor = `var(${`--${theme}-color-scroll-thumb`}) var(${`--${theme}-color-scroll-track`})`;\n+ });\n+}\n+\n+export { SettingsContext, SettingsContextController };\ndiff --git a\/src\/devtools\/views\/Settings\/SettingsModal.css b\/src\/devtools\/views\/Settings\/SettingsModal.css\nnew file mode 100644\nindex 0000000000..af400ba916\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Settings\/SettingsModal.css\n@@ -0,0 +1,45 @@\n+.Background {\n+ position: absolute;\n+ z-index: 3;\n+ width: 100%;\n+ top: 0;\n+ bottom: 0;\n+ background-color: var(--color-modal-background);\n+ display: flex;\n+ align-items: flex-start;\n+ justify-content: center;\n+ font-size: var(--font-size-sans-normal);\n+ padding: 1rem;\n+}\n+\n+.Modal {\n+ display: flex;\n+ flex-direction: column;\n+ flex: 0 1 auto;\n+ max-height: 100%;\n+ background-color: var(--color-background);\n+ border: 1px solid var(--color-border);\n+ box-shadow: 0 2px 4px var(--color-shadow);\n+ border-radius: 0.25rem;\n+ overflow: auto;\n+ width: 400px;\n+ max-width: 100%;\n+}\n+\n+.Spacer {\n+ flex: 1;\n+}\n+\n+.Tabs {\n+ display: flex;\n+ flex-direction: row;\n+ border-bottom: 1px solid var(--color-border);\n+ padding-right: 0.25rem;\n+ flex: 0 0 auto;\n+}\n+\n+.Content {\n+ padding: 0.5rem;\n+ flex: 0 1 auto;\n+ overflow: auto;\n+}\ndiff --git a\/src\/devtools\/views\/Settings\/SettingsModal.js b\/src\/devtools\/views\/Settings\/SettingsModal.js\nnew file mode 100644\nindex 0000000000..ae972e70f4\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Settings\/SettingsModal.js\n@@ -0,0 +1,133 @@\n+\/\/ @flow\n+\n+import React, {\n+ useCallback,\n+ useContext,\n+ useEffect,\n+ useMemo,\n+ useRef,\n+} from 'react';\n+import { SettingsModalContext } from '.\/SettingsModalContext';\n+import Store from 'src\/devtools\/store';\n+import Button from '..\/Button';\n+import ButtonIcon from '..\/ButtonIcon';\n+import TabBar from '..\/TabBar';\n+import { StoreContext } from '..\/context';\n+import {\n+ useLocalStorage,\n+ useModalDismissSignal,\n+ useSubscription,\n+} from '..\/hooks';\n+import ComponentsSettings from '.\/ComponentsSettings';\n+import GeneralSettings from '.\/GeneralSettings';\n+import ProfilerSettings from '.\/ProfilerSettings';\n+\n+import styles from '.\/SettingsModal.css';\n+\n+type TabID = 'general' | 'components' | 'profiler';\n+\n+export default function SettingsModal(_: {||}) {\n+ const { isModalShowing, setIsModalShowing } = useContext(\n+ SettingsModalContext\n+ );\n+ const store = useContext(StoreContext);\n+ const { profilerStore } = store;\n+\n+ \/\/ Updating preferences while profiling is in progress could break things (e.g. filtering)\n+ \/\/ Explicitly disallow it for now.\n+ const isProfilingSubscription = useMemo(\n+ () => ({\n+ getCurrentValue: () => profilerStore.isProfiling,\n+ subscribe: (callback: Function) => {\n+ profilerStore.addListener('isProfiling', callback);\n+ return () => profilerStore.removeListener('isProfiling', callback);\n+ },\n+ }),\n+ [profilerStore]\n+ );\n+ const isProfiling = useSubscription<boolean, Store>(isProfilingSubscription);\n+ if (isProfiling && isModalShowing) {\n+ setIsModalShowing(false);\n+ }\n+\n+ if (!isModalShowing) {\n+ return null;\n+ }\n+\n+ return <SettingsModalImpl \/>;\n+}\n+\n+function SettingsModalImpl(_: {||}) {\n+ const { setIsModalShowing } = useContext(SettingsModalContext);\n+ const dismissModal = useCallback(() => setIsModalShowing(false), [\n+ setIsModalShowing,\n+ ]);\n+\n+ const [selectedTabID, selectTab] = useLocalStorage<TabID>(\n+ 'React::DevTools::selectedSettingsTabID',\n+ 'general'\n+ );\n+\n+ const modalRef = useRef<HTMLDivElement | null>(null);\n+ useModalDismissSignal(modalRef, dismissModal);\n+\n+ useEffect(() => {\n+ if (modalRef.current !== null) {\n+ modalRef.current.focus();\n+ }\n+ }, [modalRef]);\n+\n+ let view = null;\n+ switch (selectedTabID) {\n+ case 'general':\n+ view = <GeneralSettings \/>;\n+ break;\n+ case 'profiler':\n+ view = <ProfilerSettings \/>;\n+ break;\n+ case 'components':\n+ view = <ComponentsSettings \/>;\n+ break;\n+ default:\n+ break;\n+ }\n+\n+ return (\n+ <div className={styles.Background}>\n+ <div className={styles.Modal} ref={modalRef}>\n+ <div className={styles.Tabs}>\n+ <TabBar\n+ currentTab={selectedTabID}\n+ id=\"Settings\"\n+ selectTab={selectTab}\n+ tabs={tabs}\n+ type=\"settings\"\n+ \/>\n+ <div className={styles.Spacer} \/>\n+ <Button onClick={dismissModal} title=\"Close settings dialog\">\n+ <ButtonIcon type=\"close\" \/>\n+ <\/Button>\n+ <\/div>\n+ <div className={styles.Content}>{view}<\/div>\n+ <\/div>\n+ <\/div>\n+ );\n+}\n+\n+const tabs = [\n+ {\n+ id: 'general',\n+ icon: 'settings',\n+ label: 'General',\n+ },\n+ {\n+ id: 'components',\n+ icon: 'components',\n+ label: 'Components',\n+ },\n+ {\n+ id: 'profiler',\n+ icon: 'profiler',\n+ label: 'Profiler',\n+ },\n+];\ndiff --git a\/src\/devtools\/views\/Settings\/SettingsModalContext.js b\/src\/devtools\/views\/Settings\/SettingsModalContext.js\nnew file mode 100644\nindex 0000000000..1b214f37f6\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Settings\/SettingsModalContext.js\n@@ -0,0 +1,35 @@\n+\/\/ @flow\n+\n+import React, { createContext, useMemo, useState } from 'react';\n+\n+export type DisplayDensity = 'comfortable' | 'compact';\n+export type Theme = 'auto' | 'light' | 'dark';\n+\n+type Context = {\n+ isModalShowing: boolean,\n+ setIsModalShowing: (value: boolean) => void,\n+};\n+\n+const SettingsModalContext = createContext<Context>(((null: any): Context));\n+SettingsModalContext.displayName = 'SettingsModalContext';\n+\n+function SettingsModalContextController({\n+ children,\n+}: {|\n+ children: React$Node,\n+|}) {\n+ const [isModalShowing, setIsModalShowing] = useState<boolean>(false);\n+\n+ const value = useMemo(() => ({ isModalShowing, setIsModalShowing }), [\n+ isModalShowing,\n+ setIsModalShowing,\n+ ]);\n+\n+ return (\n+ <SettingsModalContext.Provider value={value}>\n+ {children}\n+ <\/SettingsModalContext.Provider>\n+ );\n+}\n+\n+export { SettingsModalContext, SettingsModalContextController };\ndiff --git a\/src\/devtools\/views\/Settings\/SettingsModalContextToggle.js b\/src\/devtools\/views\/Settings\/SettingsModalContextToggle.js\nnew file mode 100644\nindex 0000000000..5124cdb168\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Settings\/SettingsModalContextToggle.js\n@@ -0,0 +1,43 @@\n+\/\/ @flow\n+\n+import React, { useCallback, useContext, useMemo } from 'react';\n+import { SettingsModalContext } from '.\/SettingsModalContext';\n+import Button from '..\/Button';\n+import ButtonIcon from '..\/ButtonIcon';\n+import { StoreContext } from '..\/context';\n+import { useSubscription } from '..\/hooks';\n+import Store from 'src\/devtools\/store';\n+\n+export default function SettingsModalContextToggle() {\n+ const { setIsModalShowing } = useContext(SettingsModalContext);\n+ const store = useContext(StoreContext);\n+ const { profilerStore } = store;\n+\n+ const showFilterModal = useCallback(() => setIsModalShowing(true), [\n+ setIsModalShowing,\n+ ]);\n+\n+ \/\/ Updating preferences while profiling is in progress could break things (e.g. filtering)\n+ \/\/ Explicitly disallow it for now.\n+ const isProfilingSubscription = useMemo(\n+ () => ({\n+ getCurrentValue: () => profilerStore.isProfiling,\n+ subscribe: (callback: Function) => {\n+ profilerStore.addListener('isProfiling', callback);\n+ return () => profilerStore.removeListener('isProfiling', callback);\n+ },\n+ }),\n+ [profilerStore]\n+ );\n+ const isProfiling = useSubscription<boolean, Store>(isProfilingSubscription);\n+\n+ return (\n+ <Button\n+ disabled={isProfiling}\n+ onClick={showFilterModal}\n+ title=\"View settings\"\n+ >\n+ <ButtonIcon type=\"settings\" \/>\n+ <\/Button>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/Settings\/SettingsShared.css b\/src\/devtools\/views\/Settings\/SettingsShared.css\nnew file mode 100644\nindex 0000000000..bcdc427668\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Settings\/SettingsShared.css\n@@ -0,0 +1,140 @@\n+.Settings {\n+ display: flex;\n+ flex-direction: column;\n+ align-items: flex-start;\n+ justify-content: flex-start;\n+ font-family: var(--font-family-sans);\n+ font-size: var(--font-size-sans-normal);\n+}\n+\n+.Setting {\n+ margin-bottom: 0.5rem;\n+}\n+.Setting:last-of-type {\n+ margin-bottom: 0;\n+}\n+\n+.OptionGroup {\n+ display: inline-flex;\n+ flex-direction: row;\n+ align-items: center;\n+ user-select: none;\n+ margin: 0 1rem 0.5rem 0;\n+}\n+.OptionGroup:last-of-type {\n+ margin-right: 0;\n+}\n+\n+.RadioLabel {\n+ display: inline;\n+ margin-right: 0.5rem;\n+}\n+\n+.Select {\n+}\n+\n+.CheckboxOption {\n+ display: block;\n+ padding: 0 0 0.5rem;\n+}\n+\n+.HRule {\n+ height: 1px;\n+ background-color: var(--color-border);\n+ width: 100%;\n+ border: none;\n+ margin: 0.5rem 0;\n+}\n+\n+.Header {\n+ font-size: var(--font-size-sans-large);\n+ margin-top: 0.5rem;\n+}\n+\n+.ButtonIcon {\n+ margin-right: 0.25rem;\n+}\n+\n+.NoFiltersCell {\n+ padding: 0.25rem 0;\n+ color: var(--color-dim);\n+}\n+\n+.Table {\n+ min-width: 20rem;\n+ margin-top: 0.5rem;\n+ border-spacing: 0;\n+}\n+\n+.TableRow {\n+ padding-bottom: 0.5rem;\n+}\n+\n+.TableCell {\n+ padding: 0;\n+ padding-right: 0.5rem;\n+}\n+.TableCell:last-of-type {\n+ text-align: right;\n+ padding-right: 0;\n+}\n+\n+.Input {\n+ border: 1px solid var(--color-border);\n+ border-radius: 0.125rem;\n+ padding: 0.125rem;\n+}\n+\n+.InvalidRegExp,\n+.InvalidRegExp:active,\n+.InvalidRegExp:focus,\n+.InvalidRegExp:hover {\n+ color: var(--color-value-invalid);\n+}\n+\n+.ToggleOffInvalid,\n+.ToggleOnInvalid,\n+.ToggleOff,\n+.ToggleOn {\n+ border-radius: 0.75rem;\n+ width: 1rem;\n+ height: 0.625rem;\n+ display: flex;\n+ align-items: center;\n+ padding: 0.125rem;\n+}\n+.ToggleOffInvalid {\n+ background-color: var(--color-toggle-background-invalid);\n+ justify-content: flex-start;\n+}\n+.ToggleOnInvalid {\n+ background-color: var(--color-toggle-background-invalid);\n+ justify-content: flex-end;\n+}\n+.ToggleOff {\n+ background-color: var(--color-toggle-background-off);\n+ justify-content: flex-start;\n+}\n+.ToggleOn {\n+ background-color: var(--color-toggle-background-on);\n+ justify-content: flex-end;\n+}\n+\n+.ToggleInsideOff,\n+.ToggleInsideOn {\n+ border-radius: 0.375rem;\n+ width: 0.375rem;\n+ height: 0.375rem;\n+ background-color: var(--color-toggle-text);\n+}\n+\n+.ReleaseNotes {\n+ width: 100%;\n+ background-color: var(--color-background-hover);\n+ padding: 0.25rem 0.5rem;\n+ border-radius: 0.25rem;\n+}\n+\n+.ReleaseNotesLink {\n+ color: var(--color-button-active);\n+}\ndiff --git a\/src\/devtools\/views\/ShowWelcomeToTheNewDevToolsDialog.css b\/src\/devtools\/views\/ShowWelcomeToTheNewDevToolsDialog.css\nnew file mode 100644\nindex 0000000000..8168d947d2\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/ShowWelcomeToTheNewDevToolsDialog.css\n@@ -0,0 +1,26 @@\n+.Row {\n+ display: flex;\n+ flex-direction: row;\n+ align-items: center;\n+}\n+\n+.Column {\n+ display: flex;\n+ flex-direction: column;\n+ align-items: center;\n+}\n+\n+.Logo {\n+ height: 4rem;\n+ width: 4rem;\n+ margin: 1rem;\n+}\n+\n+.Title {\n+ font-size: var(--font-size-sans-large);\n+ margin-bottom: 0.5rem;\n+}\n+\n+.ReleaseNotesLink {\n+ color: var(--color-button-active);\n+}\ndiff --git a\/src\/devtools\/views\/ShowWelcomeToTheNewDevToolsDialog.js b\/src\/devtools\/views\/ShowWelcomeToTheNewDevToolsDialog.js\nnew file mode 100644\nindex 0000000000..025c3f338c\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/ShowWelcomeToTheNewDevToolsDialog.js\n@@ -0,0 +1,64 @@\n+\/\/ @flow\n+\n+import React, { Fragment, useContext, useEffect } from 'react';\n+import { unstable_batchedUpdates as batchedUpdates } from 'react-dom';\n+import { useLocalStorage } from '.\/hooks';\n+import { ModalDialogContext } from '.\/ModalDialog';\n+import ReactLogo from '.\/ReactLogo';\n+import { CHANGE_LOG_URL } from 'src\/constants';\n+\n+import styles from '.\/ShowWelcomeToTheNewDevToolsDialog.css';\n+\n+const LOCAL_STORAGE_KEY =\n+ 'React::DevTools::hasShownWelcomeToTheNewDevToolsDialog';\n+\n+export default function ShowWelcomeToTheNewDevToolsDialog(_: {||}) {\n+ const { dispatch } = useContext(ModalDialogContext);\n+ const [\n+ hasShownWelcomeToTheNewDevToolsDialog,\n+ setHasShownWelcomeToTheNewDevToolsDialog,\n+ ] = useLocalStorage<boolean>(LOCAL_STORAGE_KEY, false);\n+\n+ useEffect(() => {\n+ if (!hasShownWelcomeToTheNewDevToolsDialog) {\n+ batchedUpdates(() => {\n+ setHasShownWelcomeToTheNewDevToolsDialog(true);\n+ dispatch({\n+ canBeDismissed: true,\n+ type: 'SHOW',\n+ content: <DialogContent \/>,\n+ });\n+ });\n+ }\n+ }, [\n+ dispatch,\n+ hasShownWelcomeToTheNewDevToolsDialog,\n+ setHasShownWelcomeToTheNewDevToolsDialog,\n+ ]);\n+\n+ return null;\n+}\n+\n+function DialogContent(_: {||}) {\n+ return (\n+ <Fragment>\n+ <div className={styles.Row}>\n+ <ReactLogo className={styles.Logo} \/>\n+ <div>\n+ <div className={styles.Title}>Welcome to the new React DevTools!<\/div>\n+ <div>\n+ <a\n+ className={styles.ReleaseNotesLink}\n+ target=\"_blank\"\n+ rel=\"noopener noreferrer\"\n+ href={CHANGE_LOG_URL}\n+ >\n+ Learn more\n+ <\/a>{' '}\n+ about changes in this version.\n+ <\/div>\n+ <\/div>\n+ <\/div>\n+ <\/Fragment>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/TabBar.css b\/src\/devtools\/views\/TabBar.css\nnew file mode 100644\nindex 0000000000..a29770a0d0\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/TabBar.css\n@@ -0,0 +1,110 @@\n+.Tab,\n+.TabCurrent,\n+.TabDisabled {\n+ height: 100%;\n+ display: flex;\n+ align-items: center;\n+ cursor: pointer;\n+ border-top: 3px solid transparent;\n+ border-bottom: 3px solid transparent;\n+ user-select: none;\n+ color: var(--color-text);\n+\n+ \/* Electron drag area *\/\n+ -webkit-app-region: no-drag;\n+}\n+.Tab:hover,\n+.TabCurrent:hover {\n+ background-color: var(--color-background-hover);\n+}\n+.Tab:focus-within,\n+.TabCurrent:focus-within {\n+ background-color: var(--color-background-hover);\n+}\n+\n+.TabCurrent {\n+ border-bottom: 3px solid var(--color-tab-selected-border);\n+}\n+\n+.TabDisabled {\n+ color: var(--color-dim);\n+ cursor: default;\n+}\n+\n+.TabSizeNavigation {\n+ font-size: var(--font-size-sans-large);\n+ padding: 0.5rem 1rem;\n+}\n+.TabSizeProfiler {\n+ font-size: var(--font-size-sans-normal);\n+ padding: 0.25rem 0.5rem;\n+}\n+.TabSizeSettings {\n+ font-size: var(--font-size-sans-normal);\n+ padding: 0.25rem 0.5rem;\n+}\n+\n+.Input {\n+ width: 0;\n+ margin: 0;\n+ opacity: 0;\n+}\n+\n+.IconSizeNavigation,\n+.IconSizeProfiler,\n+.IconSizeSettings {\n+ margin-right: 0.5rem;\n+ color: var(--color-button-active);\n+}\n+\n+.IconDisabled {\n+ color: var(--color-dim);\n+}\n+\n+.IconSizeNavigation {\n+ width: 1.5rem;\n+ height: 1.5rem;\n+}\n+.IconSizeProfiler {\n+ width: 1rem;\n+ height: 1rem;\n+}\n+.IconSizeSettings {\n+ width: 1rem;\n+ height: 1rem;\n+}\n+\n+.TabLabelNavigation,\n+.TabLabelProfiler,\n+.TabLabelSettings {\n+}\n+\n+@media screen and (max-width: 525px) {\n+ .IconSizeNavigation {\n+ margin-right: 0;\n+ }\n+\n+ .TabLabelNavigation {\n+ display: none;\n+ }\n+}\n+\n+@media screen and (max-width: 900px) {\n+ .TabLabelProfiler {\n+ display: none;\n+ }\n+\n+ .IconSizeProfiler {\n+ margin-right: 0;\n+ }\n+}\n+\n+@media screen and (max-width: 400px) {\n+ .TabLabelSettings {\n+ display: none;\n+ }\n+\n+ .IconSizeSettings {\n+ margin-right: 0;\n+ }\n+}\ndiff --git a\/src\/devtools\/views\/TabBar.js b\/src\/devtools\/views\/TabBar.js\nnew file mode 100644\nindex 0000000000..e8bc6eab07\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/TabBar.js\n@@ -0,0 +1,127 @@\n+\/\/ @flow\n+\n+import classNames from 'classnames';\n+import React, { Fragment, useCallback } from 'react';\n+import Tooltip from '@reach\/tooltip';\n+import Icon from '.\/Icon';\n+\n+import styles from '.\/TabBar.css';\n+import tooltipStyles from '.\/Tooltip.css';\n+\n+import type { IconType } from '.\/Icon';\n+\n+type TabInfo = {|\n+ icon: IconType,\n+ id: string,\n+ label: string,\n+ title?: string,\n+|};\n+\n+export type Props = {|\n+ currentTab: any,\n+ disabled?: boolean,\n+ id: string,\n+ selectTab: (tabID: any) => void,\n+ tabs: Array<TabInfo>,\n+ type: 'navigation' | 'profiler' | 'settings',\n+|};\n+\n+export default function TabBar({\n+ currentTab,\n+ disabled = false,\n+ id: groupName,\n+ selectTab,\n+ tabs,\n+ type,\n+}: Props) {\n+ if (!tabs.some(tab => tab.id === currentTab)) {\n+ selectTab(tabs[0].id);\n+ }\n+\n+ const onChange = useCallback(\n+ ({ currentTarget }) => selectTab(currentTarget.value),\n+ [selectTab]\n+ );\n+\n+ const handleKeyDown = useCallback(event => {\n+ switch (event.key) {\n+ case 'ArrowDown':\n+ case 'ArrowLeft':\n+ case 'ArrowRight':\n+ case 'ArrowUp':\n+ event.stopPropagation();\n+ break;\n+ default:\n+ break;\n+ }\n+ }, []);\n+\n+ let iconSizeClassName;\n+ let tabLabelClassName;\n+ let tabSizeClassName;\n+ switch (type) {\n+ case 'navigation':\n+ iconSizeClassName = styles.IconSizeNavigation;\n+ tabLabelClassName = styles.TabLabelNavigation;\n+ tabSizeClassName = styles.TabSizeNavigation;\n+ break;\n+ case 'profiler':\n+ iconSizeClassName = styles.IconSizeProfiler;\n+ tabLabelClassName = styles.TabLabelProfiler;\n+ tabSizeClassName = styles.TabSizeProfiler;\n+ break;\n+ case 'settings':\n+ iconSizeClassName = styles.IconSizeSettings;\n+ tabLabelClassName = styles.TabLabelSettings;\n+ tabSizeClassName = styles.TabSizeSettings;\n+ break;\n+ default:\n+ throw Error(`Unsupported type \"${type}\"`);\n+ }\n+\n+ return (\n+ <Fragment>\n+ {tabs.map(({ icon, id, label, title }) => {\n+ let button = (\n+ <label\n+ className={classNames(\n+ tabSizeClassName,\n+ disabled ? styles.TabDisabled : styles.Tab,\n+ !disabled && currentTab === id ? styles.TabCurrent : null\n+ )}\n+ key={id}\n+ onKeyDown={handleKeyDown}\n+ onMouseDown={() => selectTab(id)}\n+ >\n+ <input\n+ type=\"radio\"\n+ className={styles.Input}\n+ checked={currentTab === id}\n+ disabled={disabled}\n+ name={groupName}\n+ value={id}\n+ onChange={onChange}\n+ \/>\n+ <Icon\n+ className={`${\n+ disabled ? styles.IconDisabled : ''\n+ } ${iconSizeClassName}`}\n+ type={icon}\n+ \/>\n+ <span className={tabLabelClassName}>{label}<\/span>\n+ <\/label>\n+ );\n+\n+ if (title) {\n+ button = (\n+ <Tooltip key={id} className={tooltipStyles.Tooltip} label={title}>\n+ {button}\n+ <\/Tooltip>\n+ );\n+ }\n+\n+ return button;\n+ })}\n+ <\/Fragment>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/Toggle.css b\/src\/devtools\/views\/Toggle.css\nnew file mode 100644\nindex 0000000000..a5f273bda4\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Toggle.css\n@@ -0,0 +1,54 @@\n+.ToggleDisabled,\n+.ToggleOn,\n+.ToggleOff {\n+ background: var(--color-button-background);\n+ border: none;\n+ border-radius: 0.25rem;\n+ padding: 0;\n+ flex: 0 0 auto;\n+}\n+\n+.ToggleContent {\n+ display: inline-flex;\n+ align-items: center;\n+ border-radius: 0.25rem;\n+ padding: 0.25rem;\n+}\n+\n+.ToggleOff {\n+ border: none;\n+ background: var(--color-button-background);\n+ color: var(--color-button);\n+}\n+.ToggleOff:hover {\n+ color: var(--color-button-hover);\n+}\n+\n+.ToggleOn,\n+.ToggleOn:active {\n+ color: var(--color-button-active);\n+ outline: none;\n+}\n+\n+.ToggleOn:focus,\n+.ToggleOff:focus,\n+.ToggleContent:focus {\n+ outline: none;\n+}\n+\n+.ToggleOn:focus > .ToggleContent,\n+.ToggleOff:focus > .ToggleContent {\n+ background: var(--color-button-background-focus);\n+}\n+\n+.ToggleDisabled {\n+ background: var(--color-button-background);\n+ color: var(--color-button-disabled);\n+ cursor: default;\n+}\n+\n+.Input {\n+ width: 0;\n+ margin: 0;\n+ opacity: 0;\n+}\ndiff --git a\/src\/devtools\/views\/Toggle.js b\/src\/devtools\/views\/Toggle.js\nnew file mode 100644\nindex 0000000000..5780c7f28c\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Toggle.js\n@@ -0,0 +1,61 @@\n+\/\/ @flow\n+\n+import React, { useCallback } from 'react';\n+import Tooltip from '@reach\/tooltip';\n+\n+import styles from '.\/Toggle.css';\n+import tooltipStyles from '.\/Tooltip.css';\n+\n+type Props = {\n+ children: React$Node,\n+ className?: string,\n+ isChecked: boolean,\n+ isDisabled?: boolean,\n+ onChange: (isChecked: boolean) => void,\n+ title?: string,\n+};\n+\n+export default function Toggle({\n+ children,\n+ className = '',\n+ isDisabled = false,\n+ isChecked,\n+ onChange,\n+ title,\n+}: Props) {\n+ let defaultClassName;\n+ if (isDisabled) {\n+ defaultClassName = styles.ToggleDisabled;\n+ } else if (isChecked) {\n+ defaultClassName = styles.ToggleOn;\n+ } else {\n+ defaultClassName = styles.ToggleOff;\n+ }\n+\n+ const handleClick = useCallback(() => onChange(!isChecked), [\n+ isChecked,\n+ onChange,\n+ ]);\n+\n+ let toggle = (\n+ <button\n+ className={`${defaultClassName} ${className}`}\n+ disabled={isDisabled}\n+ onClick={handleClick}\n+ >\n+ <span className={styles.ToggleContent} tabIndex={-1}>\n+ {children}\n+ <\/span>\n+ <\/button>\n+ );\n+\n+ if (title) {\n+ toggle = (\n+ <Tooltip className={tooltipStyles.Tooltip} label={title}>\n+ {toggle}\n+ <\/Tooltip>\n+ );\n+ }\n+\n+ return toggle;\n+}\ndiff --git a\/src\/devtools\/views\/Tooltip.css b\/src\/devtools\/views\/Tooltip.css\nnew file mode 100644\nindex 0000000000..e8724b3855\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Tooltip.css\n@@ -0,0 +1,11 @@\n+.Tooltip {\n+ border: none;\n+ border-radius: 0.25rem;\n+ padding: 0.25rem 0.5rem;\n+ font-size: 12px;\n+ background-color: var(--color-tooltip-background);\n+ color: var(--color-tooltip-text);\n+\n+ \/* Make sure this is above the DevTools, which are above the Overlay *\/\n+ z-index: 10000002;\n+}\ndiff --git a\/src\/devtools\/views\/WarnIfLegacyBackendDetected.css b\/src\/devtools\/views\/WarnIfLegacyBackendDetected.css\nnew file mode 100644\nindex 0000000000..e1c3817309\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/WarnIfLegacyBackendDetected.css\n@@ -0,0 +1,6 @@\n+.Command {\n+ background-color: var(--color-dimmest);\n+ padding: 0.25rem 0.5rem;\n+ display: block;\n+ border-radius: 0.125rem;\n+}\ndiff --git a\/src\/devtools\/views\/WarnIfLegacyBackendDetected.js b\/src\/devtools\/views\/WarnIfLegacyBackendDetected.js\nnew file mode 100644\nindex 0000000000..466c9ba1bd\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/WarnIfLegacyBackendDetected.js\n@@ -0,0 +1,76 @@\n+\/\/ @flow\n+\n+import React, { Fragment, useContext, useEffect } from 'react';\n+import { BridgeContext } from '.\/context';\n+import { ModalDialogContext } from '.\/ModalDialog';\n+\n+import styles from '.\/WarnIfLegacyBackendDetected.css';\n+\n+export default function WarnIfLegacyBackendDetected(_: {||}) {\n+ const bridge = useContext(BridgeContext);\n+ const { dispatch } = useContext(ModalDialogContext);\n+\n+ \/\/ Detect pairing with legacy v3 backend.\n+ \/\/ We do this by listening to a message that it broadcasts but the v4 backend doesn't.\n+ \/\/ In this case the frontend should show upgrade instructions.\n+ useEffect(() => {\n+ \/\/ Wall.listen returns a cleanup function\n+ let unlisten = bridge.wall.listen(message => {\n+ switch (message.type) {\n+ case 'call':\n+ case 'event':\n+ case 'many-events':\n+ \/\/ Any of these types indicate the v3 backend.\n+ dispatch({\n+ canBeDismissed: false,\n+ type: 'SHOW',\n+ title: 'DevTools v4 is incompatible with this version of React',\n+ content: <InvalidBackendDetected \/>,\n+ });\n+\n+ \/\/ Once we've identified the backend version, it's safe to unsubscribe.\n+ if (typeof unlisten === 'function') {\n+ unlisten();\n+ unlisten = null;\n+ }\n+ break;\n+ default:\n+ break;\n+ }\n+\n+ switch (message.event) {\n+ case 'isBackendStorageAPISupported':\n+ case 'isNativeStyleEditorSupported':\n+ case 'operations':\n+ case 'overrideComponentFilters':\n+ \/\/ Any of these is sufficient to indicate a v4 backend.\n+ \/\/ Once we've identified the backend version, it's safe to unsubscribe.\n+ if (typeof unlisten === 'function') {\n+ unlisten();\n+ unlisten = null;\n+ }\n+ break;\n+ default:\n+ break;\n+ }\n+ });\n+\n+ return () => {\n+ if (typeof unlisten === 'function') {\n+ unlisten();\n+ unlisten = null;\n+ }\n+ };\n+ }, [bridge, dispatch]);\n+\n+ return null;\n+}\n+\n+function InvalidBackendDetected(_: {||}) {\n+ return (\n+ <Fragment>\n+ <p>Either upgrade React or install React DevTools v3:<\/p>\n+ <code className={styles.Command}>npm install -d react-devtools@^3<\/code>\n+ <\/Fragment>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/context.js b\/src\/devtools\/views\/context.js\nnew file mode 100644\nindex 0000000000..96c654a943\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/context.js\n@@ -0,0 +1,14 @@\n+\/\/ @flow\n+\n+import { createContext } from 'react';\n+import Store from '..\/store';\n+\n+import type { FrontendBridge } from 'src\/bridge';\n+\n+export const BridgeContext = createContext<FrontendBridge>(\n+ ((null: any): FrontendBridge)\n+);\n+BridgeContext.displayName = 'BridgeContext';\n+\n+export const StoreContext = createContext<Store>(((null: any): Store));\n+StoreContext.displayName = 'StoreContext';\ndiff --git a\/src\/devtools\/views\/hooks.js b\/src\/devtools\/views\/hooks.js\nnew file mode 100644\nindex 0000000000..abbf5bcdde\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/hooks.js\n@@ -0,0 +1,201 @@\n+\/\/ @flow\n+\n+import throttle from 'lodash.throttle';\n+import { useCallback, useEffect, useLayoutEffect, useState } from 'react';\n+import { localStorageGetItem, localStorageSetItem } from 'src\/storage';\n+\n+export function useIsOverflowing(\n+ containerRef: { current: HTMLDivElement | null },\n+ totalChildWidth: number\n+): boolean {\n+ const [isOverflowing, setIsOverflowing] = useState<boolean>(false);\n+\n+ \/\/ It's important to use a layout effect, so that we avoid showing a flash of overflowed content.\n+ useLayoutEffect(() => {\n+ if (containerRef.current === null) {\n+ return () => {};\n+ }\n+\n+ const container = ((containerRef.current: any): HTMLDivElement);\n+\n+ const handleResize = throttle(\n+ () => setIsOverflowing(container.clientWidth <= totalChildWidth),\n+ 100\n+ );\n+\n+ handleResize();\n+\n+ \/\/ It's important to listen to the ownerDocument.defaultView to support the browser extension.\n+ \/\/ Here we use portals to render individual tabs (e.g. Profiler),\n+ \/\/ and the root document might belong to a different window.\n+ const ownerWindow = container.ownerDocument.defaultView;\n+ ownerWindow.addEventListener('resize', handleResize);\n+ return () => ownerWindow.removeEventListener('resize', handleResize);\n+ }, [containerRef, totalChildWidth]);\n+\n+ return isOverflowing;\n+}\n+\n+\/\/ Forked from https:\/\/usehooks.com\/useLocalStorage\/\n+export function useLocalStorage<T>(\n+ key: string,\n+ initialValue: T | (() => T)\n+): [T, (value: T | (() => T)) => void] {\n+ const getValueFromLocalStorage = useCallback(() => {\n+ try {\n+ const item = localStorageGetItem(key);\n+ if (item != null) {\n+ return JSON.parse(item);\n+ }\n+ } catch (error) {\n+ console.log(error);\n+ }\n+ if (typeof initialValue === 'function') {\n+ return ((initialValue: any): () => T)();\n+ } else {\n+ return initialValue;\n+ }\n+ }, [initialValue, key]);\n+\n+ const [storedValue, setStoredValue] = useState(getValueFromLocalStorage);\n+\n+ const setValue = useCallback(\n+ value => {\n+ try {\n+ const valueToStore =\n+ value instanceof Function ? (value: any)(storedValue) : value;\n+ setStoredValue(valueToStore);\n+ localStorageSetItem(key, JSON.stringify(valueToStore));\n+ } catch (error) {\n+ console.log(error);\n+ }\n+ },\n+ [key, storedValue]\n+ );\n+\n+ \/\/ Listen for changes to this local storage value made from other windows.\n+ \/\/ This enables the e.g. \"⚛️ Elements\" tab to update in response to changes from \"⚛️ Settings\".\n+ useLayoutEffect(() => {\n+ const onStorage = event => {\n+ const newValue = getValueFromLocalStorage();\n+ if (key === event.key && storedValue !== newValue) {\n+ setValue(newValue);\n+ }\n+ };\n+\n+ window.addEventListener('storage', onStorage);\n+\n+ return () => {\n+ window.removeEventListener('storage', onStorage);\n+ };\n+ }, [getValueFromLocalStorage, key, storedValue, setValue]);\n+\n+ return [storedValue, setValue];\n+}\n+\n+export function useModalDismissSignal(\n+ modalRef: { current: HTMLDivElement | null },\n+ dismissCallback: () => void,\n+ dismissOnClickOutside?: boolean = true\n+): void {\n+ useEffect(() => {\n+ if (modalRef.current === null) {\n+ return () => {};\n+ }\n+\n+ const handleDocumentKeyDown = ({ key }: any) => {\n+ if (key === 'Escape') {\n+ dismissCallback();\n+ }\n+ };\n+\n+ const handleDocumentClick = (event: any) => {\n+ \/\/ $FlowFixMe\n+ if (\n+ modalRef.current !== null &&\n+ !modalRef.current.contains(event.target)\n+ ) {\n+ event.stopPropagation();\n+ event.preventDefault();\n+\n+ dismissCallback();\n+ }\n+ };\n+\n+ \/\/ It's important to listen to the ownerDocument to support the browser extension.\n+ \/\/ Here we use portals to render individual tabs (e.g. Profiler),\n+ \/\/ and the root document might belong to a different window.\n+ const ownerDocument = modalRef.current.ownerDocument;\n+ ownerDocument.addEventListener('keydown', handleDocumentKeyDown);\n+ if (dismissOnClickOutside) {\n+ ownerDocument.addEventListener('click', handleDocumentClick);\n+ }\n+\n+ return () => {\n+ ownerDocument.removeEventListener('keydown', handleDocumentKeyDown);\n+ ownerDocument.removeEventListener('click', handleDocumentClick);\n+ };\n+ }, [modalRef, dismissCallback, dismissOnClickOutside]);\n+}\n+\n+\/\/ Copied from https:\/\/github.com\/facebook\/react\/pull\/15022\n+export function useSubscription<Value>({\n+ getCurrentValue,\n+ subscribe,\n+}: {|\n+ getCurrentValue: () => Value,\n+ subscribe: (callback: Function) => () => void,\n+|}): Value {\n+ const [state, setState] = useState({\n+ getCurrentValue,\n+ subscribe,\n+ value: getCurrentValue(),\n+ });\n+\n+ if (\n+ state.getCurrentValue !== getCurrentValue ||\n+ state.subscribe !== subscribe\n+ ) {\n+ setState({\n+ getCurrentValue,\n+ subscribe,\n+ value: getCurrentValue(),\n+ });\n+ }\n+\n+ useEffect(() => {\n+ let didUnsubscribe = false;\n+\n+ const checkForUpdates = () => {\n+ if (didUnsubscribe) {\n+ return;\n+ }\n+\n+ setState(prevState => {\n+ if (\n+ prevState.getCurrentValue !== getCurrentValue ||\n+ prevState.subscribe !== subscribe\n+ ) {\n+ return prevState;\n+ }\n+\n+ const value = getCurrentValue();\n+ if (prevState.value === value) {\n+ return prevState;\n+ }\n+\n+ return { ...prevState, value };\n+ });\n+ };\n+ const unsubscribe = subscribe(checkForUpdates);\n+\n+ checkForUpdates();\n+\n+ return () => {\n+ didUnsubscribe = true;\n+ unsubscribe();\n+ };\n+ }, [getCurrentValue, subscribe]);\n+\n+ return state.value;\n+}\ndiff --git a\/src\/devtools\/views\/portaledContent.js b\/src\/devtools\/views\/portaledContent.js\nnew file mode 100644\nindex 0000000000..546524b695\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/portaledContent.js\n@@ -0,0 +1,25 @@\n+\/\/ @flow\n+\n+import React from 'react';\n+import { createPortal } from 'react-dom';\n+import ErrorBoundary from '.\/ErrorBoundary';\n+\n+export type Props = {\n+ portalContainer?: Element,\n+};\n+\n+export default function portaledContent(\n+ Component: React$StatelessFunctionalComponent<any>\n+): React$StatelessFunctionalComponent<any> {\n+ return function PortaledContent({ portalContainer, ...rest }: Props) {\n+ const children = (\n+ <ErrorBoundary>\n+ <Component {...rest} \/>\n+ <\/ErrorBoundary>\n+ );\n+\n+ return portalContainer != null\n+ ? createPortal(children, portalContainer)\n+ : children;\n+ };\n+}\ndiff --git a\/src\/devtools\/views\/root.css b\/src\/devtools\/views\/root.css\nnew file mode 100644\nindex 0000000000..eb5812ca6c\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/root.css\n@@ -0,0 +1,178 @@\n+:root {\n+ \/**\n+ * IMPORTANT: When new theme variables are added below– also add them to SettingsContext updateThemeVariables()\n+ *\/\n+\n+ \/* Light theme *\/\n+ --light-color-attribute-name: #ef6632;\n+ --light-color-attribute-name-inverted: rgba(255, 255, 255, 0.7);\n+ --light-color-attribute-value: #1a1aa6;\n+ --light-color-attribute-value-inverted: #ffffff;\n+ --light-color-attribute-editable-value: #1a1aa6;\n+ --light-color-background: #ffffff;\n+ --light-color-background-hover: rgba(0, 136, 250, 0.1);\n+ --light-color-background-inactive: #e5e5e5;\n+ --light-color-background-invalid: #fff0f0;\n+ --light-color-background-selected: #0088fa;\n+ --light-color-button-background: #ffffff;\n+ --light-color-button-background-focus: #ededed;\n+ --light-color-button: #5f6673;\n+ --light-color-button-disabled: #cfd1d5;\n+ --light-color-button-active: #0088fa;\n+ --light-color-button-focus: #23272f;\n+ --light-color-button-hover: #23272f;\n+ --light-color-border: #eeeeee;\n+ --light-color-commit-did-not-render-fill: #cfd1d5;\n+ --light-color-commit-did-not-render-fill-text: #000000;\n+ --light-color-commit-did-not-render-pattern: #cfd1d5;\n+ --light-color-commit-did-not-render-pattern-text: #333333;\n+ --light-color-commit-gradient-0: #37afa9;\n+ --light-color-commit-gradient-1: #63b19e;\n+ --light-color-commit-gradient-2: #80b393;\n+ --light-color-commit-gradient-3: #97b488;\n+ --light-color-commit-gradient-4: #abb67d;\n+ --light-color-commit-gradient-5: #beb771;\n+ --light-color-commit-gradient-6: #cfb965;\n+ --light-color-commit-gradient-7: #dfba57;\n+ --light-color-commit-gradient-8: #efbb49;\n+ --light-color-commit-gradient-9: #febc38;\n+ --light-color-commit-gradient-text: #000000;\n+ --light-color-component-name: #6a51b2;\n+ --light-color-component-name-inverted: #ffffff;\n+ --light-color-component-badge-background: rgba(0, 0, 0, 0.1);\n+ --light-color-component-badge-background-inverted: rgba(255, 255, 255, 0.25);\n+ --light-color-component-badge-count: #777d88;\n+ --light-color-component-badge-count-inverted: rgba(255, 255, 255, 0.7);\n+ --light-color-dim: #777d88;\n+ --light-color-dimmer: #cfd1d5;\n+ --light-color-dimmest: #eff0f1;\n+ --light-color-expand-collapse-toggle: #777d88;\n+ --light-color-modal-background: rgba(255, 255, 255, 0.75);\n+ --light-color-record-active: #fc3a4b;\n+ --light-color-record-hover: #3578e5;\n+ --light-color-record-inactive: #0088fa;\n+ --light-color-scroll-thumb: #c2c2c2;\n+ --light-color-scroll-track: #fafafa;\n+ --light-color-search-match: yellow;\n+ --light-color-search-match-current: #f7923b;\n+ --light-color-selected-tree-highlight-active: rgba(0, 136, 250, 0.1);\n+ --light-color-selected-tree-highlight-inactive: rgba(0, 0, 0, 0.05);\n+ --light-color-shadow: rgba(0, 0, 0, 0.25);\n+ --light-color-tab-selected-border: #0088fa;\n+ --light-color-text: #000000;\n+ --light-color-text-invalid: #ff0000;\n+ --light-color-text-selected: #ffffff;\n+ --light-color-toggle-background-invalid: #fc3a4b;\n+ --light-color-toggle-background-on: #0088fa;\n+ --light-color-toggle-background-off: #cfd1d5;\n+ --light-color-toggle-text: #ffffff;\n+ --light-color-tooltip-background: rgba(0, 0, 0, 0.9);\n+ --light-color-tooltip-text: #ffffff;\n+\n+ \/* Dark theme *\/\n+ --dark-color-attribute-name: #9d87d2;\n+ --dark-color-attribute-name-inverted: #282828;\n+ --dark-color-attribute-value: #cedae0;\n+ --dark-color-attribute-value-inverted: #ffffff;\n+ --dark-color-attribute-editable-value: yellow;\n+ --dark-color-background: #282c34;\n+ --dark-color-background-hover: rgba(255, 255, 255, 0.1);\n+ --dark-color-background-inactive: #3d424a;\n+ --dark-color-background-invalid: #5c0000;\n+ --dark-color-background-selected: #178fb9;\n+ --dark-color-button-background: #282c34;\n+ --dark-color-button-background-focus: #3d424a;\n+ --dark-color-button: #afb3b9;\n+ --dark-color-button-active: #61dafb;\n+ --dark-color-button-disabled: #4f5766;\n+ --dark-color-button-focus: #a2e9fc;\n+ --dark-color-button-hover: #ededed;\n+ --dark-color-border: #3d424a;\n+ --dark-color-commit-did-not-render-fill: #777d88;\n+ --dark-color-commit-did-not-render-fill-text: #000000;\n+ --dark-color-commit-did-not-render-pattern: #666c77;\n+ --dark-color-commit-did-not-render-pattern-text: #ffffff;\n+ --dark-color-commit-gradient-0: #37afa9;\n+ --dark-color-commit-gradient-1: #63b19e;\n+ --dark-color-commit-gradient-2: #80b393;\n+ --dark-color-commit-gradient-3: #97b488;\n+ --dark-color-commit-gradient-4: #abb67d;\n+ --dark-color-commit-gradient-5: #beb771;\n+ --dark-color-commit-gradient-6: #cfb965;\n+ --dark-color-commit-gradient-7: #dfba57;\n+ --dark-color-commit-gradient-8: #efbb49;\n+ --dark-color-commit-gradient-9: #febc38;\n+ --dark-color-commit-gradient-text: #000000;\n+ --dark-color-component-name: #61dafb;\n+ --dark-color-component-name-inverted: #282828;\n+ --dark-color-component-badge-background: rgba(255, 255, 255, 0.25);\n+ --dark-color-component-badge-background-inverted: rgba(0, 0, 0, 0.25);\n+ --dark-color-component-badge-count: #8f949d;\n+ --dark-color-component-badge-count-inverted: rgba(255, 255, 255, 0.7);\n+ --dark-color-dim: #8f949d;\n+ --dark-color-dimmer: #777d88;\n+ --dark-color-dimmest: #4f5766;\n+ --dark-color-expand-collapse-toggle: #8f949d;\n+ --dark-color-modal-background: rgba(0, 0, 0, 0.75);\n+ --dark-color-record-active: #fc3a4b;\n+ --dark-color-record-hover: #a2e9fc;\n+ --dark-color-record-inactive: #61dafb;\n+ --dark-color-scroll-thumb: #afb3b9;\n+ --dark-color-scroll-track: #313640;\n+ --dark-color-search-match: yellow;\n+ --dark-color-search-match-current: #f7923b;\n+ --dark-color-selected-tree-highlight-active: rgba(23, 143, 185, 0.15);\n+ --dark-color-selected-tree-highlight-inactive: rgba(255, 255, 255, 0.05);\n+ --dark-color-shadow: rgba(0, 0, 0, 0.5);\n+ --dark-color-tab-selected-border: #178fb9;\n+ --dark-color-text: #ffffff;\n+ --dark-color-text-invalid: #ff8080;\n+ --dark-color-text-selected: #ffffff;\n+ --dark-color-toggle-background-invalid: #fc3a4b;\n+ --dark-color-toggle-background-on: #178fb9;\n+ --dark-color-toggle-background-off: #777d88;\n+ --dark-color-toggle-text: #ffffff;\n+ --dark-color-tooltip-background: rgba(255, 255, 255, 0.9);\n+ --dark-color-tooltip-text: #000000;\n+\n+ \/* Font smoothing *\/\n+ --light-font-smoothing: auto;\n+ --dark-font-smoothing: antialiased;\n+ --font-smoothing: auto;\n+\n+ \/* Compact density *\/\n+ --compact-font-size-monospace-small: 9px;\n+ --compact-font-size-monospace-normal: 11px;\n+ --compact-font-size-monospace-large: 15px;\n+ --compact-font-size-sans-small: 10px;\n+ --compact-font-size-sans-normal: 12px;\n+ --compact-font-size-sans-large: 14px;\n+ --compact-line-height-data: 18px;\n+ --compact-root-font-size: 16px;\n+\n+ \/* Comfortable density *\/\n+ --comfortable-font-size-monospace-small: 10px;\n+ --comfortable-font-size-monospace-normal: 13px;\n+ --comfortable-font-size-monospace-large: 17px;\n+ --comfortable-font-size-sans-small: 12px;\n+ --comfortable-font-size-sans-normal: 14px;\n+ --comfortable-font-size-sans-large: 16px;\n+ --comfortable-line-height-data: 22px;\n+ --comfortable-root-font-size: 20px;\n+\n+ \/* GitHub.com system fonts *\/\n+ --font-family-monospace: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo,\n+ Courier, monospace;\n+ --font-family-sans: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica,\n+ Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;\n+\n+ \/* Constant values shared between JS and CSS *\/\n+ --interaction-commit-size: 10px;\n+ --interaction-label-width: 200px;\n+}\n+\n+* {\n+ box-sizing: border-box;\n+\n+ -webkit-font-smoothing: var(--font-smoothing);\n+}\ndiff --git a\/src\/devtools\/views\/utils.js b\/src\/devtools\/views\/utils.js\nnew file mode 100644\nindex 0000000000..f5bf15371f\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/utils.js\n@@ -0,0 +1,190 @@\n+\/\/ @flow\n+\n+import escapeStringRegExp from 'escape-string-regexp';\n+import { meta } from '..\/..\/hydration';\n+\n+import type { HooksTree } from 'src\/backend\/types';\n+\n+export function createRegExp(string: string): RegExp {\n+ \/\/ Allow \/regex\/ syntax with optional last \/\n+ if (string[0] === '\/') {\n+ \/\/ Cut off first slash\n+ string = string.substring(1);\n+ \/\/ Cut off last slash, but only if it's there\n+ if (string[string.length - 1] === '\/') {\n+ string = string.substring(0, string.length - 1);\n+ }\n+ try {\n+ return new RegExp(string, 'i');\n+ } catch (err) {\n+ \/\/ Bad regex. Make it not match anything.\n+ \/\/ TODO: maybe warn in console?\n+ return new RegExp('.^');\n+ }\n+ }\n+\n+ function isLetter(char: string) {\n+ return char.toLowerCase() !== char.toUpperCase();\n+ }\n+\n+ function matchAnyCase(char: string) {\n+ if (!isLetter(char)) {\n+ \/\/ Don't mess with special characters like [.\n+ return char;\n+ }\n+ return '[' + char.toLowerCase() + char.toUpperCase() + ']';\n+ }\n+\n+ \/\/ 'item' should match 'Item' and 'ListItem', but not 'InviteMom'.\n+ \/\/ To do this, we'll slice off 'tem' and check first letter separately.\n+ const escaped = escapeStringRegExp(string);\n+ const firstChar = escaped[0];\n+ let restRegex = '';\n+ \/\/ For 'item' input, restRegex becomes '[tT][eE][mM]'\n+ \/\/ We can't simply make it case-insensitive because first letter case matters.\n+ for (let i = 1; i < escaped.length; i++) {\n+ restRegex += matchAnyCase(escaped[i]);\n+ }\n+\n+ if (!isLetter(firstChar)) {\n+ \/\/ We can't put a non-character like [ in a group\n+ \/\/ so we fall back to the simple case.\n+ return new RegExp(firstChar + restRegex);\n+ }\n+\n+ \/\/ Construct a smarter regex.\n+ return new RegExp(\n+ \/\/ For example:\n+ \/\/ (^[iI]|I)[tT][eE][mM]\n+ \/\/ Matches:\n+ \/\/ 'Item'\n+ \/\/ 'ListItem'\n+ \/\/ but not 'InviteMom'\n+ '(^' +\n+ matchAnyCase(firstChar) +\n+ '|' +\n+ firstChar.toUpperCase() +\n+ ')' +\n+ restRegex\n+ );\n+}\n+\n+export function getMetaValueLabel(data: Object): string | null {\n+ const name = data[meta.name];\n+ const type = data[meta.type];\n+\n+ switch (type) {\n+ case 'html_element':\n+ return name ? `<${name.toLowerCase()} \/>` : '';\n+ case 'react_element':\n+ return `<${name} \/>`;\n+ case 'function':\n+ return `${name || 'fn'}()`;\n+ case 'object':\n+ return 'Object';\n+ case 'date':\n+ case 'symbol':\n+ return name;\n+ case 'iterator':\n+ return `${name}(…)`;\n+ case 'array_buffer':\n+ case 'data_view':\n+ case 'array':\n+ case 'typed_array':\n+ return `${name}[${data[meta.size]}]`;\n+ default:\n+ return null;\n+ }\n+}\n+\n+function sanitize(data: Object): void {\n+ for (const key in data) {\n+ const value = data[key];\n+\n+ if (value && value[meta.type]) {\n+ data[key] = getMetaValueLabel(value);\n+ } else if (value != null) {\n+ if (Array.isArray(value)) {\n+ sanitize(value);\n+ } else if (typeof value === 'object') {\n+ sanitize(value);\n+ }\n+ }\n+ }\n+}\n+\n+export function serializeDataForCopy(props: Object): string {\n+ const cloned = Object.assign({}, props);\n+\n+ sanitize(cloned);\n+\n+ try {\n+ return JSON.stringify(cloned, null, 2);\n+ } catch (error) {\n+ return '';\n+ }\n+}\n+\n+export function serializeHooksForCopy(hooks: HooksTree | null): string {\n+ \/\/ $FlowFixMe \"HooksTree is not an object\"\n+ const cloned = Object.assign([], hooks);\n+\n+ const queue = [...cloned];\n+\n+ while (queue.length > 0) {\n+ const current = queue.pop();\n+\n+ \/\/ These aren't meaningful\n+ delete current.id;\n+ delete current.isStateEditable;\n+\n+ if (current.subHooks.length > 0) {\n+ queue.push(...current.subHooks);\n+ }\n+ }\n+\n+ sanitize(cloned);\n+\n+ try {\n+ return JSON.stringify(cloned, null, 2);\n+ } catch (error) {\n+ return '';\n+ }\n+}\n+\n+\/\/ Keeping this in memory seems to be enough to enable the browser to download larger profiles.\n+\/\/ Without this, we would see a \"Download failed: network error\" failure.\n+let downloadUrl = null;\n+\n+export function downloadFile(filename: string, text: string): void {\n+ const blob = new Blob([text], { type: 'text\/plain;charset=utf-8' });\n+\n+ if (downloadUrl !== null) {\n+ URL.revokeObjectURL(downloadUrl);\n+ }\n+\n+ downloadUrl = URL.createObjectURL(blob);\n+\n+ const element = document.createElement('a');\n+ element.setAttribute('href', downloadUrl);\n+ element.setAttribute('download', filename);\n+ element.style.display = 'none';\n+ ((document.body: any): HTMLBodyElement).appendChild(element);\n+\n+ element.click();\n+\n+ ((document.body: any): HTMLBodyElement).removeChild(element);\n+}\n+\n+export function truncateText(text: string, maxLength: number): string {\n+ const { length } = text;\n+ if (length > maxLength) {\n+ return (\n+ text.substr(0, Math.floor(maxLength \/ 2)) +\n+ '…' +\n+ text.substr(length - Math.ceil(maxLength \/ 2) - 1)\n+ );\n+ } else {\n+ return text;\n+ }\n+}\ndiff --git a\/src\/hook.js b\/src\/hook.js\nnew file mode 100644\nindex 0000000000..3e9e55d035\n--- \/dev\/null\n+++ b\/src\/hook.js\n@@ -0,0 +1,312 @@\n+\/**\n+ * Install the hook on window, which is an event emitter.\n+ * Note because Chrome content scripts cannot directly modify the window object,\n+ * we are evaling this function by inserting a script tag.\n+ * That's why we have to inline the whole event emitter implementation here.\n+ *\n+ * @flow\n+ *\/\n+\n+import {\n+ patch as patchConsole,\n+ registerRenderer as registerRendererWithConsole,\n+} from '.\/backend\/console';\n+\n+import type { DevToolsHook } from 'src\/backend\/types';\n+\n+declare var window: any;\n+\n+export function installHook(target: any): DevToolsHook | null {\n+ if (target.hasOwnProperty('__REACT_DEVTOOLS_GLOBAL_HOOK__')) return null;\n+\n+ function detectReactBuildType(renderer) {\n+ try {\n+ if (typeof renderer.version === 'string') {\n+ \/\/ React DOM Fiber (16+)\n+ if (renderer.bundleType > 0) {\n+ \/\/ This is not a production build.\n+ \/\/ We are currently only using 0 (PROD) and 1 (DEV)\n+ \/\/ but might add 2 (PROFILE) in the future.\n+ return 'development';\n+ }\n+\n+ \/\/ React 16 uses flat bundles. If we report the bundle as production\n+ \/\/ version, it means we also minified and envified it ourselves.\n+ return 'production';\n+ \/\/ Note: There is still a risk that the CommonJS entry point has not\n+ \/\/ been envified or uglified. In this case the user would have *both*\n+ \/\/ development and production bundle, but only the prod one would run.\n+ \/\/ This would be really bad. We have a separate check for this because\n+ \/\/ it happens *outside* of the renderer injection. See `checkDCE` below.\n+ }\n+\n+ const toString = Function.prototype.toString;\n+ if (renderer.Mount && renderer.Mount._renderNewRootComponent) {\n+ \/\/ React DOM Stack\n+ const renderRootCode = toString.call(\n+ renderer.Mount._renderNewRootComponent\n+ );\n+ \/\/ Filter out bad results (if that is even possible):\n+ if (renderRootCode.indexOf('function') !== 0) {\n+ \/\/ Hope for the best if we're not sure.\n+ return 'production';\n+ }\n+ \/\/ Check for React DOM Stack < 15.1.0 in development.\n+ \/\/ If it contains \"storedMeasure\" call, it's wrapped in ReactPerf (DEV only).\n+ \/\/ This would be true even if it's minified, as method name still matches.\n+ if (renderRootCode.indexOf('storedMeasure') !== -1) {\n+ return 'development';\n+ }\n+ \/\/ For other versions (and configurations) it's not so easy.\n+ \/\/ Let's quickly exclude proper production builds.\n+ \/\/ If it contains a warning message, it's either a DEV build,\n+ \/\/ or an PROD build without proper dead code elimination.\n+ if (renderRootCode.indexOf('should be a pure function') !== -1) {\n+ \/\/ Now how do we tell a DEV build from a bad PROD build?\n+ \/\/ If we see NODE_ENV, we're going to assume this is a dev build\n+ \/\/ because most likely it is referring to an empty shim.\n+ if (renderRootCode.indexOf('NODE_ENV') !== -1) {\n+ return 'development';\n+ }\n+ \/\/ If we see \"development\", we're dealing with an envified DEV build\n+ \/\/ (such as the official React DEV UMD).\n+ if (renderRootCode.indexOf('development') !== -1) {\n+ return 'development';\n+ }\n+ \/\/ I've seen process.env.NODE_ENV !== 'production' being smartly\n+ \/\/ replaced by `true` in DEV by Webpack. I don't know how that\n+ \/\/ works but we can safely guard against it because `true` was\n+ \/\/ never used in the function source since it was written.\n+ if (renderRootCode.indexOf('true') !== -1) {\n+ return 'development';\n+ }\n+ \/\/ By now either it is a production build that has not been minified,\n+ \/\/ or (worse) this is a minified development build using non-standard\n+ \/\/ environment (e.g. \"staging\"). We're going to look at whether\n+ \/\/ the function argument name is mangled:\n+ if (\n+ \/\/ 0.13 to 15\n+ renderRootCode.indexOf('nextElement') !== -1 ||\n+ \/\/ 0.12\n+ renderRootCode.indexOf('nextComponent') !== -1\n+ ) {\n+ \/\/ We can't be certain whether this is a development build or not,\n+ \/\/ but it is definitely unminified.\n+ return 'unminified';\n+ } else {\n+ \/\/ This is likely a minified development build.\n+ return 'development';\n+ }\n+ }\n+ \/\/ By now we know that it's envified and dead code elimination worked,\n+ \/\/ but what if it's still not minified? (Is this even possible?)\n+ \/\/ Let's check matches for the first argument name.\n+ if (\n+ \/\/ 0.13 to 15\n+ renderRootCode.indexOf('nextElement') !== -1 ||\n+ \/\/ 0.12\n+ renderRootCode.indexOf('nextComponent') !== -1\n+ ) {\n+ return 'unminified';\n+ }\n+ \/\/ Seems like we're using the production version.\n+ \/\/ However, the branch above is Stack-only so this is 15 or earlier.\n+ return 'outdated';\n+ }\n+ } catch (err) {\n+ \/\/ Weird environments may exist.\n+ \/\/ This code needs a higher fault tolerance\n+ \/\/ because it runs even with closed DevTools.\n+ \/\/ TODO: should we catch errors in all injected code, and not just this part?\n+ }\n+ return 'production';\n+ }\n+\n+ function checkDCE(fn: Function) {\n+ \/\/ This runs for production versions of React.\n+ \/\/ Needs to be super safe.\n+ try {\n+ const toString = Function.prototype.toString;\n+ const code = toString.call(fn);\n+\n+ \/\/ This is a string embedded in the passed function under DEV-only\n+ \/\/ condition. However the function executes only in PROD. Therefore,\n+ \/\/ if we see it, dead code elimination did not work.\n+ if (code.indexOf('^_^') > -1) {\n+ \/\/ Remember to report during next injection.\n+ hasDetectedBadDCE = true;\n+\n+ \/\/ Bonus: throw an exception hoping that it gets picked up by a reporting system.\n+ \/\/ Not synchronously so that it doesn't break the calling code.\n+ setTimeout(function() {\n+ throw new Error(\n+ 'React is running in production mode, but dead code ' +\n+ 'elimination has not been applied. Read how to correctly ' +\n+ 'configure React for production: ' +\n+ 'https:\/\/fb.me\/react-perf-use-the-production-build'\n+ );\n+ });\n+ }\n+ } catch (err) {}\n+ }\n+\n+ let uidCounter = 0;\n+\n+ function inject(renderer) {\n+ const id = ++uidCounter;\n+ renderers.set(id, renderer);\n+\n+ const reactBuildType = hasDetectedBadDCE\n+ ? 'deadcode'\n+ : detectReactBuildType(renderer);\n+\n+ \/\/ Patching the console enables DevTools to do a few useful things:\n+ \/\/ * Append component stacks to warnings and error messages\n+ \/\/ * Disable logging during re-renders to inspect hooks (see inspectHooksOfFiber)\n+ \/\/\n+ \/\/ For React Native, we intentionally patch early (during injection).\n+ \/\/ This provides React Native developers with components stacks even if they don't run DevTools.\n+ \/\/ This won't work for DOM though, since this entire file is eval'ed and inserted as a script tag.\n+ \/\/ In that case, we'll patch later (when the frontend attaches).\n+ \/\/\n+ \/\/ Don't patch in test environments because we don't want to interfere with Jest's own console overrides.\n+ if (process.env.NODE_ENV !== 'test') {\n+ try {\n+ \/\/ The installHook() function is injected by being stringified in the browser,\n+ \/\/ so imports outside of this function do not get included.\n+ \/\/\n+ \/\/ Normally we could check \"typeof patchConsole === 'function'\",\n+ \/\/ but Webpack wraps imports with an object (e.g. _backend_console__WEBPACK_IMPORTED_MODULE_0__)\n+ \/\/ and the object itself will be undefined as well for the reasons mentioned above,\n+ \/\/ so we use try\/catch instead.\n+ if (window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ !== false) {\n+ registerRendererWithConsole(renderer);\n+ patchConsole();\n+ }\n+ } catch (error) {}\n+ }\n+\n+ \/\/ If we have just reloaded to profile, we need to inject the renderer interface before the app loads.\n+ \/\/ Otherwise the renderer won't yet exist and we can skip this step.\n+ const attach = target.__REACT_DEVTOOLS_ATTACH__;\n+ if (typeof attach === 'function') {\n+ const rendererInterface = attach(hook, id, renderer, target);\n+ hook.rendererInterfaces.set(id, rendererInterface);\n+ }\n+\n+ hook.emit('renderer', { id, renderer, reactBuildType });\n+\n+ return id;\n+ }\n+\n+ let hasDetectedBadDCE = false;\n+\n+ function sub(event, fn) {\n+ hook.on(event, fn);\n+ return () => hook.off(event, fn);\n+ }\n+\n+ function on(event, fn) {\n+ if (!listeners[event]) {\n+ listeners[event] = [];\n+ }\n+ listeners[event].push(fn);\n+ }\n+\n+ function off(event, fn) {\n+ if (!listeners[event]) {\n+ return;\n+ }\n+ const index = listeners[event].indexOf(fn);\n+ if (index !== -1) {\n+ listeners[event].splice(index, 1);\n+ }\n+ if (!listeners[event].length) {\n+ delete listeners[event];\n+ }\n+ }\n+\n+ function emit(event, data) {\n+ if (listeners[event]) {\n+ listeners[event].map(fn => fn(data));\n+ }\n+ }\n+\n+ function getFiberRoots(rendererID) {\n+ const roots = fiberRoots;\n+ if (!roots[rendererID]) {\n+ roots[rendererID] = new Set();\n+ }\n+ return roots[rendererID];\n+ }\n+\n+ function onCommitFiberUnmount(rendererID, fiber) {\n+ const rendererInterface = rendererInterfaces.get(rendererID);\n+ if (rendererInterface != null) {\n+ rendererInterface.handleCommitFiberUnmount(fiber);\n+ }\n+ }\n+\n+ function onCommitFiberRoot(rendererID, root, priorityLevel) {\n+ const mountedRoots = hook.getFiberRoots(rendererID);\n+ const current = root.current;\n+ const isKnownRoot = mountedRoots.has(root);\n+ const isUnmounting =\n+ current.memoizedState == null || current.memoizedState.element == null;\n+\n+ \/\/ Keep track of mounted roots so we can hydrate when DevTools connect.\n+ if (!isKnownRoot && !isUnmounting) {\n+ mountedRoots.add(root);\n+ } else if (isKnownRoot && isUnmounting) {\n+ mountedRoots.delete(root);\n+ }\n+ const rendererInterface = rendererInterfaces.get(rendererID);\n+ if (rendererInterface != null) {\n+ rendererInterface.handleCommitFiberRoot(root, priorityLevel);\n+ }\n+ }\n+\n+ \/\/ TODO: More meaningful names for \"rendererInterfaces\" and \"renderers\".\n+ const fiberRoots = {};\n+ const rendererInterfaces = new Map();\n+ const listeners = {};\n+ const renderers = new Map();\n+\n+ const hook: DevToolsHook = {\n+ rendererInterfaces,\n+ listeners,\n+ renderers,\n+\n+ emit,\n+ getFiberRoots,\n+ inject,\n+ on,\n+ off,\n+ sub,\n+\n+ \/\/ This is a legacy flag.\n+ \/\/ React v16 checks the hook for this to ensure DevTools is new enough.\n+ supportsFiber: true,\n+\n+ \/\/ React calls these methods.\n+ checkDCE,\n+ onCommitFiberUnmount,\n+ onCommitFiberRoot,\n+ };\n+\n+ Object.defineProperty(\n+ target,\n+ '__REACT_DEVTOOLS_GLOBAL_HOOK__',\n+ ({\n+ \/\/ This property needs to be configurable for the test environment,\n+ \/\/ else we won't be able to delete and recreate it beween tests.\n+ configurable: __DEV__,\n+ enumerable: false,\n+ get() {\n+ return hook;\n+ },\n+ }: Object)\n+ );\n+\n+ return hook;\n+}\ndiff --git a\/src\/hydration.js b\/src\/hydration.js\nnew file mode 100644\nindex 0000000000..ac94f73d1c\n--- \/dev\/null\n+++ b\/src\/hydration.js\n@@ -0,0 +1,382 @@\n+\/\/ @flow\n+\n+import {\n+ isElement,\n+ typeOf,\n+ AsyncMode,\n+ ConcurrentMode,\n+ ContextConsumer,\n+ ContextProvider,\n+ ForwardRef,\n+ Fragment,\n+ Lazy,\n+ Memo,\n+ Portal,\n+ Profiler,\n+ StrictMode,\n+ Suspense,\n+} from 'react-is';\n+import { getDisplayName, getInObject, setInObject } from '.\/utils';\n+\n+export const meta = {\n+ inspectable: Symbol('inspectable'),\n+ inspected: Symbol('inspected'),\n+ name: Symbol('name'),\n+ readonly: Symbol('readonly'),\n+ size: Symbol('size'),\n+ type: Symbol('type'),\n+};\n+\n+type Dehydrated = {|\n+ inspectable: boolean,\n+ name: string | null,\n+ readonly?: boolean,\n+ size?: number,\n+ type: string,\n+|};\n+\n+\/\/ This threshold determines the depth at which the bridge \"dehydrates\" nested data.\n+\/\/ Dehydration means that we don't serialize the data for e.g. postMessage or stringify,\n+\/\/ unless the frontend explicitly requests it (e.g. a user clicks to expand a props object).\n+\/\/\n+\/\/ Reducing this threshold will improve the speed of initial component inspection,\n+\/\/ but may decrease the responsiveness of expanding objects\/arrays to inspect further.\n+const LEVEL_THRESHOLD = 2;\n+\n+type PropType =\n+ | 'array'\n+ | 'array_buffer'\n+ | 'boolean'\n+ | 'data_view'\n+ | 'date'\n+ | 'function'\n+ | 'html_element'\n+ | 'infinity'\n+ | 'iterator'\n+ | 'nan'\n+ | 'null'\n+ | 'number'\n+ | 'object'\n+ | 'react_element'\n+ | 'string'\n+ | 'symbol'\n+ | 'typed_array'\n+ | 'undefined'\n+ | 'unknown';\n+\n+\/**\n+ * Get a enhanced\/artificial type string based on the object instance\n+ *\/\n+function getDataType(data: Object): PropType {\n+ if (data === null) {\n+ return 'null';\n+ } else if (data === undefined) {\n+ return 'undefined';\n+ }\n+\n+ if (isElement(data)) {\n+ return 'react_element';\n+ }\n+\n+ if (typeof HTMLElement !== 'undefined' && data instanceof HTMLElement) {\n+ return 'html_element';\n+ }\n+\n+ const type = typeof data;\n+ switch (type) {\n+ case 'boolean':\n+ return 'boolean';\n+ case 'function':\n+ return 'function';\n+ case 'number':\n+ if (Number.isNaN(data)) {\n+ return 'nan';\n+ } else if (!Number.isFinite(data)) {\n+ return 'infinity';\n+ } else {\n+ return 'number';\n+ }\n+ case 'object':\n+ if (Array.isArray(data)) {\n+ return 'array';\n+ } else if (ArrayBuffer.isView(data)) {\n+ return data instanceof DataView ? 'data_view' : 'typed_array';\n+ } else if (data instanceof ArrayBuffer) {\n+ return 'array_buffer';\n+ } else if (typeof data[Symbol.iterator] === 'function') {\n+ return 'iterator';\n+ } else if (Object.prototype.toString.call(data) === '[object Date]') {\n+ return 'date';\n+ }\n+ return 'object';\n+ case 'string':\n+ return 'string';\n+ case 'symbol':\n+ return 'symbol';\n+ default:\n+ return 'unknown';\n+ }\n+}\n+\n+\/**\n+ * Generate the dehydrated metadata for complex object instances\n+ *\/\n+function createDehydrated(\n+ type: string,\n+ inspectable: boolean,\n+ data: Object,\n+ cleaned: Array<Array<string | number>>,\n+ path: Array<string | number>\n+): Dehydrated {\n+ cleaned.push(path);\n+\n+ const dehydrated: Dehydrated = {\n+ inspectable,\n+ type,\n+ name:\n+ !data.constructor || data.constructor.name === 'Object'\n+ ? ''\n+ : data.constructor.name,\n+ };\n+\n+ if (type === 'array' || type === 'typed_array') {\n+ dehydrated.size = data.length;\n+ } else if (type === 'object') {\n+ dehydrated.size = Object.keys(data).length;\n+ }\n+\n+ if (type === 'iterator' || type === 'typed_array') {\n+ dehydrated.readonly = true;\n+ }\n+\n+ return dehydrated;\n+}\n+\n+\/**\n+ * Strip out complex data (instances, functions, and data nested > LEVEL_THRESHOLD levels deep).\n+ * The paths of the stripped out objects are appended to the `cleaned` list.\n+ * On the other side of the barrier, the cleaned list is used to \"re-hydrate\" the cleaned representation into\n+ * an object with symbols as attributes, so that a sanitized object can be distinguished from a normal object.\n+ *\n+ * Input: {\"some\": {\"attr\": fn()}, \"other\": AnInstance}\n+ * Output: {\n+ * \"some\": {\n+ * \"attr\": {\"name\": the fn.name, type: \"function\"}\n+ * },\n+ * \"other\": {\n+ * \"name\": \"AnInstance\",\n+ * \"type\": \"object\",\n+ * },\n+ * }\n+ * and cleaned = [[\"some\", \"attr\"], [\"other\"]]\n+ *\/\n+export function dehydrate(\n+ data: Object,\n+ cleaned: Array<Array<string | number>>,\n+ path: Array<string | number>,\n+ isPathWhitelisted: (path: Array<string | number>) => boolean,\n+ level?: number = 0\n+): string | Dehydrated | { [key: string]: string | Dehydrated } {\n+ const type = getDataType(data);\n+\n+ switch (type) {\n+ case 'html_element':\n+ cleaned.push(path);\n+ return {\n+ inspectable: false,\n+ name: data.tagName,\n+ type,\n+ };\n+\n+ case 'function':\n+ cleaned.push(path);\n+ return {\n+ inspectable: false,\n+ name: data.name,\n+ type,\n+ };\n+\n+ case 'string':\n+ return data.length <= 500 ? data : data.slice(0, 500) + '...';\n+\n+ case 'symbol':\n+ cleaned.push(path);\n+ return {\n+ inspectable: false,\n+ name: data.toString(),\n+ type,\n+ };\n+\n+ \/\/ React Elements aren't very inspector-friendly,\n+ \/\/ and often contain private fields or circular references.\n+ case 'react_element':\n+ cleaned.push(path);\n+ return {\n+ inspectable: false,\n+ name: getDisplayNameForReactElement(data),\n+ type,\n+ };\n+\n+ \/\/ ArrayBuffers error if you try to inspect them.\n+ case 'array_buffer':\n+ case 'data_view':\n+ cleaned.push(path);\n+ return {\n+ inspectable: false,\n+ name: type === 'data_view' ? 'DataView' : 'ArrayBuffer',\n+ size: data.byteLength,\n+ type,\n+ };\n+\n+ case 'array':\n+ const arrayPathCheck = isPathWhitelisted(path);\n+ if (level >= LEVEL_THRESHOLD && !arrayPathCheck) {\n+ return createDehydrated(type, true, data, cleaned, path);\n+ }\n+ return data.map((item, i) =>\n+ dehydrate(\n+ item,\n+ cleaned,\n+ path.concat([i]),\n+ isPathWhitelisted,\n+ arrayPathCheck ? 1 : level + 1\n+ )\n+ );\n+\n+ case 'typed_array':\n+ case 'iterator':\n+ return createDehydrated(type, false, data, cleaned, path);\n+\n+ case 'date':\n+ cleaned.push(path);\n+ return {\n+ inspectable: false,\n+ name: data.toString(),\n+ type,\n+ };\n+\n+ case 'object':\n+ const objectPathCheck = isPathWhitelisted(path);\n+ if (level >= LEVEL_THRESHOLD && !objectPathCheck) {\n+ return createDehydrated(type, true, data, cleaned, path);\n+ } else {\n+ const object = {};\n+ for (let name in data) {\n+ object[name] = dehydrate(\n+ data[name],\n+ cleaned,\n+ path.concat([name]),\n+ isPathWhitelisted,\n+ objectPathCheck ? 1 : level + 1\n+ );\n+ }\n+ return object;\n+ }\n+\n+ case 'infinity':\n+ case 'nan':\n+ case 'undefined':\n+ \/\/ Some values are lossy when sent through a WebSocket.\n+ \/\/ We dehydrate+rehydrate them to preserve their type.\n+ cleaned.push(path);\n+ return {\n+ type,\n+ };\n+\n+ default:\n+ return data;\n+ }\n+}\n+\n+export function fillInPath(\n+ object: Object,\n+ path: Array<string | number>,\n+ value: any\n+) {\n+ const target = getInObject(object, path);\n+ if (target != null) {\n+ delete target[meta.inspectable];\n+ delete target[meta.inspected];\n+ delete target[meta.name];\n+ delete target[meta.readonly];\n+ delete target[meta.size];\n+ delete target[meta.type];\n+ }\n+ setInObject(object, path, value);\n+}\n+\n+export function hydrate(\n+ object: Object,\n+ cleaned: Array<Array<string | number>>\n+): Object {\n+ cleaned.forEach((path: Array<string | number>) => {\n+ const length = path.length;\n+ const last = path[length - 1];\n+ const parent = getInObject(object, path.slice(0, length - 1));\n+ if (!parent || !parent.hasOwnProperty(last)) {\n+ return;\n+ }\n+\n+ const value = parent[last];\n+\n+ if (value.type === 'infinity') {\n+ parent[last] = Infinity;\n+ } else if (value.type === 'nan') {\n+ parent[last] = NaN;\n+ } else if (value.type === 'undefined') {\n+ parent[last] = undefined;\n+ } else {\n+ \/\/ Replace the string keys with Symbols so they're non-enumerable.\n+ const replaced: { [key: Symbol]: boolean | string } = {};\n+ replaced[meta.inspectable] = !!value.inspectable;\n+ replaced[meta.inspected] = false;\n+ replaced[meta.name] = value.name;\n+ replaced[meta.size] = value.size;\n+ replaced[meta.readonly] = !!value.readonly;\n+ replaced[meta.type] = value.type;\n+\n+ parent[last] = replaced;\n+ }\n+ });\n+ return object;\n+}\n+\n+export function getDisplayNameForReactElement(\n+ element: React$Element<any>\n+): string | null {\n+ const elementType = typeOf(element);\n+ switch (elementType) {\n+ case AsyncMode:\n+ case ConcurrentMode:\n+ return 'ConcurrentMode';\n+ case ContextConsumer:\n+ return 'ContextConsumer';\n+ case ContextProvider:\n+ return 'ContextProvider';\n+ case ForwardRef:\n+ return 'ForwardRef';\n+ case Fragment:\n+ return 'Fragment';\n+ case Lazy:\n+ return 'Lazy';\n+ case Memo:\n+ return 'Memo';\n+ case Portal:\n+ return 'Portal';\n+ case Profiler:\n+ return 'Profiler';\n+ case StrictMode:\n+ return 'StrictMode';\n+ case Suspense:\n+ return 'Suspense';\n+ default:\n+ const { type } = element;\n+ if (typeof type === 'string') {\n+ return type;\n+ } else if (type != null) {\n+ return getDisplayName(type, 'Anonymous');\n+ } else {\n+ return 'Element';\n+ }\n+ }\n+}\ndiff --git a\/src\/node_modules\/react-window\/CHANGELOG.md b\/src\/node_modules\/react-window\/CHANGELOG.md\nnew file mode 100644\nindex 0000000000..7030d4ee8e\n--- \/dev\/null\n+++ b\/src\/node_modules\/react-window\/CHANGELOG.md\n@@ -0,0 +1,96 @@\n+Changelog\n+------------\n+\n+### 1.8.0\n+* 🎉 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))\n+\n+### 1.7.2\n+* 🐛 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).\n+\n+### 1.7.1\n+* 🐛 Fix SSR regression introduced in 1.7.0 - ([Betree](https:\/\/github.com\/Betree) - [#185](https:\/\/github.com\/bvaughn\/react-window\/pull\/185))\n+\n+### 1.7.0\n+* 🎉 Grid `scrollToItem` supports optional `rowIndex` and `columnIndex` params ([jgoz](https:\/\/github.com\/jgoz) - [#174](https:\/\/github.com\/bvaughn\/react-window\/pull\/174))\n+* 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))\n+\n+### 1.6.2\n+* 🐛 Bugfix for RTL when scrolling back towards the beginning (right) of the list.\n+\n+### 1.6.1\n+* 🐛 Bugfix to account for differences between Chrome and non-Chrome browsers with regard to RTL and \"scroll\" events.\n+\n+### 1.6.0\n+* 🎉 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)\n+* 🐛 Grid `scrollToItem` methods take scrollbar size into account when aligning items - [#153](https:\/\/github.com\/bvaughn\/react-window\/issues\/153)\n+\n+### 1.5.2\n+* 🐛 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))\n+\n+### 1.5.1\n+* 🐛 Updated `getDerivedState` Flow annotations to address a warning in a newer version of Flow.\n+\n+### 1.5.0\n+* 🎉 Added advanced memoization helpers methods `areEqual` and `shouldComponentUpdate` for item renderers. - [#114](https:\/\/github.com\/bvaughn\/react-window\/issues\/114)\n+\n+### 1.4.0\n+* 🎉 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).\n+* 🎉 Grid components now support separate `overscanColumnsCount` and `overscanRowsCount` props. Legacy `overscanCount` prop will continue to work, but with a deprecation warning in DEV mode.\n+* 🐛 Replaced `setTimeout` with `requestAnimationFrame` based timer, to avoid starvation issue for `isScrolling` reset. - [#106](https:\/\/github.com\/bvaughn\/react-window\/issues\/106)\n+* 🎉 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.\n+* 🐛 List re-renders items if `direction` prop changes. - [#104](https:\/\/github.com\/bvaughn\/react-window\/issues\/104)\n+\n+### 1.3.1\n+* 🎉 Pass `itemData` value to custom `itemKey` callbacks when present - [#90](https:\/\/github.com\/bvaughn\/react-window\/issues\/90))\n+\n+### 1.3.0\n+* (Skipped)\n+\n+### 1.2.4\n+* 🐛 Added Flow annotations to memoized methods to avoid a Flow warning for newer versions of Flow\n+\n+### 1.2.3\n+* 🐛 Relaxed `children` validation checks. They were too strict and didn't support new React APIs like `memo`.\n+\n+### 1.2.2\n+* 🐛 Improved Flow types for class component item renderers - ([nicholas-l](https:\/\/github.com\/nicholas-l) - [#77](https:\/\/github.com\/bvaughn\/react-window\/pull\/77))\n+\n+### 1.2.1\n+* 🎉 Improved Flow types to include optional `itemData` parameter. ([TrySound](https:\/\/github.com\/TrySound) - [#66](https:\/\/github.com\/bvaughn\/react-window\/pull\/66))\n+* 🐛 `VariableSizeList` and `VariableSizeGrid` no longer call size getter functions with invalid index when item count is zero.\n+\n+### 1.2.0\n+* 🎉 Flow types added to NPM package. ([TrySound](https:\/\/github.com\/TrySound) - [#40](https:\/\/github.com\/bvaughn\/react-window\/pull\/40))\n+* 🎉 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))\n+* 🐛 Fixed invalid `this` pointer in `VariableSizeGrid` that broke the `resetAfter*` methods - [#58](https:\/\/github.com\/bvaughn\/react-window\/pull\/58))\n+* 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))\n+* Remove `overflow:hidden` from inner container ([souporserious](https:\/\/github.com\/souporserious) - [#56](https:\/\/github.com\/bvaughn\/react-window\/pull\/56))\n+\n+### 1.1.2\n+* 🐛 Fixed edge case `scrollToItem` bug that caused lists\/grids with very few items to have negative scroll offsets.\n+\n+### 1.1.1\n+* 🐛 `FixedSizeGrid` and `FixedSizeList` automatically clear style cache when item size props change.\n+\n+### 1.1.0\n+* 🎉 Use explicit `constructor` and `super` to generate cleaner component code. ([Andarist](https:\/\/github.com\/Andarist) - [#26](https:\/\/github.com\/bvaughn\/react-window\/pull\/26))\n+* 🎉 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))\n+\n+### 1.0.3\n+* 🐛 Avoid unnecessary scrollbars for lists (e.g. no horizontal scrollbar for a vertical list) unless content requires them.\n+\n+### 1.0.2\n+\n+* 🎉 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))\n+* 🎉 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))\n+* 🎉 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))\n+\n+### 1.0.1\n+Updated `README.md` file to remove `@alpha` tag from NPM installation instructions.\n+\n+# 1.0.0\n+Initial release of library. Includes the following components:\n+* `FixedSizeGrid`\n+* `FixedSizeList`\n+* `VariableSizeGrid`\n+* `VariableSizeList`\ndiff --git a\/src\/node_modules\/react-window\/LICENSE.md b\/src\/node_modules\/react-window\/LICENSE.md\nnew file mode 100644\nindex 0000000000..0569d0a7b8\n--- \/dev\/null\n+++ b\/src\/node_modules\/react-window\/LICENSE.md\n@@ -0,0 +1,21 @@\n+The MIT License (MIT)\n+\n+Copyright (c) 2018 Brian Vaughn\n+\n+Permission is hereby granted, free of charge, to any person obtaining a copy\n+of this software and associated documentation files (the \"Software\"), to deal\n+in the Software without restriction, including without limitation the rights\n+to use, copy, modify, merge, publish, distribute, sublicense, and\/or sell\n+copies of the Software, and to permit persons to whom the Software is\n+furnished to do so, subject to the following conditions:\n+\n+The above copyright notice and this permission notice shall be included in all\n+copies or substantial portions of the Software.\n+\n+THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n+SOFTWARE.\ndiff --git a\/src\/node_modules\/react-window\/README.md b\/src\/node_modules\/react-window\/README.md\nnew file mode 100644\nindex 0000000000..8603c9c5bc\n--- \/dev\/null\n+++ b\/src\/node_modules\/react-window\/README.md\n@@ -0,0 +1,88 @@\n+# react-window\n+\n+> React components for efficiently rendering large lists and tabular data\n+\n+[![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)\n+\n+## Install\n+\n+```bash\n+# Yarn\n+yarn add react-window\n+\n+# NPM\n+npm install --save react-window\n+```\n+\n+## Usage\n+\n+Learn more at [react-window.now.sh](https:\/\/react-window.now.sh\/):\n+\n+## Related libraries\n+\n+* [`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.\n+* [`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).\n+\n+## Frequently asked questions\n+\n+### How is `react-window` different from `react-virtualized`?\n+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.\n+\n+`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).\n+\n+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:\n+\n+1. Use `react-virtualized`. (It's still widely used by a lot of successful projects!)\n+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)! 🙂\n+\n+<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 <2 KB.<\/sup>\n+\n+### Can a list or a grid fill 100% the width or height of a page?\n+\n+Yes. I recommend using the [`react-virtualized-auto-sizer` package](https:\/\/npmjs.com\/package\/react-virtualized-auto-sizer):\n+\n+<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\">\n+\n+Here's a [Code Sandbox demo](https:\/\/codesandbox.io\/s\/3vnx878jk5).\n+\n+### Why is my list blank when I scroll?\n+\n+If your list looks something like this...\n+\n+<img src=\"https:\/\/user-images.githubusercontent.com\/29597\/54005352-eb535c80-410d-11e9-80b2-d3d02db1f599.gif\" width=\"302\" height=\"152\">\n+\n+...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!\n+\n+<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\">\n+\n+### Can I lazy load data for my list?\n+\n+Yes. I recommend using the [`react-window-infinite-loader` package](https:\/\/npmjs.com\/package\/react-window-infinite-loader):\n+\n+<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\">\n+\n+Here's a [Code Sandbox demo](https:\/\/codesandbox.io\/s\/5wqo7z2np4).\n+\n+### Can I attach custom properties or event handlers?\n+\n+Yes, using the `outerElementType` prop.\n+\n+<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\">\n+\n+Here's a [Code Sandbox demo](https:\/\/codesandbox.io\/s\/4zqx79nww0).\n+\n+### Can I add gutter or padding between items?\n+\n+Yes, although it requires a bit of inline styling.\n+\n+<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\">\n+\n+Here's a [Code Sandbox demo](https:\/\/codesandbox.io\/s\/2w8wmlm89p).\n+\n+### Does this library support \"sticky\" items?\n+\n+Yes, although it requires a small amount of user code. Here's a [Code Sandbox demo](https:\/\/codesandbox.io\/s\/0mk3qwpl4l).\n+\n+## License\n+\n+MIT © [bvaughn](https:\/\/github.com\/bvaughn)\ndiff --git a\/src\/node_modules\/react-window\/dist\/index-dev.umd.js b\/src\/node_modules\/react-window\/dist\/index-dev.umd.js\nnew file mode 100644\nindex 0000000000..96dc2ae17a\n--- \/dev\/null\n+++ b\/src\/node_modules\/react-window\/dist\/index-dev.umd.js\n@@ -0,0 +1,2 @@\n+!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})});\n+\/\/# sourceMappingURL=index-dev.umd.js.map\ndiff --git a\/src\/node_modules\/react-window\/dist\/index-prod.umd.js b\/src\/node_modules\/react-window\/dist\/index-prod.umd.js\nnew file mode 100644\nindex 0000000000..ca33541ed5\n--- \/dev\/null\n+++ b\/src\/node_modules\/react-window\/dist\/index-prod.umd.js\n@@ -0,0 +1,2 @@\n+!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})});\n+\/\/# sourceMappingURL=index-prod.umd.js.map\ndiff --git a\/src\/node_modules\/react-window\/dist\/index.cjs.js b\/src\/node_modules\/react-window\/dist\/index.cjs.js\nnew file mode 100644\nindex 0000000000..83875b5ee0\n--- \/dev\/null\n+++ b\/src\/node_modules\/react-window\/dist\/index.cjs.js\n@@ -0,0 +1,2079 @@\n+'use strict';\n+\n+Object.defineProperty(exports, '__esModule', { value: true });\n+\n+function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }\n+\n+var _extends = _interopDefault(require('@babel\/runtime\/helpers\/extends'));\n+var _inheritsLoose = _interopDefault(require('@babel\/runtime\/helpers\/inheritsLoose'));\n+var _assertThisInitialized = _interopDefault(require('@babel\/runtime\/helpers\/assertThisInitialized'));\n+var memoizeOne = _interopDefault(require('memoize-one'));\n+var react = require('react');\n+var _objectWithoutPropertiesLoose = _interopDefault(require('@babel\/runtime\/helpers\/objectWithoutPropertiesLoose'));\n+\n+\/\/ Animation frame based implementation of setTimeout.\n+\/\/ Inspired by Joe Lambert, https:\/\/gist.github.com\/joelambert\/1002116#file-requesttimeout-js\n+var hasNativePerformanceNow = typeof performance === 'object' && typeof performance.now === 'function';\n+var now = hasNativePerformanceNow ? function () {\n+ return performance.now();\n+} : function () {\n+ return Date.now();\n+};\n+function cancelTimeout(timeoutID) {\n+ cancelAnimationFrame(timeoutID.id);\n+}\n+function requestTimeout(callback, delay) {\n+ var start = now();\n+\n+ function tick() {\n+ if (now() - start >= delay) {\n+ callback.call(null);\n+ } else {\n+ timeoutID.id = requestAnimationFrame(tick);\n+ }\n+ }\n+\n+ var timeoutID = {\n+ id: requestAnimationFrame(tick)\n+ };\n+ return timeoutID;\n+}\n+\n+var size = -1; \/\/ This utility copied from \"dom-helpers\" package.\n+\n+function getScrollbarSize(recalculate) {\n+ if (recalculate === void 0) {\n+ recalculate = false;\n+ }\n+\n+ if (size === -1 || recalculate) {\n+ var div = document.createElement('div');\n+ var style = div.style;\n+ style.width = '50px';\n+ style.height = '50px';\n+ style.overflow = 'scroll';\n+ document.body.appendChild(div);\n+ size = div.offsetWidth - div.clientWidth;\n+ document.body.removeChild(div);\n+ }\n+\n+ return size;\n+}\n+var cachedRTLResult = null; \/\/ TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.\n+\/\/ Chrome does not seem to adhere; its scrollLeft values are positive (measured relative to the left).\n+\/\/ Safari's elastic bounce makes detecting this even more complicated wrt potential false positives.\n+\/\/ The safest way to check this is to intentionally set a negative offset,\n+\/\/ and then verify that the subsequent \"scroll\" event matches the negative offset.\n+\/\/ If it does not match, then we can assume a non-standard RTL scroll implementation.\n+\n+function getRTLOffsetType(recalculate) {\n+ if (recalculate === void 0) {\n+ recalculate = false;\n+ }\n+\n+ if (cachedRTLResult === null || recalculate) {\n+ var outerDiv = document.createElement('div');\n+ var outerStyle = outerDiv.style;\n+ outerStyle.width = '50px';\n+ outerStyle.height = '50px';\n+ outerStyle.overflow = 'scroll';\n+ outerStyle.direction = 'rtl';\n+ var innerDiv = document.createElement('div');\n+ var innerStyle = innerDiv.style;\n+ innerStyle.width = '100px';\n+ innerStyle.height = '100px';\n+ outerDiv.appendChild(innerDiv);\n+ document.body.appendChild(outerDiv);\n+\n+ if (outerDiv.scrollLeft > 0) {\n+ cachedRTLResult = 'positive-descending';\n+ } else {\n+ outerDiv.scrollLeft = 1;\n+\n+ if (outerDiv.scrollLeft === 0) {\n+ cachedRTLResult = 'negative';\n+ } else {\n+ cachedRTLResult = 'positive-ascending';\n+ }\n+ }\n+\n+ document.body.removeChild(outerDiv);\n+ return cachedRTLResult;\n+ }\n+\n+ return cachedRTLResult;\n+}\n+\n+var IS_SCROLLING_DEBOUNCE_INTERVAL = 150;\n+\n+var defaultItemKey = function defaultItemKey(_ref) {\n+ var columnIndex = _ref.columnIndex,\n+ data = _ref.data,\n+ rowIndex = _ref.rowIndex;\n+ return rowIndex + \":\" + columnIndex;\n+}; \/\/ In DEV mode, this Set helps us only log a warning once per component instance.\n+\/\/ This avoids spamming the console every time a render happens.\n+\n+\n+var devWarningsOverscanCount = null;\n+var devWarningsOverscanRowsColumnsCount = null;\n+var devWarningsTagName = null;\n+\n+if (process.env.NODE_ENV !== 'production') {\n+ if (typeof window !== 'undefined' && typeof window.WeakSet !== 'undefined') {\n+ devWarningsOverscanCount =\n+ \/*#__PURE__*\/\n+ new WeakSet();\n+ devWarningsOverscanRowsColumnsCount =\n+ \/*#__PURE__*\/\n+ new WeakSet();\n+ devWarningsTagName =\n+ \/*#__PURE__*\/\n+ new WeakSet();\n+ }\n+}\n+\n+function createGridComponent(_ref2) {\n+ var _class, _temp;\n+\n+ var getColumnOffset = _ref2.getColumnOffset,\n+ getColumnStartIndexForOffset = _ref2.getColumnStartIndexForOffset,\n+ getColumnStopIndexForStartIndex = _ref2.getColumnStopIndexForStartIndex,\n+ getColumnWidth = _ref2.getColumnWidth,\n+ getEstimatedTotalHeight = _ref2.getEstimatedTotalHeight,\n+ getEstimatedTotalWidth = _ref2.getEstimatedTotalWidth,\n+ getOffsetForColumnAndAlignment = _ref2.getOffsetForColumnAndAlignment,\n+ getOffsetForRowAndAlignment = _ref2.getOffsetForRowAndAlignment,\n+ getRowHeight = _ref2.getRowHeight,\n+ getRowOffset = _ref2.getRowOffset,\n+ getRowStartIndexForOffset = _ref2.getRowStartIndexForOffset,\n+ getRowStopIndexForStartIndex = _ref2.getRowStopIndexForStartIndex,\n+ initInstanceProps = _ref2.initInstanceProps,\n+ shouldResetStyleCacheOnItemSizeChange = _ref2.shouldResetStyleCacheOnItemSizeChange,\n+ validateProps = _ref2.validateProps;\n+ return _temp = _class =\n+ \/*#__PURE__*\/\n+ function (_PureComponent) {\n+ _inheritsLoose(Grid, _PureComponent);\n+\n+ \/\/ Always use explicit constructor for React components.\n+ \/\/ It produces less code after transpilation. (#26)\n+ \/\/ eslint-disable-next-line no-useless-constructor\n+ function Grid(props) {\n+ var _this;\n+\n+ _this = _PureComponent.call(this, props) || this;\n+ _this._instanceProps = initInstanceProps(_this.props, _assertThisInitialized(_assertThisInitialized(_this)));\n+ _this._resetIsScrollingTimeoutId = null;\n+ _this._outerRef = void 0;\n+ _this.state = {\n+ instance: _assertThisInitialized(_assertThisInitialized(_this)),\n+ isScrolling: false,\n+ horizontalScrollDirection: 'forward',\n+ scrollLeft: typeof _this.props.initialScrollLeft === 'number' ? _this.props.initialScrollLeft : 0,\n+ scrollTop: typeof _this.props.initialScrollTop === 'number' ? _this.props.initialScrollTop : 0,\n+ scrollUpdateWasRequested: false,\n+ verticalScrollDirection: 'forward'\n+ };\n+ _this._callOnItemsRendered = void 0;\n+ _this._callOnItemsRendered = memoizeOne(function (overscanColumnStartIndex, overscanColumnStopIndex, overscanRowStartIndex, overscanRowStopIndex, visibleColumnStartIndex, visibleColumnStopIndex, visibleRowStartIndex, visibleRowStopIndex) {\n+ return _this.props.onItemsRendered({\n+ overscanColumnStartIndex: overscanColumnStartIndex,\n+ overscanColumnStopIndex: overscanColumnStopIndex,\n+ overscanRowStartIndex: overscanRowStartIndex,\n+ overscanRowStopIndex: overscanRowStopIndex,\n+ visibleColumnStartIndex: visibleColumnStartIndex,\n+ visibleColumnStopIndex: visibleColumnStopIndex,\n+ visibleRowStartIndex: visibleRowStartIndex,\n+ visibleRowStopIndex: visibleRowStopIndex\n+ });\n+ });\n+ _this._callOnScroll = void 0;\n+ _this._callOnScroll = memoizeOne(function (scrollLeft, scrollTop, horizontalScrollDirection, verticalScrollDirection, scrollUpdateWasRequested) {\n+ return _this.props.onScroll({\n+ horizontalScrollDirection: horizontalScrollDirection,\n+ scrollLeft: scrollLeft,\n+ scrollTop: scrollTop,\n+ verticalScrollDirection: verticalScrollDirection,\n+ scrollUpdateWasRequested: scrollUpdateWasRequested\n+ });\n+ });\n+ _this._getItemStyle = void 0;\n+\n+ _this._getItemStyle = function (rowIndex, columnIndex) {\n+ var _this$props = _this.props,\n+ columnWidth = _this$props.columnWidth,\n+ direction = _this$props.direction,\n+ rowHeight = _this$props.rowHeight;\n+\n+ var itemStyleCache = _this._getItemStyleCache(shouldResetStyleCacheOnItemSizeChange && columnWidth, shouldResetStyleCacheOnItemSizeChange && direction, shouldResetStyleCacheOnItemSizeChange && rowHeight);\n+\n+ var key = rowIndex + \":\" + columnIndex;\n+ var style;\n+\n+ if (itemStyleCache.hasOwnProperty(key)) {\n+ style = itemStyleCache[key];\n+ } else {\n+ var _style;\n+\n+ itemStyleCache[key] = style = (_style = {\n+ position: 'absolute'\n+ }, _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);\n+ }\n+\n+ return style;\n+ };\n+\n+ _this._getItemStyleCache = void 0;\n+ _this._getItemStyleCache = memoizeOne(function (_, __, ___) {\n+ return {};\n+ });\n+\n+ _this._onScroll = function (event) {\n+ var _event$currentTarget = event.currentTarget,\n+ clientHeight = _event$currentTarget.clientHeight,\n+ clientWidth = _event$currentTarget.clientWidth,\n+ scrollLeft = _event$currentTarget.scrollLeft,\n+ scrollTop = _event$currentTarget.scrollTop,\n+ scrollHeight = _event$currentTarget.scrollHeight,\n+ scrollWidth = _event$currentTarget.scrollWidth;\n+\n+ _this.setState(function (prevState) {\n+ if (prevState.scrollLeft === scrollLeft && prevState.scrollTop === scrollTop) {\n+ \/\/ Scroll position may have been updated by cDM\/cDU,\n+ \/\/ In which case we don't need to trigger another render,\n+ \/\/ And we don't want to update state.isScrolling.\n+ return null;\n+ }\n+\n+ var direction = _this.props.direction; \/\/ TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.\n+ \/\/ This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).\n+ \/\/ It's also easier for this component if we convert offsets to the same format as they would be in for ltr.\n+ \/\/ So the simplest solution is to determine which browser behavior we're dealing with, and convert based on it.\n+\n+ var calculatedScrollLeft = scrollLeft;\n+\n+ if (direction === 'rtl') {\n+ switch (getRTLOffsetType()) {\n+ case 'negative':\n+ calculatedScrollLeft = -scrollLeft;\n+ break;\n+\n+ case 'positive-descending':\n+ calculatedScrollLeft = scrollWidth - clientWidth - scrollLeft;\n+ break;\n+ }\n+ } \/\/ Prevent Safari's elastic scrolling from causing visual shaking when scrolling past bounds.\n+\n+\n+ calculatedScrollLeft = Math.max(0, Math.min(calculatedScrollLeft, scrollWidth - clientWidth));\n+ var calculatedScrollTop = Math.max(0, Math.min(scrollTop, scrollHeight - clientHeight));\n+ return {\n+ isScrolling: true,\n+ horizontalScrollDirection: prevState.scrollLeft < scrollLeft ? 'forward' : 'backward',\n+ scrollLeft: calculatedScrollLeft,\n+ scrollTop: calculatedScrollTop,\n+ verticalScrollDirection: prevState.scrollTop < scrollTop ? 'forward' : 'backward',\n+ scrollUpdateWasRequested: false\n+ };\n+ }, _this._resetIsScrollingDebounced);\n+ };\n+\n+ _this._outerRefSetter = function (ref) {\n+ var outerRef = _this.props.outerRef;\n+ _this._outerRef = ref;\n+\n+ if (typeof outerRef === 'function') {\n+ outerRef(ref);\n+ } else if (outerRef != null && typeof outerRef === 'object' && outerRef.hasOwnProperty('current')) {\n+ outerRef.current = ref;\n+ }\n+ };\n+\n+ _this._resetIsScrollingDebounced = function () {\n+ if (_this._resetIsScrollingTimeoutId !== null) {\n+ cancelTimeout(_this._resetIsScrollingTimeoutId);\n+ }\n+\n+ _this._resetIsScrollingTimeoutId = requestTimeout(_this._resetIsScrolling, IS_SCROLLING_DEBOUNCE_INTERVAL);\n+ };\n+\n+ _this._resetIsScrolling = function () {\n+ _this._resetIsScrollingTimeoutId = null;\n+\n+ _this.setState({\n+ isScrolling: false\n+ }, function () {\n+ \/\/ Clear style cache after state update has been committed.\n+ \/\/ This way we don't break pure sCU for items that don't use isScrolling param.\n+ _this._getItemStyleCache(-1);\n+ });\n+ };\n+\n+ return _this;\n+ }\n+\n+ Grid.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {\n+ validateSharedProps(nextProps, prevState);\n+ validateProps(nextProps);\n+ return null;\n+ };\n+\n+ var _proto = Grid.prototype;\n+\n+ _proto.scrollTo = function scrollTo(_ref3) {\n+ var scrollLeft = _ref3.scrollLeft,\n+ scrollTop = _ref3.scrollTop;\n+\n+ if (scrollLeft !== undefined) {\n+ scrollLeft = Math.max(0, scrollLeft);\n+ }\n+\n+ if (scrollTop !== undefined) {\n+ scrollTop = Math.max(0, scrollTop);\n+ }\n+\n+ this.setState(function (prevState) {\n+ if (scrollLeft === undefined) {\n+ scrollLeft = prevState.scrollLeft;\n+ }\n+\n+ if (scrollTop === undefined) {\n+ scrollTop = prevState.scrollTop;\n+ }\n+\n+ if (prevState.scrollLeft === scrollLeft && prevState.scrollTop === scrollTop) {\n+ return null;\n+ }\n+\n+ return {\n+ horizontalScrollDirection: prevState.scrollLeft < scrollLeft ? 'forward' : 'backward',\n+ scrollLeft: scrollLeft,\n+ scrollTop: scrollTop,\n+ scrollUpdateWasRequested: true,\n+ verticalScrollDirection: prevState.scrollTop < scrollTop ? 'forward' : 'backward'\n+ };\n+ }, this._resetIsScrollingDebounced);\n+ };\n+\n+ _proto.scrollToItem = function scrollToItem(_ref4) {\n+ var _ref4$align = _ref4.align,\n+ align = _ref4$align === void 0 ? 'auto' : _ref4$align,\n+ columnIndex = _ref4.columnIndex,\n+ rowIndex = _ref4.rowIndex;\n+ var _this$props2 = this.props,\n+ columnCount = _this$props2.columnCount,\n+ height = _this$props2.height,\n+ rowCount = _this$props2.rowCount,\n+ width = _this$props2.width;\n+ var _this$state = this.state,\n+ scrollLeft = _this$state.scrollLeft,\n+ scrollTop = _this$state.scrollTop;\n+ var scrollbarSize = getScrollbarSize();\n+\n+ if (columnIndex !== undefined) {\n+ columnIndex = Math.max(0, Math.min(columnIndex, columnCount - 1));\n+ }\n+\n+ if (rowIndex !== undefined) {\n+ rowIndex = Math.max(0, Math.min(rowIndex, rowCount - 1));\n+ }\n+\n+ var estimatedTotalHeight = getEstimatedTotalHeight(this.props, this._instanceProps);\n+ var estimatedTotalWidth = getEstimatedTotalWidth(this.props, this._instanceProps); \/\/ The scrollbar size should be considered when scrolling an item into view,\n+ \/\/ to ensure it's fully visible.\n+ \/\/ But we only need to account for its size when it's actually visible.\n+\n+ var horizontalScrollbarSize = estimatedTotalWidth > width ? scrollbarSize : 0;\n+ var verticalScrollbarSize = estimatedTotalHeight > height ? scrollbarSize : 0;\n+ this.scrollTo({\n+ scrollLeft: columnIndex !== undefined ? getOffsetForColumnAndAlignment(this.props, columnIndex, align, scrollLeft, this._instanceProps, verticalScrollbarSize) : scrollLeft,\n+ scrollTop: rowIndex !== undefined ? getOffsetForRowAndAlignment(this.props, rowIndex, align, scrollTop, this._instanceProps, horizontalScrollbarSize) : scrollTop\n+ });\n+ };\n+\n+ _proto.componentDidMount = function componentDidMount() {\n+ var _this$props3 = this.props,\n+ initialScrollLeft = _this$props3.initialScrollLeft,\n+ initialScrollTop = _this$props3.initialScrollTop;\n+\n+ if (this._outerRef != null) {\n+ var outerRef = this._outerRef;\n+\n+ if (typeof initialScrollLeft === 'number') {\n+ outerRef.scrollLeft = initialScrollLeft;\n+ }\n+\n+ if (typeof initialScrollTop === 'number') {\n+ outerRef.scrollTop = initialScrollTop;\n+ }\n+ }\n+\n+ this._callPropsCallbacks();\n+ };\n+\n+ _proto.componentDidUpdate = function componentDidUpdate() {\n+ var direction = this.props.direction;\n+ var _this$state2 = this.state,\n+ scrollLeft = _this$state2.scrollLeft,\n+ scrollTop = _this$state2.scrollTop,\n+ scrollUpdateWasRequested = _this$state2.scrollUpdateWasRequested;\n+\n+ if (scrollUpdateWasRequested && this._outerRef != null) {\n+ \/\/ TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.\n+ \/\/ This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).\n+ \/\/ So we need to determine which browser behavior we're dealing with, and mimic it.\n+ var outerRef = this._outerRef;\n+\n+ if (direction === 'rtl') {\n+ switch (getRTLOffsetType()) {\n+ case 'negative':\n+ outerRef.scrollLeft = -scrollLeft;\n+ break;\n+\n+ case 'positive-ascending':\n+ outerRef.scrollLeft = scrollLeft;\n+ break;\n+\n+ default:\n+ var clientWidth = outerRef.clientWidth,\n+ scrollWidth = outerRef.scrollWidth;\n+ outerRef.scrollLeft = scrollWidth - clientWidth - scrollLeft;\n+ break;\n+ }\n+ } else {\n+ outerRef.scrollLeft = Math.max(0, scrollLeft);\n+ }\n+\n+ outerRef.scrollTop = Math.max(0, scrollTop);\n+ }\n+\n+ this._callPropsCallbacks();\n+ };\n+\n+ _proto.componentWillUnmount = function componentWillUnmount() {\n+ if (this._resetIsScrollingTimeoutId !== null) {\n+ cancelTimeout(this._resetIsScrollingTimeoutId);\n+ }\n+ };\n+\n+ _proto.render = function render() {\n+ var _this$props4 = this.props,\n+ children = _this$props4.children,\n+ className = _this$props4.className,\n+ columnCount = _this$props4.columnCount,\n+ direction = _this$props4.direction,\n+ height = _this$props4.height,\n+ innerRef = _this$props4.innerRef,\n+ innerElementType = _this$props4.innerElementType,\n+ innerTagName = _this$props4.innerTagName,\n+ itemData = _this$props4.itemData,\n+ _this$props4$itemKey = _this$props4.itemKey,\n+ itemKey = _this$props4$itemKey === void 0 ? defaultItemKey : _this$props4$itemKey,\n+ outerElementType = _this$props4.outerElementType,\n+ outerTagName = _this$props4.outerTagName,\n+ rowCount = _this$props4.rowCount,\n+ style = _this$props4.style,\n+ useIsScrolling = _this$props4.useIsScrolling,\n+ width = _this$props4.width;\n+ var isScrolling = this.state.isScrolling;\n+\n+ var _this$_getHorizontalR = this._getHorizontalRangeToRender(),\n+ columnStartIndex = _this$_getHorizontalR[0],\n+ columnStopIndex = _this$_getHorizontalR[1];\n+\n+ var _this$_getVerticalRan = this._getVerticalRangeToRender(),\n+ rowStartIndex = _this$_getVerticalRan[0],\n+ rowStopIndex = _this$_getVerticalRan[1];\n+\n+ var items = [];\n+\n+ if (columnCount > 0 && rowCount) {\n+ for (var _rowIndex = rowStartIndex; _rowIndex <= rowStopIndex; _rowIndex++) {\n+ for (var _columnIndex = columnStartIndex; _columnIndex <= columnStopIndex; _columnIndex++) {\n+ items.push(react.createElement(children, {\n+ columnIndex: _columnIndex,\n+ data: itemData,\n+ isScrolling: useIsScrolling ? isScrolling : undefined,\n+ key: itemKey({\n+ columnIndex: _columnIndex,\n+ data: itemData,\n+ rowIndex: _rowIndex\n+ }),\n+ rowIndex: _rowIndex,\n+ style: this._getItemStyle(_rowIndex, _columnIndex)\n+ }));\n+ }\n+ }\n+ } \/\/ Read this value AFTER items have been created,\n+ \/\/ So their actual sizes (if variable) are taken into consideration.\n+\n+\n+ var estimatedTotalHeight = getEstimatedTotalHeight(this.props, this._instanceProps);\n+ var estimatedTotalWidth = getEstimatedTotalWidth(this.props, this._instanceProps);\n+ return react.createElement(outerElementType || outerTagName || 'div', {\n+ className: className,\n+ onScroll: this._onScroll,\n+ ref: this._outerRefSetter,\n+ style: _extends({\n+ position: 'relative',\n+ height: height,\n+ width: width,\n+ overflow: 'auto',\n+ WebkitOverflowScrolling: 'touch',\n+ willChange: 'transform',\n+ direction: direction\n+ }, style)\n+ }, react.createElement(innerElementType || innerTagName || 'div', {\n+ children: items,\n+ ref: innerRef,\n+ style: {\n+ height: estimatedTotalHeight,\n+ pointerEvents: isScrolling ? 'none' : undefined,\n+ width: estimatedTotalWidth\n+ }\n+ }));\n+ };\n+\n+ _proto._callPropsCallbacks = function _callPropsCallbacks() {\n+ var _this$props5 = this.props,\n+ columnCount = _this$props5.columnCount,\n+ onItemsRendered = _this$props5.onItemsRendered,\n+ onScroll = _this$props5.onScroll,\n+ rowCount = _this$props5.rowCount;\n+\n+ if (typeof onItemsRendered === 'function') {\n+ if (columnCount > 0 && rowCount > 0) {\n+ var _this$_getHorizontalR2 = this._getHorizontalRangeToRender(),\n+ _overscanColumnStartIndex = _this$_getHorizontalR2[0],\n+ _overscanColumnStopIndex = _this$_getHorizontalR2[1],\n+ _visibleColumnStartIndex = _this$_getHorizontalR2[2],\n+ _visibleColumnStopIndex = _this$_getHorizontalR2[3];\n+\n+ var _this$_getVerticalRan2 = this._getVerticalRangeToRender(),\n+ _overscanRowStartIndex = _this$_getVerticalRan2[0],\n+ _overscanRowStopIndex = _this$_getVerticalRan2[1],\n+ _visibleRowStartIndex = _this$_getVerticalRan2[2],\n+ _visibleRowStopIndex = _this$_getVerticalRan2[3];\n+\n+ this._callOnItemsRendered(_overscanColumnStartIndex, _overscanColumnStopIndex, _overscanRowStartIndex, _overscanRowStopIndex, _visibleColumnStartIndex, _visibleColumnStopIndex, _visibleRowStartIndex, _visibleRowStopIndex);\n+ }\n+ }\n+\n+ if (typeof onScroll === 'function') {\n+ var _this$state3 = this.state,\n+ _horizontalScrollDirection = _this$state3.horizontalScrollDirection,\n+ _scrollLeft = _this$state3.scrollLeft,\n+ _scrollTop = _this$state3.scrollTop,\n+ _scrollUpdateWasRequested = _this$state3.scrollUpdateWasRequested,\n+ _verticalScrollDirection = _this$state3.verticalScrollDirection;\n+\n+ this._callOnScroll(_scrollLeft, _scrollTop, _horizontalScrollDirection, _verticalScrollDirection, _scrollUpdateWasRequested);\n+ }\n+ }; \/\/ Lazily create and cache item styles while scrolling,\n+ \/\/ So that pure component sCU will prevent re-renders.\n+ \/\/ We maintain this cache, and pass a style prop rather than index,\n+ \/\/ So that List can clear cached styles and force item re-render if necessary.\n+\n+\n+ _proto._getHorizontalRangeToRender = function _getHorizontalRangeToRender() {\n+ var _this$props6 = this.props,\n+ columnCount = _this$props6.columnCount,\n+ overscanColumnCount = _this$props6.overscanColumnCount,\n+ overscanColumnsCount = _this$props6.overscanColumnsCount,\n+ overscanCount = _this$props6.overscanCount,\n+ rowCount = _this$props6.rowCount;\n+ var _this$state4 = this.state,\n+ horizontalScrollDirection = _this$state4.horizontalScrollDirection,\n+ isScrolling = _this$state4.isScrolling,\n+ scrollLeft = _this$state4.scrollLeft;\n+ var overscanCountResolved = overscanColumnCount || overscanColumnsCount || overscanCount || 1;\n+\n+ if (columnCount === 0 || rowCount === 0) {\n+ return [0, 0, 0, 0];\n+ }\n+\n+ var startIndex = getColumnStartIndexForOffset(this.props, scrollLeft, this._instanceProps);\n+ var stopIndex = getColumnStopIndexForStartIndex(this.props, startIndex, scrollLeft, this._instanceProps); \/\/ Overscan by one item in each direction so that tab\/focus works.\n+ \/\/ If there isn't at least one extra item, tab loops back around.\n+\n+ var overscanBackward = !isScrolling || horizontalScrollDirection === 'backward' ? Math.max(1, overscanCountResolved) : 1;\n+ var overscanForward = !isScrolling || horizontalScrollDirection === 'forward' ? Math.max(1, overscanCountResolved) : 1;\n+ return [Math.max(0, startIndex - overscanBackward), Math.max(0, Math.min(columnCount - 1, stopIndex + overscanForward)), startIndex, stopIndex];\n+ };\n+\n+ _proto._getVerticalRangeToRender = function _getVerticalRangeToRender() {\n+ var _this$props7 = this.props,\n+ columnCount = _this$props7.columnCount,\n+ overscanCount = _this$props7.overscanCount,\n+ overscanRowCount = _this$props7.overscanRowCount,\n+ overscanRowsCount = _this$props7.overscanRowsCount,\n+ rowCount = _this$props7.rowCount;\n+ var _this$state5 = this.state,\n+ isScrolling = _this$state5.isScrolling,\n+ verticalScrollDirection = _this$state5.verticalScrollDirection,\n+ scrollTop = _this$state5.scrollTop;\n+ var overscanCountResolved = overscanRowCount || overscanRowsCount || overscanCount || 1;\n+\n+ if (columnCount === 0 || rowCount === 0) {\n+ return [0, 0, 0, 0];\n+ }\n+\n+ var startIndex = getRowStartIndexForOffset(this.props, scrollTop, this._instanceProps);\n+ var stopIndex = getRowStopIndexForStartIndex(this.props, startIndex, scrollTop, this._instanceProps); \/\/ Overscan by one item in each direction so that tab\/focus works.\n+ \/\/ If there isn't at least one extra item, tab loops back around.\n+\n+ var overscanBackward = !isScrolling || verticalScrollDirection === 'backward' ? Math.max(1, overscanCountResolved) : 1;\n+ var overscanForward = !isScrolling || verticalScrollDirection === 'forward' ? Math.max(1, overscanCountResolved) : 1;\n+ return [Math.max(0, startIndex - overscanBackward), Math.max(0, Math.min(rowCount - 1, stopIndex + overscanForward)), startIndex, stopIndex];\n+ };\n+\n+ return Grid;\n+ }(react.PureComponent), _class.defaultProps = {\n+ direction: 'ltr',\n+ itemData: undefined,\n+ useIsScrolling: false\n+ }, _temp;\n+}\n+\n+var validateSharedProps = function validateSharedProps(_ref5, _ref6) {\n+ var children = _ref5.children,\n+ direction = _ref5.direction,\n+ height = _ref5.height,\n+ innerTagName = _ref5.innerTagName,\n+ outerTagName = _ref5.outerTagName,\n+ overscanColumnsCount = _ref5.overscanColumnsCount,\n+ overscanCount = _ref5.overscanCount,\n+ overscanRowsCount = _ref5.overscanRowsCount,\n+ width = _ref5.width;\n+ var instance = _ref6.instance;\n+\n+ if (process.env.NODE_ENV !== 'production') {\n+ if (typeof overscanCount === 'number') {\n+ if (devWarningsOverscanCount && !devWarningsOverscanCount.has(instance)) {\n+ devWarningsOverscanCount.add(instance);\n+ console.warn('The overscanCount prop has been deprecated. ' + 'Please use the overscanColumnCount and overscanRowCount props instead.');\n+ }\n+ }\n+\n+ if (typeof overscanColumnsCount === 'number' || typeof overscanRowsCount === 'number') {\n+ if (devWarningsOverscanRowsColumnsCount && !devWarningsOverscanRowsColumnsCount.has(instance)) {\n+ devWarningsOverscanRowsColumnsCount.add(instance);\n+ console.warn('The overscanColumnsCount and overscanRowsCount props have been deprecated. ' + 'Please use the overscanColumnCount and overscanRowCount props instead.');\n+ }\n+ }\n+\n+ if (innerTagName != null || outerTagName != null) {\n+ if (devWarningsTagName && !devWarningsTagName.has(instance)) {\n+ devWarningsTagName.add(instance);\n+ console.warn('The innerTagName and outerTagName props have been deprecated. ' + 'Please use the innerElementType and outerElementType props instead.');\n+ }\n+ }\n+\n+ if (children == null) {\n+ throw Error('An invalid \"children\" prop has been specified. ' + 'Value should be a React component. ' + (\"\\\"\" + (children === null ? 'null' : typeof children) + \"\\\" was specified.\"));\n+ }\n+\n+ switch (direction) {\n+ case 'ltr':\n+ case 'rtl':\n+ \/\/ Valid values\n+ break;\n+\n+ default:\n+ throw Error('An invalid \"direction\" prop has been specified. ' + 'Value should be either \"ltr\" or \"rtl\". ' + (\"\\\"\" + direction + \"\\\" was specified.\"));\n+ }\n+\n+ if (typeof width !== 'number') {\n+ throw Error('An invalid \"width\" prop has been specified. ' + 'Grids must specify a number for width. ' + (\"\\\"\" + (width === null ? 'null' : typeof width) + \"\\\" was specified.\"));\n+ }\n+\n+ if (typeof height !== 'number') {\n+ throw Error('An invalid \"height\" prop has been specified. ' + 'Grids must specify a number for height. ' + (\"\\\"\" + (height === null ? 'null' : typeof height) + \"\\\" was specified.\"));\n+ }\n+ }\n+};\n+\n+var DEFAULT_ESTIMATED_ITEM_SIZE = 50;\n+\n+var getEstimatedTotalHeight = function getEstimatedTotalHeight(_ref, _ref2) {\n+ var rowCount = _ref.rowCount;\n+ var rowMetadataMap = _ref2.rowMetadataMap,\n+ estimatedRowHeight = _ref2.estimatedRowHeight,\n+ lastMeasuredRowIndex = _ref2.lastMeasuredRowIndex;\n+ var totalSizeOfMeasuredRows = 0; \/\/ Edge case check for when the number of items decreases while a scroll is in progress.\n+ \/\/ https:\/\/github.com\/bvaughn\/react-window\/pull\/138\n+\n+ if (lastMeasuredRowIndex >= rowCount) {\n+ lastMeasuredRowIndex = rowCount - 1;\n+ }\n+\n+ if (lastMeasuredRowIndex >= 0) {\n+ var itemMetadata = rowMetadataMap[lastMeasuredRowIndex];\n+ totalSizeOfMeasuredRows = itemMetadata.offset + itemMetadata.size;\n+ }\n+\n+ var numUnmeasuredItems = rowCount - lastMeasuredRowIndex - 1;\n+ var totalSizeOfUnmeasuredItems = numUnmeasuredItems * estimatedRowHeight;\n+ return totalSizeOfMeasuredRows + totalSizeOfUnmeasuredItems;\n+};\n+\n+var getEstimatedTotalWidth = function getEstimatedTotalWidth(_ref3, _ref4) {\n+ var columnCount = _ref3.columnCount;\n+ var columnMetadataMap = _ref4.columnMetadataMap,\n+ estimatedColumnWidth = _ref4.estimatedColumnWidth,\n+ lastMeasuredColumnIndex = _ref4.lastMeasuredColumnIndex;\n+ var totalSizeOfMeasuredRows = 0; \/\/ Edge case check for when the number of items decreases while a scroll is in progress.\n+ \/\/ https:\/\/github.com\/bvaughn\/react-window\/pull\/138\n+\n+ if (lastMeasuredColumnIndex >= columnCount) {\n+ lastMeasuredColumnIndex = columnCount - 1;\n+ }\n+\n+ if (lastMeasuredColumnIndex >= 0) {\n+ var itemMetadata = columnMetadataMap[lastMeasuredColumnIndex];\n+ totalSizeOfMeasuredRows = itemMetadata.offset + itemMetadata.size;\n+ }\n+\n+ var numUnmeasuredItems = columnCount - lastMeasuredColumnIndex - 1;\n+ var totalSizeOfUnmeasuredItems = numUnmeasuredItems * estimatedColumnWidth;\n+ return totalSizeOfMeasuredRows + totalSizeOfUnmeasuredItems;\n+};\n+\n+var getItemMetadata = function getItemMetadata(itemType, props, index, instanceProps) {\n+ var itemMetadataMap, itemSize, lastMeasuredIndex;\n+\n+ if (itemType === 'column') {\n+ itemMetadataMap = instanceProps.columnMetadataMap;\n+ itemSize = props.columnWidth;\n+ lastMeasuredIndex = instanceProps.lastMeasuredColumnIndex;\n+ } else {\n+ itemMetadataMap = instanceProps.rowMetadataMap;\n+ itemSize = props.rowHeight;\n+ lastMeasuredIndex = instanceProps.lastMeasuredRowIndex;\n+ }\n+\n+ if (index > lastMeasuredIndex) {\n+ var offset = 0;\n+\n+ if (lastMeasuredIndex >= 0) {\n+ var itemMetadata = itemMetadataMap[lastMeasuredIndex];\n+ offset = itemMetadata.offset + itemMetadata.size;\n+ }\n+\n+ for (var i = lastMeasuredIndex + 1; i <= index; i++) {\n+ var size = itemSize(i);\n+ itemMetadataMap[i] = {\n+ offset: offset,\n+ size: size\n+ };\n+ offset += size;\n+ }\n+\n+ if (itemType === 'column') {\n+ instanceProps.lastMeasuredColumnIndex = index;\n+ } else {\n+ instanceProps.lastMeasuredRowIndex = index;\n+ }\n+ }\n+\n+ return itemMetadataMap[index];\n+};\n+\n+var findNearestItem = function findNearestItem(itemType, props, instanceProps, offset) {\n+ var itemMetadataMap, lastMeasuredIndex;\n+\n+ if (itemType === 'column') {\n+ itemMetadataMap = instanceProps.columnMetadataMap;\n+ lastMeasuredIndex = instanceProps.lastMeasuredColumnIndex;\n+ } else {\n+ itemMetadataMap = instanceProps.rowMetadataMap;\n+ lastMeasuredIndex = instanceProps.lastMeasuredRowIndex;\n+ }\n+\n+ var lastMeasuredItemOffset = lastMeasuredIndex > 0 ? itemMetadataMap[lastMeasuredIndex].offset : 0;\n+\n+ if (lastMeasuredItemOffset >= offset) {\n+ \/\/ If we've already measured items within this range just use a binary search as it's faster.\n+ return findNearestItemBinarySearch(itemType, props, instanceProps, lastMeasuredIndex, 0, offset);\n+ } else {\n+ \/\/ If we haven't yet measured this high, fallback to an exponential search with an inner binary search.\n+ \/\/ The exponential search avoids pre-computing sizes for the full set of items as a binary search would.\n+ \/\/ The overall complexity for this approach is O(log n).\n+ return findNearestItemExponentialSearch(itemType, props, instanceProps, Math.max(0, lastMeasuredIndex), offset);\n+ }\n+};\n+\n+var findNearestItemBinarySearch = function findNearestItemBinarySearch(itemType, props, instanceProps, high, low, offset) {\n+ while (low <= high) {\n+ var middle = low + Math.floor((high - low) \/ 2);\n+ var currentOffset = getItemMetadata(itemType, props, middle, instanceProps).offset;\n+\n+ if (currentOffset === offset) {\n+ return middle;\n+ } else if (currentOffset < offset) {\n+ low = middle + 1;\n+ } else if (currentOffset > offset) {\n+ high = middle - 1;\n+ }\n+ }\n+\n+ if (low > 0) {\n+ return low - 1;\n+ } else {\n+ return 0;\n+ }\n+};\n+\n+var findNearestItemExponentialSearch = function findNearestItemExponentialSearch(itemType, props, instanceProps, index, offset) {\n+ var itemCount = itemType === 'column' ? props.columnCount : props.rowCount;\n+ var interval = 1;\n+\n+ while (index < itemCount && getItemMetadata(itemType, props, index, instanceProps).offset < offset) {\n+ index += interval;\n+ interval *= 2;\n+ }\n+\n+ return findNearestItemBinarySearch(itemType, props, instanceProps, Math.min(index, itemCount - 1), Math.floor(index \/ 2), offset);\n+};\n+\n+var getOffsetForIndexAndAlignment = function getOffsetForIndexAndAlignment(itemType, props, index, align, scrollOffset, instanceProps, scrollbarSize) {\n+ var size = itemType === 'column' ? props.width : props.height;\n+ var itemMetadata = getItemMetadata(itemType, props, index, instanceProps); \/\/ Get estimated total size after ItemMetadata is computed,\n+ \/\/ To ensure it reflects actual measurements instead of just estimates.\n+\n+ var estimatedTotalSize = itemType === 'column' ? getEstimatedTotalWidth(props, instanceProps) : getEstimatedTotalHeight(props, instanceProps);\n+ var maxOffset = Math.max(0, Math.min(estimatedTotalSize - size, itemMetadata.offset));\n+ var minOffset = Math.max(0, itemMetadata.offset - size + scrollbarSize + itemMetadata.size);\n+\n+ if (align === 'smart') {\n+ if (scrollOffset >= minOffset - size && scrollOffset <= maxOffset + size) {\n+ align = 'auto';\n+ } else {\n+ align = 'center';\n+ }\n+ }\n+\n+ switch (align) {\n+ case 'start':\n+ return maxOffset;\n+\n+ case 'end':\n+ return minOffset;\n+\n+ case 'center':\n+ return Math.round(minOffset + (maxOffset - minOffset) \/ 2);\n+\n+ case 'auto':\n+ default:\n+ if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {\n+ return scrollOffset;\n+ } else if (minOffset > maxOffset) {\n+ \/\/ Because we only take into account the scrollbar size when calculating minOffset\n+ \/\/ this value can be larger than maxOffset when at the end of the list\n+ return minOffset;\n+ } else if (scrollOffset < minOffset) {\n+ return minOffset;\n+ } else {\n+ return maxOffset;\n+ }\n+\n+ }\n+};\n+\n+var VariableSizeGrid =\n+\/*#__PURE__*\/\n+createGridComponent({\n+ getColumnOffset: function getColumnOffset(props, index, instanceProps) {\n+ return getItemMetadata('column', props, index, instanceProps).offset;\n+ },\n+ getColumnStartIndexForOffset: function getColumnStartIndexForOffset(props, scrollLeft, instanceProps) {\n+ return findNearestItem('column', props, instanceProps, scrollLeft);\n+ },\n+ getColumnStopIndexForStartIndex: function getColumnStopIndexForStartIndex(props, startIndex, scrollLeft, instanceProps) {\n+ var columnCount = props.columnCount,\n+ width = props.width;\n+ var itemMetadata = getItemMetadata('column', props, startIndex, instanceProps);\n+ var maxOffset = scrollLeft + width;\n+ var offset = itemMetadata.offset + itemMetadata.size;\n+ var stopIndex = startIndex;\n+\n+ while (stopIndex < columnCount - 1 && offset < maxOffset) {\n+ stopIndex++;\n+ offset += getItemMetadata('column', props, stopIndex, instanceProps).size;\n+ }\n+\n+ return stopIndex;\n+ },\n+ getColumnWidth: function getColumnWidth(props, index, instanceProps) {\n+ return instanceProps.columnMetadataMap[index].size;\n+ },\n+ getEstimatedTotalHeight: getEstimatedTotalHeight,\n+ getEstimatedTotalWidth: getEstimatedTotalWidth,\n+ getOffsetForColumnAndAlignment: function getOffsetForColumnAndAlignment(props, index, align, scrollOffset, instanceProps, scrollbarSize) {\n+ return getOffsetForIndexAndAlignment('column', props, index, align, scrollOffset, instanceProps, scrollbarSize);\n+ },\n+ getOffsetForRowAndAlignment: function getOffsetForRowAndAlignment(props, index, align, scrollOffset, instanceProps, scrollbarSize) {\n+ return getOffsetForIndexAndAlignment('row', props, index, align, scrollOffset, instanceProps, scrollbarSize);\n+ },\n+ getRowOffset: function getRowOffset(props, index, instanceProps) {\n+ return getItemMetadata('row', props, index, instanceProps).offset;\n+ },\n+ getRowHeight: function getRowHeight(props, index, instanceProps) {\n+ return instanceProps.rowMetadataMap[index].size;\n+ },\n+ getRowStartIndexForOffset: function getRowStartIndexForOffset(props, scrollTop, instanceProps) {\n+ return findNearestItem('row', props, instanceProps, scrollTop);\n+ },\n+ getRowStopIndexForStartIndex: function getRowStopIndexForStartIndex(props, startIndex, scrollTop, instanceProps) {\n+ var rowCount = props.rowCount,\n+ height = props.height;\n+ var itemMetadata = getItemMetadata('row', props, startIndex, instanceProps);\n+ var maxOffset = scrollTop + height;\n+ var offset = itemMetadata.offset + itemMetadata.size;\n+ var stopIndex = startIndex;\n+\n+ while (stopIndex < rowCount - 1 && offset < maxOffset) {\n+ stopIndex++;\n+ offset += getItemMetadata('row', props, stopIndex, instanceProps).size;\n+ }\n+\n+ return stopIndex;\n+ },\n+ initInstanceProps: function initInstanceProps(props, instance) {\n+ var _ref5 = props,\n+ estimatedColumnWidth = _ref5.estimatedColumnWidth,\n+ estimatedRowHeight = _ref5.estimatedRowHeight;\n+ var instanceProps = {\n+ columnMetadataMap: {},\n+ estimatedColumnWidth: estimatedColumnWidth || DEFAULT_ESTIMATED_ITEM_SIZE,\n+ estimatedRowHeight: estimatedRowHeight || DEFAULT_ESTIMATED_ITEM_SIZE,\n+ lastMeasuredColumnIndex: -1,\n+ lastMeasuredRowIndex: -1,\n+ rowMetadataMap: {}\n+ };\n+\n+ instance.resetAfterColumnIndex = function (columnIndex, shouldForceUpdate) {\n+ if (shouldForceUpdate === void 0) {\n+ shouldForceUpdate = true;\n+ }\n+\n+ instance.resetAfterIndices({\n+ columnIndex: columnIndex,\n+ shouldForceUpdate: shouldForceUpdate\n+ });\n+ };\n+\n+ instance.resetAfterRowIndex = function (rowIndex, shouldForceUpdate) {\n+ if (shouldForceUpdate === void 0) {\n+ shouldForceUpdate = true;\n+ }\n+\n+ instance.resetAfterIndices({\n+ rowIndex: rowIndex,\n+ shouldForceUpdate: shouldForceUpdate\n+ });\n+ };\n+\n+ instance.resetAfterIndices = function (_ref6) {\n+ var columnIndex = _ref6.columnIndex,\n+ rowIndex = _ref6.rowIndex,\n+ _ref6$shouldForceUpda = _ref6.shouldForceUpdate,\n+ shouldForceUpdate = _ref6$shouldForceUpda === void 0 ? true : _ref6$shouldForceUpda;\n+\n+ if (typeof columnIndex === 'number') {\n+ instanceProps.lastMeasuredColumnIndex = Math.min(instanceProps.lastMeasuredColumnIndex, columnIndex - 1);\n+ }\n+\n+ if (typeof rowIndex === 'number') {\n+ instanceProps.lastMeasuredRowIndex = Math.min(instanceProps.lastMeasuredRowIndex, rowIndex - 1);\n+ } \/\/ We could potentially optimize further by only evicting styles after this index,\n+ \/\/ But since styles are only cached while scrolling is in progress-\n+ \/\/ It seems an unnecessary optimization.\n+ \/\/ It's unlikely that resetAfterIndex() will be called while a user is scrolling.\n+\n+\n+ instance._getItemStyleCache(-1);\n+\n+ if (shouldForceUpdate) {\n+ instance.forceUpdate();\n+ }\n+ };\n+\n+ return instanceProps;\n+ },\n+ shouldResetStyleCacheOnItemSizeChange: false,\n+ validateProps: function validateProps(_ref7) {\n+ var columnWidth = _ref7.columnWidth,\n+ rowHeight = _ref7.rowHeight;\n+\n+ if (process.env.NODE_ENV !== 'production') {\n+ if (typeof columnWidth !== 'function') {\n+ throw Error('An invalid \"columnWidth\" prop has been specified. ' + 'Value should be a function. ' + (\"\\\"\" + (columnWidth === null ? 'null' : typeof columnWidth) + \"\\\" was specified.\"));\n+ } else if (typeof rowHeight !== 'function') {\n+ throw Error('An invalid \"rowHeight\" prop has been specified. ' + 'Value should be a function. ' + (\"\\\"\" + (rowHeight === null ? 'null' : typeof rowHeight) + \"\\\" was specified.\"));\n+ }\n+ }\n+ }\n+});\n+\n+var IS_SCROLLING_DEBOUNCE_INTERVAL$1 = 150;\n+\n+var defaultItemKey$1 = function defaultItemKey(index, data) {\n+ return index;\n+}; \/\/ In DEV mode, this Set helps us only log a warning once per component instance.\n+\/\/ This avoids spamming the console every time a render happens.\n+\n+\n+var devWarningsDirection = null;\n+var devWarningsTagName$1 = null;\n+\n+if (process.env.NODE_ENV !== 'production') {\n+ if (typeof window !== 'undefined' && typeof window.WeakSet !== 'undefined') {\n+ devWarningsDirection =\n+ \/*#__PURE__*\/\n+ new WeakSet();\n+ devWarningsTagName$1 =\n+ \/*#__PURE__*\/\n+ new WeakSet();\n+ }\n+}\n+\n+function createListComponent(_ref) {\n+ var _class, _temp;\n+\n+ var getItemOffset = _ref.getItemOffset,\n+ getEstimatedTotalSize = _ref.getEstimatedTotalSize,\n+ getItemSize = _ref.getItemSize,\n+ getOffsetForIndexAndAlignment = _ref.getOffsetForIndexAndAlignment,\n+ getStartIndexForOffset = _ref.getStartIndexForOffset,\n+ getStopIndexForStartIndex = _ref.getStopIndexForStartIndex,\n+ initInstanceProps = _ref.initInstanceProps,\n+ shouldResetStyleCacheOnItemSizeChange = _ref.shouldResetStyleCacheOnItemSizeChange,\n+ validateProps = _ref.validateProps;\n+ return _temp = _class =\n+ \/*#__PURE__*\/\n+ function (_PureComponent) {\n+ _inheritsLoose(List, _PureComponent);\n+\n+ \/\/ Always use explicit constructor for React components.\n+ \/\/ It produces less code after transpilation. (#26)\n+ \/\/ eslint-disable-next-line no-useless-constructor\n+ function List(props) {\n+ var _this;\n+\n+ _this = _PureComponent.call(this, props) || this;\n+ _this._instanceProps = initInstanceProps(_this.props, _assertThisInitialized(_assertThisInitialized(_this)));\n+ _this._outerRef = void 0;\n+ _this._resetIsScrollingTimeoutId = null;\n+ _this.state = {\n+ instance: _assertThisInitialized(_assertThisInitialized(_this)),\n+ isScrolling: false,\n+ scrollDirection: 'forward',\n+ scrollOffset: typeof _this.props.initialScrollOffset === 'number' ? _this.props.initialScrollOffset : 0,\n+ scrollUpdateWasRequested: false\n+ };\n+ _this._callOnItemsRendered = void 0;\n+ _this._callOnItemsRendered = memoizeOne(function (overscanStartIndex, overscanStopIndex, visibleStartIndex, visibleStopIndex) {\n+ return _this.props.onItemsRendered({\n+ overscanStartIndex: overscanStartIndex,\n+ overscanStopIndex: overscanStopIndex,\n+ visibleStartIndex: visibleStartIndex,\n+ visibleStopIndex: visibleStopIndex\n+ });\n+ });\n+ _this._callOnScroll = void 0;\n+ _this._callOnScroll = memoizeOne(function (scrollDirection, scrollOffset, scrollUpdateWasRequested) {\n+ return _this.props.onScroll({\n+ scrollDirection: scrollDirection,\n+ scrollOffset: scrollOffset,\n+ scrollUpdateWasRequested: scrollUpdateWasRequested\n+ });\n+ });\n+ _this._getItemStyle = void 0;\n+\n+ _this._getItemStyle = function (index) {\n+ var _this$props = _this.props,\n+ direction = _this$props.direction,\n+ itemSize = _this$props.itemSize,\n+ layout = _this$props.layout;\n+\n+ var itemStyleCache = _this._getItemStyleCache(shouldResetStyleCacheOnItemSizeChange && itemSize, shouldResetStyleCacheOnItemSizeChange && layout, shouldResetStyleCacheOnItemSizeChange && direction);\n+\n+ var style;\n+\n+ if (itemStyleCache.hasOwnProperty(index)) {\n+ style = itemStyleCache[index];\n+ } else {\n+ var _style;\n+\n+ var _offset = getItemOffset(_this.props, index, _this._instanceProps);\n+\n+ var size = getItemSize(_this.props, index, _this._instanceProps); \/\/ TODO Deprecate direction \"horizontal\"\n+\n+ var isHorizontal = direction === 'horizontal' || layout === 'horizontal';\n+ itemStyleCache[index] = style = (_style = {\n+ position: 'absolute'\n+ }, _style[direction === 'rtl' ? 'right' : 'left'] = isHorizontal ? _offset : 0, _style.top = !isHorizontal ? _offset : 0, _style.height = !isHorizontal ? size : '100%', _style.width = isHorizontal ? size : '100%', _style);\n+ }\n+\n+ return style;\n+ };\n+\n+ _this._getItemStyleCache = void 0;\n+ _this._getItemStyleCache = memoizeOne(function (_, __, ___) {\n+ return {};\n+ });\n+\n+ _this._onScrollHorizontal = function (event) {\n+ var _event$currentTarget = event.currentTarget,\n+ clientWidth = _event$currentTarget.clientWidth,\n+ scrollLeft = _event$currentTarget.scrollLeft,\n+ scrollWidth = _event$currentTarget.scrollWidth;\n+\n+ _this.setState(function (prevState) {\n+ if (prevState.scrollOffset === scrollLeft) {\n+ \/\/ Scroll position may have been updated by cDM\/cDU,\n+ \/\/ In which case we don't need to trigger another render,\n+ \/\/ And we don't want to update state.isScrolling.\n+ return null;\n+ }\n+\n+ var direction = _this.props.direction;\n+ var scrollOffset = scrollLeft;\n+\n+ if (direction === 'rtl') {\n+ \/\/ TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.\n+ \/\/ This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).\n+ \/\/ It's also easier for this component if we convert offsets to the same format as they would be in for ltr.\n+ \/\/ So the simplest solution is to determine which browser behavior we're dealing with, and convert based on it.\n+ switch (getRTLOffsetType()) {\n+ case 'negative':\n+ scrollOffset = -scrollLeft;\n+ break;\n+\n+ case 'positive-descending':\n+ scrollOffset = scrollWidth - clientWidth - scrollLeft;\n+ break;\n+ }\n+ } \/\/ Prevent Safari's elastic scrolling from causing visual shaking when scrolling past bounds.\n+\n+\n+ scrollOffset = Math.max(0, Math.min(scrollOffset, scrollWidth - clientWidth));\n+ return {\n+ isScrolling: true,\n+ scrollDirection: prevState.scrollOffset < scrollLeft ? 'forward' : 'backward',\n+ scrollOffset: scrollOffset,\n+ scrollUpdateWasRequested: false\n+ };\n+ }, _this._resetIsScrollingDebounced);\n+ };\n+\n+ _this._onScrollVertical = function (event) {\n+ var _event$currentTarget2 = event.currentTarget,\n+ clientHeight = _event$currentTarget2.clientHeight,\n+ scrollHeight = _event$currentTarget2.scrollHeight,\n+ scrollTop = _event$currentTarget2.scrollTop;\n+\n+ _this.setState(function (prevState) {\n+ if (prevState.scrollOffset === scrollTop) {\n+ \/\/ Scroll position may have been updated by cDM\/cDU,\n+ \/\/ In which case we don't need to trigger another render,\n+ \/\/ And we don't want to update state.isScrolling.\n+ return null;\n+ } \/\/ Prevent Safari's elastic scrolling from causing visual shaking when scrolling past bounds.\n+\n+\n+ var scrollOffset = Math.max(0, Math.min(scrollTop, scrollHeight - clientHeight));\n+ return {\n+ isScrolling: true,\n+ scrollDirection: prevState.scrollOffset < scrollOffset ? 'forward' : 'backward',\n+ scrollOffset: scrollOffset,\n+ scrollUpdateWasRequested: false\n+ };\n+ }, _this._resetIsScrollingDebounced);\n+ };\n+\n+ _this._outerRefSetter = function (ref) {\n+ var outerRef = _this.props.outerRef;\n+ _this._outerRef = ref;\n+\n+ if (typeof outerRef === 'function') {\n+ outerRef(ref);\n+ } else if (outerRef != null && typeof outerRef === 'object' && outerRef.hasOwnProperty('current')) {\n+ outerRef.current = ref;\n+ }\n+ };\n+\n+ _this._resetIsScrollingDebounced = function () {\n+ if (_this._resetIsScrollingTimeoutId !== null) {\n+ cancelTimeout(_this._resetIsScrollingTimeoutId);\n+ }\n+\n+ _this._resetIsScrollingTimeoutId = requestTimeout(_this._resetIsScrolling, IS_SCROLLING_DEBOUNCE_INTERVAL$1);\n+ };\n+\n+ _this._resetIsScrolling = function () {\n+ _this._resetIsScrollingTimeoutId = null;\n+\n+ _this.setState({\n+ isScrolling: false\n+ }, function () {\n+ \/\/ Clear style cache after state update has been committed.\n+ \/\/ This way we don't break pure sCU for items that don't use isScrolling param.\n+ _this._getItemStyleCache(-1, null);\n+ });\n+ };\n+\n+ return _this;\n+ }\n+\n+ List.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {\n+ validateSharedProps$1(nextProps, prevState);\n+ validateProps(nextProps);\n+ return null;\n+ };\n+\n+ var _proto = List.prototype;\n+\n+ _proto.scrollTo = function scrollTo(scrollOffset) {\n+ scrollOffset = Math.max(0, scrollOffset);\n+ this.setState(function (prevState) {\n+ if (prevState.scrollOffset === scrollOffset) {\n+ return null;\n+ }\n+\n+ return {\n+ scrollDirection: prevState.scrollOffset < scrollOffset ? 'forward' : 'backward',\n+ scrollOffset: scrollOffset,\n+ scrollUpdateWasRequested: true\n+ };\n+ }, this._resetIsScrollingDebounced);\n+ };\n+\n+ _proto.scrollToItem = function scrollToItem(index, align) {\n+ if (align === void 0) {\n+ align = 'auto';\n+ }\n+\n+ var itemCount = this.props.itemCount;\n+ var scrollOffset = this.state.scrollOffset;\n+ index = Math.max(0, Math.min(index, itemCount - 1));\n+ this.scrollTo(getOffsetForIndexAndAlignment(this.props, index, align, scrollOffset, this._instanceProps));\n+ };\n+\n+ _proto.componentDidMount = function componentDidMount() {\n+ var _this$props2 = this.props,\n+ direction = _this$props2.direction,\n+ initialScrollOffset = _this$props2.initialScrollOffset,\n+ layout = _this$props2.layout;\n+\n+ if (typeof initialScrollOffset === 'number' && this._outerRef != null) {\n+ var outerRef = this._outerRef; \/\/ TODO Deprecate direction \"horizontal\"\n+\n+ if (direction === 'horizontal' || layout === 'horizontal') {\n+ outerRef.scrollLeft = initialScrollOffset;\n+ } else {\n+ outerRef.scrollTop = initialScrollOffset;\n+ }\n+ }\n+\n+ this._callPropsCallbacks();\n+ };\n+\n+ _proto.componentDidUpdate = function componentDidUpdate() {\n+ var _this$props3 = this.props,\n+ direction = _this$props3.direction,\n+ layout = _this$props3.layout;\n+ var _this$state = this.state,\n+ scrollOffset = _this$state.scrollOffset,\n+ scrollUpdateWasRequested = _this$state.scrollUpdateWasRequested;\n+\n+ if (scrollUpdateWasRequested && this._outerRef != null) {\n+ var outerRef = this._outerRef; \/\/ TODO Deprecate direction \"horizontal\"\n+\n+ if (direction === 'horizontal' || layout === 'horizontal') {\n+ if (direction === 'rtl') {\n+ \/\/ TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.\n+ \/\/ This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).\n+ \/\/ So we need to determine which browser behavior we're dealing with, and mimic it.\n+ switch (getRTLOffsetType()) {\n+ case 'negative':\n+ outerRef.scrollLeft = -scrollOffset;\n+ break;\n+\n+ case 'positive-ascending':\n+ outerRef.scrollLeft = scrollOffset;\n+ break;\n+\n+ default:\n+ var clientWidth = outerRef.clientWidth,\n+ scrollWidth = outerRef.scrollWidth;\n+ outerRef.scrollLeft = scrollWidth - clientWidth - scrollOffset;\n+ break;\n+ }\n+ } else {\n+ outerRef.scrollLeft = scrollOffset;\n+ }\n+ } else {\n+ outerRef.scrollTop = scrollOffset;\n+ }\n+ }\n+\n+ this._callPropsCallbacks();\n+ };\n+\n+ _proto.componentWillUnmount = function componentWillUnmount() {\n+ if (this._resetIsScrollingTimeoutId !== null) {\n+ cancelTimeout(this._resetIsScrollingTimeoutId);\n+ }\n+ };\n+\n+ _proto.render = function render() {\n+ var _this$props4 = this.props,\n+ children = _this$props4.children,\n+ className = _this$props4.className,\n+ direction = _this$props4.direction,\n+ height = _this$props4.height,\n+ innerRef = _this$props4.innerRef,\n+ innerElementType = _this$props4.innerElementType,\n+ innerTagName = _this$props4.innerTagName,\n+ itemCount = _this$props4.itemCount,\n+ itemData = _this$props4.itemData,\n+ _this$props4$itemKey = _this$props4.itemKey,\n+ itemKey = _this$props4$itemKey === void 0 ? defaultItemKey$1 : _this$props4$itemKey,\n+ layout = _this$props4.layout,\n+ outerElementType = _this$props4.outerElementType,\n+ outerTagName = _this$props4.outerTagName,\n+ style = _this$props4.style,\n+ useIsScrolling = _this$props4.useIsScrolling,\n+ width = _this$props4.width;\n+ var isScrolling = this.state.isScrolling; \/\/ TODO Deprecate direction \"horizontal\"\n+\n+ var isHorizontal = direction === 'horizontal' || layout === 'horizontal';\n+ var onScroll = isHorizontal ? this._onScrollHorizontal : this._onScrollVertical;\n+\n+ var _this$_getRangeToRend = this._getRangeToRender(),\n+ startIndex = _this$_getRangeToRend[0],\n+ stopIndex = _this$_getRangeToRend[1];\n+\n+ var items = [];\n+\n+ if (itemCount > 0) {\n+ for (var _index = startIndex; _index <= stopIndex; _index++) {\n+ items.push(react.createElement(children, {\n+ data: itemData,\n+ key: itemKey(_index, itemData),\n+ index: _index,\n+ isScrolling: useIsScrolling ? isScrolling : undefined,\n+ style: this._getItemStyle(_index)\n+ }));\n+ }\n+ } \/\/ Read this value AFTER items have been created,\n+ \/\/ So their actual sizes (if variable) are taken into consideration.\n+\n+\n+ var estimatedTotalSize = getEstimatedTotalSize(this.props, this._instanceProps);\n+ return react.createElement(outerElementType || outerTagName || 'div', {\n+ className: className,\n+ onScroll: onScroll,\n+ ref: this._outerRefSetter,\n+ style: _extends({\n+ position: 'relative',\n+ height: height,\n+ width: width,\n+ overflow: 'auto',\n+ WebkitOverflowScrolling: 'touch',\n+ willChange: 'transform',\n+ direction: direction\n+ }, style)\n+ }, react.createElement(innerElementType || innerTagName || 'div', {\n+ children: items,\n+ ref: innerRef,\n+ style: {\n+ height: isHorizontal ? '100%' : estimatedTotalSize,\n+ pointerEvents: isScrolling ? 'none' : undefined,\n+ width: isHorizontal ? estimatedTotalSize : '100%'\n+ }\n+ }));\n+ };\n+\n+ _proto._callPropsCallbacks = function _callPropsCallbacks() {\n+ if (typeof this.props.onItemsRendered === 'function') {\n+ var itemCount = this.props.itemCount;\n+\n+ if (itemCount > 0) {\n+ var _this$_getRangeToRend2 = this._getRangeToRender(),\n+ _overscanStartIndex = _this$_getRangeToRend2[0],\n+ _overscanStopIndex = _this$_getRangeToRend2[1],\n+ _visibleStartIndex = _this$_getRangeToRend2[2],\n+ _visibleStopIndex = _this$_getRangeToRend2[3];\n+\n+ this._callOnItemsRendered(_overscanStartIndex, _overscanStopIndex, _visibleStartIndex, _visibleStopIndex);\n+ }\n+ }\n+\n+ if (typeof this.props.onScroll === 'function') {\n+ var _this$state2 = this.state,\n+ _scrollDirection = _this$state2.scrollDirection,\n+ _scrollOffset = _this$state2.scrollOffset,\n+ _scrollUpdateWasRequested = _this$state2.scrollUpdateWasRequested;\n+\n+ this._callOnScroll(_scrollDirection, _scrollOffset, _scrollUpdateWasRequested);\n+ }\n+ }; \/\/ Lazily create and cache item styles while scrolling,\n+ \/\/ So that pure component sCU will prevent re-renders.\n+ \/\/ We maintain this cache, and pass a style prop rather than index,\n+ \/\/ So that List can clear cached styles and force item re-render if necessary.\n+\n+\n+ _proto._getRangeToRender = function _getRangeToRender() {\n+ var _this$props5 = this.props,\n+ itemCount = _this$props5.itemCount,\n+ overscanCount = _this$props5.overscanCount;\n+ var _this$state3 = this.state,\n+ isScrolling = _this$state3.isScrolling,\n+ scrollDirection = _this$state3.scrollDirection,\n+ scrollOffset = _this$state3.scrollOffset;\n+\n+ if (itemCount === 0) {\n+ return [0, 0, 0, 0];\n+ }\n+\n+ var startIndex = getStartIndexForOffset(this.props, scrollOffset, this._instanceProps);\n+ var stopIndex = getStopIndexForStartIndex(this.props, startIndex, scrollOffset, this._instanceProps); \/\/ Overscan by one item in each direction so that tab\/focus works.\n+ \/\/ If there isn't at least one extra item, tab loops back around.\n+\n+ var overscanBackward = !isScrolling || scrollDirection === 'backward' ? Math.max(1, overscanCount) : 1;\n+ var overscanForward = !isScrolling || scrollDirection === 'forward' ? Math.max(1, overscanCount) : 1;\n+ return [Math.max(0, startIndex - overscanBackward), Math.max(0, Math.min(itemCount - 1, stopIndex + overscanForward)), startIndex, stopIndex];\n+ };\n+\n+ return List;\n+ }(react.PureComponent), _class.defaultProps = {\n+ direction: 'ltr',\n+ itemData: undefined,\n+ layout: 'vertical',\n+ overscanCount: 2,\n+ useIsScrolling: false\n+ }, _temp;\n+} \/\/ NOTE: I considered further wrapping individual items with a pure ListItem component.\n+\/\/ This would avoid ever calling the render function for the same index more than once,\n+\/\/ But it would also add the overhead of a lot of components\/fibers.\n+\/\/ I assume people already do this (render function returning a class component),\n+\/\/ So my doing it would just unnecessarily double the wrappers.\n+\n+var validateSharedProps$1 = function validateSharedProps(_ref2, _ref3) {\n+ var children = _ref2.children,\n+ direction = _ref2.direction,\n+ height = _ref2.height,\n+ layout = _ref2.layout,\n+ innerTagName = _ref2.innerTagName,\n+ outerTagName = _ref2.outerTagName,\n+ width = _ref2.width;\n+ var instance = _ref3.instance;\n+\n+ if (process.env.NODE_ENV !== 'production') {\n+ if (innerTagName != null || outerTagName != null) {\n+ if (devWarningsTagName$1 && !devWarningsTagName$1.has(instance)) {\n+ devWarningsTagName$1.add(instance);\n+ console.warn('The innerTagName and outerTagName props have been deprecated. ' + 'Please use the innerElementType and outerElementType props instead.');\n+ }\n+ } \/\/ TODO Deprecate direction \"horizontal\"\n+\n+\n+ var isHorizontal = direction === 'horizontal' || layout === 'horizontal';\n+\n+ switch (direction) {\n+ case 'horizontal':\n+ case 'vertical':\n+ if (devWarningsDirection && !devWarningsDirection.has(instance)) {\n+ devWarningsDirection.add(instance);\n+ console.warn('The direction prop should be either \"ltr\" (default) or \"rtl\". ' + 'Please use the layout prop to specify \"vertical\" (default) or \"horizontal\" orientation.');\n+ }\n+\n+ break;\n+\n+ case 'ltr':\n+ case 'rtl':\n+ \/\/ Valid values\n+ break;\n+\n+ default:\n+ throw Error('An invalid \"direction\" prop has been specified. ' + 'Value should be either \"ltr\" or \"rtl\". ' + (\"\\\"\" + direction + \"\\\" was specified.\"));\n+ }\n+\n+ switch (layout) {\n+ case 'horizontal':\n+ case 'vertical':\n+ \/\/ Valid values\n+ break;\n+\n+ default:\n+ throw Error('An invalid \"layout\" prop has been specified. ' + 'Value should be either \"horizontal\" or \"vertical\". ' + (\"\\\"\" + layout + \"\\\" was specified.\"));\n+ }\n+\n+ if (children == null) {\n+ throw Error('An invalid \"children\" prop has been specified. ' + 'Value should be a React component. ' + (\"\\\"\" + (children === null ? 'null' : typeof children) + \"\\\" was specified.\"));\n+ }\n+\n+ if (isHorizontal && typeof width !== 'number') {\n+ throw Error('An invalid \"width\" prop has been specified. ' + 'Horizontal lists must specify a number for width. ' + (\"\\\"\" + (width === null ? 'null' : typeof width) + \"\\\" was specified.\"));\n+ } else if (!isHorizontal && typeof height !== 'number') {\n+ throw Error('An invalid \"height\" prop has been specified. ' + 'Vertical lists must specify a number for height. ' + (\"\\\"\" + (height === null ? 'null' : typeof height) + \"\\\" was specified.\"));\n+ }\n+ }\n+};\n+\n+var DEFAULT_ESTIMATED_ITEM_SIZE$1 = 50;\n+\n+var getItemMetadata$1 = function getItemMetadata(props, index, instanceProps) {\n+ var _ref = props,\n+ itemSize = _ref.itemSize;\n+ var itemMetadataMap = instanceProps.itemMetadataMap,\n+ lastMeasuredIndex = instanceProps.lastMeasuredIndex;\n+\n+ if (index > lastMeasuredIndex) {\n+ var offset = 0;\n+\n+ if (lastMeasuredIndex >= 0) {\n+ var itemMetadata = itemMetadataMap[lastMeasuredIndex];\n+ offset = itemMetadata.offset + itemMetadata.size;\n+ }\n+\n+ for (var i = lastMeasuredIndex + 1; i <= index; i++) {\n+ var size = itemSize(i);\n+ itemMetadataMap[i] = {\n+ offset: offset,\n+ size: size\n+ };\n+ offset += size;\n+ }\n+\n+ instanceProps.lastMeasuredIndex = index;\n+ }\n+\n+ return itemMetadataMap[index];\n+};\n+\n+var findNearestItem$1 = function findNearestItem(props, instanceProps, offset) {\n+ var itemMetadataMap = instanceProps.itemMetadataMap,\n+ lastMeasuredIndex = instanceProps.lastMeasuredIndex;\n+ var lastMeasuredItemOffset = lastMeasuredIndex > 0 ? itemMetadataMap[lastMeasuredIndex].offset : 0;\n+\n+ if (lastMeasuredItemOffset >= offset) {\n+ \/\/ If we've already measured items within this range just use a binary search as it's faster.\n+ return findNearestItemBinarySearch$1(props, instanceProps, lastMeasuredIndex, 0, offset);\n+ } else {\n+ \/\/ If we haven't yet measured this high, fallback to an exponential search with an inner binary search.\n+ \/\/ The exponential search avoids pre-computing sizes for the full set of items as a binary search would.\n+ \/\/ The overall complexity for this approach is O(log n).\n+ return findNearestItemExponentialSearch$1(props, instanceProps, Math.max(0, lastMeasuredIndex), offset);\n+ }\n+};\n+\n+var findNearestItemBinarySearch$1 = function findNearestItemBinarySearch(props, instanceProps, high, low, offset) {\n+ while (low <= high) {\n+ var middle = low + Math.floor((high - low) \/ 2);\n+ var currentOffset = getItemMetadata$1(props, middle, instanceProps).offset;\n+\n+ if (currentOffset === offset) {\n+ return middle;\n+ } else if (currentOffset < offset) {\n+ low = middle + 1;\n+ } else if (currentOffset > offset) {\n+ high = middle - 1;\n+ }\n+ }\n+\n+ if (low > 0) {\n+ return low - 1;\n+ } else {\n+ return 0;\n+ }\n+};\n+\n+var findNearestItemExponentialSearch$1 = function findNearestItemExponentialSearch(props, instanceProps, index, offset) {\n+ var itemCount = props.itemCount;\n+ var interval = 1;\n+\n+ while (index < itemCount && getItemMetadata$1(props, index, instanceProps).offset < offset) {\n+ index += interval;\n+ interval *= 2;\n+ }\n+\n+ return findNearestItemBinarySearch$1(props, instanceProps, Math.min(index, itemCount - 1), Math.floor(index \/ 2), offset);\n+};\n+\n+var getEstimatedTotalSize = function getEstimatedTotalSize(_ref2, _ref3) {\n+ var itemCount = _ref2.itemCount;\n+ var itemMetadataMap = _ref3.itemMetadataMap,\n+ estimatedItemSize = _ref3.estimatedItemSize,\n+ lastMeasuredIndex = _ref3.lastMeasuredIndex;\n+ var totalSizeOfMeasuredItems = 0; \/\/ Edge case check for when the number of items decreases while a scroll is in progress.\n+ \/\/ https:\/\/github.com\/bvaughn\/react-window\/pull\/138\n+\n+ if (lastMeasuredIndex >= itemCount) {\n+ lastMeasuredIndex = itemCount - 1;\n+ }\n+\n+ if (lastMeasuredIndex >= 0) {\n+ var itemMetadata = itemMetadataMap[lastMeasuredIndex];\n+ totalSizeOfMeasuredItems = itemMetadata.offset + itemMetadata.size;\n+ }\n+\n+ var numUnmeasuredItems = itemCount - lastMeasuredIndex - 1;\n+ var totalSizeOfUnmeasuredItems = numUnmeasuredItems * estimatedItemSize;\n+ return totalSizeOfMeasuredItems + totalSizeOfUnmeasuredItems;\n+};\n+\n+var VariableSizeList =\n+\/*#__PURE__*\/\n+createListComponent({\n+ getItemOffset: function getItemOffset(props, index, instanceProps) {\n+ return getItemMetadata$1(props, index, instanceProps).offset;\n+ },\n+ getItemSize: function getItemSize(props, index, instanceProps) {\n+ return instanceProps.itemMetadataMap[index].size;\n+ },\n+ getEstimatedTotalSize: getEstimatedTotalSize,\n+ getOffsetForIndexAndAlignment: function getOffsetForIndexAndAlignment(props, index, align, scrollOffset, instanceProps) {\n+ var direction = props.direction,\n+ height = props.height,\n+ layout = props.layout,\n+ width = props.width; \/\/ TODO Deprecate direction \"horizontal\"\n+\n+ var isHorizontal = direction === 'horizontal' || layout === 'horizontal';\n+ var size = isHorizontal ? width : height;\n+ var itemMetadata = getItemMetadata$1(props, index, instanceProps); \/\/ Get estimated total size after ItemMetadata is computed,\n+ \/\/ To ensure it reflects actual measurements instead of just estimates.\n+\n+ var estimatedTotalSize = getEstimatedTotalSize(props, instanceProps);\n+ var maxOffset = Math.max(0, Math.min(estimatedTotalSize - size, itemMetadata.offset));\n+ var minOffset = Math.max(0, itemMetadata.offset - size + itemMetadata.size);\n+\n+ if (align === 'smart') {\n+ if (scrollOffset >= minOffset - size && scrollOffset <= maxOffset + size) {\n+ align = 'auto';\n+ } else {\n+ align = 'center';\n+ }\n+ }\n+\n+ switch (align) {\n+ case 'start':\n+ return maxOffset;\n+\n+ case 'end':\n+ return minOffset;\n+\n+ case 'center':\n+ return Math.round(minOffset + (maxOffset - minOffset) \/ 2);\n+\n+ case 'auto':\n+ default:\n+ if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {\n+ return scrollOffset;\n+ } else if (scrollOffset < minOffset) {\n+ return minOffset;\n+ } else {\n+ return maxOffset;\n+ }\n+\n+ }\n+ },\n+ getStartIndexForOffset: function getStartIndexForOffset(props, offset, instanceProps) {\n+ return findNearestItem$1(props, instanceProps, offset);\n+ },\n+ getStopIndexForStartIndex: function getStopIndexForStartIndex(props, startIndex, scrollOffset, instanceProps) {\n+ var direction = props.direction,\n+ height = props.height,\n+ itemCount = props.itemCount,\n+ layout = props.layout,\n+ width = props.width; \/\/ TODO Deprecate direction \"horizontal\"\n+\n+ var isHorizontal = direction === 'horizontal' || layout === 'horizontal';\n+ var size = isHorizontal ? width : height;\n+ var itemMetadata = getItemMetadata$1(props, startIndex, instanceProps);\n+ var maxOffset = scrollOffset + size;\n+ var offset = itemMetadata.offset + itemMetadata.size;\n+ var stopIndex = startIndex;\n+\n+ while (stopIndex < itemCount - 1 && offset < maxOffset) {\n+ stopIndex++;\n+ offset += getItemMetadata$1(props, stopIndex, instanceProps).size;\n+ }\n+\n+ return stopIndex;\n+ },\n+ initInstanceProps: function initInstanceProps(props, instance) {\n+ var _ref4 = props,\n+ estimatedItemSize = _ref4.estimatedItemSize;\n+ var instanceProps = {\n+ itemMetadataMap: {},\n+ estimatedItemSize: estimatedItemSize || DEFAULT_ESTIMATED_ITEM_SIZE$1,\n+ lastMeasuredIndex: -1\n+ };\n+\n+ instance.resetAfterIndex = function (index, shouldForceUpdate) {\n+ if (shouldForceUpdate === void 0) {\n+ shouldForceUpdate = true;\n+ }\n+\n+ instanceProps.lastMeasuredIndex = Math.min(instanceProps.lastMeasuredIndex, index - 1); \/\/ We could potentially optimize further by only evicting styles after this index,\n+ \/\/ But since styles are only cached while scrolling is in progress-\n+ \/\/ It seems an unnecessary optimization.\n+ \/\/ It's unlikely that resetAfterIndex() will be called while a user is scrolling.\n+\n+ instance._getItemStyleCache(-1);\n+\n+ if (shouldForceUpdate) {\n+ instance.forceUpdate();\n+ }\n+ };\n+\n+ return instanceProps;\n+ },\n+ shouldResetStyleCacheOnItemSizeChange: false,\n+ validateProps: function validateProps(_ref5) {\n+ var itemSize = _ref5.itemSize;\n+\n+ if (process.env.NODE_ENV !== 'production') {\n+ if (typeof itemSize !== 'function') {\n+ throw Error('An invalid \"itemSize\" prop has been specified. ' + 'Value should be a function. ' + (\"\\\"\" + (itemSize === null ? 'null' : typeof itemSize) + \"\\\" was specified.\"));\n+ }\n+ }\n+ }\n+});\n+\n+var FixedSizeGrid =\n+\/*#__PURE__*\/\n+createGridComponent({\n+ getColumnOffset: function getColumnOffset(_ref, index) {\n+ var columnWidth = _ref.columnWidth;\n+ return index * columnWidth;\n+ },\n+ getColumnWidth: function getColumnWidth(_ref2, index) {\n+ var columnWidth = _ref2.columnWidth;\n+ return columnWidth;\n+ },\n+ getRowOffset: function getRowOffset(_ref3, index) {\n+ var rowHeight = _ref3.rowHeight;\n+ return index * rowHeight;\n+ },\n+ getRowHeight: function getRowHeight(_ref4, index) {\n+ var rowHeight = _ref4.rowHeight;\n+ return rowHeight;\n+ },\n+ getEstimatedTotalHeight: function getEstimatedTotalHeight(_ref5) {\n+ var rowCount = _ref5.rowCount,\n+ rowHeight = _ref5.rowHeight;\n+ return rowHeight * rowCount;\n+ },\n+ getEstimatedTotalWidth: function getEstimatedTotalWidth(_ref6) {\n+ var columnCount = _ref6.columnCount,\n+ columnWidth = _ref6.columnWidth;\n+ return columnWidth * columnCount;\n+ },\n+ getOffsetForColumnAndAlignment: function getOffsetForColumnAndAlignment(_ref7, columnIndex, align, scrollLeft, instanceProps, scrollbarSize) {\n+ var columnCount = _ref7.columnCount,\n+ columnWidth = _ref7.columnWidth,\n+ width = _ref7.width;\n+ var lastColumnOffset = Math.max(0, columnCount * columnWidth - width);\n+ var maxOffset = Math.min(lastColumnOffset, columnIndex * columnWidth);\n+ var minOffset = Math.max(0, columnIndex * columnWidth - width + scrollbarSize + columnWidth);\n+\n+ if (align === 'smart') {\n+ if (scrollLeft >= minOffset - width && scrollLeft <= maxOffset + width) {\n+ align = 'auto';\n+ } else {\n+ align = 'center';\n+ }\n+ }\n+\n+ switch (align) {\n+ case 'start':\n+ return maxOffset;\n+\n+ case 'end':\n+ return minOffset;\n+\n+ case 'center':\n+ \/\/ \"Centered\" offset is usually the average of the min and max.\n+ \/\/ But near the edges of the list, this doesn't hold true.\n+ var middleOffset = Math.round(minOffset + (maxOffset - minOffset) \/ 2);\n+\n+ if (middleOffset < Math.ceil(width \/ 2)) {\n+ return 0; \/\/ near the beginning\n+ } else if (middleOffset > lastColumnOffset + Math.floor(width \/ 2)) {\n+ return lastColumnOffset; \/\/ near the end\n+ } else {\n+ return middleOffset;\n+ }\n+\n+ case 'auto':\n+ default:\n+ if (scrollLeft >= minOffset && scrollLeft <= maxOffset) {\n+ return scrollLeft;\n+ } else if (minOffset > maxOffset) {\n+ \/\/ Because we only take into account the scrollbar size when calculating minOffset\n+ \/\/ this value can be larger than maxOffset when at the end of the list\n+ return minOffset;\n+ } else if (scrollLeft < minOffset) {\n+ return minOffset;\n+ } else {\n+ return maxOffset;\n+ }\n+\n+ }\n+ },\n+ getOffsetForRowAndAlignment: function getOffsetForRowAndAlignment(_ref8, rowIndex, align, scrollTop, instanceProps, scrollbarSize) {\n+ var rowHeight = _ref8.rowHeight,\n+ height = _ref8.height,\n+ rowCount = _ref8.rowCount;\n+ var lastRowOffset = Math.max(0, rowCount * rowHeight - height);\n+ var maxOffset = Math.min(lastRowOffset, rowIndex * rowHeight);\n+ var minOffset = Math.max(0, rowIndex * rowHeight - height + scrollbarSize + rowHeight);\n+\n+ if (align === 'smart') {\n+ if (scrollTop >= minOffset - height && scrollTop <= maxOffset + height) {\n+ align = 'auto';\n+ } else {\n+ align = 'center';\n+ }\n+ }\n+\n+ switch (align) {\n+ case 'start':\n+ return maxOffset;\n+\n+ case 'end':\n+ return minOffset;\n+\n+ case 'center':\n+ \/\/ \"Centered\" offset is usually the average of the min and max.\n+ \/\/ But near the edges of the list, this doesn't hold true.\n+ var middleOffset = Math.round(minOffset + (maxOffset - minOffset) \/ 2);\n+\n+ if (middleOffset < Math.ceil(height \/ 2)) {\n+ return 0; \/\/ near the beginning\n+ } else if (middleOffset > lastRowOffset + Math.floor(height \/ 2)) {\n+ return lastRowOffset; \/\/ near the end\n+ } else {\n+ return middleOffset;\n+ }\n+\n+ case 'auto':\n+ default:\n+ if (scrollTop >= minOffset && scrollTop <= maxOffset) {\n+ return scrollTop;\n+ } else if (minOffset > maxOffset) {\n+ \/\/ Because we only take into account the scrollbar size when calculating minOffset\n+ \/\/ this value can be larger than maxOffset when at the end of the list\n+ return minOffset;\n+ } else if (scrollTop < minOffset) {\n+ return minOffset;\n+ } else {\n+ return maxOffset;\n+ }\n+\n+ }\n+ },\n+ getColumnStartIndexForOffset: function getColumnStartIndexForOffset(_ref9, scrollLeft) {\n+ var columnWidth = _ref9.columnWidth,\n+ columnCount = _ref9.columnCount;\n+ return Math.max(0, Math.min(columnCount - 1, Math.floor(scrollLeft \/ columnWidth)));\n+ },\n+ getColumnStopIndexForStartIndex: function getColumnStopIndexForStartIndex(_ref10, startIndex, scrollLeft) {\n+ var columnWidth = _ref10.columnWidth,\n+ columnCount = _ref10.columnCount,\n+ width = _ref10.width;\n+ var left = startIndex * columnWidth;\n+ var numVisibleColumns = Math.ceil((width + scrollLeft - left) \/ columnWidth);\n+ return Math.max(0, Math.min(columnCount - 1, startIndex + numVisibleColumns - 1 \/\/ -1 is because stop index is inclusive\n+ ));\n+ },\n+ getRowStartIndexForOffset: function getRowStartIndexForOffset(_ref11, scrollTop) {\n+ var rowHeight = _ref11.rowHeight,\n+ rowCount = _ref11.rowCount;\n+ return Math.max(0, Math.min(rowCount - 1, Math.floor(scrollTop \/ rowHeight)));\n+ },\n+ getRowStopIndexForStartIndex: function getRowStopIndexForStartIndex(_ref12, startIndex, scrollTop) {\n+ var rowHeight = _ref12.rowHeight,\n+ rowCount = _ref12.rowCount,\n+ height = _ref12.height;\n+ var top = startIndex * rowHeight;\n+ var numVisibleRows = Math.ceil((height + scrollTop - top) \/ rowHeight);\n+ return Math.max(0, Math.min(rowCount - 1, startIndex + numVisibleRows - 1 \/\/ -1 is because stop index is inclusive\n+ ));\n+ },\n+ initInstanceProps: function initInstanceProps(props) {\/\/ Noop\n+ },\n+ shouldResetStyleCacheOnItemSizeChange: true,\n+ validateProps: function validateProps(_ref13) {\n+ var columnWidth = _ref13.columnWidth,\n+ rowHeight = _ref13.rowHeight;\n+\n+ if (process.env.NODE_ENV !== 'production') {\n+ if (typeof columnWidth !== 'number') {\n+ throw Error('An invalid \"columnWidth\" prop has been specified. ' + 'Value should be a number. ' + (\"\\\"\" + (columnWidth === null ? 'null' : typeof columnWidth) + \"\\\" was specified.\"));\n+ }\n+\n+ if (typeof rowHeight !== 'number') {\n+ throw Error('An invalid \"rowHeight\" prop has been specified. ' + 'Value should be a number. ' + (\"\\\"\" + (rowHeight === null ? 'null' : typeof rowHeight) + \"\\\" was specified.\"));\n+ }\n+ }\n+ }\n+});\n+\n+var FixedSizeList =\n+\/*#__PURE__*\/\n+createListComponent({\n+ getItemOffset: function getItemOffset(_ref, index) {\n+ var itemSize = _ref.itemSize;\n+ return index * itemSize;\n+ },\n+ getItemSize: function getItemSize(_ref2, index) {\n+ var itemSize = _ref2.itemSize;\n+ return itemSize;\n+ },\n+ getEstimatedTotalSize: function getEstimatedTotalSize(_ref3) {\n+ var itemCount = _ref3.itemCount,\n+ itemSize = _ref3.itemSize;\n+ return itemSize * itemCount;\n+ },\n+ getOffsetForIndexAndAlignment: function getOffsetForIndexAndAlignment(_ref4, index, align, scrollOffset) {\n+ var direction = _ref4.direction,\n+ height = _ref4.height,\n+ itemCount = _ref4.itemCount,\n+ itemSize = _ref4.itemSize,\n+ layout = _ref4.layout,\n+ width = _ref4.width;\n+ \/\/ TODO Deprecate direction \"horizontal\"\n+ var isHorizontal = direction === 'horizontal' || layout === 'horizontal';\n+ var size = isHorizontal ? width : height;\n+ var lastItemOffset = Math.max(0, itemCount * itemSize - size);\n+ var maxOffset = Math.min(lastItemOffset, index * itemSize);\n+ var minOffset = Math.max(0, index * itemSize - size + itemSize);\n+\n+ if (align === 'smart') {\n+ if (scrollOffset >= minOffset - size && scrollOffset <= maxOffset + size) {\n+ align = 'auto';\n+ } else {\n+ align = 'center';\n+ }\n+ }\n+\n+ switch (align) {\n+ case 'start':\n+ return maxOffset;\n+\n+ case 'end':\n+ return minOffset;\n+\n+ case 'center':\n+ {\n+ \/\/ \"Centered\" offset is usually the average of the min and max.\n+ \/\/ But near the edges of the list, this doesn't hold true.\n+ var middleOffset = Math.round(minOffset + (maxOffset - minOffset) \/ 2);\n+\n+ if (middleOffset < Math.ceil(size \/ 2)) {\n+ return 0; \/\/ near the beginning\n+ } else if (middleOffset > lastItemOffset + Math.floor(size \/ 2)) {\n+ return lastItemOffset; \/\/ near the end\n+ } else {\n+ return middleOffset;\n+ }\n+ }\n+\n+ case 'auto':\n+ default:\n+ if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {\n+ return scrollOffset;\n+ } else if (scrollOffset < minOffset) {\n+ return minOffset;\n+ } else {\n+ return maxOffset;\n+ }\n+\n+ }\n+ },\n+ getStartIndexForOffset: function getStartIndexForOffset(_ref5, offset) {\n+ var itemCount = _ref5.itemCount,\n+ itemSize = _ref5.itemSize;\n+ return Math.max(0, Math.min(itemCount - 1, Math.floor(offset \/ itemSize)));\n+ },\n+ getStopIndexForStartIndex: function getStopIndexForStartIndex(_ref6, startIndex, scrollOffset) {\n+ var direction = _ref6.direction,\n+ height = _ref6.height,\n+ itemCount = _ref6.itemCount,\n+ itemSize = _ref6.itemSize,\n+ layout = _ref6.layout,\n+ width = _ref6.width;\n+ \/\/ TODO Deprecate direction \"horizontal\"\n+ var isHorizontal = direction === 'horizontal' || layout === 'horizontal';\n+ var offset = startIndex * itemSize;\n+ var size = isHorizontal ? width : height;\n+ var numVisibleItems = Math.ceil((size + scrollOffset - offset) \/ itemSize);\n+ return Math.max(0, Math.min(itemCount - 1, startIndex + numVisibleItems - 1 \/\/ -1 is because stop index is inclusive\n+ ));\n+ },\n+ initInstanceProps: function initInstanceProps(props) {\/\/ Noop\n+ },\n+ shouldResetStyleCacheOnItemSizeChange: true,\n+ validateProps: function validateProps(_ref7) {\n+ var itemSize = _ref7.itemSize;\n+\n+ if (process.env.NODE_ENV !== 'production') {\n+ if (typeof itemSize !== 'number') {\n+ throw Error('An invalid \"itemSize\" prop has been specified. ' + 'Value should be a number. ' + (\"\\\"\" + (itemSize === null ? 'null' : typeof itemSize) + \"\\\" was specified.\"));\n+ }\n+ }\n+ }\n+});\n+\n+\/\/ Pulled from react-compat\n+\/\/ https:\/\/github.com\/developit\/preact-compat\/blob\/7c5de00e7c85e2ffd011bf3af02899b63f699d3a\/src\/index.js#L349\n+function shallowDiffers(prev, next) {\n+ for (var attribute in prev) {\n+ if (!(attribute in next)) {\n+ return true;\n+ }\n+ }\n+\n+ for (var _attribute in next) {\n+ if (prev[_attribute] !== next[_attribute]) {\n+ return true;\n+ }\n+ }\n+\n+ return false;\n+}\n+\n+\/\/ It knows to compare individual style props and ignore the wrapper object.\n+\/\/ See https:\/\/reactjs.org\/docs\/react-api.html#reactmemo\n+\n+function areEqual(prevProps, nextProps) {\n+ var prevStyle = prevProps.style,\n+ prevRest = _objectWithoutPropertiesLoose(prevProps, [\"style\"]);\n+\n+ var nextStyle = nextProps.style,\n+ nextRest = _objectWithoutPropertiesLoose(nextProps, [\"style\"]);\n+\n+ return !shallowDiffers(prevStyle, nextStyle) && !shallowDiffers(prevRest, nextRest);\n+}\n+\n+\/\/ It knows to compare individual style props and ignore the wrapper object.\n+\/\/ See https:\/\/reactjs.org\/docs\/react-component.html#shouldcomponentupdate\n+\n+function shouldComponentUpdate(nextProps, nextState) {\n+ return !areEqual(this.props, nextProps) || shallowDiffers(this.state, nextState);\n+}\n+\n+exports.VariableSizeGrid = VariableSizeGrid;\n+exports.VariableSizeList = VariableSizeList;\n+exports.FixedSizeGrid = FixedSizeGrid;\n+exports.FixedSizeList = FixedSizeList;\n+exports.areEqual = areEqual;\n+exports.shouldComponentUpdate = shouldComponentUpdate;\n+\/\/# sourceMappingURL=index.cjs.js.map\ndiff --git a\/src\/node_modules\/react-window\/dist\/index.cjs.js.flow b\/src\/node_modules\/react-window\/dist\/index.cjs.js.flow\nnew file mode 100644\nindex 0000000000..6a6528bbe5\n--- \/dev\/null\n+++ b\/src\/node_modules\/react-window\/dist\/index.cjs.js.flow\n@@ -0,0 +1,3 @@\n+\/\/ @flow\n+\n+export * from '..\/src';\ndiff --git a\/src\/node_modules\/react-window\/dist\/index.esm.js b\/src\/node_modules\/react-window\/dist\/index.esm.js\nnew file mode 100644\nindex 0000000000..fed3a77c2c\n--- \/dev\/null\n+++ b\/src\/node_modules\/react-window\/dist\/index.esm.js\n@@ -0,0 +1,2078 @@\n+import _extends from '@babel\/runtime\/helpers\/esm\/extends';\n+import _inheritsLoose from '@babel\/runtime\/helpers\/esm\/inheritsLoose';\n+import _assertThisInitialized from '@babel\/runtime\/helpers\/esm\/assertThisInitialized';\n+import memoizeOne from 'memoize-one';\n+import { createElement, PureComponent } from 'react';\n+import { flushSync } from 'react-dom';\n+import _objectWithoutPropertiesLoose from '@babel\/runtime\/helpers\/esm\/objectWithoutPropertiesLoose';\n+\n+\/\/ Animation frame based implementation of setTimeout.\n+\/\/ Inspired by Joe Lambert, https:\/\/gist.github.com\/joelambert\/1002116#file-requesttimeout-js\n+var hasNativePerformanceNow = typeof performance === 'object' && typeof performance.now === 'function';\n+var now = hasNativePerformanceNow ? function () {\n+ return performance.now();\n+} : function () {\n+ return Date.now();\n+};\n+function cancelTimeout(timeoutID) {\n+ cancelAnimationFrame(timeoutID.id);\n+}\n+function requestTimeout(callback, delay) {\n+ var start = now();\n+\n+ function tick() {\n+ if (now() - start >= delay) {\n+ callback.call(null);\n+ } else {\n+ timeoutID.id = requestAnimationFrame(tick);\n+ }\n+ }\n+\n+ var timeoutID = {\n+ id: requestAnimationFrame(tick)\n+ };\n+ return timeoutID;\n+}\n+\n+var size = -1; \/\/ This utility copied from \"dom-helpers\" package.\n+\n+function getScrollbarSize(recalculate) {\n+ if (recalculate === void 0) {\n+ recalculate = false;\n+ }\n+\n+ if (size === -1 || recalculate) {\n+ var div = document.createElement('div');\n+ var style = div.style;\n+ style.width = '50px';\n+ style.height = '50px';\n+ style.overflow = 'scroll';\n+ document.body.appendChild(div);\n+ size = div.offsetWidth - div.clientWidth;\n+ document.body.removeChild(div);\n+ }\n+\n+ return size;\n+}\n+var cachedRTLResult = null; \/\/ TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.\n+\/\/ Chrome does not seem to adhere; its scrollLeft values are positive (measured relative to the left).\n+\/\/ Safari's elastic bounce makes detecting this even more complicated wrt potential false positives.\n+\/\/ The safest way to check this is to intentionally set a negative offset,\n+\/\/ and then verify that the subsequent \"scroll\" event matches the negative offset.\n+\/\/ If it does not match, then we can assume a non-standard RTL scroll implementation.\n+\n+function getRTLOffsetType(recalculate) {\n+ if (recalculate === void 0) {\n+ recalculate = false;\n+ }\n+\n+ if (cachedRTLResult === null || recalculate) {\n+ var outerDiv = document.createElement('div');\n+ var outerStyle = outerDiv.style;\n+ outerStyle.width = '50px';\n+ outerStyle.height = '50px';\n+ outerStyle.overflow = 'scroll';\n+ outerStyle.direction = 'rtl';\n+ var innerDiv = document.createElement('div');\n+ var innerStyle = innerDiv.style;\n+ innerStyle.width = '100px';\n+ innerStyle.height = '100px';\n+ outerDiv.appendChild(innerDiv);\n+ document.body.appendChild(outerDiv);\n+\n+ if (outerDiv.scrollLeft > 0) {\n+ cachedRTLResult = 'positive-descending';\n+ } else {\n+ outerDiv.scrollLeft = 1;\n+\n+ if (outerDiv.scrollLeft === 0) {\n+ cachedRTLResult = 'negative';\n+ } else {\n+ cachedRTLResult = 'positive-ascending';\n+ }\n+ }\n+\n+ document.body.removeChild(outerDiv);\n+ return cachedRTLResult;\n+ }\n+\n+ return cachedRTLResult;\n+}\n+\n+var IS_SCROLLING_DEBOUNCE_INTERVAL = 150;\n+\n+var defaultItemKey = function defaultItemKey(_ref) {\n+ var columnIndex = _ref.columnIndex,\n+ data = _ref.data,\n+ rowIndex = _ref.rowIndex;\n+ return rowIndex + \":\" + columnIndex;\n+}; \/\/ In DEV mode, this Set helps us only log a warning once per component instance.\n+\/\/ This avoids spamming the console every time a render happens.\n+\n+\n+var devWarningsOverscanCount = null;\n+var devWarningsOverscanRowsColumnsCount = null;\n+var devWarningsTagName = null;\n+\n+if (process.env.NODE_ENV !== 'production') {\n+ if (typeof window !== 'undefined' && typeof window.WeakSet !== 'undefined') {\n+ devWarningsOverscanCount =\n+ \/*#__PURE__*\/\n+ new WeakSet();\n+ devWarningsOverscanRowsColumnsCount =\n+ \/*#__PURE__*\/\n+ new WeakSet();\n+ devWarningsTagName =\n+ \/*#__PURE__*\/\n+ new WeakSet();\n+ }\n+}\n+\n+function createGridComponent(_ref2) {\n+ var _class, _temp;\n+\n+ var getColumnOffset = _ref2.getColumnOffset,\n+ getColumnStartIndexForOffset = _ref2.getColumnStartIndexForOffset,\n+ getColumnStopIndexForStartIndex = _ref2.getColumnStopIndexForStartIndex,\n+ getColumnWidth = _ref2.getColumnWidth,\n+ getEstimatedTotalHeight = _ref2.getEstimatedTotalHeight,\n+ getEstimatedTotalWidth = _ref2.getEstimatedTotalWidth,\n+ getOffsetForColumnAndAlignment = _ref2.getOffsetForColumnAndAlignment,\n+ getOffsetForRowAndAlignment = _ref2.getOffsetForRowAndAlignment,\n+ getRowHeight = _ref2.getRowHeight,\n+ getRowOffset = _ref2.getRowOffset,\n+ getRowStartIndexForOffset = _ref2.getRowStartIndexForOffset,\n+ getRowStopIndexForStartIndex = _ref2.getRowStopIndexForStartIndex,\n+ initInstanceProps = _ref2.initInstanceProps,\n+ shouldResetStyleCacheOnItemSizeChange = _ref2.shouldResetStyleCacheOnItemSizeChange,\n+ validateProps = _ref2.validateProps;\n+ return _temp = _class =\n+ \/*#__PURE__*\/\n+ function (_PureComponent) {\n+ _inheritsLoose(Grid, _PureComponent);\n+\n+ \/\/ Always use explicit constructor for React components.\n+ \/\/ It produces less code after transpilation. (#26)\n+ \/\/ eslint-disable-next-line no-useless-constructor\n+ function Grid(props) {\n+ var _this;\n+\n+ _this = _PureComponent.call(this, props) || this;\n+ _this._instanceProps = initInstanceProps(_this.props, _assertThisInitialized(_assertThisInitialized(_this)));\n+ _this._resetIsScrollingTimeoutId = null;\n+ _this._outerRef = void 0;\n+ _this.state = {\n+ instance: _assertThisInitialized(_assertThisInitialized(_this)),\n+ isScrolling: false,\n+ horizontalScrollDirection: 'forward',\n+ scrollLeft: typeof _this.props.initialScrollLeft === 'number' ? _this.props.initialScrollLeft : 0,\n+ scrollTop: typeof _this.props.initialScrollTop === 'number' ? _this.props.initialScrollTop : 0,\n+ scrollUpdateWasRequested: false,\n+ verticalScrollDirection: 'forward'\n+ };\n+ _this._callOnItemsRendered = void 0;\n+ _this._callOnItemsRendered = memoizeOne(function (overscanColumnStartIndex, overscanColumnStopIndex, overscanRowStartIndex, overscanRowStopIndex, visibleColumnStartIndex, visibleColumnStopIndex, visibleRowStartIndex, visibleRowStopIndex) {\n+ return _this.props.onItemsRendered({\n+ overscanColumnStartIndex: overscanColumnStartIndex,\n+ overscanColumnStopIndex: overscanColumnStopIndex,\n+ overscanRowStartIndex: overscanRowStartIndex,\n+ overscanRowStopIndex: overscanRowStopIndex,\n+ visibleColumnStartIndex: visibleColumnStartIndex,\n+ visibleColumnStopIndex: visibleColumnStopIndex,\n+ visibleRowStartIndex: visibleRowStartIndex,\n+ visibleRowStopIndex: visibleRowStopIndex\n+ });\n+ });\n+ _this._callOnScroll = void 0;\n+ _this._callOnScroll = memoizeOne(function (scrollLeft, scrollTop, horizontalScrollDirection, verticalScrollDirection, scrollUpdateWasRequested) {\n+ return _this.props.onScroll({\n+ horizontalScrollDirection: horizontalScrollDirection,\n+ scrollLeft: scrollLeft,\n+ scrollTop: scrollTop,\n+ verticalScrollDirection: verticalScrollDirection,\n+ scrollUpdateWasRequested: scrollUpdateWasRequested\n+ });\n+ });\n+ _this._getItemStyle = void 0;\n+\n+ _this._getItemStyle = function (rowIndex, columnIndex) {\n+ var _this$props = _this.props,\n+ columnWidth = _this$props.columnWidth,\n+ direction = _this$props.direction,\n+ rowHeight = _this$props.rowHeight;\n+\n+ var itemStyleCache = _this._getItemStyleCache(shouldResetStyleCacheOnItemSizeChange && columnWidth, shouldResetStyleCacheOnItemSizeChange && direction, shouldResetStyleCacheOnItemSizeChange && rowHeight);\n+\n+ var key = rowIndex + \":\" + columnIndex;\n+ var style;\n+\n+ if (itemStyleCache.hasOwnProperty(key)) {\n+ style = itemStyleCache[key];\n+ } else {\n+ var _style;\n+\n+ itemStyleCache[key] = style = (_style = {\n+ position: 'absolute'\n+ }, _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);\n+ }\n+\n+ return style;\n+ };\n+\n+ _this._getItemStyleCache = void 0;\n+ _this._getItemStyleCache = memoizeOne(function (_, __, ___) {\n+ return {};\n+ });\n+\n+ _this._onScroll = function (event) {\n+ var _event$currentTarget = event.currentTarget,\n+ clientHeight = _event$currentTarget.clientHeight,\n+ clientWidth = _event$currentTarget.clientWidth,\n+ scrollLeft = _event$currentTarget.scrollLeft,\n+ scrollTop = _event$currentTarget.scrollTop,\n+ scrollHeight = _event$currentTarget.scrollHeight,\n+ scrollWidth = _event$currentTarget.scrollWidth;\n+\n+ \/\/ Force flush sync for scroll updates to reduce visual checkerboarding.\n+ flushSync(() => {\n+ _this.setState(function (prevState) {\n+ if (prevState.scrollLeft === scrollLeft && prevState.scrollTop === scrollTop) {\n+ \/\/ Scroll position may have been updated by cDM\/cDU,\n+ \/\/ In which case we don't need to trigger another render,\n+ \/\/ And we don't want to update state.isScrolling.\n+ return null;\n+ }\n+\n+ var direction = _this.props.direction; \/\/ TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.\n+ \/\/ This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).\n+ \/\/ It's also easier for this component if we convert offsets to the same format as they would be in for ltr.\n+ \/\/ So the simplest solution is to determine which browser behavior we're dealing with, and convert based on it.\n+\n+ var calculatedScrollLeft = scrollLeft;\n+\n+ if (direction === 'rtl') {\n+ switch (getRTLOffsetType()) {\n+ case 'negative':\n+ calculatedScrollLeft = -scrollLeft;\n+ break;\n+\n+ case 'positive-descending':\n+ calculatedScrollLeft = scrollWidth - clientWidth - scrollLeft;\n+ break;\n+ }\n+ } \/\/ Prevent Safari's elastic scrolling from causing visual shaking when scrolling past bounds.\n+\n+\n+ calculatedScrollLeft = Math.max(0, Math.min(calculatedScrollLeft, scrollWidth - clientWidth));\n+ var calculatedScrollTop = Math.max(0, Math.min(scrollTop, scrollHeight - clientHeight));\n+ return {\n+ isScrolling: true,\n+ horizontalScrollDirection: prevState.scrollLeft < scrollLeft ? 'forward' : 'backward',\n+ scrollLeft: calculatedScrollLeft,\n+ scrollTop: calculatedScrollTop,\n+ verticalScrollDirection: prevState.scrollTop < scrollTop ? 'forward' : 'backward',\n+ scrollUpdateWasRequested: false\n+ };\n+ }, _this._resetIsScrollingDebounced);\n+ });\n+ };\n+\n+ _this._outerRefSetter = function (ref) {\n+ var outerRef = _this.props.outerRef;\n+ _this._outerRef = ref;\n+\n+ if (typeof outerRef === 'function') {\n+ outerRef(ref);\n+ } else if (outerRef != null && typeof outerRef === 'object' && outerRef.hasOwnProperty('current')) {\n+ outerRef.current = ref;\n+ }\n+ };\n+\n+ _this._resetIsScrollingDebounced = function () {\n+ if (_this._resetIsScrollingTimeoutId !== null) {\n+ cancelTimeout(_this._resetIsScrollingTimeoutId);\n+ }\n+\n+ _this._resetIsScrollingTimeoutId = requestTimeout(_this._resetIsScrolling, IS_SCROLLING_DEBOUNCE_INTERVAL);\n+ };\n+\n+ _this._resetIsScrolling = function () {\n+ _this._resetIsScrollingTimeoutId = null;\n+\n+ _this.setState({\n+ isScrolling: false\n+ }, function () {\n+ \/\/ Clear style cache after state update has been committed.\n+ \/\/ This way we don't break pure sCU for items that don't use isScrolling param.\n+ _this._getItemStyleCache(-1);\n+ });\n+ };\n+\n+ return _this;\n+ }\n+\n+ Grid.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {\n+ validateSharedProps(nextProps, prevState);\n+ validateProps(nextProps);\n+ return null;\n+ };\n+\n+ var _proto = Grid.prototype;\n+\n+ _proto.scrollTo = function scrollTo(_ref3) {\n+ var scrollLeft = _ref3.scrollLeft,\n+ scrollTop = _ref3.scrollTop;\n+\n+ if (scrollLeft !== undefined) {\n+ scrollLeft = Math.max(0, scrollLeft);\n+ }\n+\n+ if (scrollTop !== undefined) {\n+ scrollTop = Math.max(0, scrollTop);\n+ }\n+\n+ this.setState(function (prevState) {\n+ if (scrollLeft === undefined) {\n+ scrollLeft = prevState.scrollLeft;\n+ }\n+\n+ if (scrollTop === undefined) {\n+ scrollTop = prevState.scrollTop;\n+ }\n+\n+ if (prevState.scrollLeft === scrollLeft && prevState.scrollTop === scrollTop) {\n+ return null;\n+ }\n+\n+ return {\n+ horizontalScrollDirection: prevState.scrollLeft < scrollLeft ? 'forward' : 'backward',\n+ scrollLeft: scrollLeft,\n+ scrollTop: scrollTop,\n+ scrollUpdateWasRequested: true,\n+ verticalScrollDirection: prevState.scrollTop < scrollTop ? 'forward' : 'backward'\n+ };\n+ }, this._resetIsScrollingDebounced);\n+ };\n+\n+ _proto.scrollToItem = function scrollToItem(_ref4) {\n+ var _ref4$align = _ref4.align,\n+ align = _ref4$align === void 0 ? 'auto' : _ref4$align,\n+ columnIndex = _ref4.columnIndex,\n+ rowIndex = _ref4.rowIndex;\n+ var _this$props2 = this.props,\n+ columnCount = _this$props2.columnCount,\n+ height = _this$props2.height,\n+ rowCount = _this$props2.rowCount,\n+ width = _this$props2.width;\n+ var _this$state = this.state,\n+ scrollLeft = _this$state.scrollLeft,\n+ scrollTop = _this$state.scrollTop;\n+ var scrollbarSize = getScrollbarSize();\n+\n+ if (columnIndex !== undefined) {\n+ columnIndex = Math.max(0, Math.min(columnIndex, columnCount - 1));\n+ }\n+\n+ if (rowIndex !== undefined) {\n+ rowIndex = Math.max(0, Math.min(rowIndex, rowCount - 1));\n+ }\n+\n+ var estimatedTotalHeight = getEstimatedTotalHeight(this.props, this._instanceProps);\n+ var estimatedTotalWidth = getEstimatedTotalWidth(this.props, this._instanceProps); \/\/ The scrollbar size should be considered when scrolling an item into view,\n+ \/\/ to ensure it's fully visible.\n+ \/\/ But we only need to account for its size when it's actually visible.\n+\n+ var horizontalScrollbarSize = estimatedTotalWidth > width ? scrollbarSize : 0;\n+ var verticalScrollbarSize = estimatedTotalHeight > height ? scrollbarSize : 0;\n+ this.scrollTo({\n+ scrollLeft: columnIndex !== undefined ? getOffsetForColumnAndAlignment(this.props, columnIndex, align, scrollLeft, this._instanceProps, verticalScrollbarSize) : scrollLeft,\n+ scrollTop: rowIndex !== undefined ? getOffsetForRowAndAlignment(this.props, rowIndex, align, scrollTop, this._instanceProps, horizontalScrollbarSize) : scrollTop\n+ });\n+ };\n+\n+ _proto.componentDidMount = function componentDidMount() {\n+ var _this$props3 = this.props,\n+ initialScrollLeft = _this$props3.initialScrollLeft,\n+ initialScrollTop = _this$props3.initialScrollTop;\n+\n+ if (this._outerRef != null) {\n+ var outerRef = this._outerRef;\n+\n+ if (typeof initialScrollLeft === 'number') {\n+ outerRef.scrollLeft = initialScrollLeft;\n+ }\n+\n+ if (typeof initialScrollTop === 'number') {\n+ outerRef.scrollTop = initialScrollTop;\n+ }\n+ }\n+\n+ this._callPropsCallbacks();\n+ };\n+\n+ _proto.componentDidUpdate = function componentDidUpdate() {\n+ var direction = this.props.direction;\n+ var _this$state2 = this.state,\n+ scrollLeft = _this$state2.scrollLeft,\n+ scrollTop = _this$state2.scrollTop,\n+ scrollUpdateWasRequested = _this$state2.scrollUpdateWasRequested;\n+\n+ if (scrollUpdateWasRequested && this._outerRef != null) {\n+ \/\/ TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.\n+ \/\/ This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).\n+ \/\/ So we need to determine which browser behavior we're dealing with, and mimic it.\n+ var outerRef = this._outerRef;\n+\n+ if (direction === 'rtl') {\n+ switch (getRTLOffsetType()) {\n+ case 'negative':\n+ outerRef.scrollLeft = -scrollLeft;\n+ break;\n+\n+ case 'positive-ascending':\n+ outerRef.scrollLeft = scrollLeft;\n+ break;\n+\n+ default:\n+ var clientWidth = outerRef.clientWidth,\n+ scrollWidth = outerRef.scrollWidth;\n+ outerRef.scrollLeft = scrollWidth - clientWidth - scrollLeft;\n+ break;\n+ }\n+ } else {\n+ outerRef.scrollLeft = Math.max(0, scrollLeft);\n+ }\n+\n+ outerRef.scrollTop = Math.max(0, scrollTop);\n+ }\n+\n+ this._callPropsCallbacks();\n+ };\n+\n+ _proto.componentWillUnmount = function componentWillUnmount() {\n+ if (this._resetIsScrollingTimeoutId !== null) {\n+ cancelTimeout(this._resetIsScrollingTimeoutId);\n+ }\n+ };\n+\n+ _proto.render = function render() {\n+ var _this$props4 = this.props,\n+ children = _this$props4.children,\n+ className = _this$props4.className,\n+ columnCount = _this$props4.columnCount,\n+ direction = _this$props4.direction,\n+ height = _this$props4.height,\n+ innerRef = _this$props4.innerRef,\n+ innerElementType = _this$props4.innerElementType,\n+ innerTagName = _this$props4.innerTagName,\n+ itemData = _this$props4.itemData,\n+ _this$props4$itemKey = _this$props4.itemKey,\n+ itemKey = _this$props4$itemKey === void 0 ? defaultItemKey : _this$props4$itemKey,\n+ outerElementType = _this$props4.outerElementType,\n+ outerTagName = _this$props4.outerTagName,\n+ rowCount = _this$props4.rowCount,\n+ style = _this$props4.style,\n+ useIsScrolling = _this$props4.useIsScrolling,\n+ width = _this$props4.width;\n+ var isScrolling = this.state.isScrolling;\n+\n+ var _this$_getHorizontalR = this._getHorizontalRangeToRender(),\n+ columnStartIndex = _this$_getHorizontalR[0],\n+ columnStopIndex = _this$_getHorizontalR[1];\n+\n+ var _this$_getVerticalRan = this._getVerticalRangeToRender(),\n+ rowStartIndex = _this$_getVerticalRan[0],\n+ rowStopIndex = _this$_getVerticalRan[1];\n+\n+ var items = [];\n+\n+ if (columnCount > 0 && rowCount) {\n+ for (var _rowIndex = rowStartIndex; _rowIndex <= rowStopIndex; _rowIndex++) {\n+ for (var _columnIndex = columnStartIndex; _columnIndex <= columnStopIndex; _columnIndex++) {\n+ items.push(createElement(children, {\n+ columnIndex: _columnIndex,\n+ data: itemData,\n+ isScrolling: useIsScrolling ? isScrolling : undefined,\n+ key: itemKey({\n+ columnIndex: _columnIndex,\n+ data: itemData,\n+ rowIndex: _rowIndex\n+ }),\n+ rowIndex: _rowIndex,\n+ style: this._getItemStyle(_rowIndex, _columnIndex)\n+ }));\n+ }\n+ }\n+ } \/\/ Read this value AFTER items have been created,\n+ \/\/ So their actual sizes (if variable) are taken into consideration.\n+\n+\n+ var estimatedTotalHeight = getEstimatedTotalHeight(this.props, this._instanceProps);\n+ var estimatedTotalWidth = getEstimatedTotalWidth(this.props, this._instanceProps);\n+ return createElement(outerElementType || outerTagName || 'div', {\n+ className: className,\n+ onScroll: this._onScroll,\n+ ref: this._outerRefSetter,\n+ style: _extends({\n+ position: 'relative',\n+ height: height,\n+ width: width,\n+ overflow: 'auto',\n+ WebkitOverflowScrolling: 'touch',\n+ willChange: 'transform',\n+ direction: direction\n+ }, style)\n+ }, createElement(innerElementType || innerTagName || 'div', {\n+ children: items,\n+ ref: innerRef,\n+ style: {\n+ height: estimatedTotalHeight,\n+ pointerEvents: isScrolling ? 'none' : undefined,\n+ width: estimatedTotalWidth\n+ }\n+ }));\n+ };\n+\n+ _proto._callPropsCallbacks = function _callPropsCallbacks() {\n+ var _this$props5 = this.props,\n+ columnCount = _this$props5.columnCount,\n+ onItemsRendered = _this$props5.onItemsRendered,\n+ onScroll = _this$props5.onScroll,\n+ rowCount = _this$props5.rowCount;\n+\n+ if (typeof onItemsRendered === 'function') {\n+ if (columnCount > 0 && rowCount > 0) {\n+ var _this$_getHorizontalR2 = this._getHorizontalRangeToRender(),\n+ _overscanColumnStartIndex = _this$_getHorizontalR2[0],\n+ _overscanColumnStopIndex = _this$_getHorizontalR2[1],\n+ _visibleColumnStartIndex = _this$_getHorizontalR2[2],\n+ _visibleColumnStopIndex = _this$_getHorizontalR2[3];\n+\n+ var _this$_getVerticalRan2 = this._getVerticalRangeToRender(),\n+ _overscanRowStartIndex = _this$_getVerticalRan2[0],\n+ _overscanRowStopIndex = _this$_getVerticalRan2[1],\n+ _visibleRowStartIndex = _this$_getVerticalRan2[2],\n+ _visibleRowStopIndex = _this$_getVerticalRan2[3];\n+\n+ this._callOnItemsRendered(_overscanColumnStartIndex, _overscanColumnStopIndex, _overscanRowStartIndex, _overscanRowStopIndex, _visibleColumnStartIndex, _visibleColumnStopIndex, _visibleRowStartIndex, _visibleRowStopIndex);\n+ }\n+ }\n+\n+ if (typeof onScroll === 'function') {\n+ var _this$state3 = this.state,\n+ _horizontalScrollDirection = _this$state3.horizontalScrollDirection,\n+ _scrollLeft = _this$state3.scrollLeft,\n+ _scrollTop = _this$state3.scrollTop,\n+ _scrollUpdateWasRequested = _this$state3.scrollUpdateWasRequested,\n+ _verticalScrollDirection = _this$state3.verticalScrollDirection;\n+\n+ this._callOnScroll(_scrollLeft, _scrollTop, _horizontalScrollDirection, _verticalScrollDirection, _scrollUpdateWasRequested);\n+ }\n+ }; \/\/ Lazily create and cache item styles while scrolling,\n+ \/\/ So that pure component sCU will prevent re-renders.\n+ \/\/ We maintain this cache, and pass a style prop rather than index,\n+ \/\/ So that List can clear cached styles and force item re-render if necessary.\n+\n+\n+ _proto._getHorizontalRangeToRender = function _getHorizontalRangeToRender() {\n+ var _this$props6 = this.props,\n+ columnCount = _this$props6.columnCount,\n+ overscanColumnCount = _this$props6.overscanColumnCount,\n+ overscanColumnsCount = _this$props6.overscanColumnsCount,\n+ overscanCount = _this$props6.overscanCount,\n+ rowCount = _this$props6.rowCount;\n+ var _this$state4 = this.state,\n+ horizontalScrollDirection = _this$state4.horizontalScrollDirection,\n+ isScrolling = _this$state4.isScrolling,\n+ scrollLeft = _this$state4.scrollLeft;\n+ var overscanCountResolved = overscanColumnCount || overscanColumnsCount || overscanCount || 1;\n+\n+ if (columnCount === 0 || rowCount === 0) {\n+ return [0, 0, 0, 0];\n+ }\n+\n+ var startIndex = getColumnStartIndexForOffset(this.props, scrollLeft, this._instanceProps);\n+ var stopIndex = getColumnStopIndexForStartIndex(this.props, startIndex, scrollLeft, this._instanceProps); \/\/ Overscan by one item in each direction so that tab\/focus works.\n+ \/\/ If there isn't at least one extra item, tab loops back around.\n+\n+ var overscanBackward = !isScrolling || horizontalScrollDirection === 'backward' ? Math.max(1, overscanCountResolved) : 1;\n+ var overscanForward = !isScrolling || horizontalScrollDirection === 'forward' ? Math.max(1, overscanCountResolved) : 1;\n+ return [Math.max(0, startIndex - overscanBackward), Math.max(0, Math.min(columnCount - 1, stopIndex + overscanForward)), startIndex, stopIndex];\n+ };\n+\n+ _proto._getVerticalRangeToRender = function _getVerticalRangeToRender() {\n+ var _this$props7 = this.props,\n+ columnCount = _this$props7.columnCount,\n+ overscanCount = _this$props7.overscanCount,\n+ overscanRowCount = _this$props7.overscanRowCount,\n+ overscanRowsCount = _this$props7.overscanRowsCount,\n+ rowCount = _this$props7.rowCount;\n+ var _this$state5 = this.state,\n+ isScrolling = _this$state5.isScrolling,\n+ verticalScrollDirection = _this$state5.verticalScrollDirection,\n+ scrollTop = _this$state5.scrollTop;\n+ var overscanCountResolved = overscanRowCount || overscanRowsCount || overscanCount || 1;\n+\n+ if (columnCount === 0 || rowCount === 0) {\n+ return [0, 0, 0, 0];\n+ }\n+\n+ var startIndex = getRowStartIndexForOffset(this.props, scrollTop, this._instanceProps);\n+ var stopIndex = getRowStopIndexForStartIndex(this.props, startIndex, scrollTop, this._instanceProps); \/\/ Overscan by one item in each direction so that tab\/focus works.\n+ \/\/ If there isn't at least one extra item, tab loops back around.\n+\n+ var overscanBackward = !isScrolling || verticalScrollDirection === 'backward' ? Math.max(1, overscanCountResolved) : 1;\n+ var overscanForward = !isScrolling || verticalScrollDirection === 'forward' ? Math.max(1, overscanCountResolved) : 1;\n+ return [Math.max(0, startIndex - overscanBackward), Math.max(0, Math.min(rowCount - 1, stopIndex + overscanForward)), startIndex, stopIndex];\n+ };\n+\n+ return Grid;\n+ }(PureComponent), _class.defaultProps = {\n+ direction: 'ltr',\n+ itemData: undefined,\n+ useIsScrolling: false\n+ }, _temp;\n+}\n+\n+var validateSharedProps = function validateSharedProps(_ref5, _ref6) {\n+ var children = _ref5.children,\n+ direction = _ref5.direction,\n+ height = _ref5.height,\n+ innerTagName = _ref5.innerTagName,\n+ outerTagName = _ref5.outerTagName,\n+ overscanColumnsCount = _ref5.overscanColumnsCount,\n+ overscanCount = _ref5.overscanCount,\n+ overscanRowsCount = _ref5.overscanRowsCount,\n+ width = _ref5.width;\n+ var instance = _ref6.instance;\n+\n+ if (process.env.NODE_ENV !== 'production') {\n+ if (typeof overscanCount === 'number') {\n+ if (devWarningsOverscanCount && !devWarningsOverscanCount.has(instance)) {\n+ devWarningsOverscanCount.add(instance);\n+ console.warn('The overscanCount prop has been deprecated. ' + 'Please use the overscanColumnCount and overscanRowCount props instead.');\n+ }\n+ }\n+\n+ if (typeof overscanColumnsCount === 'number' || typeof overscanRowsCount === 'number') {\n+ if (devWarningsOverscanRowsColumnsCount && !devWarningsOverscanRowsColumnsCount.has(instance)) {\n+ devWarningsOverscanRowsColumnsCount.add(instance);\n+ console.warn('The overscanColumnsCount and overscanRowsCount props have been deprecated. ' + 'Please use the overscanColumnCount and overscanRowCount pr</article></body></html>}}}}

dillon1000/react

Files changed