Implemented vertical splitting into SplitPane

.flowconfig

@@ -13,6 +13,7 @@
 flow
 
 [options]
+esproposal.class_instance_fields=enable
 suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe
 suppress_comment=\\(.\\|\n\\)*\\$FlowIssue
 

frontend/Container.js

@@ -19,6 +19,14 @@ var TabbedPane = require('./TabbedPane');
 
 import type MenuItem from './ContextMenu';
 
+type Props = {};
+
+type State = {
+  isVertical: boolean,
+};
+
+var IS_VERTICAL_BREAKPOINT = 500;
+
 class Container extends React.Component {
   props: {
     reload: () => void,
@@ -37,14 +45,54 @@ class Container extends React.Component {
     },
     extraTabs: {[key: string]: () => React$Element},
   };
+  state: State;
+  resizeTimeout: ?number;
+
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      isVertical: (window.innerWidth > IS_VERTICAL_BREAKPOINT),
+    };
+  }
+
+  componentDidMount() {
+    window.addEventListener('resize', this.handleResize, false);
+    this.setState({
+      isVertical: (window.innerWidth > IS_VERTICAL_BREAKPOINT),
+    });
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.handleResize);
+    clearTimeout(this.resizeTimeout);
+  }
+
+  // $FlowFixMe future versions of Flow can infer this
+  handleResize = (e: Event): void => {
+    if (!this.resizeTimeout) {
+      this.resizeTimeout = setTimeout(this.handleResizeTimeout, 50);
+    }
+  };
+
+  // $FlowFixMe future versions of Flow can infer this
+  handleResizeTimeout = (): void => {
+    this.resizeTimeout = null;
+
+    this.setState({
+      isVertical: (window.innerWidth > IS_VERTICAL_BREAKPOINT),
+    });
+  };
 
   render() {
     var tabs = {
       Elements: () => (
         <SplitPane
-          initialWidth={300}
+          initialWidth={10}
+          initialHeight={10}
           left={() => <SearchPane reload={this.props.reload} />}
           right={() => <PropState extraPanes={this.props.extraPanes} />}
+          isVertical={this.state.isVertical}
         />
       ),
       ...this.props.extraTabs,

frontend/SplitPane.js

@@ -21,13 +21,18 @@ type Props = {
   left: () => React$Element,
   right: () => React$Element,
   initialWidth: number,
+  initialHeight: number,
+  isVertical: bool,
 };
 
-type DefaultProps = {};
+type DefaultProps = {
+  isVertical: true,
+};
 
 type State = {
   moving: boolean,
   width: number,
+  height: number,
 };
 
 class SplitPane extends React.Component {
@@ -40,29 +45,47 @@ class SplitPane extends React.Component {
     this.state = {
       moving: false,
       width: props.initialWidth,
+      height: props.initialHeight,
     };
   }
 
-  onMove(x: number) {
+  componentDidMount() {
     var node = ReactDOM.findDOMNode(this);
+
     this.setState({
-      width: (node.offsetLeft + node.offsetWidth) - x,
+      width: this.props.isVertical ? node.offsetWidth * 0.3 : node.offsetWidth * 0.6,
+      height: node.offsetHeight * 0.3,
     });
   }
 
+  onMove(x: number, y: number) {
+    var node = ReactDOM.findDOMNode(this);
+
+    this.setState(prevState => ({
+      width: !this.props.isVertical ? prevState.width : (node.offsetLeft + node.offsetWidth) - x,
+      height: this.props.isVertical ? prevState.height : (node.offsetTop + node.offsetHeight) - y,
+    }));
+  }
+
   render() {
     var rightStyle = assign({}, styles.rightPane, {
-      width: this.state.width,
+      width: this.props.isVertical ? this.state.width : '100%',
+      height: this.props.isVertical ? '100%' : this.state.height,
+      marginLeft: (this.props.isVertical) ? 0 : -3,
     });
+
+    var containerStyles = this.props.isVertical ? styles.container : styles.containerVertical;
+    var draggerStyles = this.props.isVertical ? styles.dragger : styles.draggerVertical;
+
     return (
-      <div style={styles.container}>
+      <div style={containerStyles}>
         <div style={styles.leftPane}>
           {this.props.left()}
         </div>
         <Draggable
-          style={styles.dragger}
+          style={draggerStyles}
           onStart={() => this.setState({moving: true})}
-          onMove={x => this.onMove(x)}
+          onMove={(x, y) => this.onMove(x, y)}
           onStop={() => this.setState({moving: false})}>
           <div style={styles.draggerInner} />
         </Draggable>
@@ -81,13 +104,28 @@ var styles = {
     flex: 1,
   },
 
+  containerVertical: {
+    display: 'flex',
+    minWidth: 0,
+    flex: 1,
+    flexDirection: 'column',
+  },
+
   dragger: {
     padding: '0 3px',
     cursor: 'ew-resize',
     position: 'relative',
     zIndex: 1,
   },
 
+  draggerVertical: {
+    backgroundColor: '#efefef',
+    padding: '3px 0',
+    cursor: 'ns-resize',
+    position: 'relative',
+    zIndex: 1,
+  },
+
   draggerInner: {
     backgroundColor: '#ccc',
     height: '100%',
@@ -97,14 +135,18 @@ var styles = {
   rightPane: {
     display: 'flex',
     marginLeft: -3,
+    minWidth: 100,
+    minHeight: 100,
     padding: 5,
   },
 
   leftPane: {
     display: 'flex',
     marginRight: -3,
-    minWidth: '255px',
+    minWidth: '50%',
+    minHeight: '50%',
     flex: 1,
+    borderBottom: '1px solid #ccc',
   },
 };
 

frontend/detail_pane/DetailPane.js

@@ -45,6 +45,7 @@ var styles = {
     userSelect: 'none',
   },
   header: {
+    backgroundColor: '#efefef',
     padding: 5,
     flexShrink: 0,
     display: 'flex',

plugins/Relay/QueriesTab.js

@@ -28,8 +28,10 @@ class QueriesTab extends React.Component {
       contents = (
         <SplitPane
           initialWidth={500}
+          initialHeight={500}
           left={() => <QueryList />}
           right={() => <QueryViewer />}
+          isVertical={false}
         />
       );
     }