From 8bf5d16792d1668b648d6cbcf9e164309cb9d8f8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bartosz=20Dziewo=C5=84ski?= <matma.rex@gmail.com>
Date: Sat, 29 Apr 2023 15:32:10 +0200
Subject: [PATCH 3/3] Modernize HTML output

* Use CSS instead of HTML presentational attributes
* Use Html::element() etc. instead of hand-written HTML

A few small pieces of output are now escaped that weren't before
(although they were probably safe).

I'm keeping the HTML structure unchanged just in case, to avoid
compatibility issues with on-wiki code.

Change-Id: If0da74b637a662a505dcc3d3cf771b2493080c38
---
 extension.json          |  9 +++++++
 includes/DoubleWiki.php | 54 +++++++++++++++++++++++++----------------
 modules/doubleWiki.css  | 27 +++++++++++++++++++++
 3 files changed, 69 insertions(+), 21 deletions(-)
 create mode 100644 modules/doubleWiki.css

diff --git a/extension.json b/extension.json
index e5bed99..57b53d9 100644
--- a/extension.json
+++ b/extension.json
@@ -35,6 +35,15 @@
 			"i18n"
 		]
 	},
+	"ResourceFileModulePaths": {
+		"localBasePath": "modules",
+		"remoteExtPath": "DoubleWiki/modules"
+	},
+	"ResourceModules": {
+		"ext.doubleWiki": {
+			"styles": "doubleWiki.css"
+		}
+	},
 	"AutoloadNamespaces": {
 		"MediaWiki\\Extension\\DoubleWiki\\": "includes/"
 	},
diff --git a/includes/DoubleWiki.php b/includes/DoubleWiki.php
index 4f33b35..92ccc13 100644
--- a/includes/DoubleWiki.php
+++ b/includes/DoubleWiki.php
@@ -23,6 +23,7 @@ use Config;
 use Language;
 use MediaWiki\Hook\BeforePageDisplayHook;
 use MediaWiki\Hook\OutputPageBeforeHTMLHook;
+use MediaWiki\Html\Html;
 use MediaWiki\Http\HttpRequestFactory;
 use MediaWiki\Languages\LanguageFactory;
 use MediaWiki\Languages\LanguageNameUtils;
@@ -119,6 +120,7 @@ class DoubleWiki implements OutputPageBeforeHTMLHook, BeforePageDisplayHook {
 
 			if ( $newText !== false ) {
 				$text = $newText;
+				$out->addModuleStyles( 'ext.doubleWiki' );
 			}
 
 			break;
@@ -175,29 +177,39 @@ class DoubleWiki implements OutputPageBeforeHTMLHook, BeforePageDisplayHook {
 		$left_langdir = $left_lang->getDir();
 		$right_langcode = htmlspecialchars( $right_lang->getHtmlCode() );
 		$right_langdir = $right_lang->getDir();
-
-		$body =
-			"<tr><td valign=\"top\" style=\"vertical-align:100%;padding-right: 0.5em\" "
-			. "lang=\"{$left_langcode}\" dir=\"{$left_langdir}\" class=\"mw-content-{$left_langdir}\">"
-			. "<div style=\"width:35em; margin:0px auto\">\n" . $left_text . "</div>"
-			. "</td>\n<td valign=\"top\" style=\"padding-left: 0.5em\" "
-			. "lang=\"{$right_langcode}\" dir=\"{$right_langdir}\" "
-			. "class=\"mw-content-{$right_langdir}\">"
-			. "<div style=\"width:35em; margin:0px auto\">\n" . $right_text . "</div>"
-			. "</td></tr>\n";
-
-		// format table head and return results
-		$leftUrlEscaped = htmlspecialchars( $left_url );
-		$rightUrlEscaped = htmlspecialchars( $right_url );
 		$left_title = $this->languageNameUtils->getLanguageName( $left_lang->getCode() );
 		$right_title = $this->languageNameUtils->getLanguageName( $right_lang->getCode() );
-		$head = "<table id=\"doubleWikiTable\" width=\"100%\" border=\"0\" bgcolor=\"white\" "
-			. "rules=\"cols\" cellpadding=\"0\"><colgroup><col width=\"50%\"/><col width=\"50%\"/>"
-			. "</colgroup><thead><tr><td bgcolor=\"#cfcfff\" align=\"center\" "
-			. "lang=\"{$left_langcode}\"><a href=\"{$leftUrlEscaped}\">{$left_title}</a></td>"
-			. "<td bgcolor=\"#cfcfff\" align=\"center\" lang=\"{$right_langcode}\">"
-			. "<a href=\"{$rightUrlEscaped}\" class='extiw'>{$right_title}</a></td></tr></thead>\n";
-		return $head . $body . "</table>";
+
+		return Html::rawElement( 'table', [ 'id' => 'doubleWikiTable' ],
+			Html::rawElement( 'thead', [],
+				Html::rawElement( 'tr', [],
+					Html::rawElement( 'td', [ 'lang' => $left_langcode ],
+						Html::element( 'a', [ 'href' => $left_url ],
+							$left_title
+						)
+					) .
+					Html::rawElement( 'td', [ 'lang' => $right_langcode ],
+						Html::element( 'a', [ 'href' => $right_url, 'class' => 'extiw' ],
+							$right_title
+						)
+					)
+				)
+			) .
+			Html::rawElement( 'tr', [],
+				// phpcs:ignore Generic.Files.LineLength.TooLong
+				Html::rawElement( 'td', [ 'lang' => $left_langcode, 'dir' => $left_langdir, 'class' => "mw-content-$left_langdir" ],
+					Html::rawElement( 'div', [],
+						$left_text
+					)
+				) .
+				// phpcs:ignore Generic.Files.LineLength.TooLong
+				Html::rawElement( 'td', [ 'lang' => $right_langcode, 'dir' => $right_langdir, 'class' => "mw-content-$right_langdir" ],
+					Html::rawElement( 'div', [],
+						$right_text
+					)
+				)
+			)
+		);
 	}
 
 	/**
diff --git a/modules/doubleWiki.css b/modules/doubleWiki.css
new file mode 100644
index 0000000..ea919dc
--- /dev/null
+++ b/modules/doubleWiki.css
@@ -0,0 +1,27 @@
+/* stylelint-disable no-descending-specificity, selector-max-id, color-named */
+
+#doubleWikiTable {
+	width: 100%;
+	background-color: white;
+	table-layout: fixed;
+	border: 0;
+	border-collapse: collapse;
+}
+
+#doubleWikiTable td:first-child {
+	border-right: 1px solid grey;
+}
+
+#doubleWikiTable thead td {
+	background-color: #cfcfff;
+	text-align: center;
+}
+
+#doubleWikiTable tbody td {
+	vertical-align: top;
+}
+
+#doubleWikiTable tbody td > div {
+	width: 35em;
+	margin: 0 auto;
+}
-- 
2.28.0.windows.1