Improve error details readability

mybb · Apr 27, 2024 · 02ea378 · 02ea378
1 parent 15eaf3a
commit 02ea378
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 15 deletions.
diff --git a/inc/class_error.php b/inc/class_error.php
@@ -588,7 +588,7 @@ function output_error($type, $message, $file, $line, $trace=null)
 
 					if($parser_exists)
 					{
-						$data['Code'] = $parser->mycode_parse_php($data['Code'], true);
+						$data['Code'] = '<pre><code>' . htmlspecialchars_uni($data['Code']) . '</code></pre>';
 					}
 					else
 					{
@@ -775,12 +775,7 @@ function generate_backtrace($html=true, $strip=1, $trace=null)
 		{
 			if($html)
 			{
-				$backtrace = "<table style=\"width: 100%; margin: 10px 0; border: 1px solid #aaa; border-collapse: collapse; border-bottom: 0;\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\">\n";
-				$backtrace .= "<thead><tr>\n";
-				$backtrace .= "<th style=\"border-bottom: 1px solid #aaa; background: #ccc; padding: 4px; text-align: left; font-size: 11px;\">File</th>\n";
-				$backtrace .= "<th style=\"border-bottom: 1px solid #aaa; background: #ccc; padding: 4px; text-align: left; font-size: 11px;\">Line</th>\n";
-				$backtrace .= "<th style=\"border-bottom: 1px solid #aaa; background: #ccc; padding: 4px; text-align: left; font-size: 11px;\">Function</th>\n";
-				$backtrace .= "</tr></thead>\n<tbody>\n";
+				$backtrace = '<ol reversed class="backtrace">';
 			}
 
 			$i = 0;
@@ -794,23 +789,32 @@ function generate_backtrace($html=true, $strip=1, $trace=null)
 
 				if($html)
 				{
-					$backtrace .= "<tr>\n";
-					$backtrace .= "<td style=\"font-size: 11px; padding: 4px; border-bottom: 1px solid #ccc;\">{$call['file']}</td>\n";
-					$backtrace .= "<td style=\"font-size: 11px; padding: 4px; border-bottom: 1px solid #ccc;\">{$call['line']}</td>\n";
-					$backtrace .= "<td style=\"font-size: 11px; padding: 4px; border-bottom: 1px solid #ccc;\">{$call['function']}</td>\n";
-					$backtrace .= "</tr>\n";
+					$function = htmlspecialchars_uni($call['function']);
+					$file = htmlspecialchars_uni($call['file']);
+
+					$backtrace .= <<<HTML
+						<li>
+							<p class="function">{$function}</p>
+							<p class="location">
+								<span class="file">{$file}</span><span class="file">:{$call['line']}</span>
+							</p>
+						</li>
+						HTML;
 				}
 				else
 				{
-					$backtrace .= "#{$i}  {$call['function']}() called at [{$call['file']}:{$call['line']}]\n";
+					$backtrace .= <<<TEXT
+						#{$i}  {$call['function']}
+						{$call['file']}:{$call['line']}]\n\n
+						TEXT;
 				}
 
 				$i++;
 			}
 
 			if($html)
 			{
-				$backtrace .= "</tbody></table>\n";
+				$backtrace .= '</ol>';
 			}
 		}
 		return $backtrace;

diff --git a/jscripts/maintenance/error.css b/jscripts/maintenance/error.css
@@ -40,3 +40,6 @@
 .mybb_error dd { width: 70%; }
 .mybb_error dt, .mybb_error dd { box-sizing: border-box; padding: 8px 12px; }
 .mybb_error dt:not(:last-of-type), .mybb_error dd:not(:last-of-type) { border-bottom: solid 1px var(--page-element-border-color); }
+
+.mybb_error .backtrace li::marker { color: var(--page-minor-fg-color); }
+.mybb_error .backtrace .location { font-size: 0.8em; color: var(--page-minor-fg-color); }
diff --git a/jscripts/maintenance/main.css b/jscripts/maintenance/main.css
@@ -90,10 +90,13 @@ ul, ol { margin-left: 25px; }
 
 dl { margin-top: 30px; margin-bottom: 20px; display: flex; flex-wrap: wrap; align-items: stretch; border: solid 1px var(--page-element-border-color); border-radius: 4px; font-size: 0.9em; }
 dt { width: 30%; background: var(--page-element-bg-color); text-align: right; }
-dd { width: 70%; }
+dd { width: 70%; word-wrap: break-word; }
 dt, dd { box-sizing: border-box; padding: 8px 12px; }
 dt:not(:last-of-type), dd:not(:last-of-type) { border-bottom: solid 1px var(--page-element-border-color); }
 
+.backtrace li::marker { color: var(--page-minor-fg-color); }
+.backtrace .location { font-size: 0.8em; color: var(--page-minor-fg-color); }
+
 footer { padding: 20px; font-size: 0.8em; text-align: right; color: var(--footer-fg-color); }
 footer .powered-by-phrase { transition: opacity 1s; }
 footer .powered-by-phrase.hidden { opacity: 0; }