fullwidth zebra

default expand/collapsed ( branches deeper than the window > document are collapsed )

Author: p01

src/resource-manager/resource_service.js

@@ -56,7 +56,7 @@ cls.ResourceManagerService = function(view, network_logger)
     var ctx = {};
 
     ctx.windowList = this._network_logger.get_window_contexts();
-    if (ctx.windowList.length)
+    if (ctx.windowList && ctx.windowList.length)
     {
       var typeGroupMapping =
       {
@@ -170,10 +170,11 @@ cls.ResourceManagerService = function(view, network_logger)
     {
       var hash = this. _collapsedHash;
       var pivotID = pivot.getAttribute('data-expand-collapse-id');
-      if (hash[pivotID])
+
+      if (hash[pivotID] === true)
       {
+        hash[pivotID] = false;
         pivot.classList.remove('close');
-        delete hash[pivotID];
       }
       else
       {

src/resource-manager/resource_style.css

@@ -321,13 +321,15 @@ a.external:hover
 
 .resource-tree-documents, .resource-tree-groups, .resource-tree-resources
 {
-  padding:0 0 0 18px;
+  padding:0;
   margin:0;
 }
 /* zebra resources */
-.resource-tree-resources > li:nth-child(odd) > h2
+.resource-tree-windows
 {
-  background-color:rgba(0,0,0,.05);
+  background-image: linear-gradient(0deg, rgba(0,0,0,.05) 50%, transparent 0%);
+  background-size: 100% 36px;
+  background-repeat:repeat;
 }
 
 .resource-tree li > h2:hover

src/resource-manager/resource_templates.js

@@ -9,23 +9,57 @@ templates.resource_tree =
 {
 	_groupOrder:['markup','stylesheets','scripts','images','fonts','others'],
 
-	expandCollapseToggle:function(context, id, tpl)
+	_init:function()
+	{
+		this._initialized = true;
+		['document', 'resource_group', 'resource'].forEach(function(f)
+		{
+			var original = this[f];
+			this[f] = function()
+			{
+				this._depth++;
+
+				var r = original.apply(this, arguments);
+				if(r && r[1] && r[1][0] == 'h2')
+					r[1].push( 'style','padding-left:'+this._depth*18+'px;' );
+
+				this._depth--;
+				return r;
+			};
+		}, this);
+
+	},
+
+	expandCollapseToggle:function(context, pivotID, tpl)
 	{
 		var button = ['input',
 			'type','button',
 			'class','button-expand-collapse'
 		];
-		tpl.push('data-expand-collapse-id', id, 'class', 'resource-tree-expand-collapse'+(context.collapsed[id]?' close':''));
-		tpl[1].push( 'handler','resources-expand-collapse' );
 
+		var hash = context.collapsed;
+		if (!hash.hasOwnProperty(pivotID))
+			hash[pivotID] = this._depth>1;
+
+	 	var collapsed = hash[pivotID];
+
+		tpl.push
+		(
+			'data-expand-collapse-id', pivotID,
+			'class', 'resource-tree-expand-collapse'+(collapsed?' close':'')
+		);
 
+		tpl[1].push( 'handler','resources-expand-collapse' );
 		tpl[1].splice(1, 0, button);
 
 		return tpl;
 	},
 
 	update:function(context)
 	{
+		if (!this._initialized)
+			this._init();
+		this._depth = 0;
 		return this.windows(context);
 	},
 
@@ -109,7 +143,6 @@ templates.resource_tree =
 						this.resource_groups(context, resources),
 						this.documents(context, d.windowID, d.documentID)
 					]
-	//				'data-expand-collapse-id','d'+d.documentID
 				]
 			);
 	},