Some Eclipse Foundation services are deprecated, or will be soon. Please ensure you've read this important communication.

Bug 421639

Summary:	[client][Projects] Improve "Project Information" table interaction with 'Tab' key
Product:	[ECD] Orion	Reporter:	Elijah El-Haddad <elijahe>
Component:	Client	Assignee:	Elijah El-Haddad <elijahe>
Status:	RESOLVED FIXED	QA Contact:
Severity:	normal
Priority:	P3	CC:	malgorzata.tomczyk, mamacdon
Version:	5.0	Flags:	malgorzata.tomczyk: review+
Target Milestone:	5.0 M1
Hardware:	PC
OS:	Windows 7
Whiteboard:

Description Elijah El-Haddad

2013-11-13 10:17:03 EST

This bug describes two closely related issues with how the page which containes the "Project Information" table handles pressing the 'Tab' key.

1) While editing the fields inside the "Project Information" table if the 'Tab' key is pressed the data entered in the input field is lost. 

This is an issue because 'Tab' is often the first key pressed intuitively by users who are filling in a form or a data field if they wish to move to the next field and edit the data there. A more intuitive response would be to save the data and move the focus to the next editable field on the page.


2) The tabindex for the input fields is not set (or not properly set). 

For example, when the page containing the "Project Information" table is first loaded, pressing 'Tab' doesn't automatically set the focus on the first editable input field, the "Name" field. What's more, pressing 'Tab' while editing the "Name" field doesn't set the focus on the second editable field, the "Description" field.

Comment 1 Elijah El-Haddad

2013-11-13 12:50:25 EST

Proposed fix committed to github repository: https://github.com/elijahe/orion.client/commit/1f6c36994b90492bf6f7e86dbcb81d4b1a9b268a

Please review and commit if ok.

Comment 2 Malgorzata Janczarska

2013-11-14 12:54:34 EST

As I said on the call before you should sign you CLA before your code is committed to Orion:
http://wiki.eclipse.org/CLA

Before I commit your code there are 2 things you can correct:
1. When the site field is empty there is no way to edit it, because an empty <a> tag has zero height, so it cannot be clicked for edit. Changing <a></a> to <a>&nbsp;</a> does the trick. You can also remove the href where site is empty, because <a href=""> in fact gives you a link to current page.
2. Tab-ing into Site field does not display the editable field. You still have to click it to edit.

Comment 3 Elijah El-Haddad

2013-11-14 15:14:07 EST

Thanks for the review. I have now signed the CLA. 

With regards to your review comments:

1) I noticed this issue this morning and corrected it by setting a min-height for the discreetInput class in ide.css. I made the following commit for it before reading your message: https://github.com/elijahe/orion.client/commit/08a5441c9b3119663e6ace99997e4f8e64fe3df7

If you're ok with this I think it is simpler than adding logic which modifies the innerHTML of the <a> tag. 

As for removing the href when the Site value is an empty string. In this case the <a href=""> isn't visible to the user and I wasn't able to click on it while testing. What's more, the state of the <a> tag will match the state of the "Url":"" in the project.json file. If you don't think that keeping the a.href will cause other issues I think it might be simpler and more consistent not to remove it.

2) Thanks for catching that. I noticed it this morning as well but wasn't sure if it should be changed. I'm glad that I now have a second opinion :-) The only way I could think of to change this is to give the url input field focus when the url selector gains focus. This will make it so that when you tab into the Site field you don't have to press Enter before you start editing. Rather you can start editing right away as you suggested. 

The only minor drawback to this approach is that clicking on the link <a> seems to also give the url selector <div> focus. That means that if you decide to follow the link by clicking on it, you will see the url field change from a <a> to an <input> for a moment until the browser loads the page pointed to by the link. If you're ok with this behavior here's the github url for the commit: 
https://github.com/elijahe/orion.client/commit/3c803a71932836b390a60263d5406db31a9982e1

If you have a better idea on how to solve this minor drawback however please let me know and I'll make the necessary modifications.

Comment 4 Malgorzata Janczarska

2013-11-15 13:26:21 EST

Now it's OK, pushed to master:
http://git.eclipse.org/c/orion/org.eclipse.orion.client.git/commit/?id=50eba8d61b6eeb19c932b7223ff147474029674b