Bug 1597265 - Explicitly mark abuse report panel buttons as type button. r=mstriemer a=pascalc
authorLuca Greco <lgreco@mozilla.com>
Mon, 18 Nov 2019 21:56:56 +0000
changeset 563440 3ce0374ecdd0ded4ed39401f54ef36a6c99a28ff
parent 563439 040f9f23179e0937043b39699bb11fe1013851a4
child 563441 131d053fd24190981cce6dc4736ffc947e2a9be6
push id2195
push userffxbld-merge
push dateMon, 25 Nov 2019 12:02:33 +0000
treeherdermozilla-release@19adee6f7bb3 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmstriemer, pascalc
bugs1597265
milestone71.0
Bug 1597265 - Explicitly mark abuse report panel buttons as type button. r=mstriemer a=pascalc Any button inside a form is by spec considered a submit button (as mentioned here https://www.w3.org/TR/html401/interact/forms.html#h-17.5) and so, when Enter was pressed while the form was focused, a click event was being triggered on the first button found inside the form (and the first button was the hidden close icon button). Explicitly marking all the report panel buttons as type="button" prevent the report panel from being wrongly cancelled in these scenarios. Differential Revision: https://phabricator.services.mozilla.com/D53633
toolkit/mozapps/extensions/content/abuse-report-frame.html
toolkit/mozapps/extensions/test/browser/browser_html_abuse_report_dialog.js
--- a/toolkit/mozapps/extensions/content/abuse-report-frame.html
+++ b/toolkit/mozapps/extensions/content/abuse-report-frame.html
@@ -35,35 +35,35 @@
             <span class="addon-author-box"
                   data-l10n-args='{"author-name": "author placeholder"}'
                   data-l10n-id="abuse-report-addon-authored-by">
               <a data-l10n-name="author-name"
                  class="author" href="#" target="_blank"></a>
             </span>
           </div>
         </div>
-        <button class="abuse-report-close-icon"></button>
+        <button class="abuse-report-close-icon" type="button"></button>
         <div class="abuse-report-contents">
           <abuse-report-reasons-panel></abuse-report-reasons-panel>
           <abuse-report-submit-panel hidden></abuse-report-submit-panel>
         </div>
         <div class="abuse-report-buttons">
           <div class="abuse-report-reasons-buttons">
-            <button class="abuse-report-cancel"
+            <button class="abuse-report-cancel" type="button"
                     data-l10n-id="abuse-report-cancel-button">
             </button>
-            <button class="primary abuse-report-next"
+            <button class="primary abuse-report-next" type="button"
                     data-l10n-id="abuse-report-next-button">
             </button>
           </div>
           <div class="abuse-report-submit-buttons" hidden>
-            <button class="abuse-report-goback"
+            <button class="abuse-report-goback" type="button"
                     data-l10n-id="abuse-report-goback-button">
             </button>
-            <button class="primary abuse-report-submit"
+            <button class="primary abuse-report-submit" type="button"
                     data-l10n-id="abuse-report-submit-button">
             </button>
           </div>
         </div>
       </form>
     </template>
 
     <template id="tmpl-reasons-panel">
--- a/toolkit/mozapps/extensions/test/browser/browser_html_abuse_report_dialog.js
+++ b/toolkit/mozapps/extensions/test/browser/browser_html_abuse_report_dialog.js
@@ -16,16 +16,43 @@ add_task(async function setup() {
 
 // Add all the test tasks shared with browser_html_abuse_report.js.
 addCommonAbuseReportTestTasks();
 
 /**
  * Test tasks specific to the abuse report opened in its own dialog window.
  */
 
+add_task(async function test_close_icon_button_hidden_when_dialog() {
+  const addonId = "addon-to-report@mochi.test";
+  const extension = await installTestExtension(addonId);
+
+  const reportDialog = await AbuseReporter.openDialog(
+    addonId,
+    "menu",
+    gBrowser.selectedBrowser
+  );
+  await AbuseReportTestUtils.promiseReportDialogRendered();
+
+  const panelEl = await reportDialog.promiseReportPanel;
+
+  let promiseClosedWindow = waitClosedWindow();
+
+  EventUtils.synthesizeKey("VK_RETURN", {}, panelEl.ownerGlobal);
+  AbuseReportTestUtils.triggerSubmit("fake-reason", "fake-message");
+
+  await promiseClosedWindow;
+  ok(
+    await reportDialog.promiseReport,
+    "expect the report to not be cancelled by pressing enter"
+  );
+
+  await extension.unload();
+});
+
 add_task(async function test_report_triggered_when_report_dialog_is_open() {
   const addonId = "addon-to-report@mochi.test";
   const extension = await installTestExtension(addonId);
 
   const reportDialog = await AbuseReporter.openDialog(
     addonId,
     "menu",
     gBrowser.selectedBrowser