1822355 - Element icon in animation panel is confusing

Status: RESOLVED FIXED

(DevTools :: Inspector: Animations, defect, P3)

Description

[Henrik Skupin [:whimboo][⌚️UTC+1]]

Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:109.0) Gecko/20100101 Firefox/112.0 ID:20230311212417

Clicking the element locator (cross icon) in the animation panel right next to the element doesn't focus the element in the inspector.

Steps:

1. Open a page with animations like this one.
2. Open DevTools inspector and select the animation panel
3. Try to let the inspector focus on any of the elements by clicking on the cross.

With step 3 nothing happens and the element cannot be located in the inspector.

Comment 1

[Henrik Skupin [:whimboo][⌚️UTC+1]]

Actually this icon does only highlight the element in web page, which is stated by the popup content as well. I didn't notice that clicking on the actual element entry in the animation panel really focuses the element in the inspector.

Comment 2

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1822355 - [devtools] Switch from mask to background image for Reps open in inspector icon. r=#devtools-reviewers.

Comment 3

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1822355 - [devtools] Allow to pass a custom class for the icon in ElementNode rep. r=#devtools-reviewers.

Depends on D173961

Comment 4

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1822355 - [devtools] Change icon for highlighting node in animation panel. r=#devtools-reviewers.

Depends on D173962

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/89a1e28c8ce3
[devtools] Switch from mask to background image for Reps open in inspector icon. r=devtools-reviewers,jdescottes.
https://hg.mozilla.org/integration/autoland/rev/1e7cdf012417
[devtools] Allow to pass a custom class for the icon in ElementNode rep. r=devtools-reviewers,jdescottes.
https://hg.mozilla.org/integration/autoland/rev/7eeabcf1bfb3
[devtools] Change icon for highlighting node in animation panel. r=devtools-reviewers,jdescottes.

Comment 6

[Norisz Fay [:noriszfay]]

https://hg.mozilla.org/mozilla-central/rev/89a1e28c8ce3
https://hg.mozilla.org/mozilla-central/rev/1e7cdf012417
https://hg.mozilla.org/mozilla-central/rev/7eeabcf1bfb3