The Tor Browser: browser/devtools/fontinspector/font-inspector.js@6474c204b198 (annotated)

browser/devtools/fontinspector/font-inspector.js@6474c204b198 (annotated)

browser/devtools/fontinspector/font-inspector.js

Wed, 31 Dec 2014 06:09:35 +0100

author: Michael Schloh von Bennewitz <michael@schloh.com>
date: Wed, 31 Dec 2014 06:09:35 +0100
changeset 0: 6474c204b198
permissions: -rw-r--r--

Cloned upstream origin tor-browser at tor-browser-31.3.0esr-4.5-1-build1
revision ID fc1c9ff7c1b2defdbc039f12214767608f46423f for hacking purpose.

 /* -*- Mode: Javascript; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
 /* vim: set ft=javascript ts=2 et sw=2 tw=80: */
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 "use strict";
 const {classes: Cc, interfaces: Ci, utils: Cu} = Components;
 const DOMUtils = Cc["@mozilla.org/inspector/dom-utils;1"].getService(Ci.inIDOMUtils);
 function FontInspector(inspector, window)
 {
   this.inspector = inspector;
   this.chromeDoc = window.document;
   this.init();
 }
 FontInspector.prototype = {
   init: function FI_init() {
     this.update = this.update.bind(this);
     this.onNewNode = this.onNewNode.bind(this);
     this.inspector.selection.on("new-node", this.onNewNode);
     this.inspector.sidebar.on("fontinspector-selected", this.onNewNode);
     this.showAll = this.showAll.bind(this);
     this.showAllButton = this.chromeDoc.getElementById("showall");
     this.showAllButton.addEventListener("click", this.showAll);
     this.update();
   },
   /**
    * Is the fontinspector visible in the sidebar?
    */
   isActive: function FI_isActive() {
     return this.inspector.sidebar &&
            this.inspector.sidebar.getCurrentTabID() == "fontinspector";
   },
   /**
    * Remove listeners.
    */
   destroy: function FI_destroy() {
     this.chromeDoc = null;
     this.inspector.sidebar.off("layoutview-selected", this.onNewNode);
     this.inspector.selection.off("new-node", this.onNewNode);
     this.showAllButton.removeEventListener("click", this.showAll);
   },
   /**
    * Selection 'new-node' event handler.
    */
   onNewNode: function FI_onNewNode() {
     if (this.isActive() &&
         this.inspector.selection.isLocal() &&
         this.inspector.selection.isConnected() &&
         this.inspector.selection.isElementNode()) {
       this.undim();
       this.update();
     } else {
       this.dim();
     }
   },
   /**
    * Hide the font list. No node are selected.
    */
   dim: function FI_dim() {
     this.chromeDoc.body.classList.add("dim");
     this.chromeDoc.querySelector("#all-fonts").innerHTML = "";
   },
   /**
    * Show the font list. A node is selected.
    */
   undim: function FI_undim() {
     this.chromeDoc.body.classList.remove("dim");
   },
   /**
    * Retrieve all the font related info we have for the selected
    * node and display them.
    */
   update: function FI_update() {
     if (!this.isActive() ||
         !this.inspector.selection.isConnected() ||
         !this.inspector.selection.isElementNode() ||
         this.chromeDoc.body.classList.contains("dim")) {
       return;
     }
     let node = this.inspector.selection.node;
     let contentDocument = node.ownerDocument;
     // We don't get fonts for a node, but for a range
     let rng = contentDocument.createRange();
     rng.selectNode(node);
     let fonts = DOMUtils.getUsedFontFaces(rng);
     let fontsArray = [];
     for (let i = 0; i < fonts.length; i++) {
       fontsArray.push(fonts.item(i));
     }
     fontsArray = fontsArray.sort(function(a, b) {
       return a.srcIndex < b.srcIndex;
     });
     this.chromeDoc.querySelector("#all-fonts").innerHTML = "";
     for (let f of fontsArray) {
       this.render(f, contentDocument);
     }
   },
   /**
    * Display the information of one font.
    */
   render: function FI_render(font, document) {
     let s = this.chromeDoc.querySelector("#template > section");
     s = s.cloneNode(true);
     s.querySelector(".font-name").textContent = font.name;
     s.querySelector(".font-css-name").textContent = font.CSSFamilyName;
     s.querySelector(".font-format").textContent = font.format;
     if (font.srcIndex == -1) {
       s.classList.add("is-local");
     } else {
       s.classList.add("is-remote");
     }
     s.querySelector(".font-url").value = font.URI;
     let iframe = s.querySelector(".font-preview");
     if (font.rule) {
       // This is the @font-face{…} code.
       let cssText = font.rule.style.parentRule.cssText;
       s.classList.add("has-code");
       s.querySelector(".font-css-code").textContent = cssText;
       // We guess the base URL of the stylesheet to make
       // sure the font will be accessible in the preview.
       // If the font-face is in an inline <style>, we get
       // the location of the page.
       let origin = font.rule.style.parentRule.parentStyleSheet.href;
       if (!origin) { // Inline stylesheet
         origin = document.location.href;
       }
       // We remove the last part of the URL to get a correct base.
       let base = origin.replace(/\/[^\/]*$/,"/")
       // From all this information, we build a preview.
       this.buildPreview(iframe, font.CSSFamilyName, cssText, base);
     } else {
       this.buildPreview(iframe, font.CSSFamilyName, "", "");
     }
     this.chromeDoc.querySelector("#all-fonts").appendChild(s);
   },
   /**
    * Show a preview of the font in an iframe.
    */
   buildPreview: function FI_buildPreview(iframe, name, cssCode, base) {
     /* The HTML code of the preview is:
      *   <!DOCTYPE HTML>
      *   <head>
      *    <base href="{base}"></base>
      *   </head>
      *   <style>
      *   p {font-family: {name};}
      *   * {font-size: 40px;line-height:60px;padding:0 10px;margin:0};
      *   </style>
      *   <p contenteditable spellcheck='false'>Abc</p>
      */
     let extraCSS = "* {padding:0;margin:0}";
     extraCSS += ".theme-dark {color: white}";
     extraCSS += "p {font-size: 40px;line-height:60px;padding:0 10px;margin:0;}";
     cssCode += extraCSS;
     let src = "data:text/html;charset=utf-8,<!DOCTYPE HTML><head><base></base></head><style></style><p contenteditable spellcheck='false'>Abc</p>";
     iframe.addEventListener("load", function onload() {
       iframe.removeEventListener("load", onload, true);
       let doc = iframe.contentWindow.document;
       // We could have done that earlier, but we want to avoid any URL-encoding
       // nightmare.
       doc.querySelector("base").href = base;
       doc.querySelector("style").textContent = cssCode;
       doc.querySelector("p").style.fontFamily = name;
       // Forward theme
       doc.documentElement.className = document.documentElement.className;
     }, true);
     iframe.src = src;
   },
   /**
    * Select the <body> to show all the fonts included in the document.
    */
   showAll: function FI_showAll() {
     if (!this.isActive() ||
         !this.inspector.selection.isConnected() ||
         !this.inspector.selection.isElementNode()) {
       return;
     }
     // Select the body node to show all fonts
     let walker = this.inspector.walker;
     walker.getRootNode().then(root => walker.querySelector(root, "body")).then(body => {
       this.inspector.selection.setNodeFront(body, "fontinspector");
     });
   },
 }
 window.setPanel = function(panel) {
   window.fontInspector = new FontInspector(panel, window);
 }
 window.onunload = function() {
   if (window.fontInspector) {
     window.fontInspector.destroy();
   }
 }