[Engine-devel] attn ui devs: why do we use inputs for labels?

[Vojtech Szocs]

----- Original Message -----
> From: "Einav Cohen" <ecohen at redhat.com>
> To: "Greg Sheremeta" <gshereme at redhat.com>, "Vojtech Szocs" <vszocs at redhat.com>, "Gilad Chaplik"
> <gchaplik at redhat.com>, "Daniel Erez" <derez at redhat.com>, "Tomas Jelinek" <tjelinek at redhat.com>, "Lior Vernia"
> <lvernia at redhat.com>, "Kanagaraj" <kmayilsa at redhat.com>, "Alexander Wels" <awels at redhat.com>, "Alona Kaplan"
> <alkaplan at redhat.com>
> Cc: "engine-devel" <engine-devel at ovirt.org>
> Sent: Thursday, March 13, 2014 10:01:02 PM
> Subject: Re: [Engine-devel] attn ui devs: why do we use inputs for labels?
> 
> > ----- Original Message -----
> > From: "Greg Sheremeta" <gshereme at redhat.com>
> > Sent: Thursday, March 13, 2014 12:24:51 PM
> > 
> > 
> > 
> > ----- Original Message -----
> > > From: "Einav Cohen" <ecohen at redhat.com>
> > > To: "Greg Sheremeta" <gshereme at redhat.com>
> > > Cc: "engine-devel" <engine-devel at ovirt.org>
> > > Sent: Thursday, March 13, 2014 12:14:51 PM
> > > Subject: Re: [Engine-devel] attn ui devs: why do we use inputs for
> > > labels?
> > > 
> > > I could be wrong, but there is a chance that using "input type=text"
> > > allows selecting/copying the text, rather than a plain label, which
> > > doesn't allow that.
> > 
> > If that's the reason, it must be a quirky browser thing. I can select and
> > copy <label>s in Chrome.
> 
> there is a good chance that you are right - maybe this used to be the
> behavior in old browsers. Do you happen to know what is the behavior
> in other (modern) browsers (FF, IE)?
> 
> ui maintainers: anything else that you know/recall about why we are
> using "input type=text" in our code? any reason to not change it?

I've discussed this with Greg yesterday.

The reason for using <input type="text"> to render *value* labels,
as seen on the "General" sub-tab screenshot [1], is because:
* value text might be too long to fit the logical column
* we want to preserve consistent key/value grid layout (no wrapping)
* we want user to be able to easily copy value text in clipboard

In frontend code, TextBoxLabelBase class represents such (input-based)
labels. It attaches "mousedown" handler on <input> so that when you
right-click the <input>, all content (possibly too long to fit) will
be selected so you can conveniently select "Copy" in context-menu.

If we want to replace <input> with some text-only element, we will
need to address same concerns as mentioned above. Greg told me that
Chrome has issues with right-click select-all-text functionality,
so maybe we can file BZ for current implementation.

That being said, I'm all for improvement. For example, we could have
some <span> (or any other text-only element) that doesn't wrap when
its content is too long. However, we still need to deal with "copy
value that's possibly too long into clipboard" scenario, which is
can be quite problematic.

> 
> > 
> > > 
> > > I am not sure if there are any (additional?) advantages to using
> > > "input type=text" (the other UI maintainers will probably know
> > > better).
> > > 
> > > > I'd like to pursue correcting this, if possible.
> > > 
> > > if there is a more "correct" way that won't result in losing any
> > > existing functionality, +1.
> > > 
> > > ----
> > > Thanks,
> > > Einav
> > > 
> > > ----- Original Message -----
> > > > From: "Greg Sheremeta" <gshereme at redhat.com>
> > > > To: "engine-devel" <engine-devel at ovirt.org>
> > > > Sent: Thursday, March 13, 2014 11:02:15 AM
> > > > Subject: [Engine-devel] attn ui devs: why do we use inputs for labels?
> > > > 
> > > > Hi fellow UI developers,
> > > > 
> > > > Can someone explain why we are using "input type=text" fields to render
> > > > labels? (see screenshot[1]) This seems like bad practice for a few
> > > > reasons:
> > > >  * it's not semantic HTML
> > > >  * inputs do not have variable sizing like text. They cannot shrink
> > > >  down
> > > >  to
> > > >  the size of the text, which makes positioning difficult.
> > > >  * common browser extensions such as LastPass can be confused (see
> > > >  screenshot[1] -- lastpass sees these labels for the text fields they
> > > >  are,
> > > >  and attempts to help the user fill them in -- that's what those gray
> > > >  asterisks are. Very confusing.)
> > > > 
> > > > I'd like to pursue correcting this, if possible.
> > > > 
> > > > Thanks,
> > > > Greg
> > > > 
> > > > [1] http://i.imgur.com/AweOhJe.png
> > > > 
> > > > Greg Sheremeta
> > > > Red Hat, Inc.
> > > > Sr. Software Engineer, RHEV
> > > > Cell: 919-807-1086
> > > > gshereme at redhat.com
> > > > _______________________________________________
> > > > Engine-devel mailing list
> > > > Engine-devel at ovirt.org
> > > > http://lists.ovirt.org/mailman/listinfo/engine-devel
> > > > 
> > > 
> > _______________________________________________
> > Engine-devel mailing list
> > Engine-devel at ovirt.org
> > http://lists.ovirt.org/mailman/listinfo/engine-devel
> > 
> > 
> > 
>