Bug 1287422 - Don't overlap font-showall button and scrollbar in the Font Inspector. r=ntim draft
authorSteve Chung <schung@mozilla.com>
Mon, 25 Jul 2016 15:57:24 +0800
changeset 394205 7cbd4554cb89d4a5f21a3ff366cab4b9fa593d99
parent 393078 462dc6b44adb4573e8ce6b0dd688c206ebd516f7
child 526759 d468392d027f05d92524662867bdbe48fc769e0e
push id24517
push userschung@mozilla.com
push dateFri, 29 Jul 2016 07:52:58 +0000
reviewersntim
bugs1287422
milestone50.0a1
Bug 1287422 - Don't overlap font-showall button and scrollbar in the Font Inspector. r=ntim MozReview-Commit-ID: ANNw9BlrxFj
devtools/client/inspector/fonts/fonts.js
devtools/client/inspector/inspector.xul
devtools/client/locales/en-US/font-inspector.dtd
devtools/client/themes/fonts.css
--- 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 {