From 2be4248ea395c69c176097a526d73d90b4ef56d2 Mon Sep 17 00:00:00 2001
From: Daniel Kvist <daniel@danielkvist.net>
Date: Wed, 30 Mar 2016 22:38:18 +0200
Subject: [PATCH] Add menu toggle to show/hide the controls. Ref
 webgoat/webgoat#93

---
 .../main/webapp/WEB-INF/pages/main_new.jsp    | 20 ++++++++++---------
 .../src/main/webapp/css/main.css              |  3 +++
 .../js/goatApp/view/DeveloperControlsView.js  | 17 ++++++++++++++++
 3 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/webgoat-container/src/main/webapp/WEB-INF/pages/main_new.jsp b/webgoat-container/src/main/webapp/WEB-INF/pages/main_new.jsp
index b601f15f2..bc5c36f71 100644
--- a/webgoat-container/src/main/webapp/WEB-INF/pages/main_new.jsp
+++ b/webgoat-container/src/main/webapp/WEB-INF/pages/main_new.jsp
@@ -71,10 +71,10 @@
                             <li role="presentation" class="divider"></li>     
                             <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">User: ${user}</a></li>
                             <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Role: ${role}</a></li>
-                            <li role="presentation" class="divider"></li>   
+                            <li role="presentation" class="divider"></li>
+                            <li role="presentation"><a role="menuitem" tabindex="-1" href="#developer-controls">Show developer controls</a></li>      
                             <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">${version}</a></li>
-                            <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Build: ${build}</a></li>                            
-
+                            <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Build: ${build}</a></li>
                         </ul>
                     </div>
                     <button type="button" id="about-button"  class="btn btn-default right_nav_button" title="About WebGoat" data-toggle="modal" data-target="#about-modal"> 
@@ -142,12 +142,14 @@
                                                 <h4>Params</h4>
                                             </div>
                                         </div>
-                                        <div align="left">
-                                            <h3>Developer controls</h3>
-                                        </div>
-                                        <hr />
-                                        <div id="developer-controls">
-                                        
+                                        <div id="developer-control-container">
+	                                        <div align="left">
+	                                            <h3>Developer controls</h3>
+	                                        </div>
+	                                        <hr />
+	                                        <div id="developer-controls">
+	                                        
+	                                        </div>
                                         </div>
                                     </div>
                                 </div>
diff --git a/webgoat-container/src/main/webapp/css/main.css b/webgoat-container/src/main/webapp/css/main.css
index b7dc144ef..c05467ad1 100644
--- a/webgoat-container/src/main/webapp/css/main.css
+++ b/webgoat-container/src/main/webapp/css/main.css
@@ -777,6 +777,9 @@ cookie-container {
     color: #e84c3d
 }
 
+#developer-control-container {
+	display: none;
+}
 
 #menu-container a,
 .developer-controls-table a {
diff --git a/webgoat-container/src/main/webapp/js/goatApp/view/DeveloperControlsView.js b/webgoat-container/src/main/webapp/js/goatApp/view/DeveloperControlsView.js
index 04d8157c2..1230113b6 100644
--- a/webgoat-container/src/main/webapp/js/goatApp/view/DeveloperControlsView.js
+++ b/webgoat-container/src/main/webapp/js/goatApp/view/DeveloperControlsView.js
@@ -28,11 +28,28 @@ function(
 	    },
 
 		initialize: function(options) {
+			this.addMenuListener();
 			this.models = [new PluginReloadModel(), new LabelDebugModel()];
 			this.listenTo(this.models[0], 'plugins:loaded', this.onPluginsLoaded);
 			this.listenTo(this.models[1], 'plugins:loaded', this.onLabelsLoaded);
 			this.render();
 		},
+		
+		addMenuListener: function() {
+			var showHandler = function(e) {
+				e.preventDefault();
+				$('#developer-control-container').show();
+				$(this).text('Hide developer controls').off().on('click', hideHandler);
+			};
+			
+			var hideHandler = function(e) {
+				e.preventDefault();
+				$('#developer-control-container').hide();
+				$(this).text('Show developer controls').off().on('click', showHandler);
+			};
+			
+			$('a[href="#developer-controls"]').click(showHandler);
+		},
 
 		render: function() {
 			this.$el.html('');