Bug 1435469 - Replace selectNodeContents by selectNode to compute font faces in font tab. r=pbro
authorVincent R <grosbouddha@gmail.com>
Wed, 07 Nov 2018 22:51:00 +0100
changeset 445365 2e1e73f6e59db89a3c9eeff0fb83af139506bc90
parent 445364 0b9beb3080d112a156eeff467ad6da29a6be7aed
child 445366 4413f5f0295a5be95ef954bf2f0b3ab4c273ed3b
push id109724
push userdvarga@mozilla.com
push dateFri, 09 Nov 2018 10:38:47 +0000
treeherdermozilla-inbound@2e1e73f6e59d [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbro
bugs1435469
milestone65.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1435469 - Replace selectNodeContents by selectNode to compute font faces in font tab. r=pbro
devtools/client/inspector/fonts/test/browser.ini
devtools/client/inspector/fonts/test/browser_fontinspector_input-element-used-font.js
devtools/client/inspector/fonts/test/doc_browser_fontinspector.html
devtools/client/inspector/rules/test/browser_rules_highlight-used-fonts.js
devtools/server/actors/styles.js
--- a/devtools/client/inspector/fonts/test/browser.ini
+++ b/devtools/client/inspector/fonts/test/browser.ini
@@ -20,13 +20,14 @@ support-files =
 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]
 [browser_fontinspector_editor-keywords.js]
 [browser_fontinspector_expand-css-code.js]
+[browser_fontinspector_input-element-used-font.js]
 [browser_fontinspector_no-fonts.js]
 [browser_fontinspector_other-fonts.js]
 [browser_fontinspector_reveal-in-page.js]
 [browser_fontinspector_text-node.js]
 [browser_fontinspector_theme-change.js]
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/fonts/test/browser_fontinspector_input-element-used-font.js
@@ -0,0 +1,26 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+const TEST_URI = URL_ROOT + "doc_browser_fontinspector.html";
+
+// Verify that a styled input field element is showing proper font information
+// in its font tab.
+// Non-regression test for https://bugzilla.mozilla.org/show_bug.cgi?id=1435469
+add_task(async function() {
+  await pushPref("devtools.inspector.fonteditor.enabled", true);
+
+  const { inspector, view } = await openFontInspectorForURL(TEST_URI);
+  const viewDoc = view.document;
+
+  const onInspectorUpdated = inspector.once("fontinspector-updated");
+  await selectNode(".input-field", inspector);
+
+  info("Waiting for font editor to render");
+  await onInspectorUpdated;
+
+  const fontEls = getUsedFontsEls(viewDoc);
+  ok(fontEls.length == 1, `Used fonts found for styled input element`);
+  ok(fontEls[0].textContent == "Ostrich Sans Medium",
+    `Proper font found: 'Ostrich Sans Medium' for styled input.`);
+});
--- a/devtools/client/inspector/fonts/test/doc_browser_fontinspector.html
+++ b/devtools/client/inspector/fonts/test/doc_browser_fontinspector.html
@@ -40,22 +40,28 @@
   }
   .black-text {
     font-family: bar;
     font-weight: 800;
   }
   .viewport-size {
     font-size: 10vw;
   }
+  .input-field {
+    font-family: bar;
+    font-size: 36px;
+    color: blue;
+  }
 </style>
 
 <body>
   BODY
   <div>DIV
     <span class="nested-span">NESTED SPAN</span>
   </div>
   <iframe src="test_iframe.html"></iframe>
   <div class="normal-text">NORMAL DIV</div>
   <div class="bold-text">BOLD DIV</div>
   <div class="black-text">800 DIV</div>
   <div class="empty"></div>
   <div class="viewport-size">VIEWPORT SIZE</div>
+  <input class="input-field" value="Input text value"/>
 </body>
--- a/devtools/client/inspector/rules/test/browser_rules_highlight-used-fonts.js
+++ b/devtools/client/inspector/rules/test/browser_rules_highlight-used-fonts.js
@@ -27,63 +27,81 @@ const TEST_URI = `
       font-family: georgia, arial;
     }
     #id7 {
       font-family: foo, serif !important;
     }
     #id8 {
       font-family: important;
     }
+    #id9::before {
+      content: ' ';
+      font-family: foo, monospace;
+    }
   </style>
   <div id="id1">Text</div>
   <div id="id2">Text</div>
   <div id="id3">Text</div>
   <div id="id4">Text</div>
   <div id="id5">Text</div>
   <div id="id6">A &#586;</div>
   <div id="id7">Text</div>
   <div id="id8">Text</div>
+  <div id="id9">Text</div>
 `;
 
 // Tests that font-family properties in the rule-view correctly
 // indicates which font is in use.
 // Each entry in the test array should contain:
 // {
-//   selector: the rule-view selector to look for font-family in
+//   baseSelector: the rule-view selector to look for font-family in
 //   nb: the number of fonts this property should have
 //   used: the indexes of all the fonts that should be highlighted, or null if none should
 //         be highlighted
+//   selectBeforePseudoElement: Whether the before pseudo element should be selectd or not
 // }
 const TESTS = [
-  {selector: "#id1", nb: 3, used: [2]}, // sans-serif
-  {selector: "#id2", nb: 1, used: [0]}, // serif
-  {selector: "#id3", nb: 4, used: [1]}, // monospace
-  {selector: "#id4", nb: 2, used: null},
-  {selector: "#id5", nb: 1, used: [0]}, // monospace
-  {selector: "#id7", nb: 2, used: [1]}, // serif
-  {selector: "#id8", nb: 1, used: null},
+  {baseSelector: "#id1", nb: 3, used: [2]}, // sans-serif
+  {baseSelector: "#id2", nb: 1, used: [0]}, // serif
+  {baseSelector: "#id3", nb: 4, used: [1]}, // monospace
+  {baseSelector: "#id4", nb: 2, used: null},
+  {baseSelector: "#id5", nb: 1, used: [0]}, // monospace
+  {baseSelector: "#id7", nb: 2, used: [1]}, // serif
+  {baseSelector: "#id8", nb: 1, used: null},
+  {baseSelector: "#id9", nb: 2, used: [1], selectBeforePseudoElement: true}, // monospace
 ];
 
 if (Services.appinfo.OS !== "Linux") {
   // Both georgia and arial are used because the second character can't be rendered with
   // georgia, so the browser falls back. Also, skip this on Linux which has neither of
   // these fonts.
-  TESTS.push({selector: "#id6", nb: 2, used: [0, 1]});
+  TESTS.push({baseSelector: "#id6", nb: 2, used: [0, 1]});
 }
 
 add_task(async function() {
   await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   const {inspector, view} = await openRuleView();
 
-  for (const {selector, nb, used} of TESTS) {
+  for (const {baseSelector, nb, used, selectBeforePseudoElement} of TESTS) {
     const onFontHighlighted = view.once("font-highlighted");
-    await selectNode(selector, inspector);
+
+    if (selectBeforePseudoElement) {
+      // Query the first children node to get the before pseudo element:
+      const baseNode = await getNodeFront(baseSelector, inspector);
+      const pseudoElement =
+          (await inspector.walker.children(baseNode)).nodes[0];
+      await selectNode(pseudoElement, inspector);
+    } else {
+      await selectNode(baseSelector, inspector);
+    }
     await onFontHighlighted;
 
-    info("Looking for fonts in font-family property in selector " + selector);
+    const selector =
+       !selectBeforePseudoElement ? baseSelector : `${baseSelector}::before`;
+    info(`Looking for fonts in font-family property for: <${selector}>`);
 
     const prop = getRuleViewProperty(view, selector, "font-family").valueSpan;
     const fonts = prop.querySelectorAll(".ruleview-font-family");
 
     ok(fonts.length, "Fonts found in the property");
     is(fonts.length, nb, "Correct number of fonts found in the property");
 
     const highlighted = [...fonts].filter(span => span.classList.contains("used-font"));
--- a/devtools/server/actors/styles.js
+++ b/devtools/server/actors/styles.js
@@ -292,17 +292,23 @@ var PageStyleActor = protocol.ActorClass
    *   object with 'fontFaces', a list of fonts that apply to this node.
    */
   getUsedFontFaces: function(node, options) {
     // node.rawNode is defined for NodeActor objects
     const actualNode = node.rawNode || node;
     const contentDocument = actualNode.ownerDocument;
     // We don't get fonts for a node, but for a range
     const rng = contentDocument.createRange();
-    rng.selectNodeContents(actualNode);
+    const isPseudoElement =
+      Boolean(CssLogic.getBindingElementAndPseudo(actualNode).pseudo);
+    if (isPseudoElement) {
+      rng.selectNodeContents(actualNode);
+    } else {
+      rng.selectNode(actualNode);
+    }
     const fonts = InspectorUtils.getUsedFontFaces(rng);
     const fontsArray = [];
 
     for (let i = 0; i < fonts.length; i++) {
       const font = fonts[i];
       const fontFace = {
         name: font.name,
         CSSFamilyName: font.CSSFamilyName,