961736 - DOM nodes shortcut panel

Status: NEW

(DevTools :: Inspector, enhancement, P3)

Description

[Patrick Brosset <:pbro>]

It would be pretty useful to have a list of manageable DOM shortcuts somewhere in the devtools inspector.

The markup-view is definitely the best way to present DOM nodes when inspecting a page, but often times, when debugging, you're interested in one node in particular and you end up looking for it over and over again as you make changes and refresh your page.

The proposal is to allow to add/remove DOM elements in a panel somehow so that you can go back to them more quickly.

The important feature here is to make this list persistent and per URL. So that if you go to another site, you'll want to see the list for that site, even if you created it some time ago and closed your browser since.

About the details:
- Each node should probably be stored with its unique css selector.
- Nodes could be added via the markup-view contextual menu.
- Nodes in the shortcuts panel may not always be found (if the HTML has changed since the last refresh, or was modified by javascript), in which case they should be shown differently than if they exist.
- Hovering over nodes in the panel should highlight them.
- Clicking nodes should select them in the markup view.
- Mutations should be seen in the panel too. So probably nodes should be represented just like in the markup-view, so that you can see the tag name and attributes.

Comment 1

[Rob Campbell [:rc] (:robcee)]

if this feature is to provide quick lookup of known DOM nodes, is it an augmentation of the existing search feature? Could the search feature be improved to provide these shortcuts? (e.g., like the search functionality in the JS Debugger).

As for inserting nodes, that feels like a separate bug. Definitely be a useful thing to be able to do quickly. Maybe right-click, Append Node... that pops up an editor for you to enter some markup?

Comment 2

[Patrick Brosset <:pbro>]

(In reply to Rob Campbell [:rc] (:robcee) from comment #1)
> if this feature is to provide quick lookup of known DOM nodes, is it an
> augmentation of the existing search feature? Could the search feature be
> improved to provide these shortcuts? (e.g., like the search functionality in
> the JS Debugger).
Yes, that definitely could be handled via the search feature somehow.

> As for inserting nodes, that feels like a separate bug. Definitely be a
> useful thing to be able to do quickly. Maybe right-click, Append Node...
> that pops up an editor for you to enter some markup?
This was not about inserting nodes in the DOM tree, but adding node shortcuts to the shortcuts panel.

Comment 3

[Joe Walker [:jwalker]]

What if the markup panel had a filter mechanism, so rather than a new panel, you just had a toggle somewhere, that turned filtering on and off. Nodes could then be added or removed from the filter using the context menu.

Comment 4

[Patrick Brosset <:pbro>]

Inspector bug triage (filter on CLIMBING SHOES).