653534 - Create basic Annotations feature for the Highlighter

Status: RESOLVED WONTFIX

(DevTools :: Inspector, defect)

Description

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

When a node is highlighted, some basic information about that node is displayed on or adjacent to it. In the future we'll add the ability to create annotations, but for now, we want the node's ID and class attributes displayed. The tagname should also appear in the node itself as a button to activate the HTML panel with the selected node highlighted.

The annotation "tags" will be floating HTML text super-imposed over the highlighter. This should allow easy copy and pasting of the text contained in them.

Comment 1

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

I think this functionality can largely be replicated by using $0 on the web console. I still think having the ability to display information about a node in a popup would be interesting.

moving to Inspector.

Comment 2

[Paul Rouget [:paul]]

We could use a new tab in the inspector sidebar. Empty by default, with a "create dynamic annotation" button.

Bug triage, filter on PINKISBEAUTIFUL

Comment 3

[Patrick Brosset <:pbro>]

I like the idea. Even if this bug hasn't moved in a while and I've never heard of such feedback, I think there's something to be done here.
It feels like some sort of customization of the highlighter/inspector to me, maybe even something that could be open to addons.

Often times in the past, I've had to add js properties to DOM objects, like linking a data model object to the node that was used to render it using a template for instance:
`myDomNode._data = myData;`
In these cases, I often found myself exploring the DOM until I found the node(s) that had a `_data` property, only, since this wasn't an attribute, but a property, the markup-view wouldn't show it.
So perhaps this could help.

I totally can see addons for angular or ember using this kind of inspector extension hook too.

UI-wise however, I don't know how this could be done. We need some sort of input where users can enter code that runs with a given node as argument, and that returns information to be displayed in the infobar (or perhaps return data that is used to style nodes in the markup-view differently).

Comment 4

[Patrick Brosset <:pbro>]

Let's close this for now. Old idea that never got much traction, and it seems more useful for addons to do this.