Backed out changeset 53a3726088f5 (bug 1464336) for failures on /inspector/fonts/test/browser_fontinspector_reveal-in-page.js on a CLOSED TREE

devtools/client/inspector/fonts/components/FontMeta.js

@@ -85,33 +85,30 @@ class FontMeta extends PureComponent {
     );
   }
 
-  renderFontName(name, family) {
-    let options = {};
-
+  renderFontName(name) {
     if (Services.prefs.getBoolPref(FONT_HIGHLIGHTER_PREF)) {
-      options = {
-        onMouseOver: this.onNameMouseOver,
-        onMouseOut: this.onNameMouseOut,
-      };
+      return dom.h1(
+        {
+          className: "font-name",
+          onMouseOver: this.onNameMouseOver,
+          onMouseOut: this.onNameMouseOut,
+        },
+        name
+      );
     }
 
-    return dom.div(
-      options,
-      dom.div({ className: "font-family-name" }, family),
-      dom.div({ className: "font-name" }, name)
-    );
+    return dom.h1({ className: "font-name" }, name);
   }
 
   render() {
     const {
-      CSSFamilyName,
       name,
       URI,
     } = this.props.font;
 
     return createElement(Fragment,
       null,
-      this.renderFontName(name, CSSFamilyName),
+      this.renderFontName(name),
       this.renderFontOrigin(URI)
     );
   }

devtools/client/inspector/fonts/test/browser_fontinspector.js

@@ -10,22 +10,22 @@ const FONTS = [{
   name: "Ostrich Sans Medium",
   remote: true,
   url: URL_ROOT + "ostrich-regular.ttf",
-  familyName: "bar"
+  cssName: "bar"
 }, {
   name: "Ostrich Sans Black",
   remote: true,
   url: URL_ROOT + "ostrich-black.ttf",
-  familyName: "bar"
+  cssName: "bar"
 }, {
   name: "Ostrich Sans Black",
   remote: true,
   url: URL_ROOT + "ostrich-black.ttf",
-  familyName: "bar"
+  cssName: "bar"
 }, {
   name: "Ostrich Sans Medium",
   remote: true,
   url: URL_ROOT + "ostrich-regular.ttf",
-  familyName: "barnormal"
+  cssName: "barnormal"
 }];
 
 add_task(async function() {
@@ -51,8 +51,6 @@ function testBodyFonts(inspector, viewDoc) {
     let font = FONTS[i];
 
     is(getName(li), font.name, `font ${i} right font name`);
-    /* global getFamilyName */
-    is(getFamilyName(li), font.familyName, `font ${i} right family name`);
     is(isRemote(li), font.remote, `font ${i} remote value correct`);
     is(li.querySelector(".font-origin").textContent, font.url, `font ${i} url correct`);
   }

devtools/client/inspector/fonts/test/head.js

@@ -139,15 +139,3 @@ function getOtherFontsEls(viewDoc) {
 function getName(fontEl) {
   return fontEl.querySelector(".font-name").textContent;
 }
-
-/**
- * Given a font element, return its family name.
- *
- * @param  {DOMNode} fontEl
- *         The font element.
- * @return {String}
- *         The name of the font family as shown in the UI.
- */
-function getFamilyName(fontEl) {
-  return fontEl.querySelector(".font-family-name").textContent;
-}

devtools/client/inspector/fonts/types.js

@@ -49,9 +49,6 @@ const fontVariationInstance = exports.fontVariationInstance = {
  * A single font.
  */
 const font = exports.font = {
-  // Font family name
-  CSSFamilyName: PropTypes.string,
-
   // The format of the font
   format: PropTypes.string,
 

devtools/client/themes/fonts.css

@@ -28,7 +28,6 @@
   grid-template-columns: 1fr auto;
   grid-column-gap: 10px;
   padding: 10px 20px;
-  overflow: auto;
 }
 
 #font-container .theme-twisty {
@@ -77,23 +76,13 @@
   color: transparent;
 }
 
-.font-name,
-.font-family-name {
+.font-name {
+  margin: 0;
+  font-size: 1.2em;
   font-weight: normal;
   white-space: nowrap;
 }
 
-.font-name {
-  margin-bottom: 0.6em;
-  font-size: 1em;
-  color: var(--grey-50);
-}
-
-.font-family-name {
-  margin-bottom: 0.2em;
-  font-size: 1.2em;
-}
-
 .font-css-code {
   direction: ltr;
   margin: 0;