1871806 - Surface / Add hint about rules view new "Enter" behavior

Status: RESOLVED FIXED

(DevTools :: Inspector: Rules, defect, P2)

Description

[Zachary Rollyson]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:122.0) Gecko/20100101 Firefox/122.0

Steps to reproduce:

Open the DevTools Inspector, select a DOM element and try to edit style rules.

Actual results:

When pressing the "enter" key the rule editor toggles between editing and navigating. "Enter" now only toggles the editing state, switching between edit mode and focus ring.

Expected results:

Enter should advance from property to value, then to next property, next value, and so on until a new property is made, or, if the new property field is empty, exits the edit mode. This is the way the behavior has been in FF for as long as I can remember. I wonder if this has something to do with the focus ring accessibility improvements from 121.

I'm calling this a defect rather than an enhancement just because the behavior change is annoying to adapt to and contrary to behavior in Chrome & Safari's rule editors, but if the new modal behavior is intended to be an accessibility feature it is not a very big deal.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'DevTools::Inspector: Rules' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Nicolas Chevobbe [:nchevobbe]]

Thanks for the report :)

(In reply to me from comment #0)

I'm calling this a defect rather than an enhancement just because the behavior change is annoying to adapt to and contrary to behavior in Chrome & Safari's rule editors, but if the new modal behavior is intended to be an accessibility feature it is not a very big deal.

This is indeed an accessibility feature. It is true that the previous behaviour existed for a very long time (probably since Firebug really, which explains why it then "migrated" to all browsers' DevTools).
From an accessibility point of view this could be very confusing, the only way to exit "edit" mode from the keyboard was to hit Escape, but it also rolls back whatever you entered in the field, so this could be annoying.

We have other accessibility fixes coming, like being able to focus the enable/disable property checkbox and all the various icons, which is something that isn't possible in other browsers, so I'm fine diverging with other tools if that benefits keyboard user in the end :)

Note that you can still move from input to input using the Tab key, which is what keyboard user would expect when interacting with form elements. I know that this could throw people off in the beginning, but I think this was the right thing to do and hopefully it won't take long before people get used to this (as far as I know, you can also "edit navigate" with the Tab key in the other browser devtools, so there's still a cross-browser way of doing the same thing)

Comment 3

[Zachary Rollyson]

That all makes sense, thank you for the thorough and thoughtful response, and for improving my perspective :-)

Perfectly happy to adjust my workflow a bit for better accessibility, and I imagine most others are too. I agree that it's the right thing to do, and no, I don't think it will take long to adjust.

Comment 5

[Nicolas Chevobbe [:nchevobbe]]

As we got feedback about this, it would be nice to add a notice/hint in the UI to highlight this change (maybe linking to our documentation or something)

Comment 6

[Julian Descottes [:jdescottes]]

Agreed to add a small notification on top of the ruleview, linking to a blog post (similar to the one we used for the console multiline mode).

Comment 7

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1871806 - [devtools] Add notice for Enter behavior in Rules view. r=#devtools-reviewers.

Depends on D197897

Comment 8

[BugBot [:suhaib / :marco/ :calixte]]

Set release status flags based on info from the regressing bug 1861674

Comment 9

[Donal Meehan [:dmeehan]]

Can this ride the trains with Fx123, or is it something we would need to consider as an uplift for Fx122?

Comment 10

[Nicolas Chevobbe [:nchevobbe]]

I'd like to have it uplifted to 122

Comment 11

[Nicolas Chevobbe [:nchevobbe]]

Attachment: WIP: Bug 1871806 - [devtools] Show notice at bottom, on Enter.

Depends on D197924

Comment 12

[Donal Meehan [:dmeehan]]

We are in the last week of beta for Fx122. 122.0b9 builds on 2024-01-12.

Comment 13

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/13107fcd50cf
[devtools] Add notice for Enter behavior in Rules view. r=devtools-reviewers,ochameau.

Comment 14

[Natalia Csoregi [:nataliaCs]]

https://hg.mozilla.org/mozilla-central/rev/13107fcd50cf

Comment 15

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1871806 - [devtools] Add notice for Enter behavior in Rules view. r=#devtools-reviewers.

A link points to a blog post explaining why we made the change.
Once the notice is closed by the user, it won't be opened again.
The notice is not localized so it's easier to uplift for now; it will
be localized in a follow up.

Original Revision: https://phabricator.services.mozilla.com/D197924

Comment 16

[Phabricator Automation]

Uplift Approval Request

• Fix verified in Nightly: no
• Explanation of risk level: devtools only, adding a simple element in the UI
• Is Android affected?: no
• String changes made/needed: -
• Steps to reproduce for manual QE testing: -
• User impact if declined: this patch a notice about an important UX change we did in 122. Not having this patch, the user could be confused about the new behavior
• Code covered by automated testing: yes
• Needs manual QE test: no
• Risk associated with taking this patch: low

Comment 17

[Pulsebot]

https://hg.mozilla.org/releases/mozilla-beta/rev/d260003b40f7