DevTools: split platformFontsWidget.css out of elementsPanel.css

BUG=none
R=dgozman, pfeldman

Review URL: https://codereview.chromium.org/1809773002

Cr-Commit-Position: refs/heads/master@{#381551}

third_party/WebKit/Source/devtools/devtools.gypi

@@ -430,6 +430,7 @@
             'front_end/elements/computedStyleSidebarPane.css',
             'front_end/elements/elementsPanel.css',
             'front_end/elements/elementsTreeOutline.css',
+            'front_end/elements/platformFontsWidget.css',
             'front_end/elements/spectrum.css',
             'front_end/elements/BezierEditor.js',
             'front_end/elements/BezierUI.js',

third_party/WebKit/Source/devtools/front_end/elements/PlatformFontsWidget.js

@@ -35,16 +35,16 @@
  */
 WebInspector.PlatformFontsWidget = function(sharedModel)
 {
-    WebInspector.ThrottledWidget.call(this);
-    this.element.classList.add("platform-fonts");
+    WebInspector.ThrottledWidget.call(this, true);
+    this.registerRequiredCSS("elements/platformFontsWidget.css");
 
     this._sharedModel = sharedModel;
     this._sharedModel.addEventListener(WebInspector.SharedSidebarModel.Events.ComputedStyleChanged, this.update, this);
 
-    this._sectionTitle = createElementWithClass("div", "sidebar-separator");
-    this.element.appendChild(this._sectionTitle);
+    this._sectionTitle = createElementWithClass("div", "title");
+    this.contentElement.appendChild(this._sectionTitle);
     this._sectionTitle.textContent = WebInspector.UIString("Rendered Fonts");
-    this._fontStatsSection = this.element.createChild("div", "stats-section");
+    this._fontStatsSection = this.contentElement.createChild("div", "stats-section");
 }
 
 /**

third_party/WebKit/Source/devtools/front_end/elements/elementsPanel.css

@@ -620,39 +620,6 @@
     margin-left: 4px;
 }
 
-.sidebar-pane.composite .platform-fonts {
-    -webkit-user-select: text;
-}
-
-.sidebar-pane.composite .platform-fonts .font-name {
-    font-weight: bold;
-}
-
-.sidebar-pane.composite .platform-fonts .font-usage {
-    color: #888;
-    padding-left: 3px;
-}
-
-.sidebar-pane.composite .platform-fonts .sidebar-separator {
-    height: 24px;
-    background-color: #f1f1f1;
-    border-color: #ddd;
-    display: flex;
-    align-items: center;
-}
-
-.sidebar-pane.composite .platform-fonts .stats-section {
-    margin: 5px 0;
-}
-
-.sidebar-pane.composite .platform-fonts .font-stats-item {
-    padding-left: 1em;
-}
-
-.sidebar-pane.composite .platform-fonts .font-stats-item .font-delimeter {
-    margin: 0 1ex 0 1ex;
-}
-
 .sidebar-pane.composite .metrics-and-styles .metrics {
     border-bottom: none;
 }

third_party/WebKit/Source/devtools/front_end/elements/module.json

@@ -179,6 +179,7 @@
         "computedStyleSidebarPane.css",
         "elementsPanel.css",
         "elementsTreeOutline.css",
-        "spectrum.css"
+        "spectrum.css",
+        "platformFontsWidget.css"
     ]
 }

third_party/WebKit/Source/devtools/front_end/elements/platformFontsWidget.css

+/**
+ * Copyright 2016 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+:host {
+    -webkit-user-select: text;
+}
+
+.font-name {
+    font-weight: bold;
+}
+
+.font-usage {
+    color: #888;
+    padding-left: 3px;
+}
+
+.title {
+    padding: 0 5px;
+    border-top: 1px solid;
+    border-bottom: 1px solid;
+    border-color: #ddd;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    height: 24px;
+    background-color: #f1f1f1;
+    display: flex;
+    align-items: center;
+}
+
+.stats-section {
+    margin: 5px 0;
+}
+
+.font-stats-item {
+    padding-left: 1em;
+}
+
+.font-stats-item .font-delimeter {
+    margin: 0 1ex 0 1ex;
+}
+

third_party/WebKit/Source/devtools/front_end/ui/ThrottledWidget.js

@@ -5,10 +5,11 @@
 /**
  * @constructor
  * @extends {WebInspector.Widget}
+ * @param {boolean=} isWebComponent
  */
-WebInspector.ThrottledWidget = function()
+WebInspector.ThrottledWidget = function(isWebComponent)
 {
-    WebInspector.Widget.call(this);
+    WebInspector.Widget.call(this, isWebComponent);
     this._updateThrottler = new WebInspector.Throttler(100);
     this._updateWhenVisible = false;
 }