wrap the Resource tree in a DIV, fix the width issue with the full width zebra, tweak the color of the number of resources

Author: p01

src/build-application/build_resource_manager_1_0.js

@@ -5,14 +5,13 @@ window.app.builders.ResourceManager["1.0"] = function(service)
   var network_logger = new cls.NetworkLogger();
   new cls.ResourceTreeView("resource_tree_view",
                            "Tree View",
-                           "resource-tree",
+                           "",
                            "",
                            "",
                            network_logger);
   new cls.ResourceDetailView("resource_detail_view",
                              "Detail",
                              "",
-//                             "",
                              "",
                              network_logger);
   cls.ResourceDetailView.create_ui_widgets();

src/resource-manager/resource_style.css

@@ -273,37 +273,12 @@ a.external:hover
 {/* note: same color as the .string class */
   color:#a54;
 }
-/*
-.children-expand-collapse
-{
-  display:block;
-  margin-left:16px;
-}
-.collapsed .children-expand-collapse
-{
-  display:none;
-}
-.item-expand-collapse
-{
-  line-height:17px;
-}
-.header-expand-collapse:hover
-{
-  background-color:#D4E3F4;
-}
-.children-expand-collapse, .header-expand-collapse
-{
-  white-space:nowrap;
-}
-*/
 
 /* ------------------ */
 .resource-tree
 {
- padding:8px;
- height:100%;
- box-sizing:border-box;
- overflow:auto;
+  height:100%;
+  overflow:auto;
 }
 .resource-tree li > h2
 {
@@ -328,9 +303,11 @@ a.external:hover
 /* zebra resources */
 .resource-tree-windows
 {
+  width:100%;
   background-image: linear-gradient(0deg, rgba(0,0,0,.031) 50%, transparent 0%);
   background-size: 100% 36px;
   background-repeat:repeat;
+  display:table;
 }
 
 .resource-tree li > h2:hover
@@ -346,7 +323,7 @@ a.external:hover
 
 span.resource-tree-count
 {
-  color:#666;
+  color:#999;
 }
 span.resource-tree-window-label,
 span.resource-tree-document-label,
@@ -361,7 +338,7 @@ span.resource-tree-group-label
   background-size:16px 16px;
   background-image:url(../ui-images/type_storage.png);
 }
-h2.resource-tree-group/* > span*/
+h2.resource-tree-group
 {
   text-transform:capitalize;
 }

src/resource-manager/resource_templates.js

@@ -23,8 +23,8 @@ templates.resource_tree =
 				this._depth++;
 
 				var tpl = original.apply(this, arguments);
-				if(tpl && tpl[1] && tpl[1][0] == 'h2')
-					tpl[1].push( 'style', 'padding-left:'+ this._depth*18 +'px;' );
+				if (tpl && tpl[1] && tpl[1][0] == 'h2')
+					tpl[1][1].push( 'style', 'margin-left:'+ this._depth*18 +'px;' );
 
 				this._depth--;
 
@@ -72,9 +72,12 @@ templates.resource_tree =
 	{
 		//if (context.windowList.length)
 			return (
-			['ul',
-				context.windowList.map(this.window.bind(this, context)),
-				'class','resource-tree-windows'
+				['div','',
+					['ul',
+						context.windowList.map(this.window.bind(this, context)),
+						'class','resource-tree-windows'
+					],
+					'class','resource-tree'
 			]);
 	},
 
@@ -217,7 +220,7 @@ templates.resource_tree =
 					'class','resource-tree-resource-label'
 				],
 				'handler','resource-detail',
-				'data-resource-id',''+r.id,
+				'data-resource-id',String(r.id),
 				'class','resource-tree-resource'
 					+(r.sameOrigin?'':' resource-different-origin')
 					+(context.selectedResourceID==r.id?' resource-highlight':'')