Merge pull request angular#6 from bradencanderson/right-pane

Right pane

panelSrc/components/ModuleEdit.js

@@ -0,0 +1,84 @@
+import CollapseButton from './CollapseButton';
+import React from 'react';
+
+class ModuleEdit extends React.Component {
+    constructor(props) {
+        super(props);
+        this.onChange = this.onChange.bind(this);
+    }
+
+    save() {
+        var val = this.sanitize(this.fields);
+        if (val) {
+            var fn = 'render(\'' + module.cid + '\',\'' + val + '\')';
+            chrome.devtools.inspectedWindow.eval(fn, {
+                useContentScriptContext: true
+            });
+        }
+    }
+
+    sanitize(fields) {
+        try {
+            Object.keys(fields).forEach(function(key) {
+                JSON.parse(fields[key]);
+            });
+            return JSON.stringify(fields);
+        } catch(e) {
+            // Invalid JSON object
+            return null;
+        }
+    }
+
+    prettyPrint(obj) {
+        return JSON.stringify(obj);
+    }
+
+    onChange(e) {
+        var key = e.target.getAttribute('data-key')
+        this.fields[key] = e.target.value;
+        this.forceUpdate();
+    }
+
+    componentWillUpdate(props, state) {
+        var module = this.props.module
+        if (!module || module.cid !== props.module.cid) {
+            this.fields = {};
+
+            var editables = ['data', 'resource', 'options', 'extraData'];
+            editables.forEach((key) => {
+                this.fields[key] = this.prettyPrint(props.module[key]);
+            });
+        }
+    }
+
+    render() {
+        var module = this.props.module;
+        if (!module) {
+            return null;
+        }
+
+        var fields = Object.keys(this.fields).map((key) => {
+            var value = this.fields[key];
+            return (
+                <div>
+                    <label>{key}</label>
+                    <textarea value={value} onChange={this.onChange} data-key={key}></textarea>
+                </div>
+            )
+        });
+
+        return (
+            <div>
+                <header className="title">{module.name}</header>
+                <div className="content">{fields}</div>
+                <button className="save">Save</button>
+            </div>
+        );
+    }
+}
+
+ModuleEdit.propTypes = {
+    module: React.PropTypes.object
+};
+
+export default ModuleEdit;

panelSrc/components/ModuleTree.js

@@ -30,7 +30,6 @@ class ModuleTree extends React.Component {
     }
 
     onClick() {
-        console.log('clicked ', this.props.module);
         this.props.onSelect(this.props.module);
     }
 

panelSrc/components/PinspectorApp.js

@@ -3,6 +3,7 @@ import React from 'react';
 import Model from './Model';
 import ModelDependentComponent from './ModelDependentComponent';
 import ModuleTree from './ModuleTree';
+import ModuleEdit from './ModuleEdit';
 import SplitPane from './SplitPane';
 
 // CSS
@@ -30,6 +31,13 @@ class PinspectorApp extends ModelDependentComponent {
                         </ol>
                     </div>
                 }
+                rightPane={
+                    <div className="module-edit">
+                        <ModuleEdit
+                            module={this.state.selectedModule}
+                        />
+                    </div>
+                }
             />
         );
     }

panelSrc/components/SplitPane.js

@@ -4,7 +4,7 @@ class SplitPane extends React.Component {
     constructor(props) {
         super(props);
 
-        this.state = {leftWidth: 450};
+        this.state = {leftWidth: 400};
 
         this.mouseDown = this.mouseDown.bind(this);
         this.mouseMove = this.mouseMove.bind(this);

panelSrc/styles/main.css

@@ -59,6 +59,7 @@ body, html, #content, .split-pane {
 .separator {
     cursor: col-resize;
     height: 100%;
+    margin-left: -4px;
     position: fixed;
     width: 8px;
     top: 0;
@@ -77,3 +78,28 @@ body, html, #content, .split-pane {
     box-shadow: inset 0 0 1px rgb(81, 173, 250);
     color: rgb(81, 173, 250);
 }
+
+.module-edit {
+    padding: 15px;
+}
+
+.module-edit header {
+    font-size: 20px;
+    font-weight: 600;
+    margin: 10px auto 15px;
+    text-align: center;
+}
+
+.module-edit textarea {
+    height: 100px;
+    width: 98%;
+}
+
+.module-edit label {
+    font-weight: 600;
+}
+
+.module-edit button {
+    left: 50%;
+    position: relative;
+}