DevTools: extract a component for layer viewer

third_party/WebKit/Source/devtools/front_end/layer_viewer/PaintProfilerView.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 17 matching lines @@
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
 /**
  * @constructor
  * @param {function(string=)} showImageCallback
  * @extends {WebInspector.HBox}
  */
 WebInspector.PaintProfilerView = function(showImageCallback)
 {
-    WebInspector.HBox.call(this);
-    this.element.classList.add("paint-profiler-overview", "hbox");
-    this._canvasContainer = this.element.createChild("div", "paint-profiler-canvas-container");
-    this._progressBanner = this.element.createChild("div", "banner hidden");
+    WebInspector.HBox.call(this, true);
+    this.registerRequiredCSS("layer_viewer/paintProfiler.css");
+    this.contentElement.classList.add("paint-profiler-overview");
+    this._canvasContainer = this.contentElement.createChild("div", "paint-profiler-canvas-container");
+    this._progressBanner = this.contentElement.createChild("div", "banner hidden");
     this._progressBanner.textContent = WebInspector.UIString("Profiling\u2026");
     this._pieChart = new WebInspector.PieChart(55, this._formatPieChartTime.bind(this), true);
     this._pieChart.element.classList.add("paint-profiler-pie-chart");
-    this.element.appendChild(this._pieChart.element);
+    this.contentElement.appendChild(this._pieChart.element);
 
     this._showImageCallback = showImageCallback;
 
     this._canvas = this._canvasContainer.createChild("canvas", "fill");
     this._context = this._canvas.getContext("2d");
     this._selectionWindow = new WebInspector.OverviewGrid.Window(this._canvasContainer);
     this._selectionWindow.addEventListener(WebInspector.OverviewGrid.Events.WindowChanged, this._onWindowChanged, this);
 
     this._innerBarWidth = 4 * window.devicePixelRatio;
     this._minBarHeight = window.devicePixelRatio;
@@ skipping 196 matching lines @@
 };
 
 /**
  * @constructor
  * @extends {WebInspector.VBox}
  */
 WebInspector.PaintProfilerCommandLogView = function()
 {
     WebInspector.VBox.call(this);
     this.setMinimumSize(100, 25);
-    this.element.classList.add("profiler-log-view");
+    this.element.classList.add("overflow-auto");
 
     this._treeOutline = new TreeOutlineInShadow();
     this.element.appendChild(this._treeOutline.element);
 
     this._reset();
 }
 
 WebInspector.PaintProfilerCommandLogView.prototype = {
     /**
      * @param {?WebInspector.Target} target
@@ skipping 246 matching lines @@
     var method = logItem.method.toTitleCase();
 
     var logItemCategories = WebInspector.PaintProfilerView._initLogItemCategories();
     var result = logItemCategories[method];
     if (!result) {
         result = WebInspector.PaintProfilerView.categories()["misc"];
         logItemCategories[method] = result;
     }
     return result;
 }