Attachment 358159 Details for Bug 183420 – Patch

[patch] Patch

bug-183420-20181231190410.patch (text/plain), 124.79 KB, created by Devin Rousso on 2018-12-31 18:04:12 PST

(hide)

Description:

Filename:

MIME Type:

Creator: Devin Rousso

Created: 2018-12-31 18:04:12 PST

Size: 124.79 KB

patch

obsolete

>diff --git a/Source/WebInspectorUI/ChangeLog b/Source/WebInspectorUI/ChangeLog
>index d0d8c6c2cb99a6a96941aac00f7af2287933ae7c..23a30240308cf7052cf6bf85c5a755148c80285c 100644
>--- a/Source/WebInspectorUI/ChangeLog
>+++ b/Source/WebInspectorUI/ChangeLog
>@@ -1,3 +1,149 @@
>+2018-12-31  Devin Rousso  <drousso@apple.com>
>+
>+        Web Inspector: [META] Merge Resources and Debugger into a single Sources tab
>+        https://bugs.webkit.org/show_bug.cgi?id=183420
>+
>+        Reviewed by NOBODY (OOPS!).
>+
>+        * UserInterface/Views/SourcesNavigationSidebarPanel.js: Added.
>+        (WI.SourcesNavigationSidebarPanel):
>+        (WI.SourcesNavigationSidebarPanel.shouldPlaceResourcesAtTopLevel):
>+        (WI.SourcesNavigationSidebarPanel.prototype.get minimumWidth):
>+        (WI.SourcesNavigationSidebarPanel.prototype.closed):
>+        (WI.SourcesNavigationSidebarPanel.prototype.showDefaultContentView):
>+        (WI.SourcesNavigationSidebarPanel.prototype.treeElementForRepresentedObject.isAncestor):
>+        (WI.SourcesNavigationSidebarPanel.prototype.treeElementForRepresentedObject.getParent):
>+        (WI.SourcesNavigationSidebarPanel.prototype.treeElementForRepresentedObject):
>+        (WI.SourcesNavigationSidebarPanel.prototype.resetFilter):
>+        (WI.SourcesNavigationSidebarPanel.prototype.hasCustomFilters):
>+        (WI.SourcesNavigationSidebarPanel.prototype.matchTreeElementAgainstCustomFilters.match):
>+        (WI.SourcesNavigationSidebarPanel.prototype.matchTreeElementAgainstCustomFilters):
>+        (WI.SourcesNavigationSidebarPanel.prototype.willDismissPopover):
>+        (WI.SourcesNavigationSidebarPanel.prototype._compareTreeElements):
>+        (WI.SourcesNavigationSidebarPanel.prototype._updateMainFrameTreeElement):
>+        (WI.SourcesNavigationSidebarPanel.prototype._addTarget):
>+        (WI.SourcesNavigationSidebarPanel.prototype._findCallStackTargetTreeElement):
>+        (WI.SourcesNavigationSidebarPanel.prototype._updateCallStackTreeOutline):
>+        (WI.SourcesNavigationSidebarPanel.prototype._addResource):
>+        (WI.SourcesNavigationSidebarPanel.prototype._addResourcesRecursivelyForFrame):
>+        (WI.SourcesNavigationSidebarPanel.prototype._addScript):
>+        (WI.SourcesNavigationSidebarPanel.prototype._addWorkerTargetWithMainResource):
>+        (WI.SourcesNavigationSidebarPanel.prototype._addDebuggerTreeElementForSourceCode):
>+        (WI.SourcesNavigationSidebarPanel.prototype._insertDebuggerTreeElement):
>+        (WI.SourcesNavigationSidebarPanel.prototype._compareBreakpointTreeElements):
>+        (WI.SourcesNavigationSidebarPanel.prototype._addBreakpoint):
>+        (WI.SourcesNavigationSidebarPanel.prototype._removeBreakpoint):
>+        (WI.SourcesNavigationSidebarPanel.prototype._removeAllBreakpoints):
>+        (WI.SourcesNavigationSidebarPanel.prototype._toggleAllBreakpoints):
>+        (WI.SourcesNavigationSidebarPanel.prototype._breakpointsBeneathTreeElement):
>+        (WI.SourcesNavigationSidebarPanel.prototype._addIssue):
>+        (WI.SourcesNavigationSidebarPanel.prototype._removeDebuggerTreeElement):
>+        (WI.SourcesNavigationSidebarPanel.prototype._addBreakpointsForSourceCode):
>+        (WI.SourcesNavigationSidebarPanel.prototype._addIssuesForSourceCode):
>+        (WI.SourcesNavigationSidebarPanel.prototype._updateBreakpointsDisabledBanner):
>+        (WI.SourcesNavigationSidebarPanel.prototype._updatePauseReason):
>+        (WI.SourcesNavigationSidebarPanel.prototype._updatePauseReasonGotoArrow):
>+        (WI.SourcesNavigationSidebarPanel.prototype._updatePauseReasonSection):
>+        (WI.SourcesNavigationSidebarPanel.prototype._handleResourceTypeScopeBarSelectionChanged):
>+        (WI.SourcesNavigationSidebarPanel.prototype._handleTreeSelectionDidChange):
>+        (WI.SourcesNavigationSidebarPanel.prototype._handleBreakpointElementAddedOrRemoved):
>+        (WI.SourcesNavigationSidebarPanel.prototype._handleCreateBreakpointClicked):
>+        (WI.SourcesNavigationSidebarPanel.prototype._handleFrameMainResourceDidChange):
>+        (WI.SourcesNavigationSidebarPanel.prototype._handleResourceAdded):
>+        (WI.SourcesNavigationSidebarPanel.prototype._handleMainFrameDidChange):
>+        (WI.SourcesNavigationSidebarPanel.prototype._handleDebuggerBreakpointAdded):
>+        (WI.SourcesNavigationSidebarPanel.prototype._handleDebuggerBreakpointRemoved):
>+        (WI.SourcesNavigationSidebarPanel.prototype._handleDebuggerBreakpointsEnabledDidChange):
>+        (WI.SourcesNavigationSidebarPanel.prototype._handleDebuggerScriptAdded):
>+        (WI.SourcesNavigationSidebarPanel.prototype._handleDebuggerScriptRemoved):
>+        (WI.SourcesNavigationSidebarPanel.prototype._handleDebuggerScriptsCleared):
>+        (WI.SourcesNavigationSidebarPanel.prototype._handleDebuggerPaused):
>+        (WI.SourcesNavigationSidebarPanel.prototype._handleDebuggerResumed):
>+        (WI.SourcesNavigationSidebarPanel.prototype._handleDebuggerCallFramesDidChange):
>+        (WI.SourcesNavigationSidebarPanel.prototype._handleDebuggerActiveCallFrameDidChange):
>+        (WI.SourcesNavigationSidebarPanel.prototype._handleDebuggerWaitingToPause):
>+        (WI.SourcesNavigationSidebarPanel.prototype._handleDebuggerObjectDisplayLocationDidChange):
>+        (WI.SourcesNavigationSidebarPanel.prototype._handleDOMBreakpointResolvedStateDidChange):
>+        (WI.SourcesNavigationSidebarPanel.prototype._handleConsoleIssueAdded):
>+        (WI.SourcesNavigationSidebarPanel.prototype._handleConsoleCleared):
>+        (WI.SourcesNavigationSidebarPanel.prototype._handleTimelineCapturingWillStart):
>+        (WI.SourcesNavigationSidebarPanel.prototype._handleTimelineCapturingStopped):
>+        (WI.SourcesNavigationSidebarPanel.prototype._handleCSSStyleSheetAdded):
>+        (WI.SourcesNavigationSidebarPanel.prototype._handleTargetAdded):
>+        (WI.SourcesNavigationSidebarPanel.prototype._handleTargetRemoved):
>+        (WI.SourcesNavigationSidebarPanel.prototype._handleExtraDomainsActivated):
>+        * UserInterface/Views/SourcesNavigationSidebarPanel.css: Added.
>+        (.sidebar > .panel.navigation.sources > .content):
>+        (.sidebar > .panel.navigation.sources > .navigation-bar):
>+        (.sidebar > .panel.navigation.sources > .navigation-bar .debugger-breakpoints):
>+        (.sidebar > .panel.navigation.sources > .navigation-bar .debugger-breakpoints.activated):
>+        (.sidebar > .panel.navigation.sources > .navigation-bar .debugger-pause-resume):
>+        (.sidebar > .panel.navigation.sources > .navigation-bar .debugger-pause-resume.activated):
>+        (.sidebar > .panel.navigation.sources > .content > .warning-banner):
>+        (.sidebar > .panel.navigation.sources > .content > .details-section):
>+        (.sidebar > .panel.navigation.sources > .content > .details-section.paused-reason.collapsed > .header > .options,):
>+        (.sidebar > .panel.navigation.sources > .content > .details-section.collapsed > .content):
>+        (.sidebar > .panel.navigation.sources > .content > .details-section.scripts:not(.collapsed)):
>+        (.sidebar > .panel.navigation.sources > .content > .navigation-bar):
>+        (.sidebar > .panel.navigation.sources > .content > .tree-outline.single-thread):
>+        (.sidebar > .panel.navigation.sources > .content > .tree-outline.single-thread > .item.thread):
>+        (@media (prefers-dark-interface) .sidebar > > .content > .panel.navigation.sources .warning-banner):
>+
>+        * UserInterface/Views/SourcesTabContentView.js: Added.
>+        (WI.SourcesTabContentView):
>+        (WI.SourcesTabContentView.tabInfo):
>+        (WI.SourcesTabContentView.isTabAllowed):
>+        (WI.SourcesTabContentView.prototype.get type):
>+        (WI.SourcesTabContentView.prototype.get supportsSplitContentBrowser):
>+        (WI.SourcesTabContentView.prototype.canShowRepresentedObject):
>+        (WI.SourcesTabContentView.prototype.showDetailsSidebarPanels):
>+        (WI.SourcesTabContentView.prototype.showScopeChainDetailsSidebarPanel):
>+        (WI.SourcesTabContentView.prototype.revealAndSelectBreakpoint):
>+
>+        * UserInterface/Views/CanvasSidebarPanel.js:
>+        (WI.CanvasSidebarPanel):
>+        * UserInterface/Views/DebuggerSidebarPanel.js:
>+        (WI.DebuggerSidebarPanel):
>+        (WI.DebuggerSidebarPanel.prototype._updatePauseReasonSection):
>+        * UserInterface/Views/NavigationSidebarPanel.js:
>+        (WI.NavigationSidebarPanel.prototype.createContentTreeOutline):
>+        (WI.NavigationSidebarPanel.prototype._treeElementAddedOrChanged):
>+        (WI.NavigationSidebarPanel.prototype._checkOutlinesForPendingViewStateCookie):
>+        Rework `createContentTreeOutline` to allow for additional symbols.
>+        Add another symbol to ensure that the `WI.TreeOutline` is not used for cookie restoration.
>+
>+        * UserInterface/Protocol/InspectorFrontendAPI.js:
>+        (InspectorFrontendAPI.showResources):
>+        * UserInterface/Views/ContextMenuUtilities.js:
>+        (WI.appendContextMenuItemsForURL):
>+        * UserInterface/Views/DefaultDashboardView.js:
>+        (WI.DefaultDashboardView.prototype._resourcesItemWasClicked):
>+        * UserInterface/Views/SourceCodeTextEditor.js:
>+        (WI.SourceCodeTextEditor.prototype.textEditorGutterContextMenu):
>+
>+        * UserInterface/Views/TabBrowser.js:
>+        (WI.TabBrowser.prototype.bestTabContentViewForRepresentedObject):
>+
>+        * UserInterface/Base/Main.js:
>+        (WI.contentLoaded):
>+        (WI.showSourcesTab): Added.
>+        (WI.isShowingSourcesTab): Added.
>+        (WI.tabContentViewClassForRepresentedObject):
>+        (WI._debuggerDidPause):
>+
>+        * UserInterface/Views/DebuggerTabContentView.js:
>+        (WI.DebuggerTabContentView.isTabAllowed):
>+        * UserInterface/Views/ResourcesTabContentView.js:
>+        (WI.ResourcesTabContentView.isTabAllowed):
>+
>+        * UserInterface/Base/Setting.js:
>+        * UserInterface/Views/SettingsTabContentView.js:
>+        (WI.SettingsTabContentView.prototype._createExperimentalSettingsView):
>+
>+        * UserInterface/Main.html:
>+        * UserInterface/Images/Sources.svg: Added.
>+        * Localizations/en.lproj/localizedStrings.js:
>+
> 2018-12-21  Devin Rousso  <drousso@apple.com>
> 
>         Web Inspector: Styles Redesign: remove unused CSS style icons
>diff --git a/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js b/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
>index aa78eeb05fb3e09d26342f7b42fbebef4a0d536d..6c5bd3618684d428b5d12434ca8099523848a410 100644
>--- a/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
>+++ b/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
>@@ -359,6 +359,7 @@ localizedStrings["Enable Event Listener"] = "Enable Event Listener";
> localizedStrings["Enable Layers Tab"] = "Enable Layers Tab";
> localizedStrings["Enable New Tab Bar"] = "Enable New Tab Bar";
> localizedStrings["Enable Program"] = "Enable Program";
>+localizedStrings["Enable Sources Tab"] = "Enable Sources Tab";
> localizedStrings["Enable all breakpoints (%s)"] = "Enable all breakpoints (%s)";
> localizedStrings["Enable breakpoints"] = "Enable breakpoints";
> localizedStrings["Enable paint flashing"] = "Enable paint flashing";
>@@ -777,6 +778,7 @@ localizedStrings["Reveal in Layers Tab"] = "Reveal in Layers Tab";
> localizedStrings["Reveal in Network Tab"] = "Reveal in Network Tab";
> localizedStrings["Reveal in Original Resource"] = "Reveal in Original Resource";
> localizedStrings["Reveal in Resources Tab"] = "Reveal in Resources Tab";
>+localizedStrings["Reveal in Sources Tab"] = "Reveal in Sources Tab";
> localizedStrings["Role"] = "Role";
> localizedStrings["Run %d"] = "Run %d";
> localizedStrings["Running the \u201C%s\u201D audit"] = "Running the \u201C%s\u201D audit";
>@@ -874,6 +876,7 @@ localizedStrings["Sort Ascending"] = "Sort Ascending";
> localizedStrings["Sort Descending"] = "Sort Descending";
> localizedStrings["Source"] = "Source";
> localizedStrings["Sources"] = "Sources";
>+localizedStrings["Sources:"] = "Sources:";
> localizedStrings["Space"] = "Space";
> localizedStrings["Spaces"] = "Spaces";
> localizedStrings["Specificity: (%d, %d, %d)"] = "Specificity: (%d, %d, %d)";
>diff --git a/Source/WebInspectorUI/UserInterface/Base/Main.js b/Source/WebInspectorUI/UserInterface/Base/Main.js
>index 251cef7c43434448ba6c972ea27faa0cca7884b6..ef62040fed90b12c71eef683b6fb56b93dd5dc6e 100644
>--- a/Source/WebInspectorUI/UserInterface/Base/Main.js
>+++ b/Source/WebInspectorUI/UserInterface/Base/Main.js
>@@ -493,6 +493,7 @@ WI.contentLoaded = function()
>     let productionTabClasses = [
>         WI.ElementsTabContentView,
>         WI.NetworkTabContentView,
>+        WI.SourcesTabContentView,
>         WI.DebuggerTabContentView,
>         WI.ResourcesTabContentView,
>         WI.TimelineTabContentView,
>@@ -1020,6 +1021,26 @@ WI.isShowingElementsTab = function()
>     return this.tabBrowser.selectedTabContentView instanceof WI.ElementsTabContentView;
> };
> 
>+WI.showSourcesTab = function(options = {})
>+{
>+    let tabContentView = this.tabBrowser.bestTabContentViewForClass(WI.SourcesTabContentView);
>+    if (!tabContentView)
>+        tabContentView = new WI.SourcesTabContentView;
>+
>+    if (options.breakpointToSelect instanceof WI.Breakpoint)
>+        tabContentView.revealAndSelectBreakpoint(options.breakpointToSelect);
>+
>+    if (options.showScopeChainSidebar)
>+        tabContentView.showScopeChainDetailsSidebarPanel();
>+
>+    this.tabBrowser.showTabForContentView(tabContentView);
>+};
>+
>+WI.isShowingSourcesTab = function()
>+{
>+    return this.tabBrowser.selectedTabContentView instanceof WI.SourcesTabContentView;
>+}
>+
> WI.showDebuggerTab = function(options)
> {
>     var tabContentView = this.tabBrowser.bestTabContentViewForClass(WI.DebuggerTabContentView);
>@@ -1176,24 +1197,36 @@ WI.tabContentViewClassForRepresentedObject = function(representedObject)
>     if (representedObject === this._consoleRepresentedObject)
>         return WI.ConsoleTabContentView;
> 
>-    if (WI.debuggerManager.paused) {
>-        if (representedObject instanceof WI.Script)
>-            return WI.DebuggerTabContentView;
>+    if (WI.settings.experimentalEnableSourcesTab.value) {
>+        if (representedObject instanceof WI.Frame
>+            || representedObject instanceof WI.FrameCollection
>+            || representedObject instanceof WI.Resource
>+            || representedObject instanceof WI.ResourceCollection
>+            || representedObject instanceof WI.Script
>+            || representedObject instanceof WI.ScriptCollection
>+            || representedObject instanceof WI.CSSStyleSheet
>+            || representedObject instanceof WI.CSSStyleSheetCollection)
>+            return WI.SourcesTabContentView;
>+    } else {
>+        if (WI.debuggerManager.paused) {
>+            if (representedObject instanceof WI.Script)
>+                return WI.DebuggerTabContentView;
> 
>-        if (representedObject instanceof WI.Resource && (representedObject.type === WI.Resource.Type.Document || representedObject.type === WI.Resource.Type.Script))
>-            return WI.DebuggerTabContentView;
>+            if (representedObject instanceof WI.Resource && (representedObject.type === WI.Resource.Type.Document || representedObject.type === WI.Resource.Type.Script))
>+                return WI.DebuggerTabContentView;
>+        }
>+
>+        if (representedObject instanceof WI.Frame
>+            || representedObject instanceof WI.FrameCollection
>+            || representedObject instanceof WI.Resource
>+            || representedObject instanceof WI.ResourceCollection
>+            || representedObject instanceof WI.Script
>+            || representedObject instanceof WI.ScriptCollection
>+            || representedObject instanceof WI.CSSStyleSheet
>+            || representedObject instanceof WI.CSSStyleSheetCollection)
>+            return WI.ResourcesTabContentView;
>     }
> 
>-    if (representedObject instanceof WI.Frame
>-        || representedObject instanceof WI.FrameCollection
>-        || representedObject instanceof WI.Resource
>-        || representedObject instanceof WI.ResourceCollection
>-        || representedObject instanceof WI.Script
>-        || representedObject instanceof WI.ScriptCollection
>-        || representedObject instanceof WI.CSSStyleSheet
>-        || representedObject instanceof WI.CSSStyleSheetCollection)
>-        return WI.ResourcesTabContentView;
>-
>     if (representedObject instanceof WI.DOMStorageObject || representedObject instanceof WI.CookieStorageObject ||
>         representedObject instanceof WI.DatabaseTableObject || representedObject instanceof WI.DatabaseObject ||
>         representedObject instanceof WI.ApplicationCacheFrame || representedObject instanceof WI.IndexedDatabaseObjectStore ||
>@@ -1453,7 +1486,10 @@ WI._dragOver = function(event)
> 
> WI._debuggerDidPause = function(event)
> {
>-    this.showDebuggerTab({showScopeChainSidebar: WI.settings.showScopeChainOnPause.value});
>+    if (WI.settings.experimentalEnableSourcesTab.value)
>+        WI.showSourcesTab({showScopeChainSidebar: WI.settings.showScopeChainOnPause.value});
>+    else
>+        WI.showDebuggerTab({showScopeChainSidebar: WI.settings.showScopeChainOnPause.value});
> 
>     this._dashboardContainer.showDashboardViewForRepresentedObject(this._dashboards.debugger);
> 
>diff --git a/Source/WebInspectorUI/UserInterface/Base/Setting.js b/Source/WebInspectorUI/UserInterface/Base/Setting.js
>index d0508a3317005c9354f571424d56ed90f61c17bd..8ddfecf3864e08b63c05928251a50db65f5f89b1 100644
>--- a/Source/WebInspectorUI/UserInterface/Base/Setting.js
>+++ b/Source/WebInspectorUI/UserInterface/Base/Setting.js
>@@ -130,6 +130,7 @@ WI.settings = {
> 
>     // Experimental
>     experimentalEnableComputedStyleCascades: new WI.Setting("experimental-enable-computed-style-cascades", false),
>+    experimentalEnableSourcesTab: new WI.Setting("experimental-enable-sources-tab", false),
>     experimentalEnableLayersTab: new WI.Setting("experimental-enable-layers-tab", false),
>     experimentalEnableNewTabBar: new WI.Setting("experimental-enable-new-tab-bar", false),
>     experimentalEnableAuditTab: new WI.Setting("experimental-enable-audit-tab", false),
>diff --git a/Source/WebInspectorUI/UserInterface/Images/Sources.svg b/Source/WebInspectorUI/UserInterface/Images/Sources.svg
>new file mode 100644
>index 0000000000000000000000000000000000000000..272b1bf26693ab178d68f6df89879b25a25e1d6b
>--- /dev/null
>+++ b/Source/WebInspectorUI/UserInterface/Images/Sources.svg
>@@ -0,0 +1,6 @@
>+<?xml version="1.0" encoding="utf-8"?>
>+
>+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
>+    <path fill="none" stroke="currentColor" d="M 2.5 1.5 L 2.5 14.5 L 13.5 14.5 L 13.5 5.5 L 9.5 1.5 L 2.5 1.5 Z"/>
>+    <path fill="currentColor" d="M 9.0 3.0 L 9.0 6.0 L 12.0 6.0 Z"/>
>+</svg>
>diff --git a/Source/WebInspectorUI/UserInterface/Main.html b/Source/WebInspectorUI/UserInterface/Main.html
>index 0f3cca89e808bc9ffc676be437ae65c7160dcda2..45e4f6637074ec88072681d63cd44884f3241c1c 100644
>--- a/Source/WebInspectorUI/UserInterface/Main.html
>+++ b/Source/WebInspectorUI/UserInterface/Main.html
>@@ -191,6 +191,7 @@
>     <link rel="stylesheet" href="Views/Slider.css">
>     <link rel="stylesheet" href="Views/SoftContextMenu.css">
>     <link rel="stylesheet" href="Views/SourceCodeTextEditor.css">
>+    <link rel="stylesheet" href="Views/SourcesNavigationSidebarPanel.css">
>     <link rel="stylesheet" href="Views/SpreadsheetCSSStyleDeclarationEditor.css">
>     <link rel="stylesheet" href="Views/SpreadsheetCSSStyleDeclarationSection.css">
>     <link rel="stylesheet" href="Views/SpreadsheetRulesStyleDetailsPanel.css">
>@@ -547,6 +548,7 @@
>     <script src="Views/ResourcesTabContentView.js"></script>
>     <script src="Views/SearchTabContentView.js"></script>
>     <script src="Views/SettingsTabContentView.js"></script>
>+    <script src="Views/SourcesTabContentView.js"></script>
>     <script src="Views/StorageTabContentView.js"></script>
>     <script src="Views/TimelineTabContentView.js"></script>
> 
>@@ -773,6 +775,7 @@
>     <script src="Views/SourceCodeTextEditor.js"></script>
>     <script src="Views/SourceCodeTimelineTimelineDataGridNode.js"></script>
>     <script src="Views/SourceCodeTimelineTreeElement.js"></script>
>+    <script src="Views/SourcesNavigationSidebarPanel.js"></script>
>     <script src="Views/SourceMapResourceTreeElement.js"></script>
>     <script src="Views/SpanningDataGridNode.js"></script>
> 
>diff --git a/Source/WebInspectorUI/UserInterface/Protocol/InspectorFrontendAPI.js b/Source/WebInspectorUI/UserInterface/Protocol/InspectorFrontendAPI.js
>index f32f2835af15ab9948bfbb17eeb31cc69ca51dde..6d070e6a663b7b0e6a1ddffeebbf2c1ec8c71d3e 100644
>--- a/Source/WebInspectorUI/UserInterface/Protocol/InspectorFrontendAPI.js
>+++ b/Source/WebInspectorUI/UserInterface/Protocol/InspectorFrontendAPI.js
>@@ -99,7 +99,11 @@ InspectorFrontendAPI = {
> 
>     showResources: function()
>     {
>-        WI.showResourcesTab();
>+        if (WI.settings.experimentalEnableSourcesTab.value)
>+            WI.showSourcesTab();
>+        else
>+            WI.showResourcesTab();
>+
>     },
> 
>     showTimelines: function()
>diff --git a/Source/WebInspectorUI/UserInterface/Views/CanvasSidebarPanel.js b/Source/WebInspectorUI/UserInterface/Views/CanvasSidebarPanel.js
>index b5cc3522151f6330a864b036840620ca9b182cd5..ab26833d72411ecbb2a0c71207ac4fe956b13b66 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/CanvasSidebarPanel.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/CanvasSidebarPanel.js
>@@ -55,8 +55,7 @@ WI.CanvasSidebarPanel = class CanvasSidebarPanel extends WI.NavigationSidebarPan
> 
>         this.addSubview(this._navigationBar);
> 
>-        const suppressFiltering = true;
>-        this._canvasTreeOutline = this.createContentTreeOutline(suppressFiltering);
>+        this._canvasTreeOutline = this.createContentTreeOutline({suppressFiltering: true});
>         this._canvasTreeOutline.element.classList.add("canvas");
> 
>         this._recordingNavigationBar = new WI.NavigationBar;
>diff --git a/Source/WebInspectorUI/UserInterface/Views/ContextMenuUtilities.js b/Source/WebInspectorUI/UserInterface/Views/ContextMenuUtilities.js
>index b543529f5c1c0198999fa4b58e9da5038958fd9b..6d265a7932f100f42abc5c5428394881814ec070 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/ContextMenuUtilities.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/ContextMenuUtilities.js
>@@ -102,14 +102,22 @@ WI.appendContextMenuItemsForURL = function(contextMenu, url, options = {})
>     }
> 
>     if (WI.networkManager.resourceForURL(url)) {
>-        if (!WI.isShowingResourcesTab()) {
>-            contextMenu.appendItem(WI.UIString("Reveal in Resources Tab"), () => {
>-                showResourceWithOptions({ignoreNetworkTab: true, ignoreSearchTab: true});
>-            });
>+        if (WI.settings.experimentalEnableSourcesTab.value) {
>+            if (!WI.isShowingSourcesTab()) {
>+                contextMenu.appendItem(WI.UIString("Reveal in Sources Tab"), () => {
>+                    showResourceWithOptions({preferredTabType: WI.SourcesTabContentView.Type});
>+                });
>+            }
>+        } else {
>+            if (!WI.isShowingResourcesTab()) {
>+                contextMenu.appendItem(WI.UIString("Reveal in Resources Tab"), () => {
>+                    showResourceWithOptions({preferredTabType: WI.ResourcesTabContentView.Type});
>+                });
>+            }
>         }
>         if (!WI.isShowingNetworkTab()) {
>             contextMenu.appendItem(WI.UIString("Reveal in Network Tab"), () => {
>-                showResourceWithOptions({ignoreResourcesTab: true, ignoreDebuggerTab: true, ignoreSearchTab: true});
>+                showResourceWithOptions({preferredTabType: WI.NetworkTabContentView.Type});
>             });
>         }
>     }
>diff --git a/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.js b/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.js
>index 90ab86d2af47e623491f0914596d4bbe66b49e67..9a39170422bf9614128b0ee26acdeca00bb7eaaa 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.js
>@@ -179,8 +179,7 @@ WI.DebuggerSidebarPanel = class DebuggerSidebarPanel extends WI.NavigationSideba
>         this._scriptsSection = new WI.DetailsSection("scripts", WI.UIString("Sources"), [scriptsGroup]);
>         this.contentView.element.appendChild(this._scriptsSection.element);
> 
>-        const suppressFiltering = true;
>-        this._callStackTreeOutline = this.createContentTreeOutline(suppressFiltering);
>+        this._callStackTreeOutline = this.createContentTreeOutline({suppressFiltering: true});
>         this._callStackTreeOutline.addEventListener(WI.TreeOutline.Event.SelectionDidChange, this._treeSelectionDidChange, this);
> 
>         this._callStackRow = new WI.DetailsSectionRow;
>@@ -1042,8 +1041,7 @@ WI.DebuggerSidebarPanel = class DebuggerSidebarPanel extends WI.NavigationSideba
>             if (!eventBreakpoint)
>                 return false;
> 
>-            var suppressFiltering = true;
>-            this._pauseReasonTreeOutline = this.createContentTreeOutline(suppressFiltering);
>+            this._pauseReasonTreeOutline = this.createContentTreeOutline({suppressFiltering: true});
> 
>             var eventBreakpointTreeElement = new WI.EventBreakpointTreeElement(eventBreakpoint, {
>                 className: WI.DebuggerSidebarPanel.PausedBreakpointIconStyleClassName,
>@@ -1072,8 +1070,7 @@ WI.DebuggerSidebarPanel = class DebuggerSidebarPanel extends WI.NavigationSideba
>         case WI.DebuggerManager.PauseReason.Breakpoint:
>             console.assert(pauseData, "Expected breakpoint identifier, but found none.");
>             if (pauseData && pauseData.breakpointId) {
>-                const suppressFiltering = true;
>-                this._pauseReasonTreeOutline = this.createContentTreeOutline(suppressFiltering);
>+                this._pauseReasonTreeOutline = this.createContentTreeOutline({suppressFiltering: true});
>                 this._pauseReasonTreeOutline.addEventListener(WI.TreeOutline.Event.SelectionDidChange, this._treeSelectionDidChange, this);
> 
>                 let breakpoint = WI.debuggerManager.breakpointForIdentifier(pauseData.breakpointId);
>@@ -1122,8 +1119,7 @@ WI.DebuggerSidebarPanel = class DebuggerSidebarPanel extends WI.NavigationSideba
>                 if (!domBreakpoint)
>                     return;
> 
>-                const suppressFiltering = true;
>-                this._pauseReasonTreeOutline = this.createContentTreeOutline(suppressFiltering);
>+                this._pauseReasonTreeOutline = this.createContentTreeOutline({suppressFiltering: true});
> 
>                 let type = WI.DOMBreakpointTreeElement.displayNameForType(domBreakpoint.type);
>                 let domBreakpointTreeElement = new WI.DOMBreakpointTreeElement(domBreakpoint, {
>@@ -1181,8 +1177,7 @@ WI.DebuggerSidebarPanel = class DebuggerSidebarPanel extends WI.NavigationSideba
>             if (!eventBreakpoint)
>                 return false;
> 
>-            var suppressFiltering = true;
>-            this._pauseReasonTreeOutline = this.createContentTreeOutline(suppressFiltering);
>+            this._pauseReasonTreeOutline = this.createContentTreeOutline({suppressFiltering: true});
> 
>             var eventBreakpointTreeElement = new WI.EventBreakpointTreeElement(eventBreakpoint, {
>                 className: WI.DebuggerSidebarPanel.PausedBreakpointIconStyleClassName,
>@@ -1232,8 +1227,7 @@ WI.DebuggerSidebarPanel = class DebuggerSidebarPanel extends WI.NavigationSideba
>             if (!eventBreakpoint)
>                 return false;
> 
>-            var suppressFiltering = true;
>-            this._pauseReasonTreeOutline = this.createContentTreeOutline(suppressFiltering);
>+            this._pauseReasonTreeOutline = this.createContentTreeOutline({suppressFiltering: true});
> 
>             var eventBreakpointTreeElement = new WI.EventBreakpointTreeElement(eventBreakpoint, {
>                 className: WI.DebuggerSidebarPanel.PausedBreakpointIconStyleClassName,
>@@ -1255,7 +1249,7 @@ WI.DebuggerSidebarPanel = class DebuggerSidebarPanel extends WI.NavigationSideba
>                     let xhrBreakpoint = WI.domDebuggerManager.xhrBreakpointForURL(pauseData.breakpointURL);
>                     console.assert(xhrBreakpoint, "Expected XHR breakpoint for URL.", pauseData.breakpointURL);
> 
>-                    this._pauseReasonTreeOutline = this.createContentTreeOutline(true);
>+                    this._pauseReasonTreeOutline = this.createContentTreeOutline({suppressFiltering: true});
> 
>                     let xhrBreakpointTreeElement = new WI.XHRBreakpointTreeElement(xhrBreakpoint, {
>                         className: WI.DebuggerSidebarPanel.PausedBreakpointIconStyleClassName,
>diff --git a/Source/WebInspectorUI/UserInterface/Views/DebuggerTabContentView.js b/Source/WebInspectorUI/UserInterface/Views/DebuggerTabContentView.js
>index 97e643661b2e7c17d41551fa691ab1c4bd7ad07c..03ab410511dc4930828d7ea0c71eb45b6853ae3a 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/DebuggerTabContentView.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/DebuggerTabContentView.js
>@@ -41,6 +41,11 @@ WI.DebuggerTabContentView = class DebuggerTabContentView extends WI.ContentBrows
>         };
>     }
> 
>+    static isTabAllowed()
>+    {
>+        return !WI.settings.experimentalEnableSourcesTab.value;
>+    }
>+
>     // Public
> 
>     get type()
>diff --git a/Source/WebInspectorUI/UserInterface/Views/DefaultDashboardView.js b/Source/WebInspectorUI/UserInterface/Views/DefaultDashboardView.js
>index ef7b66eef6796c2baec63110101245cee666def8..7faf0d5a6c6d26ac10438b2aec13a02d633e8c39 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/DefaultDashboardView.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/DefaultDashboardView.js
>@@ -133,7 +133,10 @@ WI.DefaultDashboardView = class DefaultDashboardView extends WI.DashboardView
> 
>     _resourcesItemWasClicked()
>     {
>-        WI.showResourcesTab();
>+        if (WI.settings.experimentalEnableSourcesTab.value)
>+            WI.showSourcesTab();
>+        else
>+            WI.showResourcesTab();
>     }
> 
>     _networkItemWasClicked()
>diff --git a/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.js b/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.js
>index 477480bfc5cc48a97d48879cdf778da571394aae..5d938ec945c80c4419be1c60d45a7406c7d9cbc1 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.js
>@@ -123,7 +123,7 @@ WI.NavigationSidebarPanel = class NavigationSidebarPanel extends WI.SidebarPanel
>         this._finalAttemptToRestoreViewStateTimeout = undefined;
>     }
> 
>-    createContentTreeOutline(suppressFiltering)
>+    createContentTreeOutline({ignoreCookieRestoration, suppressFiltering} = {})
>     {
>         let contentTreeOutline = new WI.TreeOutline;
>         contentTreeOutline.allowsRepeatSelection = true;
>@@ -139,6 +139,7 @@ WI.NavigationSidebarPanel = class NavigationSidebarPanel extends WI.SidebarPanel
>             contentTreeOutline.addEventListener(WI.TreeOutline.Event.ElementDisclosureDidChanged, this._treeElementDisclosureDidChange, this);
>         }
> 
>+        contentTreeOutline[WI.NavigationSidebarPanel.IgnoreCookieRestoration] = ignoreCookieRestoration;
>         contentTreeOutline[WI.NavigationSidebarPanel.SuppressFilteringSymbol] = suppressFiltering;
> 
>         return contentTreeOutline;
>@@ -609,7 +610,7 @@ WI.NavigationSidebarPanel = class NavigationSidebarPanel extends WI.SidebarPanel
>         if (this.visible)
>             this.soon._updateContentOverflowShadowVisibility();
> 
>-        if (this.selected)
>+        if (this.selected && !treeElement.treeOutline[WI.NavigationSidebarPanel.IgnoreCookieRestoration])
>             this._checkElementsForPendingViewStateCookie([treeElement]);
>     }
> 
>@@ -661,6 +662,9 @@ WI.NavigationSidebarPanel = class NavigationSidebarPanel extends WI.SidebarPanel
> 
>         var visibleTreeElements = [];
>         this.contentTreeOutlines.forEach(function(outline) {
>+            if (outline[WI.NavigationSidebarPanel.IgnoreCookieRestoration])
>+                return;
>+
>             var currentTreeElement = outline.hasChildren ? outline.children[0] : null;
>             while (currentTreeElement) {
>                 visibleTreeElements.push(currentTreeElement);
>@@ -668,7 +672,7 @@ WI.NavigationSidebarPanel = class NavigationSidebarPanel extends WI.SidebarPanel
>             }
>         });
> 
>-        return this._checkElementsForPendingViewStateCookie(visibleTreeElements, matchTypeOnly);
>+        this._checkElementsForPendingViewStateCookie(visibleTreeElements, matchTypeOnly);
>     }
> 
>     _checkElementsForPendingViewStateCookie(treeElements, matchTypeOnly)
>@@ -747,6 +751,7 @@ WI.NavigationSidebarPanel = class NavigationSidebarPanel extends WI.SidebarPanel
>     }
> };
> 
>+WI.NavigationSidebarPanel.IgnoreCookieRestoration = Symbol("ignore-cookie-restoration");
> WI.NavigationSidebarPanel.SuppressFilteringSymbol = Symbol("suppress-filtering");
> WI.NavigationSidebarPanel.WasExpandedDuringFilteringSymbol = Symbol("was-expanded-during-filtering");
> 
>diff --git a/Source/WebInspectorUI/UserInterface/Views/ResourcesTabContentView.js b/Source/WebInspectorUI/UserInterface/Views/ResourcesTabContentView.js
>index 2088b5166fde4302e0f3878d1c7b4933c7196ab0..4f8afc635d0294e806d68baa24e660b6082b37d1 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/ResourcesTabContentView.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/ResourcesTabContentView.js
>@@ -40,6 +40,11 @@ WI.ResourcesTabContentView = class ResourcesTabContentView extends WI.ContentBro
>         };
>     }
> 
>+    static isTabAllowed()
>+    {
>+        return !WI.settings.experimentalEnableSourcesTab.value;
>+    }
>+
>     // Public
> 
>     get type()
>diff --git a/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js b/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js
>index 60511de3b2d07adbed3e27fd909e865244381c87..b25ea209323f4f2058c291230cf7bfe98c6cc694 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js
>@@ -245,9 +245,6 @@ WI.SettingsTabContentView = class SettingsTabContentView extends WI.TabContentVi
> 
>     _createExperimentalSettingsView()
>     {
>-        if (!(window.CanvasAgent || window.NetworkAgent || window.LayerTreeAgent))
>-            return;
>-
>         let experimentalSettingsView = new WI.SettingsView("experimental", WI.UIString("Experimental"));
> 
>         let initialValues = new Map;
>@@ -258,6 +255,9 @@ WI.SettingsTabContentView = class SettingsTabContentView extends WI.TabContentVi
>             experimentalSettingsView.addSeparator();
>         }
> 
>+        experimentalSettingsView.addSetting(WI.UIString("Sources:"), WI.settings.experimentalEnableSourcesTab, WI.UIString("Enable Sources Tab"));
>+        experimentalSettingsView.addSeparator();
>+
>         if (window.LayerTreeAgent) {
>             experimentalSettingsView.addSetting(WI.UIString("Layers:"), WI.settings.experimentalEnableLayersTab, WI.UIString("Enable Layers Tab"));
>             experimentalSettingsView.addSeparator();
>@@ -274,6 +274,8 @@ WI.SettingsTabContentView = class SettingsTabContentView extends WI.TabContentVi
>         reloadInspectorButton.addEventListener("click", (event) => {
>             // Force a copy so that WI.Setting sees it as a new value.
>             let newTabs = WI._openTabsSetting.value.slice();
>+            if (!initialValues.get(WI.settings.experimentalEnableSourcesTab) && WI.settings.experimentalEnableSourcesTab.value)
>+                newTabs.push(WI.SourcesTabContentView.Type);
>             if (!initialValues.get(WI.settings.experimentalEnableLayersTab) && window.LayerTreeAgent && WI.settings.experimentalEnableLayersTab.value)
>                 newTabs.push(WI.LayersTabContentView.Type);
>             if (!initialValues.get(WI.settings.experimentalEnableAuditTab) && WI.settings.experimentalEnableAuditTab.value)
>@@ -294,6 +296,7 @@ WI.SettingsTabContentView = class SettingsTabContentView extends WI.TabContentVi
>         }
> 
>         listenForChange(WI.settings.experimentalEnableComputedStyleCascades);
>+        listenForChange(WI.settings.experimentalEnableSourcesTab);
>         listenForChange(WI.settings.experimentalEnableLayersTab);
>         listenForChange(WI.settings.experimentalEnableAuditTab);
>         listenForChange(WI.settings.experimentalEnableNewTabBar);
>diff --git a/Source/WebInspectorUI/UserInterface/Views/SourceCodeTextEditor.js b/Source/WebInspectorUI/UserInterface/Views/SourceCodeTextEditor.js
>index 7f286ae390574944c2fba27725bb7498ebfe36e4..f95dbdb9e646f20f3f6e8b7c61504cdad94bf34b 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/SourceCodeTextEditor.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/SourceCodeTextEditor.js
>@@ -1245,11 +1245,20 @@ WI.SourceCodeTextEditor = class SourceCodeTextEditor extends WI.TextEditor
>         if (breakpoints.length === 1) {
>             WI.breakpointPopoverController.appendContextMenuItems(contextMenu, breakpoints[0], event.target);
> 
>-            if (!WI.isShowingDebuggerTab()) {
>-                contextMenu.appendSeparator();
>-                contextMenu.appendItem(WI.UIString("Reveal in Debugger Tab"), () => {
>-                    WI.showDebuggerTab({breakpointToSelect: breakpoints[0]});
>-                });
>+            if (WI.settings.experimentalEnableSourcesTab.value) {
>+                if (!WI.isShowingSourcesTab()) {
>+                    contextMenu.appendSeparator();
>+                    contextMenu.appendItem(WI.UIString("Reveal in Sources Tab"), () => {
>+                        WI.showSourcesTab({breakpointToSelect: breakpoints[0]});
>+                    });
>+                }
>+            } else {
>+                if (!WI.isShowingDebuggerTab()) {
>+                    contextMenu.appendSeparator();
>+                    contextMenu.appendItem(WI.UIString("Reveal in Debugger Tab"), () => {
>+                        WI.showDebuggerTab({breakpointToSelect: breakpoints[0]});
>+                    });
>+                }
>             }
> 
>             return;
>diff --git a/Source/WebInspectorUI/UserInterface/Views/SourcesNavigationSidebarPanel.css b/Source/WebInspectorUI/UserInterface/Views/SourcesNavigationSidebarPanel.css
>new file mode 100644
>index 0000000000000000000000000000000000000000..e4f175392f3d485adc2b7e92e9bd6525c4a9229a
>--- /dev/null
>+++ b/Source/WebInspectorUI/UserInterface/Views/SourcesNavigationSidebarPanel.css
>@@ -0,0 +1,101 @@
>+/*
>+ * Copyright (C) 2018 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.sources > .content {
>+    top: var(--navigation-bar-height);
>+}
>+
>+.sidebar > .panel.navigation.sources > .navigation-bar {
>+    position: absolute;
>+    top: 0;
>+    left: 0;
>+    right: 0;
>+}
>+
>+.sidebar > .panel.navigation.sources > .navigation-bar .debugger-breakpoints {
>+    fill: none;
>+    stroke: var(--glyph-color);
>+}
>+
>+.sidebar > .panel.navigation.sources > .navigation-bar .debugger-breakpoints.activated {
>+    fill: var(--glyph-color-active);
>+    stroke: var(--glyph-color-active);
>+}
>+
>+.sidebar > .panel.navigation.sources > .navigation-bar .debugger-pause-resume {
>+    fill: none;
>+    stroke: var(--glyph-color);
>+}
>+
>+.sidebar > .panel.navigation.sources > .navigation-bar .debugger-pause-resume.activated {
>+    stroke: var(--glyph-color-active);
>+}
>+
>+.sidebar > .panel.navigation.sources > .content > .warning-banner {
>+    margin-bottom: 6px;
>+    padding: 11px 6px;
>+    font-size: 11px;
>+    text-align: center;
>+    background-color: hsl(50, 100%, 94%);
>+    border-bottom: 1px solid var(--border-color);
>+}
>+
>+.sidebar > .panel.navigation.sources > .content > .details-section {
>+    font-size: 11px;
>+    border-width: 1px !important;
>+}
>+
>+.sidebar > .panel.navigation.sources > .content > .details-section.paused-reason.collapsed > .header > .options,
>+.sidebar > .panel.navigation.sources > .content > .details-section > .content,
>+.sidebar > .panel.navigation.sources > .content > .details-section > .content > .group {
>+    display: block;
>+}
>+
>+.sidebar > .panel.navigation.sources > .content > .details-section.collapsed > .content {
>+    display: none;
>+}
>+
>+.sidebar > .panel.navigation.sources > .content > .details-section.scripts:not(.collapsed) {
>+    border-bottom: none;
>+}
>+
>+.sidebar > .panel.navigation.sources > .content > .navigation-bar {
>+    margin-bottom: 2px;
>+}
>+
>+.sidebar > .panel.navigation.sources > .content > .tree-outline.single-thread {
>+    -webkit-margin-start: -10px;
>+}
>+
>+.sidebar > .panel.navigation.sources > .content > .tree-outline.single-thread > .item.thread {
>+    display: none;
>+}
>+
>+@media (prefers-dark-interface) {
>+    .sidebar > .panel.navigation.sources > .content > .warning-banner {
>+        color: var(--yellow-highlight-text-color);
>+        background-color: var(--yellow-highlight-background-color);
>+    }
>+}
>diff --git a/Source/WebInspectorUI/UserInterface/Views/SourcesNavigationSidebarPanel.js b/Source/WebInspectorUI/UserInterface/Views/SourcesNavigationSidebarPanel.js
>new file mode 100644
>index 0000000000000000000000000000000000000000..e97c118be186012721cc6e5823858f226d29021b
>--- /dev/null
>+++ b/Source/WebInspectorUI/UserInterface/Views/SourcesNavigationSidebarPanel.js
>@@ -0,0 +1,1702 @@
>+/*
>+ * Copyright (C) 2018 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.
>+ */
>+
>+WI.SourcesNavigationSidebarPanel = class SourcesNavigationSidebarPanel extends WI.NavigationSidebarPanel
>+{
>+    constructor()
>+    {
>+        const shouldAutoPruneStaleTopLevelResourceTreeElements = true;
>+        super("sources", WI.UIString("Sources"), shouldAutoPruneStaleTopLevelResourceTreeElements);
>+
>+        this._debuggerNavigationBar = new WI.NavigationBar;
>+        this.addSubview(this._debuggerNavigationBar);
>+
>+        let createNavigationItem = (constructor, {identifier, defaultToolTip, alternateToolTip, defaultImage, alternateImage, imageWidth, imageHeight}) => {
>+            let args = [identifier];
>+            if (defaultToolTip)
>+                args.push(defaultToolTip);
>+            if (alternateToolTip)
>+                args.push(alternateToolTip);
>+            if (defaultImage)
>+                args.push(defaultImage);
>+            if (alternateImage)
>+                args.push(alternateImage);
>+            if (imageWidth)
>+                args.push(imageWidth);
>+            if (imageHeight)
>+                args.push(imageHeight);
>+            let navigationItem = new constructor(...args);
>+            this._debuggerNavigationBar.addNavigationItem(navigationItem);
>+            return navigationItem;
>+        };
>+
>+        this._debuggerBreakpointsButtonItem = createNavigationItem(WI.ActivateButtonNavigationItem, {
>+            identifier: "debugger-breakpoints",
>+            defaultToolTip: WI.UIString("Enable all breakpoints (%s)").format(WI.toggleBreakpointsKeyboardShortcut.displayName),
>+            alternateToolTip: WI.UIString("Disable all breakpoints (%s)").format(WI.toggleBreakpointsKeyboardShortcut.displayName),
>+            defaultImage: "Images/Breakpoints.svg",
>+            imageWidth: 15,
>+            imageHeight: 15,
>+        });
>+        this._debuggerBreakpointsButtonItem.activated = WI.debuggerManager.breakpointsEnabled;
>+        this._debuggerBreakpointsButtonItem.addEventListener(WI.ButtonNavigationItem.Event.Clicked, WI.debuggerToggleBreakpoints, this);
>+
>+        this._debuggerPauseResumeButtonItem = createNavigationItem(WI.ToggleButtonNavigationItem, {
>+            identifier: "debugger-pause-resume",
>+            defaultToolTip: WI.UIString("Pause script execution (%s or %s)").format(WI.pauseOrResumeKeyboardShortcut.displayName, WI.pauseOrResumeAlternateKeyboardShortcut.displayName),
>+            alternateToolTip: WI.UIString("Continue script execution (%s or %s)").format(WI.pauseOrResumeKeyboardShortcut.displayName, WI.pauseOrResumeAlternateKeyboardShortcut.displayName),
>+            defaultImage: "Images/Pause.svg",
>+            alternateImage: "Images/Resume.svg",
>+            imageWidth: 15,
>+            imageHeight: 15,
>+        });
>+        this._debuggerPauseResumeButtonItem.addEventListener(WI.ButtonNavigationItem.Event.Clicked, WI.debuggerPauseResumeToggle, this);
>+
>+        this._debuggerStepOverButtonItem = createNavigationItem(WI.ButtonNavigationItem, {
>+            identifier: "debugger-step-over",
>+            defaultToolTip: WI.UIString("Step over (%s or %s)").format(WI.stepOverKeyboardShortcut.displayName, WI.stepOverAlternateKeyboardShortcut.displayName),
>+            defaultImage: "Images/StepOver.svg",
>+            imageWidth: 15,
>+            imageHeight: 15,
>+        });
>+        this._debuggerStepOverButtonItem.addEventListener(WI.ButtonNavigationItem.Event.Clicked, WI.debuggerStepOver, this);
>+        this._debuggerStepOverButtonItem.enabled = false;
>+
>+        this._debuggerStepIntoButtonItem = createNavigationItem(WI.ButtonNavigationItem, {
>+            identifier: "debugger-step-into",
>+            defaultToolTip: WI.UIString("Step into (%s or %s)").format(WI.stepIntoKeyboardShortcut.displayName, WI.stepIntoAlternateKeyboardShortcut.displayName),
>+            defaultImage: "Images/StepInto.svg",
>+            imageWidth: 15,
>+            imageHeight: 15,
>+        });
>+        this._debuggerStepIntoButtonItem.addEventListener(WI.ButtonNavigationItem.Event.Clicked, WI.debuggerStepInto, this);
>+        this._debuggerStepIntoButtonItem.enabled = false;
>+
>+        this._debuggerStepOutButtonItem = createNavigationItem(WI.ButtonNavigationItem, {
>+            identifier: "debugger-step-out",
>+            defaultToolTip: WI.UIString("Step out (%s or %s)").format(WI.stepOutKeyboardShortcut.displayName, WI.stepOutAlternateKeyboardShortcut.displayName),
>+            defaultImage: "Images/StepOut.svg",
>+            imageWidth: 15,
>+            imageHeight: 15,
>+        });
>+        this._debuggerStepOutButtonItem.addEventListener(WI.ButtonNavigationItem.Event.Clicked, WI.debuggerStepOut, this);
>+        this._debuggerStepOutButtonItem.enabled = false;
>+
>+        this._timelineRecordingWarningElement = null;
>+        this._breakpointsDisabledWarningElement = null;
>+
>+        this._pauseReasonTreeOutline = null;
>+        this._pauseReasonLinkContainerElement = document.createElement("span");
>+        this._pauseReasonTextRow = new WI.DetailsSectionTextRow;
>+        this._pauseReasonGroup = new WI.DetailsSectionGroup([this._pauseReasonTextRow]);
>+        this._pauseReasonSection = new WI.DetailsSection("paused-reason", WI.UIString("Pause Reason"), [this._pauseReasonGroup], this._pauseReasonLinkContainerElement);
>+
>+        this._callStackTreeOutline = this.createContentTreeOutline({suppressFiltering: true});
>+        this._callStackTreeOutline.addEventListener(WI.TreeOutline.Event.SelectionDidChange, this._handleTreeSelectionDidChange, this);
>+
>+        let callStackRow = new WI.DetailsSectionRow;
>+        callStackRow.element.appendChild(this._callStackTreeOutline.element);
>+
>+        let callStackGroup = new WI.DetailsSectionGroup([callStackRow]);
>+        this._callStackSection = new WI.DetailsSection("call-stack", WI.UIString("Call Stack"), [callStackGroup]);
>+
>+        this._mainTargetTreeElement = null;
>+        this._activeCallFrameTreeElement = null;
>+
>+        this._breakpointsTreeOutline = this.createContentTreeOutline({ignoreCookieRestoration: true});
>+        this._breakpointsTreeOutline.addEventListener(WI.TreeOutline.Event.ElementAdded, this._handleBreakpointElementAddedOrRemoved, this);
>+        this._breakpointsTreeOutline.addEventListener(WI.TreeOutline.Event.ElementRemoved, this._handleBreakpointElementAddedOrRemoved, this);
>+        this._breakpointsTreeOutline.addEventListener(WI.TreeOutline.Event.SelectionDidChange, this._handleTreeSelectionDidChange, this);
>+        this._breakpointsTreeOutline.ondelete = (treeElement) => {
>+            console.assert(treeElement.selected);
>+            console.assert(treeElement instanceof WI.ResourceTreeElement || treeElement instanceof WI.ScriptTreeElement);
>+            if (!(treeElement instanceof WI.ResourceTreeElement) && !(treeElement instanceof WI.ScriptTreeElement))
>+                return false;
>+
>+            let wasTopResourceTreeElement = treeElement.previousSibling === this._assertionsBreakpointTreeElement || treeElement.previousSibling === this._allUncaughtExceptionsBreakpointTreeElement;
>+            let nextSibling = treeElement.nextSibling;
>+
>+            let breakpoints = this._breakpointsBeneathTreeElement(treeElement);
>+            this._removeAllBreakpoints(breakpoints);
>+
>+            if (wasTopResourceTreeElement && nextSibling) {
>+                const omitFocus = true;
>+                const selectedByUser = true;
>+                nextSibling.select(omitFocus, selectedByUser);
>+            }
>+
>+            return true;
>+        };
>+        this._breakpointsTreeOutline.populateContextMenu = (contextMenu, event, treeElement) => {
>+            // This check is necessary since the context menu is created by the TreeOutline, meaning
>+            // that any child could be the target of the context menu event.
>+            if (treeElement instanceof WI.ResourceTreeElement || treeElement instanceof WI.ScriptTreeElement) {
>+                let breakpoints = this._breakpointsBeneathTreeElement(treeElement);
>+
>+                let shouldDisable = breakpoints.some((breakpoint) => !breakpoint.disabled);
>+                contextMenu.appendItem(shouldDisable ? WI.UIString("Disable Breakpoints") : WI.UIString("Enable Breakpoints"), () => {
>+                    this._toggleAllBreakpoints(breakpoints, shouldDisable);
>+                });
>+
>+                contextMenu.appendItem(WI.UIString("Delete Breakpoints"), () => {
>+                    this._removeAllBreakpoints(breakpoints);
>+                });
>+            }
>+
>+            WI.TreeOutline.prototype.populateContextMenu(contextMenu, event, treeElement);
>+        };
>+
>+        let breakpointsRow = new WI.DetailsSectionRow;
>+        breakpointsRow.element.appendChild(this._breakpointsTreeOutline.element);
>+
>+        let breakpointNavigationBarWrapper = document.createElement("div");
>+
>+        let breakpointNavigationBar = new WI.NavigationBar;
>+        breakpointNavigationBarWrapper.appendChild(breakpointNavigationBar.element);
>+
>+        let createBreakpointButton = new WI.ButtonNavigationItem("create-breakpoint", WI.UIString("Create Breakpoint"), "Images/Plus13.svg", 13, 13);
>+        createBreakpointButton.addEventListener(WI.ButtonNavigationItem.Event.Clicked, this._handleCreateBreakpointClicked, this);
>+        breakpointNavigationBar.addNavigationItem(createBreakpointButton);
>+
>+        let breakpointsGroup = new WI.DetailsSectionGroup([breakpointsRow]);
>+        let breakpointsSection = new WI.DetailsSection("breakpoints", WI.UIString("Breakpoints"), [breakpointsGroup], breakpointNavigationBarWrapper);
>+        this.contentView.element.insertBefore(breakpointsSection.element, this.contentView.element.firstChild);
>+
>+        this._resourcesTreeOutline = this.contentTreeOutline;
>+        this._resourcesTreeOutline.addEventListener(WI.TreeOutline.Event.SelectionDidChange, this._handleTreeSelectionDidChange, this);
>+        this._resourcesTreeOutline.includeSourceMapResourceChildren = true;
>+
>+        this._resourcesNavigationBar = new WI.NavigationBar;
>+        this.contentView.addSubview(this._resourcesNavigationBar);
>+        this.contentView.element.insertBefore(this._resourcesNavigationBar.element, this._resourcesTreeOutline.element);
>+
>+        this._workerTargetTreeElementMap = new Map;
>+        this._extensionScriptsFolderTreeElement = null;
>+        this._extraScriptsFolderTreeElement = null;
>+        this._anonymousScriptsFolderTreeElement = null;
>+
>+        const resourceTypeScopeItemPrefix = "sources-resource-type-";
>+        let resourceTypeScopeBarItems = [];
>+        resourceTypeScopeBarItems.push(new WI.ScopeBarItem(resourceTypeScopeItemPrefix + "all", WI.UIString("All Resources"), {exclusive: true}));
>+        for (let value of Object.values(WI.Resource.Type)) {
>+            let scopeBarItem = new WI.ScopeBarItem(resourceTypeScopeItemPrefix + value, WI.Resource.displayNameForType(value, true));
>+            scopeBarItem[WI.SourcesNavigationSidebarPanel.ResourceTypeSymbol] = value;
>+            resourceTypeScopeBarItems.push(scopeBarItem);
>+        }
>+
>+        const shouldGroupNonExclusiveItems = true;
>+        this._resourceTypeScopeBar = new WI.ScopeBar("sources-resource-type-scope-bar", resourceTypeScopeBarItems, resourceTypeScopeBarItems[0], shouldGroupNonExclusiveItems);
>+        this._resourceTypeScopeBar.addEventListener(WI.ScopeBar.Event.SelectionChanged, this._handleResourceTypeScopeBarSelectionChanged, this);
>+        this._resourcesNavigationBar.addNavigationItem(this._resourceTypeScopeBar);
>+
>+        let onlyShowResourcesWithIssuesFilterFunction = (treeElement) => {
>+            if (treeElement.treeOutline !== this._resourcesTreeOutline)
>+                return true;
>+
>+            if (treeElement instanceof WI.IssueTreeElement)
>+                return true;
>+
>+            if (treeElement.hasChildren) {
>+                for (let child of treeElement.children) {
>+                    if (child instanceof WI.IssueTreeElement)
>+                        return true;
>+                }
>+            }
>+            return false;
>+        };
>+        const activatedByDefault = false;
>+        this.filterBar.addFilterBarButton("sources-only-show-resources-with-issues", onlyShowResourcesWithIssuesFilterFunction, activatedByDefault, WI.UIString("Only show resources with issues"), WI.UIString("Show all resources"), "Images/Errors.svg", 15, 15);
>+
>+        WI.Frame.addEventListener(WI.Frame.Event.MainResourceDidChange, this._handleFrameMainResourceDidChange, this);
>+        WI.Frame.addEventListener(WI.Frame.Event.ResourceWasAdded, this._handleResourceAdded, this);
>+        WI.Target.addEventListener(WI.Target.Event.ResourceAdded, this._handleResourceAdded, this);
>+
>+        WI.networkManager.addEventListener(WI.NetworkManager.Event.MainFrameDidChange, this._handleMainFrameDidChange, this);
>+
>+        WI.debuggerManager.addEventListener(WI.DebuggerManager.Event.BreakpointAdded, this._handleDebuggerBreakpointAdded, this);
>+        WI.domDebuggerManager.addEventListener(WI.DOMDebuggerManager.Event.DOMBreakpointAdded, this._handleDebuggerBreakpointAdded, this);
>+        WI.domDebuggerManager.addEventListener(WI.DOMDebuggerManager.Event.EventBreakpointAdded, this._handleDebuggerBreakpointAdded, this);
>+        WI.domDebuggerManager.addEventListener(WI.DOMDebuggerManager.Event.XHRBreakpointAdded, this._handleDebuggerBreakpointAdded, this);
>+
>+        WI.debuggerManager.addEventListener(WI.DebuggerManager.Event.BreakpointRemoved, this._handleDebuggerBreakpointRemoved, this);
>+        WI.domDebuggerManager.addEventListener(WI.DOMDebuggerManager.Event.DOMBreakpointRemoved, this._handleDebuggerBreakpointRemoved, this);
>+        WI.domDebuggerManager.addEventListener(WI.DOMDebuggerManager.Event.EventBreakpointRemoved, this._handleDebuggerBreakpointRemoved, this);
>+        WI.domDebuggerManager.addEventListener(WI.DOMDebuggerManager.Event.XHRBreakpointRemoved, this._handleDebuggerBreakpointRemoved, this);
>+
>+        WI.debuggerManager.addEventListener(WI.DebuggerManager.Event.BreakpointsEnabledDidChange, this._handleDebuggerBreakpointsEnabledDidChange, this);
>+        WI.debuggerManager.addEventListener(WI.DebuggerManager.Event.ScriptAdded, this._handleDebuggerScriptAdded, this);
>+        WI.debuggerManager.addEventListener(WI.DebuggerManager.Event.ScriptRemoved, this._handleDebuggerScriptRemoved, this);
>+        WI.debuggerManager.addEventListener(WI.DebuggerManager.Event.ScriptsCleared, this._handleDebuggerScriptsCleared, this);
>+        WI.debuggerManager.addEventListener(WI.DebuggerManager.Event.Paused, this._handleDebuggerPaused, this);
>+        WI.debuggerManager.addEventListener(WI.DebuggerManager.Event.Resumed, this._handleDebuggerResumed, this);
>+        WI.debuggerManager.addEventListener(WI.DebuggerManager.Event.CallFramesDidChange, this._handleDebuggerCallFramesDidChange, this);
>+        WI.debuggerManager.addEventListener(WI.DebuggerManager.Event.ActiveCallFrameDidChange, this._handleDebuggerActiveCallFrameDidChange, this);
>+        WI.debuggerManager.addEventListener(WI.DebuggerManager.Event.WaitingToPause, this._handleDebuggerWaitingToPause, this);
>+
>+        WI.Breakpoint.addEventListener(WI.Breakpoint.Event.DisplayLocationDidChange, this._handleDebuggerObjectDisplayLocationDidChange, this);
>+        WI.IssueMessage.addEventListener(WI.IssueMessage.Event.DisplayLocationDidChange, this._handleDebuggerObjectDisplayLocationDidChange, this);
>+
>+        WI.DOMBreakpoint.addEventListener(WI.DOMBreakpoint.Event.ResolvedStateDidChange, this._handleDOMBreakpointResolvedStateDidChange, this);
>+
>+        WI.consoleManager.addEventListener(WI.ConsoleManager.Event.IssueAdded, this._handleConsoleIssueAdded, this);
>+        WI.consoleManager.addEventListener(WI.ConsoleManager.Event.Cleared, this._handleConsoleCleared, this);
>+
>+        WI.timelineManager.addEventListener(WI.TimelineManager.Event.CapturingWillStart, this._handleTimelineCapturingWillStart, this);
>+        WI.timelineManager.addEventListener(WI.TimelineManager.Event.CapturingStopped, this._handleTimelineCapturingStopped, this);
>+
>+        WI.cssManager.addEventListener(WI.CSSManager.Event.StyleSheetAdded, this._handleCSSStyleSheetAdded, this);
>+
>+        WI.targetManager.addEventListener(WI.TargetManager.Event.TargetAdded, this._handleTargetAdded, this);
>+        WI.targetManager.addEventListener(WI.TargetManager.Event.TargetRemoved, this._handleTargetRemoved, this);
>+
>+        WI.notifications.addEventListener(WI.Notification.ExtraDomainsActivated, this._handleExtraDomainsActivated, this);
>+
>+        if (WI.SourcesNavigationSidebarPanel.shouldPlaceResourcesAtTopLevel()) {
>+            this._resourcesTreeOutline.disclosureButtons = false;
>+            WI.SourceCode.addEventListener(WI.SourceCode.Event.SourceMapAdded, () => {
>+                this._resourcesTreeOutline.disclosureButtons = true;
>+            }, this);
>+        }
>+
>+        WI.debuggerManager.addBreakpoint(WI.debuggerManager.allExceptionsBreakpoint);
>+        WI.debuggerManager.addBreakpoint(WI.debuggerManager.uncaughtExceptionsBreakpoint);
>+
>+        // COMPATIBILITY (iOS 10): DebuggerAgent.setPauseOnAssertions did not exist yet.
>+        if (InspectorBackend.domains.Debugger.setPauseOnAssertions && WI.settings.showAssertionFailuresBreakpoint.value)
>+            WI.debuggerManager.addBreakpoint(WI.debuggerManager.assertionFailuresBreakpoint);
>+
>+        if (WI.networkManager.mainFrame)
>+            this._updateMainFrameTreeElement(WI.networkManager.mainFrame);
>+
>+        for (let target of WI.targets)
>+            this._addTarget(target);
>+
>+        this._updateCallStackTreeOutline();
>+
>+        if (WI.networkManager.mainFrame)
>+            this._addResourcesRecursivelyForFrame(WI.networkManager.mainFrame);
>+
>+        for (let script of WI.debuggerManager.knownNonResourceScripts) {
>+            this._addScript(script);
>+
>+            if (script.sourceMaps.length && WI.SourcesNavigationSidebarPanel.shouldPlaceResourcesAtTopLevel())
>+                this._resourcesTreeOutline.disclosureButtons = true;
>+        }
>+
>+        if (WI.domDebuggerManager.supported) {
>+            if (WI.settings.showAllRequestsBreakpoint.value)
>+                WI.domDebuggerManager.addXHRBreakpoint(WI.domDebuggerManager.allRequestsBreakpoint);
>+
>+            for (let eventBreakpoint of WI.domDebuggerManager.eventBreakpoints)
>+                this._addBreakpoint(eventBreakpoint);
>+
>+            for (let domBreakpoint of WI.domDebuggerManager.domBreakpoints)
>+                this._addBreakpoint(domBreakpoint);
>+
>+            for (let eventListenerBreakpoint of WI.domManager.eventListenerBreakpoints)
>+                this._addBreakpoint(eventListenerBreakpoint);
>+
>+            for (let xhrBreakpoints of WI.domDebuggerManager.xhrBreakpoints)
>+                this._addBreakpoint(xhrBreakpoints);
>+        }
>+
>+        if (WI.debuggerManager.paused)
>+            this._handleDebuggerPaused();
>+
>+        if (WI.timelineManager.isCapturing() && WI.debuggerManager.breakpointsDisabledTemporarily)
>+            this._handleTimelineCapturingWillStart();
>+
>+        this._updateBreakpointsDisabledBanner();
>+    }
>+
>+    // Static
>+
>+    static shouldPlaceResourcesAtTopLevel()
>+    {
>+        return (WI.sharedApp.debuggableType === WI.DebuggableType.JavaScript && !WI.sharedApp.hasExtraDomains)
>+            || WI.sharedApp.debuggableType === WI.DebuggableType.ServiceWorker;
>+    }
>+
>+    // Public
>+
>+    get minimumWidth()
>+    {
>+        return Math.max(this._debuggerNavigationBar.minimumWidth, this._resourcesNavigationBar.minimumWidth);
>+    }
>+
>+    closed()
>+    {
>+        WI.Frame.removeEventListener(null, null, this);
>+        WI.Target.removeEventListener(null, null, this);
>+        WI.networkManager.removeEventListener(null, null, this);
>+        WI.debuggerManager.removeEventListener(null, null, this);
>+        WI.domDebuggerManager.removeEventListener(null, null, this);
>+        WI.Breakpoint.removeEventListener(null, null, this);
>+        WI.IssueMessage.removeEventListener(null, null, this);
>+        WI.DOMBreakpoint.removeEventListener(null, null, this);
>+        WI.consoleManager.removeEventListener(null, null, this);
>+        WI.timelineManager.removeEventListener(null, null, this);
>+        WI.cssManager.removeEventListener(null, null, this);
>+        WI.targetManager.removeEventListener(null, null, this);
>+        WI.notifications.removeEventListener(null, null, this);
>+        WI.SourceCode.removeEventListener(null, null, this);
>+
>+        super.closed();
>+    }
>+
>+    showDefaultContentView()
>+    {
>+        if (WI.networkManager.mainFrame) {
>+            this.contentBrowser.showContentViewForRepresentedObject(WI.networkManager.mainFrame);
>+            return;
>+        }
>+
>+        let firstTreeElement = this._resourcesTreeOutline.children[0];
>+        if (firstTreeElement)
>+            this.showDefaultContentViewForTreeElement(firstTreeElement);
>+    }
>+
>+    treeElementForRepresentedObject(representedObject)
>+    {
>+        // A custom implementation is needed for this since the frames are populated lazily.
>+
>+        if (!this._mainFrameTreeElement && (representedObject instanceof WI.Resource || representedObject instanceof WI.Frame || representedObject instanceof WI.Collection)) {
>+            // All resources are under the main frame, so we need to return early if we don't have the main frame yet.
>+            return null;
>+        }
>+
>+        // The Frame is used as the representedObject instead of the main resource in our tree.
>+        if (representedObject instanceof WI.Resource && representedObject.parentFrame && representedObject.parentFrame.mainResource === representedObject)
>+            representedObject = representedObject.parentFrame;
>+
>+        function isAncestor(ancestor, resourceOrFrame) {
>+            // SourceMapResources are descendants of another SourceCode object.
>+            if (resourceOrFrame instanceof WI.SourceMapResource) {
>+                if (resourceOrFrame.sourceMap.originalSourceCode === ancestor)
>+                    return true;
>+
>+                // Not a direct ancestor, so check the ancestors of the parent SourceCode object.
>+                resourceOrFrame = resourceOrFrame.sourceMap.originalSourceCode;
>+            }
>+
>+            let currentFrame = resourceOrFrame.parentFrame;
>+            while (currentFrame) {
>+                if (currentFrame === ancestor)
>+                    return true;
>+                currentFrame = currentFrame.parentFrame;
>+            }
>+            return false;
>+        }
>+
>+        function getParent(resourceOrFrame) {
>+            // SourceMapResources are descendants of another SourceCode object.
>+            if (resourceOrFrame instanceof WI.SourceMapResource)
>+                return resourceOrFrame.sourceMap.originalSourceCode;
>+            return resourceOrFrame.parentFrame;
>+        }
>+
>+        let treeElement = this._resourcesTreeOutline.findTreeElement(representedObject, isAncestor, getParent);
>+        if (treeElement)
>+            return treeElement;
>+
>+        // Only special case Script objects.
>+        if (!(representedObject instanceof WI.Script)) {
>+            console.error("Didn't find a TreeElement for representedObject", representedObject);
>+            return null;
>+        }
>+
>+        // If the Script has a URL we should have found it earlier.
>+        if (representedObject.url) {
>+            console.error("Didn't find a ScriptTreeElement for a Script with a URL.");
>+            return null;
>+        }
>+
>+        // Since the Script does not have a URL we consider it an 'anonymous' script. These scripts happen from calls to
>+        // window.eval() or browser features like Auto Fill and Reader. They are not normally added to the sidebar, but since
>+        // we have a ScriptContentView asking for the tree element we will make a ScriptTreeElement on demand and add it.
>+
>+        if (!this._anonymousScriptsFolderTreeElement)
>+            this._anonymousScriptsFolderTreeElement = new WI.FolderTreeElement(WI.UIString("Anonymous Scripts"), new WI.ScriptCollection);
>+
>+        if (!this._anonymousScriptsFolderTreeElement.parent) {
>+            let index = insertionIndexForObjectInListSortedByFunction(this._anonymousScriptsFolderTreeElement, this._resourcesTreeOutline.children, this._compareTreeElements);
>+            this._resourcesTreeOutline.insertChild(this._anonymousScriptsFolderTreeElement, index);
>+        }
>+
>+        this._anonymousScriptsFolderTreeElement.representedObject.add(representedObject);
>+
>+        let scriptTreeElement = new WI.ScriptTreeElement(representedObject);
>+        this._anonymousScriptsFolderTreeElement.appendChild(scriptTreeElement);
>+        return scriptTreeElement;
>+    }
>+
>+    // Protected
>+
>+    resetFilter()
>+    {
>+        this._resourceTypeScopeBar.resetToDefault();
>+
>+        super.resetFilter();
>+    }
>+
>+    hasCustomFilters()
>+    {
>+        console.assert(this._resourceTypeScopeBar.selectedItems.length === 1);
>+        let selectedScopeBarItem = this._resourceTypeScopeBar.selectedItems[0];
>+        return selectedScopeBarItem && !selectedScopeBarItem.exclusive;
>+    }
>+
>+    matchTreeElementAgainstCustomFilters(treeElement, flags)
>+    {
>+        // Only apply the resource type filter to the resources list.
>+        if (treeElement.treeOutline !== this._resourcesTreeOutline)
>+            return true;
>+
>+        console.assert(this._resourceTypeScopeBar.selectedItems.length === 1);
>+        let selectedScopeBarItem = this._resourceTypeScopeBar.selectedItems[0];
>+
>+        // Show everything if there is no selection or "All Resources" is selected (the exclusive item).
>+        if (!selectedScopeBarItem || selectedScopeBarItem.exclusive)
>+            return true;
>+
>+        // Folders are hidden on the first pass, but visible childen under the folder will force the folder visible again.
>+        if (treeElement instanceof WI.FolderTreeElement)
>+            return false;
>+
>+        function match()
>+        {
>+            if (treeElement instanceof WI.FrameTreeElement)
>+                return selectedScopeBarItem[WI.SourcesNavigationSidebarPanel.ResourceTypeSymbol] === WI.Resource.Type.Document;
>+
>+            if (treeElement instanceof WI.ScriptTreeElement)
>+                return selectedScopeBarItem[WI.SourcesNavigationSidebarPanel.ResourceTypeSymbol] === WI.Resource.Type.Script;
>+
>+            if (treeElement instanceof WI.CSSStyleSheetTreeElement)
>+                return selectedScopeBarItem[WI.SourcesNavigationSidebarPanel.ResourceTypeSymbol] === WI.Resource.Type.Stylesheet;
>+
>+            // FIXME: handle breakloints/issues
>+
>+            console.assert(treeElement instanceof WI.ResourceTreeElement, "Unknown treeElement", treeElement);
>+            if (!(treeElement instanceof WI.ResourceTreeElement))
>+                return false;
>+
>+            return treeElement.resource.type === selectedScopeBarItem[WI.SourcesNavigationSidebarPanel.ResourceTypeSymbol];
>+        }
>+
>+        let matched = match();
>+        if (matched)
>+            flags.expandTreeElement = true;
>+        return matched;
>+    }
>+
>+    // Popover delegate
>+
>+    willDismissPopover(popover)
>+    {
>+        let breakpoint = popover.breakpoint;
>+        if (!breakpoint)
>+            return;
>+
>+        if (breakpoint instanceof WI.EventBreakpoint)
>+            WI.domDebuggerManager.addEventBreakpoint(breakpoint);
>+        else if (breakpoint instanceof WI.XHRBreakpoint)
>+            WI.domDebuggerManager.addXHRBreakpoint(breakpoint);
>+    }
>+
>+    // Private
>+
>+    _compareTreeElements(a, b)
>+    {
>+        // Always sort the main frame element first.
>+        if (a instanceof WI.FrameTreeElement)
>+            return -1;
>+        if (b instanceof WI.FrameTreeElement)
>+            return 1;
>+
>+        console.assert(a.mainTitle);
>+        console.assert(b.mainTitle);
>+
>+        return (a.mainTitle || "").extendedLocaleCompare(b.mainTitle || "");
>+    }
>+
>+    _updateMainFrameTreeElement(mainFrame)
>+    {
>+        if (this.didInitialLayout)
>+            this.contentBrowser.contentViewContainer.closeAllContentViews();
>+
>+        if (this._mainFrameTreeElement) {
>+            this._resourcesTreeOutline.removeChild(this._mainFrameTreeElement);
>+            this._mainFrameTreeElement = null;
>+        }
>+
>+        if (!mainFrame)
>+            return;
>+
>+        this._mainFrameTreeElement = new WI.FrameTreeElement(mainFrame);
>+        this._resourcesTreeOutline.insertChild(this._mainFrameTreeElement, 0);
>+
>+        // Cookie restoration will attempt to re-select the resource we were showing.
>+        // Give it time to do that before selecting the main frame resource.
>+        setTimeout(() => {
>+            if (this._resourcesTreeOutline.selectedTreeElement)
>+                return;
>+
>+            let currentContentView = this.contentBrowser.currentContentView;
>+            let treeElement = currentContentView ? this.treeElementForRepresentedObject(currentContentView.representedObject) : null;
>+            if (!treeElement)
>+                treeElement = this._mainFrameTreeElement;
>+            this.showDefaultContentViewForTreeElement(treeElement);
>+        });
>+    }
>+
>+    _addTarget(target)
>+    {
>+        let treeElement = new WI.ThreadTreeElement(target);
>+        this._callStackTreeOutline.appendChild(treeElement);
>+
>+        // FIXME: When WI.mainTarget changes?
>+        if (target === WI.mainTarget)
>+            this._mainTargetTreeElement = treeElement;
>+
>+        this._updateCallStackTreeOutline();
>+    }
>+
>+    _findCallStackTargetTreeElement(target)
>+    {
>+        for (let child of this._callStackTreeOutline.children) {
>+            if (child.target === target)
>+                return child;
>+        }
>+        return null;
>+    }
>+
>+    _updateCallStackTreeOutline()
>+    {
>+        let singleThreadShowing = WI.targets.length <= 1;
>+        this._callStackTreeOutline.element.classList.toggle("single-thread", singleThreadShowing);
>+        if (this._mainTargetTreeElement)
>+            this._mainTargetTreeElement.selectable = !singleThreadShowing;
>+    }
>+
>+    _addResource(resource)
>+    {
>+        if (resource.type !== WI.Resource.Type.Document && resource.type !== WI.Resource.Type.Script)
>+            return;
>+
>+        this._addBreakpointsForSourceCode(resource);
>+        this._addIssuesForSourceCode(resource);
>+    }
>+
>+    _addResourcesRecursivelyForFrame(frame)
>+    {
>+        this._addResource(frame.mainResource);
>+
>+        for (let resource of frame.resourceCollection)
>+            this._addResource(resource);
>+
>+        for (let childFrame of frame.childFrameCollection)
>+            this._addResourcesRecursivelyForFrame(childFrame);
>+    }
>+
>+    _addScript(script)
>+    {
>+        // We don't add scripts without URLs here. Those scripts can quickly clutter the interface and
>+        // are usually more transient. They will get added if/when they need to be shown in a content view.
>+        if (!script.url && !script.sourceURL)
>+            return;
>+
>+        // Target main resource.
>+        if (WI.sharedApp.debuggableType !== WI.DebuggableType.JavaScript) {
>+            if (script.target !== WI.pageTarget) {
>+                if (script.isMainResource()) {
>+                    this._addWorkerTargetWithMainResource(script.target);
>+                    this._addBreakpointsForSourceCode(script);
>+                    this._addIssuesForSourceCode(script);
>+                }
>+                this._resourcesTreeOutline.disclosureButtons = true;
>+                return;
>+            }
>+        }
>+
>+        // If the script URL matches a resource we can assume it is part of that resource and does not need added.
>+        if (script.resource || script.dynamicallyAddedScriptElement)
>+            return;
>+
>+        let insertIntoTopLevel = false;
>+        let parentFolderTreeElement = null;
>+
>+        if (script.injected) {
>+            if (!this._extensionScriptsFolderTreeElement) {
>+                let collection = new WI.ScriptCollection;
>+                this._extensionScriptsFolderTreeElement = new WI.FolderTreeElement(WI.UIString("Extension Scripts"), collection);
>+            }
>+
>+            parentFolderTreeElement = this._extensionScriptsFolderTreeElement;
>+        } else {
>+            if (WI.SourcesNavigationSidebarPanel.shouldPlaceResourcesAtTopLevel())
>+                insertIntoTopLevel = true;
>+            else {
>+                if (!this._extraScriptsFolderTreeElement) {
>+                    let collection = new WI.ScriptCollection;
>+                    this._extraScriptsFolderTreeElement = new WI.FolderTreeElement(WI.UIString("Extra Scripts"), collection);
>+                }
>+
>+                parentFolderTreeElement = this._extraScriptsFolderTreeElement;
>+            }
>+        }
>+
>+        if (parentFolderTreeElement)
>+            parentFolderTreeElement.representedObject.add(script);
>+
>+        let scriptTreeElement = new WI.ScriptTreeElement(script);
>+
>+        if (insertIntoTopLevel) {
>+            let index = insertionIndexForObjectInListSortedByFunction(scriptTreeElement, this._resourcesTreeOutline.children, this._compareTreeElements);
>+            this._resourcesTreeOutline.insertChild(scriptTreeElement, index);
>+        } else {
>+            if (!parentFolderTreeElement.parent) {
>+                let index = insertionIndexForObjectInListSortedByFunction(parentFolderTreeElement, this._resourcesTreeOutline.children, this._compareTreeElements);
>+                this._resourcesTreeOutline.insertChild(parentFolderTreeElement, index);
>+            }
>+
>+            parentFolderTreeElement.appendChild(scriptTreeElement);
>+        }
>+
>+        this._addBreakpointsForSourceCode(script);
>+        this._addIssuesForSourceCode(script);
>+    }
>+
>+    _addWorkerTargetWithMainResource(target)
>+    {
>+        console.assert(target.type === WI.Target.Type.Worker || target.type === WI.Target.Type.ServiceWorker);
>+
>+        let targetTreeElement = new WI.WorkerTreeElement(target);
>+        this._workerTargetTreeElementMap.set(target, targetTreeElement);
>+
>+        let index = insertionIndexForObjectInListSortedByFunction(targetTreeElement, this._resourcesTreeOutline.children, this._compareTreeElements);
>+        this._resourcesTreeOutline.insertChild(targetTreeElement, index);
>+    }
>+
>+    _addDebuggerTreeElementForSourceCode(sourceCode)
>+    {
>+        let treeElement = this._breakpointsTreeOutline.findTreeElement(sourceCode);
>+        if (!treeElement) {
>+            if (sourceCode instanceof WI.SourceMapResource)
>+                treeElement = new WI.SourceMapResourceTreeElement(sourceCode);
>+            else if (sourceCode instanceof WI.Resource)
>+                treeElement = new WI.ResourceTreeElement(sourceCode);
>+            else if (sourceCode instanceof WI.Script)
>+                treeElement = new WI.ScriptTreeElement(sourceCode);
>+        }
>+
>+        if (!treeElement) {
>+            console.error("Unknown sourceCode instance", sourceCode);
>+            return null;
>+        }
>+
>+        if (!treeElement.parent) {
>+            treeElement.hasChildren = false;
>+            treeElement.expand();
>+
>+            this._insertDebuggerTreeElement(treeElement, this._breakpointsTreeOutline);
>+        }
>+
>+        return treeElement;
>+    }
>+
>+    _insertDebuggerTreeElement(treeElement, parentTreeElement)
>+    {
>+        let comparator = (a, b) => {
>+            const rankFunctions = [
>+                (treeElement) => treeElement.representedObject === WI.debuggerManager.allExceptionsBreakpoint,
>+                (treeElement) => treeElement.representedObject === WI.debuggerManager.uncaughtExceptionsBreakpoint,
>+                (treeElement) => treeElement.representedObject === WI.debuggerManager.assertionFailuresBreakpoint,
>+                (treeElement) => treeElement.representedObject === WI.domDebuggerManager.allRequestsBreakpoint,
>+                (treeElement) => treeElement instanceof WI.BreakpointTreeElement || treeElement instanceof WI.ResourceTreeElement || treeElement instanceof WI.ScriptTreeElement,
>+                (treeElement) => treeElement instanceof WI.EventBreakpointTreeElement,
>+                (treeElement) => treeElement instanceof WI.DOMNodeTreeElement,
>+                (treeElement) => treeElement instanceof WI.DOMBreakpointTreeElement,
>+                (treeElement) => treeElement instanceof WI.XHRBreakpointTreeElement,
>+            ];
>+
>+            let aRank = rankFunctions.findIndex((rankFunction) => rankFunction(a));
>+            let bRank = rankFunctions.findIndex((rankFunction) => rankFunction(b));
>+            if (aRank >= 0 && bRank >= 0) {
>+                if (aRank < bRank)
>+                    return -1;
>+                if (bRank < aRank)
>+                    return 1;
>+            }
>+
>+            if (a instanceof WI.BreakpointTreeElement && b instanceof WI.BreakpointTreeElement)
>+                return this._compareBreakpointTreeElements(a, b);
>+
>+            return a.mainTitle.extendedLocaleCompare(b.mainTitle) || a.subtitle.extendedLocaleCompare(b.subtitle);
>+        };
>+
>+        parentTreeElement.insertChild(treeElement, insertionIndexForObjectInListSortedByFunction(treeElement, parentTreeElement.children, comparator));
>+    }
>+
>+    _compareBreakpointTreeElements(a, b)
>+    {
>+        if (!a.representedObject || !b.representedObject)
>+            return 0;
>+
>+        let aLocation = a.representedObject.sourceCodeLocation;
>+        let bLocation = b.representedObject.sourceCodeLocation;
>+        if (!aLocation || !bLocation)
>+            return 0;
>+
>+        return aLocation.displayLineNumber - bLocation.displayLineNumber || aLocation.displayColumnNumber - bLocation.displayColumnNumber;
>+    }
>+
>+    _addBreakpoint(breakpoint)
>+    {
>+        let constructor = WI.BreakpointTreeElement;
>+        let options = {};
>+        let parentTreeElement = this._breakpointsTreeOutline;
>+
>+        let getDOMNodeTreeElement = (domNode) => {
>+            console.assert(domNode, "Missing DOMNode for identifier", breakpoint.domNodeIdentifier);
>+            if (!domNode)
>+                return null;
>+
>+            let domNodeTreeElement = this._breakpointsTreeOutline.findTreeElement(domNode);
>+            if (!domNodeTreeElement) {
>+                domNodeTreeElement = new WI.DOMNodeTreeElement(domNode);
>+                this._insertDebuggerTreeElement(domNodeTreeElement, parentTreeElement);
>+            }
>+            return domNodeTreeElement;
>+        };
>+
>+        if (breakpoint === WI.debuggerManager.allExceptionsBreakpoint) {
>+            options.className = WI.SourcesNavigationSidebarPanel.ExceptionIconStyleClassName;
>+            options.title = WI.UIString("All Exceptions");
>+        } else if (breakpoint === WI.debuggerManager.uncaughtExceptionsBreakpoint) {
>+            options.className = WI.SourcesNavigationSidebarPanel.ExceptionIconStyleClassName;
>+            options.title = WI.UIString("Uncaught Exceptions");
>+        } else if (breakpoint === WI.debuggerManager.assertionFailuresBreakpoint) {
>+            options.className = WI.SourcesNavigationSidebarPanel.AssertionIconStyleClassName;
>+            options.title = WI.UIString("Assertion Failures");
>+        } else if (breakpoint instanceof WI.DOMBreakpoint) {
>+            if (!breakpoint.domNodeIdentifier)
>+                return null;
>+
>+            constructor = WI.DOMBreakpointTreeElement;
>+
>+            let domNode = WI.domManager.nodeForId(breakpoint.domNodeIdentifier);
>+            parentTreeElement = getDOMNodeTreeElement(domNode);
>+        } else if (breakpoint instanceof WI.EventBreakpoint) {
>+            constructor = WI.EventBreakpointTreeElement;
>+
>+            if (breakpoint.eventListener)
>+                parentTreeElement = getDOMNodeTreeElement(breakpoint.eventListener.node);
>+        } else if (breakpoint instanceof WI.XHRBreakpoint) {
>+            constructor = WI.XHRBreakpointTreeElement;
>+
>+            if (breakpoint === WI.domDebuggerManager.allRequestsBreakpoint) {
>+                options.className = WI.SourcesNavigationSidebarPanel.AssertionIconStyleClassName;
>+                options.title = WI.UIString("All Requests");
>+            }
>+        } else {
>+            let sourceCode = breakpoint.sourceCodeLocation && breakpoint.sourceCodeLocation.displaySourceCode;
>+            if (!sourceCode)
>+                return null;
>+
>+            if (this._breakpointsTreeOutline.findTreeElement(breakpoint))
>+                return null;
>+
>+            parentTreeElement = this._addDebuggerTreeElementForSourceCode(sourceCode);
>+
>+            // Mark disabled breakpoints as resolved if there is source code loaded with that URL.
>+            // This gives the illusion the breakpoint was resolved, but since we don't send disabled
>+            // breakpoints to the backend we don't know for sure. If the user enables the breakpoint
>+            // it will be resolved properly.
>+            if (breakpoint.disabled)
>+                breakpoint.resolved = true;
>+        }
>+
>+        let breakpointTreeElement = new constructor(breakpoint, options);
>+        this._insertDebuggerTreeElement(breakpointTreeElement, parentTreeElement);
>+        if (parentTreeElement.children.length === 1)
>+            parentTreeElement.expand();
>+        return breakpointTreeElement;
>+    }
>+
>+    _removeBreakpoint(breakpoint)
>+    {
>+        if (this._pauseReasonTreeOutline) {
>+            let pauseReasonBreakpointTreeElement = this._pauseReasonTreeOutline.findTreeElement(breakpoint);
>+            if (pauseReasonBreakpointTreeElement)
>+                pauseReasonBreakpointTreeElement.status = null;
>+        }
>+
>+        let breakpointTreeElement = this._breakpointsTreeOutline.findTreeElement(breakpoint);
>+        if (!breakpointTreeElement)
>+            return;
>+
>+        this._removeDebuggerTreeElement(breakpointTreeElement);
>+    }
>+
>+    _removeAllBreakpoints(breakpoints)
>+    {
>+        for (let breakpoint of breakpoints) {
>+            if (WI.debuggerManager.isBreakpointRemovable(breakpoint))
>+                WI.debuggerManager.removeBreakpoint(breakpoint);
>+        }
>+    }
>+
>+    _toggleAllBreakpoints(breakpoints, disabled)
>+    {
>+        for (let breakpoint of breakpoints)
>+            breakpoint.disabled = disabled;
>+    }
>+
>+    _breakpointsBeneathTreeElement(treeElement)
>+    {
>+        console.assert(treeElement instanceof WI.ResourceTreeElement || treeElement instanceof WI.ScriptTreeElement);
>+        if (!(treeElement instanceof WI.ResourceTreeElement) && !(treeElement instanceof WI.ScriptTreeElement))
>+            return [];
>+
>+        let breakpoints = [];
>+        for (let child of treeElement.children) {
>+            console.assert(child instanceof WI.BreakpointTreeElement);
>+            let breakpoint = child.breakpoint;
>+            console.assert(breakpoint);
>+            if (breakpoint)
>+                breakpoints.push(breakpoint);
>+        }
>+        return breakpoints;
>+    }
>+
>+    _addIssue(issueMessage)
>+    {
>+        let issueTreeElement = this._resourcesTreeOutline.findTreeElement(issueMessage);
>+        if (!issueTreeElement) {
>+            let parentTreeElement = this._resourcesTreeOutline.findTreeElement(issueMessage.sourceCodeLocation.sourceCode);
>+            if (!parentTreeElement)
>+                return null;
>+
>+            issueTreeElement = new WI.IssueTreeElement(issueMessage);
>+
>+            parentTreeElement.insertChild(issueTreeElement, insertionIndexForObjectInListSortedByFunction(issueTreeElement, parentTreeElement.children, this._compareBreakpointTreeElements));
>+            if (parentTreeElement.children.length === 1)
>+                parentTreeElement.expand();
>+        }
>+        return issueTreeElement;
>+    }
>+
>+    _removeDebuggerTreeElement(debuggerTreeElement)
>+    {
>+        // If this is a BreakpointTreeElement being deleted because of a cause
>+        // outside of the TreeOutline then deselect if it is selected to avoid
>+        // TreeOutline selection changes causing unexpected ContentView changes.
>+        if (!debuggerTreeElement.__deletedViaDeleteKeyboardShortcut)
>+            debuggerTreeElement.deselect();
>+
>+        let parentTreeElement = debuggerTreeElement.parent;
>+        parentTreeElement.removeChild(debuggerTreeElement);
>+
>+        if (parentTreeElement.children.length || parentTreeElement === this._breakpointsTreeOutline)
>+            return;
>+
>+        parentTreeElement.treeOutline.removeChild(parentTreeElement);
>+    }
>+
>+    _addBreakpointsForSourceCode(sourceCode)
>+    {
>+        for (let breakpoint of WI.debuggerManager.breakpointsForSourceCode(sourceCode))
>+            this._addBreakpoint(breakpoint, sourceCode);
>+    }
>+
>+    _addIssuesForSourceCode(sourceCode)
>+    {
>+        for (let issue of WI.consoleManager.issuesForSourceCode(sourceCode))
>+            this._addIssue(issue);
>+    }
>+
>+    _updateBreakpointsDisabledBanner()
>+    {
>+        if (!WI.debuggerManager.breakpointsEnabled && !this._timelineRecordingWarningElement) {
>+            if (!this._breakpointsDisabledWarningElement) {
>+                let enableBreakpointsButton = document.createElement("button");
>+                enableBreakpointsButton.textContent = WI.UIString("Enable Breakpoints");
>+                enableBreakpointsButton.addEventListener("click", () => {
>+                    WI.debuggerToggleBreakpoints();
>+                });
>+
>+                this._breakpointsDisabledWarningElement = document.createElement("div");
>+                this._breakpointsDisabledWarningElement.classList.add("warning-banner");
>+                this._breakpointsDisabledWarningElement.append(WI.UIString("Breakpoints disabled"), document.createElement("br"), enableBreakpointsButton);
>+            }
>+
>+            this.contentView.element.insertBefore(this._breakpointsDisabledWarningElement, this.contentView.element.firstChild);
>+        } else if (this._breakpointsDisabledWarningElement) {
>+            this._breakpointsDisabledWarningElement.remove();
>+            this._breakpointsDisabledWarningElement = null;
>+        }
>+    }
>+
>+    _updatePauseReason()
>+    {
>+        this._pauseReasonTreeOutline = null;
>+
>+        this._updatePauseReasonGotoArrow();
>+        return this._updatePauseReasonSection();
>+    }
>+
>+    _updatePauseReasonGotoArrow()
>+    {
>+        this._pauseReasonLinkContainerElement.removeChildren();
>+
>+        let activeCallFrame = WI.debuggerManager.activeCallFrame;
>+        if (!activeCallFrame)
>+            return;
>+
>+        let sourceCodeLocation = activeCallFrame.sourceCodeLocation;
>+        if (!sourceCodeLocation)
>+            return;
>+
>+        const options = {
>+            useGoToArrowButton: true,
>+        };
>+        let linkElement = WI.createSourceCodeLocationLink(sourceCodeLocation, options);
>+        this._pauseReasonLinkContainerElement.appendChild(linkElement);
>+    }
>+
>+    _updatePauseReasonSection()
>+    {
>+        let target = WI.debuggerManager.activeCallFrame.target;
>+        let targetData = WI.debuggerManager.dataForTarget(target);
>+        let {pauseReason, pauseData} = targetData;
>+
>+        switch (pauseReason) {
>+        case WI.DebuggerManager.PauseReason.AnimationFrame: {
>+            console.assert(pauseData, "Expected data with an animation frame, but found none.");
>+            if (!pauseData)
>+                break;
>+
>+            let eventBreakpoint = WI.domDebuggerManager.eventBreakpointForTypeAndEventName(WI.EventBreakpoint.Type.AnimationFrame, pauseData.eventName);
>+            console.assert(eventBreakpoint, "Expected AnimationFrame breakpoint for event name.", pauseData.eventName);
>+            if (!eventBreakpoint)
>+                break;
>+
>+            this._pauseReasonTreeOutline = this.createContentTreeOutline({suppressFiltering: true});
>+
>+            let eventBreakpointTreeElement = new WI.EventBreakpointTreeElement(eventBreakpoint, {
>+                className: WI.SourcesNavigationSidebarPanel.PausedBreakpointIconStyleClassName,
>+                title: WI.UIString("%s Fired").format(pauseData.eventName),
>+            });
>+            this._pauseReasonTreeOutline.appendChild(eventBreakpointTreeElement);
>+
>+            let eventBreakpointRow = new WI.DetailsSectionRow;
>+            eventBreakpointRow.element.appendChild(this._pauseReasonTreeOutline.element);
>+
>+            this._pauseReasonGroup.rows = [eventBreakpointRow];
>+            return true;
>+        }
>+
>+        case WI.DebuggerManager.PauseReason.Assertion:
>+            // FIXME: We should include the assertion condition string.
>+            console.assert(pauseData, "Expected data with an assertion, but found none.");
>+            if (pauseData && pauseData.message)
>+                this._pauseReasonTextRow.text = WI.UIString("Assertion with message: %s").format(pauseData.message);
>+            else
>+                this._pauseReasonTextRow.text = WI.UIString("Assertion Failed");
>+            this._pauseReasonGroup.rows = [this._pauseReasonTextRow];
>+            return true;
>+
>+        case WI.DebuggerManager.PauseReason.Breakpoint: {
>+            console.assert(pauseData, "Expected breakpoint identifier, but found none.");
>+            if (!pauseData || !pauseData.breakpointId)
>+                break;
>+
>+            this._pauseReasonTreeOutline = this.createContentTreeOutline({suppressFiltering: true});
>+            this._pauseReasonTreeOutline.addEventListener(WI.TreeOutline.Event.SelectionDidChange, this._handleTreeSelectionDidChange, this);
>+
>+            let breakpoint = WI.debuggerManager.breakpointForIdentifier(pauseData.breakpointId);
>+            let breakpointTreeElement = new WI.BreakpointTreeElement(breakpoint, {
>+                className: WI.SourcesNavigationSidebarPanel.PausedBreakpointIconStyleClassName,
>+                title: WI.UIString("Triggered Breakpoint"),
>+            });
>+            let breakpointDetailsSection = new WI.DetailsSectionRow;
>+            this._pauseReasonTreeOutline.appendChild(breakpointTreeElement);
>+            breakpointDetailsSection.element.appendChild(this._pauseReasonTreeOutline.element);
>+
>+            this._pauseReasonGroup.rows = [breakpointDetailsSection];
>+            return true;
>+        }
>+
>+        case WI.DebuggerManager.PauseReason.CSPViolation:
>+            console.assert(pauseData, "Expected data with a CSP Violation, but found none.");
>+            if (!pauseData)
>+                break;
>+
>+            // COMPATIBILITY (iOS 8): 'directive' was 'directiveText'.
>+            this._pauseReasonTextRow.text = WI.UIString("Content Security Policy violation of directive: %s").format(pauseData.directive || pauseData.directiveText);
>+            this._pauseReasonGroup.rows = [this._pauseReasonTextRow];
>+            return true;
>+
>+        case WI.DebuggerManager.PauseReason.DebuggerStatement:
>+            this._pauseReasonTextRow.text = WI.UIString("Debugger Statement");
>+            this._pauseReasonGroup.rows = [this._pauseReasonTextRow];
>+            return true;
>+
>+        case WI.DebuggerManager.PauseReason.DOM: {
>+            console.assert(WI.domDebuggerManager.supported);
>+            console.assert(pauseData, "Expected DOM breakpoint data, but found none.");
>+            if (!pauseData || !pauseData.nodeId)
>+                break;
>+
>+            let domNode = WI.domManager.nodeForId(pauseData.nodeId);
>+            let domBreakpoints = WI.domDebuggerManager.domBreakpointsForNode(domNode);
>+            let domBreakpoint;
>+            for (let breakpoint of domBreakpoints) {
>+                if (breakpoint.type === pauseData.type) {
>+                    domBreakpoint = breakpoint;
>+                    break;
>+                }
>+            }
>+
>+            console.assert(domBreakpoint, "Missing DOM breakpoint of type for node", pauseData.type, domNode);
>+            if (!domBreakpoint)
>+                break;
>+
>+            this._pauseReasonTreeOutline = this.createContentTreeOutline({suppressFiltering: true});
>+
>+            let type = WI.DOMBreakpointTreeElement.displayNameForType(domBreakpoint.type);
>+            let domBreakpointTreeElement = new WI.DOMBreakpointTreeElement(domBreakpoint, {
>+                className: WI.SourcesNavigationSidebarPanel.PausedBreakpointIconStyleClassName,
>+                title: type,
>+            });
>+            let domBreakpointRow = new WI.DetailsSectionRow;
>+            this._pauseReasonTreeOutline.appendChild(domBreakpointTreeElement);
>+            domBreakpointRow.element.appendChild(this._pauseReasonTreeOutline.element);
>+
>+            let ownerElementRow = new WI.DetailsSectionSimpleRow(WI.UIString("Element"), WI.linkifyNodeReference(domNode));
>+            this._pauseReasonGroup.rows = [domBreakpointRow, ownerElementRow];
>+
>+            if (domBreakpoint.type !== WI.DOMBreakpoint.Type.SubtreeModified)
>+                return true;
>+
>+            console.assert(pauseData.targetNode);
>+
>+            let remoteObject = WI.RemoteObject.fromPayload(pauseData.targetNode, target);
>+            remoteObject.pushNodeToFrontend((nodeId) => {
>+                if (!nodeId)
>+                    return;
>+
>+                let node = WI.domManager.nodeForId(nodeId);
>+                console.assert(node, "Missing node for id.", nodeId);
>+                if (!node)
>+                    return;
>+
>+                let fragment = document.createDocumentFragment();
>+                let description = pauseData.insertion ? WI.UIString("Child added to ") : WI.UIString("Removed descendant ");
>+                fragment.append(description, WI.linkifyNodeReference(node));
>+
>+                let targetDescriptionRow = new WI.DetailsSectionSimpleRow(WI.UIString("Details"), fragment);
>+                targetDescriptionRow.element.classList.add("target-description");
>+
>+                this._pauseReasonGroup.rows = this._pauseReasonGroup.rows.concat(targetDescriptionRow);
>+            });
>+
>+            return true;
>+        }
>+
>+        case WI.DebuggerManager.PauseReason.EventListener: {
>+            console.assert(pauseData, "Expected data with an event listener, but found none.");
>+            if (!pauseData)
>+                break;
>+
>+            let eventBreakpoint = null;
>+            if (pauseData.eventListenerId)
>+                eventBreakpoint = WI.domManager.breakpointForEventListenerId(pauseData.eventListenerId);
>+            if (!eventBreakpoint)
>+                eventBreakpoint = WI.domDebuggerManager.eventBreakpointForTypeAndEventName(WI.EventBreakpoint.Type.Listener, pauseData.eventName);
>+
>+            console.assert(eventBreakpoint, "Expected Event Listener breakpoint for event name.", pauseData.eventName);
>+            if (!eventBreakpoint)
>+                break;
>+
>+            this._pauseReasonTreeOutline = this.createContentTreeOutline({suppressFiltering: true});
>+
>+            let eventBreakpointTreeElement = new WI.EventBreakpointTreeElement(eventBreakpoint, {
>+                className: WI.SourcesNavigationSidebarPanel.PausedBreakpointIconStyleClassName,
>+                title: WI.UIString("\u201C%s\u201D Event Fired").format(pauseData.eventName),
>+            });
>+            this._pauseReasonTreeOutline.appendChild(eventBreakpointTreeElement);
>+
>+            let eventBreakpointRow = new WI.DetailsSectionRow;
>+            eventBreakpointRow.element.appendChild(this._pauseReasonTreeOutline.element);
>+
>+            let rows = [eventBreakpointRow];
>+
>+            let eventListener = eventBreakpoint.eventListener;
>+            if (eventListener) {
>+                console.assert(eventListener.eventListenerId === pauseData.eventListenerId);
>+
>+                let ownerElementRow = new WI.DetailsSectionSimpleRow(WI.UIString("Element"), WI.linkifyNodeReference(eventListener.node));
>+                rows.push(ownerElementRow);
>+            }
>+
>+            this._pauseReasonGroup.rows = rows;
>+            return true;
>+        }
>+
>+        case WI.DebuggerManager.PauseReason.Exception: {
>+            console.assert(pauseData, "Expected data with an exception, but found none.");
>+            if (!pauseData)
>+                break;
>+
>+            // FIXME: We should improve the appearance of thrown objects. This works well for exception strings.
>+            let data = WI.RemoteObject.fromPayload(pauseData, target);
>+            this._pauseReasonTextRow.text = WI.UIString("Exception with thrown value: %s").format(data.description);
>+            this._pauseReasonGroup.rows = [this._pauseReasonTextRow];
>+            return true;
>+        }
>+
>+        case WI.DebuggerManager.PauseReason.PauseOnNextStatement:
>+            this._pauseReasonTextRow.text = WI.UIString("Immediate Pause Requested");
>+            this._pauseReasonGroup.rows = [this._pauseReasonTextRow];
>+            return true;
>+
>+        case WI.DebuggerManager.PauseReason.Timer: {
>+            console.assert(pauseData, "Expected data with a timer, but found none.");
>+            if (!pauseData)
>+                break;
>+
>+            let eventBreakpoint = WI.domDebuggerManager.eventBreakpointForTypeAndEventName(WI.EventBreakpoint.Type.Timer, pauseData.eventName);
>+            console.assert(eventBreakpoint, "Expected Timer breakpoint for event name.", pauseData.eventName);
>+            if (!eventBreakpoint)
>+                break;
>+
>+            this._pauseReasonTreeOutline = this.createContentTreeOutline({suppressFiltering: true});
>+
>+            let eventBreakpointTreeElement = new WI.EventBreakpointTreeElement(eventBreakpoint, {
>+                className: WI.SourcesNavigationSidebarPanel.PausedBreakpointIconStyleClassName,
>+                title: WI.UIString("%s Fired").format(pauseData.eventName),
>+            });
>+            this._pauseReasonTreeOutline.appendChild(eventBreakpointTreeElement);
>+
>+            let eventBreakpointRow = new WI.DetailsSectionRow;
>+            eventBreakpointRow.element.appendChild(this._pauseReasonTreeOutline.element);
>+
>+            this._pauseReasonGroup.rows = [eventBreakpointRow];
>+            return true;
>+        }
>+
>+        case WI.DebuggerManager.PauseReason.XHR: {
>+            console.assert(WI.domDebuggerManager.supported);
>+            console.assert(pauseData, "Expected XHR breakpoint data, but found none.");
>+            if (!pauseData)
>+                break;
>+
>+            if (pauseData.breakpointURL) {
>+                let xhrBreakpoint = WI.domDebuggerManager.xhrBreakpointForURL(pauseData.breakpointURL);
>+                console.assert(xhrBreakpoint, "Expected XHR breakpoint for URL.", pauseData.breakpointURL);
>+
>+                this._pauseReasonTreeOutline = this.createContentTreeOutline({suppressFiltering: true});
>+
>+                let xhrBreakpointTreeElement = new WI.XHRBreakpointTreeElement(xhrBreakpoint, {
>+                    className: WI.SourcesNavigationSidebarPanel.PausedBreakpointIconStyleClassName,
>+                    title: WI.UIString("Triggered XHR Breakpoint"),
>+                });
>+                let xhrBreakpointRow = new WI.DetailsSectionRow;
>+                this._pauseReasonTreeOutline.appendChild(xhrBreakpointTreeElement);
>+                xhrBreakpointRow.element.appendChild(this._pauseReasonTreeOutline.element);
>+
>+                this._pauseReasonTextRow.text = pauseData.url;
>+                this._pauseReasonGroup.rows = [xhrBreakpointRow, this._pauseReasonTextRow];
>+            } else {
>+                console.assert(pauseData.breakpointURL === "", "Should be the All Requests breakpoint which has an empty URL");
>+                this._pauseReasonTextRow.text = WI.UIString("Requesting: %s").format(pauseData.url);
>+                this._pauseReasonGroup.rows = [this._pauseReasonTextRow];
>+            }
>+            this._pauseReasonTextRow.element.title = pauseData.url;
>+            return true;
>+        }
>+
>+        case WI.DebuggerManager.PauseReason.Other:
>+            console.error("Paused for unknown reason. We should always have a reason.");
>+            break;
>+        }
>+
>+        return false;
>+    }
>+
>+    _handleResourceTypeScopeBarSelectionChanged(event)
>+    {
>+        this.updateFilter();
>+    }
>+
>+    _handleTreeSelectionDidChange(event)
>+    {
>+        if (!this.selected)
>+            return;
>+
>+        let treeElement = event.target.selectedTreeElement;
>+        if (!treeElement)
>+            return;
>+
>+        if (treeElement instanceof WI.DOMNodeTreeElement
>+            || treeElement instanceof WI.DOMBreakpointTreeElement
>+            || treeElement instanceof WI.EventBreakpointTreeElement
>+            || treeElement instanceof WI.XHRBreakpointTreeElement)
>+            return;
>+
>+        if (treeElement instanceof WI.FolderTreeElement
>+            || treeElement instanceof WI.ResourceTreeElement
>+            || treeElement instanceof WI.ScriptTreeElement
>+            || treeElement instanceof WI.CSSStyleSheetTreeElement) {
>+            WI.showRepresentedObject(treeElement.representedObject);
>+            return;
>+        }
>+
>+        if (treeElement instanceof WI.CallFrameTreeElement) {
>+            let callFrame = treeElement.callFrame;
>+            if (callFrame.id)
>+                WI.debuggerManager.activeCallFrame = callFrame;
>+            if (callFrame.sourceCodeLocation)
>+                WI.showSourceCodeLocation(callFrame.sourceCodeLocation);
>+            return;
>+        }
>+
>+        if (treeElement instanceof WI.IssueTreeElement) {
>+            WI.showSourceCodeLocation(treeElement.issueMessage.sourceCodeLocation);
>+            return;
>+        }
>+
>+        if (treeElement instanceof WI.BreakpointTreeElement) {
>+            let breakpoint = treeElement.breakpoint;
>+            if (treeElement.treeOutline === this._pauseReasonTreeOutline) {
>+                WI.showSourceCodeLocation(breakpoint.sourceCodeLocation);
>+                return;
>+            }
>+
>+            if (treeElement.parent.representedObject) {
>+                console.assert(treeElement.parent.representedObject instanceof WI.SourceCode);
>+                if (treeElement.parent.representedObject instanceof WI.SourceCode) {
>+                    WI.showSourceCodeLocation(breakpoint.sourceCodeLocation);
>+                    return;
>+                }
>+            }
>+        }
>+
>+        console.error("Unknown tree element", treeElement);
>+    }
>+
>+    _handleBreakpointElementAddedOrRemoved(event)
>+    {
>+        let treeElement = event.data.element;
>+
>+        let setting = null;
>+        if (treeElement.breakpoint === WI.debuggerManager.assertionFailuresBreakpoint)
>+            setting = WI.settings.showAssertionFailuresBreakpoint;
>+        else if (treeElement.representedObject === WI.domDebuggerManager.allRequestsBreakpoint)
>+            setting = WI.settings.showAllRequestsBreakpoint;
>+
>+        if (setting)
>+            setting.value = !!treeElement.parent;
>+    }
>+
>+    _handleCreateBreakpointClicked(event)
>+    {
>+        let contextMenu = WI.ContextMenu.createFromEvent(event.data.nativeEvent);
>+
>+        // COMPATIBILITY (iOS 10): DebuggerAgent.setPauseOnAssertions did not exist yet.
>+        if (InspectorBackend.domains.Debugger.setPauseOnAssertions) {
>+            let assertionFailuresBreakpointShown = WI.settings.showAssertionFailuresBreakpoint.value;
>+
>+            contextMenu.appendCheckboxItem(WI.UIString("Assertion Failures"), () => {
>+                if (assertionFailuresBreakpointShown)
>+                    WI.debuggerManager.removeBreakpoint(WI.debuggerManager.assertionFailuresBreakpoint);
>+                else {
>+                    WI.debuggerManager.assertionFailuresBreakpoint.disabled = false;
>+                    WI.debuggerManager.addBreakpoint(WI.debuggerManager.assertionFailuresBreakpoint);
>+                }
>+            }, assertionFailuresBreakpointShown);
>+        }
>+
>+        if (WI.domDebuggerManager.supported) {
>+            contextMenu.appendSeparator();
>+
>+            contextMenu.appendItem(WI.UIString("Event Breakpoint\u2026"), () => {
>+                let popover = new WI.EventBreakpointPopover(this);
>+                popover.show(event.target.element, [WI.RectEdge.MAX_Y, WI.RectEdge.MIN_Y, WI.RectEdge.MAX_X]);
>+            });
>+
>+            contextMenu.appendSeparator();
>+
>+            let allRequestsBreakpointShown = WI.settings.showAllRequestsBreakpoint.value;
>+
>+            contextMenu.appendCheckboxItem(WI.UIString("All Requests"), () => {
>+                if (allRequestsBreakpointShown)
>+                    WI.domDebuggerManager.removeXHRBreakpoint(WI.domDebuggerManager.allRequestsBreakpoint);
>+                else {
>+                    WI.domDebuggerManager.allRequestsBreakpoint.disabled = false;
>+                    WI.domDebuggerManager.addXHRBreakpoint(WI.domDebuggerManager.allRequestsBreakpoint);
>+                }
>+            }, allRequestsBreakpointShown);
>+
>+            contextMenu.appendItem(WI.UIString("XHR Breakpoint\u2026"), () => {
>+                let popover = new WI.XHRBreakpointPopover(this);
>+                popover.show(event.target.element, [WI.RectEdge.MAX_Y, WI.RectEdge.MIN_Y, WI.RectEdge.MAX_X]);
>+            });
>+        }
>+
>+        contextMenu.show();
>+    }
>+
>+    _handleFrameMainResourceDidChange(event)
>+    {
>+        if (event.target.isMainFrame()) {
>+            this._updateMainFrameTreeElement(event.target);
>+
>+            for (let domBreakpoint of WI.domDebuggerManager.domBreakpoints)
>+                this._removeBreakpoint(domBreakpoint);
>+        }
>+
>+        if (!event.data.oldMainResource) {
>+            let resource = event.target.mainResource;
>+            this._addBreakpointsForSourceCode(resource);
>+            this._addIssuesForSourceCode(resource);
>+        }
>+    }
>+
>+    _handleResourceAdded(event)
>+    {
>+        this._addResource(event.data.resource);
>+    }
>+
>+    _handleMainFrameDidChange(event)
>+    {
>+        this._updateMainFrameTreeElement(WI.networkManager.mainFrame);
>+    }
>+
>+    _handleDebuggerBreakpointAdded(event)
>+    {
>+        this._addBreakpoint(event.data.breakpoint);
>+    }
>+
>+    _handleDebuggerBreakpointRemoved(event)
>+    {
>+        this._removeBreakpoint(event.data.breakpoint);
>+    }
>+
>+    _handleDebuggerBreakpointsEnabledDidChange(event)
>+    {
>+        this._debuggerBreakpointsButtonItem.activated = WI.debuggerManager.breakpointsEnabled;
>+
>+        this._updateBreakpointsDisabledBanner();
>+    }
>+
>+    _handleDebuggerScriptAdded(event)
>+    {
>+        this._addScript(event.data.script);
>+    }
>+
>+    _handleDebuggerScriptRemoved(event)
>+    {
>+        let script = event.data.script;
>+        let scriptTreeElement = this._resourcesTreeOutline.findTreeElement(script);
>+        if (!scriptTreeElement)
>+            return;
>+
>+        let parentTreeElement = scriptTreeElement.parent;
>+        parentTreeElement.removeChild(scriptTreeElement);
>+
>+        if (parentTreeElement instanceof WI.FolderTreeElement) {
>+            parentTreeElement.representedObject.remove(script);
>+
>+            if (!parentTreeElement.children.length)
>+                parentTreeElement.parent.removeChild(parentTreeElement);
>+        }
>+    }
>+
>+    _handleDebuggerScriptsCleared(event)
>+    {
>+        const suppressOnDeselect = true;
>+        const suppressSelectSibling = true;
>+
>+        for (var i = this._breakpointsTreeOutline.children.length - 1; i >= 0; --i) {
>+            var treeElement = this._breakpointsTreeOutline.children[i];
>+            if (!(treeElement instanceof WI.ScriptTreeElement))
>+                continue;
>+
>+            this._breakpointsTreeOutline.removeChildAtIndex(i, suppressOnDeselect, suppressSelectSibling);
>+        }
>+
>+        if (this._extensionScriptsFolderTreeElement) {
>+            if (this._extensionScriptsFolderTreeElement.parent)
>+                this._extensionScriptsFolderTreeElement.parent.removeChild(this._extensionScriptsFolderTreeElement, suppressOnDeselect, suppressSelectSibling);
>+
>+            this._extensionScriptsFolderTreeElement.representedObject.clear();
>+            this._extensionScriptsFolderTreeElement = null;
>+        }
>+
>+        if (this._extraScriptsFolderTreeElement) {
>+            if (this._extraScriptsFolderTreeElement.parent)
>+                this._extraScriptsFolderTreeElement.parent.removeChild(this._extraScriptsFolderTreeElement, suppressOnDeselect, suppressSelectSibling);
>+
>+            this._extraScriptsFolderTreeElement.representedObject.clear();
>+            this._extraScriptsFolderTreeElement = null;
>+        }
>+
>+        if (this._anonymousScriptsFolderTreeElement) {
>+            if (this._anonymousScriptsFolderTreeElement.parent)
>+                this._anonymousScriptsFolderTreeElement.parent.removeChild(this._anonymousScriptsFolderTreeElement, suppressOnDeselect, suppressSelectSibling);
>+
>+            this._anonymousScriptsFolderTreeElement.representedObject.clear();
>+            this._anonymousScriptsFolderTreeElement = null;
>+        }
>+
>+        if (this._workerTargetTreeElementMap.size) {
>+            for (let treeElement of this._workerTargetTreeElementMap.values())
>+                treeElement.parent.removeChild(treeElement, suppressOnDeselect, suppressSelectSibling);
>+            this._workerTargetTreeElementMap.clear();
>+        }
>+
>+        this._addResourcesRecursivelyForFrame(WI.networkManager.mainFrame);
>+    }
>+
>+    _handleDebuggerPaused(event)
>+    {
>+        this.contentView.element.insertBefore(this._callStackSection.element, this.contentView.element.firstChild);
>+
>+        if (this._updatePauseReason())
>+            this.contentView.element.insertBefore(this._pauseReasonSection.element, this.contentView.element.firstChild);
>+
>+        this._debuggerPauseResumeButtonItem.enabled = true;
>+        this._debuggerPauseResumeButtonItem.toggled = true;
>+        this._debuggerStepOverButtonItem.enabled = true;
>+        this._debuggerStepIntoButtonItem.enabled = true;
>+        this._debuggerStepOutButtonItem.enabled = true;
>+
>+        this.element.classList.add(WI.SourcesNavigationSidebarPanel.DebuggerPausedStyleClassName);
>+    }
>+
>+    _handleDebuggerResumed(event)
>+    {
>+        this._callStackSection.element.remove();
>+
>+        this._pauseReasonSection.element.remove();
>+
>+        this._debuggerPauseResumeButtonItem.enabled = true;
>+        this._debuggerPauseResumeButtonItem.toggled = false;
>+        this._debuggerStepOverButtonItem.enabled = false;
>+        this._debuggerStepIntoButtonItem.enabled = false;
>+        this._debuggerStepOutButtonItem.enabled = false;
>+
>+        this.element.classList.remove(WI.SourcesNavigationSidebarPanel.DebuggerPausedStyleClassName);
>+    }
>+
>+    _handleDebuggerCallFramesDidChange(event)
>+    {
>+        let {target} = event.data;
>+        let treeElement = this._findCallStackTargetTreeElement(target);
>+        console.assert(treeElement);
>+        if (treeElement)
>+            treeElement.refresh();
>+    }
>+
>+    _handleDebuggerActiveCallFrameDidChange(event)
>+    {
>+        if (this._activeCallFrameTreeElement) {
>+            this._activeCallFrameTreeElement.isActiveCallFrame = false;
>+            this._activeCallFrameTreeElement = null;
>+        }
>+
>+        if (!WI.debuggerManager.activeCallFrame)
>+            return;
>+
>+        this._activeCallFrameTreeElement = this._callStackTreeOutline.findTreeElement(WI.debuggerManager.activeCallFrame);
>+        if (this._activeCallFrameTreeElement)
>+            this._activeCallFrameTreeElement.isActiveCallFrame = true;
>+    }
>+
>+    _handleDebuggerWaitingToPause(event)
>+    {
>+        this._debuggerPauseResumeButtonItem.enabled = false;
>+    }
>+
>+    _handleDebuggerObjectDisplayLocationDidChange(event)
>+    {
>+        let debuggerObject = event.target;
>+
>+        if (event.data.oldDisplaySourceCode === debuggerObject.sourceCodeLocation.displaySourceCode)
>+            return;
>+
>+        // A known debugger object (breakpoint, issueMessage, etc.) moved between resources. Remove
>+        // the old tree element and create a new tree element with the updated file.
>+
>+        let wasSelected = false;
>+        let oldDebuggerTreeElement = null;
>+        let newDebuggerTreeElement = null;
>+        if (debuggerObject instanceof WI.Breakpoint) {
>+            oldDebuggerTreeElement = this._breakpointsTreeOutline.findTreeElement(debuggerObject);
>+            if (oldDebuggerTreeElement) {
>+                newDebuggerTreeElement = this._addBreakpoint(debuggerObject);
>+                wasSelected = oldDebuggerTreeElement.selected;
>+            }
>+        } else if (debuggerObject instanceof WI.IssueMessage) {
>+            oldDebuggerTreeElement = this._resourcesTreeOutline.findTreeElement(debuggerObject);
>+            if (oldDebuggerTreeElement) {
>+                newDebuggerTreeElement = this._addIssue(debuggerObject);
>+                wasSelected = oldDebuggerTreeElement.selected;
>+            }
>+        }
>+
>+        if (oldDebuggerTreeElement)
>+            this._removeDebuggerTreeElement(oldDebuggerTreeElement);
>+
>+        if (newDebuggerTreeElement && wasSelected)
>+            newDebuggerTreeElement.revealAndSelect(true, false, true);
>+    }
>+
>+    _handleDOMBreakpointResolvedStateDidChange(event)
>+    {
>+        let breakpoint = event.target;
>+        if (breakpoint.domNodeIdentifier)
>+            this._addBreakpoint(breakpoint);
>+        else
>+            this._removeBreakpoint(breakpoint);
>+    }
>+
>+    _handleConsoleIssueAdded(event)
>+    {
>+        let {issue} = event.data;
>+
>+        // We only want to show issues originating from JavaScript source code.
>+        if (!issue.sourceCodeLocation || !issue.sourceCodeLocation.sourceCode || (issue.source !== "javascript" && issue.source !== "console-api"))
>+            return;
>+
>+        this._addIssue(issue);
>+    }
>+
>+    _handleConsoleCleared(event)
>+    {
>+        let issueTreeElements = [];
>+        let currentTreeElement = this._resourcesTreeOutline.children[0];
>+        while (currentTreeElement && !currentTreeElement.root) {
>+            if (currentTreeElement instanceof WI.IssueTreeElement)
>+                issueTreeElements.push(currentTreeElement);
>+
>+            const skipUnrevealed = false;
>+            const stayWithin = null;
>+            const dontPopulate = true;
>+            currentTreeElement = currentTreeElement.traverseNextTreeElement(skipUnrevealed, stayWithin, dontPopulate);
>+        }
>+
>+        issueTreeElements.forEach((treeElement) => treeElement.parent.removeChild(treeElement));
>+    }
>+
>+    _handleTimelineCapturingWillStart(event)
>+    {
>+        this._debuggerBreakpointsButtonItem.enabled = false;
>+        this._debuggerPauseResumeButtonItem.enabled = false;
>+
>+        if (!this._timelineRecordingWarningElement) {
>+            let stopRecordingButton = document.createElement("button");
>+            stopRecordingButton.textContent = WI.UIString("Stop recording");
>+            stopRecordingButton.addEventListener("click", () => {
>+                WI.timelineManager.stopCapturing();
>+            });
>+
>+            this._timelineRecordingWarningElement = document.createElement("div");
>+            this._timelineRecordingWarningElement.classList.add("warning-banner");
>+            this._timelineRecordingWarningElement.append(WI.UIString("Debugger disabled during Timeline recording"), document.createElement("br"), stopRecordingButton);
>+        }
>+
>+        this.contentView.element.insertBefore(this._timelineRecordingWarningElement, this.contentView.element.firstChild);
>+
>+        this._updateBreakpointsDisabledBanner();
>+    }
>+
>+    _handleTimelineCapturingStopped(event)
>+    {
>+        this._debuggerBreakpointsButtonItem.enabled = true;
>+        this._debuggerPauseResumeButtonItem.enabled = true;
>+
>+        if (this._timelineRecordingWarningElement) {
>+            this._timelineRecordingWarningElement.remove();
>+            this._timelineRecordingWarningElement = null;
>+        }
>+
>+        this._updateBreakpointsDisabledBanner();
>+    }
>+
>+    _handleCSSStyleSheetAdded(event)
>+    {
>+        let styleSheet = event.data.styleSheet;
>+        if (!styleSheet.isInspectorStyleSheet())
>+            return;
>+
>+        let frameTreeElement = this.treeElementForRepresentedObject(styleSheet.parentFrame);
>+        if (!frameTreeElement)
>+            return;
>+
>+        frameTreeElement.addRepresentedObjectToNewChildQueue(styleSheet);
>+    }
>+
>+    _handleTargetAdded(event)
>+    {
>+        this._addTarget(event.data.target);
>+    }
>+
>+    _handleTargetRemoved(event)
>+    {
>+        let {target} = event.data;
>+
>+        let workerTreeElement = this._workerTargetTreeElementMap.take(target);
>+        if (workerTreeElement)
>+            workerTreeElement.parent.removeChild(workerTreeElement);
>+
>+        let callStackTreeElement = this._findCallStackTargetTreeElement(target);
>+        console.assert(callStackTreeElement);
>+        if (callStackTreeElement)
>+            this._callStackTreeOutline.removeChild(callStackTreeElement);
>+
>+        this._updateCallStackTreeOutline();
>+    }
>+
>+    _handleExtraDomainsActivated()
>+    {
>+        if (WI.SourcesNavigationSidebarPanel.shouldPlaceResourcesAtTopLevel())
>+            this._resourcesTreeOutline.disclosureButtons = true;
>+    }
>+};
>+
>+WI.SourcesNavigationSidebarPanel.ResourceTypeSymbol = Symbol("resource-type");
>+
>+WI.SourcesNavigationSidebarPanel.DebuggerPausedStyleClassName = "paused";
>+WI.SourcesNavigationSidebarPanel.ExceptionIconStyleClassName = "breakpoint-exception-icon";
>+WI.SourcesNavigationSidebarPanel.AssertionIconStyleClassName = "breakpoint-assertion-icon";
>+WI.SourcesNavigationSidebarPanel.PausedBreakpointIconStyleClassName = "breakpoint-paused-icon";
>+
>+WI.SourcesNavigationSidebarPanel.SelectedAllExceptionsCookieKey = "sources-navigation-sidebar-panel-all-exceptions-breakpoint";
>+WI.SourcesNavigationSidebarPanel.SelectedUncaughtExceptionsCookieKey = "sources-navigation-sidebar-panel-uncaught-exceptions-breakpoint";
>+WI.SourcesNavigationSidebarPanel.SelectedAssertionFailuresCookieKey = "sources-navigation-sidebar-panel-assertion-failures-breakpoint";
>+WI.SourcesNavigationSidebarPanel.SelectedAllRequestsCookieKey = "sources-navigation-sidebar-panel-all-requests-breakpoint";
>diff --git a/Source/WebInspectorUI/UserInterface/Views/SourcesTabContentView.js b/Source/WebInspectorUI/UserInterface/Views/SourcesTabContentView.js
>new file mode 100644
>index 0000000000000000000000000000000000000000..fb7cb3166b1c4caf6bbe4f37cf924b8c8af2a45c
>--- /dev/null
>+++ b/Source/WebInspectorUI/UserInterface/Views/SourcesTabContentView.js
>@@ -0,0 +1,111 @@
>+/*
>+ * Copyright (C) 2018 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.
>+ */
>+
>+WI.SourcesTabContentView = class SourcesTabContentView extends WI.ContentBrowserTabContentView
>+{
>+    constructor()
>+    {
>+        let tabBarItem = WI.GeneralTabBarItem.fromTabInfo(WI.SourcesTabContentView.tabInfo());
>+        const detailsSidebarPanelConstructors = [WI.ResourceDetailsSidebarPanel, WI.ScopeChainDetailsSidebarPanel, WI.ProbeDetailsSidebarPanel];
>+        super("sources", ["sources"], tabBarItem, WI.SourcesNavigationSidebarPanel, detailsSidebarPanelConstructors);
>+
>+        this._showScopeChainDetailsSidebarPanel = false;
>+    }
>+
>+    static tabInfo()
>+    {
>+        return {
>+            image: "Images/Sources.svg",
>+            title: WI.UIString("Sources"),
>+        };
>+    }
>+
>+    static isTabAllowed()
>+    {
>+        return !!WI.settings.experimentalEnableSourcesTab.value;
>+    }
>+
>+    // Public
>+
>+    get type()
>+    {
>+        return WI.SourcesTabContentView.Type;
>+    }
>+
>+    get supportsSplitContentBrowser()
>+    {
>+        return true;
>+    }
>+
>+    canShowRepresentedObject(representedObject)
>+    {
>+        return representedObject instanceof WI.Frame
>+            || representedObject instanceof WI.FrameCollection
>+            || representedObject instanceof WI.Resource
>+            || representedObject instanceof WI.ResourceCollection
>+            || representedObject instanceof WI.Script
>+            || representedObject instanceof WI.ScriptCollection
>+            || representedObject instanceof WI.CSSStyleSheet
>+            || representedObject instanceof WI.CSSStyleSheetCollection
>+            || super.canShowRepresentedObject(representedObject);
>+    }
>+
>+    showDetailsSidebarPanels()
>+    {
>+        super.showDetailsSidebarPanels();
>+
>+        if (!this._showScopeChainDetailsSidebarPanel)
>+            return;
>+
>+        let scopeChainDetailsSidebarPanel = this.detailsSidebarPanels.find((item) => item instanceof WI.ScopeChainDetailsSidebarPanel);
>+        if (!scopeChainDetailsSidebarPanel)
>+            return;
>+
>+        let sidebar = scopeChainDetailsSidebarPanel.parentSidebar;
>+        if (!sidebar)
>+            return;
>+
>+        sidebar.selectedSidebarPanel = scopeChainDetailsSidebarPanel;
>+        sidebar.collapsed = false;
>+
>+        this._showScopeChainDetailsSidebarPanel = false;
>+    }
>+
>+    showScopeChainDetailsSidebarPanel()
>+    {
>+        this._showScopeChainDetailsSidebarPanel = true;
>+    }
>+
>+    revealAndSelectBreakpoint(breakpoint)
>+    {
>+        console.assert(breakpoint instanceof WI.Breakpoint);
>+
>+        let treeElement = this.navigationSidebarPanel.treeElementForRepresentedObject(breakpoint);
>+        if (treeElement)
>+            treeElement.revealAndSelect();
>+    }
>+};
>+
>+WI.SourcesTabContentView.Type = "sources";
>diff --git a/Source/WebInspectorUI/UserInterface/Views/TabBrowser.js b/Source/WebInspectorUI/UserInterface/Views/TabBrowser.js
>index 537b93fbe339d54b33d97b66b6d22f3ebc9b1d7e..48f2282ce2900cadb1ddd79975016088638ff4fb 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/TabBrowser.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/TabBrowser.js
>@@ -130,10 +130,6 @@ WI.TabBrowser = class TabBrowser extends WI.View
>                 continue;
>             if (options.ignoreNetworkTab && tabContentView instanceof WI.NetworkTabContentView)
>                 continue;
>-            if (options.ignoreResourcesTab && tabContentView instanceof WI.ResourcesTabContentView)
>-                continue;
>-            if (options.ignoreDebuggerTab && tabContentView instanceof WI.DebuggerTabContentView)
>-                continue;
> 
>             if (tabContentView.canShowRepresentedObject(representedObject))
>                 return tabContentView;

Actions: View | Formatted Diff | Diff

Attachments on bug 183420: 355499 | 355501 | 355521 | 355539 | 355739 | 358159 | 362223 | 362875