Web Inspector: Add a dedicated Network tab that is always live
authortimothy@apple.com <timothy@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 6 Jul 2015 19:44:23 +0000 (19:44 +0000)
committertimothy@apple.com <timothy@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 6 Jul 2015 19:44:23 +0000 (19:44 +0000)
https://bugs.webkit.org/show_bug.cgi?id=146568

Source/WebCore:

Make sure the executionStopwatch is always started and never stops so resource loads
always get timestamps, even when Timeline is not recording.

Reviewed by Joseph Pecoraro.

* inspector/InspectorPageAgent.cpp:
(WebCore::InspectorPageAgent::enable): Start executionStopwatch.
(WebCore::InspectorPageAgent::frameStartedLoading): Reset and start executionStopwatch.
* inspector/InspectorTimelineAgent.cpp:
(WebCore::InspectorTimelineAgent::internalStart): Removed executionStopwatch code.
(WebCore::InspectorTimelineAgent::internalStop): Ditto.

Source/WebInspectorUI:

Reviewed by Joseph Pecoraro.

* Localizations/en.lproj/localizedStrings.js: Updated.

* UserInterface/Base/Main.js:
(WebInspector.loaded):
(WebInspector.isTabTypeAllowed):
(WebInspector._tabContentViewForType):
(WebInspector._updateNewTabButtonState):
Add NetworkTabContentView to the right places.

* UserInterface/Controllers/TimelineManager.js:
(WebInspector.TimelineManager):
(WebInspector.TimelineManager.prototype.get persistentNetworkTimeline):
(WebInspector.TimelineManager.prototype._mainResourceDidChange):
(WebInspector.TimelineManager.prototype._resourceWasAdded):
Add a persistent network timeline that always has all resources.

* UserInterface/Images/Network.svg: Added.

* UserInterface/Main.html: Added new files.

* UserInterface/Views/NavigationSidebarPanel.css:
(.sidebar > .panel.navigation > .content):
Drive-by fix. The bottom was off by one. This caused misalignment between sidebar and content view when
scrolled all the way to the bottom of the content view.

* UserInterface/Views/NetworkGridContentView.css: Added.
(.content-view.network-grid > .data-grid):
(.content-view.network-grid > .data-grid th):
(.content-view.network-grid > .data-grid td):
(.content-view.network-grid > .data-grid table.data):
Mostly copied from TimelineView.css and NetworkTimelineView.css.

* UserInterface/Views/NetworkGridContentView.js: Added.
(WebInspector.NetworkGridContentView):
(WebInspector.NetworkGridContentView.prototype.get navigationSidebarTreeOutline):
(WebInspector.NetworkGridContentView.prototype.get selectionPathComponents):
(WebInspector.NetworkGridContentView.prototype.get zeroTime):
(WebInspector.NetworkGridContentView.prototype.shown):
(WebInspector.NetworkGridContentView.prototype.hidden):
(WebInspector.NetworkGridContentView.prototype.closed):
(WebInspector.NetworkGridContentView.prototype.updateLayout):
(WebInspector.NetworkGridContentView.prototype.needsLayout):
(WebInspector.NetworkGridContentView.prototype.reset):
(WebInspector.NetworkGridContentView.prototype._processPendingRecords):
(WebInspector.NetworkGridContentView.prototype._networkTimelineReset):
(WebInspector.NetworkGridContentView.prototype._networkTimelineRecordAdded):
(WebInspector.NetworkGridContentView.prototype._treeElementPathComponentSelected):
(WebInspector.NetworkGridContentView.prototype._dataGridNodeSelected):
Mostly copied from NetworkTimelineView.

* UserInterface/Views/NetworkSidebarPanel.css: Added.
(.sidebar > .panel.navigation.network > :matches(.content, .empty-content-placeholder)):
(.sidebar > .panel.navigation.network > .navigation-bar):
(.sidebar > .panel.navigation.network > .title-bar):
(.sidebar > .panel.navigation.network.network-grid-content-view-showing > .content):
(.sidebar > .panel.navigation.network .item:hover:not(.selected) .status .close.status-button):
(.sidebar > .panel.navigation.network:not(.network-grid-content-view-showing) .status .go-to-arrow.status-button):
(.sidebar > .panel.navigation.network.network-grid-content-view-showing .status .close.status-button):
(.sidebar > .panel.navigation.network.network-grid-content-view-showing .navigation-sidebar-panel-content-tree-outline.network-grid .item .subtitle):
(.sidebar > .panel.navigation.network > .content > .navigation-sidebar-panel-content-tree-outline):
(.sidebar > .panel.navigation.network.network-grid-content-view-showing > .content > .navigation-sidebar-panel-content-tree-outline):
Mostly copied from TimelineSidebarPanel.css and NetworkTimelineView.css.

* UserInterface/Views/NetworkSidebarPanel.js: Added.
(WebInspector.NetworkSidebarPanel):
(WebInspector.NetworkSidebarPanel.prototype.closed):
(WebInspector.NetworkSidebarPanel.prototype.showDefaultContentView):
(WebInspector.NetworkSidebarPanel.prototype.saveStateToCookie):
(WebInspector.NetworkSidebarPanel.prototype.restoreStateFromCookie):
(WebInspector.NetworkSidebarPanel.prototype.hasCustomFilters):
(WebInspector.NetworkSidebarPanel.prototype.matchTreeElementAgainstCustomFilters.match):
(WebInspector.NetworkSidebarPanel.prototype.matchTreeElementAgainstCustomFilters):
(WebInspector.NetworkSidebarPanel.prototype.treeElementAddedOrChanged):
(WebInspector.NetworkSidebarPanel.prototype._networkTimelineReset):
(WebInspector.NetworkSidebarPanel.prototype._contentBrowserCurrentContentViewDidChange):
(WebInspector.NetworkSidebarPanel.prototype._treeElementGoToArrowWasClicked):
(WebInspector.NetworkSidebarPanel.prototype._treeElementCloseButtonClicked):
(WebInspector.NetworkSidebarPanel.prototype._canShowDifferentContentView):
(WebInspector.NetworkSidebarPanel.prototype._treeElementSelected):
(WebInspector.NetworkSidebarPanel.prototype._scopeBarSelectionDidChange):
A hybrid of ResourceSidebarPanel and TimelineSidebarPanel.

* UserInterface/Views/NetworkTabContentView.js: Added.
(WebInspector.NetworkTabContentView):
(WebInspector.NetworkTabContentView.prototype.get type):
(WebInspector.NetworkTabContentView.prototype.canShowRepresentedObject):

* UserInterface/Views/NewTabContentView.js:
(WebInspector.NewTabContentView): Add Network tab and sort the tabs by their localized name.

* UserInterface/Views/TabBar.js:
(WebInspector.TabBar.prototype._handleNewTabClick):
Drive-by fix. Don't fire the click event if the new tab button is disabled.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@186368 268f45cc-cd09-0410-ab3c-d52691b4dbfc

18 files changed:
Source/WebCore/ChangeLog
Source/WebCore/inspector/InspectorPageAgent.cpp
Source/WebCore/inspector/InspectorTimelineAgent.cpp
Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
Source/WebInspectorUI/UserInterface/Base/Main.js
Source/WebInspectorUI/UserInterface/Controllers/TimelineManager.js
Source/WebInspectorUI/UserInterface/Images/Network.svg [new file with mode: 0644]
Source/WebInspectorUI/UserInterface/Main.html
Source/WebInspectorUI/UserInterface/Models/Timeline.js
Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.css
Source/WebInspectorUI/UserInterface/Views/NetworkGridContentView.css [new file with mode: 0644]
Source/WebInspectorUI/UserInterface/Views/NetworkGridContentView.js [new file with mode: 0644]
Source/WebInspectorUI/UserInterface/Views/NetworkSidebarPanel.css [new file with mode: 0644]
Source/WebInspectorUI/UserInterface/Views/NetworkSidebarPanel.js [new file with mode: 0644]
Source/WebInspectorUI/UserInterface/Views/NetworkTabContentView.js [new file with mode: 0644]
Source/WebInspectorUI/UserInterface/Views/NewTabContentView.js
Source/WebInspectorUI/UserInterface/Views/TabBar.js

index 9dca9d2..2165b26 100644 (file)
@@ -1,3 +1,20 @@
+2015-07-04  Timothy Hatcher  <timothy@apple.com>
+
+        Web Inspector: Add a dedicated Network tab that is always live
+        https://bugs.webkit.org/show_bug.cgi?id=146568
+
+        Make sure the executionStopwatch is always started and never stops so resource loads
+        always get timestamps, even when Timeline is not recording.
+
+        Reviewed by Joseph Pecoraro.
+
+        * inspector/InspectorPageAgent.cpp:
+        (WebCore::InspectorPageAgent::enable): Start executionStopwatch.
+        (WebCore::InspectorPageAgent::frameStartedLoading): Reset and start executionStopwatch.
+        * inspector/InspectorTimelineAgent.cpp:
+        (WebCore::InspectorTimelineAgent::internalStart): Removed executionStopwatch code.
+        (WebCore::InspectorTimelineAgent::internalStop): Ditto.
+
 2015-07-02  Timothy Hatcher  <timothy@apple.com>
 
         Update the localized strings file.
 2015-07-02  Timothy Hatcher  <timothy@apple.com>
 
         Update the localized strings file.
index 3e9febe..6f02683 100644 (file)
@@ -367,6 +367,8 @@ void InspectorPageAgent::enable(ErrorString&)
     m_enabled = true;
     m_instrumentingAgents->setInspectorPageAgent(this);
 
     m_enabled = true;
     m_instrumentingAgents->setInspectorPageAgent(this);
 
+    m_instrumentingAgents->inspectorEnvironment().executionStopwatch()->start();
+
     if (Frame* frame = mainFrame())
         m_originalScriptExecutionDisabled = !frame->settings().isScriptEnabled();
 }
     if (Frame* frame = mainFrame())
         m_originalScriptExecutionDisabled = !frame->settings().isScriptEnabled();
 }
@@ -819,6 +821,12 @@ void InspectorPageAgent::loaderDetachedFromFrame(DocumentLoader& loader)
 
 void InspectorPageAgent::frameStartedLoading(Frame& frame)
 {
 
 void InspectorPageAgent::frameStartedLoading(Frame& frame)
 {
+    if (frame.isMainFrame()) {
+        auto stopwatch = m_instrumentingAgents->inspectorEnvironment().executionStopwatch();
+        stopwatch->reset();
+        stopwatch->start();
+    }
+
     m_frontendDispatcher->frameStartedLoading(frameId(&frame));
 }
 
     m_frontendDispatcher->frameStartedLoading(frameId(&frame));
 }
 
index f5756a2..b97d106 100644 (file)
@@ -140,11 +140,6 @@ void InspectorTimelineAgent::internalStart(const int* maxCallStackDepth)
     else
         m_maxCallStackDepth = 5;
 
     else
         m_maxCallStackDepth = 5;
 
-    // If the debugger is paused the environment's stopwatch will be stopped, and shouldn't be
-    // restarted until the debugger continues.
-    if (!m_scriptDebugServer->isPaused())
-        m_instrumentingAgents->inspectorEnvironment().executionStopwatch()->start();
-
     m_instrumentingAgents->setInspectorTimelineAgent(this);
 
     if (m_scriptDebugServer)
     m_instrumentingAgents->setInspectorTimelineAgent(this);
 
     if (m_scriptDebugServer)
@@ -198,11 +193,6 @@ void InspectorTimelineAgent::internalStop()
     if (!m_enabled)
         return;
 
     if (!m_enabled)
         return;
 
-    // The environment's stopwatch could be already stopped if the debugger has paused.
-    auto stopwatch = m_instrumentingAgents->inspectorEnvironment().executionStopwatch();
-    if (stopwatch->isActive())
-        stopwatch->stop();
-
     m_instrumentingAgents->setInspectorTimelineAgent(nullptr);
 
     if (m_scriptDebugServer)
     m_instrumentingAgents->setInspectorTimelineAgent(nullptr);
 
     if (m_scriptDebugServer)
index 91d7c88..8aff412 100644 (file)
@@ -1,3 +1,104 @@
+2015-07-02  Timothy Hatcher  <timothy@apple.com>
+
+        Web Inspector: Add a dedicated Network tab that is always live
+        https://bugs.webkit.org/show_bug.cgi?id=146568
+
+        Reviewed by Joseph Pecoraro.
+
+        * Localizations/en.lproj/localizedStrings.js: Updated.
+
+        * UserInterface/Base/Main.js:
+        (WebInspector.loaded):
+        (WebInspector.isTabTypeAllowed):
+        (WebInspector._tabContentViewForType):
+        (WebInspector._updateNewTabButtonState):
+        Add NetworkTabContentView to the right places.
+
+        * UserInterface/Controllers/TimelineManager.js:
+        (WebInspector.TimelineManager):
+        (WebInspector.TimelineManager.prototype.get persistentNetworkTimeline):
+        (WebInspector.TimelineManager.prototype._mainResourceDidChange):
+        (WebInspector.TimelineManager.prototype._resourceWasAdded):
+        Add a persistent network timeline that always has all resources.
+
+        * UserInterface/Images/Network.svg: Added.
+
+        * UserInterface/Main.html: Added new files.
+
+        * UserInterface/Views/NavigationSidebarPanel.css:
+        (.sidebar > .panel.navigation > .content):
+        Drive-by fix. The bottom was off by one. This caused misalignment between sidebar and content view when
+        scrolled all the way to the bottom of the content view.
+
+        * UserInterface/Views/NetworkGridContentView.css: Added.
+        (.content-view.network-grid > .data-grid):
+        (.content-view.network-grid > .data-grid th):
+        (.content-view.network-grid > .data-grid td):
+        (.content-view.network-grid > .data-grid table.data):
+        Mostly copied from TimelineView.css and NetworkTimelineView.css.
+
+        * UserInterface/Views/NetworkGridContentView.js: Added.
+        (WebInspector.NetworkGridContentView):
+        (WebInspector.NetworkGridContentView.prototype.get navigationSidebarTreeOutline):
+        (WebInspector.NetworkGridContentView.prototype.get selectionPathComponents):
+        (WebInspector.NetworkGridContentView.prototype.get zeroTime):
+        (WebInspector.NetworkGridContentView.prototype.shown):
+        (WebInspector.NetworkGridContentView.prototype.hidden):
+        (WebInspector.NetworkGridContentView.prototype.closed):
+        (WebInspector.NetworkGridContentView.prototype.updateLayout):
+        (WebInspector.NetworkGridContentView.prototype.needsLayout):
+        (WebInspector.NetworkGridContentView.prototype.reset):
+        (WebInspector.NetworkGridContentView.prototype._processPendingRecords):
+        (WebInspector.NetworkGridContentView.prototype._networkTimelineReset):
+        (WebInspector.NetworkGridContentView.prototype._networkTimelineRecordAdded):
+        (WebInspector.NetworkGridContentView.prototype._treeElementPathComponentSelected):
+        (WebInspector.NetworkGridContentView.prototype._dataGridNodeSelected):
+        Mostly copied from NetworkTimelineView.
+
+        * UserInterface/Views/NetworkSidebarPanel.css: Added.
+        (.sidebar > .panel.navigation.network > :matches(.content, .empty-content-placeholder)):
+        (.sidebar > .panel.navigation.network > .navigation-bar):
+        (.sidebar > .panel.navigation.network > .title-bar):
+        (.sidebar > .panel.navigation.network.network-grid-content-view-showing > .content):
+        (.sidebar > .panel.navigation.network .item:hover:not(.selected) .status .close.status-button):
+        (.sidebar > .panel.navigation.network:not(.network-grid-content-view-showing) .status .go-to-arrow.status-button):
+        (.sidebar > .panel.navigation.network.network-grid-content-view-showing .status .close.status-button):
+        (.sidebar > .panel.navigation.network.network-grid-content-view-showing .navigation-sidebar-panel-content-tree-outline.network-grid .item .subtitle):
+        (.sidebar > .panel.navigation.network > .content > .navigation-sidebar-panel-content-tree-outline):
+        (.sidebar > .panel.navigation.network.network-grid-content-view-showing > .content > .navigation-sidebar-panel-content-tree-outline):
+        Mostly copied from TimelineSidebarPanel.css and NetworkTimelineView.css.
+
+        * UserInterface/Views/NetworkSidebarPanel.js: Added.
+        (WebInspector.NetworkSidebarPanel):
+        (WebInspector.NetworkSidebarPanel.prototype.closed):
+        (WebInspector.NetworkSidebarPanel.prototype.showDefaultContentView):
+        (WebInspector.NetworkSidebarPanel.prototype.saveStateToCookie):
+        (WebInspector.NetworkSidebarPanel.prototype.restoreStateFromCookie):
+        (WebInspector.NetworkSidebarPanel.prototype.hasCustomFilters):
+        (WebInspector.NetworkSidebarPanel.prototype.matchTreeElementAgainstCustomFilters.match):
+        (WebInspector.NetworkSidebarPanel.prototype.matchTreeElementAgainstCustomFilters):
+        (WebInspector.NetworkSidebarPanel.prototype.treeElementAddedOrChanged):
+        (WebInspector.NetworkSidebarPanel.prototype._networkTimelineReset):
+        (WebInspector.NetworkSidebarPanel.prototype._contentBrowserCurrentContentViewDidChange):
+        (WebInspector.NetworkSidebarPanel.prototype._treeElementGoToArrowWasClicked):
+        (WebInspector.NetworkSidebarPanel.prototype._treeElementCloseButtonClicked):
+        (WebInspector.NetworkSidebarPanel.prototype._canShowDifferentContentView):
+        (WebInspector.NetworkSidebarPanel.prototype._treeElementSelected):
+        (WebInspector.NetworkSidebarPanel.prototype._scopeBarSelectionDidChange):
+        A hybrid of ResourceSidebarPanel and TimelineSidebarPanel.
+
+        * UserInterface/Views/NetworkTabContentView.js: Added.
+        (WebInspector.NetworkTabContentView):
+        (WebInspector.NetworkTabContentView.prototype.get type):
+        (WebInspector.NetworkTabContentView.prototype.canShowRepresentedObject):
+
+        * UserInterface/Views/NewTabContentView.js:
+        (WebInspector.NewTabContentView): Add Network tab and sort the tabs by their localized name.
+
+        * UserInterface/Views/TabBar.js:
+        (WebInspector.TabBar.prototype._handleNewTabClick):
+        Drive-by fix. Don't fire the click event if the new tab button is disabled.
+
 2015-07-06  Nikita Vasilyev  <nvasilyev@apple.com>
 
         Web Inspector: Mark console filters that have unseen messages by colored dots
 2015-07-06  Nikita Vasilyev  <nvasilyev@apple.com>
 
         Web Inspector: Mark console filters that have unseen messages by colored dots
index d1efb6c..1f362dd 100644 (file)
Binary files a/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js and b/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js differ
index abd8081..4f7807c 100644 (file)
@@ -146,7 +146,7 @@ WebInspector.loaded = function()
     this._showingSplitConsoleSetting = new WebInspector.Setting("showing-split-console", false);
     this._splitConsoleHeightSetting = new WebInspector.Setting("split-console-height", 150);
 
     this._showingSplitConsoleSetting = new WebInspector.Setting("showing-split-console", false);
     this._splitConsoleHeightSetting = new WebInspector.Setting("split-console-height", 150);
 
-    this._openTabsSetting = new WebInspector.Setting("open-tabs", ["elements", "resources", "timeline", "debugger", "storage", "console"]);
+    this._openTabsSetting = new WebInspector.Setting("open-tab-types", ["elements", "network", "resources", "timeline", "debugger", "storage", "console"]);
     this._selectedTabIndexSetting = new WebInspector.Setting("selected-tab-index", 0);
 
     this.showShadowDOMSetting = new WebInspector.Setting("show-shadow-dom", false);
     this._selectedTabIndexSetting = new WebInspector.Setting("selected-tab-index", 0);
 
     this.showShadowDOMSetting = new WebInspector.Setting("show-shadow-dom", false);
@@ -383,6 +383,8 @@ WebInspector.isTabTypeAllowed = function(tabType)
     switch (tabType) {
     case WebInspector.ElementsTabContentView.Type:
         return !!window.DOMAgent;
     switch (tabType) {
     case WebInspector.ElementsTabContentView.Type:
         return !!window.DOMAgent;
+    case WebInspector.NetworkTabContentView.Type:
+        return !!window.NetworkAgent && !!window.PageAgent;
     case WebInspector.StorageTabContentView.Type:
         return !!window.DOMStorageAgent || !!window.DatabaseAgent || !!window.IndexedDBAgent;
     case WebInspector.TimelineTabContentView.Type:
     case WebInspector.StorageTabContentView.Type:
         return !!window.DOMStorageAgent || !!window.DatabaseAgent || !!window.IndexedDBAgent;
     case WebInspector.TimelineTabContentView.Type:
@@ -401,6 +403,8 @@ WebInspector._tabContentViewForType = function(tabType)
         return new WebInspector.DebuggerTabContentView;
     case WebInspector.ElementsTabContentView.Type:
         return new WebInspector.ElementsTabContentView;
         return new WebInspector.DebuggerTabContentView;
     case WebInspector.ElementsTabContentView.Type:
         return new WebInspector.ElementsTabContentView;
+    case WebInspector.NetworkTabContentView.Type:
+        return new WebInspector.NetworkTabContentView;
     case WebInspector.NewTabContentView.Type:
         return new WebInspector.NewTabContentView;
     case WebInspector.ResourcesTabContentView.Type:
     case WebInspector.NewTabContentView.Type:
         return new WebInspector.NewTabContentView;
     case WebInspector.ResourcesTabContentView.Type:
@@ -439,7 +443,8 @@ WebInspector._updateNewTabButtonState = function(event)
 {
     var newTabAllowed = this.isNewTabWithTypeAllowed(WebInspector.ConsoleTabContentView.Type) || this.isNewTabWithTypeAllowed(WebInspector.ElementsTabContentView.Type)
         || this.isNewTabWithTypeAllowed(WebInspector.ResourcesTabContentView.Type) || this.isNewTabWithTypeAllowed(WebInspector.StorageTabContentView.Type)
 {
     var newTabAllowed = this.isNewTabWithTypeAllowed(WebInspector.ConsoleTabContentView.Type) || this.isNewTabWithTypeAllowed(WebInspector.ElementsTabContentView.Type)
         || this.isNewTabWithTypeAllowed(WebInspector.ResourcesTabContentView.Type) || this.isNewTabWithTypeAllowed(WebInspector.StorageTabContentView.Type)
-        || this.isNewTabWithTypeAllowed(WebInspector.TimelineTabContentView.Type) || this.isNewTabWithTypeAllowed(WebInspector.DebuggerTabContentView.Type);
+        || this.isNewTabWithTypeAllowed(WebInspector.TimelineTabContentView.Type) || this.isNewTabWithTypeAllowed(WebInspector.DebuggerTabContentView.Type)
+        || this.isNewTabWithTypeAllowed(WebInspector.NetworkTabContentView.Type);
     this.tabBar.newTabItem.disabled = !newTabAllowed;
 };
 
     this.tabBar.newTabItem.disabled = !newTabAllowed;
 };
 
index c350628..3e963b4 100644 (file)
@@ -33,6 +33,8 @@ WebInspector.TimelineManager = class TimelineManager extends WebInspector.Object
         WebInspector.Frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._mainResourceDidChange, this);
         WebInspector.Frame.addEventListener(WebInspector.Frame.Event.ResourceWasAdded, this._resourceWasAdded, this);
 
         WebInspector.Frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._mainResourceDidChange, this);
         WebInspector.Frame.addEventListener(WebInspector.Frame.Event.ResourceWasAdded, this._resourceWasAdded, this);
 
+        this._persistentNetworkTimeline = new WebInspector.NetworkTimeline;
+
         this._isCapturing = false;
         this._isCapturingPageReload = false;
         this._autoCapturingMainResource = null;
         this._isCapturing = false;
         this._isCapturingPageReload = false;
         this._autoCapturingMainResource = null;
@@ -62,6 +64,11 @@ WebInspector.TimelineManager = class TimelineManager extends WebInspector.Object
         return this._activeRecording;
     }
 
         return this._activeRecording;
     }
 
+    get persistentNetworkTimeline()
+    {
+        return this._persistentNetworkTimeline;
+    }
+
     get recordings()
     {
         return this._recordings.slice();
     get recordings()
     {
         return this._recordings.slice();
@@ -549,6 +556,14 @@ WebInspector.TimelineManager = class TimelineManager extends WebInspector.Object
 
     _mainResourceDidChange(event)
     {
 
     _mainResourceDidChange(event)
     {
+        if (event.target.isMainFrame())
+            this._persistentNetworkTimeline.reset();
+
+        var mainResource = event.target.mainResource;
+        var record = new WebInspector.ResourceTimelineRecord(mainResource);
+        if (!isNaN(record.startTime))
+            this._persistentNetworkTimeline.addRecord(record);
+
         // Ignore resource events when there isn't a main frame yet. Those events are triggered by
         // loading the cached resources when the inspector opens, and they do not have timing information.
         if (!WebInspector.frameResourceManager.mainFrame)
         // Ignore resource events when there isn't a main frame yet. Those events are triggered by
         // loading the cached resources when the inspector opens, and they do not have timing information.
         if (!WebInspector.frameResourceManager.mainFrame)
@@ -560,15 +575,18 @@ WebInspector.TimelineManager = class TimelineManager extends WebInspector.Object
         if (!this._isCapturing)
             return;
 
         if (!this._isCapturing)
             return;
 
-        var mainResource = event.target.mainResource;
         if (mainResource === this._autoCapturingMainResource)
             return;
 
         if (mainResource === this._autoCapturingMainResource)
             return;
 
-        this._addRecord(new WebInspector.ResourceTimelineRecord(mainResource));
+        this._addRecord(record);
     }
 
     _resourceWasAdded(event)
     {
     }
 
     _resourceWasAdded(event)
     {
+        var record = new WebInspector.ResourceTimelineRecord(event.data.resource);
+        if (!isNaN(record.startTime))
+            this._persistentNetworkTimeline.addRecord(record);
+
         // Ignore resource events when there isn't a main frame yet. Those events are triggered by
         // loading the cached resources when the inspector opens, and they do not have timing information.
         if (!WebInspector.frameResourceManager.mainFrame)
         // Ignore resource events when there isn't a main frame yet. Those events are triggered by
         // loading the cached resources when the inspector opens, and they do not have timing information.
         if (!WebInspector.frameResourceManager.mainFrame)
@@ -577,7 +595,7 @@ WebInspector.TimelineManager = class TimelineManager extends WebInspector.Object
         if (!this._isCapturing)
             return;
 
         if (!this._isCapturing)
             return;
 
-        this._addRecord(new WebInspector.ResourceTimelineRecord(event.data.resource));
+        this._addRecord(record);
     }
 };
 
     }
 };
 
diff --git a/Source/WebInspectorUI/UserInterface/Images/Network.svg b/Source/WebInspectorUI/UserInterface/Images/Network.svg
new file mode 100644 (file)
index 0000000..811ddef
--- /dev/null
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright © 2015 Apple Inc. All rights reserved. -->
+<svg viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="8" cy="8" r="7.5" class="stroked" fill="none" stroke="black"/>
+    <path d="M 5.5 1.0 L 5.5 10.5" fill="none" stroke="black"/>
+    <path d="M 3.0 9.0 L 5.5 11.0 L 8.0 9.0" fill="none" stroke="black"/>
+    <path d="M 10.5 15.0 L 10.5 5.5" fill="none" stroke="black"/>
+    <path d="M 13.0 7.0 L 10.5 5.0 L 8.0 7.0" fill="none" stroke="black"/>
+</svg>
index a0fb568..7c16f09 100644 (file)
     <link rel="stylesheet" href="Views/Main.css">
     <link rel="stylesheet" href="Views/NavigationBar.css">
     <link rel="stylesheet" href="Views/NavigationSidebarPanel.css">
     <link rel="stylesheet" href="Views/Main.css">
     <link rel="stylesheet" href="Views/NavigationBar.css">
     <link rel="stylesheet" href="Views/NavigationSidebarPanel.css">
+    <link rel="stylesheet" href="Views/NetworkGridContentView.css">
+    <link rel="stylesheet" href="Views/NetworkSidebarPanel.css">
     <link rel="stylesheet" href="Views/NetworkTimelineOverviewGraph.css">
     <link rel="stylesheet" href="Views/NetworkTimelineView.css">
     <link rel="stylesheet" href="Views/NewTabContentView.css">
     <link rel="stylesheet" href="Views/NetworkTimelineOverviewGraph.css">
     <link rel="stylesheet" href="Views/NetworkTimelineView.css">
     <link rel="stylesheet" href="Views/NewTabContentView.css">
     <script src="Views/DOMDetailsSidebarPanel.js"></script>
     <script src="Views/FolderTreeElement.js"></script>
     <script src="Views/FolderizedTreeElement.js"></script>
     <script src="Views/DOMDetailsSidebarPanel.js"></script>
     <script src="Views/FolderTreeElement.js"></script>
     <script src="Views/FolderizedTreeElement.js"></script>
+    <script src="Views/NetworkTabContentView.js"></script>
     <script src="Views/NewTabContentView.js"></script>
     <script src="Views/ObjectTreeBaseTreeElement.js"></script>
     <script src="Views/SourceCodeTreeElement.js"></script>
     <script src="Views/NewTabContentView.js"></script>
     <script src="Views/ObjectTreeBaseTreeElement.js"></script>
     <script src="Views/SourceCodeTreeElement.js"></script>
     <script src="Views/MetricsStyleDetailsPanel.js"></script>
     <script src="Views/MultipleScopeBarItem.js"></script>
     <script src="Views/NavigationBar.js"></script>
     <script src="Views/MetricsStyleDetailsPanel.js"></script>
     <script src="Views/MultipleScopeBarItem.js"></script>
     <script src="Views/NavigationBar.js"></script>
+    <script src="Views/NetworkGridContentView.js"></script>
+    <script src="Views/NetworkSidebarPanel.js"></script>
     <script src="Views/NetworkTimelineOverviewGraph.js"></script>
     <script src="Views/NetworkTimelineView.js"></script>
     <script src="Views/ObjectPreviewView.js"></script>
     <script src="Views/NetworkTimelineOverviewGraph.js"></script>
     <script src="Views/NetworkTimelineView.js"></script>
     <script src="Views/ObjectPreviewView.js"></script>
index 49b2f98..a74019f 100644 (file)
@@ -106,8 +106,10 @@ WebInspector.Timeline = class Timeline extends WebInspector.Object
         this._startTime = NaN;
         this._endTime = NaN;
 
         this._startTime = NaN;
         this._endTime = NaN;
 
-        if (!suppressEvents)
+        if (!suppressEvents) {
             this.dispatchEventToListeners(WebInspector.Timeline.Event.TimesUpdated);
             this.dispatchEventToListeners(WebInspector.Timeline.Event.TimesUpdated);
+            this.dispatchEventToListeners(WebInspector.Timeline.Event.Reset);
+        }
     }
 
     addRecord(record)
     }
 
     addRecord(record)
@@ -154,6 +156,7 @@ WebInspector.Timeline = class Timeline extends WebInspector.Object
 };
 
 WebInspector.Timeline.Event = {
 };
 
 WebInspector.Timeline.Event = {
+    Reset: "timeline-reset",
     RecordAdded: "timeline-record-added",
     TimesUpdated: "timeline-times-updated"
 };
     RecordAdded: "timeline-record-added",
     TimesUpdated: "timeline-times-updated"
 };
index f8e648e..a92ee93 100644 (file)
@@ -24,7 +24,7 @@
  */
 
 .sidebar > .panel.navigation > .content {
  */
 
 .sidebar > .panel.navigation > .content {
-    bottom: 28px;
+    bottom: 29px;
 }
 
 .sidebar > .panel.navigation > .filter-bar {
 }
 
 .sidebar > .panel.navigation > .filter-bar {
diff --git a/Source/WebInspectorUI/UserInterface/Views/NetworkGridContentView.css b/Source/WebInspectorUI/UserInterface/Views/NetworkGridContentView.css
new file mode 100644 (file)
index 0000000..f313d76
--- /dev/null
@@ -0,0 +1,46 @@
+/*
+ * Copyright (C) 2015 Apple 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
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.content-view.network-grid > .data-grid {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+.content-view.network-grid > .data-grid th {
+    border-top: none;
+}
+
+.content-view.network-grid > .data-grid td {
+    height: 16px;
+    line-height: 16px;
+}
+
+.content-view.network-grid > .data-grid table.data {
+    background-image: linear-gradient(to bottom, white, white 50%, rgb(243, 243, 243) 50%, rgb(243, 243, 243));
+    background-size: 100% 40px;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/NetworkGridContentView.js b/Source/WebInspectorUI/UserInterface/Views/NetworkGridContentView.js
new file mode 100644 (file)
index 0000000..c348b79
--- /dev/null
@@ -0,0 +1,217 @@
+/*
+ * Copyright (C) 2015 Apple 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
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.NetworkGridContentView = function(representedObject, extraArguments)
+{
+    console.assert(extraArguments);
+    console.assert(extraArguments.networkSidebarPanel instanceof WebInspector.NetworkSidebarPanel);
+
+    WebInspector.ContentView.call(this, representedObject);
+
+    this._networkSidebarPanel = extraArguments.networkSidebarPanel;
+    this._contentTreeOutline = this._networkSidebarPanel.contentTreeOutline;
+
+    var columns = {domain: {}, type: {}, method: {}, scheme: {}, statusCode: {}, cached: {}, size: {}, transferSize: {}, requestSent: {}, latency: {}, duration: {}};
+
+    columns.domain.title = WebInspector.UIString("Domain");
+    columns.domain.width = "10%";
+
+    columns.type.title = WebInspector.UIString("Type");
+    columns.type.width = "8%";
+
+    columns.method.title = WebInspector.UIString("Method");
+    columns.method.width = "6%";
+
+    columns.scheme.title = WebInspector.UIString("Scheme");
+    columns.scheme.width = "6%";
+
+    columns.statusCode.title = WebInspector.UIString("Status");
+    columns.statusCode.width = "6%";
+
+    columns.cached.title = WebInspector.UIString("Cached");
+    columns.cached.width = "6%";
+
+    columns.size.title = WebInspector.UIString("Size");
+    columns.size.width = "8%";
+    columns.size.aligned = "right";
+
+    columns.transferSize.title = WebInspector.UIString("Transfered");
+    columns.transferSize.width = "8%";
+    columns.transferSize.aligned = "right";
+
+    columns.requestSent.title = WebInspector.UIString("Start Time");
+    columns.requestSent.width = "9%";
+    columns.requestSent.aligned = "right";
+
+    columns.latency.title = WebInspector.UIString("Latency");
+    columns.latency.width = "9%";
+    columns.latency.aligned = "right";
+
+    columns.duration.title = WebInspector.UIString("Duration");
+    columns.duration.width = "9%";
+    columns.duration.aligned = "right";
+
+    for (var column in columns)
+        columns[column].sortable = true;
+
+    this._dataGrid = new WebInspector.TimelineDataGrid(this._contentTreeOutline, columns);
+    this._dataGrid.addEventListener(WebInspector.DataGrid.Event.SelectedNodeChanged, this._dataGridNodeSelected, this);
+    this._dataGrid.sortColumnIdentifier = "requestSent";
+    this._dataGrid.sortOrder = WebInspector.DataGrid.SortOrder.Ascending;
+
+    this.element.classList.add("network-grid");
+    this.element.appendChild(this._dataGrid.element);
+
+    var networkTimeline = WebInspector.timelineManager.persistentNetworkTimeline;
+    networkTimeline.addEventListener(WebInspector.Timeline.Event.RecordAdded, this._networkTimelineRecordAdded, this);
+    networkTimeline.addEventListener(WebInspector.Timeline.Event.Reset, this._networkTimelineReset, this);
+
+    this._pendingRecords = [];
+};
+
+WebInspector.NetworkGridContentView.prototype = {
+    constructor: WebInspector.NetworkGridContentView,
+    __proto__: WebInspector.ContentView.prototype,
+
+    // Public
+
+    get navigationSidebarTreeOutline()
+    {
+        return this._contentTreeOutline;
+    },
+
+    get selectionPathComponents()
+    {
+        if (!this._contentTreeOutline.selectedTreeElement || this._contentTreeOutline.selectedTreeElement.hidden)
+            return null;
+
+        var pathComponent = new WebInspector.GeneralTreeElementPathComponent(this._contentTreeOutline.selectedTreeElement);
+        pathComponent.addEventListener(WebInspector.HierarchicalPathComponent.Event.SiblingWasSelected, this._treeElementPathComponentSelected, this);
+        return [pathComponent];
+    },
+
+    get zeroTime()
+    {
+        return WebInspector.timelineManager.persistentNetworkTimeline.startTime;
+    },
+
+    shown: function()
+    {
+        WebInspector.ContentView.prototype.shown.call(this);
+
+        this._dataGrid.shown();
+    },
+
+    hidden: function()
+    {
+        this._dataGrid.hidden();
+
+        WebInspector.ContentView.prototype.hidden.call(this);
+    },
+
+    closed: function()
+    {
+        this._dataGrid.closed();
+    },
+
+    updateLayout: function()
+    {
+        if (this._scheduledLayoutUpdateIdentifier) {
+            cancelAnimationFrame(this._scheduledLayoutUpdateIdentifier);
+            delete this._scheduledLayoutUpdateIdentifier;
+        }
+
+        this._dataGrid.updateLayout();
+
+        this._processPendingRecords();
+    },
+
+    needsLayout: function()
+    {
+        if (!this._networkSidebarPanel.visible)
+            return;
+
+        if (this._scheduledLayoutUpdateIdentifier)
+            return;
+
+        this._scheduledLayoutUpdateIdentifier = requestAnimationFrame(this.updateLayout.bind(this));
+    },
+
+    reset: function()
+    {
+        this._contentTreeOutline.removeChildren();
+        this._dataGrid.reset();
+    },
+
+    // Private
+
+    _processPendingRecords: function()
+    {
+        if (!this._pendingRecords.length)
+            return;
+
+        for (var resourceTimelineRecord of this._pendingRecords) {
+            // Skip the record if it already exists in the tree.
+            var treeElement = this._contentTreeOutline.findTreeElement(resourceTimelineRecord.resource);
+            if (treeElement)
+                continue;
+
+            treeElement = new WebInspector.ResourceTreeElement(resourceTimelineRecord.resource);
+            var dataGridNode = new WebInspector.ResourceTimelineDataGridNode(resourceTimelineRecord, false, this);
+
+            this._dataGrid.addRowInSortOrder(treeElement, dataGridNode);
+        }
+
+        this._pendingRecords = [];
+    },
+
+    _networkTimelineReset: function(event)
+    {
+        this.reset();
+    },
+
+    _networkTimelineRecordAdded: function(event)
+    {
+        var resourceTimelineRecord = event.data.record;
+        console.assert(resourceTimelineRecord instanceof WebInspector.ResourceTimelineRecord);
+
+        this._pendingRecords.push(resourceTimelineRecord);
+
+        this.needsLayout();
+    },
+
+    _treeElementPathComponentSelected: function(event)
+    {
+        var dataGridNode = this._dataGrid.dataGridNodeForTreeElement(event.data.pathComponent.generalTreeElement);
+        if (!dataGridNode)
+            return;
+        dataGridNode.revealAndSelect();
+    },
+
+    _dataGridNodeSelected: function(event)
+    {
+        this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/NetworkSidebarPanel.css b/Source/WebInspectorUI/UserInterface/Views/NetworkSidebarPanel.css
new file mode 100644 (file)
index 0000000..81d68b8
--- /dev/null
@@ -0,0 +1,96 @@
+/*
+ * Copyright (C) 2015 Apple 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
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.sidebar > .panel.navigation.network > :matches(.content, .empty-content-placeholder) {
+    top: 52px;
+}
+
+.sidebar > .panel.navigation.network > .navigation-bar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+}
+
+.sidebar > .panel.navigation.network > .title-bar {
+    position: absolute;
+    top: 29px;
+    left: 0;
+    right: 0;
+
+    height: 23px;
+
+    border-bottom: 1px solid rgb(179, 179, 179);
+    background-color: rgb(242, 242, 242);
+    color: rgb(57, 57, 57);
+
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    font-weight: bold;
+
+    padding: 4px 9px;
+
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+body.window-inactive .sidebar > .panel.navigation.network > .title-bar {
+    border-bottom-color: rgb(219, 219, 219);
+}
+
+.sidebar > .panel.navigation.network.network-grid-content-view-showing > .content {
+ /* This hides the scrollbar. The view shows a scrollbar, we don't need two. */
+    padding-right: 16px;
+    right: -16px;
+}
+
+.sidebar > .panel.navigation.network .item:not(:hover, .selected) .status .status-button,
+.sidebar > .panel.navigation.network .item:hover:not(.selected) .status .close.status-button {
+    display: none;
+}
+
+.sidebar > .panel.navigation.network:not(.network-grid-content-view-showing) .status .go-to-arrow.status-button {
+    display: none;
+}
+
+.sidebar > .panel.navigation.network.network-grid-content-view-showing .status .close.status-button {
+    display: none;
+}
+
+.sidebar > .panel.navigation.network.network-grid-content-view-showing .navigation-sidebar-panel-content-tree-outline.network-grid .item .subtitle {
+    display: none;
+}
+
+.sidebar > .panel.navigation.network > .content > .navigation-sidebar-panel-content-tree-outline {
+    min-height: 100%;
+    background-image: none;
+}
+
+.sidebar > .panel.navigation.network.network-grid-content-view-showing > .content > .navigation-sidebar-panel-content-tree-outline {
+    background-image: linear-gradient(to bottom, transparent, transparent 50%, rgba(0, 0, 0, 0.03) 50%, rgba(0, 0, 0, 0.03));
+    background-size: 100% 40px;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/NetworkSidebarPanel.js b/Source/WebInspectorUI/UserInterface/Views/NetworkSidebarPanel.js
new file mode 100644 (file)
index 0000000..74321bd
--- /dev/null
@@ -0,0 +1,233 @@
+/*
+ * Copyright (C) 2015 Apple 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
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.NetworkSidebarPanel = class NetworkSidebarPanel extends WebInspector.NavigationSidebarPanel
+{
+    constructor(contentBrowser)
+    {
+        super("network", WebInspector.UIString("Network"), true);
+
+        this.contentBrowser = contentBrowser;
+
+        this.filterBar.placeholder = WebInspector.UIString("Filter Resource List");
+
+        this._navigationBar = new WebInspector.NavigationBar;
+        this.element.appendChild(this._navigationBar.element);
+
+        this._resourcesTitleBarElement = document.createElement("div");
+        this._resourcesTitleBarElement.textContent = WebInspector.UIString("Name");
+        this._resourcesTitleBarElement.classList.add("title-bar");
+        this.element.appendChild(this._resourcesTitleBarElement);
+
+        var scopeItemPrefix = "network-sidebar-";
+        var scopeBarItems = [];
+
+        scopeBarItems.push(new WebInspector.ScopeBarItem(scopeItemPrefix + "type-all", WebInspector.UIString("All Resources"), true));
+
+        for (var key in WebInspector.Resource.Type) {
+            var value = WebInspector.Resource.Type[key];
+            var scopeBarItem = new WebInspector.ScopeBarItem(scopeItemPrefix + value, WebInspector.Resource.displayNameForType(value, true));
+            scopeBarItem.__resourceType = value;
+            scopeBarItems.push(scopeBarItem);
+        }
+
+        this._scopeBar = new WebInspector.ScopeBar("network-sidebar-scope-bar", scopeBarItems, scopeBarItems[0], true);
+        this._scopeBar.addEventListener(WebInspector.ScopeBar.Event.SelectionChanged, this._scopeBarSelectionDidChange, this);
+
+        this._navigationBar.addNavigationItem(this._scopeBar);
+
+        this.contentTreeOutline.onselect = this._treeElementSelected.bind(this);
+        this.contentTreeOutline.element.classList.add("network-grid");
+        this.contentTreeOutline.element.classList.add(WebInspector.NavigationSidebarPanel.HideDisclosureButtonsStyleClassName);
+
+        this.contentBrowser.addEventListener(WebInspector.ContentBrowser.Event.CurrentContentViewDidChange, this._contentBrowserCurrentContentViewDidChange, this);
+
+        var networkTimeline = WebInspector.timelineManager.persistentNetworkTimeline;
+        networkTimeline.addEventListener(WebInspector.Timeline.Event.Reset, this._networkTimelineReset, this);
+
+        this._networkGridView = new WebInspector.NetworkGridContentView(null, {networkSidebarPanel: this});
+    }
+
+    // Public
+
+    closed()
+    {
+        super.closed();
+
+        WebInspector.frameResourceManager.removeEventListener(null, null, this);
+    }
+
+    showDefaultContentView()
+    {
+        this.contentBrowser.showContentView(this._networkGridView);
+    }
+
+    // Protected
+
+    saveStateToCookie(cookie)
+    {
+        console.assert(cookie);
+
+        cookie[WebInspector.NetworkSidebarPanel.ShowingNetworkGridContentViewCookieKey] = this.contentBrowser.currentContentView instanceof WebInspector.NetworkGridContentView;
+
+        super.saveStateToCookie(cookie);
+    }
+
+    restoreStateFromCookie(cookie, relaxedMatchDelay)
+    {
+        console.assert(cookie);
+
+        // Don't call NavigationSidebarPanel.restoreStateFromCookie, because it tries to match based
+        // on type selected tree element. This would cause the grid to be deselected.
+        if (cookie[WebInspector.NetworkSidebarPanel.ShowingNetworkGridContentViewCookieKey])
+            return;
+
+        super.restoreStateFromCookie(cookie, relaxedMatchDelay);
+    }
+
+    hasCustomFilters()
+    {
+        console.assert(this._scopeBar.selectedItems.length === 1);
+        var selectedScopeBarItem = this._scopeBar.selectedItems[0];
+        return selectedScopeBarItem && !selectedScopeBarItem.exclusive;
+    }
+
+    matchTreeElementAgainstCustomFilters(treeElement, flags)
+    {
+        console.assert(this._scopeBar.selectedItems.length === 1);
+        var selectedScopeBarItem = this._scopeBar.selectedItems[0];
+
+        // Show everything if there is no selection or "All Resources" is selected (the exclusive item).
+        if (!selectedScopeBarItem || selectedScopeBarItem.exclusive)
+            return true;
+
+        function match()
+        {
+            if (treeElement instanceof WebInspector.FrameTreeElement)
+                return selectedScopeBarItem.__resourceType === WebInspector.Resource.Type.Document;
+
+            console.assert(treeElement instanceof WebInspector.ResourceTreeElement, "Unknown treeElement", treeElement);
+            if (!(treeElement instanceof WebInspector.ResourceTreeElement))
+                return false;
+
+            return treeElement.resource.type === selectedScopeBarItem.__resourceType;
+        }
+
+        var matched = match();
+        if (matched)
+            flags.expandTreeElement = true;
+        return matched;
+    }
+
+    treeElementAddedOrChanged(treeElement)
+    {
+        if (treeElement.status || !treeElement.treeOutline)
+            return;
+
+        wrappedSVGDocument("Images/Close.svg", null, WebInspector.UIString("Close resource view"), function(element) {
+            var fragment = document.createDocumentFragment();
+
+            var closeButton = new WebInspector.TreeElementStatusButton(element);
+            closeButton.element.classList.add("close");
+            closeButton.addEventListener(WebInspector.TreeElementStatusButton.Event.Clicked, this._treeElementCloseButtonClicked, this);
+            fragment.appendChild(closeButton.element);
+
+            var goToButton = new WebInspector.TreeElementStatusButton(WebInspector.createGoToArrowButton());
+            goToButton.__treeElement = treeElement;
+            goToButton.addEventListener(WebInspector.TreeElementStatusButton.Event.Clicked, this._treeElementGoToArrowWasClicked, this);
+            fragment.appendChild(goToButton.element);
+
+            treeElement.status = fragment;
+        }.bind(this));
+    }
+
+    // Private
+
+    _networkTimelineReset(event)
+    {
+        this.contentBrowser.contentViewContainer.closeAllContentViews();
+        this.showDefaultContentView();
+    }
+
+    _contentBrowserCurrentContentViewDidChange(event)
+    {
+        var didShowNetworkGridContentView = this.contentBrowser.currentContentView instanceof WebInspector.NetworkGridContentView;
+        this.element.classList.toggle("network-grid-content-view-showing", didShowNetworkGridContentView);
+    }
+
+    _treeElementGoToArrowWasClicked(event)
+    {
+        this._clickedTreeElementGoToArrow = true;
+
+        var treeElement = event.target.__treeElement;
+        console.assert(treeElement instanceof WebInspector.TreeElement);
+
+        treeElement.select(true, true);
+
+        this._clickedTreeElementGoToArrow = false;
+    }
+
+    _treeElementCloseButtonClicked(event)
+    {
+        // Say we are processing a selection change to avoid the selected tree element
+        // from being deselected when the default content view is shown.
+        this.contentTreeOutline.processingSelectionChange = true;
+
+        this.showDefaultContentView();
+
+        this.contentTreeOutline.processingSelectionChange = false;
+    }
+
+    _canShowDifferentContentView()
+    {
+        if (this._clickedTreeElementGoToArrow)
+            return true;
+
+        if (this.contentBrowser.currentContentView instanceof WebInspector.NetworkGridContentView)
+            return false;
+
+        return !this.restoringState || !this._restoredShowingNetworkGridContentView;
+    }
+
+    _treeElementSelected(treeElement, selectedByUser)
+    {
+        if (!this._canShowDifferentContentView())
+            return;
+
+        if (treeElement instanceof WebInspector.ResourceTreeElement) {
+            WebInspector.showRepresentedObject(treeElement.representedObject);
+            return;
+        }
+
+        console.error("Unknown tree element", treeElement);
+    }
+
+    _scopeBarSelectionDidChange(event)
+    {
+        this.updateFilter();
+    }
+};
+
+WebInspector.NetworkSidebarPanel.ShowingNetworkGridContentViewCookieKey = "network-sidebar-panel-showing-network-grid-content-view";
diff --git a/Source/WebInspectorUI/UserInterface/Views/NetworkTabContentView.js b/Source/WebInspectorUI/UserInterface/Views/NetworkTabContentView.js
new file mode 100644 (file)
index 0000000..37fc6ce
--- /dev/null
@@ -0,0 +1,56 @@
+/*
+ * Copyright (C) 2015 Apple 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
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.NetworkTabContentView = function(identifier)
+{
+    var tabBarItem = new WebInspector.TabBarItem("Images/Network.svg", WebInspector.UIString("Network"));
+    var detailsSidebarPanels = [WebInspector.resourceDetailsSidebarPanel, WebInspector.probeDetailsSidebarPanel];
+
+    WebInspector.ContentBrowserTabContentView.call(this, identifier || "network", "network", tabBarItem, WebInspector.NetworkSidebarPanel, detailsSidebarPanels);
+};
+
+WebInspector.NetworkTabContentView.prototype = {
+    constructor: WebInspector.NetworkTabContentView,
+    __proto__: WebInspector.ContentBrowserTabContentView.prototype,
+
+    // Public
+
+    get type()
+    {
+        return WebInspector.NetworkTabContentView.Type;
+    },
+
+    canShowRepresentedObject: function(representedObject)
+    {
+        return representedObject instanceof WebInspector.Resource;
+    },
+
+    get supportsSplitContentBrowser()
+    {
+        return false;
+    }
+};
+
+WebInspector.NetworkTabContentView.Type = "network";
index 536645f..1d9ea41 100644 (file)
@@ -30,14 +30,17 @@ WebInspector.NewTabContentView = function(identifier)
     WebInspector.TabContentView.call(this, identifier || "new-tab", "new-tab", tabBarItem);
 
     var allowedNewTabs = [
     WebInspector.TabContentView.call(this, identifier || "new-tab", "new-tab", tabBarItem);
 
     var allowedNewTabs = [
+        {image: "Images/Console.svg", title: WebInspector.UIString("Console"), type: WebInspector.ConsoleTabContentView.Type},
+        {image: "Images/Debugger.svg", title: WebInspector.UIString("Debugger"), type: WebInspector.DebuggerTabContentView.Type},
         {image: "Images/Elements.svg", title: WebInspector.UIString("Elements"), type: WebInspector.ElementsTabContentView.Type},
         {image: "Images/Elements.svg", title: WebInspector.UIString("Elements"), type: WebInspector.ElementsTabContentView.Type},
+        {image: "Images/Network.svg", title: WebInspector.UIString("Network"), type: WebInspector.NetworkTabContentView.Type},
         {image: "Images/Resources.svg", title: WebInspector.UIString("Resources"), type: WebInspector.ResourcesTabContentView.Type},
         {image: "Images/Resources.svg", title: WebInspector.UIString("Resources"), type: WebInspector.ResourcesTabContentView.Type},
-        {image: "Images/Timeline.svg", title: WebInspector.UIString("Timelines"), type: WebInspector.TimelineTabContentView.Type},
-        {image: "Images/Debugger.svg", title: WebInspector.UIString("Debugger"), type: WebInspector.DebuggerTabContentView.Type},
         {image: "Images/Storage.svg", title: WebInspector.UIString("Storage"), type: WebInspector.StorageTabContentView.Type},
         {image: "Images/Storage.svg", title: WebInspector.UIString("Storage"), type: WebInspector.StorageTabContentView.Type},
-        {image: "Images/Console.svg", title: WebInspector.UIString("Console"), type: WebInspector.ConsoleTabContentView.Type}
+        {image: "Images/Timeline.svg", title: WebInspector.UIString("Timelines"), type: WebInspector.TimelineTabContentView.Type}
     ];
 
     ];
 
+    allowedNewTabs.sort(function(a, b) { return a.title.localeCompare(b.title); });
+
     for (var info of allowedNewTabs) {
         if (!WebInspector.isTabTypeAllowed(info.type))
             continue;
     for (var info of allowedNewTabs) {
         if (!WebInspector.isTabTypeAllowed(info.type))
             continue;
index 06179b2..1db51fd 100644 (file)
@@ -731,7 +731,10 @@ WebInspector.TabBar = class TabBar extends WebInspector.Object
         this._finishExpandingTabsAfterClose();
     }
 
         this._finishExpandingTabsAfterClose();
     }
 
-    _handleNewTabClick(event) {
+    _handleNewTabClick(event)
+    {
+        if (this._newTabItem.disabled)
+            return;
         this.dispatchEventToListeners(WebInspector.TabBar.Event.NewTabItemClicked);
     }
 
         this.dispatchEventToListeners(WebInspector.TabBar.Event.NewTabItemClicked);
     }