Closed Bug 1594382 Opened 4 years ago Closed 4 years ago

Debugger - Event listener section can be toggled after clicking on log on Events checkbox

Categories

(DevTools :: Debugger, defect, P2)

defect

Tracking

(firefox70 unaffected, firefox71 wontfix, firefox72 wontfix, firefox73 wontfix, firefox74 verified)

VERIFIED FIXED
Firefox 74
Tracking Status
firefox70 --- unaffected
firefox71 --- wontfix
firefox72 --- wontfix
firefox73 --- wontfix
firefox74 --- verified

People

(Reporter: cfogel, Assigned: stepan)

References

Details

(Keywords: good-first-bug)

Attachments

(2 files)

Attached image DTLogToggle.gif

Affected versions

  • 71.0b7, 72.0a1 (2019-11-05);

Affected platforms

  • all

Steps to reproduce

  1. Launch Firefox, enable DevTools; access the Debugger tab;
  2. @ the breakpoints the Event Listener Breakpoints;
  3. Click on the Log Events checkbox;
  4. Press the SPACE key on the keyboard 2x times;

Expected result

  • checkbox is toggled on/off;

Actual result

  • section is collapsed/expanded as well as the button_status toggle;

Regression range

  • Pushlog URL;
  • Not a regression, visible with introduction of monitorEvents/Event Tracing feature in bug 1110276;

Additional notes

  • 70.0.1 not affected;
  • see screenshot for reference.

Bugbug thinks this bug is a regression, but please revert this change in case of error.

Keywords: regression
Keywords: regression

I would like to work on this but I'm a complete beginner.

Flags: needinfo?(jemimahsummers)

Is this one still available? If so, I'd like to take it.

@ste(In reply to Stepan Stava from comment #3)

Is this one still available? If so, I'd like to take it.

I was assigned to work on it, Stepan. However, I've been having network issues setting up the repo locally. If you'd like to work on it immediately, please go ahead. I can pick a different issue once I'm all set up.

Flags: needinfo?(jemimahsummers) → needinfo?(obdelnik)

I am sorry Jemimah, I didn't know you were assigned to it. I've worked on it for a while and came up with this solution.

I noticed when the 'Log' checkbox gets clicked and the space bar is pressed, it doesn't trigger only a 'change' event on the 'Log' checkbox but also a 'keydown' event on its parent 'Event Listener Breakpoints' header element. This causes toggling both 'Log' checkbox and 'Event Listener Breakpoints' section at the same time when the space bar is pressed as shown on the attached gif.

My solution would be to add an 'onKeyDown' event handler to the 'Log' checkbox element with a 'stopPropagation()' method preventing the 'key down' event from triggering on the parent header element when the space bar is pressed so the 'Event Listener Breakpoints' section doesn't expand or collapse and only the 'Log' checkbox toggles.

Let me please know what you think of this approach.

Flags: needinfo?(obdelnik)

Thanks Stepan for the help!

Jason, WDYT about the previous comment?

Honza

Assignee: nobody → obdelnik
Status: NEW → ASSIGNED
Flags: needinfo?(jlaster)

(In reply to Stepan Stava from comment #5)

I am sorry Jemimah, I didn't know you were assigned to it. I've worked on it for a while and came up with this solution.

Hey, Stepan. Apologies for my late reply (and no sorries needed).

I noticed when the 'Log' checkbox gets clicked and the space bar is pressed, it doesn't trigger only a 'change' event on the 'Log' checkbox but also a 'keydown' event on its parent 'Event Listener Breakpoints' header element. This causes toggling both 'Log' checkbox and 'Event Listener Breakpoints' section at the same time when the space bar is pressed as shown on the attached gif.

My solution would be to add an 'onKeyDown' event handler to the 'Log' checkbox element with a 'stopPropagation()' method preventing the 'key down' event from triggering on the parent header element when the space bar is pressed so the 'Event Listener Breakpoints' section doesn't expand or collapse and only the 'Log' checkbox toggles.

Let me please know what you think of this approach.

I think your approach makes sense, but let's hear from someone more acquainted than I am with the source.

Added 'onKeyDown' event handler with a 'stopPropagation()' method preventing the 'keydown' event from triggering on the parent element.

Pushed by jlaster@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/d6551c5af648
Debugger - Event listener section can be toggled after clicking on log on Events checkbox r=jlast
Status: ASSIGNED → RESOLVED
Closed: 4 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 74

Since the status are different for nightly and release, what's the status for beta?
For more information, please visit auto_nag documentation.

I've pulled the newest code, which includes Stepan's change, and it does not appear that this bug is resolved. The behavior remains the same.

I've recorded a screencast here to show that the behavior is still actual: https://www.loom.com/share/596284a7911b41489f956c61ab158f44

Flags: needinfo?(obdelnik)

Hi AJ, thanks for looking at this.
On the video, it seems that you are not focused on the checkbox but on the 'Event Listener Breakpoints' header, because the 'Log' checkbox doesn't toggle when you press the space bar. On the attached gif you can see that the header and checkbox toggle at the same time.

Could you please try to click on the checkbox and press space bar. It should toggle only that checkbox.

Flags: needinfo?(obdelnik) → needinfo?(alexand.dominguez)

When we tested AJ's comment we noticed that checkbox behaves unexpectedly on MacOS when the spacebar is pressed.

Tested versiosns:
-Version 72.0.2 (64-bit) MacOS
-Version 72.0.2 (64-bit) Windows - works fine

Steps to reproduce:

  1. Go to https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox
  2. Click on any checkbox
  3. Press spacebar

AR:
The checkbox loses focus and the page is scrolled down.

ER:
The checkbox toggles.

I don't think this is related to the debugger, but I'm not sure if it's some core issue on different operating systems and where to report it.

See Also: → 1612798

Indeed this particular issue is fixed after checking with 74.0a1 (2020-02-02) on Windows 10 and Ubuntu 18.04.
However with macOS(10.15) the issue reported on comment 12 still persists.

It is something that I overlooked while filling this issue.
In regards to that, I've went ahead and filled a separate issue for it with bug 1612798 and clearing the needinfo on Alex.

Status: RESOLVED → VERIFIED
Flags: needinfo?(alexand.dominguez)
Flags: needinfo?(jlaster)
You need to log in before you can comment on or make changes to this bug.