Web Inspector: inline breakpoint widget should have a context menu to…

… edit the breakpoint

https://bugs.webkit.org/show_bug.cgi?id=244646

Reviewed by Patrick Angle.

Inline breakpoints should also be configurable from the text editor, just like how they have been
via right-clicking the breakpoint indicator in the gutter area.

* Source/WebInspectorUI/UserInterface/Views/BreakpointInlineWidget.js:
(WI.BreakpointInlineWidget):
(WI.BreakpointInlineWidget.prototype._update):
(WI.BreakpointInlineWidget.prototype._createBreakpoint): Added.
(WI.BreakpointInlineWidget.prototype._addBreakpointEventListeners): Added.
(WI.BreakpointInlineWidget.prototype._handleClick):
(WI.BreakpointInlineWidget.prototype._handleContextmenu): Added.
(WI.BreakpointInlineWidget.prototype._handleBreakpointDisabledStateChanged): Added.
(WI.BreakpointInlineWidget.prototype._handleBreakpointRemoved): Added.
Drive-by: Also handle the developer disabling a breakpoint in the navigation sidebar, which should
          dim the inline breakpoint without removing it, meaning that the next click would enable it.

Canonical link: https://commits.webkit.org/254052@main

Source/WebInspectorUI/UserInterface/Views/BreakpointInlineWidget.js

@@ -34,6 +34,8 @@ WI.BreakpointInlineWidget = class BreakpointInlineWidget
 
             this._breakpoint = breakpointOrSourceCodeLocation;
             this._sourceCodeLocation = this._breakpoint.sourceCodeLocation;
+
+            this._addBreakpointEventListeners();
         } else {
             console.assert(breakpointOrSourceCodeLocation instanceof WI.SourceCodeLocation, breakpointOrSourceCodeLocation);
 
@@ -44,6 +46,7 @@ WI.BreakpointInlineWidget = class BreakpointInlineWidget
         this._element = document.createElement("span");
         this._element.classList.add("inline-widget", "breakpoint");
         this._element.addEventListener("click", this._handleClick.bind(this));
+        this._element.addEventListener("contextmenu", this._handleContextmenu.bind(this));
 
         this._update();
     }
@@ -58,18 +61,80 @@ WI.BreakpointInlineWidget = class BreakpointInlineWidget
 
     _update()
     {
-        this._element.classList.toggle("disabled", !this._breakpoint);
+        this._element.classList.toggle("disabled", !this._breakpoint || this._breakpoint.disabled);
+    }
+
+    _createBreakpoint() {
+        console.assert(!this._breakpoint);
+        this._breakpoint = new WI.JavaScriptBreakpoint(this._sourceCodeLocation, {resolved: true});
+        WI.debuggerManager.addBreakpoint(this._breakpoint);
+
+        this._addBreakpointEventListeners();
+
+        this._update();
+    }
+
+    _addBreakpointEventListeners()
+    {
+        this._breakpoint.addEventListener(WI.Breakpoint.Event.DisabledStateDidChange, this._handleBreakpointDisabledStateChanged, this);
+
+        WI.debuggerManager.addEventListener(WI.DebuggerManager.Event.BreakpointRemoved, this._handleBreakpointRemoved, this);
     }
 
     _handleClick(event)
     {
         if (this._breakpoint) {
-            this._breakpoint.remove();
-            this._breakpoint = null;
-        } else {
-            this._breakpoint = new WI.JavaScriptBreakpoint(this._sourceCodeLocation, {resolved: true});
-            WI.debuggerManager.addBreakpoint(this._breakpoint);
+            if (this._breakpoint.disabled)
+                this._breakpoint.disabled = false;
+            else
+                this._breakpoint.remove();
+            return;
+        }
+
+        this._createBreakpoint();
+    }
+
+    _handleContextmenu(event)
+    {
+        let contextMenu = WI.ContextMenu.createFromEvent(event);
+
+        if (!this._breakpoint) {
+            contextMenu.appendItem(WI.UIString("Add Breakpoint"), () => {
+                this._createBreakpoint();
+            });
+            return;
+        }
+
+        WI.BreakpointPopover.appendContextMenuItems(contextMenu, this._breakpoint, this._element);
+
+        if (!WI.isShowingSourcesTab()) {
+            contextMenu.appendSeparator();
+
+            contextMenu.appendItem(WI.UIString("Reveal in Sources Tab"), () => {
+                WI.showSourcesTab({
+                    representedObjectToSelect: this._breakpoint,
+                    initiatorHint: WI.TabBrowser.TabNavigationInitiator.ContextMenu,
+                });
+            });
         }
+    }
+
+    _handleBreakpointDisabledStateChanged(event)
+    {
+        this._update();
+    }
+
+    _handleBreakpointRemoved(event)
+    {
+        let {breakpoint} = event.data;
+        if (breakpoint !== this._breakpoint)
+            return;
+
+        this._breakpoint.removeEventListener(WI.Breakpoint.Event.DisabledStateDidChange, this._handleBreakpointDisabledStateChanged, this);
+
+        WI.debuggerManager.removeEventListener(WI.DebuggerManager.Event.BreakpointRemoved, this._handleBreakpointRemoved, this);
+
+        this._breakpoint = null;
 
         this._update();
     }