Nesting bug, modify to use better structure, don't rely on label element

as plugin container

war/src/main/js/pluginSetupWizardGui.js

@@ -282,7 +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 $toggle = $btn.parents('.plugin:first');
 		var plugName = $btn.attr('data-plugin-name');
 		if(!visibleDependencies[plugName]) {
 			visibleDependencies[plugName] = true;
@@ -291,10 +291,10 @@ var createPluginSetupWizard = function() {
 			visibleDependencies[plugName] = false;
 		}
 		if(!visibleDependencies[plugName]) {
-			$toggle.removeClass('show');
+			$toggle.removeClass('show-dependencies');
 		}
 		else {
-			$toggle.addClass('show');
+			$toggle.addClass('show-dependencies');
 		}
 	};
 
@@ -552,7 +552,7 @@ var createPluginSetupWizard = function() {
 				findIndex = (findIndex+1) % matches.length;
 			}
 			var $el = $(matches[findIndex]);
-			$el = $el.parents('label:first'); // scroll to the block
+			$el = $el.parents('.plugin:first'); // scroll to the block
 			if($el && $el.length > 0) {
 				var pos = $pl.scrollTop() + $el.position().top;
 				$pl.stop(true).animate({
@@ -571,7 +571,7 @@ var createPluginSetupWizard = function() {
 	// search for given text, optionally scroll to the next match, set classes on appropriate elements from the search match
 	var searchForPlugins = function(text, scroll) {
 		var $pl = $('.plugin-list');
-		var $containers = $pl.find('label');
+		var $containers = $pl.find('.plugin');
 
 		// must always do this, as it's called after refreshing the panel (e.g. check/uncheck plugs)
 		$containers.removeClass('match');
@@ -583,7 +583,7 @@ var createPluginSetupWizard = function() {
 			}
 			else {
 				var matches = findElementsWithText($pl[0], text.toLowerCase(), function(d) { return d.toLowerCase(); });
-				$(matches).parents('label').addClass('match');
+				$(matches).parents('.plugin').addClass('match');
 				if(lastSearch !== text && scroll) {
 					scrollPlugin($pl, matches, text);
 				}

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

@@ -31,13 +31,13 @@
 			<h2 id="{{id @key}}" class="expanded">{{@key}} {{pluginCountForCategory @key}}</h2>
 			<div class="plugins-for-category">
 				{{#each this}}
-				<span class="deps {{#ifVisibleDependency ../plugin.name}}show{{/ifVisibleDependency}}">
+				<div class="plugin {{#inSelectedPlugins plugin.name}}selected{{/inSelectedPlugins}} {{#ifVisibleDependency plugin.name}}show-dependencies{{/ifVisibleDependency}}" id="row-{{plugin.name}}">
 					{{#hasDependencies 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>
 					{{/hasDependencies}}
-					<label class="{{#inSelectedPlugins plugin.name}}selected{{/inSelectedPlugins}}" id="row-{{plugin.name}}">
+					<label>
 						<span class="title">
 							<input type="checkbox" id="chk-{{plugin.name}}" name="{{plugin.name}}" value="{{searchTerm}}" {{#inSelectedPlugins plugin.name}}checked="checked"{{/inSelectedPlugins}}/>
 							{{plugin.title}}
@@ -55,8 +55,8 @@
 							</div>
 						{{/hasDependencies}}
 					</label>
+				</div>
 				{{/each}}
-				</span>
 			</div>
 			{{/each}}
 		</div>

war/src/main/less/pluginSetupWizard.less

@@ -282,7 +282,7 @@
 				}
 
 				&.searching-with-transition {
-					label {
+					.plugin {
 						display: none;
 						transition: all .25s;
 
@@ -312,7 +312,7 @@
 				}
 
 				&.searching {
-					label {
+					.plugin {
 						display: none;
 						transition: all .25s;
 
@@ -331,119 +331,118 @@
 						}
 					}
 				}
-
-				label {
-					font-weight: normal;
-					padding: 7px 2px 7px 27px;
+				
+				.plugin {
 					position: relative;
-					display: block;
-					cursor: pointer;
-					margin: 4px -7px;
-
-		            &:hover{
-		              background: rgba(100, 200, 255, 0.1);
-                      box-shadow:inset 0 400px 400px -100px rgba(100, 200, 255, 0.33), inset 0 0 0 1px rgba(100, 200, 255, 0.33);
-		            }
-
-					&.selected {
+				
+					&.selected label {
 						background: #dff0d8;
 						margin: 4px -7px;
 						padding: 6px 0 6px 26px;
 						border-radius: 2px;
 						border: 1px solid #C2E0A9;
 						color: #3c763d;
-					}
 
-					.title {
-						display: block;
-						font-weight: bold;
-						white-space: nowrap;
-						position: relative;
+						.dependencies {
+							color: #777;
+						}
 					}
-
-					.description {
+	
+					label {
+						font-weight: normal;
+						padding: 7px 2px 7px 27px;
+						position: relative;
 						display: block;
-						margin-top: .5em;
+						cursor: pointer;
+						margin: 4px -7px;
+	
+						&:hover{
+						  background: rgba(100, 200, 255, 0.1);
+						  box-shadow:inset 0 400px 400px -100px rgba(100, 200, 255, 0.33), inset 0 0 0 1px rgba(100, 200, 255, 0.33);
+						}
+	
+						.title {
+							display: block;
+							font-weight: bold;
+							white-space: nowrap;
+							position: relative;
+						}
+	
+						.description {
+							display: block;
+							margin-top: .5em;
+						}
+	
+						input[type=checkbox] {
+							float: left;
+							margin: 2px -18px;
+							vertical-align: middle;
+						}
+	
+						+ .tooltip {
+							left: 2px !important;
+							margin-right: 16px;
+	
+							.tooltip-arrow {
+							left: 4em !important;
+							}
+	
+							.tooltip-inner {
+							max-width: none;
+							padding: .5em 1em;
+							text-align: left;
+							}
+						}
 					}
-
-					&.selected .dependencies {
+	
+					.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;
+						}
 					}
-
-					input[type=checkbox] {
-						float: left;
-						margin: 2px -18px;
-						vertical-align: middle;
+					
+					.dep-list {
+						padding: 10px 0 6px 0;
+						display: none;
+						
+						.badge {
+							padding: 4px 8px;
+							margin: 5px 3px 0 0;
+						}
+					}
+						
+					&.show-dependencies {
+						.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;
+						}
 					}
-
-					+ .tooltip {
-				        left: 2px !important;
-						margin-right: 16px;
-
-					    .tooltip-arrow {
-						left: 4em !important;
-					    }
-
-					    .tooltip-inner {
-						max-width: none;
-						padding: .5em 1em;
-						text-align: left;
-					    }
-				    }
-				}
-			}
-		}
-		
-		.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;
 				}
 			}
 		}