1778213 - Extension Options Page embedded in about:addons: No message displayed on form validation failure

Status: NEW

(Toolkit :: Add-ons Manager, defect, P3)

Description

[Steven Nyman [:steventech2]]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:102.0) Gecko/20100101 Firefox/102.0

Steps to reproduce:

Created a minimal extension with the following files:

manifest.json:

{
    "manifest_version": 2,
    "name": "validation test",
    "version": "1",
    "options_ui": {
        "page": "options.html"
    }
}

options.html (based on MDN):

<form>
    <label for="choose">Would you prefer a banana or a cherry?</label>
    <input id="choose" name="i_like" required pattern="[Bb]anana|[Cc]herry">
    <button>Submit</button>
</form>

Navigated to about:addons, clicked on the "validation test" extension, and opened the options tab. Tried submitting with the field blank, then tried submitting with an invalid value (such as "test"), then tried submitting with a valid input (such as "cherry").

Actual results:

Submitting with the field blank refocused the field.

Submitting with an invalid value also refocused the field.

Submitting with a valid value refreshed the page (which is the correct behavior).

Expected results:

In addition to refocusing the field, submitting with the field blank should have also displayed a small popup saying "Please fill out this field."

In addition to refocusing the field, submitting with an invalid value should have also displayed a small popup saying "Please match the requested format."

Submitting with a valid value refreshed the page (which is the correct behavior).

This bug occurs regardless of the value of browser_style in manifest.json. Note that these issues do not occur when the extensions page is not embedded in about:addons (such as when setting open_in_tab to true in manifest.json or when navigating directly to the options page).

This issue occurs on Firefox 102.0 and on Firefox Nightly 104.0a1 (2022-07-05).

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::DOM: Forms' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[vcarciu]

I was able to reproduce the issue, in Release, Beta and Nightly with the mention that "Please fill out this field." and "Please match the requested format." are present when hovering over the field.

Marking issue as valid and attaching my test addon.

Comment 3

[vcarciu]

Attachment: Test extension

Comment 4

[Luca Greco [:rpl] [:luca] [:lgreco]]

The related JSWIndowActor FormValidationParent is not currently expecting a non-tab browser element to be triggering those form validation popups and so it is likely early exiting here in FormValidationParent's receiveMessage method while handling the "FormValidation:ShowPopup" message received from its FormValidationChild counterpart:

• https://searchfox.org/mozilla-central/rev/5e6e08e53ca4f9f62e19bcbae542eef7824641ed/browser/actors/FormValidationParent.jsm#95-99

From a quick glance to the JSWindowActor I wouldn't surprised if also the same issue would also be triggerable from a browserAction popup and sidebarAction panel (and extensions devtools panels), which would also come from a browser element that isn't the currently selected tab (and if that is the case we may move this bug to "WebExtensions :: Frontend", because it wouldn't apply only to the options_ui pages embedded into about:addons).

Besides expecting a non-tab browser element in the receiveMessage, it is very likely that there will be a few more tweaks needed to wire up the form validation popup correctly, e.g.:

• in the FormValidationParent's _getAndMaybeCreatePanel method, after calling let window = browser.ownerGlobal, window will be set to the about:addons page global and not the chrome browser window, and so I expect the method to fail to find the "invalidFormTemplate" and "invalid-form-popup" and so this._panel would still be undefined, and so we may have to special case the about:addons options_ui browser elements and reach the actual chrome window by using something like let window = browser.ownerGlobal.docShell.chromeEventHandler.ownerGlobal; to get to the chrome window where the about:addons tab is embedded into.

• similarly we may have to special case the about:addons options_ui browser elements when the FormValidationParent's _showPopup method does try to reach the chrome window related to the browser element that triggered the FormValidation JSWindowActor message.