Add fieldgrid in tiddler info dropdown

core/modules/widgets/fieldgrid.js

@@ -0,0 +1,85 @@
+/*\
+title: $:/core/modules/widget/fieldgrid.js
+type: application/javascript
+module-type: widget
+
+Implements the fieldgrid widget.
+
+\*/
+(function(){
+
+/*jslint node: true, browser: true */
+/*global $tw: false */
+"use strict";
+
+var FieldGridWidget = function(renderer) {
+	// Save state
+	this.renderer = renderer;
+	// Generate child nodes
+	this.generate();
+};
+
+FieldGridWidget.prototype.generate = function() {
+	// Get attributes
+	this.tiddlerTitle = this.renderer.getAttribute("tiddler",this.renderer.getContextTiddlerTitle());
+	this.exclude = this.renderer.getAttribute("exclude");
+	this["class"] = this.renderer.getAttribute("class");
+	// Set up the exclusion array
+	var exclude = [];
+	if(this.exclude) {
+		exclude = this.exclude.split(" ");
+	}
+	// Get the tiddler
+	var tiddler = this.renderer.renderTree.wiki.getTiddler(this.tiddlerTitle);
+	// Set up the classes
+	var classes = ["tw-fieldgrid-table"];
+	if(this["class"]) {
+		$tw.utils.pushTop(classes,this["class"]);
+	}
+	// Set up the header row
+	var rows = [
+		{type: "element", tag: "tr", children: [
+			{type: "element", tag: "th", children: [
+				{type: "text", text: "Field"}]},
+			{type: "element", tag: "th", children: [
+				{type: "text", text: "Value"}]}]}
+	];
+	// Add the rows for each field
+	if(tiddler) {
+		var fields = [];
+		for(var f in tiddler.fields) {
+			if(exclude.indexOf(f) === -1) {
+				fields.push(f);
+			}
+		}
+		fields.sort();
+		for(f=0; f<fields.length; f++) {
+			var value;
+			if(fields[f] === "text") {
+				value = {type: "element", tag: "em", children: [
+					{type: "text", text: "(length: " + tiddler.fields.text.length + ")"}
+				]};
+			} else {
+				value = {type: "text", text: tiddler.getFieldString(fields[f])};
+			}
+			rows.push({type: "element", tag: "tr", children: [
+				{type: "element", tag: "td", children: [
+					{type: "text", text: fields[f]}
+				]},
+				{type: "element", tag: "td", children: [value]}
+			]});
+		}
+	}
+	// Return the table element
+	this.tag = "table";
+	this.attributes ={"class": classes.join(" ")};
+	this.children = this.renderer.renderTree.createRenderers(this.renderer.renderContext,[{
+		type: "element",
+		tag: "tbody",
+		children: rows
+	}]);
+};
+
+exports.fieldgrid = FieldGridWidget;
+
+})();

core/styles/base.tid

@@ -53,6 +53,18 @@ pre {
 	border: 1px solid #ccc;
 }
 
+table {
+	border: 1px solid #ddd;
+	width: 100%;
+}
+
+table th, table td {
+	text-align: left;
+	padding: 0 0.5em 0 0.5em;
+	border-top: 1px solid #ddd;
+	border-left: 1px solid #ddd;
+}
+
 a.tw-tiddlylink {
 	text-decoration: none;
 	font-style: normal;
@@ -275,6 +287,10 @@ a.tw-tiddlylink-missing {
 	border-bottom: 1px solid #fff;
 }
 
+.tw-drop-down .tw-tab-contents a {
+	padding: 0 0.5em 0 0.5em;
+}
+
 .tw-edit-texteditor input, .tw-edit-texteditor textarea {
 	width: 100%;
 	padding: 0.2em 0.2em 0.2em 0.2em;

core/templates/TiddlerDropdown.tid

@@ -10,7 +10,7 @@ title: $:/templates/TiddlerDropdown
 <$list filter="[is[current]tagging[]sort[title]]" itemClass="tw-menu-list-item" emptyMessage="No tiddlers are tagged with this one"/>
 </$reveal>
 <$reveal type="match" state="$:/state/moreSideBarTabSet" text="fieldsTab" qualifyTiddlerTitles="yes">
-Fields...
+<$fieldgrid />
 </$reveal>
 </div>
 </div>