before pull

Author: aquinojardim

src/app/components/Action.tsx

@@ -39,7 +39,7 @@ interface ActionProps {
 const Action = (props: ActionProps): unknown => {
   const {
     selected, last, index, sliderIndex, dispatch, displayName, componentName,
-    componentData, state, viewIndex, handleOnkeyDown, key,
+    componentData, viewIndex, handleOnkeyDown,
   } = props;
 
   /**

src/app/components/Diff.tsx

@@ -39,11 +39,6 @@ function Diff(props: DiffProps) {
     if (newObj.state === 'stateless') {
       delete newObj.state;
     }
-    if (newObj.state.hooksState) {
-      newObj.state.hooksState.forEach(s => {
-        delete s.componentData;
-      });
-    }
     if (newObj.stateSnaphot) {
       newObj.stateSnaphot = statelessCleanning(obj.stateSnaphot);
     }

src/app/containers/MainContainer.tsx

@@ -96,12 +96,6 @@ function MainContainer(): any {
     if (newObj.state === 'stateless') {
       delete newObj.state;
     }
-    if (newObj.state.hooksState) {
-      newObj.state.hooksState.forEach(s => {
-        delete s.componentData;
-      });
-    }
-
     if (newObj.stateSnaphot) {
       newObj.stateSnaphot = statelessCleanning(obj.stateSnaphot);
     }

src/backend/linkFiber.ts

@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable max-len */
 import 'core-js';
 /* eslint-disable indent */
 /* eslint-disable brace-style */
@@ -111,21 +113,8 @@ export default (snap: Snapshot, mode: Mode): ()=>void => {
       treeBaseDuration,
     } = currentFiber;
 
-<<<<<<< HEAD
-    let newState: any = {};
+    let newState: any | {hooksState?: any[]} = {};
     let componentData: ComponentData = {};
-=======
-    let newState: any;
-    let componentData: ComponentData = {};
-    /* = {
-      index: -1,
-      actualDuration: 0,
-      actualStartTime: 0,
-      selfBaseDuration: 0,
-      treeBaseDuration: 0,
-    };
-    */
->>>>>>> master
     let componentFound = false;
 
     // Check if node is a stateful setState component
@@ -182,10 +171,6 @@ export default (snap: Snapshot, mode: Mode): ()=>void => {
 
     let newNode = null;
     // We want to add this fiber node to the snapshot
-<<<<<<< HEAD
-=======
-    // const snapshotState = newState.state || newState.hooksState;
->>>>>>> master
     if (componentFound || newState === 'stateless') {
       if (fromSibling) {
         newNode = tree.addSibling(newState,
@@ -196,7 +181,6 @@ export default (snap: Snapshot, mode: Mode): ()=>void => {
           elementType ? elementType.name : 'nameless',
           componentData);
       }
-      if (newState !== 'stateless') console.log('state updated:', newState);
     } else {
       newNode = tree;
     }
@@ -229,10 +213,6 @@ export default (snap: Snapshot, mode: Mode): ()=>void => {
 
   function onVisibilityChange(): void {
     doWork = !document.hidden;
-<<<<<<< HEAD
-=======
-    // console.log('doWork is:', doWork);
->>>>>>> master
   }
 
   return () => {
@@ -259,12 +239,9 @@ export default (snap: Snapshot, mode: Mode): ()=>void => {
         return function (...args) {
           // eslint-disable-next-line prefer-destructuring
           fiberRoot = args[1];
-          console.log('in CFR committed fiber');
           if (doWork) {
-            console.log('in CFR: updating snapshot');
             throttledUpdateSnapshot();
           }
-          console.log('in CFR updated snapshot');
           return original(...args);
         };
       }(devTools.onCommitFiberRoot));

src/extension/background.js

@@ -89,7 +89,7 @@ function changeCurrLocation(tabObj, rootNode, index, name) {
     return;
     // if not, recurse on each one of the children
   }
-  
+
   if (rootNode.children) { // Carlos: remove if, redundant
     rootNode.children.forEach(child => {
       changeCurrLocation(tabObj, child, index, name);
@@ -244,7 +244,7 @@ chrome.runtime.onMessage.addListener((request, sender) => {
           tabsObj[tabId].snapshots.splice(1);
           // gabi :: reset hierarchy to page initial state
           if (tabsObj[tabId].hierarchy) {
-            //test
+            // test
             tabsObj[tabId].hierarchy.children = [];
             // gabi :: reset currParent plus current state
             tabsObj[tabId].currParent = 1;
@@ -343,13 +343,11 @@ chrome.tabs.onRemoved.addListener(tabId => {
   delete firstSnapshotReceived[tabId];
 });
 
-// when a new url is loaded on the same tab, this remove the tabid from the tabsObj, recreate the tab and inject the script 
+// when a new url is loaded on the same tab, this remove the tabid from the tabsObj, recreate the tab and inject the script
 chrome.tabs.onUpdated.addListener((tabId, changeInfo) => {
-
   // check if the tab title changed to see if tab need to restart
-  if (changeInfo && tabsObj[tabId]){
-    if(changeInfo.title && changeInfo.title !== tabsObj[tabId].title){
-
+  if (changeInfo && tabsObj[tabId]) {
+    if (changeInfo.title && changeInfo.title !== tabsObj[tabId].title) {
       // tell devtools which tab to delete
       if (portsArr.length > 0) {
         portsArr.forEach(bg =>
@@ -367,21 +365,6 @@ chrome.tabs.onUpdated.addListener((tabId, changeInfo) => {
 
       // recreate the tab on the tabsObj
       tabsObj[tabId] = createTabObj(changeInfo.title);
-
-      // reinject the script to the tab
-      chrome.tabs.executeScript(tabId, {
-        code: `
-        // Function will attach script to the dom 
-        const injectScript = (file, tag) => {
-          const htmlBody = document.getElementsByTagName(tag)[0];
-          const script = document.createElement('script');
-          script.setAttribute('type', 'text/javascript');
-          script.setAttribute('src', file);
-          htmlBody.appendChild(script);
-        };
-        injectScript(chrome.runtime.getURL('bundles/backend.bundle.js'), 'body');
-      `,
-      });
     }
   }
 });

tests/manual-tests/CalculatorHooks/src/index.css

@@ -1,29 +1,50 @@
-.component-button {
-  display: inline-flex;
-  width: 25%;
-  flex: 1 0 auto;
+html {
+  height: 100%;
+  font-size: 10px;
 }
 
-.component-button.wide {
-  width: 50%;
+body {
+  background-color: black;
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
+  height: 100%;
 }
 
-.component-button button {
-  background: rgba(224,224,224,1);
-  border: 0;
-  border-radius: 10%;
-  font-size: 1.5rem;
-  margin: 0 1px 0 0;
-  flex: 1 0 auto;
-  padding: 0;
+#root {
+  height: 100%;
+}
+
+body .github-fork-ribbon:before {
+  background-color: #333;
+}
+
+@media screen and (max-width: 400px) {
+  .github-fork-ribbon {
+    display: none;
+  }
+}
+
+@media (min-width: 400px) and (min-height: 400px) {
+  html {
+    font-size: 20px;
+  }
+}
+
+@media (min-width: 500px) and (min-height: 500px) {
+  html {
+    font-size: 30px;
+  }
 }
 
-.component-button:last-child button {
-  margin-right: 0;
+@media (min-width: 600px) and (min-height: 600px) {
+  html {
+    font-size: 40px;
+  }
 }
 
-.component-button.orange button {
-  background: rgb(73, 119, 133);
-  border-radius: 10%;
-  color: white;
+@media (min-width: 800px) and (min-height: 800px) {
+  html {
+    font-size: 50px;
+  }
 }