[Passwords] Fixed layout problem inside compromised credential list

This change fixes problem with layout when username/url is too long to
display fully. The end is truncated.

Bug: 1059334
Change-Id: I0b6d42d500c51835330b04daf75a921070022410
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2095724Reviewed-by: Jan Wilken Dörrie <jdoerrie@chromium.org>
Commit-Queue: Viktor Semeniuk <vsemeniuk@google.com>
Cr-Commit-Position: refs/heads/master@{#749138}

chrome/browser/resources/settings/autofill_page/password_check_list_item.html

@@ -13,12 +13,6 @@
 <dom-module id="password-check-list-item">
   <template>
     <style include="settings-shared passwords-shared">
-      .icon-column {
-        align-items: center;
-        height: 16px;
-        margin-inline-end: 16px;
-      }
-
       #change-password-link-icon {
         height: 16px;
         margin-inline-start: 10px;
@@ -26,15 +20,10 @@
         --iron-icon-fill-color: var(--text-color-action);
       }
 
-      #icon-more-vert {
-        height: 32px;
-        width: 32px;
-      }
-
       #leakedPassword {
         background-color: transparent;
         border: none;
-        color: inherit;
+        margin-inline-start: 4px;
       }
 
       #leaked-item {
@@ -43,39 +32,77 @@
       }
 
       #leaked-info {
+        display: flex;
+        flex: 2;
+        width: 0;
+      }
+
+      #leakUsername {
+        align-items: center;
+        display: flex;
         flex: 1;
       }
-    </style>
-    <div class="list-item" id="leaked-item">
-      <div class="icon-column">
-        <site-favicon url="[[item.changePasswordUrl]]"></site-favicon>
-      </div>
 
-      <div class="info-column two-line" id="leaked-info">
-        <div class="start text">
-          <div id="leakOrigin">[[item.formattedOrigin]]</div>
-          <div>
-            <span class="secondary" id="leakUsername">[[item.username]]</span>
-            <input id="leakedPassword" type="password" value="[[password_]]"
-                readonly disabled>
+      #changePasswordInApp {
+        display: flex;
+        flex: 2;
+        flex-direction: row-reverse;
+      }
+
+      #changePasswordUrl {
+        display: flex;
+        flex: 1;
+        flex-direction: row-reverse;
+        white-space: nowrap;
+      }
+
+      #info-column {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+      }
+
+      #leakOrigin {
+        direction: rtl;
+        display: flex;
+        justify-content: flex-end;
+      }
+    </style>
+    <div class="list-item" id="leaked-item" focus-row-container>
+      <site-favicon url="[[item.changePasswordUrl]]"></site-favicon>
+      <div id="leaked-info">
+        <div id="info-column" class="no-min-width">
+          <div id="leakOrigin" class="no-min-width">
+            <span class="text-elide">
+              <!-- This bdo tag is necessary to fix the display of domains
+                starting with numbers. -->
+              <bdo dir="ltr">[[item.formattedOrigin]]</bdo>
+            </span>
           </div>
-          <div class="secondary"
-              id="leakType">[[getCompromiseType_(item)]]
+          <div class="no-min-width" id="leakUsername" >
+            <span class="no-min-width text-elide secondary">
+              [[item.username]]
+            </span>
+            <input class="no-min-width secondary" id="leakedPassword"
+                type="password" value="[[password_]]" readonly disabled>
           </div>
-          <div class="secondary"
-              id="elapsedTime">[[item.elapsedTimeSinceCompromise]]
+          <div class="secondary" id="leakType">
+            [[getCompromiseType_(item)]]
+          </div>
+          <div class="secondary" id="elapsedTime">
+            [[item.elapsedTimeSinceCompromise]]
           </div>
         </div>
       </div>
       <template is="dom-if" if="[[item.changePasswordUrl]]">
         <div class="button-container" id="changePasswordUrl">
-        <!-- TODO:(https://crbug.com/1047726) add 'Already changed this password?' link -->
-        <cr-button class="action-button" on-click="onChangePasswordClick_">
-          $i18n{changePasswordButton}
-          <iron-icon icon="cr:open-in-new" id="change-password-link-icon">
-          </iron-icon>
-        </cr-button>
-      </div>
+          <!-- TODO:(https://crbug.com/1047726) add 'Already changed this password?' link -->
+          <cr-button class="action-button" on-click="onChangePasswordClick_">
+            $i18n{changePasswordButton}
+            <iron-icon icon="cr:open-in-new" id="change-password-link-icon">
+            </iron-icon>
+          </cr-button>
+        </div>
       </template>
       <template is="dom-if" if="[[!item.changePasswordUrl]]">
         <span id="changePasswordInApp">$i18n{changePasswordInApp}</span>