Commit 405ee1ba authored by Viktor Semeniuk's avatar Viktor Semeniuk Committed by Commit Bot

[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: default avatarJan Wilken Dörrie <jdoerrie@chromium.org>
Commit-Queue: Viktor Semeniuk <vsemeniuk@google.com>
Cr-Commit-Position: refs/heads/master@{#749138}
parent d4533c7c
...@@ -13,12 +13,6 @@ ...@@ -13,12 +13,6 @@
<dom-module id="password-check-list-item"> <dom-module id="password-check-list-item">
<template> <template>
<style include="settings-shared passwords-shared"> <style include="settings-shared passwords-shared">
.icon-column {
align-items: center;
height: 16px;
margin-inline-end: 16px;
}
#change-password-link-icon { #change-password-link-icon {
height: 16px; height: 16px;
margin-inline-start: 10px; margin-inline-start: 10px;
...@@ -26,15 +20,10 @@ ...@@ -26,15 +20,10 @@
--iron-icon-fill-color: var(--text-color-action); --iron-icon-fill-color: var(--text-color-action);
} }
#icon-more-vert {
height: 32px;
width: 32px;
}
#leakedPassword { #leakedPassword {
background-color: transparent; background-color: transparent;
border: none; border: none;
color: inherit; margin-inline-start: 4px;
} }
#leaked-item { #leaked-item {
...@@ -43,27 +32,65 @@ ...@@ -43,27 +32,65 @@
} }
#leaked-info { #leaked-info {
display: flex;
flex: 2;
width: 0;
}
#leakUsername {
align-items: center;
display: flex;
flex: 1;
}
#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: 1;
flex-direction: column;
}
#leakOrigin {
direction: rtl;
display: flex;
justify-content: flex-end;
} }
</style> </style>
<div class="list-item" id="leaked-item"> <div class="list-item" id="leaked-item" focus-row-container>
<div class="icon-column">
<site-favicon url="[[item.changePasswordUrl]]"></site-favicon> <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>
<div class="no-min-width" id="leakUsername" >
<div class="info-column two-line" id="leaked-info"> <span class="no-min-width text-elide secondary">
<div class="start text"> [[item.username]]
<div id="leakOrigin">[[item.formattedOrigin]]</div> </span>
<div> <input class="no-min-width secondary" id="leakedPassword"
<span class="secondary" id="leakUsername">[[item.username]]</span> type="password" value="[[password_]]" readonly disabled>
<input id="leakedPassword" type="password" value="[[password_]]"
readonly disabled>
</div> </div>
<div class="secondary" <div class="secondary" id="leakType">
id="leakType">[[getCompromiseType_(item)]] [[getCompromiseType_(item)]]
</div> </div>
<div class="secondary" <div class="secondary" id="elapsedTime">
id="elapsedTime">[[item.elapsedTimeSinceCompromise]] [[item.elapsedTimeSinceCompromise]]
</div> </div>
</div> </div>
</div> </div>
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment