1501959 - [markup-view] "Add attribute" input should have a 1 character left margin

Status: RESOLVED FIXED

(DevTools :: Inspector, enhancement, P3)

Description

[Florens Verschelde :fvsch]

When using "Attributes > Add attribute" on a node in the Markup view, I'm always puzzled that I get a result looking like this (where | is the cursor):

<element| >

or, if there are existing attributes:

<element foo="bar" data-test-id="xyz"| >

Building on my knowledge of HTML, I know that if I write code like <elementmyattribute=""> or <element id="x"myattribute=""> it can break strangely (the second one seems to be fine in the HTML5 parsing algorithm era; maybe this just shows my age). So I always type `<space>myattribute="..."` in that input. Only today have I realized that it's not necessary. :P

I think adding a small space such as `margin-left: 1ch` to the text input would make things clearer.

Looking at what Chrome does: there's roughly one space between the input and the previous element name or attribute, but the input also has negative margins that eat into half of that space. The same style is used when editing element names and existing attributes.

Comment 1

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1501959 - [devtools] Add inline start margin on new attribute input. r=#devtools-reviewers.

To be able to target the specific inplace editor input,
we add a new inputClass option to InplaceEditor that can
be used to add an additional class to the input.

Comment 2

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/f021d9a82187
[devtools] Add inline start margin on new attribute input. r=devtools-reviewers,ochameau.

Comment 3

[Cosmin Sabou [:CosminS]]

https://hg.mozilla.org/mozilla-central/rev/f021d9a82187