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

third_party/WebKit/Source/devtools/front_end/sources/SourcesPanel.js

 /*
  * Copyright (C) 2008 Apple Inc. All Rights Reserved.
  * Copyright (C) 2011 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:
  * 1. Redistributions of source code must retain the above copyright
  *    notice, this list of conditions and the following disclaimer.
  * 2. Redistributions in binary form must reproduce the above copyright
@@ skipping 18 matching lines @@
  * @extends {WebInspector.Panel}
  * @implements {WebInspector.ContextMenu.Provider}
  * @implements {WebInspector.TargetManager.Observer}
  * @implements {WebInspector.ViewLocationResolver}
  */
 WebInspector.SourcesPanel = function()
 {
     WebInspector.Panel.call(this, "sources");
     WebInspector.SourcesPanel._instance = this;
     this.registerRequiredCSS("sources/sourcesPanel.css");
-    new WebInspector.DropTarget(this.element, [WebInspector.DropTarget.Types.Files], WebInspector.UIString("Drop workspace folder here"), this._handleDrop.bind(this));
+    new WebInspector.DropTarget(this.contentElement, [WebInspector.DropTarget.Types.Files], WebInspector.UIString("Drop workspace folder here"), this._handleDrop.bind(this));
 
     this._workspace = WebInspector.workspace;
     this._networkMapping = WebInspector.networkMapping;
 
     this._runSnippetAction = /** @type {!WebInspector.Action }*/ (WebInspector.actionRegistry.action("debugger.run-snippet"));
     this._togglePauseAction = /** @type {!WebInspector.Action }*/ (WebInspector.actionRegistry.action("debugger.toggle-pause"));
     this._stepOverAction = /** @type {!WebInspector.Action }*/ (WebInspector.actionRegistry.action("debugger.step-over"));
     this._stepIntoAction = /** @type {!WebInspector.Action }*/ (WebInspector.actionRegistry.action("debugger.step-into"));
     this._stepOutAction = /** @type {!WebInspector.Action }*/ (WebInspector.actionRegistry.action("debugger.step-out"));
     this._toggleBreakpointsActiveAction = /** @type {!WebInspector.Action }*/ (WebInspector.actionRegistry.action("debugger.toggle-breakpoints-active"));
 
     this._debugToolbar = this._createDebugToolbar();
     this._debugToolbarDrawer = this._createDebugToolbarDrawer();
 
     const initialDebugSidebarWidth = 225;
     this._splitWidget = new WebInspector.SplitWidget(true, true, "sourcesPanelSplitViewState", initialDebugSidebarWidth);
     this._splitWidget.enableShowModeSaving();
-    this._splitWidget.show(this.element);
+    this._splitWidget.show(this.contentElement);
 
     // Create scripts navigator
     const initialNavigatorWidth = 225;
     this.editorView = new WebInspector.SplitWidget(true, false, "sourcesPanelNavigatorSplitViewState", initialNavigatorWidth);
     this.editorView.enableShowModeSaving();
     this.editorView.element.tabIndex = 0;
     this._splitWidget.setMainWidget(this.editorView);
 
     // Create navigator tabbed pane with toolbar.
     this._navigatorTabbedLocation = WebInspector.viewManager.createTabbedLocation(this._revealNavigatorSidebar.bind(this), "navigator-view", true);
@@ skipping 153 matching lines @@
     _ensureSourcesViewVisible: function()
     {
         if (WebInspector.SourcesPanel.WrapperView.isShowing())
             return true;
         return this === WebInspector.inspectorView.setCurrentPanel(this);
     },
 
     onResize: function()
     {
         if (WebInspector.moduleSetting("sidebarPosition").get() === "auto")
-            this.element.window().requestAnimationFrame(this._updateSidebarPosition.bind(this));  // Do not force layout.
+            this.contentElement.window().requestAnimationFrame(this._updateSidebarPosition.bind(this));  // Do not force layout.
     },
 
     /**
      * @override
      * @return {!WebInspector.SearchableView}
      */
     searchableView: function()
     {
         return this._sourcesView.searchableView();
     },
@@ skipping 1119 matching lines @@
     __proto__: WebInspector.VBox.prototype
 }
 
 /**
  * @return {boolean}
  */
 WebInspector.SourcesPanel.WrapperView.isShowing = function()
 {
     return !!WebInspector.SourcesPanel.WrapperView._instance && WebInspector.SourcesPanel.WrapperView._instance.isShowing();
 }