Attachment 348395 Details for Bug 182406 – Patch

[patch] Patch

bug-182406-20180829003150.patch (text/plain), 61.61 KB, created by Devin Rousso on 2018-08-29 00:31:51 PDT

(hide)

Description:

Filename:

MIME Type:

Creator: Devin Rousso

Created: 2018-08-29 00:31:51 PDT

Size: 61.61 KB

patch

obsolete

>diff --git a/Source/WebInspectorUI/ChangeLog b/Source/WebInspectorUI/ChangeLog
>index aca81e50605fd17f184bba6c95518eab29c53ad0..4647187c8273197ea684d87279496deb47c45481 100644
>--- a/Source/WebInspectorUI/ChangeLog
>+++ b/Source/WebInspectorUI/ChangeLog
>@@ -1,3 +1,108 @@
>+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/Views/DebuggerSidebarPanel.js:
>+        (WI.DebuggerSidebarPanel):
>+        (WI.DebuggerSidebarPanel.prototype.closed):
>+        (WI.DebuggerSidebarPanel.prototype._removeAllBreakpoints):
>+        (WI.DebuggerSidebarPanel.prototype._updatePauseReasonSection):
>+        (WI.DebuggerSidebarPanel.prototype._breakpointAddedOrRemoved): Added.
>+        (WI.DebuggerSidebarPanel.prototype._domBreakpointAddedOrRemoved):
>+        (WI.DebuggerSidebarPanel.prototype._eventBreakpointAddedOrRemoved):
>+        (WI.DebuggerSidebarPanel.prototype._xhrBreakpointAddedOrRemoved):
>+        (WI.DebuggerSidebarPanel.prototype._addBreakpointButtonClicked): Added.
>+        (WI.DebuggerSidebarPanel.prototype._createSpecialTreeElementForBreakpoint): Added.
>+        (WI.DebuggerSidebarPanel.prototype.willDismissPopover):
>+        (WI.DebuggerSidebarPanel.showResourcesWithIssuesOnlyFilterFunction): 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):
>+        (WI.BreakpointTreeElement.prototype.populateContextMenu):
>+        * UserInterface/Views/DOMBreakpointTreeElement.js:
>+        (WI.DOMBreakpointTreeElement):
>+        (WI.DOMBreakpointTreeElement.prototype.ondelete):
>+        (WI.DOMBreakpointTreeElement.prototype.populateContextMenu):
>+        (WI.DOMBreakpointTreeElement.prototype._removeBreakpoint): Added.
>+        * UserInterface/Views/XHRBreakpointTreeElement.js:
>+        (WI.XHRBreakpointTreeElement):
>+        (WI.XHRBreakpointTreeElement.prototype.ondelete):
>+        (WI.XHRBreakpointTreeElement.prototype.populateContextMenu):
>+        (WI.XHRBreakpointTreeElement.prototype._removeBreakpoint): Added.
>+        * UserInterface/Views/EventBreakpointTreeElement.js:
>+        (WI.EventBreakpointTreeElement.prototype.ondelete):
>+        (WI.EventBreakpointTreeElement.prototype.populateContextMenu):
>+        (WI.EventBreakpointTreeElement.prototype._removeBreakpoint): Added.
>+        * 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 > .filter-bar): Deleted.
>+        * UserInterface/Views/DebuggerSidebarPanel.css:
>+        (.sidebar > .panel.navigation.debugger > .options > .add-breakpoint): Added.
>+        (body[dir=ltr]  .sidebar > .panel.navigation.debugger > .options > .add-breakpoint): Added.
>+        (body[dir=rtl]  .sidebar > .panel.navigation.debugger > .options > .add-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/DOMDebuggerManager.js:
>+        (WI.DOMDebuggerManager.prototype.removeDOMBreakpoint):
>+        (WI.DOMDebuggerManager.prototype.removeEventBreakpoint):
>+        (WI.DOMDebuggerManager.prototype.removeXHRBreakpoint):
>+        Add checks to ensure that non-removable breakpoints are not deleted.
>+
>+        * 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`.
>+
>+        * UserInterface/Controllers/EventBreakpointTreeController.js:
>+        (WI.EventBreakpointTreeController.prototype.disconnect):
>+        * UserInterface/Controllers/XHRBreakpointTreeController.js:
>+        (WI.XHRBreakpointTreeController):
>+        (WI.XHRBreakpointTreeController.prototype.disconnect):
>+        Drive-by: remove event listeners when disconnecting.
>+
> 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..e88210629df39fbf98d723020267cb2a94ae3ff0 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..."] = "Event Breakpoint...";
> localizedStrings["Event Breakpoints"] = "Event Breakpoints";
> localizedStrings["Event Dispatched"] = "Event Dispatched";
> localizedStrings["Event Listeners"] = "Event Listeners";
>@@ -670,7 +670,6 @@ localizedStrings["Off"] = "Off";
> localizedStrings["Offset"] = "Offset";
> localizedStrings["Once"] = "Once";
> localizedStrings["Online"] = "Online";
>-localizedStrings["Only show resources with issues"] = "Only show resources with issues";
> localizedStrings["Only show visual actions"] = "Only show visual actions";
> localizedStrings["Opacity"] = "Opacity";
> localizedStrings["Open"] = "Open";
>@@ -882,7 +881,6 @@ localizedStrings["Show Rulers"] = "Show Rulers";
> localizedStrings["Show Scope Chain on pause"] = "Show Scope Chain on pause";
> localizedStrings["Show Source"] = "Show Source";
> localizedStrings["Show all actions"] = "Show all actions";
>-localizedStrings["Show all resources"] = "Show all resources";
> localizedStrings["Show compositing borders"] = "Show compositing borders";
> localizedStrings["Show errors logged to the Console"] = "Show errors logged to the Console";
> localizedStrings["Show hidden tabs"] = "Show hidden tabs";
>@@ -1077,6 +1075,7 @@ localizedStrings["X"] = "X";
> localizedStrings["X1"] = "X1";
> localizedStrings["X2"] = "X2";
> localizedStrings["XHR"] = "XHR";
>+localizedStrings["XHR Breakpoint..."] = "XHR Breakpoint...";
> localizedStrings["XHR Breakpoints"] = "XHR Breakpoints";
> localizedStrings["XHRs"] = "XHRs";
> localizedStrings["XPath"] = "XPath";
>diff --git a/Source/WebInspectorUI/UserInterface/Controllers/BreakpointPopoverController.js b/Source/WebInspectorUI/UserInterface/Controllers/BreakpointPopoverController.js
>index a86585e36d3b1fc4f6514871ea8817642cf4dd04..9824b8d20b7f0f954ba6105e133d39e2f2ed9c11 100644
>--- a/Source/WebInspectorUI/UserInterface/Controllers/BreakpointPopoverController.js
>+++ b/Source/WebInspectorUI/UserInterface/Controllers/BreakpointPopoverController.js
>@@ -36,7 +36,7 @@ WI.BreakpointPopoverController = class BreakpointPopoverController extends WI.Ob
> 
>     // Public
> 
>-    appendContextMenuItems(contextMenu, breakpoint, breakpointDisplayElement)
>+    appendContextMenuItems(contextMenu, breakpoint, breakpointDisplayElement, breakpointTreeElement)
>     {
>         console.assert(document.body.contains(breakpointDisplayElement), "Breakpoint popover display element must be in the DOM.");
> 
>@@ -55,7 +55,12 @@ WI.BreakpointPopoverController = class BreakpointPopoverController extends WI.Ob
>         };
> 
>         const removeBreakpoint = () => {
>-            WI.debuggerManager.removeBreakpoint(breakpoint);
>+            if (WI.debuggerManager.isBreakpointRemovable(breakpoint))
>+                WI.debuggerManager.removeBreakpoint(breakpoint);
>+            else if (breakpointTreeElement && breakpointTreeElement.parent) {
>+                breakpoint.disabled = true;
>+                breakpointTreeElement.parent.removeChild(breakpointTreeElement);
>+            }
>         };
> 
>         const toggleBreakpoint = () => {
>@@ -88,10 +93,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/DOMDebuggerManager.js b/Source/WebInspectorUI/UserInterface/Controllers/DOMDebuggerManager.js
>index 7dc12ee5b8420e4df5d5c7706f47066809a75764..249eeeee5b37f74f152bf025c046d6be9eac7b34 100644
>--- a/Source/WebInspectorUI/UserInterface/Controllers/DOMDebuggerManager.js
>+++ b/Source/WebInspectorUI/UserInterface/Controllers/DOMDebuggerManager.js
>@@ -167,6 +167,10 @@ WI.DOMDebuggerManager = class DOMDebuggerManager extends WI.Object
>         if (!breakpoint)
>             return;
> 
>+        console.assert(this.isBreakpointRemovable(breakpoint));
>+        if (!this.isBreakpointRemovable(breakpoint))
>+            return;
>+
>         let nodeIdentifier = breakpoint.domNodeIdentifier;
>         console.assert(nodeIdentifier, "Cannot remove unresolved DOM breakpoint.");
>         if (!nodeIdentifier)
>@@ -228,6 +232,10 @@ WI.DOMDebuggerManager = class DOMDebuggerManager extends WI.Object
>         if (!breakpoint)
>             return;
> 
>+        console.assert(this.isBreakpointRemovable(breakpoint));
>+        if (!this.isBreakpointRemovable(breakpoint))
>+            return;
>+
>         if (!this._eventBreakpoints.includes(breakpoint))
>             return;
> 
>@@ -286,6 +294,10 @@ WI.DOMDebuggerManager = class DOMDebuggerManager extends WI.Object
>         if (!breakpoint)
>             return;
> 
>+        console.assert(this.isBreakpointRemovable(breakpoint));
>+        if (!this.isBreakpointRemovable(breakpoint))
>+            return;
>+
>         if (!this._xhrBreakpoints.includes(breakpoint))
>             return;
> 
>diff --git a/Source/WebInspectorUI/UserInterface/Controllers/EventBreakpointTreeController.js b/Source/WebInspectorUI/UserInterface/Controllers/EventBreakpointTreeController.js
>index 10d32296d307cc331c5f7bf5f3d20148c6f11778..6f9b77d47557c941bab27b6009dde9c7f4ae3307 100644
>--- a/Source/WebInspectorUI/UserInterface/Controllers/EventBreakpointTreeController.js
>+++ b/Source/WebInspectorUI/UserInterface/Controllers/EventBreakpointTreeController.js
>@@ -50,6 +50,11 @@ WI.EventBreakpointTreeController = class EventBreakpointTreeController
>         treeElement.revealAndSelect();
>     }
> 
>+    disconnect()
>+    {
>+        WI.domDebuggerManager.removeEventListener(null, null, this);
>+    }
>+
>     // Private
> 
>     _eventBreakpointAdded(event)
>diff --git a/Source/WebInspectorUI/UserInterface/Controllers/XHRBreakpointTreeController.js b/Source/WebInspectorUI/UserInterface/Controllers/XHRBreakpointTreeController.js
>index 65785635cb215bed7d2d703340d6a9862b4c9f08..ecb3a163c95afd71e516b6d8b7812d9bbd4a5b6d 100644
>--- a/Source/WebInspectorUI/UserInterface/Controllers/XHRBreakpointTreeController.js
>+++ b/Source/WebInspectorUI/UserInterface/Controllers/XHRBreakpointTreeController.js
>@@ -23,21 +23,15 @@
>  * THE POSSIBILITY OF SUCH DAMAGE.
>  */
> 
>-WI.XHRBreakpointTreeController = class XHRBreakpointsTreeController extends WI.Object
>+WI.XHRBreakpointTreeController = class XHRBreakpointsTreeController
> {
>     constructor(treeOutline)
>     {
>-        super();
>-
>         this._treeOutline = treeOutline;
> 
>         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);
>     }
>@@ -55,7 +49,6 @@ WI.XHRBreakpointTreeController = class XHRBreakpointsTreeController extends WI.O
> 
>     disconnect()
>     {
>-        WI.Frame.removeEventListener(null, null, this);
>         WI.domDebuggerManager.removeEventListener(null, null, this);
>     }
> 
>diff --git a/Source/WebInspectorUI/UserInterface/Views/BreakpointTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/BreakpointTreeElement.js
>index 9edfad60388718d5339dfa4cf8f5d056293580c4..750fd746bb0cf9e5551ac9005f8bee66c627d8ec 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);
> 
>@@ -79,15 +79,17 @@ 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;
>-
>-        WI.debuggerManager.removeBreakpoint(this._breakpoint);
>+        if (WI.debuggerManager.isBreakpointRemovable(this._breakpoint)) {
>+            // 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;
>+
>+            WI.debuggerManager.removeBreakpoint(this._breakpoint);
>+        } else if (this.parent) {
>+            this._breakpoint.disabled = true;
>+            this.parent.removeChild(this);
>+        }
>         return true;
>     }
> 
>@@ -126,7 +128,7 @@ WI.BreakpointTreeElement = class BreakpointTreeElement extends WI.GeneralTreeEle
> 
>     populateContextMenu(contextMenu, event)
>     {
>-        WI.breakpointPopoverController.appendContextMenuItems(contextMenu, this._breakpoint, this._statusImageElement);
>+        WI.breakpointPopoverController.appendContextMenuItems(contextMenu, this._breakpoint, this._statusImageElement, this);
> 
>         super.populateContextMenu(contextMenu, event);
>     }
>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..029231024bb8a357719e3bceadf71ac90379407b 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);
> 
>@@ -94,7 +94,7 @@ WI.DOMBreakpointTreeElement = class DOMBreakpointTreeElement extends WI.GeneralT
> 
>     ondelete()
>     {
>-        WI.domDebuggerManager.removeDOMBreakpoint(this.representedObject);
>+        this._removeBreakpoint();
>         return true;
>     }
> 
>@@ -112,13 +112,12 @@ WI.DOMBreakpointTreeElement = class DOMBreakpointTreeElement extends WI.GeneralT
> 
>     populateContextMenu(contextMenu, event)
>     {
>-        let breakpoint = this.representedObject;
>-        let label = breakpoint.disabled ? WI.UIString("Enable Breakpoint") : WI.UIString("Disable Breakpoint");
>+        let label = this.representedObject.disabled ? WI.UIString("Enable Breakpoint") : WI.UIString("Disable Breakpoint");
>         contextMenu.appendItem(label, this._toggleBreakpoint.bind(this));
> 
>         contextMenu.appendSeparator();
>-        contextMenu.appendItem(WI.UIString("Delete Breakpoint"), function() {
>-            WI.domDebuggerManager.removeDOMBreakpoint(breakpoint);
>+        contextMenu.appendItem(WI.UIString("Delete Breakpoint"), () => {
>+            this._removeBreakpoint();
>         });
>     }
> 
>@@ -141,6 +140,16 @@ WI.DOMBreakpointTreeElement = class DOMBreakpointTreeElement extends WI.GeneralT
>         event.stopPropagation();
>     }
> 
>+    _removeBreakpoint()
>+    {
>+        if (WI.domDebuggerManager.isBreakpointRemovable(this.representedObject))
>+            WI.domDebuggerManager.removeDOMBreakpoint(this.representedObject);
>+        else if (this.parent) {
>+            this.representedObject.disabled = true;
>+            this.parent.removeChild(this);
>+        }
>+    }
>+
>     _toggleBreakpoint()
>     {
>         this.representedObject.disabled = !this.representedObject.disabled;
>diff --git a/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.css b/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.css
>index 36cf38648474272ea155454df7e519e072b0bbe4..95974e1b67ffa218eeb6034785724fd60a6be966 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 > .add-breakpoint {
>+    width: 15px;
>+    height: 15px;
>+    content: url(../Images/Plus15.svg);
>+
>+    --add-breakpoint-margin-start: 6px;
>+}
>+
>+body[dir=ltr]  .sidebar > .panel.navigation.debugger > .options > .add-breakpoint {
>+    margin-left: var(--add-breakpoint-margin-start);
>+}
>+
>+body[dir=rtl]  .sidebar > .panel.navigation.debugger > .options > .add-breakpoint {
>+    margin-right: var(--add-breakpoint-margin-start);
>+}
>+
> .sidebar > .panel.navigation.debugger > .navigation-bar {
>     position: absolute;
>     top: 0;
>diff --git a/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.js b/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.js
>index 50919ba03cb1ea0ffb1b39ac6bc153ff651b49d1..de3685a448c0735732ab1be30b0c5c6e5af933e8 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.js
>@@ -108,43 +108,23 @@ 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._allExceptionsBreakpointTreeElement = null;
>+        this._allExceptionsBreakpointShownSetting = new WI.Setting("break-on-all-exceptions-shown", true);
> 
>-        this.suppressFilteringOnTreeElements([this._allExceptionsBreakpointTreeElement, this._allUncaughtExceptionsBreakpointTreeElement, this._assertionsBreakpointTreeElement]);
>+        this._allUncaughtExceptionsBreakpointTreeElement = null;
>+        this._allUncaughtExceptionsBreakpointShownSetting = new WI.Setting("break-on-all-uncaught-exceptions-shown", true);
> 
>-        function showResourcesWithIssuesOnlyFilterFunction(treeElement)
>-        {
>-            // Issues are only shown in the scripts tree outline.
>-            if (treeElement.treeOutline !== this._scriptsContentTreeOutline)
>-                return true;
>+        this._assertionsBreakpointTreeElement = null;
>+        this._assertionsBreakpointShownSetting = new WI.Setting("break-on-assertions-shown", true);
> 
>-            // Keep issues.
>-            if (treeElement instanceof WI.IssueTreeElement)
>-                return true;
>-
>-            // Keep resources with issues.
>-            if (treeElement.hasChildren) {
>-                for (let child of treeElement.children) {
>-                    if (child instanceof WI.IssueTreeElement)
>-                        return true;
>-                }
>-            }
>-            return false;
>-        }
>-
>-        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);
>+        let addBreakpointButton = this.optionsContainer.insertAdjacentElement("afterbegin", document.createElement("img"));
>+        addBreakpointButton.classList.add("add-breakpoint");
>+        addBreakpointButton.title = WI.UIString("Create a breakpoint");
>+        addBreakpointButton.addEventListener("click", this._addBreakpointButtonClicked.bind(this));
> 
>         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._breakpointAddedOrRemoved, this);
>+        this._breakpointsContentTreeOutline.addEventListener(WI.TreeOutline.Event.ElementRemoved, this._breakpointAddedOrRemoved, 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,12 +133,34 @@ 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);
>+        this._breakpointsRow = new WI.DetailsSectionRow(WI.UIString("No Breakpoints"));
>+        this._breakpointsRow.element.appendChild(this._breakpointsContentTreeOutline.element);
>+        this._breakpointsRow.showEmptyMessage();
>+
>+        let breakpointsGroup = new WI.DetailsSectionGroup([this._breakpointsRow]);
>+        this._breakpointsSection = new WI.DetailsSection("breakpoints", WI.UIString("Breakpoints"), [breakpointsGroup]);
>+        this.contentView.element.appendChild(this._breakpointsSection.element);
> 
>+        let breakpointIndex = 0;
>+        if (this._allExceptionsBreakpointShownSetting.value) {
>+            this._allExceptionsBreakpointTreeElement = this._createSpecialTreeElementForBreakpoint(WI.debuggerManager.allExceptionsBreakpoint);
>+
>+            this._breakpointsContentTreeOutline.insertChild(this._allExceptionsBreakpointTreeElement, breakpointIndex);
>+            ++breakpointIndex;
>+        }
>+        if (this._allUncaughtExceptionsBreakpointShownSetting.value) {
>+            this._allUncaughtExceptionsBreakpointTreeElement = this._createSpecialTreeElementForBreakpoint(WI.debuggerManager.allUncaughtExceptionsBreakpoint);
>+
>+            this._breakpointsContentTreeOutline.insertChild(this._allUncaughtExceptionsBreakpointTreeElement, breakpointIndex);
>+            ++breakpointIndex;
>+        }
>         // COMPATIBILITY (iOS 10): DebuggerAgent.setPauseOnAssertions did not exist yet.
>-        if (DebuggerAgent.setPauseOnAssertions)
>-            this._breakpointsContentTreeOutline.appendChild(this._assertionsBreakpointTreeElement);
>+        if (DebuggerAgent.setPauseOnAssertions && this._assertionsBreakpointShownSetting.value) {
>+            this._assertionsBreakpointTreeElement = this._createSpecialTreeElementForBreakpoint(WI.debuggerManager.assertionsBreakpoint);
>+
>+            this._breakpointsContentTreeOutline.insertChild(this._assertionsBreakpointTreeElement, breakpointIndex);
>+            ++breakpointIndex;
>+        }
> 
>         if (WI.domDebuggerManager.supported) {
>             this._domBreakpointsContentTreeOutline = this.createContentTreeOutline(true);
>@@ -170,51 +172,48 @@ WI.DebuggerSidebarPanel = class DebuggerSidebarPanel extends WI.NavigationSideba
>             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.DetailsSection("dom-breakpoints", WI.UIString("DOM Breakpoints"), [domBreakpointsGroup]);
>+            this._domBreakpointsSection.element.hidden = true;
>             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._eventBreakpointTreeController = new WI.EventBreakpointTreeController(this._eventBreakpointsContentTreeOutline);
> 
>             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);
>-
>-            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);
>-
>             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.DetailsSection("event-breakpoints", WI.UIString("Event Breakpoints"), [eventBreakpointsGroup]);
>+            this._eventBreakpointsSection.element.hidden = true;
>             this.contentView.element.appendChild(this._eventBreakpointsSection.element);
> 
>-            this._eventBreakpointTreeController = new WI.EventBreakpointTreeController(this._eventBreakpointsContentTreeOutline);
>-
>             this._xhrBreakpointsContentTreeOutline = this.createContentTreeOutline(true);
>+            this._xhrBreakpointsContentTreeOutline.addEventListener(WI.TreeOutline.Event.ElementAdded, this._xhrBreakpointAddedOrRemoved, this);
>+            this._xhrBreakpointsContentTreeOutline.addEventListener(WI.TreeOutline.Event.ElementRemoved, this._xhrBreakpointAddedOrRemoved, this);
>             this._xhrBreakpointTreeController = new WI.XHRBreakpointTreeController(this._xhrBreakpointsContentTreeOutline);
> 
>-            this._xhrBreakpointsRow = new WI.DetailsSectionRow;
>+            this._xhrBreakpointsRow = new WI.DetailsSectionRow(WI.UIString("No Breakpoints"));
>             this._xhrBreakpointsRow.element.appendChild(this._xhrBreakpointsContentTreeOutline.element);
>+            this._xhrBreakpointsRow.showEmptyMessage();
> 
>-            let xhrBreakpointNavigationBar = new WI.NavigationBar;
>-            let xhrBreakpointNavigationBarWrapper = document.createElement("div");
>-            xhrBreakpointNavigationBarWrapper.appendChild(xhrBreakpointNavigationBar.element);
>+            let xhrBreakpointsGroup = new WI.DetailsSectionGroup([this._xhrBreakpointsRow]);
>+            this._xhrBreakpointsSection = new WI.DetailsSection("xhr-breakpoints", WI.UIString("XHR Breakpoints"), [xhrBreakpointsGroup]);
>+            this._xhrBreakpointsSection.element.hidden = true;
>+            this.contentView.element.appendChild(this._xhrBreakpointsSection.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._allRequestsBreakpointTreeElement = null;
>+            this._allRequestsBreakpointShownSetting = new WI.Setting("break-on-all-requests-shown", true);
> 
>-            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 (this._allRequestsBreakpointShownSetting.value) {
>+                this._allRequestsBreakpointTreeElement = this._createSpecialTreeElementForBreakpoint(WI.domDebuggerManager.allRequestsBreakpoint);
>+
>+                const domBreakpointIndex = 0;
>+                this._xhrBreakpointsContentTreeOutline.insertChild(this._allRequestsBreakpointTreeElement, domBreakpointIndex);
>+            }
>         }
> 
>         this._scriptsContentTreeOutline = this.createContentTreeOutline();
>@@ -290,6 +289,16 @@ 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.debuggerManager.removeEventListener(null, null, this);
>         WI.Breakpoint.removeEventListener(null, null, this);
>@@ -791,11 +800,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)
>@@ -996,7 +1002,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 +1051,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 +1182,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,9 +1286,42 @@ WI.DebuggerSidebarPanel = class DebuggerSidebarPanel extends WI.NavigationSideba
>         issueTreeElements.forEach((treeElement) => treeElement.parent.removeChild(treeElement));
>     }
> 
>+    _breakpointAddedOrRemoved(event)
>+    {
>+        if (event) {
>+            let treeElement = event.data.element;
>+
>+            let setting = null;
>+            if (treeElement === this._allExceptionsBreakpointTreeElement)
>+                setting = this._allExceptionsBreakpointShownSetting;
>+            else if (treeElement === this._allUncaughtExceptionsBreakpointTreeElement)
>+                setting = this._allUncaughtExceptionsBreakpointShownSetting;
>+            else if (treeElement === this._assertionsBreakpointTreeElement)
>+                setting = this._assertionsBreakpointShownSetting;
>+
>+            if (setting)
>+                setting.value = !!treeElement.parent;
>+        }
>+
>+        if (!this._breakpointsContentTreeOutline.children.length) {
>+            this._breakpointsRow.showEmptyMessage();
>+            return;
>+        }
>+
>+        if (this._breakpointsContentTreeOutline.element.parentNode)
>+            return;
>+
>+        this._breakpointsRow.hideEmptyMessage();
>+        this._breakpointsRow.element.append(this._breakpointsContentTreeOutline.element);
>+
>+        this._breakpointsSection.collapsed = false;
>+    }
>+
>     _domBreakpointAddedOrRemoved(event)
>     {
>-        if (!this._domBreakpointsContentTreeOutline.children.length) {
>+        let hasBreakpoints = this._domBreakpointsContentTreeOutline.children.length;
>+        this._domBreakpointsSection.element.hidden = !hasBreakpoints;
>+        if (!hasBreakpoints) {
>             this._domBreakpointsRow.showEmptyMessage();
>             return;
>         }
>@@ -1289,7 +1337,9 @@ WI.DebuggerSidebarPanel = class DebuggerSidebarPanel extends WI.NavigationSideba
> 
>     _eventBreakpointAddedOrRemoved(event)
>     {
>-        if (!this._eventBreakpointsContentTreeOutline.children.length) {
>+        let hasBreakpoints = this._eventBreakpointsContentTreeOutline.children.length;
>+        this._eventBreakpointsSection.element.hidden = !hasBreakpoints;
>+        if (!hasBreakpoints) {
>             this._eventBreakpointsRow.showEmptyMessage();
>             return;
>         }
>@@ -1303,18 +1353,164 @@ WI.DebuggerSidebarPanel = class DebuggerSidebarPanel extends WI.NavigationSideba
>         this._eventBreakpointsSection.collapsed = false;
>     }
> 
>-    _addEventBreakpointButtonClicked(event)
>+    _xhrBreakpointAddedOrRemoved(event)
>     {
>-        let popover = new WI.EventBreakpointPopover(this);
>-        popover.show(event.target.element, [WI.RectEdge.MAX_Y, WI.RectEdge.MIN_Y, WI.RectEdge.MAX_X]);
>+        if (event) {
>+            let treeElement = event.data.element;
>+
>+            let setting = null;
>+            if (treeElement === this._allRequestsBreakpointTreeElement)
>+                setting = this._allRequestsBreakpointShownSetting;
>+
>+            if (setting)
>+                setting.value = !!treeElement.parent;
>+        }
>+
>+        let hasBreakpoints = this._xhrBreakpointsContentTreeOutline.children.length;
>+        this._xhrBreakpointsSection.element.hidden = !hasBreakpoints;
>+        if (!hasBreakpoints) {
>+            this._xhrBreakpointsRow.showEmptyMessage();
>+            return;
>+        }
>+
>+        if (this._xhrBreakpointsContentTreeOutline.element.parentNode)
>+            return;
>+
>+        this._xhrBreakpointsRow.hideEmptyMessage();
>+        this._xhrBreakpointsRow.element.append(this._xhrBreakpointsContentTreeOutline.element);
>+
>+        this._xhrBreakpointsSection.collapsed = false;
>     }
> 
>-    _addXHRBreakpointButtonClicked(event)
>+    _addBreakpointButtonClicked(event)
>     {
>-        let popover = new WI.XHRBreakpointPopover(this);
>-        popover.show(event.target.element, [WI.RectEdge.MAX_Y, WI.RectEdge.MIN_Y, WI.RectEdge.MAX_X]);
>+        let contextMenu = WI.ContextMenu.createFromEvent(event);
>+
>+        let allExceptionsBreakpointShown = this._allExceptionsBreakpointShownSetting.value;
>+        let allUncaughtExceptionsBreakpointShown = this._allUncaughtExceptionsBreakpointShownSetting.value;
>+        let assertionsBreakpointShown = this._assertionsBreakpointShownSetting.value;
>+
>+        contextMenu.appendCheckboxItem(WI.UIString("All Exceptions"), () => {
>+            if (allExceptionsBreakpointShown) {
>+                this._breakpointsContentTreeOutline.removeChild(this._allExceptionsBreakpointTreeElement);
>+                this._allExceptionsBreakpointTreeElement = null;
>+            } else {
>+                this._allExceptionsBreakpointTreeElement = this._createSpecialTreeElementForBreakpoint(WI.debuggerManager.allExceptionsBreakpoint);
>+
>+                const index = 0;
>+                this._breakpointsContentTreeOutline.insertChild(this._allExceptionsBreakpointTreeElement, index);
>+            }
>+
>+            WI.debuggerManager.allExceptionsBreakpoint.disabled = allExceptionsBreakpointShown;
>+        }, allExceptionsBreakpointShown);
>+
>+        contextMenu.appendCheckboxItem(WI.UIString("Uncaught Exceptions"), () => {
>+            if (allUncaughtExceptionsBreakpointShown) {
>+                this._breakpointsContentTreeOutline.removeChild(this._allUncaughtExceptionsBreakpointTreeElement);
>+                this._allUncaughtExceptionsBreakpointTreeElement = null;
>+            } else {
>+                this._allUncaughtExceptionsBreakpointTreeElement = this._createSpecialTreeElementForBreakpoint(WI.debuggerManager.allUncaughtExceptionsBreakpoint);
>+
>+                let index = 0;
>+                if (allExceptionsBreakpointShown)
>+                    ++index;
>+                this._breakpointsContentTreeOutline.insertChild(this._allUncaughtExceptionsBreakpointTreeElement, index);
>+            }
>+
>+            WI.debuggerManager.allUncaughtExceptionsBreakpoint.disabled = allUncaughtExceptionsBreakpointShown;
>+        }, allUncaughtExceptionsBreakpointShown);
>+
>+        // COMPATIBILITY (iOS 10): DebuggerAgent.setPauseOnAssertions did not exist yet.
>+        if (DebuggerAgent.setPauseOnAssertions) {
>+            contextMenu.appendCheckboxItem(WI.UIString("Assertion Failures"), () => {
>+                if (assertionsBreakpointShown) {
>+                    this._breakpointsContentTreeOutline.removeChild(this._assertionsBreakpointTreeElement);
>+                    this._assertionsBreakpointTreeElement = null;
>+                } else {
>+                    this._assertionsBreakpointTreeElement = this._createSpecialTreeElementForBreakpoint(WI.debuggerManager.assertionsBreakpoint);
>+
>+                    let index = 0;
>+                    if (allExceptionsBreakpointShown)
>+                        ++index;
>+                    if (allUncaughtExceptionsBreakpointShown)
>+                        ++index;
>+                    this._breakpointsContentTreeOutline.insertChild(this._assertionsBreakpointTreeElement, index);
>+                }
>+
>+                WI.debuggerManager.assertionsBreakpoint.disabled = assertionsBreakpointShown;
>+            }, assertionsBreakpointShown);
>+        }
>+
>+        if (WI.domDebuggerManager.supported) {
>+            let allRequestsBreakpointShown = this._allRequestsBreakpointShownSetting.value;
>+
>+            contextMenu.appendSeparator();
>+
>+            contextMenu.appendItem(WI.UIString("Event Breakpoint..."), () => {
>+                this._eventBreakpointsSection.element.hidden = false;
>+
>+                let popover = new WI.EventBreakpointPopover(this);
>+                popover.show(this._eventBreakpointsSection.element, [WI.RectEdge.MAX_Y, WI.RectEdge.MIN_Y, WI.RectEdge.MAX_X]);
>+            });
>+
>+            contextMenu.appendSeparator();
>+
>+            contextMenu.appendCheckboxItem(WI.UIString("All Requests"), () => {
>+                if (allRequestsBreakpointShown) {
>+                    this._xhrBreakpointsContentTreeOutline.removeChild(this._allRequestsBreakpointTreeElement);
>+                    this._allRequestsBreakpointTreeElement = null;
>+                } else {
>+                    this._allRequestsBreakpointTreeElement = this._createSpecialTreeElementForBreakpoint(WI.domDebuggerManager.allRequestsBreakpoint);
>+
>+                    const index = 0;
>+                    this._xhrBreakpointsContentTreeOutline.insertChild(this._allRequestsBreakpointTreeElement, index);
>+                }
>+
>+                WI.domDebuggerManager.allRequestsBreakpoint.disabled = allRequestsBreakpointShown;
>+            }, allRequestsBreakpointShown);
>+
>+            contextMenu.appendItem(WI.UIString("XHR Breakpoint..."), () => {
>+                this._xhrBreakpointsSection.element.hidden = false;
>+
>+                let popover = new WI.XHRBreakpointPopover(this);
>+                popover.show(this._xhrBreakpointsSection.element, [WI.RectEdge.MAX_Y, WI.RectEdge.MIN_Y, WI.RectEdge.MAX_X]);
>+            });
>+        }
>+
>+        contextMenu.show();
>     }
> 
>+     _createSpecialTreeElementForBreakpoint(breakpoint)
>+     {
>+        let treeElementConstructor = null;
>+        let options = {};
>+
>+        if (breakpoint === WI.debuggerManager.allExceptionsBreakpoint) {
>+            treeElementConstructor = WI.BreakpointTreeElement;
>+            options.className = WI.DebuggerSidebarPanel.ExceptionIconStyleClassName;
>+            options.title = WI.UIString("All Exceptions");
>+        } else if (breakpoint === WI.debuggerManager.allUncaughtExceptionsBreakpoint) {
>+            treeElementConstructor = WI.BreakpointTreeElement;
>+            options.className = WI.DebuggerSidebarPanel.ExceptionIconStyleClassName;
>+            options.title = WI.UIString("Uncaught Exceptions");
>+        } else if (breakpoint === WI.debuggerManager.assertionsBreakpoint) {
>+            treeElementConstructor = WI.BreakpointTreeElement;
>+            options.className = WI.DebuggerSidebarPanel.AssertionIconStyleClassName;
>+            options.title = WI.UIString("Assertion Failures");
>+        } else if (breakpoint === WI.domDebuggerManager.allRequestsBreakpoint) {
>+            treeElementConstructor = WI.XHRBreakpointTreeElement;
>+            options.className = WI.DebuggerSidebarPanel.AssertionIconStyleClassName;
>+            options.title = WI.UIString("All Requests");
>+        }
>+
>+        if (!treeElementConstructor)
>+            return null;
>+
>+        let treeElement = new treeElementConstructor(breakpoint, options);
>+        this.suppressFilteringOnTreeElements([treeElement]);
>+        return treeElement;
>+     }
>+
>     // Popover delegate
> 
>     willDismissPopover(popover)
>@@ -1323,13 +1519,17 @@ WI.DebuggerSidebarPanel = class DebuggerSidebarPanel extends WI.NavigationSideba
>             let breakpoint = popover.breakpoint;
>             if (breakpoint)
>                 WI.domDebuggerManager.addEventBreakpoint(breakpoint);
>+            else
>+                this._eventBreakpointAddedOrRemoved();
>             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._xhrBreakpointAddedOrRemoved();
>             return;
>         }
>     }
>diff --git a/Source/WebInspectorUI/UserInterface/Views/EventBreakpointTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/EventBreakpointTreeElement.js
>index a2c0b4a3a0d9630cebb8e4a096ccad55145c0722..54ee0da38624db3e44ed000daa3efba98e1c27ec 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/EventBreakpointTreeElement.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/EventBreakpointTreeElement.js
>@@ -84,7 +84,7 @@ WI.EventBreakpointTreeElement = class EventBreakpointTreeElement extends WI.Gene
>         if (this.representedObject.eventListener)
>             WI.domTreeManager.removeBreakpointForEventListener(this.representedObject.eventListener);
>         else
>-            WI.domDebuggerManager.removeEventBreakpoint(this.representedObject);
>+            this._removeBreakpoint();
>         return true;
>     }
> 
>@@ -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
>+                this._removeBreakpoint();
>+        });
>     }
> 
>     // Private
>@@ -138,6 +137,16 @@ WI.EventBreakpointTreeElement = class EventBreakpointTreeElement extends WI.Gene
>         event.stopPropagation();
>     }
> 
>+    _removeBreakpoint()
>+    {
>+        if (WI.domDebuggerManager.isBreakpointRemovable(this.representedObject))
>+            WI.domDebuggerManager.removeXHRBreakpoint(this.representedObject);
>+        else if (this.parent) {
>+            this.representedObject.disabled = true;
>+            this.parent.removeChild(this);
>+        }
>+    }
>+
>     _toggleBreakpoint()
>     {
>         if (this.representedObject.eventListener) {
>diff --git a/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.css b/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.css
>index be454c107a8b4419abbed38d1163b7e38cd7951a..28cba077f132c9984e6f618f7b5cdbf8c82d22ce 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.css
>@@ -27,7 +27,9 @@
>     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;
>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/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..4ef159d80a91730700982d81e887dc707b75456b 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);
> 
>@@ -83,7 +83,7 @@ WI.XHRBreakpointTreeElement = class XHRBreakpointTreeElement extends WI.GeneralT
> 
>     ondelete()
>     {
>-        WI.domDebuggerManager.removeXHRBreakpoint(this.representedObject);
>+        this._removeBreakpoint();
>         return true;
>     }
> 
>@@ -101,16 +101,14 @@ WI.XHRBreakpointTreeElement = class XHRBreakpointTreeElement extends WI.GeneralT
> 
>     populateContextMenu(contextMenu, event)
>     {
>-        let breakpoint = this.representedObject;
>-        let label = breakpoint.disabled ? WI.UIString("Enable Breakpoint") : WI.UIString("Disable Breakpoint");
>+        let label = this.representedObject.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"), () => {
>+            this._removeBreakpoint();
>+        });
>     }
> 
>     // Private
>@@ -132,6 +130,16 @@ WI.XHRBreakpointTreeElement = class XHRBreakpointTreeElement extends WI.GeneralT
>         event.stopPropagation();
>     }
> 
>+    _removeBreakpoint()
>+    {
>+        if (WI.domDebuggerManager.isBreakpointRemovable(this.representedObject))
>+            WI.domDebuggerManager.removeXHRBreakpoint(this.representedObject);
>+        else if (this.parent) {
>+            this.representedObject.disabled = true;
>+            this.parent.removeChild(this);
>+        }
>+    }
>+
>     _toggleBreakpoint()
>     {
>         this.representedObject.disabled = !this.representedObject.disabled;

Actions: View | Formatted Diff | Diff

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