Bug 1158634 - Restore support for editing previews in Font Inspector. r=pbrosset

An input box similar to those in rule and computed views (without the search
symbol) is added to the font-inspector panel which can be used to control the
preview text. The updates are throttled to avoid unnecessary updates while the
text is being edited.

Since the PageStyleActor has allowed clients to define the preview text for a
while now, this feature is also enabled for older targets too.

browser/devtools/fontinspector/font-inspector.css

@@ -23,3 +23,29 @@
 .font-format::after {
   content: ")";
 }
+
+.preview-input-toolbar {
+  display: -moz-box;
+  width: 100%;
+}
+
+.font-preview-container {
+  overflow-x: auto;
+}
+
+#preview-text-input {
+  font: inherit;
+  margin-top: 1px;
+  margin-bottom: 1px;
+  padding-top: 0;
+  padding-bottom: 0;
+  -moz-box-flex: 1;
+}
+
+:root {
+  height: 100%;
+}
+
+#root {
+  overflow: auto;
+}

browser/devtools/fontinspector/font-inspector.js

@@ -7,6 +7,8 @@
 "use strict";
 
 const { utils: Cu } = Components;
+const DEFAULT_PREVIEW_TEXT = "Abc";
+const PREVIEW_UPDATE_DELAY = 150;
 
 Cu.import("resource://gre/modules/XPCOMUtils.jsm");
 XPCOMUtils.defineLazyModuleGetter(this, "Task",
@@ -31,6 +33,9 @@ FontInspector.prototype = {
     this.showAll = this.showAll.bind(this);
     this.showAllButton = this.chromeDoc.getElementById("showall");
     this.showAllButton.addEventListener("click", this.showAll);
+    this.previewTextChanged = this.previewTextChanged.bind(this);
+    this.previewInput = this.chromeDoc.getElementById("preview-text-input");
+    this.previewInput.addEventListener("input", this.previewTextChanged);
     this.update();
   },
 
@@ -50,6 +55,11 @@ FontInspector.prototype = {
     this.inspector.sidebar.off("fontinspector-selected", this.onNewNode);
     this.inspector.selection.off("new-node", this.onNewNode);
     this.showAllButton.removeEventListener("click", this.showAll);
+    this.previewInput.removeEventListener("input", this.previewTextChanged);
+
+    if (this._previewUpdateTimeout) {
+      clearTimeout(this._previewUpdateTimeout);
+    }
   },
 
   /**
@@ -66,12 +76,39 @@ FontInspector.prototype = {
     }
   },
 
+  /**
+   * The text to use for previews. Returns either the value user has typed to
+   * the preview input or DEFAULT_PREVIEW_TEXT if the input is empty or contains
+   * only whitespace.
+   */
+  getPreviewText: function() {
+    let inputText = this.previewInput.value.trim();
+    if (inputText === "") {
+      return DEFAULT_PREVIEW_TEXT;
+    }
+
+    return inputText;
+  },
+
+  /**
+   * Preview input 'input' event handler.
+   */
+  previewTextChanged: function() {
+    if (this._previewUpdateTimeout) {
+      clearTimeout(this._previewUpdateTimeout);
+    }
+
+    this._previewUpdateTimeout = setTimeout(() => {
+      this.update(this._lastUpdateShowedAllFonts);
+    }, PREVIEW_UPDATE_DELAY);
+  },
+
   /**
    * Hide the font list. No node are selected.
    */
   dim: function() {
     this.chromeDoc.body.classList.add("dim");
-    this.chromeDoc.querySelector("#all-fonts").innerHTML = "";
+    this.clear();
   },
 
   /**
@@ -81,6 +118,13 @@ FontInspector.prototype = {
     this.chromeDoc.body.classList.remove("dim");
   },
 
+  /**
+   * Clears the font list.
+   */
+  clear: function() {
+    this.chromeDoc.querySelector("#all-fonts").innerHTML = "";
+  },
+
  /**
   * Retrieve all the font info for the selected node and display it.
   */
@@ -95,13 +139,15 @@ FontInspector.prototype = {
       return;
     }
 
-    this.chromeDoc.querySelector("#all-fonts").innerHTML = "";
+    this._lastUpdateShowedAllFonts = showAllFonts;
 
     // Assume light theme colors as the default (see also bug 1118179).
     let fillStyle = (Services.prefs.getCharPref("devtools.theme") == "dark") ?
         "white" : "black";
+
     let options = {
       includePreviews: true,
+      previewText: this.getPreviewText(),
       previewFillStyle: fillStyle
     };
 
@@ -115,6 +161,8 @@ FontInspector.prototype = {
     }
 
     if (!fonts || !fonts.length) {
+      // No fonts to display. Clear the previously shown fonts.
+      this.clear();
       return;
     }
 
@@ -127,8 +175,8 @@ FontInspector.prototype = {
       return;
     }
 
-    // clear again in case an update got in right before us
-    this.chromeDoc.querySelector("#all-fonts").innerHTML = "";
+    // Make room for the new fonts.
+    this.clear();
 
     for (let font of fonts) {
       this.render(font);

browser/devtools/fontinspector/font-inspector.xhtml

@@ -18,13 +18,24 @@
   </head>
   <body class="theme-sidebar devtools-monospace" role="application">
     <script type="application/javascript;version=1.8" src="font-inspector.js"></script>
+    <div>
+      <div class="devtools-toolbar preview-input-toolbar">
+        <div class="devtools-searchbox">
+          <input id="preview-text-input"
+                 class="devtools-textinput"
+                 placeholder="&previewHint;"/>
+        </div>
+      </div>
+    </div>
     <div id="root">
       <ul id="all-fonts"></ul>
       <button id="showall">&showAllFonts;</button>
     </div>
     <div id="template">
       <section class="font">
-        <img class="font-preview"></img>
+        <div class="font-preview-container">
+          <img class="font-preview"></img>
+        </div>
         <div class="font-info">
           <h1 class="font-name"></h1>
           <span class="font-is-local">&system;</span>

browser/locales/en-US/chrome/browser/devtools/font-inspector.dtd

@@ -10,3 +10,7 @@
 <!ENTITY usedAs "Used as: ">
 <!ENTITY system "system">
 <!ENTITY remote "remote">
+
+<!-- LOCALIZATION NOTE (previewHint): This is the label shown as the
+     placeholder in font inspector preview text box. -->
+<!ENTITY previewHint "Preview Text">

browser/themes/shared/devtools/font-inspector.css

@@ -3,6 +3,9 @@
 }
 
 body {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
   margin: 0;
   padding-bottom: 20px;
 }