changes

Author: Nian Liu

build/webpack-bundle.js

@@ -8,6 +8,69 @@ body{
   background: linear-gradient(to right, #eef2f3, #8e9eab); W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+;   */
 }
 
+@media screen and (max-width: 600px) {
+  .reactTab {
+    display: grid;
+    grid-template-rows: 1fr 1fr 1fr;
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      'sp-box'
+      'diff'
+      'tree';
+  }
+  .state-prop-display {
+    grid-area: sp-box;
+    background-color: #333;
+    color: white;
+    overflow-y: scroll;
+    border: 1px solid black; 
+    border-radius: 5px;
+    padding: 5px 5px; 
+    margin-right: 10px;
+  }
+
+  #treeWrapper{
+    grid-area: tree;
+    background-color: rgba(214, 214, 214, 0.4);
+    border: 1px solid rgba(0, 0, 0, 0.3);
+    border-radius: 5px; 
+    padding: 10px;
+    margin-left: 10px;
+  }
+
+  #stateDiff-container {
+    grid-area: diff;
+    overflow-y: scroll;
+    background-color: rgba(214, 214, 214, 0.4);
+    border: 1px solid rgba(0, 0, 0, 0.3);
+    border-radius: 5px;
+    padding: 10px; 
+    margin-top: 10px;
+    margin-right: 10px;
+  }
+  
+  #state-header{
+    display: flex;
+    /* justify-content: space-between; */
+    margin-bottom: 5px;
+  }
+  
+  .stateDiff-div {
+    overflow-x: scroll;
+    padding: 15px;
+    background:rgba(255,255,255,0.5);
+    margin: 8px 0px;
+  }
+  
+  .state-span{
+    margin: 6px;
+    font-size: 1.2em;
+    font-weight: 500;
+    letter-spacing: 0.8px;
+    line-height: 15px;
+  }
+}
+
 #app-container{
   display: flex;
   padding: 10px 25px;

build/webpack-bundle.js.map

@@ -9,13 +9,8 @@ class TreeDiagram extends React.Component {
     this.state = {
       transition: null,
       orientation: 'vertical',
-<<<<<<< HEAD
-      foreignObjectWrapper: {x: 10, y: 4},
-      nodeSize: {x: 85, y: 85},
-=======
-      foreignObjectWrapper: {y: -5, x: 10},
-      nodeSize: {x: 75, y: 75},
->>>>>>> 9609025ded6a6f44d16730207d255bd1cb9c8d90
+      foreignObjectWrapper: {x: 8, y: 4},
+      nodeSize: {x: 95, y: 85},
     };
     this.handleFlip = this.handleFlip.bind(this);
   }
@@ -33,17 +28,13 @@ class TreeDiagram extends React.Component {
     });
   }
 
-<<<<<<< HEAD
-
-=======
->>>>>>> 9609025ded6a6f44d16730207d255bd1cb9c8d90
   handleFlip() {
     const dimensions = this.treeContainer.getBoundingClientRect();
     if(this.state.orientation === 'vertical') {
       this.setState({
         orientation: 'horizontal',
         foreignObjectWrapper: {x: 5, y: 8},
-        nodeSize: {x: 120, y:120},
+        nodeSize: {x: 110, y:110},
         translate: {
           x: dimensions.width / 8,
           y: dimensions.height / 2
@@ -52,7 +43,7 @@ class TreeDiagram extends React.Component {
     } else {
       this.setState({
         orientation: 'vertical',
-        foreignObjectWrapper: {x: 10, y: 4},
+        foreignObjectWrapper: {x: 8, y: 4},
         nodeSize: {x: 85, y: 85},
         translate: {
           x: dimensions.width / 2,
@@ -69,30 +60,29 @@ class TreeDiagram extends React.Component {
           circle: {
             fill: "black",
             fontSize: "0.1",
-            strokeWidth: 2
+            strokeWidth: 0.5
           }
         },
         attributes: {
           fill: "white",
           fontSize: "10",
-          strokeWidth: 1
+          strokeWidth: 0.5
         },
         leafNode: {
           circle: {
             fill: "none",
             fontSize: "0.1",
-            strokeWidth: 2
+            strokeWidth: 0.5
           },
           attributes: {
             fill: "white",
             fontSize: "10",
-            strokeWidth: 1
+            strokeWidth: 0.5
           }
         }
       }
     };
 
-<<<<<<< HEAD
 
     return (
       <div id="treeWrapper" ref={tc => (this.treeContainer = tc)}>
@@ -105,20 +95,6 @@ class TreeDiagram extends React.Component {
           <Tree
             data={this.props.appState}
             nodeSize={this.state.nodeSize}
-=======
-    return (
-      <div id="treeWrapper" ref={tc => (this.treeContainer = tc)}>
-        <button onClick={() => {this.handleFlip()}}> {this.state.orientation[0].toUpperCase() + this.state.orientation.slice(1)} </button>
-        <button onClick={() => { this.props.handleFilter(filterComponents.reduxComponents) }}>Filter Redux</button>
-        <button onClick={() => { this.props.handleFilter(filterComponents.reactRouterComponents) }}>Filter React-Router</button>
-        <button onClick={() => { this.props.handleFilter(filterComponents.apolloComponents) }}>Filter Apollo-GraphQL</button>
-     
-        {/* when appState has a length we populate tree */}
-        {this.props.appState.length !== 0 ? (
-          <Tree
-            data={this.props.appState}
-            nodeSize={{ x: 75, y: 75 }}
->>>>>>> 9609025ded6a6f44d16730207d255bd1cb9c8d90
             orientation={this.state.orientation}
             styles={styles}
             translate={this.state.translate}

public/app.css

@@ -26,8 +26,6 @@ class App extends Component {
       componentsToFilter: [],
     };
 
-    this.handleMouseOver = this.handleMouseOver.bind(this);
-
     chrome.devtools.panels.create("Lucid", null, "devtools.html");
   }
 
@@ -107,39 +105,6 @@ class App extends Component {
         );
       }
     }
-    
-    handleFilter(e, arr) {
-      //* if first index of arr is not in componentsToFilter arr, set incoming array to componentsToFilter
-      if(e.target.classList.contains('toggleOn')) {
-        e.target.classList.remove('toggleOn')
-      } else {
-        e.target.classList.add('toggleOn');
-      }
-      let result = []; 
-      if(!this.state.componentsToFilter.includes(arr[0])) {
-        let componentsArr = this.state.componentsToFilter.concat(arr);
-        filter(this.state.appState, componentsArr, result);
-        this.setState({
-          componentsToFilter: componentsArr,
-          filteredData: result
-        });
-      }
-      else {
-        //* if componentsToFilter is not empty iterate through 
-        let list = this.state.componentsToFilter;
-        for (let i = 0; i < list.length; i++) {
-          if (arr.includes(list[i])) {
-            // output.push(list[i]);
-            list.splice(i--, 1); 
-          }
-        }
-        filter(this.state.appState, list, result);
-        this.setState({
-          componentsToFilter: list,
-          filteredData: result
-        });
-      }
-    }
 
   //* invoke schema fetch only after a log object from a previous response is available
   componentDidUpdate(prevProps, prevState) {
@@ -158,7 +123,6 @@ class App extends Component {
     }
   }
 
-
   // * Handles the tab click for tree and req/res window
   handleWindowChange(target) {
     console.log(target);
@@ -174,7 +138,12 @@ class App extends Component {
   }
 
   // * Handles the filter for the component tree
-  handleFilter(arr) {
+  handleFilter(e, arr) {
+    if(e.target.classList.contains('toggleOn')) {
+      e.target.classList.remove('toggleOn')
+    } else {
+      e.target.classList.add('toggleOn');
+    }
     let result = [];
     if (!this.state.componentsToFilter.includes(arr[0])) {
       let componentsArr = this.state.componentsToFilter.concat(arr);
@@ -253,7 +222,7 @@ class App extends Component {
               ) : (
                   <div class='reactTab'>
                     <StateContainer clearLog={this.handleClearLog.bind(this)} stateDiffs={this.state.stateDiff} />
-                    <TreeDiagram appState={this.state.appFilteredDOM.length === 0 ? this.state.appState : this.state.appFilteredDOM} handleMouseOver={this.handleMouseOver} handleFilter={this.handleFilter.bind(this)} />
+                    <TreeDiagram appState={this.state.appFilteredDOM.length === 0 ? this.state.appState : this.state.appFilteredDOM} handleMouseOver={this.handleMouseOver.bind(this)} handleFilter={this.handleFilter.bind(this)} />
                     <StatePropsBox nodeData={this.state.nodeData} />
                   </div>
                 )}