From 87c783e351a3ecfd3acb1cb6e3c8ce6e615ee812 Mon Sep 17 00:00:00 2001
From: WrinklyNinja <wrinklyninja1@gmail.com>
Date: Sat, 19 Jul 2014 23:16:29 +0100
Subject: [PATCH] Improved hover text handling slightly more.

Event listeners now get removed on custom element destruction.

I built LOOT again using a new build of CEF, and the mouseover bug has
been fixed.
---
 resources/report/js/custom.js | 24 ++++++++++++++++++++----
 resources/report/js/script.js | 29 ++++++++++++++++-------------
 2 files changed, 36 insertions(+), 17 deletions(-)

diff --git a/resources/report/js/custom.js b/resources/report/js/custom.js
index f325b89b..1b12718e 100644
--- a/resources/report/js/custom.js
+++ b/resources/report/js/custom.js
@@ -284,8 +284,8 @@ var pluginCardProto = Object.create(HTMLElement.prototype, {
 
             var hoverTargets = this.shadowRoot.querySelectorAll('[title]');
             for (var i = 0; i < hoverTargets.length; ++i) {
-                hoverTargets[i].addEventListener('mouseenter', toggleHoverText, false);
-                hoverTargets[i].addEventListener('mouseleave', toggleHoverText, false);
+                hoverTargets[i].addEventListener('mouseenter', showHoverText, false);
+                hoverTargets[i].addEventListener('mouseleave', hideHoverText, false);
             }
 
         }
@@ -295,6 +295,12 @@ var pluginCardProto = Object.create(HTMLElement.prototype, {
     detachedCallback: {
         value: function() {
             this.shadowRoot.querySelector('#menuButton').removeEventListener('click', this.onMenuButtonClick, false);
+
+            var hoverTargets = this.shadowRoot.querySelectorAll('[title]');
+            for (var i = 0; i < hoverTargets.length; ++i) {
+                hoverTargets[i].removeEventListener('mouseenter', showHoverText, false);
+                hoverTargets[i].removeEventListener('mouseleave', hideHoverText, false);
+            }
         }
     }
 
@@ -322,12 +328,22 @@ var pluginLIProto = Object.create(HTMLLIElement.prototype, {
 
             var hoverTargets = this.shadowRoot.querySelectorAll('[title]');
             for (var i = 0; i < hoverTargets.length; ++i) {
-                hoverTargets[i].addEventListener('mouseenter', toggleHoverText, false);
-                hoverTargets[i].addEventListener('mouseleave', toggleHoverText, false);
+                hoverTargets[i].addEventListener('mouseenter', showHoverText, false);
+                hoverTargets[i].addEventListener('mouseleave', hideHoverText, false);
             }
 
         }
 
+    },
+
+    detachedCallback: {
+        value: function() {
+            var hoverTargets = this.shadowRoot.querySelectorAll('[title]');
+            for (var i = 0; i < hoverTargets.length; ++i) {
+                hoverTargets[i].removeEventListener('mouseenter', showHoverText, false);
+                hoverTargets[i].removeEventListener('mouseleave', hideHoverText, false);
+            }
+        }
     }
 
 });
diff --git a/resources/report/js/script.js b/resources/report/js/script.js
index a6ea831f..8979bf0e 100644
--- a/resources/report/js/script.js
+++ b/resources/report/js/script.js
@@ -387,18 +387,10 @@ function getDialogParent(element) {
     }
     return null;
 }
-function toggleHoverText(evt) {
-    var hoverText = document.getElementById('hoverText');
+function showHoverText(evt) {
+    hideHoverText(evt);
 
-    if (hoverText) {
-        var hoverTarget = document.getElementById('hoverTarget');
-        if (hoverTarget) {
-            hoverTarget.id = '';
-        }
-        hoverText.parentElement.removeChild(hoverText);
-    }
-
-    hoverText = document.createElement('div');
+    var hoverText = document.createElement('div');
     hoverText.id = 'hoverText';
     hoverText.textContent = evt.target.title;
 
@@ -418,6 +410,17 @@ function toggleHoverText(evt) {
     hoverText.style.left = (rect.left + evt.target.offsetWidth/2) + 'px';
     hoverText.style.top = (rect.bottom + 10) + 'px';
 }
+function hideHoverText(evt) {
+    var hoverText = document.getElementById('hoverText');
+
+    if (hoverText) {
+        var hoverTarget = document.getElementById('hoverTarget');
+        if (hoverTarget) {
+            hoverTarget.id = '';
+        }
+        hoverText.parentElement.removeChild(hoverText);
+    }
+}
 function setupEventHandlers() {
     var elements;
     if (isStorageSupported()) { /*Set up filter value and CSS setting storage read/write handlers.*/
@@ -473,8 +476,8 @@ function setupEventHandlers() {
     /* Set up event handler for hover text. */
     var hoverTargets = document.querySelectorAll('[title]');
     for (var i = 0; i < hoverTargets.length; ++i) {
-        hoverTargets[i].addEventListener('mouseenter', toggleHoverText, false);
-        hoverTargets[i].addEventListener('mouseleave', toggleHoverText, false);
+        hoverTargets[i].addEventListener('mouseenter', showHoverText, false);
+        hoverTargets[i].addEventListener('mouseleave', hideHoverText, false);
     }
 }
 function processCefError(errorCode, errorMessage) {