Bug 1287422 - Don't overlap font-showall button and scrollbar in the Font Inspector. r=ntim
MozReview-Commit-ID: ANNw9BlrxFj
--- a/devtools/client/inspector/fonts/fonts.js
+++ b/devtools/client/inspector/fonts/fonts.js
@@ -24,18 +24,18 @@ function FontInspector(inspector, window
FontInspector.prototype = {
init: function () {
this.update = this.update.bind(this);
this.onNewNode = this.onNewNode.bind(this);
this.onThemeChanged = this.onThemeChanged.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("font-showall");
- this.showAllButton.addEventListener("click", this.showAll);
+ this.showAllLink = this.chromeDoc.getElementById("font-showall");
+ this.showAllLink.addEventListener("click", this.showAll);
this.previewTextChanged = this.previewTextChanged.bind(this);
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
gDevTools.on("theme-switched", this.onThemeChanged);
@@ -52,17 +52,17 @@ FontInspector.prototype = {
/**
* Remove listeners.
*/
destroy: function () {
this.chromeDoc = null;
this.inspector.sidebar.off("fontinspector-selected", this.onNewNode);
this.inspector.selection.off("new-node", this.onNewNode);
- this.showAllButton.removeEventListener("click", this.showAll);
+ this.showAllLink.removeEventListener("click", this.showAll);
this.previewInput.removeEventListener("input", this.previewTextChanged);
gDevTools.off("theme-switched", this.onThemeChanged);
if (this._previewUpdateTimeout) {
clearTimeout(this._previewUpdateTimeout);
}
},
--- a/devtools/client/inspector/inspector.xul
+++ b/devtools/client/inspector/inspector.xul
@@ -179,21 +179,21 @@
<html:div id="sidebar-panel-fontinspector" class="devtools-monospace theme-sidebar inspector-tabpanel">
<html:div class="devtools-toolbar">
<html:div class="devtools-searchbox">
<html:input id="font-preview-text-input"
class="devtools-textinput"
type="search"
placeholder="&previewHint;"/>
</html:div>
+ <html:label id="font-showall" class="theme-link" title="&showAllFonts;">&showAllFontsUsed;</html:label>
</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">
--- a/devtools/client/locales/en-US/font-inspector.dtd
+++ b/devtools/client/locales/en-US/font-inspector.dtd
@@ -1,15 +1,16 @@
<!-- 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/. -->
<!-- LOCALIZATION NOTE : FILE This file contains the Font Inspector strings.
- The Font Inspector is the panel accessible in the Inspector sidebar. -->
<!ENTITY showAllFonts "See all the fonts used in the page">
+<!ENTITY showAllFontsUsed "Show all fonts used">
<!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">
--- a/devtools/client/themes/fonts.css
+++ b/devtools/client/themes/fonts.css
@@ -21,23 +21,21 @@
}
#all-fonts {
padding: 0;
margin: 0;
}
#font-showall {
- border-radius: 0;
- border: 1px solid black;
- margin: 3px;
cursor: pointer;
- position: absolute;
- bottom: 0;
- offset-inline-end: 0;
+}
+
+#font-showall:hover {
+ text-decoration: underline;
}
.dim > #font-container,
.font:not(.has-code) .font-css-code,
.font-is-local,
.font-is-remote,
.font.is-local .font-format-url,
#font-template {