Make the choose datatypes section of sync setup UI wider and supply titles for the labels so that the long text can be seen on hover even if it still doesn't fit.

BUG=52789
TEST=open sync setup ui in a language with long words

Review URL: http://codereview.chromium.org/3197019

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@57340 0039d316-1c4b-4281-b951-d872f2087c98

1 files changed, 16 insertions, 9 deletions

diff --git a/chrome/browser/sync/resources/choose_datatypes.html b/chrome/browser/sync/resources/choose_datatypes.html
index fa2e58a..88afcf2 100644
--- a/chrome/browser/sync/resources/choose_datatypes.html
+++ b/chrome/browser/sync/resources/choose_datatypes.html
@@ -38,7 +38,7 @@ form {
   -webkit-column-gap: 10px;
   column-count: 2;
   column-gap: 10px;
-  width: 250px;
+  width: 375px;
 }
 .sync-item-show {
   display: block;
@@ -297,49 +297,56 @@ html[os='mac'] input[type='submit'] {
      <div class="sync-item-show" id="appsItem">
        <input id="appsCheckbox" name="dataTypeCheckbox" type="checkbox">
        <label id="appsCheckboxLabel" name="dataTypeLabel" 
-              for="appsCheckbox" i18n-content="apps"></label>
+              for="appsCheckbox" i18n-content="apps"
+              i8n-values="title:apps"></label>
      </div>
      <!-- Autofill -->
      <div class="sync-item-show" id="autofillItem">
        <input id="autofillCheckbox" name="dataTypeCheckbox" type="checkbox">
        <label id="autofillCheckboxLabel" name="dataTypeLabel" 
-              for="autofillCheckbox" i18n-content="autofill"></label>
+              for="autofillCheckbox" i18n-content="autofill"
+              i18n-values="title:autofill"></label>
      </div>
      <!-- Bookmarks -->
      <div class="sync-item-show" id="bookmarksItem">
        <input id="bookmarksCheckbox" name="dataTypeCheckbox" type="checkbox">
        <label id="bookmarksCheckboxLabel" name="dataTypeLabel" 
-              for="bookmarksCheckbox" i18n-content="bookmarks"></label>
+              for="bookmarksCheckbox" i18n-content="bookmarks"
+              i18n-values="title:bookmarks"></label>
      </div>
      <!-- Extensions -->
      <div class="sync-item-show" id="extensionsItem">
        <input id="extensionsCheckbox" name="dataTypeCheckbox" type="checkbox">
        <label id="extensionsCheckboxLabel" name="dataTypeLabel" 
-              for="extensionsCheckbox" i18n-content="extensions"></label>
+              for="extensionsCheckbox" i18n-content="extensions"
+              i18n-values="title:extensions"></label>
      </div>
      <!-- Omnibox -->
      <div class="sync-item-show" id="omniboxItem">
        <input id="typedUrlsCheckbox" name="dataTypeCheckbox" type="checkbox">
        <label id="typedUrlsCheckboxLabel" name="dataTypeLabel" 
-              for="typedUrlsCheckbox" i18n-content="typedurls"></label>
+              for="typedUrlsCheckbox" i18n-content="typedurls"
+              i18n-values="title:typedurls"></label>
      </div>
      <!-- Passwords -->
      <div class="sync-item-show" id="passwordsItem">
        <input id="passwordsCheckbox" name="dataTypeCheckbox" type="checkbox">
        <label id="passwordsCheckboxLabel" name="dataTypeLabel" 
-              for="passwordsCheckbox" i18n-content="passwords"></label>
+              for="passwordsCheckbox" i18n-content="passwords"
+              i18n-values="title:passwords"></label>
      </div>
      <!-- Preferences -->
      <div class="sync-item-show" id="preferencesItem">
        <input id="preferencesCheckbox" name="dataTypeCheckbox" type="checkbox">
        <label id="preferencesCheckboxLabel" name="dataTypeLabel" 
-              for="preferencesCheckbox" i18n-content="preferences"></label>
+              for="preferencesCheckbox" i18n-content="preferences"
+              i18n-values="title:preferences"></label>
      </div>
      <!-- Themes -->
      <div class="sync-item-show" id="themesItem">
        <input id="themesCheckbox" name="dataTypeCheckbox" type="checkbox">
        <label id="themesCheckboxLabel" name="dataTypeLabel" for="themesCheckbox"
-              i18n-content="themes"></label>
+              i18n-content="themes" i18n-values="title:themes"></label>
      </div>
   </div>
   </div>