Issue 2215 - Prevent page from freezing when highlighting a lot of elements

include.postload.js

Index: include.postload.js
===================================================================
--- a/include.postload.js
+++ b/include.postload.js
@@ -20,6 +20,7 @@
 var clickHide_filters = null;
 var currentElement = null;
 var highlightedElementsSelector = null;
+var highlightedElementsInterval = null;
 var clickHideFiltersDialog = null;
 var lastRightClickEvent = null;
 var lastRightClickEventValid = false;
@@ -96,16 +97,36 @@
 function highlightElements(selectorString) {
   unhighlightElements();
 
-  var highlightedElements = document.querySelectorAll(selectorString);
+  var elements = Array.prototype.slice.call(document.querySelectorAll(selectorString));
   highlightedElementsSelector = selectorString;
 
-  for(var i = 0; i < highlightedElements.length; i++)
-    highlightElement(highlightedElements[i], "#fd6738", "#f6e1e5");
+  // Highlight elements progressively. Otherwise the page freezes
+  // when a lot of elements get highlighted at the same time.
+  highlightedElementsInterval = setInterval(function()
+  {
+    if (elements.length > 0)
+    {
+      var element = elements.shift();
+      if (element != currentElement)
+        highlightElement(element, "#fd6738", "#f6e1e5");
+    }
+    else
+    {
+      clearInterval(highlightedElementsInterval);
+      highlightedElementsInterval = null;
+    }
+  }, 0);

[Wladimir Palant, 2015/04/14 16:06:17]

Using setInterval() instead of setTimeout() here has a disadvantage: if you
error out in the function body and don't call clearInterval(), it will keep
running forever. If you call setTimeout() at the end of the function then it
will terminate automatically.

In terms of statements it's exactly the same - you need
|highlightedElementsInterval = setTimeout(arguments.callee, 0)| inside the
function but you don't need to call clearInteval() any more.

Up to you whether you want to address this issue.

[Sebastian Noack, 2015/04/20 11:02:21]

I see your point, but IMO not worth a follow up commit, in particular since the
current implementation has already been tested and approved by QA.

 }
 
 // Unhighlight all elements, including those that would be affected by
 // the proposed filters
 function unhighlightElements() {
+  if (highlightedElementsInterval)
+  {
+    clearInterval(highlightedElementsInterval)
+    highlightedElementsInterval = null;
+  }
+
   if (highlightedElementsSelector)
   {
     Array.prototype.forEach.call(