83bd211c9e · samitouri/QOS-React · siGit Code & Deploy

shells/browser/shared/src/main.js

+6 -6

@@ -35,7 +35,7 @@ function createPanelIfReactLoaded() {

35 let bridge = null;

36 let store = null;

37

38 - let elementsPortalContainer = null;

38 + let componentsPortalContainer = null;

39 let profilerPortalContainer = null;

40 let settingsPortalContainer = null;

41

@@ -111,7 +111,7 @@ function createPanelIfReactLoaded() {

111 bridge,

112 browserName,

113 browserTheme: getBrowserTheme(),

114 - elementsPortalContainer,

114 + componentsPortalContainer,

115 overrideTab,

116 profilerPortalContainer,

117 settingsPortalContainer,

@@ -150,11 +150,11 @@ function createPanelIfReactLoaded() {

150 }

151

152 currentPanel = panel;

153 - elementsPortalContainer = panel.container;

153 + componentsPortalContainer = panel.container;

154

155 - if (elementsPortalContainer != null) {

156 - elementsPortalContainer.innerHTML = '';

157 - render('elements');

155 + if (componentsPortalContainer != null) {

156 + componentsPortalContainer.innerHTML = '';

157 + render('components');

158 panel.injectStyles(cloneStyleTags);

159 }

160

src/backend/renderer.js

+1 -1

@@ -39,7 +39,7 @@ import type {

39 ReactRenderer,

40 RendererInterface,

41 } from './types';

42 -import type { InspectedElement } from 'src/devtools/views/elements/types';

42 +import type { InspectedElement } from 'src/devtools/views/Components/types';

43

44 function getInternalReactConstants(version) {

45 const ReactSymbols = {

src/backend/types.js

+1 -1

@@ -1,7 +1,7 @@

1 // @flow

2

3 import type { ElementType } from 'src/devtools/types';

4 -import type { InspectedElement } from 'src/devtools/views/elements/types';

4 +import type { InspectedElement } from 'src/devtools/views/Components/types';

5

6 type BundleType =

7 | 0 // PROD

src/backend/utils.js

+1 -1

@@ -2,7 +2,7 @@

2

3 import { dehydrate } from '../hydration';

4

5 -import type { DehydratedData } from 'src/devtools/views/elements/types';

5 +import type { DehydratedData } from 'src/devtools/views/Components/types';

6

7 export function cleanForBridge(data: Object | null): DehydratedData | null {

8 if (data !== null) {

src/devtools/store.js

+1 -1

@@ -13,7 +13,7 @@ import { __DEBUG__ } from '../constants';

13 import ProfilingCache from './ProfilingCache';

14

15 import type { ElementType } from './types';

16 -import type { Element } from './views/Elements/types';

16 +import type { Element } from './views/Components/types';

17 import type {

18 ImportedProfilingData,

19 ProfilingSnapshotNode,

src/devtools/views/Components/Components.css renamed

+2 -2

@@ -1,4 +1,4 @@

1 -.Elements {

1 +.Components {

2 width: 100%;

3 height: 100%;

4 display: flex;

@@ -20,7 +20,7 @@

20 }

21

22 @media screen and (max-width: 600px) {

23 - .Elements {

23 + .Components {

24 flex-direction: column;

25 }

26 }

src/devtools/views/Components/Components.js renamed

+3 -3

@@ -4,16 +4,16 @@ import React from 'react';

4 import { createPortal } from 'react-dom';

5 import Tree from './Tree';

6 import SelectedElement from './SelectedElement';

7 -import styles from './Elements.css';

7 +import styles from './Components.css';

8

9 export type Props = {|

10 portalContainer?: Element,

11 |};

12

13 -export default function Elements({ portalContainer }: Props) {

13 +export default function Components({ portalContainer }: Props) {

14 // TODO Flex wrappers below should be user resizable.

15 const children = (

16 - <div className={styles.Elements}>

16 + <div className={styles.Components}>

17 <div className={styles.TreeWrapper}>

18 <Tree />

19 </div>

src/devtools/views/Components/EditableValue.css renamed

src/devtools/views/Components/EditableValue.js renamed

src/devtools/views/Components/Element.css renamed

src/devtools/views/Components/Element.js renamed

src/devtools/views/Components/HooksTree.css renamed

src/devtools/views/Components/HooksTree.js renamed

src/devtools/views/Components/InspectHostNodesToggle.js renamed

src/devtools/views/Components/InspectedElementTree.css renamed

src/devtools/views/Components/InspectedElementTree.js renamed

src/devtools/views/Components/KeyValue.css renamed

src/devtools/views/Components/KeyValue.js renamed

src/devtools/views/Components/OwnersStack.css renamed

src/devtools/views/Components/OwnersStack.js renamed

src/devtools/views/Components/SearchInput.css renamed

src/devtools/views/Components/SearchInput.js renamed

src/devtools/views/Components/SelectedElement.css renamed

src/devtools/views/Components/SelectedElement.js renamed

src/devtools/views/Components/Tree.css renamed

src/devtools/views/Components/Tree.js renamed

src/devtools/views/Components/TreeContext.js renamed

src/devtools/views/Components/types.js renamed

src/devtools/views/DevTools.js

+15 -15

@@ -3,12 +3,12 @@

3 import React, { useEffect, useState } from 'react';

4 import Store from '../store';

5 import { BridgeContext, StoreContext } from './context';

6 -import Elements from './Elements/Elements';

6 +import Components from './Components/Components';

7 import Profiler from './Profiler/Profiler';

8 import Settings from './Settings/Settings';

9 import TabBar from './TabBar';

10 import { SettingsContextController } from './Settings/SettingsContext';

11 -import { TreeContextController } from './Elements/TreeContext';

11 +import { TreeContextController } from './Components/TreeContext';

12 import { ProfilerContextController } from './Profiler/ProfilerContext';

13 import ReactLogo from './ReactLogo';

14

@@ -20,7 +20,7 @@ import type { Bridge } from '../../types';

20

21 export type BrowserName = 'Chrome' | 'Firefox';

22 export type BrowserTheme = 'dark' | 'light';

23 -export type TabID = 'elements' | 'profiler' | 'settings';

23 +export type TabID = 'components' | 'profiler' | 'settings';

24

25 export type Props = {|

26 bridge: Bridge,

@@ -39,15 +39,15 @@ export type Props = {|

39

40 // To avoid potential multi-root trickiness, the web extension uses portals to render tabs.

41 // The root <DevTools> app is rendered in the top-level extension window,

42 - // but individual tabs (e.g. Elements, Profiling) can be rendered into portals within their browser panels.

43 - elementsPortalContainer?: Element,

42 + // but individual tabs (e.g. Components, Profiling) can be rendered into portals within their browser panels.

43 + componentsPortalContainer?: Element,

44 profilerPortalContainer?: Element,

45 settingsPortalContainer?: Element,

46 |};

47

48 -const elementTab = {

49 - id: ('elements': TabID),

50 - icon: 'elements',

48 +const componentsTab = {

49 + id: ('components': TabID),

50 + icon: 'components',

51 label: 'Components',

52 title: 'React Components',

53 };

@@ -64,15 +64,15 @@ const settingsTab = {

64 title: 'React Settings',

65 };

66

67 -const tabsWithProfiler = [elementTab, profilerTab, settingsTab];

68 -const tabsWithoutProfiler = [elementTab, settingsTab];

67 +const tabsWithProfiler = [componentsTab, profilerTab, settingsTab];

68 +const tabsWithoutProfiler = [componentsTab, settingsTab];

69

70 export default function DevTools({

71 bridge,

72 browserName,

73 browserTheme = 'light',

74 - defaultTab = 'elements',

75 - elementsPortalContainer,

74 + defaultTab = 'components',

75 + componentsPortalContainer,

76 overrideTab,

77 profilerPortalContainer,

78 settingsPortalContainer,

@@ -120,9 +120,9 @@ export default function DevTools({

120 case 'settings':

121 tabElement = <Settings portalContainer={settingsPortalContainer} />;

122 break;

123 - case 'elements':

123 + case 'components':

124 default:

125 - tabElement = <Elements portalContainer={elementsPortalContainer} />;

125 + tabElement = <Components portalContainer={componentsPortalContainer} />;

126 break;

127 }

128

@@ -131,7 +131,7 @@ export default function DevTools({

131 <StoreContext.Provider value={store}>

132 <SettingsContextController

133 browserTheme={browserTheme}

134 - elementsPortalContainer={elementsPortalContainer}

134 + componentsPortalContainer={componentsPortalContainer}

135 profilerPortalContainer={profilerPortalContainer}

136 settingsPortalContainer={settingsPortalContainer}

137 >

src/devtools/views/Icon.js

+4 -4

@@ -5,7 +5,7 @@ import styles from './Icon.css';

5

6 export type IconType =

7 | 'arrow'

8 - | 'elements'

8 + | 'components'

9 | 'flame-chart'

10 | 'interactions'

11 | 'profiler'

@@ -24,8 +24,8 @@ export default function Icon({ className = '', type }: Props) {

24 case 'arrow':

25 pathData = PATH_ARROW;

26 break;

27 - case 'elements':

28 - pathData = PATH_ELEMENTS;

27 + case 'components':

28 + pathData = PATH_COMPONENTS;

29 break;

30 case 'flame-chart':

31 pathData = PATH_FLAME_CHART;

@@ -66,7 +66,7 @@ export default function Icon({ className = '', type }: Props) {

66

67 const PATH_ARROW = 'M8 5v14l11-7z';

68

69 -const PATH_ELEMENTS =

69 +const PATH_COMPONENTS =

70 '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';

71

72 const PATH_FLAME_CHART = `

src/devtools/views/Profiler/ProfilerContext.js

+1 -1

@@ -9,7 +9,7 @@ import React, {

9 } from 'react';

10 import { unstable_batchedUpdates as batchedUpdates } from 'react-dom';

11 import { useLocalStorage, useSubscription } from '../hooks';

12 -import { TreeContext } from '../Elements/TreeContext';

12 +import { TreeContext } from '../Components/TreeContext';

13 import { StoreContext } from '../context';

14 import Store from '../../store';

15

src/devtools/views/Settings/SettingsContext.js

+5 -5

@@ -28,7 +28,7 @@ type DocumentElements = Array<HTMLElement>;

28 type Props = {|

29 browserTheme: BrowserTheme,

30 children: React$Node,

31 - elementsPortalContainer?: Element,

31 + componentsPortalContainer?: Element,

32 profilerPortalContainer?: Element,

33 settingsPortalContainer?: Element,

34 |};

@@ -36,7 +36,7 @@ type Props = {|

36 function SettingsContextController({

37 browserTheme,

38 children,

39 - elementsPortalContainer,

39 + componentsPortalContainer,

40 profilerPortalContainer,

41 settingsPortalContainer,

42 }: Props) {

@@ -53,9 +53,9 @@ function SettingsContextController({

53 const array: Array<HTMLElement> = [

54 ((document.documentElement: any): HTMLElement),

55 ];

56 - if (elementsPortalContainer != null) {

56 + if (componentsPortalContainer != null) {

57 array.push(

58 - ((elementsPortalContainer.ownerDocument

58 + ((componentsPortalContainer.ownerDocument

59 .documentElement: any): HTMLElement)

60 );

61 }

@@ -73,7 +73,7 @@ function SettingsContextController({

73 }

74 return array;

75 }, [

76 - elementsPortalContainer,

76 + componentsPortalContainer,

77 profilerPortalContainer,

78 settingsPortalContainer,

79 ]);

Elements -> Components (naming)