mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-25 19:25:43 +00:00
Bug 1558242 - Website address should be clickable and look like a link. r=sfoster
Differential Revision: https://phabricator.services.mozilla.com/D36639 --HG-- extra : moz-landing-system : lando
This commit is contained in:
parent
5abe977845
commit
7235fecd37
@ -18,6 +18,7 @@
|
||||
<script type="module" src="chrome://browser/content/aboutlogins/aboutLogins.js"></script>
|
||||
<link rel="stylesheet" href="chrome://global/skin/in-content/common.css">
|
||||
<link rel="stylesheet" href="chrome://browser/content/aboutlogins/aboutLogins.css">
|
||||
<link rel="stylesheet" href="chrome://browser/content/aboutlogins/common.css">
|
||||
<link rel="icon" href="chrome://browser/content/aboutlogins/icons/favicon.svg">
|
||||
</head>
|
||||
<body>
|
||||
@ -33,6 +34,7 @@
|
||||
|
||||
<template id="confirm-delete-dialog-template">
|
||||
<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/confirm-delete-dialog.css">
|
||||
<div class="overlay">
|
||||
<div class="container" role="dialog" aria-labelledby="title" aria-describedby="message">
|
||||
@ -53,6 +55,7 @@
|
||||
|
||||
<template id="login-list-template">
|
||||
<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-list.css">
|
||||
<div class="meta">
|
||||
<label for="login-sort">
|
||||
@ -71,6 +74,7 @@
|
||||
|
||||
<template id="login-list-item-template">
|
||||
<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-list-item.css">
|
||||
<span class="title"></span>
|
||||
<span class="username"></span>
|
||||
@ -92,7 +96,7 @@
|
||||
<div class="detail-row">
|
||||
<label class="detail-cell">
|
||||
<span class="origin-label field-label" data-l10n-id="login-item-origin-label"></span>
|
||||
<input type="url" name="origin" required data-l10n-id="login-item-origin"/>
|
||||
<input type="url" name="origin" class="origin-input" required data-l10n-id="login-item-origin"/>
|
||||
</label>
|
||||
<button class="open-site-button" data-l10n-id="login-item-open-site-button"></button>
|
||||
</div>
|
||||
@ -131,6 +135,7 @@
|
||||
|
||||
<template id="login-filter-template">
|
||||
<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-filter.css">
|
||||
<input data-l10n-id="login-filter" class="filter" type="text"/>
|
||||
</template>
|
||||
|
@ -76,6 +76,20 @@
|
||||
padding-inline-start: 32px; /* 8px on each side, and 16px for icon width */
|
||||
}
|
||||
|
||||
:host(:not([data-editing])) input[type="url"] {
|
||||
color: var(--in-content-link-color) !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
:host(:not([data-editing])) input[type="url"]:hover {
|
||||
color: var(--in-content-link-color-hover) !important;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
:host(:not([data-editing])) input[type="url"]:hover:active {
|
||||
color: var(--in-content-link-color-active) !important;
|
||||
}
|
||||
|
||||
.detail-row,
|
||||
.reveal-password-wrapper {
|
||||
display: flex;
|
||||
|
@ -29,30 +29,19 @@ export default class LoginItem extends HTMLElement {
|
||||
document.l10n.connectRoot(shadowRoot);
|
||||
shadowRoot.appendChild(loginItemTemplate.content.cloneNode(true));
|
||||
|
||||
for (let selector of [
|
||||
".copy-password-button",
|
||||
".copy-username-button",
|
||||
".delete-button",
|
||||
".edit-button",
|
||||
".open-site-button",
|
||||
".reveal-password-checkbox",
|
||||
".save-changes-button",
|
||||
".cancel-button",
|
||||
]) {
|
||||
let button = this.shadowRoot.querySelector(selector);
|
||||
button.addEventListener("click", this);
|
||||
}
|
||||
|
||||
this._cancelButton = this.shadowRoot.querySelector(".cancel-button");
|
||||
this._confirmDeleteDialog = document.querySelector("confirm-delete-dialog");
|
||||
this._copyPasswordButton = this.shadowRoot.querySelector(".copy-password-button");
|
||||
this._copyUsernameButton = this.shadowRoot.querySelector(".copy-username-button");
|
||||
this._deleteButton = this.shadowRoot.querySelector(".delete-button");
|
||||
this._editButton = this.shadowRoot.querySelector(".edit-button");
|
||||
this._form = this.shadowRoot.querySelector("form");
|
||||
this._openSiteButton = this.shadowRoot.querySelector(".open-site-button");
|
||||
this._originInput = this.shadowRoot.querySelector("input[name='origin']");
|
||||
this._usernameInput = this.shadowRoot.querySelector("input[name='username']");
|
||||
this._passwordInput = this.shadowRoot.querySelector("input[name='password']");
|
||||
this._revealCheckbox = this.shadowRoot.querySelector(".reveal-password-checkbox");
|
||||
this._saveChangesButton = this.shadowRoot.querySelector(".save-changes-button");
|
||||
this._title = this.shadowRoot.querySelector(".login-item-title");
|
||||
this._timeCreated = this.shadowRoot.querySelector(".time-created");
|
||||
this._timeChanged = this.shadowRoot.querySelector(".time-changed");
|
||||
@ -61,6 +50,12 @@ export default class LoginItem extends HTMLElement {
|
||||
this.render();
|
||||
|
||||
this._originInput.addEventListener("blur", this);
|
||||
this._cancelButton.addEventListener("click", this);
|
||||
this._deleteButton.addEventListener("click", this);
|
||||
this._editButton.addEventListener("click", this);
|
||||
this._openSiteButton.addEventListener("click", this);
|
||||
this._originInput.addEventListener("click", this);
|
||||
this._saveChangesButton.addEventListener("click", this);
|
||||
window.addEventListener("AboutLoginsLoginSelected", this);
|
||||
}
|
||||
|
||||
@ -147,7 +142,8 @@ export default class LoginItem extends HTMLElement {
|
||||
recordTelemetryEvent({object: "existing_login", method: "edit"});
|
||||
return;
|
||||
}
|
||||
if (classList.contains("open-site-button")) {
|
||||
if (classList.contains("open-site-button") ||
|
||||
(classList.contains("origin-input") && !this.dataset.editing)) {
|
||||
document.dispatchEvent(new CustomEvent("AboutLoginsOpenSite", {
|
||||
bubbles: true,
|
||||
detail: this._login,
|
||||
|
Loading…
Reference in New Issue
Block a user