Merge pull request #33 from rtviner/manifest-updates

Package.json updates for Travis CI

Author: caitlinchan23

package.json

@@ -15,7 +15,7 @@
   "scripts": {
     "build": "webpack --mode production",
     "dev": "webpack --mode development --watch",
-    "test": "jest --verbose --coverage --watchAll --forceExit",
+    "test": "jest --verbose --coverage",
     "docker-test-lint": "eslint --ext .js --ext .jsx src",
     "docs": "typedoc --json docs --inputFiles src/app --inputFiles src/backend --readme docs/readme.md"
   },

src/app/components/BarGraph.tsx

@@ -56,7 +56,6 @@ const tooltipStyles = {
 const BarGraph = (props) => {
   const [{ tabs, currentTab }, dispatch] = useStoreContext();
   const { width, height, data } = props;
-  console.log('data: ', data)
   const {
     tooltipOpen, tooltipLeft, tooltipTop, tooltipData, hideTooltip, showTooltip,
   } = useTooltip<TooltipData>();
@@ -92,7 +91,6 @@ const BarGraph = (props) => {
   const yMax = height - margin.top - 150;
   snapshotIdScale.rangeRound([0, xMax]);
   renderingScale.range([yMax, 0]);
-  console.log("renderingScale range: ", renderingScale.range([yMax, 0]))
  return (
   <div> 
     <svg ref={containerRef} width={width} height={height}>
@@ -143,7 +141,6 @@ const BarGraph = (props) => {
                     /* TIP TOOL EVENT HANDLERS */
                     // Hides tool tip once cursor moves off the current rect
                     onMouseLeave={() => {
-                      console.log('bar: ', bar)
                       dispatch(onHoverExit(data.componentData[bar.key].rtid),
                       tooltipTimeout = window.setTimeout(() => {
                         hideTooltip()

src/app/components/ComponentMap.tsx

@@ -42,7 +42,7 @@ export default function ComponentMap({
   // imported props to be used to display the dendrogram
   width: totalWidth,
   height: totalHeight,
-  margin = defaultMargin,
+  margin: defaultMargin,
   snapshots: snapshots,
 }: LinkTypesProps) {
 
@@ -158,7 +158,6 @@ export default function ComponentMap({
                           stroke="#ff6569"
                           onClick={() => {
                             node.data.isExpanded = !node.data.isExpanded;
-                            // console.log(node);
                             forceUpdate();
                           }}
                         />
@@ -174,7 +173,7 @@ export default function ComponentMap({
                           stroke={node.children ? '#62d6fb' : '#161521'}
                           strokeWidth={1}
                           strokeDasharray={node.children ? '0' : '2,2'}
-                          strokeOpazcity='1'
+                          strokeOpacity='1'
                           rx={node.children ? 4 : 10}                         
                           onClick={() => {
                             node.data.isExpanded = !node.data.isExpanded;

src/app/components/legend.tsx

@@ -10,8 +10,6 @@ type snapHierarchy = {};
 //type snapHierarchy = {`Record<string, unknown>`};
 export default function LegendKey(props: any) {
   const { hierarchy } = props;
-  // console.log('this is the props' + JSON.stringify(Object.entries(props)))
-  // console.log('this is the props.hierarchy' + JSON.stringify(Object.entries(props.hierarchy)))
   // we are sifting through array of displayNames and sorting them into key value pairs in an object, based on the branch they are on:
   // { '.0': [1.0, 2.0, 3.0, 4.0], '.1': [1.1, 2.1, 3.1,...], '.2': [....]}
   // then we create an array, with each index being strings showing the range of the branch, see below:

src/backend/index.ts

@@ -25,9 +25,8 @@ const mode: Mode = {
   jumping: false,
   paused: false,
 };
-// console.log("linkFiberStart in index.ts:" + linkFiberStart);
+
 const linkFiber = linkFiberStart(snapShot, mode);
-// console.log('linkFiber in index.ts: ' + linkFiber);
 const timeJump = timeJumpStart(snapShot, mode);
 
 // function getRouteURL(node: SnapshotNode): string {
@@ -44,7 +43,6 @@ const timeJump = timeJumpStart(snapShot, mode);
 
 // * Event listener for time-travel actions
 window.addEventListener('message', ({ data: { action, payload } }: MsgData) => {
-  // console.log('linkFiber in index.ts: ' + linkFiber);
   switch (action) {
     case 'jumpToSnap':
       timeJump(payload, true); // * This sets state with given payload
@@ -57,21 +55,16 @@ window.addEventListener('message', ({ data: { action, payload } }: MsgData) => {
       mode.paused = payload;
       break;
     case 'onHover':
-      // console.log("curr payload ", payload); 
       if (Array.isArray(payload)) {
-        // console.log('inside array is array if block')
         for (let i = 0; i < payload.length; i + 1) {
-          // console.log("current payload value: ", payload[i]);
           let element = document.getElementById(payload[i])
           if (element !== null) {
              element.style.backgroundColor = '#C0D9D9'; 
              }
         }
       } else {
         let element: HTMLElement = document.querySelector(`.${payload}`);
-        // console.log("element: ", element);
         if (element !== null) {
-          // console.log("element style: ", element.style)
           element.style.backgroundColor = '#C0D9D9'; 
         }
       }
@@ -86,7 +79,6 @@ window.addEventListener('message', ({ data: { action, payload } }: MsgData) => {
         }
       } else {
         let element: HTMLElement = document.querySelector(`.${payload}`);
-        // console.log("element style: ", element.style)
         if (element !== null) {
           element.style.backgroundColor = ''; 
         }

src/backend/linkFiber.ts

@@ -313,7 +313,6 @@ function createTree(
       // We then store them along with the corresponding memoizedState.queue,
       // which includes the dispatch() function we use to change their state.
       const hooksStates = traverseRecoilHooks(memoizedState, memoizedProps);
-      // console.log("hookStates: ", hooksStates);
       hooksStates.forEach((state, i) => {
         hooksIndex = componentActionsRecord.saveNew(
           state.state,
@@ -326,8 +325,7 @@ function createTree(
 
         // }
         // newState.push(state.state);
-          // console.log('newState in Recoil: ', newState);
-          // console.log('state.state: ', state.state);
+
         /* what is this supposed to do??? currently doesn't work?? and makes no sense, newState is an object, how can you push state.state into an object?? */
         // if (newState && newState.hooksState) {
         //   newState.push(state.state);
@@ -416,7 +414,6 @@ function createTree(
             //  remove existing rtid before adding a new one
             if (pointer.stateNode.classList.length > 0) {
               let lastClass = pointer.stateNode.classList[pointer.stateNode.classList.length -1];
-              // console.log("last class: ", lastClass, "linkFiber class? ",    lastClass.includes("fromLinkFiber"));
               if (lastClass.includes("fromLinkFiber")) {
                 pointer.stateNode.classList.remove(lastClass);
               }
@@ -434,7 +431,6 @@ function createTree(
         //  remove existing rtid before adding a new one
         if (currentFiber.child.stateNode.classList.length > 0) {
           let lastClass = currentFiber.child.stateNode.classList[currentFiber.child.stateNode.classList.length -1];
-          // console.log("lastClass: ", lastClass, "linkFiber class? ", lastClass.includes("fromLinkFiber"));
           if (lastClass.includes("fromLinkFiber")) {
             currentFiber.child.stateNode.classList.remove(lastClass);
           }

src/backend/timeJump.ts

@@ -26,7 +26,6 @@ export default (origin, mode) => {
   // Set the state of the origin tree if the component is stateful
   function jump(target, firstCall = false) {
     if (!target) return;
-    //console.log("target in jump: ", target)
     if (target.state === 'stateless') {
       target.children.forEach(child => jump(child));
       return;
@@ -35,7 +34,6 @@ export default (origin, mode) => {
     const component = componentActionsRecord.getComponentByIndex(
       target.componentData.index,
     );
-    // console.log("component in time jump: ", component)
     // check if it is a stateful class component
     // if yes, find the component by its index and assign it to a variable
     // call that components setState method to reset state to the state at the time of the jump snapshot

src/extension/background.js

@@ -185,6 +185,7 @@ chrome.runtime.onMessage.addListener((request, sender) => {
 	const { action, index, name } = request;
 	let isReactTimeTravel = false;
 
+
 	// Filter out tabs that don't have reactime, tabs that dont use react?
 	if (
 		action === 'tabReload' ||

src/extension/build/manifest.json

@@ -12,11 +12,11 @@
   "icons": { "48": "assets/icon48.png", "128": "assets/icon128.png" },
   "content_scripts": [
     {
-      "matches": ["<all_urls>"],
+      "matches": ["http://localhost/*", "https://localhost/*"],
       "js": ["bundles/content.bundle.js"]
     }
   ],
   "web_accessible_resources" : ["bundles/backend.bundle.js"],
-  "permissions": ["contextMenus", "tabs", "activeTab", "<all_urls>"]
+  "permissions": ["contextMenus", "tabs", "activeTab", "http://localhost/*", "https://localhost/*"]
 
 }

src/extension/contentScript.ts

@@ -5,7 +5,7 @@ let firstMessage = true;
 window.addEventListener('message', msg => { // runs automatically every second
   // window listener picks up the message it sends, so we should filter
   // messages sent by contentscript
-  
+
   if (firstMessage) {
     // one-time request tells the background script that the tab has reloaded
     chrome.runtime.sendMessage({ action: 'tabReload' });