Improved design and tree for devtools

package.json

@@ -47,6 +47,7 @@
     "redux": "^1.0.0 || 1.0.0-rc"
   },
   "dependencies": {
+    "react-mixin": "^1.7.0",
     "react-redux": "^0.5.0",
     "redux": "^1.0.0-rc"
   }

src/react/DebugPanel.js

@@ -13,17 +13,19 @@ export function getDefaultStyle(props) {
     position: 'fixed',
     zIndex: 10000,
     fontSize: 17,
-    overflow: 'auto',
-    opacity: 0.92,
-    background: 'black',
+    overflow: 'hidden',
+    opacity: 1,
     color: 'white',
     left: left ? 0 : undefined,
     right: right ? 0 : undefined,
     top: top ? 0 : undefined,
     bottom: bottom ? 0 : undefined,
     maxHeight: (bottom && top) ? '100%' : '20%',
     maxWidth: (left && right) ? '100%' : '20%',
-    wordWrap: 'break-word'
+    minWidth: 300,
+    wordWrap: 'break-word',
+    boxSizing: 'border-box',
+    boxShadow: '-2px 0 7px 0 rgba(0, 0, 0, 0.5)'
   };
 }
 

src/react/JSONTree/JSONArrayNode.js

@@ -0,0 +1,125 @@
+import React from 'react';
+import reactMixin from 'react-mixin';
+import { ExpandedStateHandlerMixin } from './mixins';
+import JSONArrow from './JSONArrow';
+import grabNode from './grab-node';
+
+const styles = {
+  base: {
+    position: 'relative',
+    paddingTop: 3,
+    paddingBottom: 3,
+    paddingRight: 0,
+    marginLeft: 14
+  },
+  label: {
+    margin: 0,
+    padding: 0,
+    display: 'inline-block'
+  },
+  span: {
+    cursor: 'default'
+  },
+  spanType: {
+    marginLeft: 5,
+    marginRight: 5
+  }
+};
+
+@reactMixin.decorate(ExpandedStateHandlerMixin)
+export default class JSONArrayNode extends React.Component {
+  defaultProps = {
+    data: [],
+    initialExpanded: false
+  };
+
+  // flag to see if we still need to render our child nodes
+  needsChildNodes = true;
+
+  // cache store for our child nodes
+  renderedChildren = [];
+
+  // cache store for the number of items string we display
+  itemString = false;
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      expanded: this.props.initialExpanded,
+      createdChildNodes: false
+    };
+  }
+
+  // Returns the child nodes for each element in the array. If we have
+  // generated them previously, we return from cache, otherwise we create
+  // them.
+  getChildNodes() {
+    if (this.state.expanded && this.needsChildNodes) {
+      let childNodes = [];
+      this.props.data.forEach((element, idx) => {
+        let prevData;
+        if (typeof this.props.previousData !== 'undefined') {
+          prevData = this.props.previousData[idx];
+        }
+        const node = grabNode(idx, element, prevData, this.props.theme);
+        if (node !== false) {
+          childNodes.push(node);
+        }
+      });
+      this.needsChildNodes = false;
+      this.renderedChildren = childNodes;
+    }
+    return this.renderedChildren;
+  }
+
+  // Returns the "n Items" string for this node, generating and
+  // caching it if it hasn't been created yet.
+  getItemString() {
+    if (!this.itemString) {
+      this.itemString = this.props.data.length + ' item' + (this.props.data.length !== 0 ? 's' : '');
+    }
+    return this.itemString;
+  }
+
+  render() {
+    const childNodes = this.getChildNodes();
+    const childListStyle = {
+      padding: 0,
+      margin: 0,
+      listStyle: 'none',
+      display: (this.state.expanded) ? 'block' : 'none'
+    };
+    let containerStyle;
+    let spanStyle = {
+      ...styles.span,
+      color: this.props.theme.base0E
+    };
+    containerStyle = {
+      ...styles.base
+    };
+    if (this.state.expanded) {
+      spanStyle = {
+        ...spanStyle,
+        color: this.props.theme.base03
+      };
+    }
+    return (
+      <li style={containerStyle}>
+        <JSONArrow theme={this.props.theme} open={this.state.expanded} onClick={::this.handleClick}/>
+        <label style={{
+          ...styles.label,
+          color: this.props.theme.base0D
+        }} onClick={::this.handleClick}>
+          {this.props.keyName}:
+        </label>
+        <span style={spanStyle} onClick={::this.handleClick}>
+          <span style={styles.spanType}>[]</span>
+          {this.getItemString()}
+        </span>
+        <ol style={childListStyle}>
+          {childNodes}
+        </ol>
+      </li>
+    );
+  }
+}

src/react/JSONTree/JSONArrow.js

@@ -0,0 +1,42 @@
+import React from 'react';
+
+const styles = {
+  base: {
+    display: 'inline-block',
+    marginLeft: 0,
+    marginTop: 8,
+    marginRight: 5,
+    'float': 'left',
+    transition: '150ms',
+    WebkitTransition: '150ms',
+    MozTransition: '150ms',
+    borderLeft: '5px solid transparent',
+    borderRight: '5px solid transparent',
+    borderTopWidth: 5,
+    borderTopStyle: 'solid',
+    WebkitTransform: 'rotateZ(-90deg)',
+    MozTransform: 'rotateZ(-90deg)',
+    transform: 'rotateZ(-90deg)'
+  },
+  open: {
+    WebkitTransform: 'rotateZ(0deg)',
+    MozTransform: 'rotateZ(0deg)',
+    transform: 'rotateZ(0deg)'
+  }
+};
+
+export default class JSONArrow extends React.Component {
+  render() {
+    let style = {
+      ...styles.base,
+      borderTopColor: this.props.theme.base0D
+    };
+    if (this.props.open) {
+      style = {
+        ...style,
+        ...styles.open
+      };
+    }
+    return <div style={style} onClick={this.props.onClick}/>;
+  }
+}

src/react/JSONTree/JSONBooleanNode.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import reactMixin from 'react-mixin';
+import { SquashClickEventMixin } from './mixins';
+import hexToRgb from '../../utils/hexToRgb';
+
+const styles = {
+  base: {
+    paddingTop: 3,
+    paddingBottom: 3,
+    paddingRight: 0,
+    marginLeft: 14
+  },
+  label: {
+    display: 'inline-block',
+    marginRight: 5
+  }
+};
+
+@reactMixin.decorate(SquashClickEventMixin)
+export default class JSONBooleanNode extends React.Component {
+  render() {
+    const truthString = (this.props.value) ? 'true' : 'false';
+    let backgroundColor = 'transparent';
+    if (this.props.previousValue !== this.props.value) {
+      const bgColor = hexToRgb(this.props.theme.base06);
+      backgroundColor = `rgba(${bgColor.r}, ${bgColor.g}, ${bgColor.b}, 0.1)`;
+    }
+    return (
+      <li style={{ ...styles.base, backgroundColor }} onClick={::this.handleClick}>
+        <label style={{
+          ...styles.label,
+          color: this.props.theme.base0D
+        }}>
+          {this.props.keyName}:
+        </label>
+        <span style={{ color: this.props.theme.base09 }}>{truthString}</span>
+      </li>
+    );
+  }
+}

src/react/JSONTree/JSONNullNode.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import reactMixin from 'react-mixin';
+import { SquashClickEventMixin } from './mixins';
+import hexToRgb from '../../utils/hexToRgb';
+
+const styles = {
+  base: {
+    paddingTop: 3,
+    paddingBottom: 3,
+    paddingRight: 0,
+    marginLeft: 14
+  },
+  label: {
+    display: 'inline-block',
+    marginRight: 5
+  }
+};
+
+@reactMixin.decorate(SquashClickEventMixin)
+export default class JSONNullNode extends React.Component {
+  render() {
+    let backgroundColor = 'transparent';
+    if (this.props.previousValue !== this.props.value) {
+      const bgColor = hexToRgb(this.props.theme.base06);
+      backgroundColor = `rgba(${bgColor.r}, ${bgColor.g}, ${bgColor.b}, 0.1)`;
+    }
+    return (
+      <li style={{ ...styles.base, backgroundColor }} onClick={::this.handleClick}>
+        <label style={{
+          ...styles.label,
+          color: this.props.theme.base0D
+        }}>
+          {this.props.keyName}:
+        </label>
+        <span style={{ color: this.props.theme.base08 }}>null</span>
+      </li>
+    );
+  }
+}

src/react/JSONTree/JSONNumberNode.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import reactMixin from 'react-mixin';
+import { SquashClickEventMixin } from './mixins';
+import hexToRgb from '../../utils/hexToRgb';
+
+const styles = {
+  base: {
+    paddingTop: 3,
+    paddingBottom: 3,
+    paddingRight: 0,
+    marginLeft: 14
+  },
+  label: {
+    display: 'inline-block',
+    marginRight: 5
+  }
+};
+
+@reactMixin.decorate(SquashClickEventMixin)
+export default class JSONNumberNode extends React.Component {
+  render() {
+    let backgroundColor = 'transparent';
+    if (this.props.previousValue !== this.props.value) {
+      const bgColor = hexToRgb(this.props.theme.base06);
+      backgroundColor = `rgba(${bgColor.r}, ${bgColor.g}, ${bgColor.b}, 0.1)`;
+    }
+    return (
+      <li style={{ ...styles.base, backgroundColor }} onClick={::this.handleClick}>
+        <label style={{
+          ...styles.label,
+          color: this.props.theme.base0D
+        }}>
+          {this.props.keyName}:
+        </label>
+        <span style={{ color: this.props.theme.base09 }}>{this.props.value}</span>
+      </li>
+    );
+  }
+}