Re-organized views slightly in preparation for Profiler UI

src/devtools/views/DevTools.js

@@ -3,12 +3,12 @@
 import React, { useState } from 'react';
 import Store from '../store';
 import { BridgeContext, StoreContext } from './context';
-import Elements from './Elements';
-import Profiler from './Profiler';
-import Settings from './Settings';
+import Elements from './Elements/Elements';
+import Profiler from './Profiler/Profiler';
+import Settings from './Settings/Settings';
 import TabBar from './TabBar';
-import { SettingsContextController } from './SettingsContext';
-import { TreeContextController } from './TreeContext';
+import { SettingsContextController } from './Settings/SettingsContext';
+import { TreeContextController } from './Elements/TreeContext';
 
 import styles from './DevTools.css';
 

src/devtools/views/Elements/EditableValue.js

@@ -1,8 +1,8 @@
 // @flow
 
 import React, { Fragment, useCallback, useRef, useState } from 'react';
-import Button from './Button';
-import ButtonIcon from './ButtonIcon';
+import Button from '../Button';
+import ButtonIcon from '../ButtonIcon';
 import styles from './EditableValue.css';
 
 type OverrideValueFn = (path: Array<string | number>, value: any) => void;

src/devtools/views/Elements/Element.js

@@ -9,10 +9,10 @@ import React, {
   useRef,
 } from 'react';
 import { ElementTypeClass, ElementTypeFunction } from 'src/devtools/types';
-import { createRegExp } from './utils';
+import { createRegExp } from '../utils';
 import { TreeContext } from './TreeContext';
 
-import type { Element } from '../types';
+import type { Element } from '../../types';
 
 import styles from './Element.css';
 

src/devtools/views/Elements/HooksTree.js

@@ -2,12 +2,12 @@
 
 import { copy } from 'clipboard-js';
 import React, { useCallback, useContext } from 'react';
-import { BridgeContext, StoreContext } from './context';
-import Button from './Button';
-import ButtonIcon from './ButtonIcon';
+import { BridgeContext, StoreContext } from '../context';
+import Button from '../Button';
+import ButtonIcon from '../ButtonIcon';
 import EditableValue from './EditableValue';
 import KeyValue from './KeyValue';
-import { serializeHooksForCopy } from './utils';
+import { serializeHooksForCopy } from '../utils';
 import styles from './HooksTree.css';
 
 import type { HooksNode, HooksTree } from 'src/backend/types';

src/devtools/views/Elements/InspectHostNodesToggle.js

@@ -1,9 +1,9 @@
 // @flow
 
 import React, { useCallback, useContext, useEffect, useState } from 'react';
-import { BridgeContext } from './context';
-import Toggle from './Toggle';
-import ButtonIcon from './ButtonIcon';
+import { BridgeContext } from '../context';
+import Toggle from '../Toggle';
+import ButtonIcon from '../ButtonIcon';
 
 export default function InspectHostNodesToggle() {
   const [isInspecting, setIsInspecting] = useState(false);

src/devtools/views/Elements/InspectedElementTree.js

@@ -2,10 +2,10 @@
 
 import { copy } from 'clipboard-js';
 import React, { useCallback } from 'react';
-import Button from './Button';
-import ButtonIcon from './ButtonIcon';
+import Button from '../Button';
+import ButtonIcon from '../ButtonIcon';
 import KeyValue from './KeyValue';
-import { serializeDataForCopy } from './utils';
+import { serializeDataForCopy } from '../utils';
 import styles from './InspectedElementTree.css';
 
 type OverrideValueFn = (path: Array<string | number>, value: any) => void;

src/devtools/views/Elements/KeyValue.js

@@ -2,8 +2,8 @@
 
 import React from 'react';
 import EditableValue from './EditableValue';
-import { getMetaValueLabel } from './utils';
-import { meta } from '../../hydration';
+import { getMetaValueLabel } from '../utils';
+import { meta } from '../../../hydration';
 import styles from './KeyValue.css';
 
 type OverrideValueFn = (path: Array<string | number>, value: any) => void;

src/devtools/views/Elements/OwnersStack.js

@@ -1,12 +1,12 @@
 // @flow
 
 import React, { useCallback, useContext } from 'react';
-import Button from './Button';
-import ButtonIcon from './ButtonIcon';
+import Button from '../Button';
+import ButtonIcon from '../ButtonIcon';
 import { TreeContext } from './TreeContext';
-import { StoreContext } from './context';
+import { StoreContext } from '../context';
 
-import type { Element } from '../types';
+import type { Element } from '../../types';
 
 import styles from './OwnersStack.css';
 

src/devtools/views/Elements/SearchInput.js

@@ -2,9 +2,9 @@
 
 import React, { useCallback, useContext, useEffect, useRef } from 'react';
 import { TreeContext } from './TreeContext';
-import Button from './Button';
-import ButtonIcon from './ButtonIcon';
-import Icon from './Icon';
+import Button from '../Button';
+import ButtonIcon from '../ButtonIcon';
+import Icon from '../Icon';
 
 import styles from './SearchInput.css';
 

src/devtools/views/Elements/SelectedElement.js

@@ -8,16 +8,16 @@ import React, {
   useState,
 } from 'react';
 import { TreeContext } from './TreeContext';
-import { BridgeContext, StoreContext } from './context';
-import Button from './Button';
-import ButtonIcon from './ButtonIcon';
+import { BridgeContext, StoreContext } from '../context';
+import Button from '../Button';
+import ButtonIcon from '../ButtonIcon';
 import HooksTree from './HooksTree';
 import InspectedElementTree from './InspectedElementTree';
 import { hydrate } from 'src/hydration';
 import styles from './SelectedElement.css';
-import { ElementTypeClass, ElementTypeFunction } from '../types';
+import { ElementTypeClass, ElementTypeFunction } from '../../types';
 
-import type { InspectedElement } from '../types';
+import type { InspectedElement } from '../../types';
 import type { DehydratedData, Element } from 'src/devtools/types';
 
 export type Props = {||};

src/devtools/views/Elements/Tree.js

@@ -10,7 +10,7 @@ import React, {
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { FixedSizeList } from 'react-window';
 import { TreeContext } from './TreeContext';
-import { SettingsContext } from './SettingsContext';
+import { SettingsContext } from '../Settings/SettingsContext';
 import Element from './Element';
 import InspectHostNodesToggle from './InspectHostNodesToggle';
 import OwnersStack from './OwnersStack';

src/devtools/views/Elements/TreeContext.js

@@ -25,9 +25,9 @@ import React, {
   useMemo,
   useReducer,
 } from 'react';
-import { createRegExp } from './utils';
-import { BridgeContext, StoreContext } from './context';
-import Store from '../store';
+import { createRegExp } from '../utils';
+import { BridgeContext, StoreContext } from '../context';
+import Store from '../../store';
 
 import type { Element } from 'src/devtools/types';
 

src/devtools/views/Settings/SettingsContext.js

@@ -1,9 +1,9 @@
 // @flow
 
 import React, { createContext, useLayoutEffect, useMemo } from 'react';
-import { useLocalStorage } from './hooks';
+import { useLocalStorage } from '../hooks';
 
-import type { BrowserTheme } from './DevTools';
+import type { BrowserTheme } from '../DevTools';
 
 export type DisplayDensity = 'compact' | 'comfortable';
 export type Theme = 'auto' | 'light' | 'dark';