Web Inspector: provide a way to view XML/HTML/SVG resource responses as a DOM tree
[WebKit-https.git] / Source / WebInspectorUI / UserInterface / Views / ContextMenuUtilities.js
1 /*
2  * Copyright (C) 2016 Devin Rousso <webkit@devinrousso.com>. All rights reserved.
3  *
4  * Redistribution and use in source and binary forms, with or without
5  * modification, are permitted provided that the following conditions
6  * are met:
7  * 1. Redistributions of source code must retain the above copyright
8  *    notice, this list of conditions and the following disclaimer.
9  * 2. Redistributions in binary form must reproduce the above copyright
10  *    notice, this list of conditions and the following disclaimer in the
11  *    documentation and/or other materials provided with the distribution.
12  *
13  * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
14  * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
15  * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
16  * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
17  * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
18  * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
19  * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
20  * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
21  * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
22  * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
23  * THE POSSIBILITY OF SUCH DAMAGE.
24  */
25
26 WI.addMouseDownContextMenuHandlers = function(element, populateContextMenuCallback)
27 {
28     let ignoreMouseDown = false;
29     element.addEventListener("mousedown", (event) => {
30         if (event.button !== 0)
31             return;
32
33         event.stop();
34
35         if (ignoreMouseDown)
36             return;
37
38         ignoreMouseDown = true;
39
40         let contextMenu = WI.ContextMenu.createFromEvent(event);
41         contextMenu.addBeforeShowCallback(() => {
42             ignoreMouseDown = false;
43         });
44
45         populateContextMenuCallback(contextMenu, event);
46
47         contextMenu.show();
48     });
49
50     element.addEventListener("contextmenu", (event) => {
51         let contextMenu = WI.ContextMenu.createFromEvent(event);
52         populateContextMenuCallback(contextMenu, event);
53     });
54 };
55
56 WI.appendContextMenuItemsForSourceCode = function(contextMenu, sourceCodeOrLocation)
57 {
58     console.assert(contextMenu instanceof WI.ContextMenu);
59     if (!(contextMenu instanceof WI.ContextMenu))
60         return;
61
62     let sourceCode = sourceCodeOrLocation;
63     let location = null;
64     if (sourceCodeOrLocation instanceof WI.SourceCodeLocation) {
65         sourceCode = sourceCodeOrLocation.sourceCode;
66         location = sourceCodeOrLocation;
67     }
68
69     console.assert(sourceCode instanceof WI.SourceCode);
70     if (!(sourceCode instanceof WI.SourceCode))
71         return;
72
73     contextMenu.appendSeparator();
74
75     WI.appendContextMenuItemsForURL(contextMenu, sourceCode.url, {sourceCode, location});
76
77     if (sourceCode instanceof WI.Resource) {
78         if (sourceCode.urlComponents.scheme !== "data") {
79             contextMenu.appendItem(WI.UIString("Copy as cURL"), () => {
80                 InspectorFrontendHost.copyText(sourceCode.generateCURLCommand());
81             });
82
83             contextMenu.appendSeparator();
84
85             contextMenu.appendItem(WI.UIString("Copy HTTP Request"), () => {
86                 InspectorFrontendHost.copyText(sourceCode.stringifyHTTPRequest());
87             });
88
89             if (sourceCode.hasResponse()) {
90                 contextMenu.appendItem(WI.UIString("Copy HTTP Response"), () => {
91                     InspectorFrontendHost.copyText(sourceCode.stringifyHTTPResponse());
92                 });
93             }
94
95             contextMenu.appendSeparator();
96         }
97     }
98
99     contextMenu.appendItem(WI.UIString("Save File"), () => {
100         sourceCode.requestContent().then(() => {
101             const forceSaveAs = true;
102             WI.FileUtilities.save({
103                 url: sourceCode.url || "",
104                 content: sourceCode.content
105             }, forceSaveAs);
106         });
107     });
108
109     contextMenu.appendSeparator();
110
111     if (location && (sourceCode instanceof WI.Script || (sourceCode instanceof WI.Resource && sourceCode.type === WI.Resource.Type.Script))) {
112         let existingBreakpoint = WI.debuggerManager.breakpointForSourceCodeLocation(location);
113         if (existingBreakpoint) {
114             contextMenu.appendItem(WI.UIString("Delete Breakpoint"), () => {
115                 WI.debuggerManager.removeBreakpoint(existingBreakpoint);
116             });
117         } else {
118             contextMenu.appendItem(WI.UIString("Add Breakpoint"), () => {
119                 WI.debuggerManager.addBreakpoint(new WI.Breakpoint(location));
120             });
121         }
122
123         contextMenu.appendSeparator();
124     }
125 };
126
127 WI.appendContextMenuItemsForURL = function(contextMenu, url, options = {})
128 {
129     if (!url)
130         return;
131
132     function showResourceWithOptions(options) {
133         if (options.location)
134             WI.showSourceCodeLocation(options.location, options);
135         else if (options.sourceCode)
136             WI.showSourceCode(options.sourceCode, options);
137         else
138             WI.openURL(url, options.frame, options);
139     }
140
141     if (!url.startsWith("javascript:") && !url.startsWith("data:")) {
142         contextMenu.appendItem(WI.UIString("Open in New Tab"), () => {
143             const frame = null;
144             WI.openURL(url, frame, {alwaysOpenExternally: true});
145         });
146     }
147
148     if (WI.networkManager.resourceForURL(url)) {
149         if (WI.settings.experimentalEnableSourcesTab.value) {
150             if (!WI.isShowingSourcesTab()) {
151                 contextMenu.appendItem(WI.UIString("Reveal in Sources Tab"), () => {
152                     showResourceWithOptions({preferredTabType: WI.SourcesTabContentView.Type});
153                 });
154             }
155         } else {
156             if (!WI.isShowingResourcesTab()) {
157                 contextMenu.appendItem(WI.UIString("Reveal in Resources Tab"), () => {
158                     showResourceWithOptions({preferredTabType: WI.ResourcesTabContentView.Type});
159                 });
160             }
161         }
162         if (!WI.isShowingNetworkTab()) {
163             contextMenu.appendItem(WI.UIString("Reveal in Network Tab"), () => {
164                 showResourceWithOptions({preferredTabType: WI.NetworkTabContentView.Type});
165             });
166         }
167     }
168
169     contextMenu.appendSeparator();
170
171     contextMenu.appendItem(WI.UIString("Copy Link"), () => {
172         InspectorFrontendHost.copyText(url);
173     });
174 };
175
176 WI.appendContextMenuItemsForDOMNode = function(contextMenu, domNode, options = {})
177 {
178     console.assert(contextMenu instanceof WI.ContextMenu);
179     if (!(contextMenu instanceof WI.ContextMenu))
180         return;
181
182     console.assert(domNode instanceof WI.DOMNode);
183     if (!(domNode instanceof WI.DOMNode))
184         return;
185
186     let copySubMenu = options.copySubMenu || contextMenu.appendSubMenuItem(WI.UIString("Copy"));
187
188     let isElement = domNode.nodeType() === Node.ELEMENT_NODE;
189     let attached = domNode.attached;
190
191     if (isElement && attached) {
192         copySubMenu.appendItem(WI.UIString("Selector Path"), () => {
193             let cssPath = WI.cssPath(domNode);
194             InspectorFrontendHost.copyText(cssPath);
195         });
196     }
197
198     if (!domNode.isPseudoElement() && attached) {
199         copySubMenu.appendItem(WI.UIString("XPath"), () => {
200             let xpath = WI.xpath(domNode);
201             InspectorFrontendHost.copyText(xpath);
202         });
203     }
204
205     contextMenu.appendSeparator();
206
207     if (!options.disallowEditing) {
208         if (domNode.isCustomElement()) {
209             contextMenu.appendItem(WI.UIString("Jump to Definition"), () => {
210                 function didGetFunctionDetails(error, response) {
211                     if (error)
212                         return;
213
214                     let location = response.location;
215                     let sourceCode = WI.debuggerManager.scriptForIdentifier(location.scriptId, WI.mainTarget);
216                     if (!sourceCode)
217                         return;
218
219                     let sourceCodeLocation = sourceCode.createSourceCodeLocation(location.lineNumber, location.columnNumber || 0);
220                     WI.showSourceCodeLocation(sourceCodeLocation, {
221                         ignoreNetworkTab: true,
222                         ignoreSearchTab: true,
223                     });
224                 }
225
226                 WI.RemoteObject.resolveNode(domNode).then((remoteObject) => {
227                     remoteObject.getProperty("constructor", (error, result, wasThrown) => {
228                         if (error)
229                             return;
230                         if (result.type === "function")
231                             remoteObject.target.DebuggerAgent.getFunctionDetails(result.objectId, didGetFunctionDetails);
232                         result.release();
233                     });
234                     remoteObject.release();
235                 });
236             });
237
238             contextMenu.appendSeparator();
239         }
240
241         if (WI.cssManager.canForcePseudoClasses() && domNode.attached) {
242             contextMenu.appendSeparator();
243
244             let pseudoSubMenu = contextMenu.appendSubMenuItem(WI.UIString("Forced Pseudo-Classes", "A context menu item to force (override) a DOM node's pseudo-classes"));
245
246             let enabledPseudoClasses = domNode.enabledPseudoClasses;
247             WI.CSSManager.ForceablePseudoClasses.forEach((pseudoClass) => {
248                 let enabled = enabledPseudoClasses.includes(pseudoClass);
249                 pseudoSubMenu.appendCheckboxItem(pseudoClass.capitalize(), () => {
250                     domNode.setPseudoClassEnabled(pseudoClass, !enabled);
251                 }, enabled);
252             });
253         }
254
255         if (WI.domDebuggerManager.supported && isElement && !domNode.isPseudoElement() && attached) {
256             contextMenu.appendSeparator();
257
258             WI.appendContextMenuItemsForDOMNodeBreakpoints(contextMenu, domNode, options);
259         }
260
261         contextMenu.appendSeparator();
262
263         if (!options.excludeLogElement && !domNode.isInUserAgentShadowTree() && !domNode.isPseudoElement()) {
264             let label = isElement ? WI.UIString("Log Element", "Log (print) DOM element to Console") : WI.UIString("Log Node", "Log (print) DOM node to Console");
265             contextMenu.appendItem(label, () => {
266                 WI.RemoteObject.resolveNode(domNode, WI.RuntimeManager.ConsoleObjectGroup).then((remoteObject) => {
267                     let text = isElement ? WI.UIString("Selected Element", "Selected DOM element") : WI.UIString("Selected Node", "Selected DOM node");
268                     const addSpecialUserLogClass = true;
269                     WI.consoleLogViewController.appendImmediateExecutionWithResult(text, remoteObject, addSpecialUserLogClass);
270                 });
271             });
272         }
273
274         if (!options.excludeRevealElement && window.DOMAgent && attached) {
275             contextMenu.appendItem(WI.repeatedUIString.revealInDOMTree(), () => {
276                 WI.domManager.inspectElement(domNode.id);
277             });
278         }
279
280         if (WI.settings.experimentalEnableLayersTab.value && window.LayerTreeAgent && attached) {
281             contextMenu.appendItem(WI.UIString("Reveal in Layers Tab", "Open Layers tab and select the layer corresponding to this node"), () => {
282                 WI.showLayersTab({nodeToSelect: domNode});
283             });
284         }
285
286         if (window.PageAgent && attached) {
287             contextMenu.appendItem(WI.UIString("Capture Screenshot", "Capture screenshot of the selected DOM node"), () => {
288                 PageAgent.snapshotNode(domNode.id, (error, dataURL) => {
289                     if (error) {
290                         const target = WI.mainTarget;
291                         const source = WI.ConsoleMessage.MessageSource.Other;
292                         const level = WI.ConsoleMessage.MessageLevel.Error;
293                         let consoleMessage = new WI.ConsoleMessage(target, source, level, error);
294                         consoleMessage.shouldRevealConsole = true;
295
296                         WI.consoleLogViewController.appendConsoleMessage(consoleMessage);
297                         return;
298                     }
299
300                     WI.FileUtilities.save({
301                         url: WI.FileUtilities.inspectorURLForFilename(WI.FileUtilities.screenshotString() + ".png"),
302                         content: parseDataURL(dataURL).data,
303                         base64Encoded: true,
304                     });
305                 });
306             });
307         }
308
309         if (isElement && attached) {
310             contextMenu.appendItem(WI.UIString("Scroll into View", "Scroll selected DOM node into view on the inspected web page"), () => {
311                 domNode.scrollIntoView();
312             });
313         }
314
315         contextMenu.appendSeparator();
316     }
317 };
318
319 WI.appendContextMenuItemsForDOMNodeBreakpoints = function(contextMenu, domNode, options = {})
320 {
321     if (contextMenu.__domBreakpointItemsAdded)
322         return;
323
324     contextMenu.__domBreakpointItemsAdded = true;
325
326     let breakpoints = WI.domDebuggerManager.domBreakpointsForNode(domNode);
327
328     contextMenu.appendSeparator();
329
330     let subMenu = contextMenu.appendSubMenuItem(WI.UIString("Break on"));
331
332     for (let type of Object.values(WI.DOMBreakpoint.Type)) {
333         let label = WI.DOMBreakpointTreeElement.displayNameForType(type);
334         let breakpoint = breakpoints.find((breakpoint) => breakpoint.type === type);
335
336         subMenu.appendCheckboxItem(label, function() {
337             if (breakpoint)
338                 WI.domDebuggerManager.removeDOMBreakpoint(breakpoint);
339             else
340                 WI.domDebuggerManager.addDOMBreakpoint(new WI.DOMBreakpoint(domNode, type));
341         }, !!breakpoint);
342     }
343
344     contextMenu.appendSeparator();
345
346     if (breakpoints.length) {
347         let shouldEnable = breakpoints.some((breakpoint) => breakpoint.disabled);
348         contextMenu.appendItem(shouldEnable ? WI.UIString("Enable Breakpoint") : WI.UIString("Disable Breakpoint"), () => {
349             for (let breakpoint of breakpoints)
350                 breakpoint.disabled = !shouldEnable;
351         });
352
353         contextMenu.appendItem(WI.UIString("Delete Breakpoint"), () => {
354             for (let breakpoint of breakpoints)
355                 WI.domDebuggerManager.removeDOMBreakpoint(breakpoint);
356         });
357
358         contextMenu.appendSeparator();
359     }
360
361     let subtreeBreakpoints = WI.domDebuggerManager.domBreakpointsInSubtree(domNode);
362     if (subtreeBreakpoints.length) {
363         if (options.revealDescendantBreakpointsMenuItemHandler)
364             contextMenu.appendItem(WI.UIString("Reveal Descendant Breakpoints"), options.revealDescendantBreakpointsMenuItemHandler);
365
366         let subtreeShouldEnable = subtreeBreakpoints.some((breakpoint) => breakpoint.disabled);
367         contextMenu.appendItem(subtreeShouldEnable ? WI.UIString("Enable Descendant Breakpoints") : WI.UIString("Disable Descendant Breakpoints"), () => {
368             for (let subtreeBreakpoint of subtreeBreakpoints)
369                 subtreeBreakpoint.disabled = !subtreeShouldEnable;
370         });
371
372         contextMenu.appendItem(WI.UIString("Delete Descendant Breakpoints"), () => {
373             for (let subtreeBreakpoint of subtreeBreakpoints)
374                 WI.domDebuggerManager.removeDOMBreakpoint(subtreeBreakpoint);
375         });
376
377         contextMenu.appendSeparator();
378     }
379 };