{"parents":["da508fc23fc34a2b671b141a878d6b5da2300ed8"],"files":[{"path":".eslintrc","status":"M"},{"path":"shells\/browser\/shared\/webpack.backend.js","status":"M"},{"path":"shells\/browser\/shared\/webpack.config.js","status":"M"},{"path":"shells\/dev\/webpack.config.js","status":"M"},{"path":"src\/devtools\/views\/Components\/Components.js","status":"M"},{"path":"src\/devtools\/views\/ErrorBoundary.css","status":"A"},{"path":"src\/devtools\/views\/ErrorBoundary.js","status":"A"},{"path":"src\/devtools\/views\/Profiler\/Profiler.js","status":"M"},{"path":"src\/devtools\/views\/Settings\/Settings.js","status":"M"},{"path":"src\/devtools\/views\/Settings\/SettingsContext.js","status":"M"},{"path":"src\/devtools\/views\/portaledContent.js","status":"A"},{"path":"src\/devtools\/views\/root.css","status":"M"}],"patch":"diff --git a\/.eslintrc b\/.eslintrc\nindex 7d12dff784..478f849f94 100644\n--- a\/.eslintrc\n+++ b\/.eslintrc\n@@ -2,6 +2,7 @@\n \"extends\": [\"react-app\",\"plugin:prettier\/recommended\"],\n \"plugins\": [\"react-hooks\"],\n \"rules\": {\n+ \"jsx-a11y\/anchor-has-content\": \"off\",\n \"react-hooks\/exhaustive-deps\": \"error\",\n \"react-hooks\/rules-of-hooks\": \"error\"\n },\ndiff --git a\/shells\/browser\/shared\/webpack.backend.js b\/shells\/browser\/shared\/webpack.backend.js\nindex bf158326f5..08ffeaa92c 100644\n--- a\/shells\/browser\/shared\/webpack.backend.js\n+++ b\/shells\/browser\/shared\/webpack.backend.js\n@@ -1,9 +1,18 @@\n+const { execSync } = require('child_process');\n const { readFileSync } = require('fs');\n const { resolve } = require('path');\n const { DefinePlugin } = require('webpack');\n \n const __DEV__ = process.env.NODE_ENV !== 'production';\n \n+\/\/ TODO potentially replac this with an fb.me URL (if it can forward the query params)\n+const GITHUB_URL = execSync('git remote get-url origin')\n+ .toString()\n+ .trim()\n+ .replace(':', '\/')\n+ .replace('git@', 'https:\/\/')\n+ .replace('.git', '');\n+\n const DEVTOOLS_VERSION = JSON.parse(\n readFileSync(resolve(__dirname, '..\/..\/..\/package.json'))\n ).version;\n@@ -27,6 +36,7 @@ module.exports = {\n new DefinePlugin({\n __DEV__: true,\n 'process.env.DEVTOOLS_VERSION': `\"${DEVTOOLS_VERSION}\"`,\n+ 'process.env.GITHUB_URL': `\"${GITHUB_URL}\"`,\n }),\n ],\n module: {\ndiff --git a\/shells\/browser\/shared\/webpack.config.js b\/shells\/browser\/shared\/webpack.config.js\nindex 42fc877751..2e59d3853c 100644\n--- a\/shells\/browser\/shared\/webpack.config.js\n+++ b\/shells\/browser\/shared\/webpack.config.js\n@@ -1,3 +1,4 @@\n+const { execSync } = require('child_process');\n const { readFileSync } = require('fs');\n const { resolve } = require('path');\n const { DefinePlugin } = require('webpack');\n@@ -5,6 +6,14 @@ const { DefinePlugin } = require('webpack');\n const NODE_ENV = process.env.NODE_ENV;\n const __DEV__ = NODE_ENV !== 'production';\n \n+\/\/ TODO potentially replac this with an fb.me URL (if it can forward the query params)\n+const GITHUB_URL = execSync('git remote get-url origin')\n+ .toString()\n+ .trim()\n+ .replace(':', '\/')\n+ .replace('git@', 'https:\/\/')\n+ .replace('.git', '');\n+\n const DEVTOOLS_VERSION = JSON.parse(\n readFileSync(resolve(__dirname, '..\/..\/..\/package.json'))\n ).version;\n@@ -33,6 +42,7 @@ module.exports = {\n new DefinePlugin({\n __DEV__: false,\n 'process.env.DEVTOOLS_VERSION': `\"${DEVTOOLS_VERSION}\"`,\n+ 'process.env.GITHUB_URL': `\"${GITHUB_URL}\"`,\n 'process.env.NODE_ENV': `\"${NODE_ENV}\"`,\n }),\n ],\ndiff --git a\/shells\/dev\/webpack.config.js b\/shells\/dev\/webpack.config.js\nindex 8e9ec32d23..1b66e06880 100644\n--- a\/shells\/dev\/webpack.config.js\n+++ b\/shells\/dev\/webpack.config.js\n@@ -1,9 +1,18 @@\n+const { execSync } = require('child_process');\n const { readFileSync } = require('fs');\n const { resolve } = require('path');\n const { DefinePlugin } = require('webpack');\n \n const __DEV__ = process.env.NODE_ENV !== 'production';\n \n+\/\/ TODO potentially replac this with an fb.me URL (if it can forward the query params)\n+const GITHUB_URL = execSync('git remote get-url origin')\n+ .toString()\n+ .trim()\n+ .replace(':', '\/')\n+ .replace('git@', 'https:\/\/')\n+ .replace('.git', '');\n+\n const DEVTOOLS_VERSION = JSON.parse(\n readFileSync(resolve(__dirname, '..\/..\/package.json'))\n ).version;\n@@ -30,6 +39,7 @@ module.exports = {\n plugins: [\n new DefinePlugin({\n __DEV__: __DEV__,\n+ 'process.env.GITHUB_URL': `\"${GITHUB_URL}\"`,\n 'process.env.DEVTOOLS_VERSION': `\"${DEVTOOLS_VERSION}\"`,\n }),\n ],\ndiff --git a\/src\/devtools\/views\/Components\/Components.js b\/src\/devtools\/views\/Components\/Components.js\nindex 8a6216baec..f38830baab 100644\n--- a\/src\/devtools\/views\/Components\/Components.js\n+++ b\/src\/devtools\/views\/Components\/Components.js\n@@ -1,18 +1,14 @@\n \/\/ @flow\n \n import React from 'react';\n-import { createPortal } from 'react-dom';\n import Tree from '.\/Tree';\n import SelectedElement from '.\/SelectedElement';\n import styles from '.\/Components.css';\n+import portaledContent from '..\/portaledContent';\n \n-export type Props = {|\n- portalContainer?: Element,\n-|};\n-\n-export default function Components({ portalContainer }: Props) {\n+function Components(_: {||}) {\n \/\/ TODO Flex wrappers below should be user resizable.\n- const children = (\n+ return (\n

\n \n@@ -22,8 +18,6 @@ export default function Components({ portalContainer }: Props) {\n <\/div>\n <\/div>\n );\n-\n- return portalContainer != null\n- ? createPortal(children, portalContainer)\n- : children;\n }\n+\n+export default portaledContent(Components);\ndiff --git a\/src\/devtools\/views\/ErrorBoundary.css b\/src\/devtools\/views\/ErrorBoundary.css\nnew file mode 100644\nindex 0000000000..eae6299fd7\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;\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 {\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+

\n+

\n+ An error was thrown: \"{errorMessage}\"\n+ <\/div>\n+ {bugURL && (\n+ \n+ Report this issue\n+ <\/a>\n+ )}\n+ {!!callStack && (\n+

\n+ The error was thrown {callStack.trim()}\n+ <\/div>\n+ )}\n+ {!!componentStack && (\n+

\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\/Profiler\/Profiler.js b\/src\/devtools\/views\/Profiler\/Profiler.js\nindex 4b346dd413..1a5e002c8a 100644\n--- a\/src\/devtools\/views\/Profiler\/Profiler.js\n+++ b\/src\/devtools\/views\/Profiler\/Profiler.js\n@@ -1,7 +1,6 @@\n \/\/ @flow\n \n import React, { Suspense, useCallback, useContext } from 'react';\n-import { createPortal } from 'react-dom';\n import {\n CommitFilterModalContext,\n CommitFilterModalContextController,\n@@ -21,25 +20,21 @@ import SidebarCommitInfo from '.\/SidebarCommitInfo';\n import SidebarInteractions from '.\/SidebarInteractions';\n import SidebarSelectedFiberInfo from '.\/SidebarSelectedFiberInfo';\n import ToggleCommitFilterModalButton from '.\/ToggleCommitFilterModalButton';\n+import portaledContent from '..\/portaledContent';\n \n import styles from '.\/Profiler.css';\n \n export type Props = {|\n- portalContainer?: Element,\n supportsProfiling: boolean,\n |};\n \n-export default function Profiler({\n- portalContainer,\n- supportsProfiling,\n-}: Props) {\n+function Profiler({ supportsProfiling }: Props) {\n const { hasProfilingData, isProfiling, rootHasProfilingData } = useContext(\n ProfilerContext\n );\n \n- let children = null;\n if (isProfiling || !rootHasProfilingData) {\n- children = (\n+ return (\n \n );\n } else {\n- children = (\n+ return (\n \n \n <\/CommitFilterModalContextController>\n );\n }\n-\n- return portalContainer != null\n- ? createPortal(children, portalContainer)\n- : children;\n }\n \n \/\/ This view is rendered when there is no profiler data (either we haven't profiled yet or we're currently profiling).\n@@ -271,3 +262,5 @@ const RecortdingInProgress = () => (\n <\/div>\n <\/div>\n );\n+\n+export default portaledContent(Profiler);\ndiff --git a\/src\/devtools\/views\/Settings\/Settings.js b\/src\/devtools\/views\/Settings\/Settings.js\nindex f647162a8a..1725aa87d2 100644\n--- a\/src\/devtools\/views\/Settings\/Settings.js\n+++ b\/src\/devtools\/views\/Settings\/Settings.js\n@@ -1,19 +1,15 @@\n \/\/ @flow\n \n import React, { useCallback, useContext, useMemo } from 'react';\n-import { createPortal } from 'react-dom';\n import { useSubscription } from '..\/hooks';\n import { StoreContext } from '..\/context';\n import { SettingsContext } from '.\/SettingsContext';\n import Store from 'src\/devtools\/store';\n+import portaledContent from '..\/portaledContent';\n \n import styles from '.\/Settings.css';\n \n-export type Props = {|\n- portalContainer?: Element,\n-|};\n-\n-export default function Settings({ portalContainer }: Props) {\n+function Settings(_: {||}) {\n const store = useContext(StoreContext);\n const { displayDensity, setDisplayDensity, theme, setTheme } = useContext(\n SettingsContext\n@@ -52,7 +48,7 @@ export default function Settings({ portalContainer }: Props) {\n [store]\n );\n \n- const children = (\n+ return (\n

Theme<\/div>\n@@ -135,8 +131,6 @@ export default function Settings({ portalContainer }: Props) {\n )}\n <\/div>\n );\n-\n- return portalContainer != null\n- ? createPortal(children, portalContainer)\n- : children;\n }\n+\n+export default portaledContent(Settings);\ndiff --git a\/src\/devtools\/views\/Settings\/SettingsContext.js b\/src\/devtools\/views\/Settings\/SettingsContext.js\nindex 1d0555c388..f25f3a8153 100644\n--- a\/src\/devtools\/views\/Settings\/SettingsContext.js\n+++ b\/src\/devtools\/views\/Settings\/SettingsContext.js\n@@ -184,8 +184,14 @@ function updateDisplayDensity(\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 \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\n+): React$StatelessFunctionalComponent {\n+ return function PortaledContent({ portalContainer, ...rest }: Props) {\n+ const children = (\n+ \n+ \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\nindex a68c3ffc85..24ce5b5915 100644\n--- a\/src\/devtools\/views\/root.css\n+++ b\/src\/devtools\/views\/root.css\n@@ -96,15 +96,19 @@\n --dark-color-text-color: #ffffff;\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 \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","commit":{"shortRevision":"9642d26674","subject":"Added ErrorBoundary with GitHub bug link","revision":"9642d26674671d8aa6a60e63ccfb166712b9f8d6","authorEmail":"bvaughn@fb.com","authoredAt":"2019-04-11T17:19:03-07:00","authorName":"Brian Vaughn"},"body":""}

dillon1000/react

Files changed