Web Inspector: Elements: Support copying HTML text of multiple selected DOM nodes

rcaliman-apple · rcaliman-apple · commit 4237ebc10478 · 2026-02-19T05:01:50.000-08:00
https://bugs.webkit.org/show_bug.cgi?id=307799 rdar://169196441 Reviewed by Devin Rousso. The context menu options to copy HTML and HTML (formatted) are updated to support copying the HTML text of all selected nodes from the DOM tree outline. * Source/WebInspectorUI/UserInterface/Proxies/FormatterWorkerProxy.js: (WI.FormatterWorkerProxy.prototype.formatJavaScript): (WI.FormatterWorkerProxy.prototype.formatCSS): (WI.FormatterWorkerProxy.prototype.formatHTML): (WI.FormatterWorkerProxy.prototype.formatXML): (WI.FormatterWorkerProxy.prototype.performAction): * Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js: (WI.DOMTreeElement.prototype.populateDOMNodeContextMenu): (WI.DOMTreeElement.prototype._copyHTMLOfSelectedDOMNodes.async then): (WI.DOMTreeElement.prototype._copyHTMLOfSelectedDOMNodes): Canonical link: https://commits.webkit.org/307826@main
diff --git a/Source/WebInspectorUI/UserInterface/Proxies/FormatterWorkerProxy.js b/Source/WebInspectorUI/UserInterface/Proxies/FormatterWorkerProxy.js
@@ -47,22 +47,22 @@ WI.FormatterWorkerProxy = class FormatterWorkerProxy
 
     formatJavaScript(sourceText, isModule, indentString, includeSourceMapData)
     {
-        this.performAction("formatJavaScript", ...arguments);
+        return this.performAction("formatJavaScript", ...arguments);
     }
 
     formatCSS(sourceText, indentString, includeSourceMapData)
     {
-        this.performAction("formatCSS", ...arguments);
+        return this.performAction("formatCSS", ...arguments);
     }
 
     formatHTML(sourceText, indentString, includeSourceMapData)
     {
-        this.performAction("formatHTML", ...arguments);
+        return this.performAction("formatHTML", ...arguments);
     }
 
     formatXML(sourceText, indentString, includeSourceMapData)
     {
-        this.performAction("formatXML", ...arguments);
+        return this.performAction("formatXML", ...arguments);
     }
 
     // Public
@@ -80,6 +80,30 @@ WI.FormatterWorkerProxy = class FormatterWorkerProxy
         this._postMessage({callId, actionName, actionArguments});
     }
 
+     performAction(actionName)
+     {
+        console.assert(typeof actionName === "string", "performAction should always have an actionName");
+
+        let callId = this._nextCallId++;
+
+        let callback = arguments[arguments.length - 1];
+        if (typeof callback !== "function") {
+            return new Promise((resolve, reject) => {
+                this._callbacks.set(callId, resolve);
+                this._postMessage({
+                    callId,
+                    actionName,
+                    actionArguments: Array.prototype.slice.call(arguments, 1),
+                });
+            });
+        }
+
+        let actionArguments = Array.prototype.slice.call(arguments, 1, arguments.length - 1);
+
+        this._callbacks.set(callId, callback);
+        this._postMessage({callId, actionName, actionArguments});
+    }
+
     // Private
 
     _postMessage()
diff --git a/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js
@@ -868,21 +868,11 @@ WI.DOMTreeElement = class DOMTreeElement extends WI.TreeElement
 
         if (!this.representedObject.destroyed && !this.representedObject.isPseudoElement()) {
             subMenus.copy.appendItem(WI.UIString("HTML"), () => {
-                this.representedObject.getOuterHTML()
-                .then((outerHTML) => {
-                    InspectorFrontendHost.copyText(outerHTML);
-                });
+                this._copyHTMLOfSelectedDOMNodes();
             });
 
             subMenus.copy.appendItem(WI.UIString("HTML (Formatted)"), () => {
-                this.representedObject.getOuterHTML()
-                .then((outerHTML) => {
-                    let workerProxy = WI.FormatterWorkerProxy.singleton();
-                    const includeSourceMapData = false;
-                    workerProxy.formatHTML(outerHTML, WI.indentString(), includeSourceMapData, ({formattedText}) => {
-                        InspectorFrontendHost.copyText(formattedText);
-                    });
-                });
+                this._copyHTMLOfSelectedDOMNodes({formatted: true});
             });
         }
 
@@ -934,6 +924,27 @@ WI.DOMTreeElement = class DOMTreeElement extends WI.TreeElement
         }
     }
 
+    _copyHTMLOfSelectedDOMNodes({formatted} = {})
+    {
+        Promise.all(this.treeOutline.selectedTreeElements.map(async function(treeElement) {
+            let outerHTML = await treeElement.representedObject.getOuterHTML();
+            if (formatted) {
+                let workerProxy = WI.FormatterWorkerProxy.singleton();
+                const includeSourceMapData = false;
+                let {formattedText} = await workerProxy.formatHTML(outerHTML, WI.indentString(), includeSourceMapData);
+                outerHTML = formattedText || "";
+            }
+
+            return outerHTML;
+        }))
+        .then(function(outerHTMLs) {
+            InspectorFrontendHost.copyText(outerHTMLs.join("\n"));
+        })
+        .catch(function(error) {
+            WI.reportInternalError(error);
+        });
+    }
+
     _startEditing()
     {
         if (this.treeOutline.selectedDOMNode() !== this.representedObject)
