DevTools: make flame chart a web component.

Source/devtools/front_end/elements/ElementsPanel.js

Index: Source/devtools/front_end/elements/ElementsPanel.js
diff --git a/Source/devtools/front_end/elements/ElementsPanel.js b/Source/devtools/front_end/elements/ElementsPanel.js
index 2273d2c45a64e011eed270b95e32dfda1d106aa9..51a70ae0ea5568fc9d32273ff207ee105f97e3da 100644
--- a/Source/devtools/front_end/elements/ElementsPanel.js
+++ b/Source/devtools/front_end/elements/ElementsPanel.js
@@ -48,10 +48,10 @@ WebInspector.ElementsPanel = function()
     this._searchableView.show(this._splitView.mainElement());
     var stackElement = this._searchableView.element;
 
-    this.contentElement = stackElement.createChild("div");
-    this.contentElement.id = "elements-content";
+    this._contentElement = stackElement.createChild("div");
+    this._contentElement.id = "elements-content";
     if (!WebInspector.settings.domWordWrap.get())
-        this.contentElement.classList.add("nowrap");
+        this._contentElement.classList.add("nowrap");
     WebInspector.settings.domWordWrap.addChangeListener(this._domWordWrapSettingChanged.bind(this));
 
     this._splitView.sidebarElement().addEventListener("contextmenu", this._sidebarContextMenuEventFired.bind(this), false);
@@ -196,8 +196,8 @@ WebInspector.ElementsPanel.prototype = {
         for (var i = 0; i < this._treeOutlines.length; ++i) {
             var treeOutline = this._treeOutlines[i];
             // Attach heavy component lazily
-            if (treeOutline.element.parentElement !== this.contentElement)
-                this.contentElement.appendChild(treeOutline.element);
+            if (treeOutline.element.parentElement !== this._contentElement)
+                this._contentElement.appendChild(treeOutline.element);
         }
         WebInspector.Panel.prototype.wasShown.call(this);
         this.updateBreadcrumb();
@@ -223,7 +223,7 @@ WebInspector.ElementsPanel.prototype = {
             treeOutline.domModel().hideDOMNodeHighlight();
             treeOutline.setVisible(false);
             // Detach heavy component on hide
-            this.contentElement.removeChild(treeOutline.element);
+            this._contentElement.removeChild(treeOutline.element);
         }
         this._popoverHelper.hidePopover();
         WebInspector.Panel.prototype.willHide.call(this);
@@ -443,9 +443,9 @@ WebInspector.ElementsPanel.prototype = {
     _domWordWrapSettingChanged: function(event)
     {
         if (event.data)
-            this.contentElement.classList.remove("nowrap");
+            this._contentElement.classList.remove("nowrap");
         else
-            this.contentElement.classList.add("nowrap");
+            this._contentElement.classList.add("nowrap");
 
         var selectedNode = this.selectedDOMNode();
         if (!selectedNode)
@@ -855,7 +855,7 @@ WebInspector.ElementsPanel.prototype = {
         }
 
         // Layout 1: Measure total and normal crumb sizes
-        var contentElementWidth = this.contentElement.offsetWidth;
+        var contentElementWidth = this._contentElement.offsetWidth;
         var normalSizes = [];
         for (var i = 0; i < crumbs.childNodes.length; ++i) {
             var crumb = crumbs.childNodes[i];