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

third_party/WebKit/Source/devtools/front_end/network/NetworkPanel.js

 /*
  * Copyright (C) 2007, 2008 Apple Inc.  All rights reserved.
  * Copyright (C) 2008, 2009 Anthony Ricaud <rik@webkit.org>
  * 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
@@ skipping 31 matching lines @@
     this._networkLogShowOverviewSetting = WebInspector.settings.createSetting("networkLogShowOverview", true);
     this._networkLogLargeRowsSetting = WebInspector.settings.createSetting("networkLogLargeRows", false);
     this._networkRecordFilmStripSetting = WebInspector.settings.createSetting("networkRecordFilmStripSetting", false);
     this._toggleRecordAction = /** @type {!WebInspector.Action }*/(WebInspector.actionRegistry.action("network.toggle-recording"));
 
     /** @type {?WebInspector.FilmStripView} */
     this._filmStripView = null;
     /** @type {?WebInspector.NetworkPanel.FilmStripRecorder} */
     this._filmStripRecorder = null;
 
-    this._panelToolbar = new WebInspector.Toolbar("", this.element);
+    this._panelToolbar = new WebInspector.Toolbar("", this.contentElement);
     this._filterBar = new WebInspector.FilterBar("networkPanel", true);
-    this._filterBar.show(this.element);
+    this._filterBar.show(this.contentElement);
 
     // Create top overview component.
     this._overviewPane = new WebInspector.TimelineOverviewPane("network");
     this._overviewPane.addEventListener(WebInspector.TimelineOverviewPane.Events.WindowChanged, this._onWindowChanged.bind(this));
     this._overviewPane.element.id = "network-overview-panel";
     this._networkOverview = new WebInspector.NetworkOverview();
     this._overviewPane.setOverviewControls([this._networkOverview]);
     this._calculator = new WebInspector.NetworkTransferTimeCalculator();
 
     this._splitWidget = new WebInspector.SplitWidget(true, false, "networkPanelSplitViewState");
     this._splitWidget.hideMain();
 
-    this._splitWidget.show(this.element);
+    this._splitWidget.show(this.contentElement);
 
     this._progressBarContainer = createElement("div");
     this._createToolbarButtons();
 
     this._searchableView = new WebInspector.SearchableView(this);
     this._searchableView.setPlaceholder(WebInspector.UIString("Find by filename or path"));
 
     /** @type {!WebInspector.NetworkLogView} */
     this._networkLogView = new WebInspector.NetworkLogView(this._filterBar, this._progressBarContainer, this._networkLogLargeRowsSetting);
     this._networkLogView.show(this._searchableView.element);
@@ skipping 200 matching lines @@
 
     _toggleLargerRequests: function()
     {
         this._updateUI();
     },
 
     _toggleShowOverview: function()
     {
         var toggled = this._networkLogShowOverviewSetting.get();
         if (toggled)
-            this._overviewPane.show(this.element, this._splitWidget.element);
+            this._overviewPane.show(this.contentElement, this._splitWidget.element);
         else
             this._overviewPane.detach();
         this.doResize();
     },
 
     _toggleRecordFilmStrip: function()
     {
         var toggled = this._networkRecordFilmStripSetting.get();
         if (toggled && !this._filmStripRecorder) {
             this._filmStripView = new WebInspector.FilmStripView();
             this._filmStripView.setMode(WebInspector.FilmStripView.Modes.FrameBased);
             this._filmStripView.element.classList.add("network-film-strip");
             this._filmStripRecorder = new WebInspector.NetworkPanel.FilmStripRecorder(this._networkLogView.timeCalculator(), this._filmStripView);
-            this._filmStripView.show(this.element, this.element.firstElementChild);
+            this._filmStripView.show(this.contentElement, this._networkLogShowOverviewSetting.get() ? this._overviewPane.element : this._splitWidget.element);
             this._filmStripView.addEventListener(WebInspector.FilmStripView.Events.FrameSelected, this._onFilmFrameSelected, this);
             this._filmStripView.addEventListener(WebInspector.FilmStripView.Events.FrameEnter, this._onFilmFrameEnter, this);
             this._filmStripView.addEventListener(WebInspector.FilmStripView.Events.FrameExit, this._onFilmFrameExit, this);
             this._resetFilmStripView();
         }
 
         if (!toggled && this._filmStripRecorder) {
             this._filmStripView.detach();
             this._filmStripView = null;
             this._filmStripRecorder = null;
@@ skipping 194 matching lines @@
         }
 
         /**
          * @this {WebInspector.NetworkPanel}
          */
         function appendRevealItem(request)
         {
             contextMenu.appendItem(WebInspector.UIString.capitalize("Reveal in Network ^panel"), reveal.bind(this, request));
         }
 
-        if (event.target.isSelfOrDescendant(this.element))
+        if (event.target.isSelfOrDescendant(this.contentElement))
             return;
 
         if (target instanceof WebInspector.Resource) {
             var resource = /** @type {!WebInspector.Resource} */ (target);
             if (resource.request)
                 appendRevealItem.call(this, resource.request);
             return;
         }
         if (target instanceof WebInspector.UISourceCode) {
             var uiSourceCode = /** @type {!WebInspector.UISourceCode} */ (target);
@@ skipping 241 matching lines @@
      * @return {boolean}
      */
     handleAction: function(context, actionId)
     {
         var panel = WebInspector.context.flavor(WebInspector.NetworkPanel);
         console.assert(panel && panel instanceof WebInspector.NetworkPanel);
         panel._toggleRecording();
         return true;
     }
 }