Attachment 348469 Details for Bug 182406 – Patch

[patch] Patch

bug-182406-20180829192358.patch (text/plain), 84.35 KB, created by Devin Rousso on 2018-08-29 19:23:59 PDT

(hide)

Description:

Filename:

MIME Type:

Creator: Devin Rousso

Created: 2018-08-29 19:23:59 PDT

Size: 84.35 KB

patch

obsolete

>diff --git a/Source/WebInspectorUI/ChangeLog b/Source/WebInspectorUI/ChangeLog
>index aca81e50605fd17f184bba6c95518eab29c53ad0..4c3f8286af4425dc3a4cf314d11018782249c8db 100644
>--- a/Source/WebInspectorUI/ChangeLog
>+++ b/Source/WebInspectorUI/ChangeLog
>@@ -1,3 +1,154 @@
>+2018-08-29  Devin Rousso  <drousso@apple.com>
>+
>+        Web Inspector: Hide DOM and XHR breakpoint sections when they are empty
>+        https://bugs.webkit.org/show_bug.cgi?id=182406
>+        <rdar://problem/37131512>
>+
>+        Reviewed by NOBODY (OOPS!).
>+
>+        Move all "+" buttons for adding breakpoints to a single "+" button just before the filter
>+        bar in the bottom of the nagivation sidebar. Global breakpoints are added/removed from a
>+        `WI.ContextMenu` that is shown when clicking on the "+" button. When a non-global breakpoint
>+        is added, temporarily make the corresponding section visible and show the creation popover
>+        for that breakpoint type nearby. All non-basic breakpoint (e.g. those not tied to a
>+        specific location in source code) sections will disappear if there are no breakpoints of
>+        that type. The following global breakpoints are shown (but still disabled) by default:
>+         - All Exceptions
>+         - Uncaught Exceptions
>+         - Assertion Failures
>+         - All Requests
>+        If the user deletes any of these breakpoints, they will not be shown again until re-added.
>+
>+        * Localizations/en.lproj/localizedStrings.js:
>+        * UserInterface/Base/Setting.js:
>+        * UserInterface/Main.html:
>+        * UserInterface/Views/Main.css:
>+        (.navigation-item-help):
>+        (.navigation-item-help .navigation-bar):
>+        (.navigation-item-help .navigation-bar > .item):
>+        (.message-text-view .navigation-item-help): Deleted.
>+        (.message-text-view .navigation-item-help .navigation-bar): Deleted.
>+        (.message-text-view .navigation-item-help .navigation-bar > .item): Deleted.
>+
>+        * UserInterface/Views/DebuggerSidebarPanel.js:
>+        (WI.DebuggerSidebarPanel):
>+        (WI.DebuggerSidebarPanel.prototype.closed):
>+        (WI.DebuggerSidebarPanel.prototype.saveStateToCookie):
>+        (WI.DebuggerSidebarPanel.prototype.restoreStateFromCookie.revealAndSelect):
>+        (WI.DebuggerSidebarPanel.prototype.restoreStateFromCookie):
>+        (WI.DebuggerSidebarPanel.prototype._addBreakpoint):
>+        (WI.DebuggerSidebarPanel.prototype._removeDebuggerTreeElement):
>+        (WI.DebuggerSidebarPanel.prototype._removeAllBreakpoints):
>+        (WI.DebuggerSidebarPanel.prototype._breakpointTreeOutlineDeleteTreeElement):
>+        (WI.DebuggerSidebarPanel.prototype._compareTopLevelTreeElements):
>+        (WI.DebuggerSidebarPanel.prototype._updatePauseReasonSection):
>+        (WI.DebuggerSidebarPanel.prototype._handleBreakpointAddedOrRemoved): Added.
>+        (WI.DebuggerSidebarPanel.prototype._handleCreateBreakpointClicked): Added.
>+        (WI.DebuggerSidebarPanel.prototype.willDismissPopover):
>+        (WI.DebuggerSidebarPanel.prototype._compareTopLevelTreeElements.isSpecialBreakpoint): Deleted.
>+        (WI.DebuggerSidebarPanel.prototype._domBreakpointAddedOrRemoved): Deleted.
>+        (WI.DebuggerSidebarPanel.prototype._eventBreakpointAddedOrRemoved): Deleted.
>+        (WI.DebuggerSidebarPanel.prototype._addEventBreakpointButtonClicked): Deleted.
>+        (WI.DebuggerSidebarPanel.prototype._addXHRBreakpointButtonClicked): Deleted.
>+        Whenever a breakpoint is added/removed from a section, show/hide the section's element via
>+        `hidden` based on whether there are any `WI.TreeElement` in that section's `WI.TreeOutline`.
>+
>+        * UserInterface/Views/BreakpointTreeElement.js:
>+        (WI.BreakpointTreeElement):
>+        (WI.BreakpointTreeElement.prototype.ondelete):
>+        * UserInterface/Views/DOMBreakpointTreeElement.js:
>+        (WI.DOMBreakpointTreeElement):
>+        (WI.DOMBreakpointTreeElement.prototype.populateContextMenu):
>+        * UserInterface/Views/XHRBreakpointTreeElement.js:
>+        (WI.XHRBreakpointTreeElement):
>+        (WI.XHRBreakpointTreeElement.prototype.populateContextMenu):
>+        * UserInterface/Views/EventBreakpointTreeElement.js:
>+        (WI.EventBreakpointTreeElement.prototype.populateContextMenu):
>+        * UserInterface/Controllers/BreakpointPopoverController.js:
>+        (WI.BreakpointPopoverController.prototype.appendContextMenuItems):
>+        When attempting to delete a non-removable breakpoint, instead mark it as `disabled` and
>+        remove "this" `WI.TreeElement` from it's parent `WI.TreeOutline`.
>+
>+        * UserInterface/Views/NavigationSidebarPanel.js:
>+        (WI.NavigationSidebarPanel):
>+        (WI.NavigationSidebarPanel.prototype.get optionsContainer):
>+        * UserInterface/Views/NavigationSidebarPanel.css:
>+        (.sidebar > .panel.navigation > .options): Added.
>+        (.sidebar > .panel.navigation > .options > *): Added.
>+        (.sidebar > .panel.navigation > .filter-bar): Deleted.
>+        * UserInterface/Views/DebuggerSidebarPanel.css:
>+        (.sidebar > .panel.navigation.debugger > .options > .create-breakpoint): Added.
>+        (body[dir=ltr] .sidebar > .panel.navigation.debugger > .options > .create-breakpoint): Added.
>+        (body[dir=rtl] .sidebar > .panel.navigation.debugger > .options > .create-breakpoint): Added.
>+        (@media (prefers-dark-interface)): Added.
>+        (.sidebar > .panel.navigation.debugger .breakpoints.details-section .navigation-item-help .navigation-bar): Added.
>+        (.sidebar > .panel.navigation.debugger .breakpoints.details-section .navigation-item-help .create-breakpoint): Added.
>+        * UserInterface/Views/CanvasSidebarPanel.css:
>+        (.sidebar > .panel.navigation.canvas:not(.has-recordings) > .options > .filter-bar,): Added.
>+        (.sidebar > .panel.navigation.canvas:not(.has-recordings) > .filter-bar,): Deleted.
>+        Encapsulate the `WI.FilterBar` in every `WI.NavigationSidebarPanel` inside a <div> so that
>+        other elements can be added around the `WI.FilterBar` that don't directly affect filtering.
>+
>+        * UserInterface/Controllers/DebuggerManager.js:
>+        (WI.DebuggerManager.prototype.get uncaughtExceptionsBreakpoint): Added.
>+        (WI.DebuggerManager.prototype.get assertionFailuresBreakpoint): Added.
>+        (WI.DebuggerManager.prototype.isBreakpointSpecial): Added.
>+        (WI.DebuggerManager.prototype.isBreakpointEditable):
>+        (WI.DebuggerManager.prototype.addBreakpoint):
>+        (WI.DebuggerManager.prototype.removeBreakpoint):
>+        (WI.DebuggerManager.prototype.initializeTarget):
>+        (WI.DebuggerManager.prototype._breakpointDisabledStateDidChange):
>+        (WI.DebuggerManager.prototype._updateBreakOnExceptionsState):
>+        (WI.DebuggerManager.prototype.get allUncaughtExceptionsBreakpoint): Deleted.
>+        (WI.DebuggerManager.prototype.get assertionsBreakpoint): Deleted.
>+        (WI.DebuggerManager.prototype.isBreakpointRemovable): Deleted.
>+        * UserInterface/Controllers/DOMDebuggerManager.js:
>+        (WI.DOMDebuggerManager.prototype.isBreakpointSpecial): Added.
>+        (WI.DOMDebuggerManager.prototype.addDOMBreakpoint):
>+        (WI.DOMDebuggerManager.prototype.removeDOMBreakpoint):
>+        (WI.DOMDebuggerManager.prototype.addEventBreakpoint):
>+        (WI.DOMDebuggerManager.prototype.addXHRBreakpoint):
>+        (WI.DOMDebuggerManager.prototype.removeXHRBreakpoint):
>+        (WI.DOMDebuggerManager.prototype.isBreakpointRemovable): Deleted.
>+        Always fire add/remove events, including for special breakpoints, so that any listeners will
>+        be able to adjust accordingly. Even though special breakpoints don't get stored in the lists
>+        held by each manager, we are still able to enable/disable them, and that should be reported.
>+
>+        * UserInterface/Controllers/BreakpointPopoverController.js:
>+        (WI.BreakpointPopoverController.prototype.appendContextMenuItems):
>+        * UserInterface/Controllers/DOMBreakpointTreeController.js:
>+        (WI.DOMBreakpointTreeController.prototype.disconnect):
>+        * UserInterface/Controllers/EventBreakpointTreeController.js:
>+        (WI.EventBreakpointTreeController.prototype.disconnect):
>+        (WI.EventBreakpointTreeController.prototype.revealAndSelect): Deleted.
>+        * UserInterface/Controllers/XHRBreakpointTreeController.js:
>+        (WI.XHRBreakpointTreeController):
>+        (WI.XHRBreakpointTreeController.prototype.disconnect):
>+        (WI.XHRBreakpointTreeController.prototype._addTreeElement):
>+        (WI.XHRBreakpointTreeController.prototype._elementAddedOrRemoved):
>+        (WI.XHRBreakpointTreeController.prototype.revealAndSelect): Deleted.
>+        Drive-by: remove event listeners when disconnecting.
>+
>+        * UserInterface/Views/BreakpointDetailsSection.js: Added.
>+        (WI.BreakpointDetailsSection):
>+        (WI.BreakpointDetailsSection.prototype.showIfNotEmpty):
>+        (WI.BreakpointDetailsSection.prototype._handleElementAddedOrRemoved):
>+
>+        * UserInterface/Views/SourceCodeTextEditor.js:
>+        (WI.SourceCodeTextEditor.prototype.textEditorGutterContextMenu):
>+
>+        * UserInterface/Views/XHRBreakpointPopover.js:
>+        (WI.XHRBreakpointPopover):
>+        (WI.XHRBreakpointPopover.prototype.get breakpoint): Added.
>+        (WI.XHRBreakpointPopover.prototype.show): Added.
>+        (WI.XHRBreakpointPopover.prototype.dismiss):
>+        (WI.XHRBreakpointPopover.prototype._createEditor):
>+        (WI.XHRBreakpointPopover.prototype._updateEditor):
>+        (WI.XHRBreakpointPopover.prototype.get result): Deleted.
>+        (WI.XHRBreakpointPopover.prototype.get type): Deleted.
>+        (WI.XHRBreakpointPopover.prototype.get value): Deleted.
>+        Drive-by: remove the erroneous usage of `WI.InputPopover.Result`.
>+
> 2018-08-27  Keith Rollin  <krollin@apple.com>
> 
>         Unreviewed build fix -- disable LTO for production builds
>diff --git a/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js b/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
>index 22c0d1a5820bc886a37235e449a7ad52825481ce..3d0ec9a1c2e6ab1d7725504a022a87c410a95b87 100644
>--- a/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
>+++ b/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
>@@ -73,12 +73,10 @@ localizedStrings["Add"] = "Add";
> localizedStrings["Add %s Rule"] = "Add %s Rule";
> localizedStrings["Add Action"] = "Add Action";
> localizedStrings["Add Breakpoint"] = "Add Breakpoint";
>-localizedStrings["Add Event Breakpoint"] = "Add Event Breakpoint";
> localizedStrings["Add New"] = "Add New";
> localizedStrings["Add New Class"] = "Add New Class";
> localizedStrings["Add New Probe Expression"] = "Add New Probe Expression";
> localizedStrings["Add New Watch Expression"] = "Add New Watch Expression";
>-localizedStrings["Add XHR Breakpoint"] = "Add XHR Breakpoint";
> localizedStrings["Add a Class"] = "Add a Class";
> localizedStrings["Add new breakpoint action after this action"] = "Add new breakpoint action after this action";
> localizedStrings["Add new rule"] = "Add new rule";
>@@ -267,6 +265,7 @@ localizedStrings["Copy as cURL"] = "Copy as cURL";
> localizedStrings["Could not fetch properties. Object may no longer exist."] = "Could not fetch properties. Object may no longer exist.";
> localizedStrings["Count"] = "Count";
> localizedStrings["Create %s Rule"] = "Create %s Rule";
>+localizedStrings["Create a breakpoint"] = "Create a breakpoint";
> localizedStrings["Create a new tab"] = "Create a new tab";
> localizedStrings["Current"] = "Current";
> localizedStrings["Cursor"] = "Cursor";
>@@ -400,6 +399,7 @@ localizedStrings["Errors"] = "Errors";
> localizedStrings["Eval Code"] = "Eval Code";
> localizedStrings["Evaluate JavaScript"] = "Evaluate JavaScript";
> localizedStrings["Event"] = "Event";
>+localizedStrings["Event Breakpoint\u2026"] = "Event Breakpoint\u2026";
> localizedStrings["Event Breakpoints"] = "Event Breakpoints";
> localizedStrings["Event Dispatched"] = "Event Dispatched";
> localizedStrings["Event Listeners"] = "Event Listeners";
>@@ -721,6 +721,7 @@ localizedStrings["Position X"] = "Position X";
> localizedStrings["Position Y"] = "Position Y";
> localizedStrings["Prefer indent using:"] = "Prefer indent using:";
> localizedStrings["Preserve Log"] = "Preserve Log";
>+localizedStrings["Press %s to create a breakpoint."] = "Press %s to create a breakpoint.";
> localizedStrings["Press %s to load a recording from file."] = "Press %s to load a recording from file.";
> localizedStrings["Pressed"] = "Pressed";
> localizedStrings["Pretty print"] = "Pretty print";
>@@ -1077,6 +1078,7 @@ localizedStrings["X"] = "X";
> localizedStrings["X1"] = "X1";
> localizedStrings["X2"] = "X2";
> localizedStrings["XHR"] = "XHR";
>+localizedStrings["XHR Breakpoint\u2026"] = "XHR Breakpoint\u2026";
> localizedStrings["XHR Breakpoints"] = "XHR Breakpoints";
> localizedStrings["XHRs"] = "XHRs";
> localizedStrings["XPath"] = "XPath";
>diff --git a/Source/WebInspectorUI/UserInterface/Base/Setting.js b/Source/WebInspectorUI/UserInterface/Base/Setting.js
>index a0a579e421b0ec99e0704bb3d31af430738c928d..dacb3d48ea2312b8d8c4761eb60215afb5e63a1c 100644
>--- a/Source/WebInspectorUI/UserInterface/Base/Setting.js
>+++ b/Source/WebInspectorUI/UserInterface/Base/Setting.js
>@@ -117,6 +117,11 @@ WI.settings = {
>     showCanvasPath: new WI.Setting("show-canvas-path", false),
>     selectedNetworkDetailContentViewIdentifier: new WI.Setting("network-detail-content-view-identifier", "preview"),
>     showRulers: new WI.Setting("show-rulers", false),
>+    showAllExceptionsBreakpoint: new WI.Setting("show-all-exceptions-breakpoint", true),
>+    showUncaughtExceptionsBreakpoint: new WI.Setting("show-uncaught-exceptions-breakpoint", true),
>+    showAssertionFailuresBreakpoint: new WI.Setting("show-assertion-failures-breakpoint", true),
>+    showAllRequestsBreakpoint: new WI.Setting("show-all-requests-breakpoint", true),
>+
> 
>     // Experimental
>     experimentalEnableLayersTab: new WI.Setting("experimental-enable-layers-tab", false),
>diff --git a/Source/WebInspectorUI/UserInterface/Controllers/BreakpointPopoverController.js b/Source/WebInspectorUI/UserInterface/Controllers/BreakpointPopoverController.js
>index a86585e36d3b1fc4f6514871ea8817642cf4dd04..f9f27cd06d73904dea4abb655efec6e53393cb32 100644
>--- a/Source/WebInspectorUI/UserInterface/Controllers/BreakpointPopoverController.js
>+++ b/Source/WebInspectorUI/UserInterface/Controllers/BreakpointPopoverController.js
>@@ -88,10 +88,9 @@ WI.BreakpointPopoverController = class BreakpointPopoverController extends WI.Ob
>         if (!breakpoint.autoContinue && !breakpoint.disabled && breakpoint.actions.length)
>             contextMenu.appendItem(WI.UIString("Set to Automatically Continue"), toggleAutoContinue);
> 
>-        if (WI.debuggerManager.isBreakpointRemovable(breakpoint)) {
>-            contextMenu.appendSeparator();
>-            contextMenu.appendItem(WI.UIString("Delete Breakpoint"), removeBreakpoint);
>-        }
>+        contextMenu.appendSeparator();
>+
>+        contextMenu.appendItem(WI.UIString("Delete Breakpoint"), removeBreakpoint);
> 
>         if (breakpoint._sourceCodeLocation.hasMappedLocation()) {
>             contextMenu.appendSeparator();
>diff --git a/Source/WebInspectorUI/UserInterface/Controllers/DOMBreakpointTreeController.js b/Source/WebInspectorUI/UserInterface/Controllers/DOMBreakpointTreeController.js
>index 9e8aba7a54c49ae4a5c1eba8a44f3344570d7d7f..b466c63a9c5f843b25227ebac4db85b55fb5b93a 100644
>--- a/Source/WebInspectorUI/UserInterface/Controllers/DOMBreakpointTreeController.js
>+++ b/Source/WebInspectorUI/UserInterface/Controllers/DOMBreakpointTreeController.js
>@@ -23,12 +23,10 @@
>  * THE POSSIBILITY OF SUCH DAMAGE.
>  */
> 
>-WI.DOMBreakpointTreeController = class DOMBreakpointsTreeController extends WI.Object
>+WI.DOMBreakpointTreeController = class DOMBreakpointsTreeController
> {
>     constructor(treeOutline)
>     {
>-        super();
>-
>         this._treeOutline = treeOutline;
>         this._breakpointTreeElements = new Map;
>         this._domNodeTreeElements = new Map;
>diff --git a/Source/WebInspectorUI/UserInterface/Controllers/DOMDebuggerManager.js b/Source/WebInspectorUI/UserInterface/Controllers/DOMDebuggerManager.js
>index 7dc12ee5b8420e4df5d5c7706f47066809a75764..a867f361bdecde913ee83b4bd8c46d5257b368f0 100644
>--- a/Source/WebInspectorUI/UserInterface/Controllers/DOMDebuggerManager.js
>+++ b/Source/WebInspectorUI/UserInterface/Controllers/DOMDebuggerManager.js
>@@ -120,9 +120,9 @@ WI.DOMDebuggerManager = class DOMDebuggerManager extends WI.Object
> 
>     get xhrBreakpoints() { return this._xhrBreakpoints; }
> 
>-    isBreakpointRemovable(breakpoint)
>+    isBreakpointSpecial(breakpoint)
>     {
>-        return breakpoint !== this._allRequestsBreakpoint;
>+        return breakpoint === this._allRequestsBreakpoint;
>     }
> 
>     domBreakpointsForNode(node)
>@@ -146,6 +146,11 @@ WI.DOMDebuggerManager = class DOMDebuggerManager extends WI.Object
>         if (!breakpoint || !breakpoint.url)
>             return;
> 
>+        if (this.isBreakpointSpecial(breakpoint)) {
>+            this.dispatchEventToListeners(WI.DOMDebuggerManager.Event.DOMBreakpointAdded, {breakpoint});
>+            return;
>+        }
>+
>         let breakpoints = this._domBreakpointURLMap.get(breakpoint.url);
>         if (!breakpoints) {
>             breakpoints = [breakpoint];
>@@ -167,6 +172,12 @@ WI.DOMDebuggerManager = class DOMDebuggerManager extends WI.Object
>         if (!breakpoint)
>             return;
> 
>+        if (this.isBreakpointSpecial(breakpoint)) {
>+            breakpoint.disabled = true;
>+            this.dispatchEventToListeners(WI.DOMDebuggerManager.Event.DOMBreakpointRemoved, {breakpoint});
>+            return;
>+        }
>+
>         let nodeIdentifier = breakpoint.domNodeIdentifier;
>         console.assert(nodeIdentifier, "Cannot remove unresolved DOM breakpoint.");
>         if (!nodeIdentifier)
>@@ -211,6 +222,11 @@ WI.DOMDebuggerManager = class DOMDebuggerManager extends WI.Object
>         if (!breakpoint)
>             return;
> 
>+        if (this.isBreakpointSpecial(breakpoint)) {
>+            this.dispatchEventToListeners(WI.DOMDebuggerManager.Event.EventBreakpointAdded, {breakpoint});
>+            return;
>+        }
>+
>         if (this.eventBreakpointForTypeAndEventName(breakpoint.type, breakpoint.eventName))
>             return;
> 
>@@ -228,6 +244,12 @@ WI.DOMDebuggerManager = class DOMDebuggerManager extends WI.Object
>         if (!breakpoint)
>             return;
> 
>+        if (this.isBreakpointSpecial(breakpoint)) {
>+            breakpoint.disabled = true;
>+            this.dispatchEventToListeners(WI.DOMDebuggerManager.Event.EventBreakpointRemoved, {breakpoint});
>+            return;
>+        }
>+
>         if (!this._eventBreakpoints.includes(breakpoint))
>             return;
> 
>@@ -265,6 +287,11 @@ WI.DOMDebuggerManager = class DOMDebuggerManager extends WI.Object
>         if (!breakpoint)
>             return;
> 
>+        if (this.isBreakpointSpecial(breakpoint)) {
>+            this.dispatchEventToListeners(WI.DOMDebuggerManager.Event.XHRBreakpointAdded, {breakpoint});
>+            return;
>+        }
>+
>         console.assert(!this._xhrBreakpoints.includes(breakpoint), "Already added XHR breakpoint.", breakpoint);
>         if (this._xhrBreakpoints.includes(breakpoint))
>             return;
>@@ -286,6 +313,12 @@ WI.DOMDebuggerManager = class DOMDebuggerManager extends WI.Object
>         if (!breakpoint)
>             return;
> 
>+        if (this.isBreakpointSpecial(breakpoint)) {
>+            breakpoint.disabled = true;
>+            this.dispatchEventToListeners(WI.DOMDebuggerManager.Event.XHRBreakpointRemoved, {breakpoint});
>+            return;
>+        }
>+
>         if (!this._xhrBreakpoints.includes(breakpoint))
>             return;
> 
>diff --git a/Source/WebInspectorUI/UserInterface/Controllers/DebuggerManager.js b/Source/WebInspectorUI/UserInterface/Controllers/DebuggerManager.js
>index a37affd662c20cf6126cf2a33f61453cab8ba1fc..34b6ab3ccb66ffd2ab5c4a7b2b59211ae8eaa908 100644
>--- a/Source/WebInspectorUI/UserInterface/Controllers/DebuggerManager.js
>+++ b/Source/WebInspectorUI/UserInterface/Controllers/DebuggerManager.js
>@@ -50,8 +50,8 @@ WI.DebuggerManager = class DebuggerManager extends WI.Object
>         this._breakpointsSetting = new WI.Setting("breakpoints", []);
>         this._breakpointsEnabledSetting = new WI.Setting("breakpoints-enabled", true);
>         this._allExceptionsBreakpointEnabledSetting = new WI.Setting("break-on-all-exceptions", false);
>-        this._allUncaughtExceptionsBreakpointEnabledSetting = new WI.Setting("break-on-all-uncaught-exceptions", false);
>-        this._assertionsBreakpointEnabledSetting = new WI.Setting("break-on-assertions", false);
>+        this._uncaughtExceptionsBreakpointEnabledSetting = new WI.Setting("break-on-uncaught-exceptions", false);
>+        this._assertionFailuresBreakpointEnabledSetting = new WI.Setting("break-on-assertion-failures", false);
>         this._asyncStackTraceDepthSetting = new WI.Setting("async-stack-trace-depth", 200);
> 
>         let specialBreakpointLocation = new WI.SourceCodeLocation(null, Infinity, Infinity);
>@@ -59,10 +59,10 @@ WI.DebuggerManager = class DebuggerManager extends WI.Object
>         this._allExceptionsBreakpoint = new WI.Breakpoint(specialBreakpointLocation, !this._allExceptionsBreakpointEnabledSetting.value);
>         this._allExceptionsBreakpoint.resolved = true;
> 
>-        this._allUncaughtExceptionsBreakpoint = new WI.Breakpoint(specialBreakpointLocation, !this._allUncaughtExceptionsBreakpointEnabledSetting.value);
>+        this._uncaughtExceptionsBreakpoint = new WI.Breakpoint(specialBreakpointLocation, !this._uncaughtExceptionsBreakpointEnabledSetting.value);
> 
>-        this._assertionsBreakpoint = new WI.Breakpoint(specialBreakpointLocation, !this._assertionsBreakpointEnabledSetting.value);
>-        this._assertionsBreakpoint.resolved = true;
>+        this._assertionFailuresBreakpoint = new WI.Breakpoint(specialBreakpointLocation, !this._assertionFailuresBreakpointEnabledSetting.value);
>+        this._assertionFailuresBreakpoint.resolved = true;
> 
>         this._breakpoints = [];
>         this._breakpointContentIdentifierMap = new Map;
>@@ -93,7 +93,7 @@ WI.DebuggerManager = class DebuggerManager extends WI.Object
> 
>         // COMPATIBILITY (iOS 10): DebuggerAgent.setPauseOnAssertions did not exist yet.
>         if (DebuggerAgent.setPauseOnAssertions)
>-            DebuggerAgent.setPauseOnAssertions(this._assertionsBreakpointEnabledSetting.value);
>+            DebuggerAgent.setPauseOnAssertions(this._assertionFailuresBreakpointEnabledSetting.value);
> 
>         // COMPATIBILITY (iOS 10): Debugger.setAsyncStackTraceDepth did not exist yet.
>         if (DebuggerAgent.setAsyncStackTraceDepth)
>@@ -159,25 +159,10 @@ WI.DebuggerManager = class DebuggerManager extends WI.Object
>         return targetData;
>     }
> 
>-    get allExceptionsBreakpoint()
>-    {
>-        return this._allExceptionsBreakpoint;
>-    }
>-
>-    get allUncaughtExceptionsBreakpoint()
>-    {
>-        return this._allUncaughtExceptionsBreakpoint;
>-    }
>-
>-    get assertionsBreakpoint()
>-    {
>-        return this._assertionsBreakpoint;
>-    }
>-
>-    get breakpoints()
>-    {
>-        return this._breakpoints;
>-    }
>+    get allExceptionsBreakpoint() { return this._allExceptionsBreakpoint; }
>+    get uncaughtExceptionsBreakpoint() { return this._uncaughtExceptionsBreakpoint; }
>+    get assertionFailuresBreakpoint() { return this._assertionFailuresBreakpoint; }
>+    get breakpoints() { return this._breakpoints; }
> 
>     breakpointForIdentifier(id)
>     {
>@@ -224,16 +209,16 @@ WI.DebuggerManager = class DebuggerManager extends WI.Object
>         return null;
>     }
> 
>-    isBreakpointRemovable(breakpoint)
>+    isBreakpointSpecial(breakpoint)
>     {
>-        return breakpoint !== this._allExceptionsBreakpoint
>-            && breakpoint !== this._allUncaughtExceptionsBreakpoint
>-            && breakpoint !== this._assertionsBreakpoint;
>+        return breakpoint === this._allExceptionsBreakpoint
>+            || breakpoint === this._uncaughtExceptionsBreakpoint
>+            || breakpoint === this._assertionFailuresBreakpoint;
>     }
> 
>     isBreakpointEditable(breakpoint)
>     {
>-        return this.isBreakpointRemovable(breakpoint);
>+        return !this.isBreakpointSpecial(breakpoint);
>     }
> 
>     get breakpointsEnabled()
>@@ -437,6 +422,12 @@ WI.DebuggerManager = class DebuggerManager extends WI.Object
>         if (!breakpoint)
>             return;
> 
>+        if (this.isBreakpointSpecial(breakpoint)) {
>+            breakpoint.disabled = false;
>+            this.dispatchEventToListeners(WI.DebuggerManager.Event.BreakpointAdded, {breakpoint});
>+            return;
>+        }
>+
>         if (breakpoint.contentIdentifier) {
>             let contentIdentifierBreakpoints = this._breakpointContentIdentifierMap.get(breakpoint.contentIdentifier);
>             if (!contentIdentifierBreakpoints) {
>@@ -476,9 +467,11 @@ WI.DebuggerManager = class DebuggerManager extends WI.Object
>         if (!breakpoint)
>             return;
> 
>-        console.assert(this.isBreakpointRemovable(breakpoint));
>-        if (!this.isBreakpointRemovable(breakpoint))
>+        if (this.isBreakpointSpecial(breakpoint)) {
>+            breakpoint.disabled = true;
>+            this.dispatchEventToListeners(WI.DebuggerManager.Event.BreakpointRemoved, {breakpoint});
>             return;
>+        }
> 
>         this._breakpoints.remove(breakpoint);
> 
>@@ -525,7 +518,7 @@ WI.DebuggerManager = class DebuggerManager extends WI.Object
>         // Initialize global state.
>         DebuggerAgent.enable();
>         DebuggerAgent.setBreakpointsActive(this._breakpointsEnabledSetting.value);
>-        DebuggerAgent.setPauseOnAssertions(this._assertionsBreakpointEnabledSetting.value);
>+        DebuggerAgent.setPauseOnAssertions(this._assertionFailuresBreakpointEnabledSetting.value);
>         DebuggerAgent.setPauseOnExceptions(this._breakOnExceptionsState);
>         DebuggerAgent.setAsyncStackTraceDepth(this._asyncStackTraceDepthSetting.value);
> 
>@@ -1034,22 +1027,22 @@ WI.DebuggerManager = class DebuggerManager extends WI.Object
>             return;
>         }
> 
>-        if (breakpoint === this._allUncaughtExceptionsBreakpoint) {
>+        if (breakpoint === this._uncaughtExceptionsBreakpoint) {
>             if (!breakpoint.disabled && !this.breakpointsDisabledTemporarily)
>                 this.breakpointsEnabled = true;
>-            this._allUncaughtExceptionsBreakpointEnabledSetting.value = !breakpoint.disabled;
>+            this._uncaughtExceptionsBreakpointEnabledSetting.value = !breakpoint.disabled;
>             this._updateBreakOnExceptionsState();
>             for (let target of WI.targets)
>                 target.DebuggerAgent.setPauseOnExceptions(this._breakOnExceptionsState);
>             return;
>         }
> 
>-        if (breakpoint === this._assertionsBreakpoint) {
>+        if (breakpoint === this._assertionFailuresBreakpoint) {
>             if (!breakpoint.disabled && !this.breakpointsDisabledTemporarily)
>                 this.breakpointsEnabled = true;
>-            this._assertionsBreakpointEnabledSetting.value = !breakpoint.disabled;
>+            this._assertionFailuresBreakpointEnabledSetting.value = !breakpoint.disabled;
>             for (let target of WI.targets)
>-                target.DebuggerAgent.setPauseOnAssertions(this._assertionsBreakpointEnabledSetting.value);
>+                target.DebuggerAgent.setPauseOnAssertions(this._assertionFailuresBreakpointEnabledSetting.value);
>             return;
>         }
> 
>@@ -1169,7 +1162,7 @@ WI.DebuggerManager = class DebuggerManager extends WI.Object
>         if (this._breakpointsEnabledSetting.value) {
>             if (!this._allExceptionsBreakpoint.disabled)
>                 state = "all";
>-            else if (!this._allUncaughtExceptionsBreakpoint.disabled)
>+            else if (!this._uncaughtExceptionsBreakpoint.disabled)
>                 state = "uncaught";
>         }
> 
>@@ -1179,12 +1172,12 @@ WI.DebuggerManager = class DebuggerManager extends WI.Object
>         case "all":
>             // Mark the uncaught breakpoint as unresolved since "all" includes "uncaught".
>             // That way it is clear in the user interface that the breakpoint is ignored.
>-            this._allUncaughtExceptionsBreakpoint.resolved = false;
>+            this._uncaughtExceptionsBreakpoint.resolved = false;
>             break;
>         case "uncaught":
>         case "none":
>             // Mark the uncaught breakpoint as resolved again.
>-            this._allUncaughtExceptionsBreakpoint.resolved = true;
>+            this._uncaughtExceptionsBreakpoint.resolved = true;
>             break;
>         }
>     }
>diff --git a/Source/WebInspectorUI/UserInterface/Controllers/EventBreakpointTreeController.js b/Source/WebInspectorUI/UserInterface/Controllers/EventBreakpointTreeController.js
>index 10d32296d307cc331c5f7bf5f3d20148c6f11778..28313ea08d294d8dca313520f70a3ed88a15f413 100644
>--- a/Source/WebInspectorUI/UserInterface/Controllers/EventBreakpointTreeController.js
>+++ b/Source/WebInspectorUI/UserInterface/Controllers/EventBreakpointTreeController.js
>@@ -41,13 +41,9 @@ WI.EventBreakpointTreeController = class EventBreakpointTreeController
> 
>     // Public
> 
>-    revealAndSelect(breakpoint)
>+    disconnect()
>     {
>-        let treeElement = this._treeOutline.findTreeElement(breakpoint);
>-        if (!treeElement)
>-            return;
>-
>-        treeElement.revealAndSelect();
>+        WI.domDebuggerManager.removeEventListener(null, null, this);
>     }
> 
>     // Private
>diff --git a/Source/WebInspectorUI/UserInterface/Controllers/XHRBreakpointTreeController.js b/Source/WebInspectorUI/UserInterface/Controllers/XHRBreakpointTreeController.js
>index 65785635cb215bed7d2d703340d6a9862b4c9f08..60f03c1b3e1518c95d3448a2b186f3f893a9e42b 100644
>--- a/Source/WebInspectorUI/UserInterface/Controllers/XHRBreakpointTreeController.js
>+++ b/Source/WebInspectorUI/UserInterface/Controllers/XHRBreakpointTreeController.js
>@@ -23,39 +23,26 @@
>  * THE POSSIBILITY OF SUCH DAMAGE.
>  */
> 
>-WI.XHRBreakpointTreeController = class XHRBreakpointsTreeController extends WI.Object
>+WI.XHRBreakpointTreeController = class XHRBreakpointTreeController
> {
>     constructor(treeOutline)
>     {
>-        super();
>-
>         this._treeOutline = treeOutline;
>+        this._treeOutline.addEventListener(WI.TreeOutline.Event.ElementAdded, this._elementAddedOrRemoved, this);
>+        this._treeOutline.addEventListener(WI.TreeOutline.Event.ElementRemoved, this._elementAddedOrRemoved, this);
> 
>         WI.domDebuggerManager.addEventListener(WI.DOMDebuggerManager.Event.XHRBreakpointAdded, this._xhrBreakpointAdded, this);
>         WI.domDebuggerManager.addEventListener(WI.DOMDebuggerManager.Event.XHRBreakpointRemoved, this._xhrBreakpointRemoved, this);
> 
>-        this._allReqestsBreakpointTreeElement = new WI.XHRBreakpointTreeElement(WI.domDebuggerManager.allRequestsBreakpoint, WI.DebuggerSidebarPanel.AssertionIconStyleClassName, WI.UIString("All Requests"));
>-
>-        this._treeOutline.appendChild(this._allReqestsBreakpointTreeElement);
>-
>         for (let breakpoint of WI.domDebuggerManager.xhrBreakpoints)
>             this._addTreeElement(breakpoint);
>     }
> 
>     // Public
> 
>-    revealAndSelect(breakpoint)
>-    {
>-        let treeElement = this._treeOutline.findTreeElement(breakpoint);
>-        if (!treeElement)
>-            return;
>-
>-        treeElement.revealAndSelect();
>-    }
>-
>     disconnect()
>     {
>-        WI.Frame.removeEventListener(null, null, this);
>+        this._treeOutline.removeEventListener(null, null, this);
>         WI.domDebuggerManager.removeEventListener(null, null, this);
>     }
> 
>@@ -83,6 +70,26 @@ WI.XHRBreakpointTreeController = class XHRBreakpointsTreeController extends WI.O
>         if (treeElement)
>             return;
> 
>-        this._treeOutline.appendChild(new WI.XHRBreakpointTreeElement(breakpoint));
>+        let index = this._treeOutline.children.length;
>+        let options = {};
>+        if (breakpoint === WI.domDebuggerManager.allRequestsBreakpoint) {
>+            index = 0;
>+            options.className = WI.DebuggerSidebarPanel.AssertionIconStyleClassName;
>+            options.title = WI.UIString("All Requests");
>+        }
>+
>+        this._treeOutline.insertChild(new WI.XHRBreakpointTreeElement(breakpoint, options), index);
>+    }
>+
>+    _elementAddedOrRemoved(event)
>+    {
>+        let treeElement = event.data.element;
>+
>+        let setting = null;
>+        if (treeElement.representedObject === WI.domDebuggerManager.allRequestsBreakpoint)
>+            setting = WI.settings.showAllRequestsBreakpoint;
>+
>+        if (setting)
>+            setting.value = !!treeElement.parent;
>     }
> };
>diff --git a/Source/WebInspectorUI/UserInterface/Main.html b/Source/WebInspectorUI/UserInterface/Main.html
>index e56ce4a050bfab3efd86f6a7f78eae23a822bcd2..9f909f2840904d8f02c7fa12e24f828a21b5c5e8 100644
>--- a/Source/WebInspectorUI/UserInterface/Main.html
>+++ b/Source/WebInspectorUI/UserInterface/Main.html
>@@ -565,6 +565,7 @@
>     <script src="Views/BezierEditor.js"></script>
>     <script src="Views/BoxModelDetailsSectionRow.js"></script>
>     <script src="Views/BreakpointActionView.js"></script>
>+    <script src="Views/BreakpointDetailsSection.js"></script>
>     <script src="Views/BreakpointTreeElement.js"></script>
>     <script src="Views/ButtonToolbarItem.js"></script>
>     <script src="Views/CSSStyleDeclarationSection.js"></script>
>diff --git a/Source/WebInspectorUI/UserInterface/Views/BreakpointDetailsSection.js b/Source/WebInspectorUI/UserInterface/Views/BreakpointDetailsSection.js
>new file mode 100644
>index 0000000000000000000000000000000000000000..323c75c8f2a6e211d6c16d13026b064b1889e515
>--- /dev/null
>+++ b/Source/WebInspectorUI/UserInterface/Views/BreakpointDetailsSection.js
>@@ -0,0 +1,76 @@
>+/*
>+ * 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.BreakpointDetailsSection = class BreakpointDetailsSection extends WI.DetailsSection
>+{
>+    constructor(identifier, title, treeOutline, {preventHide, emptyMessage} = {})
>+    {
>+        let row = new WI.DetailsSectionRow(emptyMessage || WI.UIString("No Breakpoints"));
>+        row.element.appendChild(treeOutline.element);
>+        row.showEmptyMessage();
>+
>+        let group = new WI.DetailsSectionGroup([row]);
>+
>+        super(identifier, title, [group]);
>+
>+        this._treeOutline = treeOutline;
>+        this._treeOutline.addEventListener(WI.TreeOutline.Event.ElementAdded, this._handleElementAddedOrRemoved, this);
>+        this._treeOutline.addEventListener(WI.TreeOutline.Event.ElementRemoved, this._handleElementAddedOrRemoved, this);
>+
>+        this._preventHide = preventHide || false;
>+        if (!this._preventHide)
>+            this.element.hidden = true;
>+    }
>+
>+    // Public
>+
>+    showIfNotEmpty()
>+    {
>+        let hasBreakpoints = !!this._treeOutline.children.length;
>+
>+        if (!this._preventHide)
>+            this.element.hidden = !hasBreakpoints;
>+
>+        if (!hasBreakpoints) {
>+            this.groups[0].rows[0].showEmptyMessage();
>+            return;
>+        }
>+
>+        if (this._treeOutline.element.parentNode)
>+            return;
>+
>+        this.groups[0].rows[0].hideEmptyMessage();
>+        this.groups[0].rows[0].element.appendChild(this._treeOutline.element);
>+
>+        this._treeOutline.collapsed = false;
>+    }
>+
>+    // Private
>+
>+    _handleElementAddedOrRemoved(event)
>+    {
>+        this.showIfNotEmpty();
>+    }
>+};
>diff --git a/Source/WebInspectorUI/UserInterface/Views/BreakpointTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/BreakpointTreeElement.js
>index 9edfad60388718d5339dfa4cf8f5d056293580c4..4ba16e72b1bc8095a3cec927a23b34c4b978e975 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/BreakpointTreeElement.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/BreakpointTreeElement.js
>@@ -25,7 +25,7 @@
> 
> WI.BreakpointTreeElement = class BreakpointTreeElement extends WI.GeneralTreeElement
> {
>-    constructor(breakpoint, className, title)
>+    constructor(breakpoint, {className, title} = {})
>     {
>         console.assert(breakpoint instanceof WI.Breakpoint);
> 
>@@ -78,16 +78,14 @@ WI.BreakpointTreeElement = class BreakpointTreeElement extends WI.GeneralTreeEle
>     }
> 
>     ondelete()
>-    {
>-        if (!WI.debuggerManager.isBreakpointRemovable(this._breakpoint))
>-            return false;
>-
>+{
>         // We set this flag so that TreeOutlines that will remove this
>         // BreakpointTreeElement will know whether it was deleted from
>         // within the TreeOutline or from outside it (e.g. TextEditor).
>-        this.__deletedViaDeleteKeyboardShortcut = true;
>+        this[WI.BreakpointTreeElement.DeletedViaKeyboardShortcutSymbol] = true;
> 
>         WI.debuggerManager.removeBreakpoint(this._breakpoint);
>+
>         return true;
>     }
> 
>@@ -276,3 +274,5 @@ WI.BreakpointTreeElement.FormattedLocationStyleClassName = "formatted-location";
> WI.BreakpointTreeElement.ProbeDataUpdatedStyleClassName = "data-updated";
> 
> WI.BreakpointTreeElement.ProbeDataUpdatedAnimationDuration = 400; // milliseconds
>+
>+WI.BreakpointTreeElement.DeletedViaKeyboardShortcutSymbol = Symbol("deleted-via-keyboard-shortcut");
>diff --git a/Source/WebInspectorUI/UserInterface/Views/CanvasSidebarPanel.css b/Source/WebInspectorUI/UserInterface/Views/CanvasSidebarPanel.css
>index 42660beed4139e5c54418a51b4db00984a7fa531..011bdfb22068eea6135e75b46bfba6eaae58829c 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/CanvasSidebarPanel.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/CanvasSidebarPanel.css
>@@ -51,7 +51,7 @@
>     overflow-y: scroll;
> }
> 
>-.sidebar > .panel.navigation.canvas:not(.has-recordings) > .filter-bar,
>+.sidebar > .panel.navigation.canvas:not(.has-recordings) > .options > .filter-bar,
> .sidebar > .panel.navigation.canvas:not(.has-recordings) > .content > :matches(.navigation-bar, .recording-content) {
>     display: none;
> }
>diff --git a/Source/WebInspectorUI/UserInterface/Views/DOMBreakpointTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/DOMBreakpointTreeElement.js
>index be05e3df4c1b82cc8ecb84f875a7fdc2d4e7718b..0601e5f3834c61fe9415193c80753b3c9515edf9 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/DOMBreakpointTreeElement.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/DOMBreakpointTreeElement.js
>@@ -25,7 +25,7 @@
> 
> WI.DOMBreakpointTreeElement = class DOMBreakpointTreeElement extends WI.GeneralTreeElement
> {
>-    constructor(breakpoint, className, title)
>+    constructor(breakpoint, {className, title} = {})
>     {
>         console.assert(breakpoint instanceof WI.DOMBreakpoint);
> 
>diff --git a/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.css b/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.css
>index 36cf38648474272ea155454df7e519e072b0bbe4..9bade6ffbd8f013246e420db5cf4b3e1cbdfb100 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.css
>@@ -27,6 +27,22 @@
>     top: var(--navigation-bar-height);
> }
> 
>+.sidebar > .panel.navigation.debugger > .options > .create-breakpoint {
>+    width: 15px;
>+    height: 15px;
>+    content: url(../Images/Plus15.svg);
>+
>+    --create-breakpoint-margin-start: 6px;
>+}
>+
>+body[dir=ltr] .sidebar > .panel.navigation.debugger > .options > .create-breakpoint {
>+    margin-left: var(--create-breakpoint-margin-start);
>+}
>+
>+body[dir=rtl] .sidebar > .panel.navigation.debugger > .options > .create-breakpoint {
>+    margin-right: var(--create-breakpoint-margin-start);
>+}
>+
> .sidebar > .panel.navigation.debugger > .navigation-bar {
>     position: absolute;
>     top: 0;
>@@ -125,8 +141,21 @@ body[dir=rtl] .sidebar > .panel.navigation.debugger .tree-outline.single-thread
> }
> 
> @media (prefers-dark-interface) {
>+    .sidebar > .panel.navigation.debugger > .options > .create-breakpoint {
>+        filter: var(--filter-invert);
>+    }
>+
>     .sidebar > .panel.navigation.debugger .warning-banner {
>         background-color: var(--yellow-highlight-background-color);
>         color: var(--yellow-highlight-text-color);
>     }
> }
>+
>+.sidebar > .panel.navigation.debugger .breakpoints.details-section .navigation-item-help .navigation-bar {
>+    padding: 0 2px;
>+}
>+
>+.sidebar > .panel.navigation.debugger .breakpoints.details-section .navigation-item-help .create-breakpoint {
>+    width: auto;
>+    padding: 0 4px 2px;
>+}
>diff --git a/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.js b/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.js
>index 50919ba03cb1ea0ffb1b39ac6bc153ff651b49d1..0d7eab612752119877ad2acc9dc15121b77020a0 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.js
>@@ -108,11 +108,10 @@ WI.DebuggerSidebarPanel = class DebuggerSidebarPanel extends WI.NavigationSideba
>         // Add this offset-sections class name so the sticky headers don't overlap the navigation bar.
>         this.element.classList.add(WI.DebuggerSidebarPanel.OffsetSectionsStyleClassName);
> 
>-        this._allExceptionsBreakpointTreeElement = new WI.BreakpointTreeElement(WI.debuggerManager.allExceptionsBreakpoint, WI.DebuggerSidebarPanel.ExceptionIconStyleClassName, WI.UIString("All Exceptions"));
>-        this._allUncaughtExceptionsBreakpointTreeElement = new WI.BreakpointTreeElement(WI.debuggerManager.allUncaughtExceptionsBreakpoint, WI.DebuggerSidebarPanel.ExceptionIconStyleClassName, WI.UIString("Uncaught Exceptions"));
>-        this._assertionsBreakpointTreeElement = new WI.BreakpointTreeElement(WI.debuggerManager.assertionsBreakpoint, WI.DebuggerSidebarPanel.AssertionIconStyleClassName, WI.UIString("Assertion Failures"));
>-
>-        this.suppressFilteringOnTreeElements([this._allExceptionsBreakpointTreeElement, this._allUncaughtExceptionsBreakpointTreeElement, this._assertionsBreakpointTreeElement]);
>+        let createBreakpointIcon = this.optionsContainer.insertAdjacentElement("afterbegin", document.createElement("img"));
>+        createBreakpointIcon.classList.add("create-breakpoint");
>+        createBreakpointIcon.title = WI.UIString("Create a breakpoint");
>+        createBreakpointIcon.addEventListener("click", this._handleCreateBreakpointClicked.bind(this));
> 
>         function showResourcesWithIssuesOnlyFilterFunction(treeElement)
>         {
>@@ -137,14 +136,8 @@ WI.DebuggerSidebarPanel = class DebuggerSidebarPanel extends WI.NavigationSideba
>         this.filterBar.addFilterBarButton("debugger-show-resources-with-issues-only", showResourcesWithIssuesOnlyFilterFunction.bind(this), false, WI.UIString("Only show resources with issues"), WI.UIString("Show all resources"), "Images/Errors.svg", 15, 15);
> 
>         this._breakpointsContentTreeOutline = this.contentTreeOutline;
>-
>-        let breakpointsRow = new WI.DetailsSectionRow;
>-        breakpointsRow.element.appendChild(this._breakpointsContentTreeOutline.element);
>-
>-        let breakpointsGroup = new WI.DetailsSectionGroup([breakpointsRow]);
>-        let breakpointsSection = new WI.DetailsSection("breakpoints", WI.UIString("Breakpoints"), [breakpointsGroup]);
>-        this.contentView.element.appendChild(breakpointsSection.element);
>-
>+        this._breakpointsContentTreeOutline.addEventListener(WI.TreeOutline.Event.ElementAdded, this._handleBreakpointElementAddedOrRemoved, this);
>+        this._breakpointsContentTreeOutline.addEventListener(WI.TreeOutline.Event.ElementRemoved, this._handleBreakpointElementAddedOrRemoved, this);
>         this._breakpointsContentTreeOutline.addEventListener(WI.TreeOutline.Event.SelectionDidChange, this._treeSelectionDidChange, this);
>         this._breakpointsContentTreeOutline.ondelete = this._breakpointTreeOutlineDeleteTreeElement.bind(this);
>         this._breakpointsContentTreeOutline.populateContextMenu = function(contextMenu, event, treeElement) {
>@@ -153,68 +146,52 @@ WI.DebuggerSidebarPanel = class DebuggerSidebarPanel extends WI.NavigationSideba
>             WI.TreeOutline.prototype.populateContextMenu(contextMenu, event, treeElement);
>         }.bind(this);
> 
>-        this._breakpointsContentTreeOutline.appendChild(this._allExceptionsBreakpointTreeElement);
>-        this._breakpointsContentTreeOutline.appendChild(this._allUncaughtExceptionsBreakpointTreeElement);
>+        let createBreakpointNavigationItem = new WI.ButtonNavigationItem("create-breakpoint", WI.UIString("Create a breakpoint"), "Images/Plus15.svg", 14, 14);
>+        createBreakpointNavigationItem.buttonStyle = WI.ButtonNavigationItem.Style.Image;
>+        createBreakpointNavigationItem.addEventListener(WI.ButtonNavigationItem.Event.Clicked, (event) => {
>+            this._handleCreateBreakpointClicked(event.data.nativeEvent);
>+        });
>+
>+        this._breakpointsSection = new WI.BreakpointDetailsSection("breakpoints", WI.UIString("Breakpoints"), this._breakpointsContentTreeOutline, {
>+            preventHide: true,
>+            emptyMessage: WI.createNavigationItemHelp(WI.UIString("Press %s to create a breakpoint."), createBreakpointNavigationItem),
>+        });
>+        this.contentView.element.appendChild(this._breakpointsSection.element);
>+
>+        if (WI.settings.showAllExceptionsBreakpoint.value)
>+            WI.debuggerManager.addBreakpoint(WI.debuggerManager.allExceptionsBreakpoint);
>+
>+        if (WI.settings.showUncaughtExceptionsBreakpoint.value)
>+            WI.debuggerManager.addBreakpoint(WI.debuggerManager.uncaughtExceptionsBreakpoint);
> 
>         // COMPATIBILITY (iOS 10): DebuggerAgent.setPauseOnAssertions did not exist yet.
>-        if (DebuggerAgent.setPauseOnAssertions)
>-            this._breakpointsContentTreeOutline.appendChild(this._assertionsBreakpointTreeElement);
>+        if (DebuggerAgent.setPauseOnAssertions && WI.settings.showAssertionFailuresBreakpoint.value)
>+            WI.debuggerManager.addBreakpoint(WI.debuggerManager.assertionFailuresBreakpoint);
> 
>         if (WI.domDebuggerManager.supported) {
>             this._domBreakpointsContentTreeOutline = this.createContentTreeOutline(true);
>-            this._domBreakpointsContentTreeOutline.addEventListener(WI.TreeOutline.Event.ElementAdded, this._domBreakpointAddedOrRemoved, this);
>-            this._domBreakpointsContentTreeOutline.addEventListener(WI.TreeOutline.Event.ElementRemoved, this._domBreakpointAddedOrRemoved, this);
>-            this._domBreakpointTreeController = new WI.DOMBreakpointTreeController(this._domBreakpointsContentTreeOutline);
>-
>-            this._domBreakpointsRow = new WI.DetailsSectionRow(WI.UIString("No Breakpoints"));
>-            this._domBreakpointsRow.element.appendChild(this._domBreakpointsContentTreeOutline.element);
>-            this._domBreakpointsRow.showEmptyMessage();
> 
>-            const defaultCollapsed = true;
>-
>-            let domBreakpointsGroup = new WI.DetailsSectionGroup([this._domBreakpointsRow]);
>-            this._domBreakpointsSection = new WI.DetailsSection("dom-breakpoints", WI.UIString("DOM Breakpoints"), [domBreakpointsGroup], null, defaultCollapsed);
>+            this._domBreakpointsSection = new WI.BreakpointDetailsSection("dom-breakpoints", WI.UIString("DOM Breakpoints"), this._domBreakpointsContentTreeOutline);
>             this.contentView.element.appendChild(this._domBreakpointsSection.element);
> 
>-            this._eventBreakpointsContentTreeOutline = this.createContentTreeOutline(true);
>-            this._eventBreakpointsContentTreeOutline.addEventListener(WI.TreeOutline.Event.ElementAdded, this._eventBreakpointAddedOrRemoved, this);
>-            this._eventBreakpointsContentTreeOutline.addEventListener(WI.TreeOutline.Event.ElementRemoved, this._eventBreakpointAddedOrRemoved, this);
>-
>-            this._eventBreakpointsRow = new WI.DetailsSectionRow(WI.UIString("No Breakpoints"));
>-            this._eventBreakpointsRow.element.appendChild(this._eventBreakpointsContentTreeOutline.element);
>-            this._eventBreakpointsRow.showEmptyMessage();
>-
>-            let eventBreakpointNavigationBar = new WI.NavigationBar;
>-            let eventBreakpointNavigationBarWrapper = document.createElement("div");
>-            eventBreakpointNavigationBarWrapper.appendChild(eventBreakpointNavigationBar.element);
>+            this._domBreakpointTreeController = new WI.DOMBreakpointTreeController(this._domBreakpointsContentTreeOutline);
> 
>-            let addEventBreakpointButton = new WI.ButtonNavigationItem("add-event-breakpoint", WI.UIString("Add Event Breakpoint"), "Images/Plus13.svg", 13, 13);
>-            addEventBreakpointButton.addEventListener(WI.ButtonNavigationItem.Event.Clicked, this._addEventBreakpointButtonClicked, this);
>-            eventBreakpointNavigationBar.addNavigationItem(addEventBreakpointButton);
>+            this._eventBreakpointsContentTreeOutline = this.createContentTreeOutline(true);
> 
>-            let eventBreakpointsGroup = new WI.DetailsSectionGroup([this._eventBreakpointsRow]);
>-            this._eventBreakpointsSection = new WI.DetailsSection("event-breakpoints", WI.UIString("Event Breakpoints"), [eventBreakpointsGroup], eventBreakpointNavigationBarWrapper, defaultCollapsed);
>+            this._eventBreakpointsSection = new WI.BreakpointDetailsSection("event-breakpoints", WI.UIString("Event Breakpoints"), this._eventBreakpointsContentTreeOutline);
>             this.contentView.element.appendChild(this._eventBreakpointsSection.element);
> 
>             this._eventBreakpointTreeController = new WI.EventBreakpointTreeController(this._eventBreakpointsContentTreeOutline);
> 
>             this._xhrBreakpointsContentTreeOutline = this.createContentTreeOutline(true);
>-            this._xhrBreakpointTreeController = new WI.XHRBreakpointTreeController(this._xhrBreakpointsContentTreeOutline);
> 
>-            this._xhrBreakpointsRow = new WI.DetailsSectionRow;
>-            this._xhrBreakpointsRow.element.appendChild(this._xhrBreakpointsContentTreeOutline.element);
>+            this._xhrBreakpointsSection = new WI.BreakpointDetailsSection("xhr-breakpoints", WI.UIString("XHR Breakpoints"), this._xhrBreakpointsContentTreeOutline);
>+            this.contentView.element.appendChild(this._xhrBreakpointsSection.element);
> 
>-            let xhrBreakpointNavigationBar = new WI.NavigationBar;
>-            let xhrBreakpointNavigationBarWrapper = document.createElement("div");
>-            xhrBreakpointNavigationBarWrapper.appendChild(xhrBreakpointNavigationBar.element);
>-
>-            let addXHRBreakpointButton = new WI.ButtonNavigationItem("add-xhr-breakpoint", WI.UIString("Add XHR Breakpoint"), "Images/Plus13.svg", 13, 13);
>-            addXHRBreakpointButton.addEventListener(WI.ButtonNavigationItem.Event.Clicked, this._addXHRBreakpointButtonClicked, this);
>-            xhrBreakpointNavigationBar.addNavigationItem(addXHRBreakpointButton);
>+            this._xhrBreakpointTreeController = new WI.XHRBreakpointTreeController(this._xhrBreakpointsContentTreeOutline);
> 
>-            let xhrBreakpointsGroup = new WI.DetailsSectionGroup([this._xhrBreakpointsRow]);
>-            let xhrBreakpointsSection = new WI.DetailsSection("xhr-breakpoints", WI.UIString("XHR Breakpoints"), [xhrBreakpointsGroup], xhrBreakpointNavigationBarWrapper, defaultCollapsed);
>-            this.contentView.element.appendChild(xhrBreakpointsSection.element);
>+            if (WI.settings.showAllRequestsBreakpoint.value)
>+                WI.domDebuggerManager.addXHRBreakpoint(WI.domDebuggerManager.allRequestsBreakpoint);
>         }
> 
>         this._scriptsContentTreeOutline = this.createContentTreeOutline();
>@@ -290,8 +267,21 @@ WI.DebuggerSidebarPanel = class DebuggerSidebarPanel extends WI.NavigationSideba
>             this._domBreakpointTreeController = null;
>         }
> 
>+        if (this._eventBreakpointTreeController) {
>+            this._eventBreakpointTreeController.disconnect();
>+            this._eventBreakpointTreeController = null;
>+        }
>+
>+        if (this._xhrBreakpointTreeController) {
>+            this._xhrBreakpointTreeController.disconnect();
>+            this._xhrBreakpointTreeController = null;
>+        }
>+
>         WI.Frame.removeEventListener(null, null, this);
>+        WI.Target.removeEventListener(null, null, this);
>         WI.debuggerManager.removeEventListener(null, null, this);
>+        WI.timelineManager.removeEventListener(null, null, this);
>+        WI.targetManager.removeEventListener(null, null, this);
>         WI.Breakpoint.removeEventListener(null, null, this);
>         WI.IssueMessage.removeEventListener(null, null, this);
>     }
>@@ -366,13 +356,13 @@ WI.DebuggerSidebarPanel = class DebuggerSidebarPanel extends WI.NavigationSideba
>             return;
>         }
> 
>-        if (representedObject === WI.debuggerManager.allUncaughtExceptionsBreakpoint) {
>-            cookie[WI.DebuggerSidebarPanel.SelectedAllUncaughtExceptionsCookieKey] = true;
>+        if (representedObject === WI.debuggerManager.uncaughtExceptionsBreakpoint) {
>+            cookie[WI.DebuggerSidebarPanel.SelectedUncaughtExceptionsCookieKey] = true;
>             return;
>         }
> 
>-        if (representedObject === WI.debuggerManager.assertionsBreakpoint) {
>-            cookie[WI.DebuggerSidebarPanel.SelectedAssertionsCookieKey] = true;
>+        if (representedObject === WI.debuggerManager.assertionFailuresBreakpoint) {
>+            cookie[WI.DebuggerSidebarPanel.SelectedAssertionFailuresCookieKey] = true;
>             return;
>         }
> 
>@@ -388,17 +378,24 @@ WI.DebuggerSidebarPanel = class DebuggerSidebarPanel extends WI.NavigationSideba
>     {
>         console.assert(cookie);
> 
>+        function revealAndSelect(treeOutline, breakpoint) {
>+            let treeElement = treeOutline.findTreeElement(breakpoint);
>+            if (!treeElement)
>+                return;
>+
>+            treeElement.revealAndSelect();
>+        }
>+
>         // Eagerly resolve the special breakpoints; otherwise, use the default behavior.
>         if (cookie[WI.DebuggerSidebarPanel.SelectedAllExceptionsCookieKey])
>-            this._allExceptionsBreakpointTreeElement.revealAndSelect();
>-        else if (cookie[WI.DebuggerSidebarPanel.SelectedAllUncaughtExceptionsCookieKey])
>-            this._allUncaughtExceptionsBreakpointTreeElement.revealAndSelect();
>-        else if (cookie[WI.DebuggerSidebarPanel.SelectedAssertionsCookieKey])
>-            this._assertionsBreakpointTreeElement.revealAndSelect();
>-        else if (cookie[WI.DebuggerSidebarPanel.SelectedAllRequestsCookieKey]) {
>-            if (this._xhrBreakpointTreeController)
>-                this._xhrBreakpointTreeController.revealAndSelect(WI.domDebuggerManager.allRequestsBreakpoint);
>-        } else
>+            revealAndSelect(this._breakpointsContentTreeOutline, WI.debuggerManager.allExceptionsBreakpoint);
>+        else if (cookie[WI.DebuggerSidebarPanel.SelectedUncaughtExceptionsCookieKey])
>+            revealAndSelect(this._breakpointsContentTreeOutline, WI.debuggerManager.uncaughtExceptionsBreakpoint);
>+        else if (cookie[WI.DebuggerSidebarPanel.SelectedAssertionFailuresCookieKey])
>+            revealAndSelect(this._breakpointsContentTreeOutline, WI.debuggerManager.assertionFailuresBreakpoint);
>+        else if (cookie[WI.DebuggerSidebarPanel.SelectedAllRequestsCookieKey])
>+            revealAndSelect(this._xhrBreakpointsContentTreeOutline, WI.domDebuggerManager.allRequestsBreakpoint);
>+        else
>             super.restoreStateFromCookie(cookie, relaxedMatchDelay);
>     }
> 
>@@ -449,24 +446,51 @@ WI.DebuggerSidebarPanel = class DebuggerSidebarPanel extends WI.NavigationSideba
> 
>     _addBreakpoint(breakpoint)
>     {
>-        let sourceCode = breakpoint.sourceCodeLocation.displaySourceCode;
>-        if (!sourceCode)
>-            return null;
>-
>-        if (this._breakpointsContentTreeOutline.findTreeElement(breakpoint))
>-            return;
>-
>-        let parentTreeElement = this._addTreeElementForSourceCodeToTreeOutline(sourceCode, this._breakpointsContentTreeOutline);
>-
>-        // 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 index = this._breakpointsContentTreeOutline.children.length;
>+        let options = {};
>+        let parentTreeElement = this._breakpointsContentTreeOutline;
>+
>+        if (WI.debuggerManager.isBreakpointSpecial(breakpoint)) {
>+            index = 0;
>+
>+            if (breakpoint === WI.debuggerManager.allExceptionsBreakpoint) {
>+                options.className = WI.DebuggerSidebarPanel.ExceptionIconStyleClassName;
>+                options.title = WI.UIString("All Exceptions");
>+            } else if (breakpoint === WI.debuggerManager.uncaughtExceptionsBreakpoint) {
>+                if (WI.settings.showAllExceptionsBreakpoint.value)
>+                    ++index;
>+
>+                options.className = WI.DebuggerSidebarPanel.ExceptionIconStyleClassName;
>+                options.title = WI.UIString("Uncaught Exceptions");
>+            } else if (breakpoint === WI.debuggerManager.assertionFailuresBreakpoint) {
>+                if (WI.settings.showAllExceptionsBreakpoint.value)
>+                    ++index;
>+                if (WI.settings.showUncaughtExceptionsBreakpoint.value)
>+                    ++index;
>+
>+                options.className = WI.DebuggerSidebarPanel.AssertionIconStyleClassName;
>+                options.title = WI.UIString("Assertion Failures");
>+            }
>+        } else {
>+            let sourceCode = breakpoint.sourceCodeLocation.displaySourceCode;
>+            if (!sourceCode)
>+                return null;
>+
>+            if (this._breakpointsContentTreeOutline.findTreeElement(breakpoint))
>+                return null;
>+
>+            parentTreeElement = this._addTreeElementForSourceCodeToTreeOutline(sourceCode, this._breakpointsContentTreeOutline);
>+
>+            // 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 WI.BreakpointTreeElement(breakpoint);
>-        parentTreeElement.insertChild(breakpointTreeElement, insertionIndexForObjectInListSortedByFunction(breakpointTreeElement, parentTreeElement.children, this._compareTreeElements));
>+        let breakpointTreeElement = new WI.BreakpointTreeElement(breakpoint, options);
>+        parentTreeElement.insertChild(breakpointTreeElement, index);
>         if (parentTreeElement.children.length === 1)
>             parentTreeElement.expand();
>         return breakpointTreeElement;
>@@ -735,14 +759,13 @@ WI.DebuggerSidebarPanel = class DebuggerSidebarPanel extends WI.NavigationSideba
>         // 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)
>+        if (!debuggerTreeElement[WI.BreakpointTreeElement.DeletedViaKeyboardShortcutSymbol])
>             debuggerTreeElement.deselect();
> 
>         let parentTreeElement = debuggerTreeElement.parent;
>         parentTreeElement.removeChild(debuggerTreeElement);
> 
>-        console.assert(parentTreeElement.parent === this._breakpointsContentTreeOutline);
>-        if (parentTreeElement.children.length)
>+        if (parentTreeElement.children.length || parentTreeElement instanceof WI.TreeOutline)
>             return;
> 
>         parentTreeElement.treeOutline.removeChild(parentTreeElement);
>@@ -791,11 +814,8 @@ WI.DebuggerSidebarPanel = class DebuggerSidebarPanel extends WI.NavigationSideba
> 
>     _removeAllBreakpoints(breakpoints)
>     {
>-        for (var i = 0; i < breakpoints.length; ++i) {
>-            var breakpoint = breakpoints[i];
>-            if (WI.debuggerManager.isBreakpointRemovable(breakpoint))
>-                WI.debuggerManager.removeBreakpoint(breakpoint);
>-        }
>+        for (let breakpoint of breakpoints)
>+            WI.debuggerManager.removeBreakpoint(breakpoint);
>     }
> 
>     _toggleAllBreakpoints(breakpoints, disabled)
>@@ -811,7 +831,7 @@ WI.DebuggerSidebarPanel = class DebuggerSidebarPanel extends WI.NavigationSideba
>         if (!(treeElement instanceof WI.ResourceTreeElement) && !(treeElement instanceof WI.ScriptTreeElement))
>             return false;
> 
>-        var wasTopResourceTreeElement = treeElement.previousSibling === this._assertionsBreakpointTreeElement || treeElement.previousSibling === this._allUncaughtExceptionsBreakpointTreeElement;
>+        var wasTopResourceTreeElement = treeElement.previousSibling === this._assertionFailuresBreakpointTreeElement || treeElement.previousSibling === this._uncaughtExceptionsBreakpointTreeElement;
>         var nextSibling = treeElement.nextSibling;
> 
>         var breakpoints = this._breakpointsBeneathTreeElement(treeElement);
>@@ -904,16 +924,9 @@ WI.DebuggerSidebarPanel = class DebuggerSidebarPanel extends WI.NavigationSideba
> 
>     _compareTopLevelTreeElements(a, b)
>     {
>-        function isSpecialBreakpoint(treeElement)
>-        {
>-            return treeElement.representedObject === WI.debuggerManager.allExceptionsBreakpoint
>-                || treeElement.representedObject === WI.debuggerManager.allUncaughtExceptionsBreakpoint
>-                || treeElement.representedObject === WI.debuggerManager.assertionsBreakpoint;
>-        }
>-
>-        if (isSpecialBreakpoint(a))
>+        if (WI.debuggerManager.isBreakpointSpecial(a.representedObject))
>             return -1;
>-        if (isSpecialBreakpoint(b))
>+        if (WI.debuggerManager.isBreakpointSpecial(b.representedObject))
>             return 1;
> 
>         return a.mainTitle.extendedLocaleCompare(b.mainTitle);
>@@ -996,7 +1009,10 @@ WI.DebuggerSidebarPanel = class DebuggerSidebarPanel extends WI.NavigationSideba
>                 this._pauseReasonTreeOutline.addEventListener(WI.TreeOutline.Event.SelectionDidChange, this._treeSelectionDidChange, this);
> 
>                 let breakpoint = WI.debuggerManager.breakpointForIdentifier(pauseData.breakpointId);
>-                let breakpointTreeElement = new WI.BreakpointTreeElement(breakpoint, WI.DebuggerSidebarPanel.PausedBreakpointIconStyleClassName, WI.UIString("Triggered Breakpoint"));
>+                let breakpointTreeElement = new WI.BreakpointTreeElement(breakpoint, {
>+                    className: WI.DebuggerSidebarPanel.PausedBreakpointIconStyleClassName,
>+                    title: WI.UIString("Triggered Breakpoint"),
>+                });
>                 let breakpointDetailsSection = new WI.DetailsSectionRow;
>                 this._pauseReasonTreeOutline.appendChild(breakpointTreeElement);
>                 breakpointDetailsSection.element.appendChild(this._pauseReasonTreeOutline.element);
>@@ -1042,7 +1058,10 @@ WI.DebuggerSidebarPanel = class DebuggerSidebarPanel extends WI.NavigationSideba
>                 this._pauseReasonTreeOutline = this.createContentTreeOutline(suppressFiltering);
> 
>                 let type = WI.DOMBreakpointTreeElement.displayNameForType(domBreakpoint.type);
>-                let domBreakpointTreeElement = new WI.DOMBreakpointTreeElement(domBreakpoint, WI.DebuggerSidebarPanel.PausedBreakpointIconStyleClassName, type);
>+                let domBreakpointTreeElement = new WI.DOMBreakpointTreeElement(domBreakpoint, {
>+                    className: WI.DebuggerSidebarPanel.PausedBreakpointIconStyleClassName,
>+                    title: type,
>+                });
>                 let domBreakpointRow = new WI.DetailsSectionRow;
>                 this._pauseReasonTreeOutline.appendChild(domBreakpointTreeElement);
>                 domBreakpointRow.element.appendChild(this._pauseReasonTreeOutline.element);
>@@ -1170,7 +1189,10 @@ WI.DebuggerSidebarPanel = class DebuggerSidebarPanel extends WI.NavigationSideba
> 
>                     this._pauseReasonTreeOutline = this.createContentTreeOutline(true);
> 
>-                    let xhrBreakpointTreeElement = new WI.XHRBreakpointTreeElement(xhrBreakpoint, WI.DebuggerSidebarPanel.PausedBreakpointIconStyleClassName, WI.UIString("Triggered XHR Breakpoint"));
>+                    let xhrBreakpointTreeElement = new WI.XHRBreakpointTreeElement(xhrBreakpoint, {
>+                        className: WI.DebuggerSidebarPanel.PausedBreakpointIconStyleClassName,
>+                        title: WI.UIString("Triggered XHR Breakpoint"),
>+                    });
>                     let xhrBreakpointRow = new WI.DetailsSectionRow;
>                     this._pauseReasonTreeOutline.appendChild(xhrBreakpointTreeElement);
>                     xhrBreakpointRow.element.appendChild(this._pauseReasonTreeOutline.element);
>@@ -1271,48 +1293,97 @@ WI.DebuggerSidebarPanel = class DebuggerSidebarPanel extends WI.NavigationSideba
>         issueTreeElements.forEach((treeElement) => treeElement.parent.removeChild(treeElement));
>     }
> 
>-    _domBreakpointAddedOrRemoved(event)
>+    _handleBreakpointElementAddedOrRemoved(event)
>     {
>-        if (!this._domBreakpointsContentTreeOutline.children.length) {
>-            this._domBreakpointsRow.showEmptyMessage();
>-            return;
>-        }
>+        let treeElement = event.data.element;
>+
>+        let setting = null;
>+        if (treeElement.representedObject === WI.debuggerManager.allExceptionsBreakpoint)
>+            setting = WI.settings.showAllExceptionsBreakpoint;
>+        else if (treeElement.representedObject === WI.debuggerManager.uncaughtExceptionsBreakpoint)
>+            setting = WI.settings.showUncaughtExceptionsBreakpoint;
>+        else if (treeElement.representedObject === WI.debuggerManager.assertionFailuresBreakpoint)
>+            setting = WI.settings.showAssertionFailuresBreakpoint;
>+
>+        if (setting)
>+            setting.value = !!treeElement.parent;
>+    }
> 
>-        if (this._domBreakpointsContentTreeOutline.element.parentNode)
>-            return;
>+    _handleCreateBreakpointClicked(event)
>+    {
>+        let contextMenu = WI.ContextMenu.createFromEvent(event);
> 
>-        this._domBreakpointsRow.hideEmptyMessage();
>-        this._domBreakpointsRow.element.append(this._domBreakpointsContentTreeOutline.element);
>+        let allExceptionsBreakpointShown = WI.settings.showAllExceptionsBreakpoint.value;
> 
>-        this._domBreakpointsSection.collapsed = false;
>-    }
>+        contextMenu.appendCheckboxItem(WI.UIString("All Exceptions"), () => {
>+            if (allExceptionsBreakpointShown)
>+                WI.debuggerManager.removeBreakpoint(WI.debuggerManager.allExceptionsBreakpoint);
>+            else {
>+                WI.debuggerManager.allExceptionsBreakpoint.disabled = false;
>+                WI.debuggerManager.addBreakpoint(WI.debuggerManager.allExceptionsBreakpoint);
>+            }
>+        }, allExceptionsBreakpointShown);
> 
>-    _eventBreakpointAddedOrRemoved(event)
>-    {
>-        if (!this._eventBreakpointsContentTreeOutline.children.length) {
>-            this._eventBreakpointsRow.showEmptyMessage();
>-            return;
>+        let uncaughtExceptionsBreakpointShown = WI.settings.showUncaughtExceptionsBreakpoint.value;
>+
>+        contextMenu.appendCheckboxItem(WI.UIString("Uncaught Exceptions"), () => {
>+            if (uncaughtExceptionsBreakpointShown)
>+                WI.debuggerManager.removeBreakpoint(WI.debuggerManager.uncaughtExceptionsBreakpoint);
>+            else {
>+                WI.debuggerManager.uncaughtExceptionsBreakpoint.disabled = false;
>+                WI.debuggerManager.addBreakpoint(WI.debuggerManager.uncaughtExceptionsBreakpoint);
>+            }
>+        }, uncaughtExceptionsBreakpointShown);
>+
>+        // COMPATIBILITY (iOS 10): DebuggerAgent.setPauseOnAssertions did not exist yet.
>+        if (DebuggerAgent.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 (this._eventBreakpointsContentTreeOutline.element.parentNode)
>-            return;
>+        if (WI.domDebuggerManager.supported) {
> 
>-        this._eventBreakpointsRow.hideEmptyMessage();
>-        this._eventBreakpointsRow.element.append(this._eventBreakpointsContentTreeOutline.element);
>+            contextMenu.appendSeparator();
> 
>-        this._eventBreakpointsSection.collapsed = false;
>-    }
>+            contextMenu.appendItem(WI.UIString("Event Breakpoint\u2026"), () => {
>+                this._eventBreakpointsSection.collapsed = false;
>+                this._eventBreakpointsSection.element.hidden = false;
> 
>-    _addEventBreakpointButtonClicked(event)
>-    {
>-        let popover = new WI.EventBreakpointPopover(this);
>-        popover.show(event.target.element, [WI.RectEdge.MAX_Y, WI.RectEdge.MIN_Y, WI.RectEdge.MAX_X]);
>-    }
>+                let popover = new WI.EventBreakpointPopover(this);
>+                popover.show(this._eventBreakpointsSection.titleElement, [WI.RectEdge.MAX_Y, WI.RectEdge.MIN_Y, WI.RectEdge.MAX_X]);
>+            });
> 
>-    _addXHRBreakpointButtonClicked(event)
>-    {
>-        let popover = new WI.XHRBreakpointPopover(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"), () => {
>+                this._xhrBreakpointsSection.collapsed = false;
>+                this._xhrBreakpointsSection.element.hidden = false;
>+
>+                let popover = new WI.XHRBreakpointPopover(this);
>+                popover.show(this._xhrBreakpointsSection.titleElement, [WI.RectEdge.MAX_Y, WI.RectEdge.MIN_Y, WI.RectEdge.MAX_X]);
>+            });
>+        }
>+
>+        contextMenu.show();
>     }
> 
>     // Popover delegate
>@@ -1323,13 +1394,17 @@ WI.DebuggerSidebarPanel = class DebuggerSidebarPanel extends WI.NavigationSideba
>             let breakpoint = popover.breakpoint;
>             if (breakpoint)
>                 WI.domDebuggerManager.addEventBreakpoint(breakpoint);
>+            else
>+                this._eventBreakpointsSection.showIfNotEmpty();
>             return;
>         }
> 
>-        if (popover instanceof WI.XHRBreakpointPopover && popover.result === WI.InputPopover.Result.Committed) {
>-            let url = popover.value;
>-            if (url)
>-                WI.domDebuggerManager.addXHRBreakpoint(new WI.XHRBreakpoint(popover.type, url));
>+        if (popover instanceof WI.XHRBreakpointPopover) {
>+            let breakpoint = popover.breakpoint;
>+            if (breakpoint)
>+                WI.domDebuggerManager.addXHRBreakpoint(breakpoint);
>+            else
>+                this._xhrBreakpointsSection.showIfNotEmpty();
>             return;
>         }
>     }
>@@ -1341,6 +1416,6 @@ WI.DebuggerSidebarPanel.AssertionIconStyleClassName = "breakpoint-assertion-icon
> WI.DebuggerSidebarPanel.PausedBreakpointIconStyleClassName = "breakpoint-paused-icon";
> 
> WI.DebuggerSidebarPanel.SelectedAllExceptionsCookieKey = "debugger-sidebar-panel-all-exceptions-breakpoint";
>-WI.DebuggerSidebarPanel.SelectedAllUncaughtExceptionsCookieKey = "debugger-sidebar-panel-all-uncaught-exceptions-breakpoint";
>-WI.DebuggerSidebarPanel.SelectedAssertionsCookieKey = "debugger-sidebar-panel-assertions-breakpoint";
>+WI.DebuggerSidebarPanel.SelectedUncaughtExceptionsCookieKey = "debugger-sidebar-panel-uncaught-exceptions-breakpoint";
>+WI.DebuggerSidebarPanel.SelectedAssertionFailuresCookieKey = "debugger-sidebar-panel-assertion-failures-breakpoint";
> WI.DebuggerSidebarPanel.SelectedAllRequestsCookieKey = "debugger-sidebar-panel-all-requests-breakpoint";
>diff --git a/Source/WebInspectorUI/UserInterface/Views/EventBreakpointTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/EventBreakpointTreeElement.js
>index a2c0b4a3a0d9630cebb8e4a096ccad55145c0722..f633e57cd2f0397d319cdaa1311a7bb6a562d028 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/EventBreakpointTreeElement.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/EventBreakpointTreeElement.js
>@@ -108,15 +108,14 @@ WI.EventBreakpointTreeElement = class EventBreakpointTreeElement extends WI.Gene
>             contextMenu.appendItem(label, this._toggleBreakpoint.bind(this));
>         }
> 
>-        if (WI.domDebuggerManager.isBreakpointRemovable(breakpoint)) {
>-            contextMenu.appendSeparator();
>-            contextMenu.appendItem(WI.UIString("Delete Breakpoint"), () => {
>-                if (breakpoint.eventListener)
>-                    WI.domTreeManager.removeBreakpointForEventListener(breakpoint.eventListener);
>-                else
>-                    WI.domDebuggerManager.removeEventBreakpoint(breakpoint);
>-            });
>-        }
>+        contextMenu.appendSeparator();
>+
>+        contextMenu.appendItem(WI.UIString("Delete Breakpoint"), () => {
>+            if (breakpoint.eventListener)
>+                WI.domTreeManager.removeBreakpointForEventListener(breakpoint.eventListener);
>+            else
>+                WI.domDebuggerManager.removeEventBreakpoint(breakpoint);
>+        });
>     }
> 
>     // Private
>diff --git a/Source/WebInspectorUI/UserInterface/Views/Main.css b/Source/WebInspectorUI/UserInterface/Views/Main.css
>index fee9626164036d0815984713cc651aaf94f8c131..73a33eee27d614e36e1e5efed4b99e4b64f72b2e 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/Main.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/Main.css
>@@ -189,12 +189,12 @@ body.docked:matches(.right, .left) #navigation-sidebar.collapsed > .resizer {
>     font-size: var(--message-text-view-font-size);
> }
> 
>-.message-text-view .navigation-item-help {
>+.navigation-item-help {
>     display: block;
>     line-height: 22px;
> }
> 
>-.message-text-view .navigation-item-help .navigation-bar {
>+.navigation-item-help .navigation-bar {
>     display: inline-flex;
>     height: 20px;
>     padding: 0 4px;
>@@ -202,7 +202,7 @@ body.docked:matches(.right, .left) #navigation-sidebar.collapsed > .resizer {
>     vertical-align: middle;
> }
> 
>-.message-text-view .navigation-item-help .navigation-bar > .item {
>+.navigation-item-help .navigation-bar > .item {
>     height: 100%;
>     padding: 0 4px;
>     font-size: 11px;
>diff --git a/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.css b/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.css
>index be454c107a8b4419abbed38d1163b7e38cd7951a..bcc8e3215550afa8ef1e576b0d7306bf089f5eee 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.css
>@@ -27,13 +27,19 @@
>     bottom: var(--navigation-bar-height);
> }
> 
>-.sidebar > .panel.navigation > .filter-bar {
>+.sidebar > .panel.navigation > .options {
>+    display: flex;
>+    align-items: center;
>     position: absolute;
>     bottom: 0;
>     left: 0;
>     right: 0;
> }
> 
>+.sidebar > .panel.navigation > .options > * {
>+    width: 100%;
>+}
>+
> .sidebar > .panel.navigation > .overflow-shadow {
>     position: absolute;
>     bottom: calc(var(--console-prompt-min-height) - 1px);
>diff --git a/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.js b/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.js
>index 3ab1dbaf74a6675b8e690957df7ac8cf5a3729f8..b1cd80525d9f631ad9619d0d3c7cf1a898cb7e8f 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.js
>@@ -36,9 +36,12 @@ WI.NavigationSidebarPanel = class NavigationSidebarPanel extends WI.SidebarPanel
>         this._contentTreeOutlineGroup = new WI.TreeOutlineGroup;
>         this._contentTreeOutline = this.createContentTreeOutline();
> 
>+        this._optionsContainer = this.element.appendChild(document.createElement("div"));
>+        this._optionsContainer.classList.add("options");
>+
>         this._filterBar = new WI.FilterBar;
>         this._filterBar.addEventListener(WI.FilterBar.Event.FilterDidChange, this._filterDidChange, this);
>-        this.element.appendChild(this._filterBar.element);
>+        this._optionsContainer.appendChild(this._filterBar.element);
> 
>         this._bottomOverflowShadowElement = document.createElement("div");
>         this._bottomOverflowShadowElement.className = WI.NavigationSidebarPanel.OverflowShadowElementStyleClassName;
>@@ -426,6 +429,8 @@ WI.NavigationSidebarPanel = class NavigationSidebarPanel extends WI.SidebarPanel
> 
>     // Protected
> 
>+    get optionsContainer() { return this._optionsContainer; }
>+
>     pruneStaleResourceTreeElements()
>     {
>         if (this._checkForStaleResourcesTimeoutIdentifier) {
>diff --git a/Source/WebInspectorUI/UserInterface/Views/SourceCodeTextEditor.js b/Source/WebInspectorUI/UserInterface/Views/SourceCodeTextEditor.js
>index 83d0ff1b590d5b6a48b28883b33a74e0cb19ee6a..5f2b6aa0275c15874a33c1abb037a23e03e1e1fd 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/SourceCodeTextEditor.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/SourceCodeTextEditor.js
>@@ -1261,10 +1261,8 @@ WI.SourceCodeTextEditor = class SourceCodeTextEditor extends WI.TextEditor
> 
>         // Multiple breakpoints.
>         let removeBreakpoints = () => {
>-            for (let breakpoint of breakpoints) {
>-                if (WI.debuggerManager.isBreakpointRemovable(breakpoint))
>-                    WI.debuggerManager.removeBreakpoint(breakpoint);
>-            }
>+            for (let breakpoint of breakpoints)
>+                WI.debuggerManager.removeBreakpoint(breakpoint);
>         };
> 
>         let shouldDisable = breakpoints.some((breakpoint) => !breakpoint.disabled);
>diff --git a/Source/WebInspectorUI/UserInterface/Views/XHRBreakpointPopover.js b/Source/WebInspectorUI/UserInterface/Views/XHRBreakpointPopover.js
>index 06f4f82ff27494c7a45cea881a73dfb61d78cfad..bbd0bc9ceac07ec10074a3fe49f1e7ba1353a1b1 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/XHRBreakpointPopover.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/XHRBreakpointPopover.js
>@@ -29,9 +29,7 @@ WI.XHRBreakpointPopover = class XHRBreakpointPopover extends WI.Popover
>     {
>         super(delegate);
> 
>-        this._result = WI.InputPopover.Result.None;
>-        this._type = WI.XHRBreakpoint.Type.Text;
>-        this._value = null;
>+        this._breakpoint = null;
> 
>         this._codeMirror = null;
>         this._targetElement = null;
>@@ -42,9 +40,7 @@ WI.XHRBreakpointPopover = class XHRBreakpointPopover extends WI.Popover
> 
>     // Public
> 
>-    get result() { return this._result; }
>-    get type() { return this._type; }
>-    get value() { return this._value; }
>+    get breakpoint() { return this._breakpoint; }
> 
>     show(targetElement, preferredEdges)
>     {
>@@ -61,27 +57,24 @@ WI.XHRBreakpointPopover = class XHRBreakpointPopover extends WI.Popover
>         let editorWrapper = document.createElement("div");
>         editorWrapper.classList.add("editor-wrapper");
> 
>-        let selectElement = document.createElement("select");
>+        this._typeSelectElement = document.createElement("select");
> 
>-        function addOption(text, value)
>-        {
>-            let optionElement = document.createElement("option");
>+        let createOption = (text, value) => {
>+            let optionElement = this._typeSelectElement.appendChild(document.createElement("option"));
>             optionElement.textContent = text;
>             optionElement.value = value;
>-            selectElement.append(optionElement);
>-        }
>+        };
> 
>-        addOption(WI.UIString("Containing"), WI.XHRBreakpoint.Type.Text);
>-        addOption(WI.UIString("Matching"), WI.XHRBreakpoint.Type.RegularExpression);
>+        createOption(WI.UIString("Containing"), WI.XHRBreakpoint.Type.Text);
>+        createOption(WI.UIString("Matching"), WI.XHRBreakpoint.Type.RegularExpression);
> 
>-        selectElement.value = this._type;
>-        selectElement.addEventListener("change", (event) => {
>-            this._type = event.target.value;
>+        this._typeSelectElement.value = WI.XHRBreakpoint.Type.Text;
>+        this._typeSelectElement.addEventListener("change", (event) => {
>             this._updateEditor();
>             this._codeMirror.focus();
>         });
> 
>-        editorWrapper.append(selectElement, this._createEditor());
>+        editorWrapper.append(this._typeSelectElement, this._createEditor());
>         contentElement.append(label, editorWrapper);
> 
>         this.content = contentElement;
>@@ -89,6 +82,16 @@ WI.XHRBreakpointPopover = class XHRBreakpointPopover extends WI.Popover
>         this._presentOverTargetElement();
>     }
> 
>+    dismiss()
>+    {
>+        let type = this._typeSelectElement.value;
>+        let url = this._codeMirror.getValue();
>+        if (type && url)
>+            this._breakpoint = new WI.XHRBreakpoint(type, url);
>+
>+        super.dismiss();
>+    }
>+
>     // Private
> 
>     _createEditor()
>@@ -105,8 +108,9 @@ WI.XHRBreakpointPopover = class XHRBreakpointPopover extends WI.Popover
> 
>         this._codeMirror.addKeyMap({
>             "Enter": () => {
>-                this._result = WI.InputPopover.Result.Committed;
>-                this._value = this._codeMirror.getValue().trim();
>+                this.dismiss();
>+            },
>+            "Esc": () => {
>                 this.dismiss();
>             },
>         });
>@@ -120,7 +124,7 @@ WI.XHRBreakpointPopover = class XHRBreakpointPopover extends WI.Popover
>     {
>         let placeholder;
>         let mimeType;
>-        if (this._type === WI.XHRBreakpoint.Type.Text) {
>+        if (this._typeSelectElement.value === WI.XHRBreakpoint.Type.Text) {
>             placeholder = WI.UIString("Text");
>             mimeType = "text/plain";
>         } else {
>diff --git a/Source/WebInspectorUI/UserInterface/Views/XHRBreakpointTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/XHRBreakpointTreeElement.js
>index f06c031a9898959437b5333a71a291488f798d61..3921b0d961e871c2d63ef8ef4505434343dc98cc 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/XHRBreakpointTreeElement.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/XHRBreakpointTreeElement.js
>@@ -25,7 +25,7 @@
> 
> WI.XHRBreakpointTreeElement = class XHRBreakpointTreeElement extends WI.GeneralTreeElement
> {
>-    constructor(breakpoint, className, title)
>+    constructor(breakpoint, {className, title} = {})
>     {
>         console.assert(breakpoint instanceof WI.XHRBreakpoint);
> 
>@@ -105,12 +105,11 @@ WI.XHRBreakpointTreeElement = class XHRBreakpointTreeElement extends WI.GeneralT
>         let label = breakpoint.disabled ? WI.UIString("Enable Breakpoint") : WI.UIString("Disable Breakpoint");
>         contextMenu.appendItem(label, this._toggleBreakpoint.bind(this));
> 
>-        if (WI.domDebuggerManager.isBreakpointRemovable(breakpoint)) {
>-            contextMenu.appendSeparator();
>-            contextMenu.appendItem(WI.UIString("Delete Breakpoint"), function() {
>-                WI.domDebuggerManager.removeXHRBreakpoint(breakpoint);
>-            });
>-        }
>+        contextMenu.appendSeparator();
>+
>+        contextMenu.appendItem(WI.UIString("Delete Breakpoint"), () => {
>+            WI.domDebuggerManager.removeXHRBreakpoint(breakpoint);
>+        });
>     }
> 
>     // Private

Actions: View | Formatted Diff | Diff

Attachments on bug 182406: 348395 | 348396 | 348469 | 348470 | 348475 | 348476 | 348480 | 348481 | 350475 | 350476 | 350840 | 350841 | 350850 | 350945 | 350946