Fixes graphql#48: add a prettify query button

css/app.css

@@ -215,6 +215,18 @@ html, body {
   padding-left: 3px;
 }
 
+#graphiql-container .tool-button {
+  cursor: pointer;
+  text-decoration: none;
+  font-family: sans-serif;
+  color: #ccc;
+  padding: 2px 4px;
+  margin: 0 4px;
+}
+#graphiql-container .tool-button:hover {
+  color: #333;
+}
+
 #graphiql-container .execute-button {
   background: -webkit-linear-gradient(#fdfdfd, #d2d3d6);
   background:         linear-gradient(#fdfdfd, #d2d3d6);

src/components/GraphiQL.js

@@ -8,10 +8,13 @@
 
 import React, { PropTypes } from 'react';
 import ReactDOM from 'react-dom';
+import { print } from 'graphql/language/printer';
+import { parse } from 'graphql/language/parser';
 import { GraphQLSchema } from 'graphql/type';
 import { buildClientSchema } from 'graphql/utilities';
 import find from 'graphql/jsutils/find';
 import { ExecuteButton } from './ExecuteButton';
+import { PrettifyButton } from './PrettifyButton';
 import { QueryEditor } from './QueryEditor';
 import { VariableEditor } from './VariableEditor';
 import { ResultViewer } from './ResultViewer';
@@ -261,6 +264,7 @@ export class GraphiQL extends React.Component {
             <div className="topBar">
               {logo}
               <ExecuteButton onClick={this._runEditorQuery} />
+              <PrettifyButton onClick={this._prettifyQuery} />
               {toolbar}
             </div>
             {!this.state.docsOpen &&
@@ -349,6 +353,12 @@ export class GraphiQL extends React.Component {
     });
   }
 
+  _prettifyQuery = () => {
+    const query = print(parse(this.state.query));
+    const editor = this.refs.queryEditor.getCodeMirror();
+    editor.setValue(query);
+  }
+
   _onEditQuery = value => {
     this._storageSet('query', value);
     this.setState({ query: value });

src/components/PrettifyButton.js

@@ -0,0 +1,38 @@
+/**
+ *  Copyright (c) 2015, Facebook, Inc.
+ *  All rights reserved.
+ *
+ *  This source code is licensed under the license found in the
+ *  LICENSE-examples file in the root directory of this source tree.
+ */
+
+import React, { PropTypes } from 'react';
+
+
+/**
+ * PrettifyButton
+ */
+export class PrettifyButton extends React.Component {
+  static propTypes = {
+    onClick: PropTypes.func
+  }
+
+  onClick = e => {
+    const { onClick } = this.props;
+    if (onClick) {
+      e.preventDefault();
+      onClick();
+    }
+  }
+
+  render() {
+    return (
+      <a
+        className="tool-button"
+        onClick={this.onClick}
+        title="Prettify Query">
+        {"{ }"}
+      </a>
+    );
+  }
+}