Bug 276533 – Web Inspector: Parse attributes added via editing the tag name

• Component: Web Inspector
• Status: RESOLVED FIXED

[Vadim Makeev]

Created attachment 471876 [details]
Editing tag and atting attributes

## Problem

Adding an attribute in the DOM tree inside of the Inspect panel is unusually complicated. Given the developers’ experience in code editors, one would expect to double-click the tag name and start typing. Unfortunately, the attribute gets dismissed this way. It even gets repeated in the closing tag, which looks weird.

## Solution

Currently, there are two editing modes available:

1. When you double-click the tag name, the tag name editing mode is opened.
2. When you press the Enter key, the adding attribute mode is opened.

The inspector should differentiate between tag name editing and adding attribute mode based on whether the space is typed. Since tag names cannot contain spaces, it seems obvious.

Chrome DevTools does this: once you type a space, it goes to the adding attributes mode.

Ideally, pressing enter should open one and only editing mode to edit both the tag name and attributes. What is what is figured out via parsing for spaces.

## Extra information

Attached screenshot:

1. Editing a tag name via double-click
2. Adding an attribute via the Enter key
3. Editing a tag name to add an attribute
4. Adding an attribute via the context menu

[Radar WebKit Bug Importer]

<rdar://problem/131607290>

[Razvan Caliman]

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

[EWS]

Committed 281507@main (0b084355708b): <https://commits.webkit.org/281507@main>

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