DevTools: add title to computed fonts section

Source/devtools/front_end/PlatformFontsSidebarPane.js

 /*
  * Copyright (C) 2013 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 22 matching lines @@
  * @extends {WebInspector.SidebarPane}
  */
 WebInspector.PlatformFontsSidebarPane = function()
 {
     WebInspector.SidebarPane.call(this, WebInspector.UIString("Fonts"));
     this.element.addStyleClass("platform-fonts");
     WebInspector.domAgent.addEventListener(WebInspector.DOMAgent.Events.AttrModified, this._onNodeChange.bind(this));
     WebInspector.domAgent.addEventListener(WebInspector.DOMAgent.Events.AttrRemoved, this._onNodeChange.bind(this));
     WebInspector.domAgent.addEventListener(WebInspector.DOMAgent.Events.CharacterDataModified, this._onNodeChange.bind(this));
 
-    var cssFontSection = this.element.createChild("div", "stats-section monospace");
-    var cssFontPrefix = cssFontSection.createChild("span", "webkit-css-property");
-    cssFontPrefix.textContent = "font-family";
-    cssFontSection.createTextChild(":");
-    this._cssFontValue = cssFontSection.createChild("span", "css-font-value");
-
-    this._fontStatsSection = this.element.createChild("div", "stats-section");
+    this._sectionTitle = document.createElement("div");

[vsevik, 2013/11/05 17:30:18]

consider document.createElementwithClass

+    this._sectionTitle.className = "sidebar-separator";
+    this.element.insertBefore(this._sectionTitle, this.bodyElement);
+    this._sectionTitle.textContent = WebInspector.UIString("Rendered Fonts");
+    this._fontStatsSection = this.bodyElement.createChild("div", "stats-section");
 }
 
 WebInspector.PlatformFontsSidebarPane.prototype = {
     _onNodeChange: function()
     {
         if (this._innerUpdateTimeout)
             return;
         this._innerUpdateTimeout = setTimeout(this._innerUpdate.bind(this), 100);
     },
 
@@ skipping 22 matching lines @@
     },
 
     /**
      * @param {String} cssFamilyName
      * @param {WebInspector.DOMNode} node
      */
     _refreshUI: function(node, cssFamilyName, platformFonts)
     {
         if (this._node !== node)
             return;
-        this._cssFontValue.textContent = cssFamilyName + ";";
+
         this._fontStatsSection.removeChildren();
 
-        if (!platformFonts || !platformFonts.length)
+        var isEmptySection = !platformFonts || !platformFonts.length;
+        this._sectionTitle.enableStyleClass("hidden", isEmptySection);
+        if (isEmptySection)
             return;
         platformFonts.sort(function (a, b) {
             return b.glyphCount - a.glyphCount;
         });
         for (var i = 0; i < platformFonts.length; ++i) {
             var fontStatElement = this._fontStatsSection.createChild("div", "font-stats-item");
 
             var fontNameElement = fontStatElement.createChild("span", "font-name");
             fontNameElement.textContent = platformFonts[i].familyName;
 
             var fontDelimeterElement = fontStatElement.createChild("span", "delimeter");
             fontDelimeterElement.textContent = "\u2014";
 
             var fontUsageElement = fontStatElement.createChild("span", "font-usage");
             var usage = platformFonts[i].glyphCount;
             fontUsageElement.textContent = usage === 1 ? WebInspector.UIString("%d glyph", usage) : WebInspector.UIString("%d glyphs", usage);
         }
     },
 
     __proto__: WebInspector.SidebarPane.prototype
 }