1907803 - Focused tagname/attribute is hard to differentiate from inplace editor input with selected text

Status: RESOLVED FIXED

(DevTools :: Inspector, defect, P3)

Description

[Nicolas Chevobbe [:nchevobbe][PTO - back on October 21]]

Attachment: top: focused tagname , bottom: inplace editor with selected text

Editing tagname / attributes in the markup view can be frustrating as the different state (selected node, focused element, inplace editor) look exactly the same, making it hard for the user to know what state they're currently in

Comment 1

[Nicolas Chevobbe [:nchevobbe][PTO - back on October 21]]

Attachment: Bug 1907803 - [devtools] Make inplace editor editing in markup view less confusing. r=#devtools-reviewers.

Update inplace editor "target" (tagname, attribute, …) focus style so it stands
out much more from the other items in the selected node line.
Since this wouldn't be easy/possible to do with the line "parts" colors set in
the themes stylesheet via theme-fg-color* classes, we remove those, add specific
classes when needed, and set the colors in markup.css.

When an inplace editor input is displayed, remove the "selected" style (blue background, white color)
from the line, so it's easier to understand we're in a different state.

Comment 2

[Nicolas Chevobbe [:nchevobbe][PTO - back on October 21]]

Attachment: Bug 1907803 - [devtools] Add icon on new attribute button when focused. r=#devtools-reviewers.

Comment 3

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

There are some r+ patches which didn't land and no activity in this bug for 2 weeks.
:nchevobbe, could you have a look please?
If you still have some work to do, you can add an action "Plan Changes" in Phabricator.
For more information, please visit BugBot documentation.

Comment 4

[Nicolas Chevobbe [:nchevobbe][PTO - back on October 21]]

Waiting for the new cycle to land the patches

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/f6c9dd152cfa
[devtools] Make inplace editor editing in markup view less confusing. r=devtools-reviewers,ochameau.
https://hg.mozilla.org/integration/autoland/rev/9f53c73eda39
[devtools] Add icon on new attribute button when focused. r=devtools-reviewers,ochameau.

Comment 6

[Cosmin Sabou [:CosminS]]

https://hg.mozilla.org/mozilla-central/rev/f6c9dd152cfa
https://hg.mozilla.org/mozilla-central/rev/9f53c73eda39