Settings: URLs displayed in Site Settings are now all LTR.

According to the URL spec here - https://url.spec.whatwg.org/#url-rendering,
URLs being displayed in bidirectional text "should be rendered as if it were in
a left-to-right embedding". Update places in Site Settings that display a URL
to conform to this.

See https://bugs.chromium.org/p/chromium/issues/detail?id=862919#c4 for a
screenshot of how this may affect a URL with RTL characters.

Bug: 862919
Cq-Include-Trybots: luci.chromium.try:closure_compilation
Change-Id: Ica8c2bab0f2964c2a03f45f00ea423e2af945f4e
Reviewed-on: https://chromium-review.googlesource.com/1113170
Commit-Queue: Patti <patricialor@chromium.org>
Reviewed-by: Steven Bennetts <stevenjb@chromium.org>
Reviewed-by: Hector Carmona <hcarmona@chromium.org>
Reviewed-by: Matt Giuca <mgiuca@chromium.org>
Cr-Commit-Position: refs/heads/master@{#574840}

chrome/browser/resources/settings/settings_shared_css.html

@@ -341,6 +341,13 @@
         text-align: center;
         white-space: normal;
       }
+
+      /* URLs should always be displayed using a LTR embedding - see
+       * https://url.spec.whatwg.org/#url-rendering. */
+      .url-directionality {
+        direction: ltr;
+        unicode-bidi: embed;
+      }
     </style>
   </template>
 </dom-module>

chrome/browser/resources/settings/site_settings/protocol_handlers.html

@@ -43,7 +43,9 @@
             <div class="favicon-image" style$="[[computeSiteIcon(item.host)]]">
             </div>
             <div class="middle" >
-              <div class="protocol-host">[[item.host]]</div>
+              <div class="protocol-host">
+                <span class="url-directionality">[[item.host]]</span>
+              </div>
               <div class="secondary protocol-default"
                   hidden$="[[!item.is_default]]">
                 $i18n{handlerIsDefault}
@@ -77,7 +79,8 @@
             <div class="favicon-image" style$="[[computeSiteIcon(item.host)]]">
             </div>
             <div class="middle" >
-              <div class="protocol-host">[[item.host]]</div>
+              <div class="protocol-host">
+                <span class="url-directionality">[[item.host]]</span></div>
               <div class="secondary protocol-protocol">
                 [[item.protocol_display_name]]
               </div>

chrome/browser/resources/settings/site_settings/site_data.html

@@ -60,7 +60,7 @@
               style$="background-image: [[favicon_(item.site)]]">
           </div>
           <div class="middle">
-            [[item.site]]
+            <span class="url-directionality">[[item.site]]</span>
             <div class="secondary">[[item.localData]]</div>
           </div>
           <paper-icon-button-light class="subpage-arrow">

chrome/browser/resources/settings/site_settings/site_entry.html

@@ -21,13 +21,6 @@
         min-height: var(--settings-row-min-height);
       }
 
-      /* URLs should always be displayed in a LTR embedding - see
-       * https://url.spec.whatwg.org/#url-rendering. */
-      .url-directionality {
-        direction: ltr;
-        unicode-bidi: embed;
-      }
-
       .site-representation {
         display: flex;
       }

chrome/browser/resources/settings/site_settings/site_list.html

@@ -71,7 +71,9 @@
                   style$="[[computeSiteIcon(item.origin)]]">
               </div>
               <div class="middle no-min-width">
-                <div class="text-elide">[[item.displayName]]</div>
+                <div class="text-elide">
+                  <span class="url-directionality">[[item.displayName]]</span>
+                </div>
 
                 <!-- This div must not contain extra whitespace. -->
                 <div class="secondary text-elide"

chrome/browser/resources/settings/site_settings/usb_devices.html

@@ -31,7 +31,9 @@
         <div class="list-item">
           <div class="favicon-image"
               style$="[[computeSiteIcon(item.origin)]]"></div>
-          <div class="middle">[[item.origin]]</div>
+          <div class="middle">
+            <span class="url-directionality">[[item.origin]]</span>
+          </div>
 
           <paper-icon-button-light class="icon-more-vert">
             <button on-click="showMenu_" title="$i18n{moreActions}"></button>

chrome/browser/resources/settings/site_settings/zoom_levels.html

@@ -32,7 +32,7 @@
               style$="[[computeSiteIcon(item.originForFavicon)]]">
           </div>
           <div class="middle">
-            <div>[[item.displayName]]</div>
+            <span class="url-directionality">[[item.displayName]]</span>
           </div>
           <div class="zoom-label">[[item.zoom]]</div>
           <div>

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

@@ -105,9 +105,9 @@ suite('ProtocolHandlers', function() {
 
       // Check that item hosts are rendered correctly.
       const hosts = testElement.root.querySelectorAll('.protocol-host');
-      assertEquals('www.google.com', hosts[0].textContent);
-      assertEquals('www.google1.com', hosts[1].textContent);
-      assertEquals('www.google2.com', hosts[2].textContent);
+      assertEquals('www.google.com', hosts[0].textContent.trim());
+      assertEquals('www.google1.com', hosts[1].textContent.trim());
+      assertEquals('www.google2.com', hosts[2].textContent.trim());
 
       // Check that item default subtexts are rendered correctly.
       const defText = testElement.root.querySelectorAll('.protocol-default');
@@ -130,7 +130,7 @@ suite('ProtocolHandlers', function() {
 
       // Check that item hosts are rendered correctly.
       const hosts = testElement.root.querySelectorAll('.protocol-host');
-      assertEquals('www.google.com', hosts[0].textContent);
+      assertEquals('www.google.com', hosts[0].textContent.trim());
 
       // Check that item default subtexts are rendered correctly.
       const defText = testElement.root.querySelectorAll('.protocol-protocol');