Changeset 288029 in webkit

Timestamp:

Jan 14, 2022 1:34:39 PM (6 months ago)

Author:

Devin Rousso

Message:

Web Inspector: add a contextmenu item to create a URL Breakpoint for resources initiated by script
​https://bugs.webkit.org/show_bug.cgi?id=235216

Reviewed by Dean Jackson.

• UserInterface/Views/ContextMenuUtilities.js:

(WI.appendContextMenuItemsForSourceCode):
Since URL Breakpoints only work with XHR/fetch, only offer to create a URL Breakpoint if
the WI.SourceCode has initiatorCallFrames, meaning it was triggered by JS. We could
offer this contextmenu item for _all_ resources, but there are many different resource types
that are unlikely (if ever) to be loaded via XHR/fetch (e.g. favicons, manifests, fonts,
initial JS/CSS files, etc.) that it would likely add clutter and possibly confuse developers
into thinking that URL Breakpoints can somehow pause things other than JS. Plus, this can
always be changed in a followup, so better to do something minimal first.

• UserInterface/Controllers/DOMDebuggerManager.js:

(WI.DOMDebuggerManager.prototype.urlBreakpointsMatchingURL): Added.
Helper method to find all WI.URLBreakpoint that match a given URL, sorted by how exact
they would match (e.g. a regex match is less exact than ===).

• Localizations/en.lproj/localizedStrings.js:

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• Localizations/en.lproj/localizedStrings.js (modified) (7 diffs)
• UserInterface/Controllers/DOMDebuggerManager.js (modified) (1 diff)
• UserInterface/Views/ContextMenuUtilities.js (modified) (1 diff)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2022-01-14  Devin Rousso  <drousso@apple.com>
+
+        Web Inspector: add a contextmenu item to create a URL Breakpoint for resources initiated by script
+        https://bugs.webkit.org/show_bug.cgi?id=235216
+
+        Reviewed by Dean Jackson.
+
+        * UserInterface/Views/ContextMenuUtilities.js:
+        (WI.appendContextMenuItemsForSourceCode):
+        Since URL Breakpoints only work with XHR/`fetch`, only offer to create a URL Breakpoint if
+        the `WI.SourceCode` has `initiatorCallFrames`, meaning it was triggered by JS. We could
+        offer this contextmenu item for _all_ resources, but there are many different resource types
+        that are unlikely (if ever) to be loaded via XHR/`fetch` (e.g. favicons, manifests, fonts,
+        initial JS/CSS files, etc.) that it would likely add clutter and possibly confuse developers
+        into thinking that URL Breakpoints can somehow pause things other than JS. Plus, this can
+        always be changed in a followup, so better to do something minimal first.
+
+        * UserInterface/Controllers/DOMDebuggerManager.js:
+        (WI.DOMDebuggerManager.prototype.urlBreakpointsMatchingURL): Added.
+        Helper method to find all `WI.URLBreakpoint` that match a given URL, sorted by how exact
+        they would match (e.g. a regex match is less exact than `===`).
+
+        * Localizations/en.lproj/localizedStrings.js:
+
 2022-01-13  Elliott Williams  <emw@apple.com>
 

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

@@ -116 +116 @@
 localizedStrings["Add Cookie"] = "Add Cookie";
 localizedStrings["Add Header"] = "Add Header";
+localizedStrings["Add JavaScript Breakpoint"] = "Add JavaScript Breakpoint";
 localizedStrings["Add New"] = "Add New";
 localizedStrings["Add New Class"] = "Add New Class";
@@ -123 +124 @@
 /* Text of button to add a new audit test case to the currently shown audit group. */
 localizedStrings["Add Test Case @ Audit Tab - Group"] = "Add Test Case";
+localizedStrings["Add URL Breakpoint"] = "Add URL Breakpoint";
 localizedStrings["Add a Class"] = "Add a Class";
 localizedStrings["Add new breakpoint action after this action"] = "Add new breakpoint action after this action";
@@ -362 +364 @@
 localizedStrings["Condition"] = "Condition";
 localizedStrings["Conditional expression"] = "Conditional expression";
+localizedStrings["Conic Gradient"] = "Conic Gradient";
 localizedStrings["Connecting"] = "Connecting";
 localizedStrings["Connection"] = "Connection";
@@ -368 +371 @@
 localizedStrings["Connection ID"] = "Connection ID";
 localizedStrings["Connection:"] = "Connection:";
-localizedStrings["Conic Gradient"] = "Conic Gradient";
 localizedStrings["Console"] = "Console";
 localizedStrings["Console Evaluation"] = "Console Evaluation";
@@ -455 +457 @@
 localizedStrings["Delete Descendant Breakpoints"] = "Delete Descendant Breakpoints";
 localizedStrings["Delete Inspector Bootstrap Script"] = "Delete Inspector Bootstrap Script";
+localizedStrings["Delete JavaScript Breakpoint"] = "Delete JavaScript Breakpoint";
 localizedStrings["Delete Local Override"] = "Delete Local Override";
+localizedStrings["Delete URL Breakpoint"] = "Delete URL Breakpoint";
+localizedStrings["Delete URL Breakpoints"] = "Delete URL Breakpoints";
 localizedStrings["Delete Watch Expression"] = "Delete Watch Expression";
 localizedStrings["Delete probe"] = "Delete probe";
@@ -1183 +1188 @@
 localizedStrings["Render Pipeline %d"] = "Render Pipeline %d";
 localizedStrings["Rendering Frames"] = "Rendering Frames";
+localizedStrings["Repeating Conic Gradient"] = "Repeating Conic Gradient";
 localizedStrings["Repeating Linear Gradient"] = "Repeating Linear Gradient";
 localizedStrings["Repeating Radial Gradient"] = "Repeating Radial Gradient";
-localizedStrings["Repeating Conic Gradient"] = "Repeating Conic Gradient";
 localizedStrings["Request"] = "Request";
 localizedStrings["Request & Response"] = "Request & Response";
@@ -1604 +1609 @@
 /* Label for button to show CSS variables ungrouped */
 localizedStrings["Ungrouped @ Computed Style variables grouping mode"] = "Ungrouped";
-/* Section header for ungrouped CSS variables */
-localizedStrings["Ungrouped @ Computed Style variables section"] = "Ungrouped";
 /* Property value for `font-variant-capitals: unicase`. */
 localizedStrings["Unicase @ Font Details Sidebar Property Value"] = "Unicase";

trunk/Source/WebInspectorUI/UserInterface/Controllers/DOMDebuggerManager.js

@@ -465 +465 @@
     }
 
+    urlBreakpointsMatchingURL(url)
+    {
+        return this._urlBreakpoints
+            .filter((urlBreakpoint) => {
+                switch (urlBreakpoint.type) {
+                case WI.URLBreakpoint.Type.Text:
+                    return urlBreakpoint.url.toLowerCase() === url.toLowerCase();
+
+                case WI.URLBreakpoint.Type.RegularExpression:
+                    return (new RegExp(urlBreakpoint.url, "i")).test(url);
+                }
+
+                return false;
+            })
+            .sort((a, b) => {
+                // Order URL breakpoints based on how closely they match the given URL.
+                const typeRankings = [
+                    WI.URLBreakpoint.Type.Text,
+                    WI.URLBreakpoint.Type.RegularExpression,
+                ];
+                return typeRankings.indexOf(a.type) - typeRankings.indexOf(b.type);
+            });
+    }
+
     addURLBreakpoint(breakpoint)
     {

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

@@ -121 +121 @@
 
     if (location && (sourceCode instanceof WI.Script || (sourceCode instanceof WI.Resource && sourceCode.type === WI.Resource.Type.Script && !sourceCode.localResourceOverride))) {
-        let existingBreakpoint = WI.debuggerManager.breakpointForSourceCodeLocation(location);
-        if (existingBreakpoint) {
-            contextMenu.appendItem(WI.UIString("Delete Breakpoint"), () => {
-                WI.debuggerManager.removeBreakpoint(existingBreakpoint);
+        let existingJavaScriptBreakpoint = WI.debuggerManager.breakpointForSourceCodeLocation(location);
+        if (existingJavaScriptBreakpoint) {
+            contextMenu.appendItem(WI.UIString("Delete JavaScript Breakpoint"), () => {
+                WI.debuggerManager.removeBreakpoint(existingJavaScriptBreakpoint);
             });
         } else {
-            contextMenu.appendItem(WI.UIString("Add Breakpoint"), () => {
+            contextMenu.appendItem(WI.UIString("Add JavaScript Breakpoint"), () => {
                 WI.debuggerManager.addBreakpoint(new WI.JavaScriptBreakpoint(location));
+            });
+        }
+    }
+
+    if (sourceCode?.initiatorCallFrames) {
+        let existingURLBreakpoints = WI.domDebuggerManager.urlBreakpointsMatchingURL(sourceCode.url);
+        if (existingURLBreakpoints.length) {
+            contextMenu.appendItem(existingURLBreakpoints.length === 1 ? WI.UIString("Delete URL Breakpoint") : WI.UIString("Delete URL Breakpoints"), () => {
+                for (let urlBreakpoint of existingURLBreakpoints)
+                    WI.domDebuggerManager.removeURLBreakpoint(urlBreakpoint);
+            });
+        } else {
+            contextMenu.appendItem(WI.UIString("Add URL Breakpoint"), () => {
+                WI.domDebuggerManager.addURLBreakpoint(new WI.URLBreakpoint(WI.URLBreakpoint.Type.Text, sourceCode.url));
             });
         }