Use text-overflow: ellipsis for long words in sync set-up UI. ...

Fix truncation in in the sync setup dialog on the 472 branch.

This is an extension of Jungshik's patch:  http://codereview.chromium.org/3142042/show

BUG=53494
TEST=1. Open sync setup UI in French, Italian, Brazilliant Portugest (pt-BR) and see if the translation for 'autofill' is ellipsized rather than truncated. 
2. Open sync setup UI and 'Choose what to sync:' is on the same line as the corresponding radio button.
3. If any strings are truncated, ellipsis-ized, resize the dialog wider to make them readable. 

Committed: http://src.chromium.org/viewvc/chrome?view=rev&revision=57639

[Mark Larson, 2010-08-27 05:38:30]

Jungshik's changes: 
------------------------------------- 
Use text-overflow: ellipsis for long words in sync set-up UI. 

In r57340, the datatype selection section of sync set-up UI got wider, but 
not wide enough to avoid truncation in all the locales. When a word 
is too long to fit, it's truncated with 'tooltip' showing the full-word. 

This CL adds 'text-overflow: ellipsis' and other necessary CSS properties 
to 'label' elements so that long words that do not fit are ellipsized instead of

truncated. 

Fixed the raido-button and the corresponding label is 
separated by 'div' tag (chooseDataTypesBody) leading to a strange line wrapping 
in the sync setup UI. 
------------------------------------- 

I added: 

-- add properties to the chooseDataTypesBody so that it's indented under the
label 
and scales if the user resizes the dialog (which might be more likely if some 
labels are cut off with ellipsis) 
-- remove the explicit width from chooseDataTypesBody > div so subdivs scale on
resize 
-- change the width of sync-item-show > label to a % so that label widths scale
on resize

[arv (Not doing code reviews), 2010-09-01 01:04:02]

http://codereview.chromium.org/3244001/diff/1/2
File chrome/browser/sync/resources/choose_datatypes.html (right):

http://codereview.chromium.org/3244001/diff/1/2#newcode34
chrome/browser/sync/resources/choose_datatypes.html:34: width: 90%;
This seems like the wrong solution. Maybe you want to use margins instead?

http://codereview.chromium.org/3244001/diff/1/2#newcode54
chrome/browser/sync/resources/choose_datatypes.html:54: width: 92%;
In general percentage widths are not that useful unless you actually mean 92%
(which I doubt). When you have to use these arbitrary percentage values it is
usually better to use width: 100%/auto and margins/paddings.

http://codereview.chromium.org/3244001/diff/1/2#newcode300
chrome/browser/sync/resources/choose_datatypes.html:300: <div
class="sync-item-show" id="autofillItem">
I think there is room for simplification here.

You can skip the div and use the following markup:

<label><input ...><span i18n-content ...></span></label>

Since the label is using display inline-block you need to ensure that there is
no whitespace between the labels.

Then set the width of the label to 50% and two labels will fit nicely in the
container and the ellipsis will work as expected.