Bug 1483929 - (Part 2) Update tests to account for removal of Rendered Fonts and Other Fonts, and addition of All Fonts accordccordions. r=gl

Depends on D3797

Differential Revision: https://phabricator.services.mozilla.com/D3799

--HG--
extra : moz-landing-system : lando

devtools/client/inspector/fonts/test/browser.ini

@@ -19,6 +19,7 @@ support-files =
 [browser_fontinspector_copy-URL.js]
 skip-if = !e10s # too slow on !e10s, logging fully serialized actors (Bug 1446595)
 subsuite = clipboard
+[browser_fontinspector_all-fonts.js]
 [browser_fontinspector_edit-previews.js]
 [browser_fontinspector_editor-font-size-conversion.js]
 [browser_fontinspector_editor-values.js]
@@ -27,7 +28,6 @@ subsuite = clipboard
 [browser_fontinspector_family-unused.js]
 [browser_fontinspector_no-fonts.js]
 [browser_fontinspector_other-fonts.js]
-[browser_fontinspector_rendered-fonts.js]
 [browser_fontinspector_reveal-in-page.js]
 [browser_fontinspector_text-node.js]
 [browser_fontinspector_theme-change.js]

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

@@ -1,7 +1,6 @@
 /* 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, getFamilyName */
 "use strict";
 
 requestLongerTimeout(2);
@@ -19,10 +18,6 @@ add_task(async function() {
   await testDivFonts(inspector, viewDoc);
 });
 
-function isRemote(fontLi) {
-  return fontLi.querySelector(".font-origin").classList.contains("remote");
-}
-
 async function testBodyFonts(inspector, viewDoc) {
   await selectNode("body", inspector);
 

devtools/client/inspector/fonts/test/browser_fontinspector_all-fonts.js

@@ -0,0 +1,70 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Check that the font editor has a section for "All fonts" which shows all fonts
+// used on the page.
+
+const TEST_URI = URL_ROOT + "doc_browser_fontinspector.html";
+
+add_task(async function() {
+  await pushPref("devtools.inspector.fonteditor.enabled", true);
+  const { view } = await openFontInspectorForURL(TEST_URI);
+  const viewDoc = view.document;
+
+  const allFontsAccordion = getFontsAccordion(viewDoc);
+  ok(allFontsAccordion, "There's an accordion in the panel");
+  is(allFontsAccordion.textContent, "All fonts on page", "It has the right title");
+
+  await expandAccordion(allFontsAccordion);
+  const allFontsEls = getAllFontsEls(viewDoc);
+
+  const FONTS = [{
+    familyName: ["bar"],
+    name: ["Ostrich Sans Medium"],
+    remote: true,
+    url: URL_ROOT + "ostrich-regular.ttf",
+  }, {
+    familyName: ["bar"],
+    name: ["Ostrich Sans Black"],
+    remote: true,
+    url: URL_ROOT + "ostrich-black.ttf",
+  }, {
+    familyName: ["bar"],
+    name: ["Ostrich Sans Black"],
+    remote: true,
+    url: URL_ROOT + "ostrich-black.ttf",
+  }, {
+    familyName: ["barnormal"],
+    name: ["Ostrich Sans Medium"],
+    remote: true,
+    url: URL_ROOT + "ostrich-regular.ttf",
+  }, {
+    // On Linux, Arial does not exist. Liberation Sans is used instead.
+    familyName: ["Arial", "Liberation Sans"],
+    name: ["Arial", "Liberation Sans"],
+    remote: false,
+    url: "system",
+  }, {
+    // On Linux, Times New Roman does not exist. Liberation Serif is used instead.
+    familyName: ["Times New Roman", "Liberation Serif"],
+    name: ["Times New Roman", "Liberation Serif"],
+    remote: false,
+    url: "system",
+  }];
+
+  is(allFontsEls.length, FONTS.length, "All fonts used are listed");
+
+  for (let i = 0; i < FONTS.length; i++) {
+    const li = allFontsEls[i];
+    const font = FONTS[i];
+
+    ok(font.name.includes(getName(li)), "The DIV font has the right name");
+    info(getName(li));
+    ok(font.familyName.includes(getFamilyName(li)), `font has the right family name`);
+    info(getFamilyName(li));
+    is(isRemote(li), font.remote, `font remote value correct`);
+    is(getURL(li), font.url, `font url correct`);
+  }
+});

devtools/client/inspector/fonts/test/browser_fontinspector_copy-URL.js

@@ -14,8 +14,10 @@ add_task(async function() {
   const { view, inspector } = await openFontInspectorForURL(TEST_URI);
   const viewDoc = view.document;
   await selectNode("div", inspector);
+  await expandFontsAccordion(viewDoc);
+  const allFontsEls = getAllFontsEls(viewDoc);
+  const fontEl = allFontsEls[0];
 
-  const fontEl = getUsedFontsEls(viewDoc)[0];
   const linkEl = fontEl.querySelector(".font-origin");
   const iconEl = linkEl.querySelector(".copy-icon");
 

devtools/client/inspector/fonts/test/browser_fontinspector_edit-previews.js

@@ -14,7 +14,7 @@ add_task(async function() {
   const { view, inspector } = await openFontInspectorForURL(TEST_URI);
   const viewDoc = view.document;
   await selectNode("div", inspector);
-  await expandOtherFontsAccordion(viewDoc);
+  await expandFontsAccordion(viewDoc);
 
   const previews = viewDoc.querySelectorAll("#font-container .font-preview");
   const initialPreviews = [...previews].map(p => p.src);

devtools/client/inspector/fonts/test/browser_fontinspector_expand-css-code.js

@@ -14,42 +14,23 @@ add_task(async function() {
   const viewDoc = view.document;
   await selectNode("div", inspector);
 
-  await expandOtherFontsAccordion(viewDoc);
+  await expandFontsAccordion(viewDoc);
   info("Checking that the css font-face rule is collapsed by default");
-  let fontEl = getOtherFontsEls(viewDoc)[0];
-  let codeEl = fontEl.querySelector(".font-css-code");
+  const fontEl = getAllFontsEls(viewDoc)[0];
+  const 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(() => {
+  const onExpanded = BrowserTestUtils.waitForCondition(() => {
     return codeEl.textContent === `@font-face {
   font-family: bar;
-  src: url("ostrich-black.ttf");
-  font-weight: bold;
+  src: url("bad/font/name.ttf"), url("ostrich-regular.ttf") format("truetype");
 }`;
   }, "Waiting for the font-face rule 1");
 
-  let expander = fontEl.querySelector(".font-css-code .theme-twisty");
+  const 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 = 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: 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");
 });

devtools/client/inspector/fonts/test/browser_fontinspector_other-fonts.js

@@ -11,29 +11,30 @@
 const TEST_URI = URL_ROOT + "doc_browser_fontinspector.html";
 
 add_task(async function() {
-  await pushPref("devtools.inspector.fonteditor.enabled", true);
+  // Disable font editor because the "other fonts" section does not show up in that mode.
+  await pushPref("devtools.inspector.fonteditor.enabled", false);
   const { inspector, view } = await openFontInspectorForURL(TEST_URI);
   const viewDoc = view.document;
 
-  const otherFontsAccordion = getOtherFontsAccordion(viewDoc);
+  const otherFontsAccordion = getFontsAccordion(viewDoc);
   ok(otherFontsAccordion, "There's an accordion in the panel");
   is(otherFontsAccordion.textContent, "Other fonts in page", "It has the right title");
 
   await expandAccordion(otherFontsAccordion);
-  let otherFontsEls = getOtherFontsEls(viewDoc);
+  let allFontsEls = getAllFontsEls(viewDoc);
 
-  is(otherFontsEls.length, 1, "There is one font listed in the other fonts section");
+  is(allFontsEls.length, 1, "There is one font listed in the other fonts section");
   // On Linux Times New Roman does not exist, Liberation Serif is used instead
-  const name = getName(otherFontsEls[0]);
+  const name = getName(allFontsEls[0]);
   ok(name === "Times New Roman" || name === "Liberation Serif",
      "The other font listed is the right one");
 
   info("Checking that fonts of the current element aren't listed");
   await selectNode(".bold-text", inspector);
-  await expandOtherFontsAccordion(viewDoc);
-  otherFontsEls = getOtherFontsEls(viewDoc);
+  await expandFontsAccordion(viewDoc);
+  allFontsEls = getAllFontsEls(viewDoc);
 
-  for (const otherFontEl of otherFontsEls) {
+  for (const otherFontEl of allFontsEls) {
     ok(![...getUsedFontsEls(viewDoc)].some(el => getName(el) === getName(otherFontEl)),
        "Other font isn't listed in the main fonts section");
   }

devtools/client/inspector/fonts/test/browser_fontinspector_rendered-fonts.js

@@ -1,25 +0,0 @@
-/* vim: set ts=2 et sw=2 tw=80: */
-/* Any copyright is dedicated to the Public Domain.
-   http://creativecommons.org/publicdomain/zero/1.0/ */
-"use strict";
-
-// Check that the font inspector has a section for "rendered fonts" and that section
-// contains the fonts used to render the content of the selected element.
-// Check that it's collapsed by default, but can be expanded.
-
-const TEST_URI = URL_ROOT + "doc_browser_fontinspector.html";
-
-add_task(async function() {
-  await pushPref("devtools.inspector.fonteditor.enabled", true);
-  const { view } = await openFontInspectorForURL(TEST_URI);
-  const viewDoc = view.document;
-
-  const renderedFontsAccordion = getRenderedFontsAccordion(viewDoc);
-  ok(renderedFontsAccordion, "There's an accordion for rendered fonts in the panel");
-  is(renderedFontsAccordion.textContent, "Rendered fonts", "It has the right title");
-
-  await expandAccordion(renderedFontsAccordion);
-  const fontsEls = getRenderedFontsEls(viewDoc);
-
-  ok(fontsEls.length, "There are fonts listed in the rendered fonts section");
-});

devtools/client/inspector/fonts/test/browser_fontinspector_theme-change.js

@@ -23,9 +23,9 @@ add_task(async function() {
   const viewDoc = view.document;
 
   await selectNode(".normal-text", inspector);
-  await expandOtherFontsAccordion(viewDoc);
-  const otherFontsEls = getOtherFontsEls(viewDoc);
-  const fontEl = otherFontsEls[0];
+  await expandFontsAccordion(viewDoc);
+  const allFontsEls = getAllFontsEls(viewDoc);
+  const fontEl = allFontsEls[0];
 
   // Store the original preview URI for later comparison.
   const originalURI = fontEl.querySelector(".font-preview").src;

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

@@ -27,7 +27,14 @@ selectNode = async function(node, inspector, reason) {
   const onInspectorUpdated = inspector.once("fontinspector-updated");
   const onEditorUpdated = inspector.once("fonteditor-updated");
   await _selectNode(node, inspector, reason);
-  await Promise.all([onInspectorUpdated, onEditorUpdated]);
+
+  if (Services.prefs.getBoolPref("devtools.inspector.fonteditor.enabled")) {
+    // Wait for both the font inspetor and font editor before proceeding.
+    await Promise.all([onInspectorUpdated, onEditorUpdated]);
+  } else {
+    // Wait just for the font inspector.
+    await onInspectorUpdated;
+  }
 };
 
 /**
@@ -101,17 +108,6 @@ function getUsedFontsEls(viewDoc) {
   return viewDoc.querySelectorAll("#font-editor .fonts-list li");
 }
 
-/**
- * Get the DOM element for the accordion widget that contains the fonts used to render the
- * current element.
- *
- * @param  {document} viewDoc
- * @return {DOMNode}
- */
-function getRenderedFontsAccordion(viewDoc) {
-  return viewDoc.querySelectorAll("#font-container .accordion")[0];
-}
-
 /**
  * Get the DOM element for the accordion widget that contains the fonts used elsewhere in
  * the document.
@@ -119,8 +115,8 @@ function getRenderedFontsAccordion(viewDoc) {
  * @param  {document} viewDoc
  * @return {DOMNode}
  */
-function getOtherFontsAccordion(viewDoc) {
-  return viewDoc.querySelectorAll("#font-container .accordion")[1];
+function getFontsAccordion(viewDoc) {
+  return viewDoc.querySelector("#font-container .accordion");
 }
 
 /**
@@ -141,23 +137,13 @@ async function expandAccordion(accordion) {
 }
 
 /**
- * Expand the other fonts accordion.
+ * Expand the fonts accordion.
  *
  * @param  {document} viewDoc
  */
-async function expandOtherFontsAccordion(viewDoc) {
+async function expandFontsAccordion(viewDoc) {
   info("Expanding the other fonts section");
-  await expandAccordion(getOtherFontsAccordion(viewDoc));
-}
-
-/**
- * Get all of the <li> elements for the fonts used to render the current element.
- *
- * @param  {document} viewDoc
- * @return {Array}
- */
-function getRenderedFontsEls(viewDoc) {
-  return getRenderedFontsAccordion(viewDoc).querySelectorAll(".fonts-list > li");
+  await expandAccordion(getFontsAccordion(viewDoc));
 }
 
 /**
@@ -166,8 +152,8 @@ function getRenderedFontsEls(viewDoc) {
  * @param  {document} viewDoc
  * @return {Array}
  */
-function getOtherFontsEls(viewDoc) {
-  return getOtherFontsAccordion(viewDoc).querySelectorAll(".fonts-list > li");
+function getAllFontsEls(viewDoc) {
+  return getFontsAccordion(viewDoc).querySelectorAll(".fonts-list > li");
 }
 
 /**
@@ -234,6 +220,17 @@ function getPropertyValue(viewDoc, name) {
   };
 }
 
+/**
+ * Given a font element, check whether its font source is remote.
+ *
+ * @param  {DOMNode} fontEl
+ *         The font element.
+ * @return {Boolean}
+ */
+function isRemote(fontEl) {
+  return fontEl.querySelector(".font-origin").classList.contains("remote");
+}
+
 /**
  * Wait for a predicate to return a result.
  *