Starting to create a @font-face loaded event in Firefox

I am about to sit down and work on the beginning on what may become a JavaScript font API.

I am going to try something new with this blog post, and write it along side whatever it is I am working on, instead of afterwards. In hopes things will be more fresh in my mind, and to document my thoughts and process as I do things.

With regards to the font API, I am going to start hacking on it, dive right in, and learn something from it. My initial goal will be to somehow create a loaded((meta)data) event for fonts. For now, I am more concerned in making this work, than making it right. Making it right can come later.

First thing I did was head over to mxr and search for “fontface”. I bounced around a bit on there until I found the file nsFontFaceLoader.cpp.

Next I needed to setup some breakpoints, and in order to do this I had to have a webpage that would initiat the code path I am looking for. I started by downloading a font that I could initiat with @font-face, then setup a little html page that looked like this:

<html>
<head>
<style>
@font-face {
	font-family: dekar;
	src: url('Dekar.otf');
}
div {
  font-family: dekar;
}
</style>
</head>
<body>
<div>
Hello world!
</div>
</body>
</html>

I put a break point on the line nsUserFontSet::StartLoad(gfxProxyFontEntry *aProxy, const gfxFontFaceSrc *aFontFaceSrc), and ran the page. My theory was confirmed and my breakpoint was fired right away. All this tells me is I am close to the code I care about. I have found the code that loads the font, but what I really care about is the code right after the font is done loading.

So, this Start Load function is on the nsUserFontSet, and inside it sets up a nsFontFaceLoader object. This object might be what I care about, the thing that is loading. So next thing I am going to do is check what options this object has. I found a few functions like cancel, that I am not really interested in, but I did find a OnStreamComplete, which looks pretty interesting.

So now I am going to add another breakpoint, and leave my old one. Make sure both fire, with the newsest one firing last. That is exactly what it did. Now, this does not mean it is what I want yet, but probably pretty close. I noticed that at this point, if I view the webpage, the font-face has still not displayed, while I sit on my breakpoint. This is a good sign that what I have, is what I need. So next I am going to put breakpoints all over this block, and find the exact moment where the font on the page updates. So, bad news, I went all the way through this function, and the font did not update. Maybe I have the wrong spot after all. It might be some caching nonsense going on, though.

I kept looking around this function, and found a call to UserFontSetUpdated that seems to be related to styling reloads, but, seems to be after the reload, so probably too late. If I look a bit north of that, I see a “userFontSet->OnLoadComplete”, so I will send this over to mxr and see what I find there. Found the file gfx/thebes/gfxUserFontSet.cpp, with the OnLoadComplete function. I am pretty sure this is what I will need.

Next, I need to figure out how the firefox event system works, and create a load event of sorts attached to something… and call the event inside the OnLoadComplete. Probably all for tonight.

About these ads

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: