Move dependency toggle out of label, so it won't affect the nearby

checkbox, fix stray 'deps' element

war/src/main/js/pluginSetupWizardGui.js

@@ -282,6 +282,7 @@ var createPluginSetupWizard = function() {
 	// toggles visibility of dependency listing for a plugin
 	var toggleDependencyList = function() {
 		var $btn = $(this);
+		var $toggle = $btn.parents('.deps:first');
 		var plugName = $btn.attr('data-plugin-name');
 		if(!visibleDependencies[plugName]) {
 			visibleDependencies[plugName] = true;
@@ -290,10 +291,10 @@ var createPluginSetupWizard = function() {
 			visibleDependencies[plugName] = false;
 		}
 		if(!visibleDependencies[plugName]) {
-			$btn.removeClass('active');
+			$toggle.removeClass('show');
 		}
 		else {
-			$btn.addClass('active');
+			$toggle.addClass('show');
 		}
 	};
 

war/src/main/js/templates/pluginSelectionPanel.hbs

@@ -31,30 +31,32 @@
 			<h2 id="{{id @key}}" class="expanded">{{@key}} {{pluginCountForCategory @key}}</h2>
 			<div class="plugins-for-category">
 				{{#each this}}
-				<label class="{{#inSelectedPlugins plugin.name}}selected{{/inSelectedPlugins}}" id="row-{{plugin.name}}">
-					<span class="title">
-						<input type="checkbox" id="chk-{{plugin.name}}" name="{{plugin.name}}" value="{{searchTerm}}" {{#inSelectedPlugins plugin.name}}checked="checked"{{/inSelectedPlugins}}/>
-						{{plugin.title}}
-					</span>
-					<span class="description">
-						{{{plugin.excerpt}}}
-					</span>
+				<span class="deps {{#ifVisibleDependency ../plugin.name}}show{{/ifVisibleDependency}}">
 					{{#hasDependencies plugin.name}}
-					<span class="deps">
-						<div class="btn btn-link toggle-dependency-list {{#ifVisibleDependency ../plugin.name}}active{{/ifVisibleDependency}}" type="button" data-plugin-name="{{../plugin.name}}">
+						<div class="btn btn-link toggle-dependency-list" type="button" data-plugin-name="{{../plugin.name}}">
 							{{../../../translations.installWizard_installIncomplete_dependenciesLabel}}<span class="badge">{{dependencyCount ../plugin.name}}</span>
 						</div>
-						<div class="dep-list">
-							{{#eachDependency ../plugin.name}}
-							<span class="dep badge">
-							{{title}}
-							</span>
-							{{/eachDependency}}
-						</div>
-					</deps>
 					{{/hasDependencies}}
-				</label>
+					<label class="{{#inSelectedPlugins plugin.name}}selected{{/inSelectedPlugins}}" id="row-{{plugin.name}}">
+						<span class="title">
+							<input type="checkbox" id="chk-{{plugin.name}}" name="{{plugin.name}}" value="{{searchTerm}}" {{#inSelectedPlugins plugin.name}}checked="checked"{{/inSelectedPlugins}}/>
+							{{plugin.title}}
+						</span>
+						<span class="description">
+							{{{plugin.excerpt}}}
+						</span>
+						{{#hasDependencies plugin.name}}
+							<div class="dep-list">
+								{{#eachDependency ../plugin.name}}
+								<span class="dep badge">
+								{{title}}
+								</span>
+								{{/eachDependency}}
+							</div>
+						{{/hasDependencies}}
+					</label>
 				{{/each}}
+				</span>
 			</div>
 			{{/each}}
 		</div>

war/src/main/less/pluginSetupWizard.less

@@ -376,62 +376,6 @@
 						vertical-align: middle;
 					}
 
-					.deps {
-						.toggle-dependency-list {
-							position: absolute;
-							top: 2px;
-							right: 5px;
-							color: #777;
-							border: 0;
-							text-decoration: none;
-							padding: 4px 8px;
-							
-							.badge {
-								margin-left: 7px;
-							}
-							
-							&:hover, &.active {
-								text-decoration: underline;
-							}
-							
-							&.active {
-								&:after {
-									content: '';
-									display: inline-block;
-									position: absolute;
-									top: 50%;
-									right: 100%;
-									width: 0; 
-									height: 0; 
-									border-left: 7px solid transparent;
-									border-right: 7px solid transparent;
-									border-top: 7px solid #999;
-									margin: -3px -3px 0 0;
-								}
-								+ .dep-list {
-									display: block;
-								}
-							}
-						}
-						
-						.dep-list {
-							padding: 10px 0 6px 0;
-							display: none;
-							
-							.badge {
-								padding: 4px 8px;
-								margin: 5px 3px 0 0;
-							}
-						}
-					}
-					
-					&.selected .deps {
-						.toggle-dependency-list {
-							top: 1px;
-							right: 4px;
-						}
-					}
-
 					+ .tooltip {
 				        left: 2px !important;
 						margin-right: 16px;
@@ -449,6 +393,60 @@
 				}
 			}
 		}
+		
+		.deps {
+			display: block;
+			position: relative;
+			
+			.toggle-dependency-list {
+				position: absolute;
+				top: 0;
+				right: 0;
+				color: #777;
+				border: 0;
+				text-decoration: none;
+				padding: 5px 13px;
+				z-index: 100;
+				
+				.badge {
+					margin-left: 7px;
+				}
+				
+				&:hover, &.active {
+					text-decoration: underline;
+				}
+			}
+			
+			.dep-list {
+				padding: 10px 0 6px 0;
+				display: none;
+				
+				.badge {
+					padding: 4px 8px;
+					margin: 5px 3px 0 0;
+				}
+			}
+				
+			&.show {
+				.toggle-dependency-list:after {
+					content: '';
+					display: inline-block;
+					position: absolute;
+					top: 50%;
+					right: 100%;
+					width: 0; 
+					height: 0; 
+					border-left: 7px solid transparent;
+					border-right: 7px solid transparent;
+					border-top: 7px solid #999;
+					margin: -3px -3px 0 0;
+				}
+				
+				.dep-list {
+					display: block;
+				}
+			}
+		}
 
 		.categories {
 			position: relative;