DevTools: Front-end for platform font inspection

Source/devtools/front_end/ElementsPanel.js

 /*
  * Copyright (C) 2007, 2008 Apple Inc.  All rights reserved.
  * Copyright (C) 2008 Matt Lilek <webkit@mattlilek.com>
  * Copyright (C) 2009 Joseph Pecoraro
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
  * 1.  Redistributions of source code must retain the above copyright
@@ skipping 14 matching lines @@
  * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
  * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
 importScript("CSSNamedFlowCollectionsView.js");
 importScript("CSSNamedFlowView.js");
 importScript("EventListenersSidebarPane.js");
 importScript("MetricsSidebarPane.js");
+importScript("PlatformFontsSidebarPane.js");
 importScript("PropertiesSidebarPane.js");
 importScript("StylesSidebarPane.js");
 
 /**
  * @constructor
  * @extends {WebInspector.Panel}
  */
 WebInspector.ElementsPanel = function()
 {
     WebInspector.Panel.call(this, "elements");
@@ skipping 27 matching lines @@
 
     this.treeOutline.addEventListener(WebInspector.ElementsTreeOutline.Events.SelectedNodeChanged, this._selectedNodeChanged, this);
     this.treeOutline.addEventListener(WebInspector.ElementsTreeOutline.Events.ElementsTreeUpdated, this._updateBreadcrumbIfNeeded, this);
 
     this.crumbsElement = document.createElement("div");
     this.crumbsElement.className = "crumbs";
     this.crumbsElement.addEventListener("mousemove", this._mouseMovedInCrumbs.bind(this), false);
     this.crumbsElement.addEventListener("mouseout", this._mouseMovedOutOfCrumbs.bind(this), false);
 
     this.sidebarPanes = {};
+    this.sidebarPanes.platformFonts = new WebInspector.PlatformFontsSidebarPane();
     this.sidebarPanes.computedStyle = new WebInspector.ComputedStyleSidebarPane();
     this.sidebarPanes.styles = new WebInspector.StylesSidebarPane(this.sidebarPanes.computedStyle, this._setPseudoClassForNodeId.bind(this));
     this.sidebarPanes.metrics = new WebInspector.MetricsSidebarPane();
     this.sidebarPanes.properties = new WebInspector.PropertiesSidebarPane();
     this.sidebarPanes.domBreakpoints = WebInspector.domBreakpointsSidebarPane.createProxy(this);
     this.sidebarPanes.eventListeners = new WebInspector.EventListenersSidebarPane();
 
     this.sidebarPanes.styles.addEventListener(WebInspector.SidebarPane.EventTypes.wasShown, this.updateStyles.bind(this, false));
     this.sidebarPanes.metrics.addEventListener(WebInspector.SidebarPane.EventTypes.wasShown, this.updateMetrics.bind(this));
+    this.sidebarPanes.platformFonts.addEventListener(WebInspector.SidebarPane.EventTypes.wasShown, this.updatePlatformFonts.bind(this));
     this.sidebarPanes.properties.addEventListener(WebInspector.SidebarPane.EventTypes.wasShown, this.updateProperties.bind(this));
     this.sidebarPanes.eventListeners.addEventListener(WebInspector.SidebarPane.EventTypes.wasShown, this.updateEventListeners.bind(this));
 
     this.sidebarPanes.styles.addEventListener("style edited", this._stylesPaneEdited, this);
     this.sidebarPanes.styles.addEventListener("style property toggled", this._stylesPaneEdited, this);
     this.sidebarPanes.metrics.addEventListener("metrics edited", this._metricsPaneEdited, this);
 
     WebInspector.dockController.addEventListener(WebInspector.DockController.Events.DockSideChanged, this._dockSideChanged.bind(this));
     WebInspector.settings.splitVerticallyWhenDockedToRight.addChangeListener(this._dockSideChanged.bind(this));
     this._dockSideChanged();
@@ skipping 125 matching lines @@
         WebInspector.notifications.dispatchEventToListeners(WebInspector.ElementsTreeOutline.Events.SelectedNodeChanged);
     },
 
     _updateSidebars: function()
     {
         for (var pane in this.sidebarPanes)
            this.sidebarPanes[pane].needsUpdate = true;
 
         this.updateStyles(true);
         this.updateMetrics();
+        this.updatePlatformFonts();
         this.updateProperties();
         this.updateEventListeners();
     },
 
     _reset: function()
     {
         delete this.currentQuery;
     },
 
     _documentUpdatedEvent: function(event)
@@ skipping 333 matching lines @@
                 return;
             }
         }
     },
 
     _stylesPaneEdited: function()
     {
         // Once styles are edited, the Metrics pane should be updated.
         this.sidebarPanes.metrics.needsUpdate = true;
         this.updateMetrics();
+        this.sidebarPanes.platformFonts.needsUpdate = true;
+        this.updatePlatformFonts();
     },
 
     _metricsPaneEdited: function()
     {
         // Once metrics are edited, the Styles pane should be updated.
         this.sidebarPanes.styles.needsUpdate = true;
         this.updateStyles(true);
     },
 
     _mouseMovedInCrumbs: function(event)
@@ skipping 391 matching lines @@
     updateMetrics: function()
     {
         var metricsSidebarPane = this.sidebarPanes.metrics;
         if (!metricsSidebarPane.isShowing() || !metricsSidebarPane.needsUpdate)
             return;
 
         metricsSidebarPane.update(this.selectedDOMNode());
         metricsSidebarPane.needsUpdate = false;
     },
 
+    updatePlatformFonts: function()
+    {
+        var platformFontsSidebar = this.sidebarPanes.platformFonts;
+        if (!platformFontsSidebar.isShowing() || !platformFontsSidebar.needsUpdate)
+            return;
+
+        platformFontsSidebar.update(this.selectedDOMNode());
+        platformFontsSidebar.needsUpdate = false;
+    },
+
     updateProperties: function()
     {
         var propertiesSidebarPane = this.sidebarPanes.properties;
         if (!propertiesSidebarPane.isShowing() || !propertiesSidebarPane.needsUpdate)
             return;
 
         propertiesSidebarPane.update(this.selectedDOMNode());
         propertiesSidebarPane.needsUpdate = false;
     },
 
@@ skipping 131 matching lines @@
         var expandComputed = computedPane.expand.bind(computedPane);
 
         this.sidebarPanes.metrics.show(computedPane.bodyElement);
         this.sidebarPanes.metrics.setExpandCallback(expandComputed);
 
         computedPane.bodyElement.appendChild(this.sidebarPanes.computedStyle.titleElement);
         computedPane.bodyElement.addStyleClass("metrics-and-computed");
         this.sidebarPanes.computedStyle.show(computedPane.bodyElement);
         this.sidebarPanes.computedStyle.setExpandCallback(expandComputed);
 
+        this.sidebarPanes.platformFonts.show(computedPane.bodyElement);
+
         if (vertically) {
             this.sidebarPaneView = new WebInspector.SidebarTabbedPane();
 
             var compositePane = new WebInspector.SidebarPane(this.sidebarPanes.styles.title());
             compositePane.element.addStyleClass("composite");
             compositePane.element.addStyleClass("fill");
             var expandComposite = compositePane.expand.bind(compositePane);
 
             var splitView = new WebInspector.SplitView(true, "StylesPaneSplitRatio", 0.5);
             splitView.show(compositePane.bodyElement);
@@ skipping 28 matching lines @@
      * @param {WebInspector.SidebarPane} pane
      */
     addExtensionSidebarPane: function(id, pane)
     {
         this.sidebarPanes[id] = pane;
         this.sidebarPaneView.addPane(pane);
     },
 
     __proto__: WebInspector.Panel.prototype
 }