Place version and error output in separate area (always enabled)

Also added line numbers to the user input

Author: doxygen

addon/doxycommentview/doxycommentview.py

@@ -21,26 +21,20 @@
 import argparse
 import signal
 import threading
+import html
 
 def main():
     # Set up argument parser
     parser = argparse.ArgumentParser(description="Runs the doxygen comment viewer HTTP server.")
     parser.add_argument('--port', type=int, default=8000, help='Port number to run the server on')
     parser.add_argument('--doxygen', type=str, default='doxygen', help='Path to doxygen executable')
     parser.add_argument('--doxyfile', type=str, default='Doxyfile', help='Path to Doxyfile to use')
-    parser.add_argument('--debug', action="store_true", help='Display warnings')
-    parser.add_argument('--version', action="store_true", help='Display doxygen version used')
     args = parser.parse_args()
 
     PORT = args.port
     DOXYGEN = args.doxygen
     DOXYFILE = args.doxyfile
-    DEBUG = args.debug
-    VERSION = args.version
-
-    if VERSION:
-        VERSION_STR = subprocess.run([DOXYGEN, '-v'], \
-                                     capture_output=True, text=True, encoding="utf-8")
+    VERSION_STR = subprocess.run([DOXYGEN, '-v'], capture_output=True, text=True, encoding="utf-8").stdout
 
     class RequestHandler(http.server.SimpleHTTPRequestHandler):
         def do_POST(self):
@@ -50,22 +44,21 @@ def do_POST(self):
                 data = json.loads(post_data)
                 input_text = data['input']
 
-                # Run doxygen in single comment mode, reading from stdin and writing to stdout
+                # Run doxygen in single comment mode, reading from stdin and writing to stdout and stderr
                 result = subprocess.run([DOXYGEN, '-c', '-', DOXYFILE], \
                                         input=input_text, capture_output=True, text=True, encoding="utf-8")
 
-                # Insert CSS link tag into the HTML output
+                # Prepare the response
+                response = json.dumps({
+                  'html_output': result.stdout,
+                  'error_output': "<b>Doxygen version "+html.escape(VERSION_STR)+"</b><pre>"+html.escape(result.stderr)+"</pre>"
+                })
+
+                # Send the result to the requesting HTML page
                 self.send_response(200)
                 self.send_header('Content-type', 'text/html')
                 self.end_headers()
-                if VERSION:
-                    self.wfile.write(VERSION_STR.stdout.encode())
-                    self.wfile.write("<hr>".encode())
-                self.wfile.write(result.stdout.encode())
-                if DEBUG:
-                    self.wfile.write("<hr>\n<pre>".encode())
-                    self.wfile.write(result.stderr.replace('&','&amp;').replace("'","&apos;").replace('<','&lt;').replace('>','&gt;').encode())
-                    self.wfile.write("</pre>".encode())
+                self.wfile.write(response.encode())
 
     httpd = socketserver.TCPServer(("", PORT), RequestHandler)
 

addon/doxycommentview/index.html

@@ -12,30 +12,90 @@
             height: 100vh;
         }
         .panel {
+            display: flex;
             width: 50%;
             padding: 20px;
             box-sizing: border-box;
         }
+        .line-numbers {
+            background: #f0f0f0;
+            padding: 10px;
+            margin: 0px;
+            margin-top: 2px;
+            text-align: right;
+            user-select: none;
+            white-space: pre;
+            border-right: 1px solid #ccc;
+            font-family: monospace;
+            font-size: 14px;
+            line-height: 1.5;
+            overflow: hidden;
+        }
         #input {
             width: 100%;
             height: 100%;
+            padding: 10px;
+            margin: 0px;
             box-sizing: border-box;
-            resize: none; /* Prevent resizing */
+            resize: none;
+            font-family: monospace;
+            font-size: 14px;
+            line-height: 1.5;
         }
         #output {
             border-left: 1px solid #ccc;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+        }
+        #output-area {
+            flex: 1;
             overflow: auto;
         }
+        #console-area {
+            height: 150px; /* Fixed height for the console area */
+            border-top: 1px solid #ccc;
+            overflow: auto;
+            background-color: #f9f9f9; /* Light grey background for console area */
+            padding: 10px;
+            box-sizing: border-box;
+        }
     </style>
 </head>
 <body>
     <div class="panel">
-        <textarea id="input"></textarea>
+        <div class="line-numbers" id="line-numbers">1</div>
+        <textarea id="input" oninput="updateLineNumbers()" onscroll="syncScroll()" onkeydown="updateLineNumbers()" onkeyup="updateLineNumbers()"></textarea>
     </div>
     <div class="panel" id="output">
         <!-- Processed output will appear here -->
+      <div id="output-area">
+            <!-- Processed output will appear here -->
+        </div>
+        <div id="console-area">
+            <!-- Error messages will appear here -->
+        </div>
     </div>
     <script>
+        function updateLineNumbers() {
+            const textarea = document.getElementById('input');
+            const lineNumbers = document.getElementById('line-numbers');
+
+            const lines = textarea.value.split('\n').length;
+            let lineNumberString = '';
+            for (let i = 1; i <= lines; i++) {
+                lineNumberString += i + '\n';
+            }
+
+            lineNumbers.textContent = lineNumberString;
+        }
+
+        function syncScroll() {
+            const textarea = document.getElementById('input');
+            const lineNumbers = document.getElementById('line-numbers');
+            lineNumbers.scrollTop = textarea.scrollTop;
+        }
+
         function processInput() {
             const input = document.getElementById('input').value;
             sessionStorage.setItem('userInput', input);
@@ -46,9 +106,10 @@
                 },
                 body: JSON.stringify({ input: input }),
             })
-            .then(response => response.text())
+            .then(response => response.json())
             .then(result => {
-                document.getElementById('output').innerHTML = result;
+                document.getElementById('output-area').innerHTML = result.html_output;
+                document.getElementById('console-area').innerHTML = result.error_output;
             });
         }
 
@@ -63,6 +124,8 @@
                 document.getElementById('input').value = savedInput;
                 processInput();
             }
+            // Initial line numbers update
+            updateLineNumbers();
         };
     </script>
 </body>