Bug 1105572 - Font inspector should display fonts using their font weight and style. r=bgrins
authorHeather Arthur <fayearthur@gmail.com>
Wed, 17 Dec 2014 16:05:00 +0100
changeset 220619 9a5c3a50b8ed10df47b2cbbcb59b23ad0824cb3c
parent 220445 7ec919dc378963a98c9f65f10f31551600c386c7
child 220620 8da964932383c782de32e6779d4dea1d07e511f1
push id27991
push userkwierso@gmail.com
push dateFri, 19 Dec 2014 23:43:54 +0000
treeherdermozilla-central@b052018cf239 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbgrins
bugs1105572
milestone37.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 1105572 - Font inspector should display fonts using their font weight and style. r=bgrins
browser/devtools/fontinspector/test/browser_fontinspector.html
browser/devtools/fontinspector/test/browser_fontinspector.js
toolkit/devtools/server/actors/styles.js
--- a/browser/devtools/fontinspector/test/browser_fontinspector.html
+++ b/browser/devtools/fontinspector/test/browser_fontinspector.html
@@ -1,30 +1,51 @@
 <!DOCTYPE html>
 
 <style>
   @font-face {
     font-family: bar;
     src: url(bad/font/name.ttf), url(ostrich-regular.ttf) format("truetype");
   }
   @font-face {
+    font-family: barnormal;
+    font-weight: normal;
+    src: url(ostrich-regular.ttf);
+  }
+  @font-face {
+    font-family: bar;
+    font-weight: bold;
+    src: url(ostrich-black.ttf);
+  }
+  @font-face {
     font-family: bar;
     font-weight: 800;
     src: url(ostrich-black.ttf);
   }
-
   body{
     font-family:Arial;
+    font-size: 36px;
   }
   div {
     font-family:Arial;
     font-family:bar;
   }
+  .normal-text {
+    font-family: barnormal;
+    font-weight: normal;
+  }
   .bold-text {
     font-family: bar;
+    font-weight: bold;
+  }
+  .black-text {
+    font-family: bar;
     font-weight: 800;
   }
 </style>
 
 <body>
   BODY
   <div>DIV</div>
+  <div class="normal-text">NORMAL DIV</div>
+  <div class="bold-text">BOLD DIV</div>
+  <div class="black-text">800 DIV</div>
 </body>
--- a/browser/devtools/fontinspector/test/browser_fontinspector.js
+++ b/browser/devtools/fontinspector/test/browser_fontinspector.js
@@ -5,16 +5,29 @@ let tempScope = {};
 let {gDevTools} = Cu.import("resource:///modules/devtools/gDevTools.jsm", {});
 let {devtools} = Cu.import("resource://gre/modules/devtools/Loader.jsm", {});
 let TargetFactory = devtools.TargetFactory;
 
 let TEST_URI = "http://mochi.test:8888/browser/browser/devtools/fontinspector/test/browser_fontinspector.html";
 
 let view, viewDoc;
 
+const BASE_URI = "http://mochi.test:8888/browser/browser/devtools/fontinspector/test/"
+
+const FONTS = [
+  {name: "Ostrich Sans Medium", remote: true, url: BASE_URI + "ostrich-regular.ttf",
+   format: "truetype", cssName: "bar"},
+  {name: "Ostrich Sans Black", remote: true, url: BASE_URI + "ostrich-black.ttf",
+   format: "", cssName: "bar"},
+  {name: "Ostrich Sans Black", remote: true, url: BASE_URI + "ostrich-black.ttf",
+   format: "", cssName: "bar"},
+  {name: "Ostrich Sans Medium", remote: true, url: BASE_URI + "ostrich-regular.ttf",
+   format: "", cssName: "barnormal"},
+];
+
 add_task(function*() {
   yield loadTab(TEST_URI);
   let {toolbox, inspector} = yield openInspector();
 
   info("Selecting the test node");
   yield selectNode("body", inspector);
 
   let updated = inspector.once("fontinspector-updated");
@@ -34,42 +47,51 @@ add_task(function*() {
 
   yield testShowAllFonts(inspector);
 
   view = viewDoc = null;
 });
 
 function* testBodyFonts(inspector) {
   let s = viewDoc.querySelectorAll("#all-fonts > section");
-  is(s.length, 2, "Found 2 fonts");
+  is(s.length, 5, "Found 5 fonts");
 
-  // test first web font
-  is(s[0].querySelector(".font-name").textContent,
-     "Ostrich Sans Medium", "font 0: Right font name");
-  ok(s[0].classList.contains("is-remote"),
-     "font 0: is remote");
-  is(s[0].querySelector(".font-url").value,
-     "http://mochi.test:8888/browser/browser/devtools/fontinspector/test/ostrich-regular.ttf",
-     "font 0: right url");
-  is(s[0].querySelector(".font-format").textContent,
-     "truetype", "font 0: right font format");
-  is(s[0].querySelector(".font-css-name").textContent,
-     "bar", "font 0: right css name");
+  for (let i = 0; i < FONTS.length; i++) {
+    let section = s[i];
+    let font = FONTS[i];
+    is(section.querySelector(".font-name").textContent, font.name,
+       "font " + i + " right font name");
+    is(section.classList.contains("is-remote"), font.remote,
+       "font " + i + " remote value correct");
+    is(section.querySelector(".font-url").value, font.url,
+       "font " + i + " url correct");
+    is(section.querySelector(".font-format").hidden, !font.format,
+       "font " + i + " format hidden value correct");
+    is(section.querySelector(".font-format").textContent,
+       font.format, "font " + i + " format correct");
+    is(section.querySelector(".font-css-name").textContent,
+       font.cssName, "font " + i + " css name correct");
+  }
+
+  // test that the bold and regular fonts have different previews
+  let regSrc = s[0].querySelector(".font-preview").src;
+  let boldSrc = s[1].querySelector(".font-preview").src;
+  isnot(regSrc, boldSrc, "preview for bold font is different from regular");
 
   // test system font
-  let font2Name = s[1].querySelector(".font-name").textContent;
-  let font2CssName = s[1].querySelector(".font-css-name").textContent;
+  let localFontName = s[4].querySelector(".font-name").textContent;
+  let localFontCSSName = s[4].querySelector(".font-css-name").textContent;
 
   // On Linux test machines, the Arial font doesn't exist.
   // The fallback is "Liberation Sans"
-  ok((font2Name == "Arial") || (font2Name == "Liberation Sans"),
-     "font 1: Right font name");
-  ok(s[1].classList.contains("is-local"), "font 2: is local");
-  ok((font2CssName == "Arial") || (font2CssName == "Liberation Sans"),
-     "Arial", "font 2: right css name");
+  ok((localFontName == "Arial") || (localFontName == "Liberation Sans"),
+     "local font right font name");
+  ok(s[4].classList.contains("is-local"), "local font is local");
+  ok((localFontCSSName == "Arial") || (localFontCSSName == "Liberation Sans"),
+     "Arial", "local font has right css name");
 }
 
 function* testDivFonts(inspector) {
   let updated = inspector.once("fontinspector-updated");
   yield selectNode("div", inspector);
   yield updated;
 
   let sections1 = viewDoc.querySelectorAll("#all-fonts > section");
@@ -82,10 +104,10 @@ function* testShowAllFonts(inspector) {
   info("testing showing all fonts");
 
   let updated = inspector.once("fontinspector-updated");
   viewDoc.querySelector("#showall").click();
   yield updated;
 
   is(inspector.selection.nodeFront.nodeName, "BODY", "Show all fonts selected the body node");
   let sections = viewDoc.querySelectorAll("#all-fonts > section");
-  is(sections.length, 2, "And font-inspector still shows 2 fonts for body");
+  is(sections.length, 5, "And font-inspector still shows 5 fonts for body");
 }
--- a/toolkit/devtools/server/actors/styles.js
+++ b/toolkit/devtools/server/actors/styles.js
@@ -35,16 +35,18 @@ exports.PSEUDO_ELEMENTS = PSEUDO_ELEMENT
 const PSEUDO_ELEMENTS_TO_READ = PSEUDO_ELEMENTS.filter(pseudo => {
   return pseudo !== ":before" && pseudo !== ":after";
 });
 
 const XHTML_NS = "http://www.w3.org/1999/xhtml";
 const FONT_PREVIEW_TEXT = "Abc";
 const FONT_PREVIEW_FONT_SIZE = 40;
 const FONT_PREVIEW_FILLSTYLE = "black";
+const NORMAL_FONT_WEIGHT = 400;
+const BOLD_FONT_WEIGHT = 700;
 
 // Predeclare the domnode actor type for use in requests.
 types.addActorType("domnode");
 
 // Predeclare the domstylerule actor type
 types.addActorType("domstylerule");
 
 /**
@@ -271,34 +273,53 @@ var PageStyleActor = protocol.ActorClass
       }
 
       // If this font comes from a @font-face rule
       if (font.rule) {
         fontFace.rule = StyleRuleActor(this, font.rule);
         fontFace.ruleText = font.rule.cssText;
       }
 
+      // Get the weight and style of this font for the preview and sort order
+      let weight = NORMAL_FONT_WEIGHT, style = "";
+      if (font.rule) {
+        weight = font.rule.style.getPropertyValue("font-weight")
+                 || NORMAL_FONT_WEIGHT;
+        if (weight == "bold") {
+          weight = BOLD_FONT_WEIGHT;
+        } else if (weight == "normal") {
+          weight = NORMAL_FONT_WEIGHT;
+        }
+        style = font.rule.style.getPropertyValue("font-style") || "";
+      }
+      fontFace.weight = weight;
+      fontFace.style = style;
+
       if (options.includePreviews) {
         let opts = {
           previewText: options.previewText,
           previewFontSize: options.previewFontSize,
+          fontStyle: weight + " " + style,
           fillStyle: options.previewFillStyle
         }
         let { dataURL, size } = getFontPreviewData(font.CSSFamilyName,
                                                    contentDocument, opts);
         fontFace.preview = {
           data: LongStringActor(this.conn, dataURL),
           size: size
         };
       }
       fontsArray.push(fontFace);
     }
 
     // @font-face fonts at the top, then alphabetically, then by weight
     fontsArray.sort(function(a, b) {
+      return a.weight > b.weight ? 1 : -1;
+    });
+    fontsArray.sort(function(a, b) {
       if (a.CSSFamilyName == b.CSSFamilyName) {
         return 0;
       }
       return a.CSSFamilyName > b.CSSFamilyName ? 1 : -1;
     });
     fontsArray.sort(function(a, b) {
       if ((a.rule && b.rule) || (!a.rule && !b.rule)) {
         return 0;