Long usernames should be cut off with an ellipsis instead of breaking the left keyline.

I'll look at 3) about the ripple effect.

 Issue 672417  has been merged into this issue.

@tbuckley: Cutting off the username and adding ellipsis presents the user with no option to see the entire username. How about allowing the text to break line as in the screenshot (long_email_break_word.png)?

Also, note that the same problem happens with long URLs, and it is also happening with not so long usernames/URLs if the user selects "Very large" font (see long_url.png).

Deleted: long_email_break_word.png 12.2 KB

	long_email_break_word.png 12.2 KB View Download

Deleted: long_url.png 10.6 KB

	long_url.png 10.6 KB View Download

Also note that breaking word is possible with
overflow-wrap: break-word;
overflow: hidden;

see https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap.

@dpapad, not sure if sufficient for your concerns, but: 

Users who really wanna see their user name can click on the overflow menu > view details, and there's a readonly text-field where user can select text and drag to the end of the text-field to see their full username (Same for website urls).

(See attached video) 

Deleted: long_name_demo.mov 306 KB

long_name_demo.mov 306 KB Download

Regarding break-word, I'd be concerned with very long url breaking out of the row's layout and infecting the rows below.

+bettes
We are adding a lot of extra actions to the user.

1) Click to open overflow menu
2) Click "View details"
3) Select text and drag to the right (even though the dialog has plenty of space on the right, we limit the width of the textbox unnecessarily).

Imagine a user wants to quickly inspect a large list of password entries. They would have to repeat 1,2,3 N times, versus 0 actions if everything was visible with break-word in the main list.


In addition, seeing my actual password is burried under 3 extra clicks (overflow-> "View details"-> eye icon), compared to old settings. Here is an example of a user who could not find that icon (https://bugs.chromium.org/p/chromium/issues/detail?id=666080).

Ultimately UX should make a decision on whether the extra clicks are a problem. IMO it an issue, because:

1) We waste a lot of screen real estate by not adjusting the Settings page width based on available space (issue 644535), which is hardcoded to 646px.
2) We have an even shorter fixed dialog width under "View details" at 512px.
3) We have an even shorter textbox width within the dialog at 264px.

See attachment.

Deleted: text_trimmed_plenty_of_wasted_space.png 70.4 KB

	text_trimmed_plenty_of_wasted_space.png 70.4 KB View Download

Agree on artificial width being unnecessary (especially the text-input width inside the fixed-width modal).

Considering this bug is marked as a Pri-1 blocker (on the basis that long names will break layout), should we land the simple ellipsis fix first (https://codereview.chromium.org/2655483002/), then open a separate bug for improving usability as you outlined above to be prioritized separately?

By the way, if anyone's looking at that page and noticed something funky with the website urls focus outline, there's already a separate bug tracking that  https://crbug.com/684059 .

I am fine addressing/discussing the inline editing VS modal dialog flow in a separate bug.

But for the ellipsis VS break-word let's just wait until we hear a word from Alan. Alan, see comment#8 for the proposed break-word approach for usernames, VS the ellipsis approach at http://imgur.com/a/vxJx4.

Hiya. I prefer using ellipsis over the break-word approach. Breakword, although saving a few pixels looks too much like a bug. 

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/274ea861440c642cd4180cffe937c6cb42342aee

commit 274ea861440c642cd4180cffe937c6cb42342aee
Author: scottchen <scottchen@chromium.org>
Date: Sat Jan 28 01:58:24 2017

MD Settings: Fix long username breaking layout in manage-password page.

BUG= 619777 
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation

Review-Url: https://codereview.chromium.org/2655483002
Cr-Commit-Position: refs/heads/master@{#446879}

[modify] https://crrev.com/274ea861440c642cd4180cffe937c6cb42342aee/chrome/browser/resources/settings/passwords_and_forms_page/passwords_section.html