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.
54 lines
2.1 KiB
HTML
54 lines
2.1 KiB
HTML
<!-- 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/. -->
|
|
|
|
<!DOCTYPE html [
|
|
<!ENTITY % fontinspectorDTD SYSTEM "chrome://browser/locale/devtools/font-inspector.dtd" >
|
|
%fontinspectorDTD;
|
|
]>
|
|
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<title>&title;</title>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
|
|
<link rel="stylesheet" href="font-inspector.css" type="text/css"/>
|
|
<link rel="stylesheet" href="chrome://browser/skin/devtools/common.css" type="text/css"/>
|
|
<link rel="stylesheet" href="chrome://browser/skin/devtools/font-inspector.css" type="text/css"/>
|
|
<script type="application/javascript;version=1.8" src="chrome://browser/content/devtools/theme-switching.js"/>
|
|
</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">
|
|
<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>
|
|
<span class="font-is-remote">&remote;</span>
|
|
<p class="font-format-url">
|
|
<input readonly="readonly" class="font-url"></input>
|
|
<span class="font-format"></span>
|
|
</p>
|
|
<p class="font-css">&usedAs; "<span class="font-css-name"></span>"</p>
|
|
<pre class="font-css-code"></pre>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</body>
|
|
</html>
|