replace css tree with an angular one, fix 100% cpu usage

src/main/java/com/commafeed/frontend/pages/HomePage.java

@@ -20,7 +20,6 @@ import com.commafeed.frontend.references.angularui.AngularUIReference;
 import com.commafeed.frontend.references.angularuibootstrap.AngularUIBootstrapReference;
 import com.commafeed.frontend.references.angularuistate.AngularUIStateReference;
 import com.commafeed.frontend.references.codemirror.CodeMirrorCssReference;
-import com.commafeed.frontend.references.csstreeview.CssTreeViewReference;
 import com.commafeed.frontend.references.mousetrap.MouseTrapReference;
 import com.commafeed.frontend.references.nggrid.NGGridReference;
 import com.commafeed.frontend.references.nginfinitescroll.NGInfiniteScrollReference;
@@ -54,7 +53,6 @@ public class HomePage extends BasePage {
 		NGGridReference.renderHead(response);
 		CodeMirrorCssReference.renderHead(response);
 
-		CssTreeViewReference.renderHead(response);
 		response.render(CssHeaderItem.forReference(OpenWebIconsCssReference
 				.instance()));
 

src/main/java/com/commafeed/frontend/references/csstreeview/CssTreeViewReference.java

@@ -1,19 +0,0 @@
-package com.commafeed.frontend.references.csstreeview;
-
-import org.apache.wicket.markup.head.CssHeaderItem;
-import org.apache.wicket.markup.head.IHeaderResponse;
-import org.apache.wicket.request.resource.CssResourceReference;
-
-public class CssTreeViewReference extends CssResourceReference {
-	private static final long serialVersionUID = 1L;
-
-	public static final CssTreeViewReference INSTANCE = new CssTreeViewReference();
-
-	private CssTreeViewReference() {
-		super(CssTreeViewReference.class, "css3-treeview.css");
-	}
-
-	public static void renderHead(final IHeaderResponse response) {
-		response.render(CssHeaderItem.forReference(INSTANCE));
-	}
-}

src/main/java/com/commafeed/frontend/references/csstreeview/css3-treeview.css

@@ -1,115 +0,0 @@
-.css-treeview ul,
-		.css-treeview li
-		{
-			padding: 0;
-			margin: 0;
-			list-style: none;
-		}
-
-		.css-treeview input
-		{
-			position: absolute;
-			opacity: 0;
-		}
-
-		.css-treeview
-		{
-			font: normal 11px "Segoe UI", Arial, Sans-serif;
-			-moz-user-select: none;
-			-webkit-user-select: none;
-			user-select: none;
-		}
-
-		.css-treeview a
-		{
-			color: #00f;
-			text-decoration: none;
-		}
-
-		.css-treeview a:hover
-		{
-			text-decoration: underline;
-		}
-
-		.css-treeview input + label + ul
-		{
-			margin: 0 0 0 22px;
-		}
-
-		.css-treeview input ~ ul
-		{
-			display: none;
-		}
-
-		.css-treeview label,
-		.css-treeview label::before
-		{
-			cursor: pointer;
-		}
-
-		.css-treeview input:disabled + label
-		{
-			cursor: default;
-			opacity: .6;
-		}
-
-		.css-treeview input:checked:not(:disabled) ~ ul
-		{
-			display: block;
-		}
-
-		.css-treeview label,
-		.css-treeview label::before
-		{
-			background: url("icons.png") no-repeat;
-		}
-
-		.css-treeview label,
-		.css-treeview a,
-		.css-treeview label::before
-		{
-			display: inline-block;
-			height: 16px;
-			line-height: 16px;,
-			vertical-align: middle;
-		}
-
-		.css-treeview label
-		{
-			background-position: 18px 0;
-		}
-
-		.css-treeview label::before
-		{
-			content: "";
-			width: 16px;
-			margin: 0 22px 0 0;
-			vertical-align: middle;
-			background-position: 0 -32px;
-		}
-
-		.css-treeview input:checked + label::before
-		{
-			background-position: 0 -16px;
-		}
-
-		/* webkit adjacent element selector bugfix */
-		@media screen and (-webkit-min-device-pixel-ratio:0)
-		{
-			.css-treeview 
-			{
-				-webkit-animation: webkit-adjacent-element-selector-bugfix infinite 1s;
-			}
-			
-			@-webkit-keyframes webkit-adjacent-element-selector-bugfix 
-			{
-				from 
-				{ 
-					padding: 0;
-				} 
-				to 
-				{ 
-					padding: 0;
-				}
-			}
-		}

src/main/webapp/css/app.css

@@ -1,3 +1,7 @@
+.pointer {
+	cursor: pointer;
+}
+
 .main .spinner {
 	display: inline-block;
 	margin-left: 11px;
@@ -43,6 +47,28 @@
 	white-space: nowrap;
 }
 
+.css-treeview .indent {
+	margin-left: 22px;
+}
+
+.css-treeview ul {
+	list-style: none;
+	margin-left: 0px;
+}
+
+.css-treeview .icon-fldr {
+	background: url("../images/tree_icons.png") no-repeat;
+	cursor: pointer;
+}
+
+.css-treeview .icon-fldr-open {
+	background-position: 0 -16px;
+}
+
+.css-treeview .icon-fldr-closed {
+	background-position: 0 -32px;
+}
+
 .css-treeview .error {
 	color: red;
 	font-style: italic;

src/main/webapp/directives/category.html

@@ -1,10 +1,11 @@
 <li>
-	<input type="checkbox" ng-model="node.expanded"
+	<span class="icon-fldr" ng-class="{'icon-fldr-closed': !node.expanded, 'icon-fldr-open': node.expanded}" ng-click="toggleCategory(node)"></span>
-		ng-click="toggleCategory(node)" />
+	<span ng-click="categoryClick({id: node.id})" class="pointer">
-	<label ng-click="categoryClick({id: node.id})"
+		<span class="icon-fldr icon-fldr-folder" ng-click="toggleCategory(node)"></span>
-		ng-class="{selected: (node.id == selectedId && selectedType == 'category'), unread: unreadCount({category:node})}">{{formatCategoryName({category:node})}}
+		<span ng-class="{selected: (node.id == selectedId && selectedType == 'category'), unread: unreadCount({category:node})}">{{formatCategoryName({category:node})}}
-	</label>
+		</span>
-	<ul>
+	</span>
+	<ul ng-show="node.expanded" class="indent">
 		<recursive>
 			<category ng-repeat="child in node.children"
 				node="child" feed-click="feedClick({id:id})"

src/main/webapp/js/directives.js

@@ -121,6 +121,7 @@ module.directive('category', function($compile) {
 			};
 
 			$scope.toggleCategory = function(category) {
+				category.expanded = !category.expanded;
 				SubscriptionService.collapse({
 					id : category.id,
 					collapse : !category.expanded