[DevTools] Turn WebInspector.Panel into a web component.

third_party/WebKit/Source/devtools/front_end/timeline/TimelinePanel.js

 /*
  * Copyright (C) 2012 Google Inc. All rights reserved.
  * Copyright (C) 2012 Intel 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.
@@ skipping 22 matching lines @@
  * @constructor
  * @extends {WebInspector.Panel}
  * @implements {WebInspector.TimelineLifecycleDelegate}
  * @implements {WebInspector.TimelineModeViewDelegate}
  * @implements {WebInspector.Searchable}
  */
 WebInspector.TimelinePanel = function()
 {
     WebInspector.Panel.call(this, "timeline");
     this.registerRequiredCSS("timeline/timelinePanel.css");
-    this.element.addEventListener("contextmenu", this._contextMenu.bind(this), false);
-    this._dropTarget = new WebInspector.DropTarget(this.element, [WebInspector.DropTarget.Types.Files, WebInspector.DropTarget.Types.URIList], WebInspector.UIString("Drop timeline file or URL here"), this._handleDrop.bind(this));
+    this.contentElement.addEventListener("contextmenu", this._contextMenu.bind(this), false);
+    this._dropTarget = new WebInspector.DropTarget(this.contentElement, [WebInspector.DropTarget.Types.Files, WebInspector.DropTarget.Types.URIList], WebInspector.UIString("Drop timeline file or URL here"), this._handleDrop.bind(this));
 
     this._state = WebInspector.TimelinePanel.State.Idle;
     this._detailsLinkifier = new WebInspector.Linkifier();
     this._windowStartTime = 0;
     this._windowEndTime = Infinity;
     this._millisecondsToRecordAfterLoadEvent = 3000;
     this._toggleRecordAction = /** @type {!WebInspector.Action }*/ (WebInspector.actionRegistry.action("timeline.toggle-recording"));
     this._customCPUThrottlingRate = 0;
 
     /** @type {!Array<!WebInspector.TimelineModel.Filter>} */
@@ skipping 15 matching lines @@
 
     /** @type {!Array.<!WebInspector.TimelineModeView>} */
     this._currentViews = [];
 
     this._captureNetworkSetting = WebInspector.settings.createSetting("timelineCaptureNetwork", false);
     this._captureJSProfileSetting = WebInspector.settings.createSetting("timelineEnableJSSampling", true);
     this._captureMemorySetting = WebInspector.settings.createSetting("timelineCaptureMemory", false);
     this._captureLayersAndPicturesSetting = WebInspector.settings.createSetting("timelineCaptureLayersAndPictures", false);
     this._captureFilmStripSetting = WebInspector.settings.createSetting("timelineCaptureFilmStrip", false);
 
-    this._panelToolbar = new WebInspector.Toolbar("", this.element);
+    this._panelToolbar = new WebInspector.Toolbar("", this.contentElement);
     this._createToolbarItems();
 
     var timelinePane = new WebInspector.VBox();
-    timelinePane.show(this.element);
+    timelinePane.show(this.contentElement);
     var topPaneElement = timelinePane.element.createChild("div", "hbox");
     topPaneElement.id = "timeline-overview-panel";
 
     // Create top overview component.
     this._overviewPane = new WebInspector.TimelineOverviewPane("timeline");
     this._overviewPane.addEventListener(WebInspector.TimelineOverviewPane.Events.WindowChanged, this._onWindowChanged.bind(this));
     this._overviewPane.show(topPaneElement);
     this._statusPaneContainer = timelinePane.element.createChild("div", "status-pane-container fill");
 
     this._createFileSelector();
@@ skipping 350 matching lines @@
     {
         console.assert(this._state === WebInspector.TimelinePanel.State.Idle);
         this._setState(WebInspector.TimelinePanel.State.Loading);
     },
 
     _createFileSelector: function()
     {
         if (this._fileSelectorElement)
             this._fileSelectorElement.remove();
         this._fileSelectorElement = WebInspector.createFileSelectorElement(this._loadFromFile.bind(this));
-        this.element.appendChild(this._fileSelectorElement);
+        this.contentElement.appendChild(this._fileSelectorElement);
     },
 
     /**
      * @param {!Event} event
      */
     _contextMenu: function(event)
     {
         var contextMenu = new WebInspector.ContextMenu(event);
         contextMenu.appendItemsAtLocation("timelineMenu");
         contextMenu.show();
@@ skipping 1650 matching lines @@
     _onKeyDown: function(event)
     {
         if (event.keyCode === WebInspector.KeyboardShortcut.Keys.Enter.code) {
             event.preventDefault();
             this._apply();
         }
     },
 
     __proto__: WebInspector.HBox.prototype
 }