Changeset 269337 in webkit

Timestamp:

Nov 3, 2020 3:33:31 PM (21 months ago)

Author:

Devin Rousso

Message:

Web Inspector: Elements: should have the option to Edit Breakpoint... or at least Reveal Breakpoint in Sources Tab
​https://bugs.webkit.org/show_bug.cgi?id=218366

Reviewed by Brian Burg.

• UserInterface/Views/BreakpointPopover.js:

(WI.BreakpointPopover.appendContextMenuItems):

• UserInterface/Views/DOMTreeElement.js:

(WI.DOMTreeElement.prototype.get statusImageElement): Added.
(WI.DOMTreeElement.prototype._statusImageContextmenu):

• UserInterface/Views/DOMTreeOutline.js:

(WI.DOMTreeOutline.prototype.populateContextMenu):

• UserInterface/Views/ContextMenuUtilities.js:

(WI.appendContextMenuItemsForDOMNodeBreakpoints):
Show an "Edit Breakpoint..." action (via WI.BreakpointPopover.appendContextMenuItems) when
there is only one WI.DOMBreakpoint (if there are multiple then it would be confusing),
otherwise using "Breakpoints" (plural) for the other actions.

• UserInterface/Base/Main.js:

(WI.showSourcesTab):

• UserInterface/Views/EventListenerSectionGroup.js:

(WI.EventListenerSectionGroup):

• UserInterface/Views/SourceCodeTextEditor.js:

(WI.SourceCodeTextEditor.prototype.textEditorGutterContextMenu):

• UserInterface/Views/SourcesTabContentView.js:

(WI.SourcesTabContentView.prototype.revealAndSelectRepresentedObject): Added.
(WI.SourcesTabContentView.prototype.revealAndSelectBreakpoint): Deleted.
Rename breakpointToSelect to representedObjectToSelect for more flexibility in the case
that there are multiple WI.DOMBreakpoint for the given WI.DOMNode, in which case we want
to select the WI.DOMNode instead.

• Localizations/en.lproj/localizedStrings.js:

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• Localizations/en.lproj/localizedStrings.js (modified) (1 diff)
• UserInterface/Base/Main.js (modified) (1 diff)
• UserInterface/Views/BreakpointPopover.js (modified) (1 diff)
• UserInterface/Views/ContextMenuUtilities.js (modified) (1 diff)
• UserInterface/Views/DOMTreeElement.js (modified) (2 diffs)
• UserInterface/Views/DOMTreeOutline.js (modified) (1 diff)
• UserInterface/Views/EventListenerSectionGroup.js (modified) (1 diff)
• UserInterface/Views/SourceCodeTextEditor.js (modified) (1 diff)
• UserInterface/Views/SourcesTabContentView.js (modified) (1 diff)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2020-11-03  Devin Rousso  <drousso@apple.com>
+
+        Web Inspector: Elements: should have the option to Edit Breakpoint... or at least Reveal Breakpoint in Sources Tab
+        https://bugs.webkit.org/show_bug.cgi?id=218366
+
+        Reviewed by Brian Burg.
+
+        * UserInterface/Views/BreakpointPopover.js:
+        (WI.BreakpointPopover.appendContextMenuItems):
+        * UserInterface/Views/DOMTreeElement.js:
+        (WI.DOMTreeElement.prototype.get statusImageElement): Added.
+        (WI.DOMTreeElement.prototype._statusImageContextmenu):
+        * UserInterface/Views/DOMTreeOutline.js:
+        (WI.DOMTreeOutline.prototype.populateContextMenu):
+        * UserInterface/Views/ContextMenuUtilities.js:
+        (WI.appendContextMenuItemsForDOMNodeBreakpoints):
+        Show an "Edit Breakpoint..." action (via `WI.BreakpointPopover.appendContextMenuItems`) when
+        there is only one `WI.DOMBreakpoint` (if there are multiple then it would be confusing),
+        otherwise using "Breakpoints" (plural) for the other actions.
+
+        * UserInterface/Base/Main.js:
+        (WI.showSourcesTab):
+        * UserInterface/Views/EventListenerSectionGroup.js:
+        (WI.EventListenerSectionGroup):
+        * UserInterface/Views/SourceCodeTextEditor.js:
+        (WI.SourceCodeTextEditor.prototype.textEditorGutterContextMenu):
+        * UserInterface/Views/SourcesTabContentView.js:
+        (WI.SourcesTabContentView.prototype.revealAndSelectRepresentedObject): Added.
+        (WI.SourcesTabContentView.prototype.revealAndSelectBreakpoint): Deleted.
+        Rename `breakpointToSelect` to `representedObjectToSelect` for more flexibility in the case
+        that there are multiple `WI.DOMBreakpoint` for the given `WI.DOMNode`, in which case we want
+        to select the `WI.DOMNode` instead.
+
+        * Localizations/en.lproj/localizedStrings.js:
+
 2020-10-30  Nikita Vasilyev  <nvasilyev@apple.com>
 

trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js

@@ -1091 +1091 @@
 localizedStrings["Reveal"] = "Reveal";
 localizedStrings["Reveal Blackbox Pattern"] = "Reveal Blackbox Pattern";
+localizedStrings["Reveal Breakpoint in Sources Tab"] = "Reveal Breakpoint in Sources Tab";
+localizedStrings["Reveal Breakpoints in Sources Tab"] = "Reveal Breakpoints in Sources Tab";
 localizedStrings["Reveal Descendant Breakpoints"] = "Reveal Descendant Breakpoints";
 localizedStrings["Reveal Local Override"] = "Reveal Local Override";

trunk/Source/WebInspectorUI/UserInterface/Base/Main.js

@@ -1201 +1201 @@
         tabContentView = new WI.SourcesTabContentView;
 
-    if (options.breakpointToSelect instanceof WI.Breakpoint)
-        tabContentView.revealAndSelectBreakpoint(options.breakpointToSelect);
+    if (options.representedObjectToSelect)
+        tabContentView.revealAndSelectRepresentedObject(options.representedObjectToSelect);
 
     if (options.showScopeChainSidebar)

trunk/Source/WebInspectorUI/UserInterface/Views/BreakpointPopover.js

@@ -53 +53 @@
     static appendContextMenuItems(contextMenu, breakpoint, targetElement)
     {
-        if (breakpoint.editable) {
+        if (breakpoint.editable && targetElement) {
             contextMenu.appendItem(WI.UIString("Edit Breakpoint\u2026"), () => {
                 const delegate = null;

trunk/Source/WebInspectorUI/UserInterface/Views/ContextMenuUtilities.js

@@ -406 +406 @@
     }
 
-    contextMenu.appendSeparator();
-
-    if (breakpoints.length) {
+    if (breakpoints.length && !WI.isShowingSourcesTab()) {
+        contextMenu.appendItem(breakpoints.length === 1 ? WI.UIString("Reveal Breakpoint in Sources Tab") : WI.UIString("Reveal Breakpoints in Sources Tab"), () => {
+            WI.showSourcesTab({
+                representedObjectToSelect: breakpoints.length === 1 ? breakpoints[0] : domNode,
+            });
+        });
+    }
+
+    contextMenu.appendSeparator();
+
+    if (breakpoints.length === 1)
+        WI.BreakpointPopover.appendContextMenuItems(contextMenu, breakpoints[0], options.popoverTargetElement);
+    else if (breakpoints.length) {
         let shouldEnable = breakpoints.some((breakpoint) => breakpoint.disabled);
-        contextMenu.appendItem(shouldEnable ? WI.UIString("Enable Breakpoint") : WI.UIString("Disable Breakpoint"), () => {
+        contextMenu.appendItem(shouldEnable ? WI.UIString("Enable Breakpoints") : WI.UIString("Disable Breakpoints"), () => {
             for (let breakpoint of breakpoints)
                 breakpoint.disabled = !shouldEnable;
         });
 
-        contextMenu.appendItem(WI.UIString("Delete Breakpoint"), () => {
+        contextMenu.appendItem(WI.UIString("Delete Breakpoints"), () => {
             for (let breakpoint of breakpoints)
                 WI.domDebuggerManager.removeDOMBreakpoint(breakpoint);

trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js

@@ -75 +75 @@
     // Public
 
+    get statusImageElement() { return this._statusImageElement; }
+
     get hasBreakpoint()
     {
@@ -1973 +1975 @@
 
         WI.appendContextMenuItemsForDOMNodeBreakpoints(contextMenu, this.representedObject, {
+            popoverTargetElement: event.target,
             revealDescendantBreakpointsMenuItemHandler: this.bindRevealDescendantBreakpointsMenuItemHandler(),
         });

trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js

@@ -299 +299 @@
             excludeRevealElement: this._excludeRevealElementContextMenu,
             copySubMenu: subMenus.copy,
+            popoverTargetElement: treeElement.statusImageElement,
         };
 

trunk/Source/WebInspectorUI/UserInterface/Views/EventListenerSectionGroup.js

@@ -88 +88 @@
                     revealBreakpointGoToArrow.addEventListener("click", (event) => {
                         console.assert(this.hasEventListenerBreakpoint);
-
-                        let breakpointToSelect = WI.domManager.breakpointForEventListenerId(this._eventListener.eventListenerId);
-                        console.assert(breakpointToSelect);
-
-                        WI.showSourcesTab({breakpointToSelect});
+                        WI.showSourcesTab({
+                            representedObjectToSelect: WI.domManager.breakpointForEventListenerId(this._eventListener.eventListenerId),
+                        });
                     });
                 }

trunk/Source/WebInspectorUI/UserInterface/Views/SourceCodeTextEditor.js

@@ -1278 +1278 @@
                 contextMenu.appendItem(WI.UIString("Reveal in Sources Tab"), () => {
                     WI.showSourcesTab({
-                        breakpointToSelect: breakpoints[0],
+                        representedObjectToSelect: breakpoints[0],
                         initiatorHint: WI.TabBrowser.TabNavigationInitiator.ContextMenu,
                     });

trunk/Source/WebInspectorUI/UserInterface/Views/SourcesTabContentView.js

@@ -100 +100 @@
     }
 
-    revealAndSelectBreakpoint(breakpoint)
+    revealAndSelectRepresentedObject(representedObject)
     {
-        console.assert(breakpoint instanceof WI.Breakpoint);
-
-        let treeElement = this.navigationSidebarPanel.treeElementForRepresentedObject(breakpoint);
-        if (treeElement)
-            treeElement.revealAndSelect();
+        let treeElement = this.navigationSidebarPanel.treeElementForRepresentedObject(representedObject);
+        if (treeElement) {
+            const omitFocus = false;
+            const selectedByUser = true;
+            treeElement.revealAndSelect(omitFocus, selectedByUser);
+        }
     }