[Card unmask dialog] Use non-breakable space for number obfuscation

This is a PE fix for the CVC dialog.

The current credit card number obfuscation approach uses U+2006
(SIX-PER-EM SPACE) to add a small space between bullets and between
the last bullet and the first unobfuscated digit. However, that
character works as a simple space and allows line breaks inside the
obfuscated number on multiline dialog titles.

This CL adds U+2060 (WORD-JOINER) characters between bullets and
spaces in the obfuscated strings, so they can't be broken into
separate lines. A previous version tried to use U+202F (NARROW
NO-BREAK SPACE), but unfortunately the result looked too spacey on
Android. The new character is invisible, so the only visual change
is that now obfuscated numbers can't be broken.

Screenshots in the bug.

Bug: 873816
Change-Id: I927be848d2f63a5a76486668baebe64e7eb304f6
Reviewed-on: https://chromium-review.googlesource.com/1173338Reviewed-by: Rouslan Solomakhin <rouslan@chromium.org>
Reviewed-by: Roger McFarlane <rogerm@chromium.org>
Commit-Queue: Fabio Tirelo <ftirelo@chromium.org>
Cr-Commit-Position: refs/heads/master@{#584084}

chrome/android/javatests/src/org/chromium/chrome/browser/autofill/PersonalDataManagerTest.java

@@ -152,11 +152,12 @@ public class PersonalDataManagerTest {
         Assert.assertEquals("Visa", storedCard.getName());
         Assert.assertEquals("10", storedCard.getMonth());
         Assert.assertEquals("4012888888881881", storedCard.getNumber());
-        // \u0020\...\u2006 is four dots ellipsis, \u202A is the Left-To-Right Embedding (LTE) mark,
+        // \u0020\...\u2060 is four dots ellipsis, \u202A is the Left-To-Right Embedding (LTE) mark,
         // \u202C is the Pop Directional Formatting (PDF) mark. Expected string with form
         // 'Visa  <LRE>****1881<PDF>'.
-        Assert.assertEquals("Visa\u0020\u0020\u202A\u2022\u2006\u2022\u2006\u2022\u2006\u2022"
-                        + "\u20061881\u202C",
+        Assert.assertEquals(
+                "Visa\u0020\u0020\u202A\u2022\u2060\u2006\u2060\u2022\u2060\u2006\u2060\u2022"
+                        + "\u2060\u2006\u2060\u2022\u2060\u2006\u20601881\u202C",
                 storedCard.getObfuscatedNumber());
         Assert.assertNotNull(mHelper.getCreditCard(cardTwoGUID));
     }

chrome/android/javatests/src/org/chromium/chrome/browser/payments/PaymentRequestPaymentAppAndCardsTest.java

@@ -165,17 +165,20 @@ public class PaymentRequestPaymentAppAndCardsTest implements MainActivityStartCa
             Assert.assertEquals(
                     "https://bobpay.com", mPaymentRequestTestRule.getPaymentInstrumentLabel(i++));
         }
-        // \u0020\...\u2006 is four dots ellipsis, \u202A is the Left-To-Right Embedding (LTE) mark,
+        // \u0020\...\u2060 is four dots ellipsis, \u202A is the Left-To-Right Embedding (LTE) mark,
         // \u202C is the Pop Directional Formatting (PDF) mark. Expected string with form
         // 'Visa  <LRE>****1111<PDF>\nJoe Doe'.
-        Assert.assertEquals("Visa\u0020\u0020\u202A\u2022\u2006\u2022\u2006\u2022\u2006\u2022\u2006"
-                        + "1111\u202C\nJon Doe",
+
+        Assert.assertEquals(
+                "Visa\u0020\u0020\u202A\u2022\u2060\u2006\u2060\u2022\u2060\u2006\u2060\u2022"
+                        + "\u2060\u2006\u2060\u2022\u2060\u2006\u20601111\u202C\nJon Doe",
                 mPaymentRequestTestRule.getPaymentInstrumentLabel(i++));
         // Expected string with form
         // 'Visa  <LRE>****5454<PDF>\nJoe Doe\nBilling address required'.
         Assert.assertEquals(
-                "Mastercard\u0020\u0020\u202A\u2022\u2006\u2022\u2006\u2022\u2006\u2022\u2006"
-                        + "5454\u202C\nJon Doe\nBilling address required",
+                "Mastercard\u0020\u0020\u202A\u2022\u2060\u2006\u2060\u2022\u2060\u2006\u2060"
+                        + "\u2022\u2060\u2006\u2060\u2022\u2060\u2006\u20605454\u202C\nJon Doe\n"
+                        + "Billing address required",
                 mPaymentRequestTestRule.getPaymentInstrumentLabel(i++));
 
         // Check the output of the selected instrument.

chrome/android/javatests/src/org/chromium/chrome/browser/payments/PaymentRequestPaymentAppsSortingTest.java

@@ -105,12 +105,12 @@ public class PaymentRequestPaymentAppsSortingTest implements MainActivityStartCa
                 "https://bobpay.com", mPaymentRequestTestRule.getPaymentInstrumentLabel(1));
         Assert.assertEquals(
                 "https://alicepay.com", mPaymentRequestTestRule.getPaymentInstrumentLabel(2));
-        // \u0020\...\u2006 is four dots ellipsis, \u202A is the Left-To-Right Embedding (LTE) mark,
+        // \u0020\...\u2060 is four dots ellipsis, \u202A is the Left-To-Right Embedding (LTE) mark,
         // \u202C is the Pop Directional Formatting (PDF) mark. Expected string with form
         // 'Visa  <LRE>****1111<PDF>\nJoe Doe'.
         Assert.assertEquals(
-                "Visa\u0020\u0020\u202A\u2022\u2006\u2022\u2006\u2022\u2006\u2022\u20061111"
-                        + "\u202C\nJon Doe",
+                "Visa\u0020\u0020\u202A\u2022\u2060\u2006\u2060\u2022\u2060\u2006\u2060\u2022"
+                        + "\u2060\u2006\u2060\u2022\u2060\u2006\u20601111\u202C\nJon Doe",
                 mPaymentRequestTestRule.getPaymentInstrumentLabel(3));
 
         // Cancel the Payment Request.
@@ -143,12 +143,12 @@ public class PaymentRequestPaymentAppsSortingTest implements MainActivityStartCa
                 "https://charliepay.com", mPaymentRequestTestRule.getPaymentInstrumentLabel(1));
         Assert.assertEquals(
                 "https://bobpay.com", mPaymentRequestTestRule.getPaymentInstrumentLabel(2));
-        // \u0020\...\u2006 is four dots ellipsis, \u202A is the Left-To-Right Embedding (LTE) mark,
+        // \u0020\...\u2060 is four dots ellipsis, \u202A is the Left-To-Right Embedding (LTE) mark,
         // \u202C is the Pop Directional Formatting (PDF) mark. Expected string with form
         // 'Visa  <LRE>****1111<PDF>\nJoe Doe'.
         Assert.assertEquals(
-                "Visa\u0020\u0020\u202A\u2022\u2006\u2022\u2006\u2022\u2006\u2022\u20061111"
-                        + "\u202C\nJon Doe",
+                "Visa\u0020\u0020\u202A\u2022\u2060\u2006\u2060\u2022\u2060\u2006\u2060\u2022"
+                        + "\u2060\u2006\u2060\u2022\u2060\u2006\u20601111\u202C\nJon Doe",
                 mPaymentRequestTestRule.getPaymentInstrumentLabel(3));
 
         mPaymentRequestTestRule.clickAndWait(

components/autofill/core/browser/credit_card.cc

@@ -46,8 +46,13 @@ using base::ASCIIToUTF16;
 
 namespace autofill {
 
-const base::char16 kMidlineEllipsis[] = {0x2022, 0x2006, 0x2022, 0x2006, 0x2022,
-                                         0x2006, 0x2022, 0x2006, 0};
+// Unicode characters used in card number obfuscation:
+//  - 0x2022 - Bullet.
+//  - 0x2006 - SIX-PER-EM SPACE (small space between bullets).
+//  - 0x2060 - WORD-JOINER (makes obfuscated string undivisible).
+const base::char16 kMidlineEllipsis[] = {
+    0x2022, 0x2060, 0x2006, 0x2060, 0x2022, 0x2060, 0x2006, 0x2060, 0x2022,
+    0x2060, 0x2006, 0x2060, 0x2022, 0x2060, 0x2006, 0x2060, 0};
 
 namespace {