{"commit":{"authorName":"Brian Vaughn","authoredAt":"2019-05-22T18:44:43-07:00","subject":"Use @reach tooltips for TabBar, cleanup supports-profiling subscription","authorEmail":"bvaughn@fb.com","shortRevision":"f14a2fd05c","revision":"f14a2fd05cfb2d7fc140f1f59e1fd580c25b6a27"},"body":"","files":[{"status":"M","path":"src\/devtools\/store.js"},{"status":"M","path":"src\/devtools\/views\/DevTools.js"},{"status":"M","path":"src\/devtools\/views\/TabBar.js"}],"parents":["98623dfdb007933ff4c38052f2827a74fc9b5a4a"],"patch":"diff --git a\/src\/devtools\/store.js b\/src\/devtools\/store.js\nindex 86654bfe68..5058aad35e 100644\n--- a\/src\/devtools\/store.js\n+++ b\/src\/devtools\/store.js\n@@ -865,8 +865,9 @@ export default class Store extends EventEmitter {\n if (hasOwnerMetadata) {\n this._hasOwnerMetadata = true;\n }\n- if (supportsProfiling) {\n+ if (!this._supportsProfiling && supportsProfiling) {\n this._supportsProfiling = true;\n+ this.emit('supportsProfiling');\n }\n }\n );\ndiff --git a\/src\/devtools\/views\/DevTools.js b\/src\/devtools\/views\/DevTools.js\nindex 1efc67a707..766ddd82ed 100644\n--- a\/src\/devtools\/views\/DevTools.js\n+++ b\/src\/devtools\/views\/DevTools.js\n@@ -5,7 +5,7 @@\n import '@reach\/menu-button\/styles.css';\n import '@reach\/tooltip\/styles.css';\n \n-import React, { useEffect, useState } from 'react';\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@@ -18,6 +18,7 @@ import ViewElementSourceContext from '.\/Components\/ViewElementSourceContext';\n import { ProfilerContextController } from '.\/Profiler\/ProfilerContext';\n import { ModalDialogContextController } from '.\/ModalDialog';\n import ReactLogo from '.\/ReactLogo';\n+import { useSubscription } from '.\/hooks';\n \n import styles from '.\/DevTools.css';\n \n@@ -71,8 +72,7 @@ const settingsTab = {\n title: 'React Settings',\n };\n \n-const tabsWithProfiler = [componentsTab, profilerTab, settingsTab];\n-const tabsWithoutProfiler = [componentsTab, settingsTab];\n+const tabs = [componentsTab, profilerTab, settingsTab];\n \n export default function DevTools({\n bridge,\n@@ -92,27 +92,19 @@ export default function DevTools({\n setTab(overrideTab);\n }\n \n- const [supportsProfiling, setSupportsProfiling] = useState(\n- store.supportsProfiling\n+ const supportsProfilingSubscription = useMemo(\n+ () => ({\n+ getCurrentValue: () => store.supportsProfiling,\n+ subscribe: (callback: Function) => {\n+ store.addListener('supportsProfiling', callback);\n+ return () => store.removeListener('supportsProfiling', callback);\n+ },\n+ }),\n+ [store]\n+ );\n+ const supportsProfiling = useSubscription(\n+ supportsProfilingSubscription\n );\n-\n- \/\/ Show\/hide the \"Profiler\" button depending on if profiling is supported.\n- useEffect(() => {\n- if (supportsProfiling !== store.supportsProfiling) {\n- setSupportsProfiling(store.supportsProfiling);\n- }\n-\n- const handleRoots = () => {\n- if (supportsProfiling !== store.supportsProfiling) {\n- setSupportsProfiling(store.supportsProfiling);\n- }\n- };\n-\n- store.addListener('roots', handleRoots);\n- return () => {\n- store.removeListener('roots', handleRoots);\n- };\n- }, [store, supportsProfiling]);\n \n return (\n \n@@ -140,11 +132,7 @@ export default function DevTools({\n id=\"DevTools\"\n selectTab={setTab}\n size=\"large\"\n- tabs={\n- supportsProfiling\n- ? tabsWithProfiler\n- : tabsWithoutProfiler\n- }\n+ tabs={tabs}\n \/>\n <\/div>\n )}\ndiff --git a\/src\/devtools\/views\/TabBar.js b\/src\/devtools\/views\/TabBar.js\nindex 87031f7e2c..f75d464abb 100644\n--- a\/src\/devtools\/views\/TabBar.js\n+++ b\/src\/devtools\/views\/TabBar.js\n@@ -2,9 +2,11 @@\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@@ -59,42 +61,53 @@ export default function TabBar({\n \n return (\n \n- {tabs.map(({ icon, id, label, title }) => (\n- selectTab(id)}\n- title={title || label}\n- >\n- \n- \n- {\n+ let button = (\n+ selectTab(id)}\n >\n- {label}\n- <\/span>\n- <\/label>\n- ))}\n+ \n+ \n+ \n+ {label}\n+ <\/span>\n+ <\/label>\n+ );\n+\n+ if (title) {\n+ button = (\n+ \n+ {button}\n+ <\/Tooltip>\n+ );\n+ }\n+\n+ return button;\n+ })}\n <\/Fragment>\n );\n }\n"}

dillon1000/react

Files changed