Fix sorting of lists in "Filter lists" pane

Related feedback:
- uBlockOrigin/uBlock-issues#2645 (comment)

src/css/common.css

@@ -312,7 +312,7 @@ select {
 .countryFlag {
     height: var(--font-size);
     position: relative;
-    top: calc(var(--font-size) / 6);
+    top: calc(var(--font-size) / 7);
     width: calc(var(--font-size) * 1.4);
     }
 

src/js/3p-filters.js

@@ -173,9 +173,10 @@ const renderFilterLists = ( ) => {
         const listEntries = dom.clone('#templates .listEntries');
         const treeEntries = Object.entries(listTree);
         if ( depth !== 0 ) {
+            const reEmojis = /[\p{Emoji}]/gu;
             treeEntries.sort((a ,b) => {
-                const as = a[1].title || a[0];
-                const bs = b[1].title || b[0];
+                const as = (a[1].title || a[0]).replace(reEmojis, '');
+                const bs = (b[1].title || b[0]).replace(reEmojis, '');
                 return as.localeCompare(bs);
             });
         }

src/js/i18n.js

@@ -318,19 +318,18 @@ if ( isBackgroundProcess !== true ) {
             const match = reUnicodeFlags.exec(text);
             if ( match === null ) { break; }
             if ( match.index > i ) {
-                fragment.append(document.createTextNode(text.slice(i, match.index)));
+                fragment.append(text.slice(i, match.index));
             }
             const img = document.createElement('img');
             const countryCode = unicodeFlagToImageSrc.get(match[0]);
             img.src = `/img/flags-of-the-world/${countryCode}.png`;
             img.title = countryCode;
             img.classList.add('countryFlag');
-            fragment.append(img);
-            fragment.append(document.createTextNode('\u2009'));
+            fragment.append(img, '\u2009');
             i = reUnicodeFlags.lastIndex;
         }
         if ( i < text.length ) {
-            fragment.append(document.createTextNode(text.slice(i)));
+            fragment.append(text.slice(i));
         }
         return fragment; 
     };