Skip to content

Commit d1300d9

Browse files
austin-cavanaghaustin-cavanagh
committed
Searched all files for console logs and commented them out to prepare the code to be pushed to production
1 parent 61afcc7 commit d1300d9

File tree

14 files changed

+135
-116
lines changed

14 files changed

+135
-116
lines changed

‎extension/content_scripts/inject.ts

Lines changed: 70 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
//retrieve global hook and save in reactdevglobahook variable, used to interact w/react devtools
2-
console.log('INJECT.TS - React Dev Tools: ', window.__REACT_DEVTOOLS_GLOBAL_HOOK__);
2+
// console.log(
3+
// 'INJECT.TS - React Dev Tools: ',
4+
// window.__REACT_DEVTOOLS_GLOBAL_HOOK__
5+
// );
36

47
// Extend Window interface for TypeScript to recognize custom properties
58
// Requires dummy export so that typescript treats this as a module
@@ -27,18 +30,18 @@ const getReactTree = () => {
2730
// console.log("REACT DEVTOOLS NOT DETECTED");
2831
// window.postMessage({ type: "REACT_DEVTOOLS_NOT_DETECTED"});
2932
} else {
30-
console.log('React Dev Tools Detected');
33+
// console.log('React Dev Tools Detected');
3134
try {
3235
const reactDevGlobalHook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
3336
// store the parsed fiber tree info
3437
// each element will represent one re-render that has occurred
35-
let eventList:[] = [];
36-
38+
let eventList: [] = [];
39+
3740
//recursively parse fiber tree, creates a structured object
3841
type ParseTreeType = (reactFiberTree: any) => any;
39-
const parseTree:ParseTreeType = (reactFiberTree: any) => {
42+
const parseTree: ParseTreeType = (reactFiberTree: any) => {
4043
if (reactFiberTree === null) return null;
41-
else if (typeof reactFiberTree.elementType === "function") {
44+
else if (typeof reactFiberTree.elementType === 'function') {
4245
// console.log("In the else if block", reactFiberTree.elementType.name);
4346
const elemObj = {
4447
name: reactFiberTree.elementType.name,
@@ -51,30 +54,30 @@ const getReactTree = () => {
5154
} else {
5255
// console.log("In the else block", reactFiberTree.elementType);
5356
return {
54-
name: "NFC",
57+
name: 'NFC',
5558
actualDuration: reactFiberTree.actualDuration,
5659
selfBaseDuration: reactFiberTree.selfBaseDuration,
5760
child: parseTree(reactFiberTree.child),
5861
sibling: parseTree(reactFiberTree.sibling),
5962
};
6063
}
6164
};
62-
65+
6366
//retrieve children for given node
64-
type GetChildrenType = (tree: TreeNode|null|undefined) => TreeNode[];
65-
const getChildren:GetChildrenType = (tree) => {
66-
const children:any[] = [];
67+
type GetChildrenType = (tree: TreeNode | null | undefined) => TreeNode[];
68+
const getChildren: GetChildrenType = tree => {
69+
const children: any[] = [];
6770
if (!tree) return children;
6871
while (tree.sibling) {
6972
children.push(tree.sibling);
7073
tree = tree.sibling;
7174
}
7275
return children;
7376
};
74-
77+
7578
//create tree structure from parsed fiber tree
7679
type ParseTreeInTreeStructureType = (tree: TreeNode | null) => any;
77-
const parseTreeInTreeStructure:ParseTreeInTreeStructureType = (tree) => {
80+
const parseTreeInTreeStructure: ParseTreeInTreeStructureType = tree => {
7881
if (!tree) return;
7982
let obj;
8083
// console.log("parsetree", tree);
@@ -86,8 +89,8 @@ const getReactTree = () => {
8689
name: tree.name,
8790
actualDuration: tree.actualDuration,
8891
selfBaseDuration: tree.selfBaseDuration,
89-
children: [tree.child, ...getChildren(tree.child)].map((elem: TreeNode) =>
90-
parseTreeInTreeStructure(elem)
92+
children: [tree.child, ...getChildren(tree.child)].map(
93+
(elem: TreeNode) => parseTreeInTreeStructure(elem)
9194
),
9295
};
9396
} else {
@@ -103,14 +106,14 @@ const getReactTree = () => {
103106
return obj;
104107
}
105108
};
106-
109+
107110
//remove nodes w/NFC(non functional component) from child array
108-
const removeNFCsFromChildArray = (tree:any) => {
111+
const removeNFCsFromChildArray = (tree: any) => {
109112
if (tree.children === null) return null;
110-
let parsedChildArray:any[] = [];
113+
let parsedChildArray: any[] = [];
111114
for (let i = 0; i < tree.children.length; i++) {
112115
const el = tree.children[i];
113-
if (el.name === "NFC") {
116+
if (el.name === 'NFC') {
114117
parsedChildArray = parsedChildArray.concat(
115118
removeNFCsFromChildArray({
116119
name: tree.name,
@@ -124,12 +127,12 @@ const getReactTree = () => {
124127
// console.log("Parsed Child Array", parsedChildArray);
125128
return parsedChildArray;
126129
};
127-
130+
128131
//removes all nodes w/NFC from tree
129132
const removeAllNFCs = (tree: TreeNode) => {
130133
//ASSUMING THAT THE ROOT NODE OF TREE IS NOT A NFC
131134
const immediateChildren = removeNFCsFromChildArray(tree) || [];
132-
const actualChildren:any[] = immediateChildren.map((child) => {
135+
const actualChildren: any[] = immediateChildren.map(child => {
133136
return {
134137
name: child.name,
135138
actualDuration: child.actualDuration,
@@ -139,57 +142,67 @@ const getReactTree = () => {
139142
});
140143
return actualChildren;
141144
};
142-
145+
143146
//create final, transformed tree structure
144-
type FinalType = (tree: TreeNode) => {name: string, actualDuration: number, selfBaseDuration: number, children: any[]};
145-
const final: FinalType = (tree) => {
147+
type FinalType = (tree: TreeNode) => {
148+
name: string;
149+
actualDuration: number;
150+
selfBaseDuration: number;
151+
children: any[];
152+
};
153+
const final: FinalType = tree => {
146154
return {
147155
name: tree.name,
148156
actualDuration: tree.actualDuration,
149157
selfBaseDuration: tree.selfBaseDuration,
150158
children: removeAllNFCs(tree),
151159
};
152160
};
153-
161+
154162
//event listener logs message from content script, resets eventList array
155-
document.addEventListener("CustomEventFromContentScript", function (event) {
156-
// console.log("Message from content script:", event.detail.message);
157-
eventList = [];
158-
});
159-
160-
//create customized oncommitfiber root function,
163+
document.addEventListener(
164+
'CustomEventFromContentScript',
165+
function (event) {
166+
// console.log("Message from content script:", event.detail.message);
167+
eventList = [];
168+
}
169+
);
170+
171+
//create customized oncommitfiber root function,
161172
type CustomOnCommitFiberRootType = (onCommitFiberRoot: any) => any;
162-
const customOnCommitFiberRoot: CustomOnCommitFiberRootType = (onCommitFiberRoot) => {
163-
return (...args: any) => {
164-
//extract fiberRoot from args
165-
const fiberRoot = args[1];
166-
//log info about fiberRoot
167-
// console.log(
168-
// "INJECT.JS: FIBER ROOT FROM THE CUSTOM ONCOMMITFIBERROOT",
169-
// fiberRoot
170-
// );
171-
// console.log("this is the unparsed tree", fiberRoot.current);
172-
//parse tree and add to eventList
173-
eventList.push(
174-
//@ts-ignore
175-
final(parseTreeInTreeStructure(parseTree(fiberRoot.current)))
176-
);
177-
//convert eventList to string
178-
const eventListStr = JSON.stringify(eventList);
179-
//send message w/eventList string
180-
window.postMessage({ type: "tree", eventListStr });
181-
return onCommitFiberRoot(...args);
173+
const customOnCommitFiberRoot: CustomOnCommitFiberRootType =
174+
onCommitFiberRoot => {
175+
return (...args: any) => {
176+
//extract fiberRoot from args
177+
const fiberRoot = args[1];
178+
//log info about fiberRoot
179+
// console.log(
180+
// "INJECT.JS: FIBER ROOT FROM THE CUSTOM ONCOMMITFIBERROOT",
181+
// fiberRoot
182+
// );
183+
// console.log("this is the unparsed tree", fiberRoot.current);
184+
//parse tree and add to eventList
185+
eventList.push(
186+
//@ts-ignore
187+
final(parseTreeInTreeStructure(parseTree(fiberRoot.current)))
188+
);
189+
//convert eventList to string
190+
const eventListStr = JSON.stringify(eventList);
191+
//send message w/eventList string
192+
window.postMessage({ type: 'tree', eventListStr });
193+
return onCommitFiberRoot(...args);
194+
};
182195
};
183-
};
184-
196+
185197
// create custom function to listen to changes
186-
reactDevGlobalHook.onCommitFiberRoot = customOnCommitFiberRoot(reactDevGlobalHook.onCommitFiberRoot);
187-
198+
reactDevGlobalHook.onCommitFiberRoot = customOnCommitFiberRoot(
199+
reactDevGlobalHook.onCommitFiberRoot
200+
);
188201
} catch (error) {
189202
// console.error("Error rendering component Tree: ", error);
190203
}
191204
}
192-
}
205+
};
193206

194207
// execute function
195-
getReactTree();
208+
getReactTree();

‎extension/src/App.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,14 +34,14 @@ function App() {
3434

3535
// listents for messages from npm package
3636
port.onMessage.addListener(message => {
37-
console.log('DEVTOOL: Recieved message from background.ts', message);
37+
// console.log('DEVTOOL: Recieved message from background.ts', message);
3838

3939
if (message.type === 'event') {
4040
setQueryEvents(queryEvents => [...queryEvents, message.payload]);
4141
}
4242

4343
if (message.type === 'tree') {
44-
console.log('APP.tsx: Recieved tree data', message);
44+
// console.log('APP.tsx: Recieved tree data', message);
4545
setTreeData(message.data);
4646
}
4747
});
@@ -64,7 +64,7 @@ function App() {
6464

6565
// adds event listener for when devToolsPort is disconnected
6666
devToolsPort?.onDisconnect.addListener(() => {
67-
console.log('DevTools port disconnected, port: ', devToolsPort);
67+
// console.log('DevTools port disconnected, port: ', devToolsPort);
6868
// setDevToolsPort(null);
6969
});
7070

‎extension/src/containers/ParentTab.tsx

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
import React, { useEffect, useState } from "react";
2-
import Tabs from "@mui/material/Tabs";
3-
import Tab from "@mui/material/Tab";
4-
import Box from "@mui/material/Box";
5-
import { ParentTabsProps } from "../types";
6-
import CustomTabPanel from "../components/CustomTabPanel";
7-
import a11yProps from "../functions/a11yProps";
8-
import TreeTab from "./TreeTab";
9-
import QueriesTab from "./QueriesTab";
1+
import React, { useEffect, useState } from 'react';
2+
import Tabs from '@mui/material/Tabs';
3+
import Tab from '@mui/material/Tab';
4+
import Box from '@mui/material/Box';
5+
import { ParentTabsProps } from '../types';
6+
import CustomTabPanel from '../components/CustomTabPanel';
7+
import a11yProps from '../functions/a11yProps';
8+
import TreeTab from './TreeTab';
9+
import QueriesTab from './QueriesTab';
1010

1111
const ParentTab = ({
1212
queryEvents,
@@ -28,13 +28,13 @@ const ParentTab = ({
2828
// only send message if devToolsPort is available and profiling is enabled
2929
if (devToolsPort && profilingEnabled) {
3030
devToolsPort.postMessage({
31-
type: "profiling-status",
31+
type: 'profiling-status',
3232
payload: profilingEnabled,
3333
});
3434
}
3535
}
3636
const toggleProfiling = () => {
37-
console.log("toggleProfiling clicked");
37+
// console.log("toggleProfiling clicked");
3838
const newProfilingStatus = !profilingStatus;
3939
setProfilingStatus(newProfilingStatus);
4040
sendMessageToContentScript(newProfilingStatus);
@@ -43,13 +43,13 @@ const ParentTab = ({
4343
return (
4444
<Box
4545
sx={{
46-
width: "100%",
47-
height: "100vh",
48-
display: "flex",
49-
flexDirection: "column",
46+
width: '100%',
47+
height: '100vh',
48+
display: 'flex',
49+
flexDirection: 'column',
5050
}}
5151
>
52-
<Box sx={{ borderBottom: 1, borderColor: "divider", height: "3rem" }}>
52+
<Box sx={{ borderBottom: 1, borderColor: 'divider', height: '3rem' }}>
5353
<Tabs
5454
value={value}
5555
onChange={handleChange}
@@ -61,7 +61,7 @@ const ParentTab = ({
6161
</Box>
6262

6363
<Box
64-
sx={{ flexGrow: 1, height: "calc(100vh - 3rem)", paddingTop: "0.5rem" }}
64+
sx={{ flexGrow: 1, height: 'calc(100vh - 3rem)', paddingTop: '0.5rem' }}
6565
>
6666
<CustomTabPanel value={value} index={0}>
6767
<QueriesTab

‎extension/src/containers/TreeTab.tsx

Lines changed: 25 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,32 @@ import ComponentTree from '../components/ComponentTree';
44
import ProfilingToggle from '../components/ProfilingToggle';
55
import { TreeTabProps } from '../types';
66

7-
const TreeTab:React.FC<TreeTabProps> = ({treeData, toggleProfiling, profilingStatus}) => {
8-
console.log('Update tree tab');
7+
const TreeTab: React.FC<TreeTabProps> = ({
8+
treeData,
9+
toggleProfiling,
10+
profilingStatus,
11+
}) => {
12+
// console.log('Update tree tab');
913
return (
10-
<Box sx={{ display: 'flex', flexDirection: 'column', width: '100%', height: '100%', marginTop: '1rem' }}>
11-
<ProfilingToggle
12-
toggleProfiling={toggleProfiling}
13-
profilingStatus={profilingStatus}
14-
>
15-
{profilingStatus ? 'Stop Profiling' : 'Start Profiling'}
16-
</ProfilingToggle>
17-
<div className='ct'></div>
18-
{ profilingStatus && (
19-
<ComponentTree fiberTree={treeData[treeData.length - 1]} />
20-
)}
14+
<Box
15+
sx={{
16+
display: 'flex',
17+
flexDirection: 'column',
18+
width: '100%',
19+
height: '100%',
20+
marginTop: '1rem',
21+
}}
22+
>
23+
<ProfilingToggle
24+
toggleProfiling={toggleProfiling}
25+
profilingStatus={profilingStatus}
26+
>
27+
{profilingStatus ? 'Stop Profiling' : 'Start Profiling'}
28+
</ProfilingToggle>
29+
<div className="ct"></div>
30+
{profilingStatus && (
31+
<ComponentTree fiberTree={treeData[treeData.length - 1]} />
32+
)}
2133
</Box>
2234
);
2335
};

0 commit comments

Comments
 (0)