I’ve got a working @font-face ready event in Firefox

So to continue on from my last post, I was able to get a loaded or ready event for @font-face.

I mentioned in my last post I found a good place to create an event, just did not know how to create an event. I looked around mxr, starting with domcontentloaded, trying to find something similar. It was actually much easier than I thought to setup a custom event inside the c++. All you need to do is call nsContentUtils::DispatchTrustedEvent, and pass in a object that you want the event on, the second parameter is similar to the first, but it needs to be casted (have not quite figured this one out yet), third is a NS_LITERAL_STRING(“nameofevent”), and the last two are two trues (also don’t know what yet). I needed to get access to the document as well, but that was easy too. Final diff looks like this:

diff --git a/layout/style/nsFontFaceLoader.cpp b/layout/style/nsFontFaceLoader.cpp
--- a/layout/style/nsFontFaceLoader.cpp
+++ b/layout/style/nsFontFaceLoader.cpp
@@ -247,16 +247,21 @@ nsFontFaceLoader::OnStreamComplete(nsISt
   // when new font loaded, need to reflow
   if (fontUpdate) {
     // Update layout for the presence of the new font.  Since this is
     // asynchronous, reflows will coalesce.
     ctx->UserFontSetUpdated();
     LOG(("fontdownloader (%p) reflow\n", this));
   }
 
+  nsIDocument* aDocument = ctx->Document();
+     nsContentUtils::DispatchTrustedEvent(aDocument, static_cast<nsIDocument*>(aDocument),
+                                        NS_LITERAL_STRING("fontready"),
+                                        true, true);
+
   return NS_SUCCESS_ADOPTED_DATA;
 }
 
 void
 nsFontFaceLoader::Cancel()
 {
   mFontEntry->mLoadingState = gfxProxyFontEntry::NOT_LOADING;
   mFontSet = nsnull;

And using it on a page like this, you receive the console.log.

<html>
  <head>
    <style>
      @font-face {
        font-family: dekar;
        src: url('Dekar.otf');
      }
      div {
        font-family: dekar;
      }
    </style>
    <script>
      document.addEventListener( "fontready", function( e ) {
        console.log( "We be ready, captain!" );
      }, false );
    </script>
  </head>
  <body>
    <div>
      Hello world!
    </div>
  </body>
</html>

I was pleasantly surprised the event was so easy to create.

This is just some preliminary work, really. This week I hope to get some eyes on it.

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: