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

Bug 1558242 - Website address should be clickable and look like a link. r=sfoster

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

--HG--
extra : moz-landing-system : lando
This commit is contained in:
Jared Wein 2019-07-04 23:32:00 +00:00
parent 5abe977845
commit 7235fecd37
3 changed files with 31 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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>

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

@ -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;

26
browser/components/aboutlogins/content/components/login-item.js
View File

@ -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,