pdf.js font instrumentation

debug.js

/* -*- Mode: Java; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
/* vim: set shiftwidth=2 tabstop=2 autoindent cindent expandtab: */

// save the file as '<pdf.js>/font~/debug.js'
// bookmarklet -> javascript:(function(){if(window.fontDebugScript)%20return;%20var%20script%20=%20window.fontDebugScript%20=%20document.createElement('script');script.setAttribute('src',%20'../font~/debug.js');document.body.appendChild(script);})();

'use strict';

(function fontDebug() {
  var fonts;
  var panelWidth = 300;
  function initUI() {
    var ui = document.createElement('div');
    ui.setAttribute('style', 'position: fixed; top:35px; bottom:5px; right: 0; width: ' + panelWidth + 'px; background: white; border: 2px black solid; padding: 5px; overflow: scroll;');
    document.body.appendChild(ui);
    var tmp;
    tmp = document.createElement('p');
    tmp.textContent = 'pdf.js font instrumentation';
    ui.appendChild(tmp);
    
    tmp = document.createElement('button');
    tmp.addEventListener('click', refresh);
    tmp.textContent = 'Refresh';
    ui.appendChild(tmp);
    ui.appendChild(document.createElement('br'));
    
    fonts = document.createElement('div');
    ui.appendChild(fonts);

    var style = document.createElement('style');
    style.textContent = '.showtext { background: yellow; color: blue; opacity: 0.3; } .hidetext:hover { background: yellow; opacity: 0.3; }'; 
    ui.appendChild(style);

    document.body.setAttribute('style', 'padding-right: ' + panelWidth + 'px;');
    document.body.addEventListener('click', textLayerClick, true);
    refresh();
  }
  function refresh() {
    resetSelection();
    fonts.innerHTML = '';
    var styles = document.styleSheets;
    for (var i = 0; i < styles.length; i++) {
      var style = styles[i];
      if (!style.cssRules || style.cssRules.length != 1) continue;
      var rule = style.cssRules[0];
      var text = rule.cssText;
      var m = /(pdfFont\d+)/.exec(text);
      if (!m) continue;
      var fontName = m[1];
      m = /url\(['"]?([^\)"']+)/.exec(text);
      var font = document.createElement('div');
      var name = document.createElement('a');
      name.href = m[1];
      name.textContent = fontName;
      font.appendChild(name);
      var select = document.createElement('input');
      select.setAttribute('type', 'checkbox');
      select.dataset.fontName = fontName;
      select.addEventListener('click', (function(select, fontName) {
        return (function() {
           selectFont(fontName, select.checked);
        });
      })(select, fontName));
      font.appendChild(select);
      
      fonts.appendChild(font);
    }
  }
  function resetSelection() {
    var divs = document.getElementsByTagName('div');
    for (var i = 0; i < divs.length; ++i) {
      var div = divs[i], style = div.getAttribute('style');
      if (!style || style.indexOf('pdfFont') < 0) continue;
      var m = /(pdfFont\d+)/.exec(style);
      div.dataset.fontName = m[1];
      div.className = 'hidetext';
    }
  }
  function selectFont(fontName, show) {
    var divs = document.getElementsByTagName('div');
    for (var i = 0; i < divs.length; ++i) {
      var div = divs[i], style = div.getAttribute('style');
      if (div.dataset.fontName != fontName) continue;
      div.className = show ? 'showtext' : 'hidetext';
    }
  }
  function textLayerClick(e) {
    if (!e.target.dataset.fontName || e.target.tagName != 'DIV')
      return;
    var fontName = e.target.dataset.fontName;
    var selects = document.getElementsByTagName('input');
    for (var i = 0; i < selects.length; ++i) {
      var select = selects[i];
      if (select.dataset.fontName != fontName) continue;
      select.checked = !select.checked;
      selectFont(fontName, select.checked);
      select.scrollIntoView();
    }
  }

  initUI();
})();