Layer Panel: replace inactive text Input with Div element

[shaoshing]

Chrome has a bug when rendering inactive (disabled) text input elements, which results in increased rendering time. This PR changes the TextInput element to work around the issue: instaed of rendering text input with disabled attribute, it renders a div element when the component is not in edit mode. The performance improvement is significant, and below is my test result (the numbers are brower rendering time):

	Before	After	Change
Layer selection	32ms	21ms	-11ms
AB selection	286ms	29ms	-257ms
Collapse AB	37ms	48ms	+11ms
Expand AB	326ms	91ms	-235ms
AB Visibility	309ms	82ms	-227ms

Below are the panels with style issues due to the change, and should be addressed in a separate PR.

• libraries panel
• export panel

Credits to @iwehrman and @designedbyscience for their initial research/experiments

[iwehrman]

I don't think click events work in LayerFace when it's in editing mode. I can double-click to enter editing mode, but then I can't click to position the cursor.

[iwehrman]

This also drastically reduces the time to switch into Vermilion from an untitled document, from ~1200ms to 400ms.

[iwehrman]

The descenders are also clipped in LayerFace:

This is something that I'm pretty sure I explicitly fixed in my original branch.

[shaoshing]

@iwehrman I did not see the style bug your mentioned in different screen resolution. Can you show me your screen configuration? I found the grunt debug task sometimes did not pick up the change in LESS files unless I restart it, may be this is the cause?

[iwehrman]

I only have non-retina to test at the moment, but it looks good at different UI sizes, so I think your theory about grunt debug not catching the updated styles are correct. The updated TextInput structure looks good, and editing works again. Thanks for pushing this over the line, @shaoshing!