Settings: Fix erroneous hyphens shown in import data dialog.

A <span hidden> within an <option> tag does not work as normally
does, since <span> is not a valid child for a <select>, which was
the reason for the incorrect behavior.

Fixed: 1061324
Change-Id: Ib7e3e6a67f1471d578c0b82ec689825e6be7e147
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2103444
Commit-Queue: John Lee <johntlee@chromium.org>
Reviewed-by: John Lee <johntlee@chromium.org>
Auto-Submit: dpapad <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#750642}

chrome/browser/resources/settings/people_page/import_data_dialog.html

@@ -65,10 +65,7 @@
               on-change="onBrowserProfileSelectionChange_">
             <template is="dom-repeat" items="[[browserProfiles_]]">
               <option value="[[item.index]]">
-                [[item.name]]
-                <span hidden$="[[!item.profileName]]">
-                  - [[item.profileName]]
-                </span>
+                [[getProfileDisplayName_(item.name, item.profileName)]]
               </option>
             </template>
           </select>

chrome/browser/resources/settings/people_page/import_data_dialog.js

@@ -70,6 +70,16 @@ Polymer({
     });
   },
 
+  /**
+   * @param {string} name
+   * @param {string} profileName
+   * @return {string}
+   * @private
+   */
+  getProfileDisplayName_(name, profileName) {
+    return profileName ? `${name} - ${profileName}` : name;
+  },
+
   /** @private */
   prefsChanged_() {
     if (this.selected_ == undefined || this.prefs == undefined) {

chrome/test/data/webui/settings/import_data_dialog_test.js

@@ -49,11 +49,21 @@ suite('ImportDataDialog', function() {
       passwords: true,
       search: true
     },
+    {
+      autofillFormData: true,
+      favorites: true,
+      history: true,
+      index: 1,
+      name: 'Mozilla Firefox',
+      passwords: true,
+      profileName: 'My profile',
+      search: true
+    },
     {
       autofillFormData: false,
       favorites: true,
       history: false,
-      index: 1,
+      index: 2,
       name: 'Bookmarks HTML File',
       passwords: false,
       search: false
@@ -104,6 +114,18 @@ suite('ImportDataDialog', function() {
     assertFalse(dialog.$.cancel.disabled);
     assertTrue(dialog.$.done.hidden);
     assertTrue(dialog.$.successIcon.parentElement.hidden);
+
+    // Check that the displayed text correctly combines browser name and profile
+    // name (if any).
+    const expectedText = [
+      'Mozilla Firefox',
+      'Mozilla Firefox - My profile',
+      'Bookmarks HTML File',
+    ];
+
+    Array.from(dialog.$.browserSelect.options).forEach((option, i) => {
+      assertEquals(expectedText[i], option.textContent.trim());
+    });
   });
 
   test('ImportButton', function() {
@@ -116,7 +138,7 @@ suite('ImportDataDialog', function() {
     assertTrue(dialog.$.import.disabled);
 
     // Change browser selection to "Import from Bookmarks HTML file".
-    simulateBrowserProfileChange(1);
+    simulateBrowserProfileChange(2);
     assertTrue(dialog.$.import.disabled);
 
     // Ensure everything except |import_dialog_bookmarks| is ignored.
@@ -151,7 +173,7 @@ suite('ImportDataDialog', function() {
   }
 
   test('ImportFromBookmarksFile', function() {
-    simulateBrowserProfileChange(1);
+    simulateBrowserProfileChange(2);
     dialog.$.import.click();
     return browserProxy.whenCalled('importFromBookmarksFile').then(function() {
       simulateImportStatusChange(settings.ImportDataStatus.IN_PROGRESS);