From 579e58e966a2842eb8909cbeac674f0d657aa973 Mon Sep 17 00:00:00 2001
From: Steven Hugg <hugg@fasterlight.com>
Date: Mon, 1 Jan 2024 15:27:42 -0500
Subject: [PATCH] close button for debug info

---
 css/ui.css    | 11 ++++++++---
 index.html    |  2 ++
 src/ide/ui.ts |  8 +++++---
 3 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/css/ui.css b/css/ui.css
index 3bf92020..bcefb407 100644
--- a/css/ui.css
+++ b/css/ui.css
@@ -127,13 +127,15 @@ div.mem_info {
   bottom: 10px;
   background-color: #333;
   color: #66ff66;
-  white-space: pre;
-  padding: 20px;
   z-index: 12;
   font-family: "Andale Mono", "Menlo", "Lucida Console", monospace;
   font-size: 12pt;
   box-shadow: 0px 0px 8px rgba(0,0,0,.5);
-  max-height: 90vh;
+}
+div.mem_info_msg {
+  white-space: pre;
+  padding: 20px;
+  max-height: 80vh;
   overflow-y: auto;
 }
 div.mem_info a {
@@ -148,6 +150,9 @@ div.mem_info a:hover {
 div.mem_info a.selected {
  color: #ffffff;
 }
+div.mem_info button {
+  color: #fff;
+}
 .mem_info_links {
  text-align:right;
 }
diff --git a/index.html b/index.html
index 9be4b488..0e2970c2 100644
--- a/index.html
+++ b/index.html
@@ -378,6 +378,8 @@ body {
     </div>
   </div>
   <div id="mem_info" class="mem_info" style="display:none">
+    <div><button type="button" class="close" onclick="$('.mem_info').hide()" aria-hidden="true">&times;</button></div>
+    <div id="mem_info_msg" class="mem_info_msg"></div>
   </div>
   <div id="error_alert" class="alert alert-danger alert-dismissable" style="position:absolute;right:0;top:0;display:none">
     <button type="button" class="close" onclick="$('.alert').hide()" aria-hidden="true">&times;</button>
diff --git a/src/ide/ui.ts b/src/ide/ui.ts
index cc943fa4..beaef5e5 100644
--- a/src/ide/ui.ts
+++ b/src/ide/ui.ts
@@ -909,13 +909,15 @@ function hideDebugInfo() {
 function showDebugInfo(state?) {
   if (!isDebuggable(platform)) return;
   var meminfo = $("#mem_info");
+  var meminfomsg = $("#mem_info_msg");
   var allcats = platform.getDebugCategories();
   if (allcats && !debugCategory)
     debugCategory = allcats[0];
   var s = state && platform.getDebugInfo(debugCategory, state);
   if (s) {
     var hs = lastDebugInfo ? highlightDifferences(lastDebugInfo, s) : s;
-    meminfo.show().html(hs);
+    meminfo.show();
+    meminfomsg.html(hs);
     var catspan = $('<div class="mem_info_links">');
     var addCategoryLink = (cat:string) => {
       var catlink = $('<a>'+cat+'</a>');
@@ -932,8 +934,8 @@ function showDebugInfo(state?) {
     for (var cat of allcats) {
       addCategoryLink(cat);
     }
-    meminfo.append('<br>');
-    meminfo.append(catspan);
+    meminfomsg.append('<br>');
+    meminfomsg.append(catspan);
     lastDebugInfo = s;
   } else {
     hideDebugInfo();