From c0691534112242ae805d93c9ee07c53fa478b85d Mon Sep 17 00:00:00 2001
From: Ed Sanders <esanders@wikimedia.org>
Date: Fri, 13 Nov 2015 12:35:07 -0800
Subject: [PATCH] Display format icon and message inside parameters table
 caption

Change-Id: Id9d6620ed766645384d31c63aacd7c8167c1ce19
---
 TemplateData.hooks.php                   |  1 +
 TemplateDataBlob.php                     | 25 ++++++++++++++++--------
 modules/ext.templateDataGenerator.ui.css | 10 ----------
 resources/ext.templateData.css           | 19 ++++++++++++++++++
 4 files changed, 37 insertions(+), 18 deletions(-)

diff --git a/TemplateData.hooks.php b/TemplateData.hooks.php
index 813ce50b..3b0cb2dc 100644
--- a/TemplateData.hooks.php
+++ b/TemplateData.hooks.php
@@ -136,6 +136,7 @@ class TemplateDataHooks {
 	 * @return string: HTML to insert in the page.
 	 */
 	public static function render( $input, $args, $parser, $frame ) {
+		$parser->enableOOUI();
 		$ti = TemplateDataBlob::newFromJSON( $input );
 
 		$status = $ti->getStatus();
diff --git a/TemplateDataBlob.php b/TemplateDataBlob.php
index c1d965a0..4f089947 100644
--- a/TemplateDataBlob.php
+++ b/TemplateDataBlob.php
@@ -693,17 +693,26 @@ class TemplateDataBlob {
 					$data->description :
 					wfMessage( 'templatedata-doc-desc-empty' )->inLanguage( $lang )->text()
 			)
-			. Html::element(
-				'p',
-				array(),
-				// Messages: templatedata-modal-format-inline, templatedata-modal-format-block
-				wfMessage( 'templatedata-doc-format-' . $data->format )->inLanguage( $lang )->text()
-			)
 			. '<table class="wikitable mw-templatedata-doc-params sortable">'
-			. Html::element(
+			. Html::rawElement(
 				'caption',
 				array(),
-				wfMessage( 'templatedata-doc-params' )->inLanguage( $lang )->text()
+				Html::element(
+					'p',
+					array(),
+					wfMessage( 'templatedata-doc-params' )->inLanguage( $lang )->text()
+				)
+				. Html::rawElement(
+					'p',
+					array(),
+					new OOUI\IconWidget( array( 'icon' => 'template-format-' . $data->format ) )
+					. Html::element(
+						'span',
+						array( 'class' => 'mw-templatedata-format' ),
+						// Messages: templatedata-modal-format-inline, templatedata-modal-format-block
+						wfMessage( 'templatedata-doc-format-' . $data->format )->inLanguage( $lang )->text()
+					)
+				)
 			)
 			. '<thead><tr>'
 			. Html::element(
diff --git a/modules/ext.templateDataGenerator.ui.css b/modules/ext.templateDataGenerator.ui.css
index e54c8424..32128c55 100644
--- a/modules/ext.templateDataGenerator.ui.css
+++ b/modules/ext.templateDataGenerator.ui.css
@@ -79,13 +79,3 @@
 	/* @embed */
 	background-image: url(images/parameter-set-ltr.svg);
 }
-
-.oo-ui-icon-template-format-block {
-	/* @embed */
-	background-image: url(images/block-ltr.svg);
-}
-
-.oo-ui-icon-template-format-inline {
-	/* @embed */
-	background-image: url(images/inline.svg);
-}
diff --git a/resources/ext.templateData.css b/resources/ext.templateData.css
index b83595ae..fd359b1c 100644
--- a/resources/ext.templateData.css
+++ b/resources/ext.templateData.css
@@ -14,7 +14,26 @@
 	color: #777;
 }
 
+.mw-templatedata-doc-params .oo-ui-widget {
+	font-size: 0.9143em;
+}
+
+.mw-templatedata-format {
+	font-weight: normal;
+	font-size: 0.85em;
+}
+
 .mw-templatedata-doc-param-name,
 .mw-templatedata-doc-param-type {
 	white-space: nowrap;
 }
+
+.oo-ui-icon-template-format-block {
+	/* @embed */
+	background-image: url(../modules/images/block-ltr.svg);
+}
+
+.oo-ui-icon-template-format-inline {
+	/* @embed */
+	background-image: url(../modules/images/inline.svg);
+}