DevTools: make flame chart a web component.

Source/devtools/front_end/components/FlameChart.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 32 matching lines @@
 
 /**
  * @constructor
  * @extends {WebInspector.HBox}
  * @param {!WebInspector.FlameChartDataProvider} dataProvider
  * @param {!WebInspector.FlameChartDelegate} flameChartDelegate
  * @param {boolean} isTopDown
  */
 WebInspector.FlameChart = function(dataProvider, flameChartDelegate, isTopDown)
 {
-    WebInspector.HBox.call(this);
-    this.registerRequiredCSS("flameChart.css");
-    this.element.classList.add("flame-chart-main-pane");
+    WebInspector.HBox.call(this, true);
+    this.contentElement.appendChild(WebInspector.View.createStyleElement("flameChart.css"));
+    this.contentElement.classList.add("flame-chart-main-pane");
     this._flameChartDelegate = flameChartDelegate;
     this._isTopDown = isTopDown;
 
     this._calculator = new WebInspector.FlameChart.Calculator();
 
-    this._canvas = this.element.createChild("canvas");
+    this._canvas = this.contentElement.createChild("canvas");
     this._canvas.tabIndex = 1;
     this.setDefaultFocusedElement(this._canvas);
     this._canvas.addEventListener("mousemove", this._onMouseMove.bind(this), false);
     this._canvas.addEventListener("mousewheel", this._onMouseWheel.bind(this), false);
     this._canvas.addEventListener("click", this._onClick.bind(this), false);
     this._canvas.addEventListener("keydown", this._onKeyDown.bind(this), false);
     WebInspector.installDragHandle(this._canvas, this._startCanvasDragging.bind(this), this._canvasDragging.bind(this), this._endCanvasDragging.bind(this), "move", null);
 
-    this._vScrollElement = this.element.createChild("div", "flame-chart-v-scroll");
+    this._vScrollElement = this.contentElement.createChild("div", "flame-chart-v-scroll");
     this._vScrollContent = this._vScrollElement.createChild("div");
     this._vScrollElement.addEventListener("scroll", this.scheduleUpdate.bind(this), false);
 
-    this._entryInfo = this.element.createChild("div", "profile-entry-info");
-    this._markerHighlighElement = this.element.createChild("div", "flame-chart-marker-highlight-element");
-    this._highlightElement = this.element.createChild("div", "flame-chart-highlight-element");
-    this._selectedElement = this.element.createChild("div", "flame-chart-selected-element");
+    this._entryInfo = this.contentElement.createChild("div", "flame-chart-entry-info");
+    this._markerHighlighElement = this.contentElement.createChild("div", "flame-chart-marker-highlight-element");
+    this._highlightElement = this.contentElement.createChild("div", "flame-chart-highlight-element");
+    this._selectedElement = this.contentElement.createChild("div", "flame-chart-selected-element");
 
     this._dataProvider = dataProvider;
 
     this._windowLeft = 0.0;
     this._windowRight = 1.0;
     this._windowWidth = 1.0;
     this._timeWindowLeft = 0;
     this._timeWindowRight = Infinity;
     this._barHeight = dataProvider.barHeight();
     this._barHeightDelta = this._isTopDown ? -this._barHeight : this._barHeight;
@@ skipping 877 matching lines @@
         if (element.parentElement)
             element.remove();
         var markerIndex = this._highlightedMarkerIndex;
         if (markerIndex === -1)
             return;
         var barX = this._timeToPosition(this._timelineData().markerTimestamps[markerIndex]);
         element.title = this._dataProvider.markerTitle(markerIndex);
         var style = element.style;
         style.left = barX + "px";
         style.backgroundColor = this._dataProvider.markerColor(markerIndex);
-        this.element.appendChild(element);
+        this.contentElement.appendChild(element);
     },
 
     /**
      * @param {?WebInspector.FlameChart.TimelineData} timelineData
      */
     _processTimelineData: function(timelineData)
     {
         if (!timelineData) {
             this._timelineLevels = null;
             this._rawTimelineData = null;
@@ skipping 41 matching lines @@
         var barRight = this._timeToPosition(timeRange.endTime);
         if (barRight === 0 || barX === this._canvas.width)
             return;
         var barWidth = Math.max(barRight - barX, this._minWidth);
         var barY = this._levelToHeight(timelineData.entryLevels[entryIndex]) - this._scrollTop;
         var style = element.style;
         style.left = barX + "px";
         style.top = barY + "px";
         style.width = barWidth + "px";
         style.height = this._barHeight + "px";
-        this.element.appendChild(element);
+        this.contentElement.appendChild(element);
     },
 
     /**
      * @param {number} time
      */
     _timeToPosition: function(time)
     {
         var value = Math.floor((time - this._minimumBoundary) * this._timeToPixel) - this._pixelWindowLeft + this._paddingLeft;
         return Math.min(this._canvas.width, Math.max(0, value));
     },
@@ skipping 98 matching lines @@
     onResize: function()
     {
         this._updateScrollBar();
         this.scheduleUpdate();
     },
 
     _updateScrollBar: function()
     {
         var showScroll = this._totalHeight > this._offsetHeight;
         this._vScrollElement.classList.toggle("hidden", !showScroll);
-        this._offsetWidth = this.element.offsetWidth - (WebInspector.isMac() ? 0 : this._vScrollElement.offsetWidth);
-        this._offsetHeight = this.element.offsetHeight;
+        this._offsetWidth = this.contentElement.offsetWidth - (WebInspector.isMac() ? 0 : this._vScrollElement.offsetWidth);
+        this._offsetHeight = this.contentElement.offsetHeight;
     },
 
     scheduleUpdate: function()
     {
         if (this._updateTimerId || this._cancelWindowTimesAnimation)
             return;
         this._updateTimerId = requestAnimationFrame(this.update.bind(this));
     },
 
     update: function()
@@ skipping 11 matching lines @@
     {
         this._highlightedMarkerIndex = -1;
         this._highlightedEntryIndex = -1;
         this._selectedEntryIndex = -1;
         this._textWidth = {};
         this.update();
     },
 
     __proto__: WebInspector.HBox.prototype
 }