зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1238133 - Part 5: Make the font inspector live inside the inspector panel frame r=bgrins
This commit is contained in:
Gabriel Luong
Родитель
f5172856d6
Коммит
0529e8a060
|
|
@ -6,7 +6,10 @@
|
|||
|
||||
"use strict";
|
||||
|
||||
var { utils: Cu } = Components;
|
||||
const {Cu} = require("chrome");
|
||||
const {setTimeout, clearTimeout} =
|
||||
Cu.import("resource://gre/modules/Timer.jsm", {});
|
||||
|
||||
const DEFAULT_PREVIEW_TEXT = "Abc";
|
||||
const PREVIEW_UPDATE_DELAY = 150;
|
||||
|
||||
|
|
@ -16,8 +19,7 @@ XPCOMUtils.defineLazyModuleGetter(this, "Task",
|
|||
XPCOMUtils.defineLazyModuleGetter(this, "console",
|
||||
"resource://gre/modules/Console.jsm");
|
||||
|
||||
function FontInspector(inspector, window)
|
||||
{
|
||||
function FontInspector(inspector, window) {
|
||||
this.inspector = inspector;
|
||||
this.pageStyle = this.inspector.pageStyle;
|
||||
this.chromeDoc = window.document;
|
||||
|
|
@ -32,10 +34,11 @@ FontInspector.prototype = {
|
|||
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 = this.chromeDoc.getElementById("font-showall");
|
||||
this.showAllButton.addEventListener("click", this.showAll);
|
||||
this.previewTextChanged = this.previewTextChanged.bind(this);
|
||||
this.previewInput = this.chromeDoc.getElementById("preview-text-input");
|
||||
this.previewInput =
|
||||
this.chromeDoc.getElementById("font-preview-text-input");
|
||||
this.previewInput.addEventListener("input", this.previewTextChanged);
|
||||
|
||||
// Listen for theme changes as the color of the previews depend on the theme
|
||||
|
|
@ -123,7 +126,8 @@ FontInspector.prototype = {
|
|||
* Hide the font list. No node are selected.
|
||||
*/
|
||||
dim: function() {
|
||||
this.chromeDoc.body.classList.add("dim");
|
||||
let panel = this.chromeDoc.getElementById("sidebar-panel-fontinspector");
|
||||
panel.classList.add("dim");
|
||||
this.clear();
|
||||
},
|
||||
|
||||
|
|
@ -131,7 +135,8 @@ FontInspector.prototype = {
|
|||
* Show the font list. A node is selected.
|
||||
*/
|
||||
undim: function() {
|
||||
this.chromeDoc.body.classList.remove("dim");
|
||||
let panel = this.chromeDoc.getElementById("sidebar-panel-fontinspector");
|
||||
panel.classList.remove("dim");
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
@ -146,12 +151,13 @@ FontInspector.prototype = {
|
|||
*/
|
||||
update: Task.async(function*(showAllFonts) {
|
||||
let node = this.inspector.selection.nodeFront;
|
||||
let panel = this.chromeDoc.getElementById("sidebar-panel-fontinspector");
|
||||
|
||||
if (!node ||
|
||||
!this.isActive() ||
|
||||
!this.inspector.selection.isConnected() ||
|
||||
!this.inspector.selection.isElementNode() ||
|
||||
this.chromeDoc.body.classList.contains("dim")) {
|
||||
panel.classList.contains("dim")) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -205,7 +211,7 @@ FontInspector.prototype = {
|
|||
* Display the information of one font.
|
||||
*/
|
||||
render: function(font) {
|
||||
let s = this.chromeDoc.querySelector("#template > section");
|
||||
let s = this.chromeDoc.querySelector("#font-template > section");
|
||||
s = s.cloneNode(true);
|
||||
|
||||
s.querySelector(".font-name").textContent = font.name;
|
||||
|
|
@ -247,12 +253,4 @@ FontInspector.prototype = {
|
|||
},
|
||||
};
|
||||
|
||||
window.setPanel = function(panel) {
|
||||
window.fontInspector = new FontInspector(panel, window);
|
||||
};
|
||||
|
||||
window.onunload = function() {
|
||||
if (window.fontInspector) {
|
||||
window.fontInspector.destroy();
|
||||
}
|
||||
};
|
||||
exports.FontInspector = FontInspector;
|
||||
|
|
|
|||
|
|
@ -1,52 +0,0 @@
|
|||
<!-- 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://devtools/locale/font-inspector.dtd" >
|
||||
%fontinspectorDTD;
|
||||
]>
|
||||
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>&fontInspectorTitle;</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
|
||||
<link rel="stylesheet" href="chrome://devtools/skin/common.css" type="text/css"/>
|
||||
<link rel="stylesheet" href="chrome://devtools/skin/fonts.css" type="text/css"/>
|
||||
<script type="application/javascript;version=1.8" src="chrome://devtools/content/shared/theme-switching.js"/>
|
||||
</head>
|
||||
<body class="theme-sidebar devtools-monospace" role="application">
|
||||
<script type="application/javascript;version=1.8" src="fonts.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>
|
||||
|
|
@ -82,7 +82,7 @@ function* testShowAllFonts(inspector, viewDoc) {
|
|||
info("testing showing all fonts");
|
||||
|
||||
let updated = inspector.once("fontinspector-updated");
|
||||
viewDoc.querySelector("#showall").click();
|
||||
viewDoc.querySelector("#font-showall").click();
|
||||
yield updated;
|
||||
|
||||
// shouldn't change the node selection
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ add_task(function*() {
|
|||
let onUpdated = inspector.once("fontinspector-updated");
|
||||
|
||||
info("Clicking 'Select all' button.");
|
||||
viewDoc.getElementById("showall").click();
|
||||
viewDoc.getElementById("font-showall").click();
|
||||
|
||||
info("Waiting for font-inspector to update.");
|
||||
yield onUpdated;
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@ function* updatePreviewText(view, text) {
|
|||
info(`Changing the preview text to '${text}'`);
|
||||
|
||||
let doc = view.chromeDoc;
|
||||
let input = doc.getElementById("preview-text-input");
|
||||
let input = doc.getElementById("font-preview-text-input");
|
||||
let update = view.inspector.once("fontinspector-updated");
|
||||
|
||||
info("Focusing the input field.");
|
||||
|
|
|
|||
|
|
@ -23,6 +23,7 @@ loader.lazyGetter(this, "ToolSidebar", () => require("devtools/client/framework/
|
|||
loader.lazyGetter(this, "InspectorSearch", () => require("devtools/client/inspector/inspector-search").InspectorSearch);
|
||||
loader.lazyGetter(this, "RuleViewTool", () => require("devtools/client/inspector/rules/rules").RuleViewTool);
|
||||
loader.lazyGetter(this, "ComputedViewTool", () => require("devtools/client/inspector/computed/computed").ComputedViewTool);
|
||||
loader.lazyGetter(this, "FontInspector", () => require("devtools/client/inspector/fonts/fonts").FontInspector);
|
||||
|
||||
loader.lazyGetter(this, "strings", () => {
|
||||
return Services.strings.createBundle("chrome://devtools/locale/inspector.properties");
|
||||
|
|
@ -359,10 +360,10 @@ InspectorPanel.prototype = {
|
|||
this.ruleview = new RuleViewTool(this, this.panelWin);
|
||||
this.computedview = new ComputedViewTool(this, this.panelWin);
|
||||
|
||||
if (Services.prefs.getBoolPref("devtools.fontinspector.enabled") && this.canGetUsedFontFaces) {
|
||||
this.sidebar.addTab("fontinspector",
|
||||
"chrome://devtools/content/inspector/fonts/fonts.xhtml",
|
||||
"fontinspector" == defaultTab);
|
||||
if (Services.prefs.getBoolPref("devtools.fontinspector.enabled") &&
|
||||
this.canGetUsedFontFaces) {
|
||||
this.fontInspector = new FontInspector(this, this.panelWin);
|
||||
this.panelDoc.getElementById("sidebar-tab-fontinspector").hidden = false;
|
||||
}
|
||||
|
||||
this.sidebar.addTab("layoutview",
|
||||
|
|
@ -593,6 +594,10 @@ InspectorPanel.prototype = {
|
|||
this.computedview.destroy();
|
||||
}
|
||||
|
||||
if (this.fontInspector) {
|
||||
this.fontInspector.destroy();
|
||||
}
|
||||
|
||||
this.sidebar.off("select", this._setDefaultSidebar);
|
||||
let sidebarDestroyer = this.sidebar.destroy();
|
||||
this.sidebar = null;
|
||||
|
|
|
|||
|
|
@ -10,10 +10,12 @@
|
|||
<?xml-stylesheet href="chrome://devtools/skin/inspector.css" type="text/css"?>
|
||||
<?xml-stylesheet href="chrome://devtools/skin/rules.css" type="text/css"?>
|
||||
<?xml-stylesheet href="chrome://devtools/skin/computed.css" type="text/css"?>
|
||||
<?xml-stylesheet href="chrome://devtools/skin/fonts.css" type="text/css"?>
|
||||
|
||||
<!DOCTYPE window [
|
||||
<!ENTITY % inspectorDTD SYSTEM "chrome://devtools/locale/inspector.dtd"> %inspectorDTD;
|
||||
<!ENTITY % styleinspectorDTD SYSTEM "chrome://devtools/locale/styleinspector.dtd"> %styleinspectorDTD;
|
||||
<!ENTITY % fontinspectorDTD SYSTEM "chrome://devtools/locale/font-inspector.dtd"> %fontinspectorDTD;
|
||||
]>
|
||||
|
||||
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
|
||||
|
|
@ -180,6 +182,10 @@
|
|||
<tab id="sidebar-tab-computedview"
|
||||
label="&computedViewTitle;"
|
||||
crop="end"/>
|
||||
<tab id="sidebar-tab-fontinspector"
|
||||
label="&fontInspectorTitle;"
|
||||
crop="end"
|
||||
hidden="true"/>
|
||||
</tabs>
|
||||
<tabpanels flex="1">
|
||||
<tabpanel id="sidebar-panel-ruleview" class="devtools-monospace theme-sidebar">
|
||||
|
|
@ -226,6 +232,41 @@
|
|||
&noPropertiesFound;
|
||||
</html:div>
|
||||
</tabpanel>
|
||||
|
||||
<tabpanel id="sidebar-panel-fontinspector" class="devtools-monospace theme-sidebar">
|
||||
<html:div class="devtools-toolbar devtools-sidebar-toolbar">
|
||||
<html:div class="devtools-searchbox">
|
||||
<html:input id="font-preview-text-input"
|
||||
class="devtools-textinput"
|
||||
type="search"
|
||||
placeholder="&previewHint;"/>
|
||||
</html:div>
|
||||
</html:div>
|
||||
|
||||
<html:div id="font-container">
|
||||
<html:ul id="all-fonts"></html:ul>
|
||||
<html:button id="font-showall">&showAllFonts;</html:button>
|
||||
</html:div>
|
||||
|
||||
<html:div id="font-template">
|
||||
<html:section class="font">
|
||||
<html:div class="font-preview-container">
|
||||
<html:img class="font-preview"></html:img>
|
||||
</html:div>
|
||||
<html:div class="font-info">
|
||||
<html:h1 class="font-name"></html:h1>
|
||||
<html:span class="font-is-local">&system;</html:span>
|
||||
<html:span class="font-is-remote">&remote;</html:span>
|
||||
<html:p class="font-format-url">
|
||||
<html:input readonly="readonly" class="font-url"></html:input>
|
||||
<html:span class="font-format"></html:span>
|
||||
</html:p>
|
||||
<html:p class="font-css">&usedAs; "<html:span class="font-css-name"></html:span>"</html:p>
|
||||
<html:pre class="font-css-code"></html:pre>
|
||||
</html:div>
|
||||
</html:section>
|
||||
</html:div>
|
||||
</tabpanel>
|
||||
</tabpanels>
|
||||
</tabbox>
|
||||
</box>
|
||||
|
|
|
|||
|
|
@ -27,7 +27,6 @@ devtools.jar:
|
|||
content/styleeditor/styleeditor.css (styleeditor/styleeditor.css)
|
||||
content/storage/storage.xul (storage/storage.xul)
|
||||
content/inspector/fonts/fonts.js (inspector/fonts/fonts.js)
|
||||
content/inspector/fonts/fonts.xhtml (inspector/fonts/fonts.xhtml)
|
||||
content/inspector/layout/layout.js (inspector/layout/layout.js)
|
||||
content/inspector/layout/layout.xhtml (inspector/layout/layout.xhtml)
|
||||
content/inspector/markup/markup.xhtml (inspector/markup/markup.xhtml)
|
||||
|
|
|
|||
|
|
@ -2,24 +2,19 @@
|
|||
* 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/. */
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
#sidebar-panel-fontinspector {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding-bottom: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#root {
|
||||
#font-container {
|
||||
overflow: auto;
|
||||
flex: auto;
|
||||
height: 0px;
|
||||
}
|
||||
|
||||
#all-fonts {
|
||||
|
|
@ -27,7 +22,7 @@ body {
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
#showall {
|
||||
#font-showall {
|
||||
border-radius: 0;
|
||||
border: 1px solid black;
|
||||
margin: 3px;
|
||||
|
|
@ -37,12 +32,12 @@ body {
|
|||
right: 0;
|
||||
}
|
||||
|
||||
.dim > #root,
|
||||
.dim > #font-container,
|
||||
.font:not(.has-code) .font-css-code,
|
||||
.font-is-local,
|
||||
.font-is-remote,
|
||||
.font.is-local .font-format-url,
|
||||
#template {
|
||||
#font-template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
@ -68,7 +63,7 @@ body {
|
|||
overflow-x: auto;
|
||||
}
|
||||
|
||||
#preview-text-input {
|
||||
#font-preview-text-input {
|
||||
font: inherit;
|
||||
margin-top: 1px;
|
||||
margin-bottom: 1px;
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче