Bug 247661 – Web Inspector: Elements Copy HTML with a prettified option

• Component: Web Inspector
• Status: RESOLVED FIXED

[Karl Dubost]

Created attachment 463463 [details]
copy HTML feature

1. Go to apple.com
2. Open Web Inspector
3. Select a node in Elements Tab
4. Ctrl + Click on the chosen node
5. A contextual menu opens
6. Choose Copy HTML

Expected:
Have an option to Copy Prettified HTML

Actual:
The HTML is a big chunk of packed text

This for example:

```
<div class="cta-links">
													<a class="icon icon-after icon-chevronright" href="/ipad-10.9/" target="_self" rel="follow" data-analytics-region="learn more" data-analytics-title="Learn more about iPad" aria-label="Learn more about iPad">Learn more</a>
													<a class="icon icon-after icon-chevronright" href="/us/shop/goto/buy_ipad/ipad" target="_self" rel="follow" data-analytics-region="buy" data-analytics-title="Buy iPad" aria-label="Buy iPad">Buy</a>
										</div>
```


In some cases when sharing code, this form (or any form that the prettifier chooses) can be clearer to explain the code (here prettified through VSCode):

```
<div class="cta-links">
  <a
    class="icon icon-after icon-chevronright"
    href="/ipad-10.9/"
    target="_self"
    rel="follow"
    data-analytics-region="learn more"
    data-analytics-title="Learn more about iPad"
    aria-label="Learn more about iPad"
    >Learn more</a
  >
  <a
    class="icon icon-after icon-chevronright"
    href="/us/shop/goto/buy_ipad/ipad"
    target="_self"
    rel="follow"
    data-analytics-region="buy"
    data-analytics-title="Buy iPad"
    aria-label="Buy iPad"
    >Buy</a
  >
</div>
```

[Radar WebKit Bug Importer]

<rdar://problem/102125455>

[Karl Dubost]

Created attachment 477760 [details]
where prettified HTML should be added

[Karl Dubost]

Why?

Currently what I do is: 
1. Copy HTML
2. Go to VSCode
3. Paste the code
4. Select HTML for format
5. Format Code (aka prettify)
6 Go to the radar or bwo or an email and paste the prettified code.


This menu would remove 4 steps. 
And make it a lot easier to share code with others. 
This should code in addition to copy HTML and not in replacement.

[Razvan Caliman]

Created attachment 477764 [details]
Test case

[Razvan Caliman]

Pull request: https://github.com/WebKit/WebKit/pull/55552

[EWS]

Committed 304698@main (b133b2a74c50): <https://commits.webkit.org/304698@main>

Reviewed commits have been landed. Closing PR #55552 and removing active labels.