Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-24 18:55:30 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1586601 - Allow the login-item to scroll without pushing the login-list below the fold. r=sfoster

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D48601

--HG--
extra : moz-landing-system : lando
This commit is contained in:
Jared Wein 2019-10-10 00:26:21 +00:00
parent 6b840f5edf
commit 453b8bb999
3 changed files with 90 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
browser/components/aboutlogins/content/aboutLogins.css
View File

@ -54,10 +54,6 @@ login-item {
grid-area: login;
}
login-item {
max-width: 700px;
}
#branding-logo {
flex-basis: var(--sidebar-width);
flex-shrink: 0;

162
browser/components/aboutlogins/content/aboutLogins.html
View File

@ -146,93 +146,95 @@
<link rel="stylesheet" href="chrome://global/skin/in-content/common.css">
<link rel="stylesheet" href="chrome://browser/content/aboutlogins/common.css">
<link rel="stylesheet" href="chrome://browser/content/aboutlogins/components/login-item.css">
<div class="error-message">
<span class="error-message-text" data-l10n-id="about-logins-error-message-default"></span>
<span class="error-message-link">
<a data-l10n-name="duplicate-link" href=""></a>
</span>
</div>
<div class="breach-alert">
<img class="breach-icon" src="chrome://global/skin/icons/warning.svg"/>
<span class="breach-alert-text" data-l10n-id="breach-alert-text"></span>
<a class="breach-alert-link" data-l10n-id="breach-alert-link" href="#" rel="noreferrer" target="_blank"></a>
<button class="dismiss-breach-alert" data-l10n-id="breach-alert-dismiss">
<img class="dismiss-breach-alert-icon" src="chrome://global/skin/icons/close.svg"/>
</button>
</div>
<div class="header">
<div class="login-item-favicon-wrapper">
<img class="login-item-favicon" src=""/>
<div class="container">
<div class="error-message">
<span class="error-message-text" data-l10n-id="about-logins-error-message-default"></span>
<span class="error-message-link">
<a data-l10n-name="duplicate-link" href=""></a>
</span>
</div>
<h2 class="title">
<span class="login-item-title"></span>
<span class="new-login-title" data-l10n-id="login-item-new-login-title"></span>
</h2>
<button class="edit-button ghost-button" data-l10n-id="login-item-edit-button"></button>
<button class="delete-button ghost-button" data-l10n-id="login-item-delete-button"></button>
</div>
<form>
<div class="detail-row">
<label class="detail-cell">
<span class="origin-label field-label" data-l10n-id="login-item-origin-label"></span>
<!-- Default text inputs to readonly to reduce jumping of the field
size on page load since it always starts readonly. -->
<input type="url"
name="origin"
class="origin-input"
required
data-l10n-id="login-item-origin"
dir="auto"
readonly/>
</label>
<div class="breach-alert">
<img class="breach-icon" src="chrome://global/skin/icons/warning.svg"/>
<span class="breach-alert-text" data-l10n-id="breach-alert-text"></span>
<a class="breach-alert-link" data-l10n-id="breach-alert-link" href="#" rel="noreferrer" target="_blank"></a>
<button class="dismiss-breach-alert" data-l10n-id="breach-alert-dismiss">
<img class="dismiss-breach-alert-icon" src="chrome://global/skin/icons/close.svg"/>
</button>
</div>
<div class="detail-row">
<div class="detail-row-contents">
<label class="detail-cell">
<span class="username-label field-label" data-l10n-id="login-item-username-label"></span>
<input type="text"
name="username"
data-l10n-id="login-item-username"
dir="ltr"
readonly/>
</label>
<button class="copy-button copy-username-button" data-copy-login-property="username" data-telemetry-object="username" type="button">
<span class="copied-button-text" data-l10n-id="login-item-copied-username-button-text"></span>
<span class="copy-button-text" data-l10n-id="login-item-copy-username-button-text"></span>
</button>
<div class="header">
<div class="login-item-favicon-wrapper">
<img class="login-item-favicon" src=""/>
</div>
<h2 class="title">
<span class="login-item-title"></span>
<span class="new-login-title" data-l10n-id="login-item-new-login-title"></span>
</h2>
<button class="edit-button ghost-button" data-l10n-id="login-item-edit-button"></button>
<button class="delete-button ghost-button" data-l10n-id="login-item-delete-button"></button>
</div>
<div class="detail-row">
<div class="detail-row-contents">
<form>
<div class="detail-row">
<label class="detail-cell">
<span class="password-label field-label" data-l10n-id="login-item-password-label"></span>
<div class="reveal-password-wrapper">
<input type="password"
name="password"
autocomplete="off"
dir="ltr"
required
readonly/>
<input type="checkbox"
class="reveal-password-checkbox"
data-l10n-id="login-item-password-reveal-checkbox"/>
</div>
<span class="origin-label field-label" data-l10n-id="login-item-origin-label"></span>
<!-- Default text inputs to readonly to reduce jumping of the field
size on page load since it always starts readonly. -->
<input type="url"
name="origin"
class="origin-input"
required
data-l10n-id="login-item-origin"
dir="auto"
readonly/>
</label>
<button class="copy-button copy-password-button" data-copy-login-property="password" data-telemetry-object="password" type="button">
<span class="copied-button-text" data-l10n-id="login-item-copied-password-button-text"></span>
<span class="copy-button-text" data-l10n-id="login-item-copy-password-button-text"></span>
</button>
</div>
</div>
<div class="form-actions-row">
<button class="save-changes-button" type="submit"></button>
<button class="cancel-button" data-l10n-id="login-item-cancel-button" type="button"></button>
</div>
<p class="time-created meta-info" data-l10n-id="login-item-time-created" data-l10n-args='{"timeCreated": 0}'></p>
<p class="time-changed meta-info" data-l10n-id="login-item-time-changed" data-l10n-args='{"timeChanged": 0}'></p>
<p class="time-used meta-info" data-l10n-id="login-item-time-used" data-l10n-args='{"timeUsed": 0}'></p>
</form>
<login-footer hidden></login-footer>
<div class="detail-row">
<div class="detail-row-contents">
<label class="detail-cell">
<span class="username-label field-label" data-l10n-id="login-item-username-label"></span>
<input type="text"
name="username"
data-l10n-id="login-item-username"
dir="ltr"
readonly/>
</label>
<button class="copy-button copy-username-button" data-copy-login-property="username" data-telemetry-object="username" type="button">
<span class="copied-button-text" data-l10n-id="login-item-copied-username-button-text"></span>
<span class="copy-button-text" data-l10n-id="login-item-copy-username-button-text"></span>
</button>
</div>
</div>
<div class="detail-row">
<div class="detail-row-contents">
<label class="detail-cell">
<span class="password-label field-label" data-l10n-id="login-item-password-label"></span>
<div class="reveal-password-wrapper">
<input type="password"
name="password"
autocomplete="off"
dir="ltr"
required
readonly/>
<input type="checkbox"
class="reveal-password-checkbox"
data-l10n-id="login-item-password-reveal-checkbox"/>
</div>
</label>
<button class="copy-button copy-password-button" data-copy-login-property="password" data-telemetry-object="password" type="button">
<span class="copied-button-text" data-l10n-id="login-item-copied-password-button-text"></span>
<span class="copy-button-text" data-l10n-id="login-item-copy-password-button-text"></span>
</button>
</div>
</div>
<div class="form-actions-row">
<button class="save-changes-button" type="submit"></button>
<button class="cancel-button" data-l10n-id="login-item-cancel-button" type="button"></button>
</div>
<p class="time-created meta-info" data-l10n-id="login-item-time-created" data-l10n-args='{"timeCreated": 0}'></p>
<p class="time-changed meta-info" data-l10n-id="login-item-time-changed" data-l10n-args='{"timeChanged": 0}'></p>
<p class="time-used meta-info" data-l10n-id="login-item-time-used" data-l10n-args='{"timeUsed": 0}'></p>
</form>
<login-footer hidden></login-footer>
</div>
</template>
<template id="login-filter-template">

11
browser/components/aboutlogins/content/components/login-item.css
View File

@ -3,9 +3,7 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
:host {
padding: 40px;
display: flex;
flex-direction: column;
overflow: auto;
--reveal-checkbox-opacity: .8;
--reveal-checkbox-opacity-hover: .6;
@ -26,6 +24,13 @@
}
}
.container {
max-width: 700px;
padding: 40px;
display: flex;
flex-direction: column;
}
form {
flex-grow: 1;
}