{"patch":"diff --git a\/shells\/browser\/shared\/src\/main.js b\/shells\/browser\/shared\/src\/main.js\nindex 256e2a5340..6f52639709 100644\n--- a\/shells\/browser\/shared\/src\/main.js\n+++ b\/shells\/browser\/shared\/src\/main.js\n@@ -35,7 +35,7 @@ function createPanelIfReactLoaded() {\n let bridge = null;\n let store = null;\n \n- let elementsPortalContainer = null;\n+ let componentsPortalContainer = null;\n let profilerPortalContainer = null;\n let settingsPortalContainer = null;\n \n@@ -111,7 +111,7 @@ function createPanelIfReactLoaded() {\n bridge,\n browserName,\n browserTheme: getBrowserTheme(),\n- elementsPortalContainer,\n+ componentsPortalContainer,\n overrideTab,\n profilerPortalContainer,\n settingsPortalContainer,\n@@ -150,11 +150,11 @@ function createPanelIfReactLoaded() {\n }\n \n currentPanel = panel;\n- elementsPortalContainer = panel.container;\n+ componentsPortalContainer = panel.container;\n \n- if (elementsPortalContainer != null) {\n- elementsPortalContainer.innerHTML = '';\n- render('elements');\n+ if (componentsPortalContainer != null) {\n+ componentsPortalContainer.innerHTML = '';\n+ render('components');\n panel.injectStyles(cloneStyleTags);\n }\n \ndiff --git a\/src\/backend\/renderer.js b\/src\/backend\/renderer.js\nindex 821060fc78..21322e6e5b 100644\n--- a\/src\/backend\/renderer.js\n+++ b\/src\/backend\/renderer.js\n@@ -39,7 +39,7 @@ import type {\n ReactRenderer,\n RendererInterface,\n } from '.\/types';\n-import type { InspectedElement } from 'src\/devtools\/views\/elements\/types';\n+import type { InspectedElement } from 'src\/devtools\/views\/Components\/types';\n \n function getInternalReactConstants(version) {\n const ReactSymbols = {\ndiff --git a\/src\/backend\/types.js b\/src\/backend\/types.js\nindex 8768715d41..83ad660ee7 100644\n--- a\/src\/backend\/types.js\n+++ b\/src\/backend\/types.js\n@@ -1,7 +1,7 @@\n \/\/ @flow\n \n import type { ElementType } from 'src\/devtools\/types';\n-import type { InspectedElement } from 'src\/devtools\/views\/elements\/types';\n+import type { InspectedElement } from 'src\/devtools\/views\/Components\/types';\n \n type BundleType =\n | 0 \/\/ PROD\ndiff --git a\/src\/backend\/utils.js b\/src\/backend\/utils.js\nindex 980565e223..7b6499ac23 100644\n--- a\/src\/backend\/utils.js\n+++ b\/src\/backend\/utils.js\n@@ -2,7 +2,7 @@\n \n import { dehydrate } from '..\/hydration';\n \n-import type { DehydratedData } from 'src\/devtools\/views\/elements\/types';\n+import type { DehydratedData } from 'src\/devtools\/views\/Components\/types';\n \n export function cleanForBridge(data: Object | null): DehydratedData | null {\n if (data !== null) {\ndiff --git a\/src\/devtools\/store.js b\/src\/devtools\/store.js\nindex 963b915c7f..4e57c62772 100644\n--- a\/src\/devtools\/store.js\n+++ b\/src\/devtools\/store.js\n@@ -13,7 +13,7 @@ import { __DEBUG__ } from '..\/constants';\n import ProfilingCache from '.\/ProfilingCache';\n \n import type { ElementType } from '.\/types';\n-import type { Element } from '.\/views\/Elements\/types';\n+import type { Element } from '.\/views\/Components\/types';\n import type {\n ImportedProfilingData,\n ProfilingSnapshotNode,\ndiff --git a\/src\/devtools\/views\/Elements\/Elements.css b\/src\/devtools\/views\/Components\/Components.css\nsimilarity index 93%\nrename from src\/devtools\/views\/Elements\/Elements.css\nrename to src\/devtools\/views\/Components\/Components.css\nindex e3fbdd2a6d..172abb5c9e 100644\n--- a\/src\/devtools\/views\/Elements\/Elements.css\n+++ b\/src\/devtools\/views\/Components\/Components.css\n@@ -1,4 +1,4 @@\n-.Elements {\n+.Components {\n width: 100%;\n height: 100%;\n display: flex;\n@@ -20,7 +20,7 @@\n }\n \n @media screen and (max-width: 600px) {\n- .Elements {\n+ .Components {\n flex-direction: column;\n }\n }\ndiff --git a\/src\/devtools\/views\/Elements\/Elements.js b\/src\/devtools\/views\/Components\/Components.js\nsimilarity index 79%\nrename from src\/devtools\/views\/Elements\/Elements.js\nrename to src\/devtools\/views\/Components\/Components.js\nindex 596a5c754a..8a6216baec 100644\n--- a\/src\/devtools\/views\/Elements\/Elements.js\n+++ b\/src\/devtools\/views\/Components\/Components.js\n@@ -4,16 +4,16 @@ import React from 'react';\n import { createPortal } from 'react-dom';\n import Tree from '.\/Tree';\n import SelectedElement from '.\/SelectedElement';\n-import styles from '.\/Elements.css';\n+import styles from '.\/Components.css';\n \n export type Props = {|\n portalContainer?: Element,\n |};\n \n-export default function Elements({ portalContainer }: Props) {\n+export default function Components({ portalContainer }: Props) {\n \/\/ TODO Flex wrappers below should be user resizable.\n const children = (\n-

\n+

\n \n <\/div>\ndiff --git a\/src\/devtools\/views\/Elements\/EditableValue.css b\/src\/devtools\/views\/Components\/EditableValue.css\nsimilarity index 100%\nrename from src\/devtools\/views\/Elements\/EditableValue.css\nrename to src\/devtools\/views\/Components\/EditableValue.css\ndiff --git a\/src\/devtools\/views\/Elements\/EditableValue.js b\/src\/devtools\/views\/Components\/EditableValue.js\nsimilarity index 100%\nrename from src\/devtools\/views\/Elements\/EditableValue.js\nrename to src\/devtools\/views\/Components\/EditableValue.js\ndiff --git a\/src\/devtools\/views\/Elements\/Element.css b\/src\/devtools\/views\/Components\/Element.css\nsimilarity index 100%\nrename from src\/devtools\/views\/Elements\/Element.css\nrename to src\/devtools\/views\/Components\/Element.css\ndiff --git a\/src\/devtools\/views\/Elements\/Element.js b\/src\/devtools\/views\/Components\/Element.js\nsimilarity index 100%\nrename from src\/devtools\/views\/Elements\/Element.js\nrename to src\/devtools\/views\/Components\/Element.js\ndiff --git a\/src\/devtools\/views\/Elements\/HooksTree.css b\/src\/devtools\/views\/Components\/HooksTree.css\nsimilarity index 100%\nrename from src\/devtools\/views\/Elements\/HooksTree.css\nrename to src\/devtools\/views\/Components\/HooksTree.css\ndiff --git a\/src\/devtools\/views\/Elements\/HooksTree.js b\/src\/devtools\/views\/Components\/HooksTree.js\nsimilarity index 100%\nrename from src\/devtools\/views\/Elements\/HooksTree.js\nrename to src\/devtools\/views\/Components\/HooksTree.js\ndiff --git a\/src\/devtools\/views\/Elements\/InspectHostNodesToggle.js b\/src\/devtools\/views\/Components\/InspectHostNodesToggle.js\nsimilarity index 100%\nrename from src\/devtools\/views\/Elements\/InspectHostNodesToggle.js\nrename to src\/devtools\/views\/Components\/InspectHostNodesToggle.js\ndiff --git a\/src\/devtools\/views\/Elements\/InspectedElementTree.css b\/src\/devtools\/views\/Components\/InspectedElementTree.css\nsimilarity index 100%\nrename from src\/devtools\/views\/Elements\/InspectedElementTree.css\nrename to src\/devtools\/views\/Components\/InspectedElementTree.css\ndiff --git a\/src\/devtools\/views\/Elements\/InspectedElementTree.js b\/src\/devtools\/views\/Components\/InspectedElementTree.js\nsimilarity index 100%\nrename from src\/devtools\/views\/Elements\/InspectedElementTree.js\nrename to src\/devtools\/views\/Components\/InspectedElementTree.js\ndiff --git a\/src\/devtools\/views\/Elements\/KeyValue.css b\/src\/devtools\/views\/Components\/KeyValue.css\nsimilarity index 100%\nrename from src\/devtools\/views\/Elements\/KeyValue.css\nrename to src\/devtools\/views\/Components\/KeyValue.css\ndiff --git a\/src\/devtools\/views\/Elements\/KeyValue.js b\/src\/devtools\/views\/Components\/KeyValue.js\nsimilarity index 100%\nrename from src\/devtools\/views\/Elements\/KeyValue.js\nrename to src\/devtools\/views\/Components\/KeyValue.js\ndiff --git a\/src\/devtools\/views\/Elements\/OwnersStack.css b\/src\/devtools\/views\/Components\/OwnersStack.css\nsimilarity index 100%\nrename from src\/devtools\/views\/Elements\/OwnersStack.css\nrename to src\/devtools\/views\/Components\/OwnersStack.css\ndiff --git a\/src\/devtools\/views\/Elements\/OwnersStack.js b\/src\/devtools\/views\/Components\/OwnersStack.js\nsimilarity index 100%\nrename from src\/devtools\/views\/Elements\/OwnersStack.js\nrename to src\/devtools\/views\/Components\/OwnersStack.js\ndiff --git a\/src\/devtools\/views\/Elements\/SearchInput.css b\/src\/devtools\/views\/Components\/SearchInput.css\nsimilarity index 100%\nrename from src\/devtools\/views\/Elements\/SearchInput.css\nrename to src\/devtools\/views\/Components\/SearchInput.css\ndiff --git a\/src\/devtools\/views\/Elements\/SearchInput.js b\/src\/devtools\/views\/Components\/SearchInput.js\nsimilarity index 100%\nrename from src\/devtools\/views\/Elements\/SearchInput.js\nrename to src\/devtools\/views\/Components\/SearchInput.js\ndiff --git a\/src\/devtools\/views\/Elements\/SelectedElement.css b\/src\/devtools\/views\/Components\/SelectedElement.css\nsimilarity index 100%\nrename from src\/devtools\/views\/Elements\/SelectedElement.css\nrename to src\/devtools\/views\/Components\/SelectedElement.css\ndiff --git a\/src\/devtools\/views\/Elements\/SelectedElement.js b\/src\/devtools\/views\/Components\/SelectedElement.js\nsimilarity index 100%\nrename from src\/devtools\/views\/Elements\/SelectedElement.js\nrename to src\/devtools\/views\/Components\/SelectedElement.js\ndiff --git a\/src\/devtools\/views\/Elements\/Tree.css b\/src\/devtools\/views\/Components\/Tree.css\nsimilarity index 100%\nrename from src\/devtools\/views\/Elements\/Tree.css\nrename to src\/devtools\/views\/Components\/Tree.css\ndiff --git a\/src\/devtools\/views\/Elements\/Tree.js b\/src\/devtools\/views\/Components\/Tree.js\nsimilarity index 100%\nrename from src\/devtools\/views\/Elements\/Tree.js\nrename to src\/devtools\/views\/Components\/Tree.js\ndiff --git a\/src\/devtools\/views\/Elements\/TreeContext.js b\/src\/devtools\/views\/Components\/TreeContext.js\nsimilarity index 100%\nrename from src\/devtools\/views\/Elements\/TreeContext.js\nrename to src\/devtools\/views\/Components\/TreeContext.js\ndiff --git a\/src\/devtools\/views\/Elements\/types.js b\/src\/devtools\/views\/Components\/types.js\nsimilarity index 100%\nrename from src\/devtools\/views\/Elements\/types.js\nrename to src\/devtools\/views\/Components\/types.js\ndiff --git a\/src\/devtools\/views\/DevTools.js b\/src\/devtools\/views\/DevTools.js\nindex d297c70db7..aec2f9961a 100644\n--- a\/src\/devtools\/views\/DevTools.js\n+++ b\/src\/devtools\/views\/DevTools.js\n@@ -3,12 +3,12 @@\n import React, { useEffect, useState } from 'react';\n import Store from '..\/store';\n import { BridgeContext, StoreContext } from '.\/context';\n-import Elements from '.\/Elements\/Elements';\n+import Components from '.\/Components\/Components';\n import Profiler from '.\/Profiler\/Profiler';\n import Settings from '.\/Settings\/Settings';\n import TabBar from '.\/TabBar';\n import { SettingsContextController } from '.\/Settings\/SettingsContext';\n-import { TreeContextController } from '.\/Elements\/TreeContext';\n+import { TreeContextController } from '.\/Components\/TreeContext';\n import { ProfilerContextController } from '.\/Profiler\/ProfilerContext';\n import ReactLogo from '.\/ReactLogo';\n \n@@ -20,7 +20,7 @@ import type { Bridge } from '..\/..\/types';\n \n export type BrowserName = 'Chrome' | 'Firefox';\n export type BrowserTheme = 'dark' | 'light';\n-export type TabID = 'elements' | 'profiler' | 'settings';\n+export type TabID = 'components' | 'profiler' | 'settings';\n \n export type Props = {|\n bridge: Bridge,\n@@ -39,15 +39,15 @@ export type Props = {|\n \n \/\/ To avoid potential multi-root trickiness, the web extension uses portals to render tabs.\n \/\/ The root app is rendered in the top-level extension window,\n- \/\/ but individual tabs (e.g. Elements, Profiling) can be rendered into portals within their browser panels.\n- elementsPortalContainer?: Element,\n+ \/\/ but individual tabs (e.g. Components, Profiling) can be rendered into portals within their browser panels.\n+ componentsPortalContainer?: Element,\n profilerPortalContainer?: Element,\n settingsPortalContainer?: Element,\n |};\n \n-const elementTab = {\n- id: ('elements': TabID),\n- icon: 'elements',\n+const componentsTab = {\n+ id: ('components': TabID),\n+ icon: 'components',\n label: 'Components',\n title: 'React Components',\n };\n@@ -64,15 +64,15 @@ const settingsTab = {\n title: 'React Settings',\n };\n \n-const tabsWithProfiler = [elementTab, profilerTab, settingsTab];\n-const tabsWithoutProfiler = [elementTab, settingsTab];\n+const tabsWithProfiler = [componentsTab, profilerTab, settingsTab];\n+const tabsWithoutProfiler = [componentsTab, settingsTab];\n \n export default function DevTools({\n bridge,\n browserName,\n browserTheme = 'light',\n- defaultTab = 'elements',\n- elementsPortalContainer,\n+ defaultTab = 'components',\n+ componentsPortalContainer,\n overrideTab,\n profilerPortalContainer,\n settingsPortalContainer,\n@@ -120,9 +120,9 @@ export default function DevTools({\n case 'settings':\n tabElement = ;\n break;\n- case 'elements':\n+ case 'components':\n default:\n- tabElement = ;\n+ tabElement = ;\n break;\n }\n \n@@ -131,7 +131,7 @@ export default function DevTools({\n \n \ndiff --git a\/src\/devtools\/views\/Icon.js b\/src\/devtools\/views\/Icon.js\nindex 4b93b8d03c..66e9e64fbe 100644\n--- a\/src\/devtools\/views\/Icon.js\n+++ b\/src\/devtools\/views\/Icon.js\n@@ -5,7 +5,7 @@ import styles from '.\/Icon.css';\n \n export type IconType =\n | 'arrow'\n- | 'elements'\n+ | 'components'\n | 'flame-chart'\n | 'interactions'\n | 'profiler'\n@@ -24,8 +24,8 @@ export default function Icon({ className = '', type }: Props) {\n case 'arrow':\n pathData = PATH_ARROW;\n break;\n- case 'elements':\n- pathData = PATH_ELEMENTS;\n+ case 'components':\n+ pathData = PATH_COMPONENTS;\n break;\n case 'flame-chart':\n pathData = PATH_FLAME_CHART;\n@@ -66,7 +66,7 @@ export default function Icon({ className = '', type }: Props) {\n \n const PATH_ARROW = 'M8 5v14l11-7z';\n \n-const PATH_ELEMENTS =\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 = `\ndiff --git a\/src\/devtools\/views\/Profiler\/ProfilerContext.js b\/src\/devtools\/views\/Profiler\/ProfilerContext.js\nindex b50cd12f98..60e6fd2b2b 100644\n--- a\/src\/devtools\/views\/Profiler\/ProfilerContext.js\n+++ b\/src\/devtools\/views\/Profiler\/ProfilerContext.js\n@@ -9,7 +9,7 @@ import React, {\n } from 'react';\n import { unstable_batchedUpdates as batchedUpdates } from 'react-dom';\n import { useLocalStorage, useSubscription } from '..\/hooks';\n-import { TreeContext } from '..\/Elements\/TreeContext';\n+import { TreeContext } from '..\/Components\/TreeContext';\n import { StoreContext } from '..\/context';\n import Store from '..\/..\/store';\n \ndiff --git a\/src\/devtools\/views\/Settings\/SettingsContext.js b\/src\/devtools\/views\/Settings\/SettingsContext.js\nindex c47fc224b4..d6f3ba4a9a 100644\n--- a\/src\/devtools\/views\/Settings\/SettingsContext.js\n+++ b\/src\/devtools\/views\/Settings\/SettingsContext.js\n@@ -28,7 +28,7 @@ type DocumentElements = Array;\n type Props = {|\n browserTheme: BrowserTheme,\n children: React$Node,\n- elementsPortalContainer?: Element,\n+ componentsPortalContainer?: Element,\n profilerPortalContainer?: Element,\n settingsPortalContainer?: Element,\n |};\n@@ -36,7 +36,7 @@ type Props = {|\n function SettingsContextController({\n browserTheme,\n children,\n- elementsPortalContainer,\n+ componentsPortalContainer,\n profilerPortalContainer,\n settingsPortalContainer,\n }: Props) {\n@@ -53,9 +53,9 @@ function SettingsContextController({\n const array: Array = [\n ((document.documentElement: any): HTMLElement),\n ];\n- if (elementsPortalContainer != null) {\n+ if (componentsPortalContainer != null) {\n array.push(\n- ((elementsPortalContainer.ownerDocument\n+ ((componentsPortalContainer.ownerDocument\n .documentElement: any): HTMLElement)\n );\n }\n@@ -73,7 +73,7 @@ function SettingsContextController({\n }\n return array;\n }, [\n- elementsPortalContainer,\n+ componentsPortalContainer,\n profilerPortalContainer,\n settingsPortalContainer,\n ]);\n","files":[{"path":"shells\/browser\/shared\/src\/main.js","status":"M"},{"path":"src\/backend\/renderer.js","status":"M"},{"path":"src\/backend\/types.js","status":"M"},{"path":"src\/backend\/utils.js","status":"M"},{"path":"src\/devtools\/store.js","status":"M"},{"previousPath":"src\/devtools\/views\/Elements\/Elements.css","path":"src\/devtools\/views\/Components\/Components.css","status":"R093"},{"previousPath":"src\/devtools\/views\/Elements\/Elements.js","path":"src\/devtools\/views\/Components\/Components.js","status":"R079"},{"previousPath":"src\/devtools\/views\/Elements\/EditableValue.css","path":"src\/devtools\/views\/Components\/EditableValue.css","status":"R100"},{"previousPath":"src\/devtools\/views\/Elements\/EditableValue.js","path":"src\/devtools\/views\/Components\/EditableValue.js","status":"R100"},{"previousPath":"src\/devtools\/views\/Elements\/Element.css","path":"src\/devtools\/views\/Components\/Element.css","status":"R100"},{"previousPath":"src\/devtools\/views\/Elements\/Element.js","path":"src\/devtools\/views\/Components\/Element.js","status":"R100"},{"previousPath":"src\/devtools\/views\/Elements\/HooksTree.css","path":"src\/devtools\/views\/Components\/HooksTree.css","status":"R100"},{"previousPath":"src\/devtools\/views\/Elements\/HooksTree.js","path":"src\/devtools\/views\/Components\/HooksTree.js","status":"R100"},{"previousPath":"src\/devtools\/views\/Elements\/InspectHostNodesToggle.js","path":"src\/devtools\/views\/Components\/InspectHostNodesToggle.js","status":"R100"},{"previousPath":"src\/devtools\/views\/Elements\/InspectedElementTree.css","path":"src\/devtools\/views\/Components\/InspectedElementTree.css","status":"R100"},{"previousPath":"src\/devtools\/views\/Elements\/InspectedElementTree.js","path":"src\/devtools\/views\/Components\/InspectedElementTree.js","status":"R100"},{"previousPath":"src\/devtools\/views\/Elements\/KeyValue.css","path":"src\/devtools\/views\/Components\/KeyValue.css","status":"R100"},{"previousPath":"src\/devtools\/views\/Elements\/KeyValue.js","path":"src\/devtools\/views\/Components\/KeyValue.js","status":"R100"},{"previousPath":"src\/devtools\/views\/Elements\/OwnersStack.css","path":"src\/devtools\/views\/Components\/OwnersStack.css","status":"R100"},{"previousPath":"src\/devtools\/views\/Elements\/OwnersStack.js","path":"src\/devtools\/views\/Components\/OwnersStack.js","status":"R100"},{"previousPath":"src\/devtools\/views\/Elements\/SearchInput.css","path":"src\/devtools\/views\/Components\/SearchInput.css","status":"R100"},{"previousPath":"src\/devtools\/views\/Elements\/SearchInput.js","path":"src\/devtools\/views\/Components\/SearchInput.js","status":"R100"},{"previousPath":"src\/devtools\/views\/Elements\/SelectedElement.css","path":"src\/devtools\/views\/Components\/SelectedElement.css","status":"R100"},{"previousPath":"src\/devtools\/views\/Elements\/SelectedElement.js","path":"src\/devtools\/views\/Components\/SelectedElement.js","status":"R100"},{"previousPath":"src\/devtools\/views\/Elements\/Tree.css","path":"src\/devtools\/views\/Components\/Tree.css","status":"R100"},{"previousPath":"src\/devtools\/views\/Elements\/Tree.js","path":"src\/devtools\/views\/Components\/Tree.js","status":"R100"},{"previousPath":"src\/devtools\/views\/Elements\/TreeContext.js","path":"src\/devtools\/views\/Components\/TreeContext.js","status":"R100"},{"previousPath":"src\/devtools\/views\/Elements\/types.js","path":"src\/devtools\/views\/Components\/types.js","status":"R100"},{"path":"src\/devtools\/views\/DevTools.js","status":"M"},{"path":"src\/devtools\/views\/Icon.js","status":"M"},{"path":"src\/devtools\/views\/Profiler\/ProfilerContext.js","status":"M"},{"path":"src\/devtools\/views\/Settings\/SettingsContext.js","status":"M"}],"parents":["de730da2305b9ed7093072ba87811858c02a3e5a"],"body":"","commit":{"revision":"83bd211c9e94aa2b1f3b8b9085f079d2d9d9ec85","authorName":"Dan Abramov","authorEmail":"dan.abramov@gmail.com","subject":"Elements -> Components (naming)","shortRevision":"83bd211c9e","authoredAt":"2019-04-02T19:53:46+01:00"}}

dillon1000/react

Files changed