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

include.postload.js

 /*
  * This file is part of Adblock Plus <https://adblockplus.org/>,
  * Copyright (C) 2006-2015 Eyeo GmbH
  *
  * Adblock Plus is free software: you can redistribute it and/or modify
  * it under the terms of the GNU General Public License version 3 as
  * published by the Free Software Foundation.
  *
  * Adblock Plus is distributed in the hope that it will be useful,
  * but WITHOUT ANY WARRANTY; without even the implied warranty of
  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  * GNU General Public License for more details.
  *
  * You should have received a copy of the GNU General Public License
  * along with Adblock Plus.  If not, see <http://www.gnu.org/licenses/>.
  */
 
 // Click-to-hide stuff
 var clickHide_activated = false;
 var clickHide_filters = null;
 var currentElement = null;
 var highlightedElementsSelector = null;
+var highlightedElementsInterval = null;
 var clickHideFiltersDialog = null;
 var lastRightClickEvent = null;
 var lastRightClickEventValid = false;
 var lastMouseOverEvent = null;
 
 function highlightElement(element, shadowColor, backgroundColor)
 {
   unhighlightElement(element);
 
   var highlightWithOverlay = function()
@@ skipping 56 matching lines @@
     element._unhighlight();
     delete element._unhighlight;
   }
 }
 
 // Highlight elements according to selector string. This would include
 // all elements that would be affected by proposed filters.
 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(
       document.querySelectorAll(highlightedElementsSelector),
       unhighlightElement
     );
 
     highlightedElementsSelector = null;
   }
 }
@@ skipping 624 matching lines @@
           lastRightClickEventValid = false;
         else
           lastRightClickEvent = null;
         break;
     }
   });
 
   if (window == window.top)
     ext.backgroundPage.sendMessage({type: "report-html-page"});
 }