From a564076b22dd43cb91e538f73242d84dc24334be Mon Sep 17 00:00:00 2001
From: Chris Jones <jones.chris.g@gmail.com>
Date: Thu, 30 Jun 2011 02:08:53 -0700
Subject: [PATCH 1/3] add another hackity hack to detect font loaded-ness

---
 fonts.js             | 157 +++++++++++++++++++++++++------------------
 multi_page_viewer.js |  20 +-----
 test/test_slave.html |  15 ++---
 viewer.js            |  24 +++----
 4 files changed, 108 insertions(+), 108 deletions(-)

diff --git a/fonts.js b/fonts.js
index e25b2ae2d..80651d224 100644
--- a/fonts.js
+++ b/fonts.js
@@ -95,31 +95,45 @@ var Fonts = {
 };
 
 var FontLoader = {
-  bind: function(fonts) {
+  bind: function(fonts, callback) {
     var worker = (typeof window == "undefined");
-    var ready = true;
+
+    function checkFontsLoaded() {
+      for (var i = 0; i < fonts.length; i++) {
+        var font = fonts[i];
+        if (Fonts[font.name].loading) {
+          return false;
+        }
+      }
+
+      document.documentElement.removeEventListener(
+        "pdfjsFontLoad", checkFontsLoaded, false);
+
+      callback();
+      return true;
+    }
 
     for (var i = 0; i < fonts.length; i++) {
       var font = fonts[i];
-      if (Fonts[font.name]) {
-        ready = ready && !Fonts[font.name].loading;
-        continue;
+      if (!Fonts[font.name]) {
+        var obj = new Font(font.name, font.file, font.properties);
+
+        var str = "";
+        var data = Fonts[font.name].data;
+        var length = data.length;
+        for (var j = 0; j < length; j++)
+          str += String.fromCharCode(data[j]);
+
+        worker ? obj.bindWorker(str) : obj.bindDOM(str);
       }
-
-      ready = false;
-
-      var obj = new Font(font.name, font.file, font.properties);
-
-      var str = "";
-      var data = Fonts[font.name].data;
-      var length = data.length;
-      for (var j = 0; j < length; j++)
-        str += String.fromCharCode(data[j]);
-
-      worker ? obj.bindWorker(str) : obj.bindDOM(str);
     }
 
-    return ready;
+    if (!checkFontsLoaded()) {
+      document.documentElement.addEventListener(
+        "pdfjsFontLoad", checkFontsLoaded, false);
+    }
+
+    return;
   }
 };
 
@@ -793,60 +807,73 @@ var Font = (function () {
       });
     },
 
-    bindDOM: function font_bindDom(data, callback) {
+    bindDOM: function font_bindDom(data) {
       var fontName = this.name;
 
-      // Just adding the font-face to the DOM doesn't make it load. It
-      // seems it's loaded once Gecko notices it's used. Therefore,
-      // add a div on the page using the loaded font.
-      var div = document.createElement("div");
-      var style = 'font-family:"' + name + 
-        '";position: absolute;top:-99999;left:-99999;z-index:-99999';
-      div.setAttribute("style", style);
-      document.body.appendChild(div);
-
-      /** Hack begin */
-      // Actually there is not event when a font has finished downloading so
-      // the following code are a dirty hack to 'guess' when a font is ready
-      // This code could go away when bug 471915 has landed
-      var canvas = document.createElement("canvas");
-      var ctx = canvas.getContext("2d");
-      ctx.font = "bold italic 20px " + fontName + ", Symbol, Arial";
-      var testString = "    ";
-
-      // Periodicaly check for the width of the testString, it will be
-      // different once the real font has loaded
-      var textWidth = ctx.measureText(testString).width;
-
-      var interval = window.setInterval(function canvasInterval(self) {
-        this.start = this.start || Date.now();
-        ctx.font = "bold italic 20px " + fontName + ", Symbol, Arial";
-
-        // For some reasons the font has not loaded, so mark it loaded for the
-        // page to proceed but cry
-        if (textWidth == ctx.measureText(testString).width) {
-          if ((Date.now() - this.start) < kMaxWaitForFontFace) {
-            return;
-          } else {
-            warn("Is " + fontName + " loaded?");
-          }
-        }
-        
-        window.clearInterval(interval);
-        Fonts[fontName].loading = false;
-        this.start = 0;
-        if (callback) {
-          callback();
-        }
-      }, 30, this);
-
-      /** Hack end */
-
       // Add the @font-face rule to the document
       var url = "url(data:" + this.mimetype + ";base64," + window.btoa(data) + ");";
       var rule = "@font-face { font-family:'" + fontName + "';src:" + url + "}";
       var styleSheet = document.styleSheets[0];
       styleSheet.insertRule(rule, styleSheet.length);
+
+      /** Hack begin */
+      // There's no event when a font has finished downloading so the
+      // following code is a dirty hack to 'guess' when a font is
+      // ready.  This code will be obsoleted by Mozilla bug 471915.
+      //
+      // The only reliable way to know if a font is loaded in Gecko
+      // (at the moment) is document.onload in a document with
+      // a @font-face rule defined in a "static" stylesheet.  We use a
+      // subdocument in an <iframe>, set up properly, to know when
+      // our @font-face rule was loaded.  However, the subdocument and
+      // outer document can't share CSS rules, so the inner document
+      // is only part of the puzzle.  The second piece is an invisible
+      // paragraph created in order to force loading of the @font-face
+      // in the *outer* document.  (The font still needs to be loaded
+      // for its metrics, for reflow).  We create the <p> first, in
+      // the outer document, then create the iframe.  Unless something
+      // goes really wonkily, we expect the @font-face for the outer
+      // document to processed before the inner.  That's still
+      // fragile, but seems to work in practice.
+      var p = document.createElement("p");
+      p.setAttribute("style",
+                     'font-family: "'+ fontName +'";'+
+                     'visibility: hidden;'+
+                     'width: 10px; height: 10px;'+
+                     'position: absolute; top: 0px; left: 0px;');
+      p.innerHTML = 'Hello';
+      document.body.appendChild(p);
+
+      // XXX we should have a time-out here too, and maybe fire
+      // pdfjsFontLoadFailed?
+      var src = '<!DOCTYPE HTML><html><head>'
+      src += '<style type="text/css">';
+      src += rule;
+      src += '</style>'
+      src += '<script type="application/javascript">'
+      src += '  var fontName="'+ fontName +'";\n';
+      src += '  window.onload = function () {\n'
+      src += '    var Fonts = top.document.defaultView.Fonts;\n';
+      src += '    var font = Fonts[fontName];\n';
+      src += '    font.loading = false;\n';
+      src += '    var doc = top.document;\n';
+      src += '    var evt = doc.createEvent("Events");\n';
+      src += '    evt.initEvent("pdfjsFontLoad", true, false);\n'
+      src += '    doc.documentElement.dispatchEvent(evt);\n';
+      src += '  }';
+      src += '</script>';
+      src += '</head>';
+      src += '<body style="font-family:\''+ fontName +'\'">';
+      src += 'Hello</body></html>';
+      var frame = document.createElement("iframe");
+      frame.src = 'data:text/html,'+ src;
+      frame.setAttribute("style",
+                         'visibility: hidden;'+
+                         'width: 10px; height: 10px;'+
+                         'position: absolute; top: 0px; left: 0px;');
+      document.body.appendChild(frame);
+
+      /** Hack end */
     }
   };
 
diff --git a/multi_page_viewer.js b/multi_page_viewer.js
index 87e2c8f14..d60e96cb2 100644
--- a/multi_page_viewer.js
+++ b/multi_page_viewer.js
@@ -125,14 +125,7 @@ var PDFViewer = {
       var fonts = [];
       page.compile(gfx, fonts);
 
-      var loadFont = function() {
-        if (!FontLoader.bind(fonts)) {
-          pageTimeout = window.setTimeout(loadFont, 10);
-          return;
-        }
-        page.display(gfx);
-      }
-      loadFont();
+      FontLoader.bind(fonts, function() { page.display(gfx); });
     }
   },
   
@@ -194,17 +187,10 @@ var PDFViewer = {
       var fonts = [];
       page.compile(gfx, fonts);
 
-      var loadFont = function() {
-        if (!FontLoader.bind(fonts)) {
-          pageTimeout = window.setTimeout(loadFont, 10);
-          return;
-        }
-        page.display(gfx);
-      }
-      loadFont();
+      FontLoader.bind(fonts, function() { page.display(gfx); });
     }
   },
-  
+
   changeScale: function(num) {
     while (PDFViewer.element.hasChildNodes()) {
       PDFViewer.element.removeChild(PDFViewer.element.firstChild);
diff --git a/test/test_slave.html b/test/test_slave.html
index d70e362af..8564b52b4 100644
--- a/test/test_slave.html
+++ b/test/test_slave.html
@@ -113,25 +113,18 @@ function nextPage() {
     failure = 'page setup: '+ e.toString();
   }
 
-  var fontLoaderTimer = null;
-  function checkFontsLoaded() {
+  if (!failure) {
     try {
-      if (!FontLoader.bind(fonts)) {
-        fontLoaderTimer = window.setTimeout(checkFontsLoaded, 10);
-        return;
-      }
+      FontLoader.bind(fonts, function() { snapshotCurrentPage(gfx); });
     } catch(e) {
       failure = 'fonts: '+ e.toString();
     }
-    snapshotCurrentPage(gfx);
   }
 
   if (failure) {
-    // Skip font loading if there was a failure, since the fonts might
-    // be in an inconsistent state.
+    // Skip right to snapshotting if there was a failure, since the
+    // fonts might be in an inconsistent state.
     snapshotCurrentPage(gfx);
-  } else {
-    checkFontsLoaded();
   }
 }
 
diff --git a/viewer.js b/viewer.js
index 5db2effda..765a26b3b 100644
--- a/viewer.js
+++ b/viewer.js
@@ -3,7 +3,7 @@
 
 "use strict";
 
-var pdfDocument, canvas, pageScale, pageDisplay, pageNum, numPages, pageTimeout;
+var pdfDocument, canvas, pageScale, pageDisplay, pageNum, numPages;
 function load(userInput) {
     canvas = document.getElementById("canvas");
     canvas.mozOpaque = true;
@@ -53,8 +53,6 @@ function gotoPage(num) {
 }
 
 function displayPage(num) {
-    window.clearTimeout(pageTimeout);
-
     document.getElementById("pageNumber").value = num;
 
     var t0 = Date.now();
@@ -82,22 +80,18 @@ function displayPage(num) {
     page.compile(gfx, fonts);
     var t2 = Date.now();
 
-    function loadFont() {
-      if (!FontLoader.bind(fonts)) {
-        pageTimeout = window.setTimeout(loadFont, 10);
-        return;
-      }
+    function displayPage() {
+        var t3 = Date.now();
 
-      var t3 = Date.now();
+        page.display(gfx);
 
-      page.display(gfx);
+        var t4 = Date.now();
 
-      var t4 = Date.now();
+        var infoDisplay = document.getElementById("info");
+        infoDisplay.innerHTML = "Time to load/compile/fonts/render: "+ (t1 - t0) + "/" + (t2 - t1) + "/" + (t3 - t2) + "/" + (t4 - t3) + " ms";
+    }
 
-      var infoDisplay = document.getElementById("info");
-      infoDisplay.innerHTML = "Time to load/compile/fonts/render: "+ (t1 - t0) + "/" + (t2 - t1) + "/" + (t3 - t2) + "/" + (t4 - t3) + " ms";
-    };
-    loadFont();
+    FontLoader.bind(fonts, displayPage);
 }
 
 function nextPage() {

From 9bc06a9924aae0e5bc10863b5f659a5059654823 Mon Sep 17 00:00:00 2001
From: Chris Jones <jones.chris.g@gmail.com>
Date: Thu, 30 Jun 2011 02:51:42 -0700
Subject: [PATCH 2/3] load all newly-created fonts in one document to speed
 things up

---
 fonts.js | 126 +++++++++++++++++++++++++++++++++----------------------
 1 file changed, 75 insertions(+), 51 deletions(-)

diff --git a/fonts.js b/fonts.js
index 9d8a9e806..4a09931e5 100644
--- a/fonts.js
+++ b/fonts.js
@@ -137,6 +137,7 @@ var FontLoader = {
       return true;
     }
 
+    var rules = [ ], names = [ ];
     for (var i = 0; i < fonts.length; i++) {
       var font = fonts[i];
       if (!Fonts.lookup(font.name)) {
@@ -148,16 +149,86 @@ var FontLoader = {
         for (var j = 0; j < length; j++)
           str += String.fromCharCode(data[j]);
 
-        worker ? obj.bindWorker(str) : obj.bindDOM(str);
+        worker ? obj.bindWorker(str) : obj.bindDOM(str, rules, names);
       }
     }
 
+    if (!worker && rules.length) {
+      FontLoader.prepareFontLoadEvent(rules, names);
+    }
+
     if (!checkFontsLoaded()) {
       document.documentElement.addEventListener(
         "pdfjsFontLoad", checkFontsLoaded, false);
     }
 
     return;
+  },
+  // Set things up so that at least one pdfjsFontLoad event is
+  // dispatched when all the @font-face |rules| for |names| have been
+  // loaded in a subdocument.  It's expected that the load of |rules|
+  // has already started in this (outer) document, so that they should
+  // be ordered before the load in the subdocument.
+  prepareFontLoadEvent: function(rules, names) {
+      /** Hack begin */
+      // There's no event when a font has finished downloading so the
+      // following code is a dirty hack to 'guess' when a font is
+      // ready.  This code will be obsoleted by Mozilla bug 471915.
+      //
+      // The only reliable way to know if a font is loaded in Gecko
+      // (at the moment) is document.onload in a document with
+      // a @font-face rule defined in a "static" stylesheet.  We use a
+      // subdocument in an <iframe>, set up properly, to know when
+      // our @font-face rule was loaded.  However, the subdocument and
+      // outer document can't share CSS rules, so the inner document
+      // is only part of the puzzle.  The second piece is an invisible
+      // paragraph created in order to force loading of the @font-face
+      // in the *outer* document.  (The font still needs to be loaded
+      // for its metrics, for reflow).  We create the <p> first (in
+      // |bindDom()| function below), for the outer document, then
+      // create the iframe.  Unless something goes really wonkily, we
+      // expect the @font-face for the outer document to be processed
+      // before the inner.  That's still fragile, but seems to work in
+      // practice.
+
+      // XXX we should have a time-out here too, and maybe fire
+      // pdfjsFontLoadFailed?
+      var src = '<!DOCTYPE HTML><html><head>';
+      src += '<style type="text/css">';
+      for (var i = 0; i < rules.length; ++i) {
+        src += rules[i];
+      }
+      src += '</style>'
+      src += '<script type="application/javascript">'
+      var fontNamesArray = '';
+      for (var i = 0; i < names.length; ++i) {
+        fontNamesArray += '"'+ names[i] + '", ';
+      }
+      src += '  var fontNames=['+ fontNamesArray +'];\n';
+      src += '  window.onload = function () {\n'
+      src += '    var Fonts = top.document.defaultView.Fonts;\n';
+      src += '    for (var i = 0; i < fontNames.length; ++i) {\n';
+      src += '      var font = Fonts.lookup(fontNames[i]);\n';
+      src += '      font.loading = false;\n';
+      src += '    }\n';
+      src += '    var doc = top.document;\n';
+      src += '    var evt = doc.createEvent("Events");\n';
+      src += '    evt.initEvent("pdfjsFontLoad", true, false);\n'
+      src += '    doc.documentElement.dispatchEvent(evt);\n';
+      src += '  }';
+      src += '</script></head><body>';
+      for (var i = 0; i < names.length; ++i) {
+        src += '<p style="font-family:\''+ fontName +'\'">Hello</p>';
+      }
+      src += '</body></html>';
+      var frame = document.createElement("iframe");
+      frame.src = 'data:text/html,'+ src;
+      frame.setAttribute("style",
+                         'visibility: hidden;'+
+                         'width: 10px; height: 10px;'+
+                         'position: absolute; top: 0px; left: 0px;');
+      document.body.appendChild(frame);
+      /** Hack end */
   }
 };
 
@@ -820,7 +891,7 @@ var Font = (function () {
       });
     },
 
-    bindDOM: function font_bindDom(data) {
+    bindDOM: function font_bindDom(data, rules, names) {
       var fontName = this.name;
 
       // Add the @font-face rule to the document
@@ -829,25 +900,6 @@ var Font = (function () {
       var styleSheet = document.styleSheets[0];
       styleSheet.insertRule(rule, styleSheet.length);
 
-      /** Hack begin */
-      // There's no event when a font has finished downloading so the
-      // following code is a dirty hack to 'guess' when a font is
-      // ready.  This code will be obsoleted by Mozilla bug 471915.
-      //
-      // The only reliable way to know if a font is loaded in Gecko
-      // (at the moment) is document.onload in a document with
-      // a @font-face rule defined in a "static" stylesheet.  We use a
-      // subdocument in an <iframe>, set up properly, to know when
-      // our @font-face rule was loaded.  However, the subdocument and
-      // outer document can't share CSS rules, so the inner document
-      // is only part of the puzzle.  The second piece is an invisible
-      // paragraph created in order to force loading of the @font-face
-      // in the *outer* document.  (The font still needs to be loaded
-      // for its metrics, for reflow).  We create the <p> first, in
-      // the outer document, then create the iframe.  Unless something
-      // goes really wonkily, we expect the @font-face for the outer
-      // document to processed before the inner.  That's still
-      // fragile, but seems to work in practice.
       var p = document.createElement("p");
       p.setAttribute("style",
                      'font-family: "'+ fontName +'";'+
@@ -857,36 +909,8 @@ var Font = (function () {
       p.innerHTML = 'Hello';
       document.body.appendChild(p);
 
-      // XXX we should have a time-out here too, and maybe fire
-      // pdfjsFontLoadFailed?
-      var src = '<!DOCTYPE HTML><html><head>'
-      src += '<style type="text/css">';
-      src += rule;
-      src += '</style>'
-      src += '<script type="application/javascript">'
-      src += '  var fontName="'+ fontName +'";\n';
-      src += '  window.onload = function () {\n'
-      src += '    var Fonts = top.document.defaultView.Fonts;\n';
-      src += '    var font = Fonts.lookup(fontName);\n';
-      src += '    font.loading = false;\n';
-      src += '    var doc = top.document;\n';
-      src += '    var evt = doc.createEvent("Events");\n';
-      src += '    evt.initEvent("pdfjsFontLoad", true, false);\n'
-      src += '    doc.documentElement.dispatchEvent(evt);\n';
-      src += '  }';
-      src += '</script>';
-      src += '</head>';
-      src += '<body style="font-family:\''+ fontName +'\'">';
-      src += 'Hello</body></html>';
-      var frame = document.createElement("iframe");
-      frame.src = 'data:text/html,'+ src;
-      frame.setAttribute("style",
-                         'visibility: hidden;'+
-                         'width: 10px; height: 10px;'+
-                         'position: absolute; top: 0px; left: 0px;');
-      document.body.appendChild(frame);
-
-      /** Hack end */
+      rules.push(rule);
+      names.push(fontName);
     }
   };
 

From 6b72f8e98a6922f34327156dcfb66300be75c388 Mon Sep 17 00:00:00 2001
From: Chris Jones <jones.chris.g@gmail.com>
Date: Thu, 30 Jun 2011 03:02:50 -0700
Subject: [PATCH 3/3] just create one dummy element too, and centralize hackery

---
 fonts.js | 49 +++++++++++++++++++++++++++----------------------
 1 file changed, 27 insertions(+), 22 deletions(-)

diff --git a/fonts.js b/fonts.js
index 4a09931e5..41f70f963 100644
--- a/fonts.js
+++ b/fonts.js
@@ -149,7 +149,11 @@ var FontLoader = {
         for (var j = 0; j < length; j++)
           str += String.fromCharCode(data[j]);
 
-        worker ? obj.bindWorker(str) : obj.bindDOM(str, rules, names);
+        var rule = worker ? obj.bindWorker(str) : obj.bindDOM(str);
+        if (rule) {
+          rules.push(rule);
+          names.push(font.name);
+        }
       }
     }
 
@@ -182,14 +186,25 @@ var FontLoader = {
       // our @font-face rule was loaded.  However, the subdocument and
       // outer document can't share CSS rules, so the inner document
       // is only part of the puzzle.  The second piece is an invisible
-      // paragraph created in order to force loading of the @font-face
-      // in the *outer* document.  (The font still needs to be loaded
-      // for its metrics, for reflow).  We create the <p> first (in
-      // |bindDom()| function below), for the outer document, then
-      // create the iframe.  Unless something goes really wonkily, we
-      // expect the @font-face for the outer document to be processed
-      // before the inner.  That's still fragile, but seems to work in
-      // practice.
+      // div created in order to force loading of the @font-face in
+      // the *outer* document.  (The font still needs to be loaded for
+      // its metrics, for reflow).  We create the div first for the
+      // outer document, then create the iframe.  Unless something
+      // goes really wonkily, we expect the @font-face for the outer
+      // document to be processed before the inner.  That's still
+      // fragile, but seems to work in practice.
+
+      var div = document.createElement("div");
+      div.setAttribute("style",
+                       'visibility: hidden;'+
+                       'width: 10px; height: 10px;'+
+                       'position: absolute; top: 0px; left: 0px;');
+      var html = '';
+      for (var i = 0; i < names.length; ++i) {
+        html += '<span style="font-family:'+ names[i] +'">Hi</span>';
+      }
+      div.innerHTML = html;
+      document.body.appendChild(div);
 
       // XXX we should have a time-out here too, and maybe fire
       // pdfjsFontLoadFailed?
@@ -218,7 +233,7 @@ var FontLoader = {
       src += '  }';
       src += '</script></head><body>';
       for (var i = 0; i < names.length; ++i) {
-        src += '<p style="font-family:\''+ fontName +'\'">Hello</p>';
+        src += '<p style="font-family:\''+ fontName +'\'">Hi</p>';
       }
       src += '</body></html>';
       var frame = document.createElement("iframe");
@@ -891,7 +906,7 @@ var Font = (function () {
       });
     },
 
-    bindDOM: function font_bindDom(data, rules, names) {
+    bindDOM: function font_bindDom(data) {
       var fontName = this.name;
 
       // Add the @font-face rule to the document
@@ -900,17 +915,7 @@ var Font = (function () {
       var styleSheet = document.styleSheets[0];
       styleSheet.insertRule(rule, styleSheet.length);
 
-      var p = document.createElement("p");
-      p.setAttribute("style",
-                     'font-family: "'+ fontName +'";'+
-                     'visibility: hidden;'+
-                     'width: 10px; height: 10px;'+
-                     'position: absolute; top: 0px; left: 0px;');
-      p.innerHTML = 'Hello';
-      document.body.appendChild(p);
-
-      rules.push(rule);
-      names.push(fontName);
+      return rule;
     }
   };