fixes to js

lib/js/htmlrw_js_ui.ml

···
 open Brr
 open Htmlrw_js_types
 
+let console_log msg =
+  ignore (Jv.call (Jv.get Jv.global "console") "log" [| Jv.of_string ("[html5rw-ui] " ^ msg) |])
+
 module Css_class = struct
   let panel = Jstr.v "html5rw-panel"
   let panel_header = Jstr.v "html5rw-panel-header"
···
 let highlighted_element t = t.highlighted
 
 let clear_highlight t =
+  console_log (Printf.sprintf "clear_highlight: highlighted is %s"
+    (if t.highlighted = None then "None" else "Some"));
   match t.highlighted with
   | Some el ->
+      console_log "clear_highlight: unhighlighting element";
       Htmlrw_js_annotate.unhighlight_element el;
-      t.highlighted <- None
-  | None -> ()
+      t.highlighted <- None;
+      console_log "clear_highlight: done"
+  | None ->
+      console_log "clear_highlight: nothing to clear"
 
 let navigate_to_element t bm =
   clear_highlight t;
···
   El.set_inline_style (Jstr.v "display") (Jstr.v "none") t.root
 
 let destroy t =
+  console_log "destroy: starting";
+  clear_highlight t;
+  console_log "destroy: cleared highlight";
+  (* Clear _current_panel before removing element to avoid comparison issues *)
+  (match !_current_panel with
+   | Some p when p.root == t.root -> _current_panel := None
+   | _ -> ());
+  console_log "destroy: cleared current_panel ref";
   El.remove t.root;
-  if !_current_panel = Some t then _current_panel := None
+  console_log "destroy: removed root element, done"
 
 let hide_current () =
-  match !_current_panel with Some t -> destroy t | None -> ()
+  console_log (Printf.sprintf "hide_current: current_panel is %s"
+    (if !_current_panel = None then "None" else "Some"));
+  match !_current_panel with
+  | Some t ->
+      console_log "hide_current: destroying existing panel";
+      destroy t
+  | None ->
+      console_log "hide_current: no panel to destroy"
 
 let create ~config result =
+  console_log (Printf.sprintf "create: starting with %d messages" (List.length result.messages));
   hide_current ();
+  console_log "create: hide_current done";
 
   let _doc = G.document in
 
   let title = El.v (Jstr.v "span") [El.txt' "HTML5 Validation"] in
 
-  let collapse_btn = El.v (Jstr.v "button") ~at:[At.class' Css_class.collapse_btn] [
-    El.txt' "_"
-  ] in
-
   let close_btn = El.v (Jstr.v "button") ~at:[At.class' Css_class.close_btn] [
     El.txt' "x"
   ] in
 
   let header = El.v (Jstr.v "div") ~at:[At.class' Css_class.panel_header] [
-    title; collapse_btn; close_btn
+    title; close_btn
   ] in
 
   let error_count = List.length (List.filter (fun bm ->
···
 
   update t result;
 
-  ignore (Ev.listen Ev.click (fun _ -> toggle_collapsed t) (El.as_target collapse_btn));
+  (* Stop mousedown from bubbling to header (prevents drag interference) *)
+  ignore (Ev.listen Ev.mousedown (fun ev ->
+    console_log "close_btn: mousedown, stopping propagation";
+    Ev.stop_propagation ev
+  ) (El.as_target close_btn));
 
-  ignore (Ev.listen Ev.click (fun _ ->
+  ignore (Ev.listen Ev.click (fun ev ->
+    console_log "close_btn: click handler starting";
+    Ev.stop_propagation ev;
+    console_log "close_btn: stopped propagation, calling destroy";
     destroy t;
-    match t.on_close with Some f -> f () | None -> ()
+    console_log "close_btn: destroy done, checking on_close callback";
+    (match t.on_close with Some f -> f () | None -> ());
+    console_log "close_btn: click handler done"
   ) (El.as_target close_btn));
 
   if config.draggable then begin
···
   if config.start_collapsed then
     El.set_class Css_class.panel_collapsed true root;
 
+  console_log "create: appending panel to document body";
   El.append_children (Document.body G.document) [root];
 
   _current_panel := Some t;
+  console_log "create: panel creation complete";
   t
 
 let on_warning_click t f = t.on_warning_click <- Some f
···
       width: 24px; height: 24px; margin-left: 8px;
       border: none; border-radius: 4px;
       background: transparent; color: var(--html5rw-panel-text);
-      cursor: pointer; font-size: 14px; line-height: 1;
+      cursor: pointer; font-size: 14px;
+      display: flex; align-items: center; justify-content: center;
     }
 
     .html5rw-panel-header button:hover { background: rgba(0, 0, 0, 0.1); }