Add button to collapse/expand file body

When hound search returns a large number of results it can be annoying to
scroll through the everything to find what you need. This adds a button to
collapse file body in search results.

Note that this change depends on hound-search#324 which adds new version of React which
has support for React.createRef.

ui/assets/css/hound.css

@@ -352,3 +352,4 @@ button:focus {
   margin-bottom: 40px;
 }
 
+.toggle-collapse-right { float: right }

ui/assets/js/hound.js

@@ -675,14 +675,37 @@ var FilesView = createReactClass({
         );
       });
 
+      var fileBodyRef = React.createRef();
+      var expandIconRef = React.createRef();
+      var collapseIconRef = React.createRef();
+
+      var toggleFileBody = function(e) {
+        var fileBodyDiv = fileBodyRef.current;
+        var expandIcon = expandIconRef.current;
+        var collapseIcon = collapseIconRef.current;
+        if (fileBodyDiv.style.display === "none") {
+          fileBodyDiv.style.display = "block";
+          expandIcon.style.display = "block";
+          collapseIcon.style.display = "none";
+        } else {
+          fileBodyDiv.style.display = "none";
+          expandIcon.style.display = "none";
+          collapseIcon.style.display = "block";
+        }
+      };
+
       return (
         <div className="file" key={repo + "-file-" + index}>
           <div className="title">
             <a href={Model.UrlToRepo(repo, match.Filename, null, rev)}>
               {match.Filename}
             </a>
+            <button className="toggle-collapse-right" onClick={toggleFileBody}>
+              <span style={{}} className="octicon octicon-chevron-down" ref={expandIconRef}></span>
+              <span style={{ display: "hidden" }} className="octicon octicon-chevron-left toggle-hidden" ref={collapseIconRef}></span>
+            </button>
           </div>
-          <div className="file-body">
+          <div className="file-body" ref={fileBodyRef}>
             {matches}
           </div>
         </div>