--- a/devtools/client/inspector/fonts/test/browser_fontinspector.html
+++ b/devtools/client/inspector/fonts/test/browser_fontinspector.html
@@ -16,17 +16,18 @@
     src: url(ostrich-black.ttf);
   }
   @font-face {
     font-family: bar;
     font-weight: 800;
     src: url(ostrich-black.ttf);
   }
   body{
-    font-family:Arial;
+    /* Arial doesn't exist on Linux. Liberation Sans is the default sans-serif there. */
+    font-family:Arial, "Liberation Sans";
     font-size: 36px;
   }
   div {
     font-family:Arial;
     font-family:bar;
   }
   .normal-text {
     font-family: barnormal;

--- a/devtools/client/inspector/fonts/test/browser_fontinspector.js
+++ b/devtools/client/inspector/fonts/test/browser_fontinspector.js
@@ -1,81 +1,55 @@
 /* vim: set ts=2 et sw=2 tw=80: */
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
+/* global getURL */
 "use strict";
 
 requestLongerTimeout(2);
 
 const TEST_URI = URL_ROOT + "browser_fontinspector.html";
-const FONTS = [{
-  name: "Ostrich Sans Medium",
-  remote: true,
-  url: URL_ROOT + "ostrich-regular.ttf",
-  cssName: "bar"
-}, {
-  name: "Ostrich Sans Black",
-  remote: true,
-  url: URL_ROOT + "ostrich-black.ttf",
-  cssName: "bar"
-}, {
-  name: "Ostrich Sans Black",
-  remote: true,
-  url: URL_ROOT + "ostrich-black.ttf",
-  cssName: "bar"
-}, {
-  name: "Ostrich Sans Medium",
-  remote: true,
-  url: URL_ROOT + "ostrich-regular.ttf",
-  cssName: "barnormal"
-}];
 
 add_task(async function() {
+  await pushPref("devtools.inspector.fonteditor.enabled", true);
   const { inspector, view } = await openFontInspectorForURL(TEST_URI);
   ok(!!view, "Font inspector document is alive.");
 
   const viewDoc = view.document;
 
   await testBodyFonts(inspector, viewDoc);
   await testDivFonts(inspector, viewDoc);
 });
 
 function isRemote(fontLi) {
   return fontLi.querySelector(".font-origin").classList.contains("remote");
 }
 
-function testBodyFonts(inspector, viewDoc) {
-  const lis = getUsedFontsEls(viewDoc);
-  is(lis.length, 5, "Found 5 fonts");
-
-  for (let i = 0; i < FONTS.length; i++) {
-    const li = lis[i];
-    const font = FONTS[i];
+async function testBodyFonts(inspector, viewDoc) {
+  await selectNode("body", inspector);
 
-    is(getName(li), font.name, `font ${i} right font name`);
-    is(isRemote(li), font.remote, `font ${i} remote value correct`);
-    is(li.querySelector(".font-origin").textContent, font.url, `font ${i} url correct`);
-  }
-
-  // test that the bold and regular fonts have different previews
-  const regSrc = lis[0].querySelector(".font-preview").src;
-  const boldSrc = lis[1].querySelector(".font-preview").src;
-  isnot(regSrc, boldSrc, "preview for bold font is different from regular");
-
+  const lis = getUsedFontsEls(viewDoc);
   // test system font
-  const localFontName = getName(lis[4]);
-
+  const localFontName = getName(lis[0]);
   // On Linux test machines, the Arial font doesn't exist.
   // The fallback is "Liberation Sans"
+  is(lis.length, 1, "Found 1 font on BODY");
   ok((localFontName == "Arial") || (localFontName == "Liberation Sans"),
      "local font right font name");
-  ok(!isRemote(lis[4]), "local font is local");
+  ok(!isRemote(lis[0]), "local font is local");
 }
 
 async function testDivFonts(inspector, viewDoc) {
-  const updated = inspector.once("fontinspector-updated");
   await selectNode("div", inspector);
-  await updated;
+
+  const font = {
+    name: "Ostrich Sans Medium",
+    remote: true,
+    url: URL_ROOT + "ostrich-regular.ttf",
+  };
 
   const lis = getUsedFontsEls(viewDoc);
+  const li = lis[0];
   is(lis.length, 1, "Found 1 font on DIV");
-  is(getName(lis[0]), "Ostrich Sans Medium", "The DIV font has the right name");
+  is(getName(li), font.name, "The DIV font has the right name");
+  is(isRemote(li), font.remote, `font remote value correct`);
+  is(getURL(li), font.url, `font url correct`);
 }

--- a/devtools/client/inspector/fonts/test/browser_fontinspector_copy-URL.js
+++ b/devtools/client/inspector/fonts/test/browser_fontinspector_copy-URL.js
@@ -5,18 +5,20 @@
 "use strict";
 
 // Test that an icon appears next to web font URLs, and that clicking it copies the URL
 // to the clipboard thanks to it.
 
 const TEST_URI = URL_ROOT + "browser_fontinspector.html";
 
 add_task(async function() {
-  const { view } = await openFontInspectorForURL(TEST_URI);
+  await pushPref("devtools.inspector.fonteditor.enabled", true);
+  const { view, inspector } = await openFontInspectorForURL(TEST_URI);
   const viewDoc = view.document;
+  await selectNode("div", inspector);
 
   const fontEl = getUsedFontsEls(viewDoc)[0];
   const linkEl = fontEl.querySelector(".font-origin");
   const iconEl = linkEl.querySelector(".copy-icon");
 
   ok(iconEl, "The icon is displayed");
   is(iconEl.getAttribute("title"), "Copy URL", "This is the right icon");
 

--- a/devtools/client/inspector/fonts/test/browser_fontinspector_edit-previews.js
+++ b/devtools/client/inspector/fonts/test/browser_fontinspector_edit-previews.js
@@ -5,18 +5,21 @@
 
 // Test that previews change when the preview text changes. It doesn't check the
 // exact preview images because they are drawn on a canvas causing them to vary
 // between systems, platforms and software versions.
 
 const TEST_URI = URL_ROOT + "browser_fontinspector.html";
 
 add_task(async function() {
-  const {view} = await openFontInspectorForURL(TEST_URI);
+  await pushPref("devtools.inspector.fonteditor.enabled", true);
+  const { view, inspector } = await openFontInspectorForURL(TEST_URI);
   const viewDoc = view.document;
+  await selectNode("div", inspector);
+  await expandOtherFontsAccordion(viewDoc);
 
   const previews = viewDoc.querySelectorAll("#font-container .font-preview");
   const initialPreviews = [...previews].map(p => p.src);
 
   info("Typing 'Abc' to check that the reference previews are correct.");
   await updatePreviewText(view, "Abc");
   checkPreviewImages(viewDoc, initialPreviews, true);
 

--- a/devtools/client/inspector/fonts/test/browser_fontinspector_expand-css-code.js
+++ b/devtools/client/inspector/fonts/test/browser_fontinspector_expand-css-code.js
@@ -4,47 +4,51 @@
 
 "use strict";
 
 // Test that the font-face css rule code is collapsed by default, and can be expanded.
 
 const TEST_URI = URL_ROOT + "browser_fontinspector.html";
 
 add_task(async function() {
-  const { view } = await openFontInspectorForURL(TEST_URI);
+  await pushPref("devtools.inspector.fonteditor.enabled", true);
+  const { view, inspector } = await openFontInspectorForURL(TEST_URI);
   const viewDoc = view.document;
+  await selectNode("div", inspector);
 
+  await expandOtherFontsAccordion(viewDoc);
   info("Checking that the css font-face rule is collapsed by default");
-  let fontEl = getUsedFontsEls(viewDoc)[0];
+  let fontEl = getOtherFontsEls(viewDoc)[0];
   let codeEl = fontEl.querySelector(".font-css-code");
   is(codeEl.textContent, "@font-face {}", "The font-face rule is collapsed");
 
   info("Expanding the rule by clicking on the expander icon");
   let onExpanded = BrowserTestUtils.waitForCondition(() => {
     return codeEl.textContent === `@font-face {
   font-family: bar;
-  src: url("bad/font/name.ttf"), url("ostrich-regular.ttf") format("truetype");
+  src: url("ostrich-black.ttf");
+  font-weight: bold;
 }`;
   }, "Waiting for the font-face rule 1");
 
   let expander = fontEl.querySelector(".font-css-code .theme-twisty");
   expander.click();
   await onExpanded;
 
   ok(true, "Font-face rule is now expanded");
 
   info("Expanding another rule by clicking on the [...] icon instead");
-  fontEl = getUsedFontsEls(viewDoc)[1];
+  fontEl = getOtherFontsEls(viewDoc)[1];
   codeEl = fontEl.querySelector(".font-css-code");
 
   onExpanded = BrowserTestUtils.waitForCondition(() => {
     return codeEl.textContent === `@font-face {
   font-family: bar;
   src: url("ostrich-black.ttf");
-  font-weight: bold;
+  font-weight: 800;
 }`;
   }, "Waiting for the font-face rule 2");
 
   expander = fontEl.querySelector(".font-css-code .font-css-code-expander");
   expander.click();
   await onExpanded;
 
   ok(true, "Font-face rule is now expanded too");

--- a/devtools/client/inspector/fonts/test/browser_fontinspector_other-fonts.js
+++ b/devtools/client/inspector/fonts/test/browser_fontinspector_other-fonts.js
@@ -6,16 +6,17 @@
 // Check that the font inspector has a section for "other fonts" and that section contains
 // the fonts *not* used in the currently selected element.
 // Check that it's collapsed by default, but can be expanded. That it does not contain
 // the fonts listed in the previous section.
 
 const TEST_URI = URL_ROOT + "browser_fontinspector.html";
 
 add_task(async function() {
+  await pushPref("devtools.inspector.fonteditor.enabled", true);
   const { inspector, view } = await openFontInspectorForURL(TEST_URI);
   const viewDoc = view.document;
 
   const otherFontsAccordion = viewDoc.querySelector("#font-container .accordion");
   ok(otherFontsAccordion, "There's an accordion in the panel");
   is(otherFontsAccordion.textContent, "Other fonts in page", "It has the right title");
 
   await expandOtherFontsAccordion(viewDoc);

--- a/devtools/client/inspector/fonts/test/browser_fontinspector_reveal-in-page.js
+++ b/devtools/client/inspector/fonts/test/browser_fontinspector_reveal-in-page.js
@@ -3,16 +3,17 @@
    http://creativecommons.org/publicdomain/zero/1.0/ */
 "use strict";
 
 // Test that fonts usage can be revealed in the page using the FontsHighlighter.
 
 const TEST_URI = URL_ROOT + "browser_fontinspector.html";
 
 add_task(async function() {
+  await pushPref("devtools.inspector.fonteditor.enabled", true);
   // Enable the feature, since it's off by default for now.
   await pushPref("devtools.inspector.fonthighlighter.enabled", true);
 
   // Make sure the toolbox is tall enough to accomodate all fonts, otherwise mouseover
   // events simulation will fail.
   await pushPref("devtools.toolbox.footer.height", 500);
 
   const { tab, view } = await openFontInspectorForURL(TEST_URI);
@@ -35,17 +36,17 @@ add_task(async function() {
     let onEvents = waitForNSelectionEvents(tab, expectedSelectionChangeEvents[i]);
     EventUtils.synthesizeMouse(nameEl, 2, 2, {type: "mouseover"}, viewDoc.defaultView);
     await onEvents;
 
     ok(true,
       `${expectedSelectionChangeEvents[i]} selectionchange events detected on mouseover`);
 
     // Simulating a mouse out event on the font name and expecting a selectionchange.
-    const otherEl = fontEls[i].querySelector(".font-preview");
+    const otherEl = fontEls[i].querySelector(".font-origin");
     onEvents = waitForNSelectionEvents(tab, 1);
     EventUtils.synthesizeMouse(otherEl, 2, 2, {type: "mouseover"}, viewDoc.defaultView);
     await onEvents;
 
     ok(true, "1 selectionchange events detected on mouseout");
   }
 });
 

--- a/devtools/client/inspector/fonts/test/browser_fontinspector_theme-change.js
+++ b/devtools/client/inspector/fonts/test/browser_fontinspector_theme-change.js
@@ -13,33 +13,37 @@ const TEST_URI = URL_ROOT + "browser_fon
 const originalTheme = getTheme();
 
 registerCleanupFunction(() => {
   info(`Restoring theme to '${originalTheme}.`);
   setTheme(originalTheme);
 });
 
 add_task(async function() {
+  await pushPref("devtools.inspector.fonteditor.enabled", true);
   const { inspector, view } = await openFontInspectorForURL(TEST_URI);
-  const { document: doc } = view;
+  const viewDoc = view.document;
 
   await selectNode(".normal-text", inspector);
+  await expandOtherFontsAccordion(viewDoc);
+  const otherFontsEls = getOtherFontsEls(viewDoc);
+  const fontEl = otherFontsEls[0];
 
   // Store the original preview URI for later comparison.
-  const originalURI = doc.querySelector("#font-container .font-preview").src;
+  const originalURI = fontEl.querySelector(".font-preview").src;
   const newTheme = originalTheme === "light" ? "dark" : "light";
 
   info(`Original theme was '${originalTheme}'.`);
 
   await setThemeAndWaitForUpdate(newTheme, inspector);
-  isnot(doc.querySelector("#font-container .font-preview").src, originalURI,
+  isnot(fontEl.querySelector(".font-preview").src, originalURI,
     "The preview image changed with the theme.");
 
   await setThemeAndWaitForUpdate(originalTheme, inspector);
-  is(doc.querySelector("#font-container .font-preview").src, originalURI,
+  is(fontEl.querySelector(".font-preview").src, originalURI,
     "The preview image is correct after the original theme was restored.");
 });
 
 /**
  * Sets the current theme and waits for fontinspector-updated event.
  *
  * @param {String} theme - the new theme
  * @param {Object} inspector - the inspector panel

--- a/devtools/client/inspector/fonts/test/head.js
+++ b/devtools/client/inspector/fonts/test/head.js
@@ -19,19 +19,20 @@ registerCleanupFunction(() => {
 /**
  * The font-inspector doesn't participate in the inspector's update mechanism
  * (i.e. it doesn't call inspector.updating() when updating), so simply calling
  * the default selectNode isn't enough to guaranty that the panel has finished
  * updating. We also need to wait for the fontinspector-updated event.
  */
 var _selectNode = selectNode;
 selectNode = async function(node, inspector, reason) {
-  const onUpdated = inspector.once("fontinspector-updated");
+  const onInspectorUpdated = inspector.once("fontinspector-updated");
+  const onEditorUpdated = inspector.once("fonteditor-updated");
   await _selectNode(node, inspector, reason);
-  await onUpdated;
+  await Promise.all([onInspectorUpdated, onEditorUpdated]);
 };
 
 /**
  * Adds a new tab with the given URL, opens the inspector and selects the
  * font-inspector tab.
  * @return {Promise} resolves to a {toolbox, inspector, view} object
  */
 var openFontInspectorForURL = async function(url) {
@@ -91,17 +92,17 @@ async function updatePreviewText(view, t
 
 /**
  * Get all of the <li> elements for the fonts used on the currently selected element.
  *
  * @param  {document} viewDoc
  * @return {Array}
  */
 function getUsedFontsEls(viewDoc) {
-  return viewDoc.querySelectorAll("#font-container > .fonts-list > li");
+  return viewDoc.querySelectorAll("#font-editor .fonts-list li");
 }
 
 /**
  * Expand the other fonts accordion.
  */
 async function expandOtherFontsAccordion(viewDoc) {
   info("Expanding the other fonts section");
 
@@ -134,8 +135,20 @@ function getOtherFontsEls(viewDoc) {
  * @param  {DOMNode} fontEl
  *         The font element.
  * @return {String}
  *         The name of the font as shown in the UI.
  */
 function getName(fontEl) {
   return fontEl.querySelector(".font-name").textContent;
 }
+
+/**
+ * Given a font element, return the font's URL.
+ *
+ * @param  {DOMNode} fontEl
+ *         The font element.
+ * @return {String}
+ *         The URL where the font was loaded from as shown in the UI.
+ */
+function getURL(fontEl) {
+  return fontEl.querySelector(".font-origin").textContent;
+}