DevTools: make flame chart a web component.

Source/devtools/front_end/elements/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 30 matching lines @@
 
     this._splitView = new WebInspector.SplitView(true, true, "elementsPanelSplitViewState", 325, 325);
     this._splitView.addEventListener(WebInspector.SplitView.Events.SidebarSizeChanged, this._updateTreeOutlineVisibleWidth.bind(this));
     this._splitView.show(this.element);
 
     this._searchableView = new WebInspector.SearchableView(this);
     this._searchableView.setMinimumSize(25, 19);
     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";
     // FIXME: crbug.com/425984
     if (WebInspector.settings.domWordWrap.get())
         this.contentElement.classList.add("elements-wrap");
     WebInspector.settings.domWordWrap.addChangeListener(this._domWordWrapSettingChanged.bind(this));
 
     this._splitView.sidebarElement().addEventListener("contextmenu", this._sidebarContextMenuEventFired.bind(this), false);
 
     var crumbsContainer = stackElement.createChild("div");
     crumbsContainer.id = "elements-crumbs";
     this.crumbsElement = crumbsContainer.createChild("div", "crumbs");
@@ skipping 128 matching lines @@
     searchableView: function()
     {
         return this._searchableView;
     },
 
     wasShown: function()
     {
         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();
 
         for (var i = 0; i < this._treeOutlines.length; ++i) {
             var treeOutline = this._treeOutlines[i];
             treeOutline.updateSelection();
             treeOutline.setVisible(true);
 
             if (!treeOutline.rootDOMNode)
                 if (treeOutline.domModel().existingDocument())
                     this._documentUpdated(treeOutline.domModel(), treeOutline.domModel().existingDocument());
                 else
                     treeOutline.domModel().requestDocument();
         }
 
     },
 
     willHide: function()
     {
         for (var i = 0; i < this._treeOutlines.length; ++i) {
             var treeOutline = this._treeOutlines[i];
             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);
     },
 
     onResize: function()
     {
         this._updateTreeOutlineVisibleWidth();
     },
 
@@ skipping 200 matching lines @@
             this._currentSearchResultIndex = -1;
 
             if (shouldJump)
                 this._jumpToSearchResult(jumpBackwards ? -1 : 0);
         }
     },
 
     _domWordWrapSettingChanged: function(event)
     {
         // FIXME: crbug.com/425984
-        this.contentElement.classList.toggle("elements-wrap", event.data);
+        this._contentElement.classList.toggle("elements-wrap", event.data);
         for (var i = 0; i < this._treeOutlines.length; ++i)
             this._treeOutlines[i].setWordWrap(/** @type {boolean} */ (event.data));
 
         var selectedNode = this.selectedDOMNode();
         if (!selectedNode)
             return;
 
         var treeElement = this._treeElementForNode(selectedNode);
         if (treeElement)
             treeElement.updateSelection(); // Recalculate selection highlight dimensions.
@@ skipping 403 matching lines @@
             }
 
             // Find the focused crumb index.
             if (crumb === focusedCrumb)
                 focusedIndex = i;
 
             crumb.classList.remove("compact", "collapsed", "hidden");
         }
 
         // 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];
             normalSizes[i] = crumb.offsetWidth;
         }
 
         // Layout 2: Measure collapsed crumb sizes
         var compactSizes = [];
         for (var i = 0; i < crumbs.childNodes.length; ++i) {
             var crumb = crumbs.childNodes[i];
@@ skipping 686 matching lines @@
 
 WebInspector.ElementsPanelFactory.prototype = {
     /**
      * @return {!WebInspector.Panel}
      */
     createPanel: function()
     {
         return WebInspector.ElementsPanel.instance();
     }
 }