Bug: country flags are not displayed in the filter lines

[dimisa-RUAdList]

Prerequisites

• I performed a cursory search of the issue tracker to avoid opening a duplicate issue.
• The issue is not present after disabling uBO in the browser.
• I checked the documentation to understand that the issue I am reporting is not normal behavior.

I tried to reproduce the issue when...

• uBO is the only extension.
• using a new, unmodified browser profile.

Description

Country flags are not displayed in the filter lines

A specific URL where the issue occurs.

/dashboard.html#1p-filters.html

Steps to Reproduce

Open: /dashboard.html#1p-filters.html

Expected behavior

Country flags will be shown

Actual behavior

Dash icons are displayed instead of flag icons

Screenshot(s)

Configuration

I get complaints from users mostly using this configuration:
uBO 1.49.2
Google Chrome 113

[krystian3w]

Maybe needed is use small emoji flag font?

On Windows 7 with Chrome 109:

---

Playing fortune teller: this could be a violation of the "et cetera" commit rule where no one knows what that "et cetera" could mean.

[gorhill]

Fixed with gorhill/uBlock@39a8aaa.

I thought the browsers themselves would guarantee these unicode-based pictograms would work.

[dimisa-RUAdList]

By the way, there is no flag of Belarus in the RU AdList line.

[gorhill]

Yes, I chose to not show more than 3 flags, otherwise this could get ridiculous for some lists. I chose to show at most three flags, from most populous to least populous. Anyway, now it's irrelevant as I can't use them.

[uBlock-user]

just an FYI -- Arabic list has been dropped to the last in the order and remains flag-less since the very first commit that introduced flags.

uBO 1.49.3b15, Firefox

[krystian3w]

The Flag of Egypt could be given.

🇪🇬

Let the other two be selected by @smed79 with the exclusion of what you consider inappropriate.

[gorhill]

Arabic list has been dropped to the last

Yes, saw this yesterday after I committed -- will fix.

[gorhill]

The Flag of Egypt could be given

I have considered the Arab League flag yesterday, just not sure about this. It's also ok to not have a flag.

[uBlock-user]

Flag of the country doesn't appear in the title when the list is opened via asset-viewer, eg - Hungarian list --

Edit: Something to do with the author himself not adding it ?

[gorhill]

The title of stock lists is taken from assets.json, not the lists themselves. Only for imported lists is the title taken from the list.

[uBlock-user]

The title of stock lists is taken from assets.json

In case of dev build, it's from assets.dev.json ? So in that case, flag should appear and yet it doesn't.

[gorhill]

The asset viewer shows the list as it was fetched, uBO does not modify its content -- this has always been the case, the title of stock lists shown in "Filter lists" never matched the Title: field in the list.

[MasterKia]

I think it would look better with a space after the flag (Compare "ir" with other items):

[gorhill]

There is, it's a hair space, \u200a.

[MasterKia]

Currently in some cases the text kinda blends with the flag and is harder to distinguish at first sight, for example look at the Hebrew and Japanese lists.

This is from my screen on 90% browser zoom, I manually added a space for the "ir" list:

[gorhill]

I was originally using thin space, but since I got rid of commas to save horizontal space, I got worried the ccTLD label would be too far to make it obvious it's related to the flag, hence I went with hair space. But in the end if people are customizing the rendering (such as zoom 90%), it would be unreasonably burdening to try to accommodate all these personal customizations.

[krystian3w]

Certainly, as an aside, flags also work with manually added non-stock lists.

Filter blacklist ~70 k of domains

As I checked quite OK it works when the flag is the first character, the middle or even the last.

---

And I have a sort of déjà vu that they weren't supposed to be there (non-stock added lists).

---

In Firefox with userContent.css possible use these:

[data-key="regions"] .countryFlag { padding-right: 5px !important; }
[data-key="regions"] .countryFlag ~ .countryFlag { padding-left: 5px !important; }

to avoid changes for all community.

[gorhill]

flags also work with manually added non-stock lists

The code just convert Unicode flags to img, so if a Unicode flag appears in the title, it should work. Only problem is that I didn't create a table with conversion for all flags, just the one currently in stock lists -- it would just take time to go through all the flags.