1492104 - Inspector underlines different font than that which is used

Status: NEW

(DevTools :: Inspector, defect, P2)

Description

[jakub.fojtik]

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:63.0) Gecko/20100101 Firefox/63.0
Build ID: 20180917133212

Steps to reproduce:

On Linux, if I don't have Courier installed, but have a font that supplements it, e.g. "Nimbus Mono PS", FF will underline monospace in Inspector, but use the Courier-supplementing font for rendering text.

Steps to reproduce:
1. Do not have Courier installed, but have a font that supplements it e.g. "Nimbus Mono PS", so that the output of "fc-match Courier" is something else than "fc-match monospace".
Example:
$ fc-match Courier  
NimbusMonoPS-Regular.otf: "Nimbus Mono PS" "Regular"
Don't forget to run fc-cache and restart FF to apply changes.

2. Go to a page with some text with "font-family: Courier, monospace" and Inspect the monospace text.


Actual results:

Inspect element shows monospace as underlined, even though the page does not use the default monospace font set in Preferences->Fonts->Monospace, but uses what OS considers to be Courier font (but is instead the replacement e.g. Nimbus).

I can clearly see the difference, because OTF fonts render too thin on my system (that's a separate bug and maybe not in FF).


Expected results:

Courier should have been underlined, even though it is not installed. FF still asks the system for a Courier font and gets one.

Comment 1

[u554753]

Hi Jakub, 

Thanks for reporting this issue. Can you clarify some of your STR? Do you have a specific page where we can test this behavior?

Comment 2

[Patrick Brosset <:pbro>]

Hey Razvan, this sounds like a bug we fixed for the font editor. Do you mind checking?

Comment 3

[Razvan Caliman [:rcaliman]]

This is not related to the latest font editor. The code is older that that.

The method for underlining the used font is optimistic: if it can't find a match for any declared font family, it naively matches the first generic font family found. Most of the time, this works as expected (the first encountered generic font family will be used):

https://searchfox.org/mozilla-central/source/devtools/client/inspector/rules/views/text-property-editor.js#434-462

The ElementStyle model asks the PageStyle actor for an array of used font family names:
https://searchfox.org/mozilla-central/source/devtools/client/inspector/rules/models/element-style.js#131-149
https://searchfox.org/mozilla-central/source/devtools/server/actors/styles.js#289-376

The match is attempted by family name (lowercase). In this case, since Courier can't be found, the monospace generic will be used as there is no other font family name to check against. 

Jonathan Kew augmented the API for getting used fonts with the 'generic' boolean property. This marks font faces which belong to a generic font family. We can use this property to improve the optimistic matching of the generic. In this scenario, none of the families declared in font-family would be underlined (and perhaps that's a good thing). To me, it reads as if Nimbus Mono is setup to impersonate Courier, but the API to get used fonts is unaware of that.

I'm not familiar with the approach to supplement a font with another. I could use Jonathan's input to understand what's going on here.

Comment 4

[jakub.fojtik]

Hi all,

if you want a site to test i used github e.g. this: https://github.com/OpenRA/ra2/blob/master/OpenRA.Mods.RA2/Traits/MindController.cs
Inspecting any part of the code e.g. the Copyright comment shows a font-family declaration of fonts of which i have none directly installed. Monospace is underlined, but changing the monospace font in Preferences does NOT change it on the github page.
Except when i disallow pages to use their custom fonts, but that is clearly not a solution because custom fonts are used on some pages as arrows for paging or styled F for facebook and would turn into squares with default fonts.

The word supplement is the first thing that popped in my mind to describe the problem, it is probably not an official term. Substitution might be the right term, see below.

Yes Nimbus is set to impersonate Courier, in /etc/fonts/conf.avail/69-urw-nimbus-mono-ps.conf :

<!-- Font substitution rules -->
  <alias binding="same">
    <family>Courier</family>
    <accept>
      <family>Nimbus Mono PS</family>
    </accept>
  </alias>

When i overwrite that with a different font in /etc/fonts/local.conf instead of Nimbus, the new font is then used by Firefox to render the github page while still underlining monospace instead of Courier in inspector.

Only when i remove the not-underlined Courier from the font-family list, the page font changes to the monospace font set in FF Preferences.

Should i setup some VM or container to showcase the problem?

Comment 5

[Jonathan Kew [:jfkthame]]

(In reply to jakub.fojtik from comment #4)
> Should i setup some VM or container to showcase the problem?

I don't think that's necessary.

The problem here is occurring because the substitution of Nimbus Mono PS for Courier is specified as part of the fontconfig setup, outside of Firefox's direct control/knowledge.

When the CSS specifies something like "font-family: Courier, monospace", Gecko asks fontconfig for a font named Courier, but what it gets back is actually Nimbus (because of the fontconfig alias). That's good, in that it means we're respecting the user's fontconfig setup.

But then, when DevTools asks Gecko what family was used, we (accurately) report Nimbus. But DevTools looks through the font-family property and doesn't see Nimbus mentioned, so it assumes (wrongly, in this case) that it resulted from the monospace generic.

To fix this, I guess there are two possible ways forward: either Gecko needs to keep track of the CSS font-family name that was requested, and report this to DevTools (currently, all we report is the "canonical" family name of the font that ended up being used); or we need to provide an API that DevTools can use to ask "what actual font family does <name> resolve to", so that when Gecko reports that Nimbus was used, DevTools can determine that the name Courier matches this.

Not sure offhand what will be the best approach... either way I think some Gecko-level enhancement is needed. For DevTools to try to figure out this kind of substitution by itself would be pretty awkward.

Comment 6

[Jonathan Kew [:jfkthame]]

Attachment: testcase using localized family names for macOS and Windows

Here's a related testcase that should work to demonstrate the issue on macOS and Windows.* The green and red test <span>s both use the same font, but the DevTools inspector doesn't recognize the case where it has been specified by its localized (Japanese or Chinese) name, and ends up underlining the generic 'serif' instead.

In this case, the problem occurs because the CSS uses localized font-family names in #test2, but what we report to DevTools is the standard family name. So just like in the case where fontconfig performed a substitution, here also we fail to recognize the font-family list element that was being used.


* Actually, I haven't tested this on Windows yet, so not 100% sure it'll work but I expect so.