From d910663bbc970ed21b9cda8a2aedb91c413a23c7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bartosz=20Dziewo=C5=84ski?= <matma.rex@gmail.com>
Date: Wed, 20 Apr 2022 19:41:44 +0200
Subject: [PATCH] highlighter: Ensure items in .ranges and .$element are in the
 same order

jQuery#add sorts the nodes in DOM order (and removes duplicates).
We did not sort the ranges, so they could end up in a different
order, causing #update to apply the CSS to the wrong nodes.
This was usually harmless, but it could cause incorrect rendering
when some elements are positioned or hidden.

Change-Id: Ic359db08dafa3d86a5778426a7dc2419c94feabd
---
 modules/highlighter.js | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/modules/highlighter.js b/modules/highlighter.js
index 5118c49d7..11e70d1b9 100644
--- a/modules/highlighter.js
+++ b/modules/highlighter.js
@@ -10,10 +10,9 @@ var
  * @param {CommentItem|CommentItem[]} comments Comment item(s) to highlight
  */
 function Highlight( comments ) {
-	var highlight = this;
+	var highlightNodes = [];
+	var ranges = [];
 
-	this.ranges = [];
-	this.$element = $( [] );
 	this.topmostElement = null;
 
 	comments = Array.isArray( comments ) ? comments : [ comments ];
@@ -30,10 +29,13 @@ function Highlight( comments ) {
 		// before, otherwise Node#getBoundingClientRect() returns wrong results.
 		range.insertNode( $highlight[ 0 ] );
 
-		highlight.ranges.push( range );
-		highlight.$element = highlight.$element.add( $highlight );
+		ranges.push( range );
+		highlightNodes.push( $highlight[ 0 ] );
 	} );
 
+	this.ranges = ranges;
+	this.$element = $( highlightNodes );
+
 	// Events
 	this.updateDebounced = OO.ui.debounce( this.update.bind( this ), 500 );
 	window.addEventListener( 'resize', this.updateDebounced );