cleanup ResourceGroup handling, style tweaks, WIP handler to open individual resources

p01 · p01 · commit e49334eaa84d · 2012-05-07T16:41:00.000+02:00
diff --git a/src/resource-manager/resource_service.js b/src/resource-manager/resource_service.js
@@ -150,7 +150,16 @@ cls.ResourceContext = function(data)
     {
       var frame = event;
       frame.closed = !!event.parentFrameID;
-      frame.groups = { markup: {closed:true,ids:{}}, css: {closed:true,ids:{}}, script: {closed:true,ids:{}}, image: {closed:true,ids:{}}, other: {closed:true,ids:{}} };
+      frame.groups =
+      {
+        markup: new cls.ResourceGroup('markup'),
+        css: new cls.ResourceGroup('stylesheets'),
+        script: new cls.ResourceGroup('scripts'),
+        image: new cls.ResourceGroup('images'),
+        font: new cls.ResourceGroup('fonts'),
+        other: new cls.ResourceGroup('other')
+      }
+
       this.frames[ event.frameID ] = frame;
       return;
     }
@@ -160,7 +169,6 @@ cls.ResourceContext = function(data)
     {
       res = new cls.Resource(event.resourceID);
       res.frameID = event.frameID;
-//      this.resources.push(res);
       this.resourcesDict[ res.id ] = res;
     }
     else if (!res)
@@ -183,8 +191,7 @@ cls.ResourceContext = function(data)
       var type = res.type;
       if (!frame.groups[type]){ type='other'; }
 
-      //if (frame.groups[type].ids.indexOf( res.id )==-1)
-        frame.groups[type].ids[ res.id ]=1;
+      frame.groups[type].push( res.id );
     }
   }
 
@@ -230,6 +237,27 @@ cls.ResourceContext = function(data)
 */
 }
 
+cls.ResourceGroup = function(name)
+{
+  this.ids = [];
+  this.name = null;
+  this.closed = true;
+
+  this._init = function(name)
+  {
+    this.name = name;
+    this.ids.length = 0;
+  }
+  this.push = function( id )
+  {
+    if( this.ids.indexOf(id)===-1 )
+      this.ids.push(id);
+  }
+
+  this._init(name);
+}
+
+
 cls.Resource = function(id)
 {
   this._init(id);
diff --git a/src/resource-manager/resource_style.css b/src/resource-manager/resource_style.css
@@ -173,7 +173,7 @@
 /* WIP style */
 .expand-collapse
 {
-  margin:0 0 0 16px;
+/*  margin:0 0 0 16px;*/
 /*  background:rgba(0,0,0,.1);*/
 }
 .expand-collapse > ul
@@ -184,29 +184,40 @@
 .expand-collapse > ul > li
 {
   white-space:nowrap;
+  padding:0;
+  margin:0 0 0 16px;
+  line-height:17px;
 }
 .expand-collapse.close > ul
 {
   display:none;
 }
 
-.expand-collapse input
+.button-expand-collapse
 {
   background: url("../ui-images/expand-collapse.png") 1px -14px no-repeat transparent;
   border: 0px none currentColor;
   color: #666666;
   height: 13px;
-  margin: 0px 2px 0px -15px;
+/*  margin: 0px 2px 0px -15px;*/
+  margin:0px 2px 0px 0px;
   padding: 0px;
   width: 13px;
 }
-.expand-collapse input:focus
+.button-expand-collapse:focus
 {
   outline: 2px solid #598BEC;
   outline-offset: -2px;
 }
-.expand-collapse.close input
+.button-expand-collapse.close
 {
   background-position:1px 1px;
 }
-.resource-tree li:hover
+.resources li:nth-child(2n)
+{
+  background-color:#f8f8f8;
+}
+.resources li:hover
+{
+  background-color:#D4E3F4;
+}
diff --git a/src/resource-manager/resource_templates.js b/src/resource-manager/resource_templates.js
@@ -11,25 +11,22 @@ templates.resource_tree = function(context)
 	tpl.push
 	(
 		'div',
-			templates.resource_tree_frame( context, null, 1 ),
+			templates.resource_tree_frame( context, null ),
 			'style','background:white;overflow:auto;height:100%;'
 	);
 	return tpl;
 };
 
-templates.resource_tree_frame = function(context, parentFrameID, depth)
+templates.resource_tree_frame = function(context, parentFrameID)
 {
-	var indent = cls.ResourceTestView.instance._getIndentStyle(depth);
-	depth++;
-
 	var tpl = [];
 	for (var frameID in context.frames)
 	{
 		var frame = context.frames[frameID];
 		if( frame.parentFrameID != parentFrameID ){ continue; }
 		
 		var r = context.get_resource( frame.resourceID );
-		var closed = frame.closed;
+		var className = 'expand-collapse'+(frame.closed?' close':'');
 //		console.log( JSON.stringify(frame) );
 		var tmp = 
 		{
@@ -38,23 +35,24 @@ templates.resource_tree_frame = function(context, parentFrameID, depth)
 			[
 				'div',
 				[	// heading expand-collapse
-					['input','type','button','handler','resources-expand-collapse','class',(closed?'close':'')],
-					['span','frameID='+frameID+' -- '+(r?r.id+' ':'')+((r?r.url.filename||r.human_url:'')||'resource information not fully available yet'),[],
-					'data-tooltip',r&&'js-script-select',
-					'data-tooltip-text',r&&'frame: '+r.human_url]
-//					'class','resource-frame'// expand-collapse-open',
+					['input','type','button','handler','resources-expand-collapse','class','button-'+className],
+					['span', 'class', 'resource-icon resource-type-storage'],
+					['span',' '+((r?r.url.filename||r.human_url:'')||'resource information not fully available yet'),[],
+					'data-tooltip',(r&&'js-script-select'),
+					'data-tooltip-text',(r&&'frame: '+r.human_url)
+					]
+//					'class','resource-fraem'// expand-collapse-open',
 				],
 				[	// resources groups & frames
 					'ul',
 					[].concat
 					(
-						templates.resource_groups( context, frameID, depth ),
-						templates.resource_tree_frame( context, frameID, depth )
+						templates.resource_groups( context, frameID ),
+						templates.resource_tree_frame( context, frameID )
 					).map(function(v){ return['li',[v]]; })
 				],
 				'data-frame-id',frameID,
-				'class','expand-collapse'+(closed?' close':'')
-//				'style',indent
+				'class',className
 			]
 		};
 		tpl.push( tmp );
@@ -65,64 +63,65 @@ templates.resource_tree_frame = function(context, parentFrameID, depth)
 templates.resource_groups = function(context, frameID, depth)
 {
 //	return [['div','groups of the frame '+frameID]];
-	var indent = cls.ResourceTestView.instance._getIndentStyle(depth);
-	depth++;
-
 	var tpl = [];
-	var groups = context.frames[frameID].groups;
-	for (var group in groups)
+	var frame = context.frames[frameID];
+	var groups = frame.groups;
+	for (var groupName in groups)
 	{
-		var count = Object.keys(groups[group].ids).length;
+		var group = groups[groupName];
+		var count = group.ids.length;
 		if( !count ){ continue; }
-		var closed = groups[group].closed;
+
+		var className = 'expand-collapse'+(group.closed?' close':'');
 		tpl.push
 		([
 			'div',
 			[
-				['input','type','button','handler','resources-expand-collapse','class',(closed?'close':'')],
-				['span',group +' ('+ count +')',[],
+				['input','type','button','handler','resources-expand-collapse','class','button-'+className],
+				templates.resource_icon({type:groupName}),
+				['span',' '+ group.name +' ('+ count +')',[],
 				//'style',indent+'white-space:nowrap;background:rgba(0,255,0,.1);',
 				'class','resource-group']
 			],
 			[	// resources 
 				'ul',
-				templates.resource_group(context, frameID, group, depth)
+				templates.resource_group(context, frameID, groupName),
+				'class','resources'
 			],
 			'data-frame-id',frameID,
-			'data-resource-group',group,
-			'class','expand-collapse'+(closed?' close':'')
-//			'style',indent
+			'data-resource-group',groupName,
+			'class',className
 		]);
 	}
 	return tpl;
 };
 
-templates.resource_group = function(context, frameID, group, depth)
+templates.resource_group = function(context, frameID, groupName)
 {
 //	return ['div','groups of the frame '+frameID];
-	var indent = cls.ResourceTestView.instance._getIndentStyle(depth);
-	depth++;
 
-	return Object.keys(context.frames[frameID].groups[group].ids).map
+	var frame = context.frames[frameID];
+	var group = frame.groups[groupName];
+
+	
+	return group.ids.map
 	(
-		function(v,i)
+		function(v)
 		{
 			var r=context.get_resource(v);
 			var tmp =
 			[
 				'li',
 				[
-					templates.resource_icon(r),
-					[
-						'span',
-						'resourceID='+r.id+' -- '+(r.url.filename||r.human_url||'resource information not fully available yet'),
-						[],
-						'data-tooltip',r&&'js-script-select',
-						'data-tooltip-text',r&&group+': '+r.human_url
-					]
+					'span',
+					(r.url.filename||r.human_url||'resource information not fully available yet'),
+					[],
+					'handler','resource-detail',
+					'data-tooltip',(r&&'js-script-select'),
+					'data-tooltip-text',(r&&groupName+': '+r.human_url)
 				],
-//				'white-space:nowrap;background-color:rgba(0,0,0,'+(i&1?.1:.2)+');',
-				'data-resource-id',r.id
+					'data-resource-id',(''+r.id)
+				
 			];
 
 			return tmp;
diff --git a/src/resource-manager/resource_util.js b/src/resource-manager/resource_util.js
@@ -104,6 +104,7 @@ cls.ResourceUtil.mime_type_map = {
   "font/opentype": "font",
   "font/ttf": "font",
   "font/otf": "font",
+  "font/truetype": "font",
   "font/woff": "font", // not official, but seems to be common
 
   "audio/mid": "audio",
@@ -186,6 +187,8 @@ cls.ResourceUtil.path_to_type = function(path)
 cls.ResourceUtil.url_path = function(url)
 {
   if (!url) { return null; }
+return url.dir_pathname;
+
   var firstslash = url.replace("://", "xxx").indexOf("/");
   var querystart = url.indexOf("?");
   if (querystart == -1) { querystart = url.length; }
@@ -195,6 +198,7 @@ cls.ResourceUtil.url_path = function(url)
 
 cls.ResourceUtil.url_filename = function(url)
 {
+  return url.filename;
   var path = cls.ResourceUtil.url_path(url);
   var lastslash = path.lastIndexOf("/");
   if (
@@ -211,6 +215,7 @@ cls.ResourceUtil.url_filename = function(url)
 
 cls.ResourceUtil.url_host = function(url)
 {
+  return url.host;
   if (!url) { return null; }
   var host = url.replace(/\w+?:\/\//, "");
   var firstslash = host.indexOf("/");

Original file line number	Diff line number	Diff line change
`@@ -173,7 +173,7 @@`
`173`	`173`	`/* WIP style */`
`174`	`174`	`.expand-collapse`
`175`	`175`	`{`
`176`		`- margin:0 0 0 16px;`
	`176`	`+/* margin:0 0 0 16px;*/`
`177`	`177`	`/* background:rgba(0,0,0,.1);*/`
`178`	`178`	`}`
`179`	`179`	`.expand-collapse > ul`
`@@ -184,29 +184,40 @@`
`184`	`184`	`.expand-collapse > ul > li`
`185`	`185`	`{`
`186`	`186`	`white-space:nowrap;`
	`187`	`+ padding:0;`
	`188`	`+ margin:0 0 0 16px;`
	`189`	`+ line-height:17px;`
`187`	`190`	`}`
`188`	`191`	`.expand-collapse.close > ul`
`189`	`192`	`{`
`190`	`193`	`display:none;`
`191`	`194`	`}`
`192`	`195`
`193`		`-.expand-collapse input`
	`196`	`+.button-expand-collapse`
`194`	`197`	`{`
`195`	`198`	`background: url("../ui-images/expand-collapse.png") 1px -14px no-repeat transparent;`
`196`	`199`	`border: 0px none currentColor;`
`197`	`200`	`color: #666666;`
`198`	`201`	`height: 13px;`
`199`		`- margin: 0px 2px 0px -15px;`
	`202`	`+/* margin: 0px 2px 0px -15px;*/`
	`203`	`+ margin:0px 2px 0px 0px;`
`200`	`204`	`padding: 0px;`
`201`	`205`	`width: 13px;`
`202`	`206`	`}`
`203`		`-.expand-collapse input:focus`
	`207`	`+.button-expand-collapse:focus`
`204`	`208`	`{`
`205`	`209`	`outline: 2px solid #598BEC;`
`206`	`210`	`outline-offset: -2px;`
`207`	`211`	`}`
`208`		`-.expand-collapse.close input`
	`212`	`+.button-expand-collapse.close`
`209`	`213`	`{`
`210`	`214`	`background-position:1px 1px;`
`211`	`215`	`}`
`212`		`-.resource-tree li:hover`
	`216`	`+.resources li:nth-child(2n)`
	`217`	`+{`
	`218`	`+ background-color:#f8f8f8;`
	`219`	`+}`
	`220`	`+.resources li:hover`
	`221`	`+{`
	`222`	`+ background-color:#D4E3F4;`
	`223`	`+}`