build up the details tab html within the javascript as well as making it easy for plugins to add extra items

deluge/ui/web/js/deluge-all/Deluge.Details.Details.js

@@ -34,23 +34,53 @@ Copyright:
 
 Ext.deluge.details.DetailsTab = Ext.extend(Ext.Panel, {
 	title: _('Details'),
-    bodyStyle: 'padding 5px',
+
+	fields: {},
+
+	queuedItems: {},
+
+	oldData: {},
+
+	initComponent: function() {
+		Ext.deluge.details.DetailsTab.superclass.initComponent.call(this);
+		this.addItem('torrent_name', _('Name'));
+		this.addItem('hash', _('Hash'));
+		this.addItem('path', _('Path'));
+		this.addItem('size', _('Total Size'));
+		this.addItem('files', _('# of files'));
+		this.addItem('comment', _('Comment'));
+		this.addItem('status', _('Status'));
+		this.addItem('tracker', _('Tracker'));
+	},
 	
 	onRender: function(ct, position) {
 		Ext.deluge.details.DetailsTab.superclass.onRender.call(this, ct, position);
-	this.load({
+		this.body.setStyle('padding', '10px');
-	    url: '/render/tab_details.html',
+		this.dl = Ext.DomHelper.append(this.body, {tag: 'dl'}, true);
-	    text: _('Loading') + '...'
+
-	});
+		for (var id in this.queuedItems) {
-	this.oldData = {};
+			this.doAddItem(id, this.queuedItems[id]);
-	this.body.setStyle('padding', '5px');
+		}
-	this.getUpdater().on('update', this.onPanelUpdate, this);
+	},
+
+	addItem: function(id, label) {
+		if (!this.rendered) {
+			this.queuedItems[id] = label;
+		} else {
+			this.doAddItem(id, label);
+		}
+	},
+
+	// private
+	doAddItem: function(id, label) {
+		Ext.DomHelper.append(this.dl, {tag: 'dt', cls: id, html: label + ':'});
+		this.fields[id] = Ext.DomHelper.append(this.dl, {tag: 'dd', cls: id, html: ''}, true);
 	},
 	
 	clear: function() {
 		if (!this.fields) return;
 		for (var k in this.fields) {
-	    this.fields[k].innerHTML = '';
+			this.fields[k].dom.innerHTML = '';
 		}
 	},
 	
@@ -62,13 +92,6 @@ Ext.deluge.details.DetailsTab = Ext.extend(Ext.Panel, {
 		});
 	},
 	
-    onPanelUpdate: function(el, response) {
-	this.fields = {};
-	Ext.each(Ext.query('dd', this.body.dom), function(field) {
-	    this.fields[field.className] = field;
-	}, this);
-    },
-    
 	onRequestComplete: function(torrent, request, response, options) {
 		var data = {
 			torrent_name: torrent.name,
@@ -82,8 +105,9 @@ Ext.deluge.details.DetailsTab = Ext.extend(Ext.Panel, {
 		};
 		
 		for (var field in this.fields) {
+			if (!data[field]) continue; // this is a field we aren't responsible for.
 			if (data[field] == this.oldData[field]) continue;
-	    this.fields[field].innerHTML = Ext.escapeHTML(data[field]);
+			this.fields[field].dom.innerHTML = Ext.escapeHTML(data[field]);
 		}
 		this.oldData = data;
 	}

deluge/ui/web/render/tab_details.html

@@ -1,11 +0,0 @@
-<dl>
-	<dt class="torrent_name">${_("Name")}:</dt><dd class="torrent_name"/>
-	<dt class="hash">${_("Hash")}:</dt><dd class="hash"/>
-	<dt class="path">${_("Path")}:</dt><dd class="path"/>
-	<dt class="size">${_("Total Size")}:</dt><dd class="size"/>
-	<dt class="files">${_("# of files")}:</dt><dd class="files"/>
-	<dt class="comment">${_("Comment")}:</dt><dd class="comment" />
-	<dt class="status">${_("Status")}:</dt><dd class="status"/>
-	<dt class="tracker">${_("Tracker")}:</dt><dd class="tracker"/>
-</dl>
-<br style="clear: both;" />