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

Bug 1881582, replace MozAutocompleteProfileListitemClearButton with an implementation based on the generic MozAutocompleteTwoLineRichlistitem type, r=credential-management-reviewers,fluent-reviewers,bolsson,tgiles,sgalich

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D202747
This commit is contained in:
Neil Deakin 2024-03-20 15:37:14 +00:00
parent d4b3adbea3
commit b45b93ca73
12 changed files with 116 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
browser/extensions/formautofill/content/customElements.js
View File

@ -338,55 +338,4 @@
MozAutocompleteCreditcardInsecureField,
{ extends: "richlistitem" }
);
class MozAutocompleteProfileListitemClearButton extends MozAutocompleteProfileListitemBase {
static get markup() {
return `
<div xmlns="http://www.w3.org/1999/xhtml" class="autofill-item-box autofill-footer">
<div class="autofill-footer-row autofill-button"></div>
</div>
`;
}
constructor() {
super();
this.addEventListener("click", event => {
if (event.button != 0) {
return;
}
sendMessageToBrowser("FormAutofill:ClearForm");
});
}
connectedCallback() {
if (this.delayConnectedCallback()) {
return;
}
this.textContent = "";
this.appendChild(this.constructor.fragment);
this._itemBox = this.querySelector(".autofill-item-box");
this._clearBtn = this.querySelector(".autofill-button");
this._adjustAcItem();
}
_adjustAcItem() {
this._adjustAutofillItemLayout();
this.setAttribute("formautofillattached", "true");
let clearFormBtnLabel =
this._stringBundle.GetStringFromName("clearFormBtnLabel2");
this._clearBtn.textContent = clearFormBtnLabel;
}
}
customElements.define(
"autocomplete-profile-listitem-clear-button",
MozAutocompleteProfileListitemClearButton,
{ extends: "richlistitem" }
);
})();

3
browser/extensions/formautofill/content/formautofill.css
View File

@ -14,8 +14,7 @@
> richlistbox > richlistitem {
&[originaltype="autofill-profile"],
&[originaltype="autofill-footer"],
&[originaltype="autofill-insecureWarning"],
&[originaltype="autofill-clear-button"] {
&[originaltype="autofill-insecureWarning"] {
display: block;
margin: 0;
padding: 0;

3
browser/extensions/formautofill/locales/en-US/formautofill.properties
View File

@ -20,9 +20,6 @@ phishingWarningMessage2 = Autofills %S
# LOCALIZATION NOTE (insecureFieldWarningDescription): %S is brandShortName. This string is used in drop down
# suggestion when users try to autofill credit card on an insecure website (without https).
insecureFieldWarningDescription = %S has detected an insecure site. Form Autofill is temporarily disabled.
# LOCALIZATION NOTE (clearFormBtnLabel2): Label for the button in the dropdown menu that used to clear the populated
# form.
clearFormBtnLabel2 = Clear Autofill Form
learnMoreLabel = Learn more
# LOCALIZATION NOTE (savedAddressesBtnLabel): Label for the button that opens a dialog that shows the

3
browser/extensions/formautofill/skin/windows/autocomplete-item.css
View File

@ -9,8 +9,7 @@
--default-font-size: 12;
}
xul|richlistitem[originaltype="autofill-footer"][selected="true"] > .autofill-item-box > .autofill-button,
xul|richlistitem[originaltype="autofill-clear-button"][selected="true"] > .autofill-item-box > .autofill-button {
xul|richlistitem[originaltype="autofill-footer"][selected="true"] > .autofill-item-box > .autofill-button {
background-color: color-mix(in srgb, Field 90%, FieldText);
}

8
browser/themes/shared/autocomplete.css
View File

@ -126,6 +126,10 @@
padding-inline-start: 0;
}
&[originaltype="action"] > .two-line-wrapper {
flex: 1;
}
&[originaltype="generatedPassword"] {
&:not([collapsed="true"]) {
/* Workaround bug 451997 and/or bug 492645 */
@ -156,6 +160,10 @@
border-top: 1px solid hsla(210,4%,10%,.14);
}
&[originaltype="action"] {
text-align: center;
}
/* Insecure field warning */
&[originaltype="insecureWarning"] {
background-color: var(--arrowpanel-dimmed);

22
python/l10n/fluent_migrations/bug_1881582_autocomplete_merge.py Normal file
View File

@ -0,0 +1,22 @@
# Any copyright is dedicated to the Public Domain.
# http://creativecommons.org/publicdomain/zero/1.0/
import fluent.syntax.ast as FTL
from fluent.migrate.transforms import COPY
def migrate(ctx):
"""Bug 1881582 - Merge form autofill autocomplete items into normal autocomplete UI part {index}."""
propertiesSource = "browser/extensions/formautofill/formautofill.properties"
target = "toolkit/toolkit/formautofill/formAutofill.ftl"
ctx.add_transforms(
target,
target,
[
FTL.Message(
id=FTL.Identifier("autofill-clear-form-label"),
value=COPY(propertiesSource, "clearFormBtnLabel2"),
),
],
)

8
toolkit/components/formautofill/AutofillProfileAutoComplete.sys.mjs
View File

@ -384,9 +384,15 @@ export const ProfileAutocomplete = {
return false;
}
const actor = getActorFromWindow(input.ownerGlobal, "FormAutofill");
if (fillMessageName == "FormAutofill:ClearForm") {
// The child can do this directly.
actor.clearForm();
return true;
}
this.fillRequestId++;
const fillRequestId = this.fillRequestId;
const actor = getActorFromWindow(input.ownerGlobal, "FormAutofill");
const value = await actor.sendQuery(fillMessageName, fillMessageData ?? {});
// skip fill if another fill operation started during await

2
toolkit/components/formautofill/FormAutofillChild.sys.mjs
View File

@ -733,8 +733,6 @@ export class FormAutofillChild extends JSWindowActorChild {
) {
if (selectedRowStyle == "autofill-footer") {
this.sendAsyncMessage("FormAutofill:OpenPreferences");
} else if (selectedRowStyle == "autofill-clear-button") {
this.clearForm();
}
}
}

64
toolkit/components/formautofill/ProfileAutoCompleteResult.sys.mjs
View File

@ -131,6 +131,12 @@ class ProfileAutoCompleteResult {
if (typeof label == "string") {
return label;
}
let type = this.getTypeOfIndex(index);
if (type == "clear") {
return label.primary;
}
return JSON.stringify(label);
}
@ -141,6 +147,11 @@ class ProfileAutoCompleteResult {
* @returns {string} The comment at the specified index
*/
getCommentAt(index) {
let type = this.getTypeOfIndex(index);
if (type == "clear") {
return '{"fillMessageName": "FormAutofill:ClearForm"}';
}
const item = this.getAt(index);
return item.comment ?? JSON.stringify(this._matchingProfiles[index]);
}
@ -157,14 +168,16 @@ class ProfileAutoCompleteResult {
return itemStyle;
}
if (index == this._popupLabels.length - 1) {
return "autofill-footer";
switch (this.getTypeOfIndex(index)) {
case "manage":
return "autofill-footer";
case "clear":
return "action";
case "insecure":
return "autofill-insecureWarning";
default:
return "autofill-profile";
}
if (this._isInputAutofilled) {
return "autofill-clear-button";
}
return "autofill-profile";
}
/**
@ -205,6 +218,24 @@ class ProfileAutoCompleteResult {
removeValueAt(_index) {
// There is no plan to support removing profiles via autocomplete.
}
/**
* Returns a type string that identifies te type of row at the given index.
*
* @param {number} index The index of the result requested
* @returns {string} The type at the specified index
*/
getTypeOfIndex(index) {
if (this._isInputAutofilled && index == 0) {
return "clear";
}
if (index == this._popupLabels.length - 1) {
return "manage";
}
return "item";
}
}
export class AddressResult extends ProfileAutoCompleteResult {
@ -282,8 +313,10 @@ export class AddressResult extends ProfileAutoCompleteResult {
);
if (this._isInputAutofilled) {
const clearLabel = lazy.l10n.formatValueSync("autofill-clear-form-label");
return [
{ primary: "", secondary: "" }, // Clear button
{ primary: clearLabel, secondary: "" }, // Clear button
// Footer
{
primary: "",
@ -402,8 +435,10 @@ export class CreditCardResult extends ProfileAutoCompleteResult {
);
if (this._isInputAutofilled) {
const clearLabel = lazy.l10n.formatValueSync("autofill-clear-form-label");
return [
{ primary: "", secondary: "" }, // Clear button
{ primary: clearLabel, secondary: "" }, // Clear button
// Footer
{
primary: "",
@ -467,16 +502,11 @@ export class CreditCardResult extends ProfileAutoCompleteResult {
return labels;
}
getStyleAt(index) {
const itemStyle = this.getAt(index).style;
if (itemStyle) {
return itemStyle;
}
getTypeOfIndex(index) {
if (!this._isSecure) {
return "autofill-insecureWarning";
return "insecure";
}
return super.getStyleAt(index);
return super.getTypeOfIndex(index);
}
}

8
toolkit/content/widgets/autocomplete-popup.js
View File

@ -410,8 +410,8 @@
const UNREUSEABLE_STYLES = [
"autofill-profile",
"autofill-footer",
"autofill-clear-button",
"autofill-insecureWarning",
"action",
"generatedPassword",
"generic",
"importableLearnMore",
@ -440,12 +440,12 @@
case "autofill-footer":
options = { is: "autocomplete-profile-listitem-footer" };
break;
case "autofill-clear-button":
options = { is: "autocomplete-profile-listitem-clear-button" };
break;
case "autofill-insecureWarning":
options = { is: "autocomplete-creditcard-insecure-field" };
break;
case "action":
options = { is: "autocomplete-action-richlistitem" };
break;
case "generic":
options = { is: "autocomplete-two-line-richlistitem" };
break;

23
toolkit/content/widgets/autocomplete-richlistitem.js
View File

@ -715,6 +715,21 @@
}
}
// This type has an action that is triggered when activated. The comment
// for that result should contain a fillMessageName -- the message to send --
// and, optionally a secondary label, for example:
// { "fillMessageName": "Fill:Clear", secondary: "Second Label" }
class MozAutocompleteActionRichlistitem extends MozAutocompleteTwoLineRichlistitem {
_adjustAcItem() {
super._adjustAcItem();
let comment = JSON.parse(this.getAttribute("ac-label"));
this.querySelector(".line2-label").textContent = comment?.secondary || "";
this.querySelector(".ac-site-icon").collapsed =
this.getAttribute("ac-image") == "";
}
}
class MozAutocompleteGeneratedPasswordRichlistitem extends MozAutocompleteTwoLineRichlistitem {
constructor() {
super();
@ -847,6 +862,14 @@
}
);
customElements.define(
"autocomplete-action-richlistitem",
MozAutocompleteActionRichlistitem,
{
extends: "richlistitem",
}
);
customElements.define(
"autocomplete-generated-password-richlistitem",
MozAutocompleteGeneratedPasswordRichlistitem,

3
toolkit/locales/en-US/toolkit/formautofill/formAutofill.ftl
View File

@ -53,6 +53,9 @@ credit-card-capture-update-button =
.label = Update existing card
.accessKey = U
# Label for the button in the dropdown menu used to clear the populated form.
autofill-clear-form-label = Clear Autofill Form
# Used as a label for the button, displayed at the bottom of the dropdown suggestion, to open Form Autofill browser preferences.
autofill-manage-addresses-label = Manage addresses