Settings: Fix display issue on rtl direction.

Currently there are some display issues for rtl ui direction in All Sites. This CL
fixes the issues.

BUG=835712

Change-Id: Id752009d822dc9cbab2d6fe47d1b4d6a59fea75b
Reviewed-on: https://chromium-review.googlesource.com/c/1477621
Commit-Queue: Maggie Cai <mxcai@chromium.org>
Reviewed-by: Steven Bennetts <stevenjb@chromium.org>
Reviewed-by: Patti <patricialor@chromium.org>
Cr-Commit-Position: refs/heads/master@{#634458}

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

@@ -38,13 +38,13 @@
         unicode-bidi: isolate;
       }
 
-      #collapseChild .data-unit {
-        padding-inline-start: 1ch;
-      }
-
       .list-frame {
         padding-inline-end: 0;
       }
+
+      .spacing {
+        padding-inline-start: 1ch;
+      }
     </style>
     <div id="collapseParent" focus-row-container>
       <div class$="settings-box list-item [[getClassForIndex_(listIndex)]]">
@@ -117,12 +117,17 @@
                         hidden$="[[!scheme_(siteGroup, index)]]">
                       [[scheme_(siteGroup, index)]]
                     </span>
+                    <!--Define a spacing span so that when the direction is rtl,
+                     the spacing is still showing correctly. This is because the
+                     data-unit class is set to be ltr so the padding will be in
+                     wrong place if we put padding in that span.-->
+                    <span class="spacing" hidden$="[[!item.usage]]"></span>
                     <span class="secondary data-unit" hidden$="[[!item.usage]]">
                       [[originUsagesItem_(originUsages_.*, index)]]
                     </span>
-                    <span class="secondary data-unit"
-                        hidden$="[[!item.numCookies]]">
-                      &middot; [[originCookiesItem_(cookiesNum_.*, index)]]
+                    <span class="secondary" hidden$="[[!item.numCookies]]">
+                        &nbsp;&middot;
+                        [[originCookiesItem_(cookiesNum_.*, index)]]
                     </span>
                   </div>
                   <paper-icon-button-light class="subpage-arrow">