Moved the groupOrder to cls.ResourceTreeView and initialize all the default collapsed flags

Author: p01

src/resource-manager/resource_service.js

@@ -76,6 +76,10 @@ cls.ResourceManagerService = function(view, network_logger)
     }
 
     var ctx = {};
+
+    // get the order of the groups of resources
+    ctx.groupOrder = this._view.get_group_order();
+
     // get list of window_contexts for which we saw the main_document
     ctx.windowList = (this._network_logger.get_window_contexts()||[])
     .filter(function(w)
@@ -98,7 +102,6 @@ cls.ResourceManagerService = function(view, network_logger)
       var windowID_index = {};
       ctx.windowList.forEach(function(w,i){ windowID_index[w.id] = i; });
 
-
       var documentID_index = {};
       // filter the documentId that belong in the windowIdList
       ctx.documentList  = this._documentList
@@ -116,9 +119,18 @@ cls.ResourceManagerService = function(view, network_logger)
 
           //  set depth, pivotID and sameOrigin
           var p = a[ documentID_index[ d.parentDocumentID ] ]||{pivotID:d.windowID,depth:0};
+          var id = p.pivotID+'_'+d.documentID;
           d.depth = p.depth+1;
-          d.pivotID = p.pivotID+'_'+d.documentID;
+          d.pivotID = id;
           d.sameOrigin = cls.ResourceUtil.sameOrigin(p.url, d.url);
+
+          //  set the default collapsed flag
+          var hash = this. _collapsedHash;
+          if (!hash.hasOwnProperty(id))
+          {
+            hash[id] = d.depth>1;
+            ctx.groupOrder.forEach( function(g){ hash[id+'_'+g] = true; } );
+          }
         }
 
         return inContext;

src/resource-manager/resource_templates.js

@@ -7,16 +7,6 @@ templates.resource_icon = function(resource)
 
 templates.resource_tree =
 {
-	_groupOrder:
-	[
-		ui_strings.S_HTTP_LABEL_FILTER_MARKUP,
-		ui_strings.S_HTTP_LABEL_FILTER_STYLESHEETS,
-		ui_strings.S_HTTP_LABEL_FILTER_SCRIPTS,
-		ui_strings.S_HTTP_LABEL_FILTER_IMAGES,
-		ui_strings.S_HTTP_LABEL_FILTER_FONTS,
-		ui_strings.S_HTTP_LABEL_FILTER_OTHER
-	],
-
 	URL_MATCH_CONTEXT_SIZE: 10,
 	DEPTH_IDENTATION: 18,
 	DISTINGUISHER_MAX_LENGTH: 64,
@@ -33,35 +23,33 @@ templates.resource_tree =
 	_expander_extras:function(context, pivotID, depth)
 	{
 		var hash = context.collapsed;
+
+		//	expand all pivots when searching
 		if (context.searchTerm != '')
 			hash[pivotID] = false;
-		else if (!hash.hasOwnProperty(pivotID))
-			hash[pivotID] = depth>1;
 
 		var collapsed = hash[pivotID];
 
-		return ({
-			collapsed:collapsed,
-			tpl:
-			{
-				li:
-				[
-					'data-expand-collapse-id', pivotID,
-					'class', 'resource-tree-expand-collapse'+(collapsed?' close':'')
-				],
-				h2:
-				[
-					'handler','resources-expand-collapse'
-				],
-				button:
-				[
-					'input',
-					'type','button',
-					'class','button-expand-collapse',
-					'style', 'margin-left:'+ depth*this.DEPTH_IDENTATION +'px;'
-				]
-			}
-		});
+		var tpl = {};
+
+		tpl.h2 = ['handler', 'resources-expand-collapse'];
+		tpl.li =
+		[
+			'data-expand-collapse-id', pivotID,
+			'class', 'resource-tree-expand-collapse'+(collapsed?' close':'')
+		];
+		tpl.button =
+		[
+			'input',
+			'type','button',
+			'class','button-expand-collapse'
+		];
+
+		if(depth)
+			tpl.button.push('style', 'margin-left:'+ depth*this.DEPTH_IDENTATION +'px;');
+
+
+		return { collapsed:collapsed, tpl:tpl };
 	},
 
 	update:function(context)
@@ -169,7 +157,7 @@ templates.resource_tree =
 
 	resource_groups:function(context, resources, d)
 	{
-		var tpl = this._groupOrder
+		var tpl = context.groupOrder
 		.map( this.resource_group.bind(this, context, resources, d) )
 		.filter(function(v){
 			return v!=null;
@@ -195,7 +183,8 @@ templates.resource_tree =
 		if (!resources.length)
 			return [];
 
-		var extras = this._expander_extras( context, d.pivotID+'_'+g, d.depth+1);
+		var depth = d.depth+1;
+		var extras = this._expander_extras( context, d.pivotID+'_'+g, depth);
 
 		var tpl =
 			['li',
@@ -212,7 +201,7 @@ templates.resource_tree =
 					],
 					'class','resource-tree-group resource-tree-group-'+g.toLowerCase()
 				].concat( extras.tpl.h2 ),
-				extras.collapsed?[]:this.resources(context, resources, d.depth+2)
+				extras.collapsed?[]:this.resources(context, resources, depth+1)
 			].concat( extras.tpl.li );
 
 		return tpl;

src/resource-manager/resource_tree_view.js

@@ -13,12 +13,25 @@ cls.ResourceTreeView = function(id, name, container_class, html, default_handler
 
   //	const
   const THROTTLE_DELAY = 250;
+  const GROUP_ORDER =
+  [
+    ui_strings.S_HTTP_LABEL_FILTER_MARKUP,
+    ui_strings.S_HTTP_LABEL_FILTER_STYLESHEETS,
+    ui_strings.S_HTTP_LABEL_FILTER_SCRIPTS,
+    ui_strings.S_HTTP_LABEL_FILTER_IMAGES,
+    ui_strings.S_HTTP_LABEL_FILTER_FONTS,
+    ui_strings.S_HTTP_LABEL_FILTER_OTHER
+  ];
 
     // "private"
   this._service = new cls.ResourceManagerService(this, network_logger);
   this._loading = false;
 
   // public
+  this.get_group_order = function()
+  {
+    return GROUP_ORDER;
+  };
 
   // throttle the update
   this.update = this.update.bind(this).throttle(THROTTLE_DELAY);
@@ -60,7 +73,7 @@ cls.ResourceTreeView = function(id, name, container_class, html, default_handler
       );
     }
 
-    //  only render it if the template has changed ( using its JSON representation as hash )
+    //  only render the template if it has changed ( using its JSON representation as hash )
     var tpl_JSON = JSON.stringify(tpl);
     if( !this.tpl_JSON || tpl_JSON.length != this.tpl_JSON.length || tpl_JSON != this.tpl_JSON)
     {