62918b2049c18475349ce07a72d53dcd742b78df
chmalee
  Fri Oct 10 13:00:19 2025 -0700
Instead of creating the gear icon dynamically on mouseover of the track td/tr, stick them in the html by default but with display:hide, because creating them dynamically causes Chrome to misinterpret the mouseover/mouseleave events

diff --git src/hg/js/utils.js src/hg/js/utils.js
index 8ea41015446..580c5d0c564 100644
--- src/hg/js/utils.js
+++ src/hg/js/utils.js
@@ -3838,39 +3838,36 @@
 
     trMouseOver: function (e)
     {   // Trying to make sure there is always a imageV2.lastTrack so that we know where we are
         var id = '';
         var a = /tr_(.*)/.exec($(this).attr('id'));  // voodoo
         if (a && a[1]) {
             id = a[1];
         }
         if (id.length > 0) {
             if ( ! imageV2.lastTrack || imageV2.lastTrack.id !== id) {
                 imageV2.lastTrack = rightClick.makeMapItem(id);
                 // currentMapItem gets set by mapItemMapOver.   This is just backup
             }
 
             if (typeof greyBarIcons !== 'undefined' && greyBarIcons === true) {
-                // add a gear icon over the grey bar to bring up the context menu
+                // show the gear icon over the grey bar to bring up the context menu
                 let tdBtn = document.getElementById("td_btn_" + id);
                 if (tdBtn) {
-                    if (!document.getElementById("gear_btn_" + id)) {
-                        let span = document.createElement("span");
-                        span.id = "gear_btn_" + id;
-                        span.classList.add("hgTracksGearIcon", "ui-icon", "ui-icon-gear");
-                        span.title = "Configure track";
-                        tdBtn.appendChild(span);
+                    let span = document.getElementById("gear_btn_" + id);
+                    if (span) {
+                        $(span).show();
                         tdBtn.style.position = "relative";
                         let tdbKey = tdBtn.id.replace("td_btn_","");
                         let tdb = hgTracks.trackDb[tdbKey];
                         let tooltip = " click or right click to configure... drag to reorder";
                         if (typeof tdb.parentLabel !== 'undefined') {
                             addMouseover(span, tdb.parentLabel + tooltip + " highlighted subtracks");
                         } else {
                             addMouseover(span, tdb.shortLabel + tooltip);
                         }
                         span.addEventListener("click", (e) => {
                             // trigger a click on the <a> of the td
                             e.preventDefault();
                             e.stopPropagation();
                             e.stopImmediatePropagation();
                             const clickEvent = new MouseEvent("click", {
@@ -3931,36 +3928,36 @@
         var id = '';
         var a = /tr_(.*)/.exec($(this).attr('id'));  // voodoo
         if (a && a[1]) {
             id = a[1];
         }
         if (id.length > 0) {
             // remove 'x' icon in the label area to hide the track
             let tdSide = document.getElementById("td_side_" + id);
             if (tdSide) {
                 let btn = document.getElementById("close_btn_" + id);
                 if (btn) {
                     btn.remove();
                 }
             }
 
-            // remove gear icon over the grey bar
+            // hide gear icon over the grey bar
             let tdBtn = document.getElementById("td_btn_" + id);
             if (tdBtn) {
                 let btn = document.getElementById("gear_btn_" + id);
                 if (btn) {
-                    btn.remove();
+                    $(btn).hide();
                 }
             }
         }
     },
 
     mapItemMouseOver: function ()
     {
         // Record data for current map area item
         var id = this.id;
         if (!id || id.length === 0) {
             id = '';
             var tr = $( this ).parents('tr.imgOrd');
             if ( $(tr).length === 1 ) {
                 var a = /tr_(.*)/.exec($(tr).attr('id'));  // voodoo
                 if (a && a[1]) {