Closed Bug 1614549 Opened 2 months ago Closed 1 month ago

Highlight DOM elements from instant evaluation

Categories

(DevTools :: Console, enhancement, P3)

enhancement

Tracking

(firefox75 fixed)

RESOLVED FIXED
Firefox 75
Tracking Status
firefox75 --- fixed

People

(Reporter: Harald, Assigned: nchevobbe)

References

(Blocks 1 open bug)

Details

User Story

When exploring DOM elements in the Console input, I want to highlight the elements I found while typing, so that I can quickly double-check them.

Attachments

(2 files)

No description provided.

Do you mean we should automatically highlight the element as soon as it is rendered in the eager evaluation result?
or do you mean it should have the same functionality as logged element in the output (hovering highlights them, clicking on the icon jump to inspector) ?
That's something we could also have in the autocomplete popup (as you navigate in it, we could highlight the element in the page)

Do you mean we should automatically highlight the element as soon as it is rendered in the eager evaluation result?

If the current expression points to an element, it should be highlighted, yes. I recommend giving it a spin in Chrome.

or do you mean it should have the same functionality as logged element in the output (hovering highlights them, clicking on the icon jump to inspector) ?

No, hover should NOT be required.

That's something we could also have in the autocomplete popup (as you navigate in it, we could highlight the element in the page)

Yes. I thought this would be mostly covered by instant evaluation; as the autocomplete triggers it – but having something separate could also work. For which use cases would we need highlighting via autocomplete vs instant eval?

For which use cases would we need highlighting via autocomplete vs instant eval?

when the user disabled instant eval maybe?

Assignee: nobody → nchevobbe
Status: NEW → ASSIGNED
Pushed by nchevobbe@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/a169b2355d8d
Highlight DOM elements from instant evaluation. r=jlast.
Status: ASSIGNED → RESOLVED
Closed: 1 month ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 75

(In reply to Nicolas Chevobbe [:nchevobbe] from comment #1)

Do you mean we should automatically highlight the element as soon as it is rendered in the eager evaluation result?

I would definitely prefer this. If I want to evaluate document.body.offsetWidth, between typing document.body and adding the 2nd . the whole screen will flicker blue. This will be unexpected and will interrupt me.

(In reply to :Harald Kirschner :digitarald from comment #2)

No, hover should NOT be required.

That's so visually disrupting. Hover should be required.

I would definitely prefer this. If I want to evaluate document.body.offsetWidth, between typing document.body and adding the 2nd . the whole screen will flicker blue. This will be unexpected and will interrupt me.

This landed and I don't see flickering. Is there an STR I am missing?

Flags: needinfo?(oriol-bugzilla)
Attached video annoyance.webm

I mean this. I just want to see document.body.offsetHeight, but while typing it the page becomes blue temporarily.

Flags: needinfo?(oriol-bugzilla)
Regressions: 1616654
You need to log in before you can comment on or make changes to this bug.