Bug 1995464 - Overhaul guided bug entry form

Bugzilla/Test/Selenium.pm

@@ -467,7 +467,16 @@ sub is_editable_ok {
 sub attach_file {
   my ($self, $locator, $filename) = @_;
   my $path = Mojo::File->new($filename);
-  $self->type_ok('att-textarea', $path->slurp, 'Add attachment data');
+  $self->attach_text($path->slurp);
+}
+
+# Enter the given text as the content of a new attachment. The attachment
+# selector keeps its textarea hidden until the Enter Text button is clicked,
+# so it has to be revealed before it can be typed into.
+sub attach_text {
+  my ($self, $text, $desc) = @_;
+  $self->click_ok('att-enter-button', undef, 'Show the attachment text editor');
+  $self->type_ok('att-textarea', $text, $desc || 'Add attachment data');
 }
 
 # Private Helpers

extensions/BugModal/template/en/default/bug_modal/field.html.tmpl

@@ -152,7 +152,7 @@ END;
       aria-required="true" aria-invalid="false" aria-errormessage="field-[% name FILTER html %]-error"
     [% END %]
     [% error_message = BLOCK %]
-      <div id="field-[% name FILTER html %]-error" class="input-error bz_default_hidden" aria-live="assertive">
+      <div id="field-[% name FILTER html %]-error" class="error-message bz_default_hidden" aria-live="assertive">
         [% IF field_type == constants.FIELD_TYPE_SINGLE_SELECT %]
           You must select a
         [% ELSIF field_type == constants.FIELD_TYPE_MULTI_SELECT %]

extensions/BugModal/web/bug_modal.css

@@ -66,22 +66,6 @@
   color: var(--control-foreground-color);
 }
 
-[aria-invalid="true"],
-input:invalid,
-.attention {
-  border-color: var(--invalid-control-border-color) !important;
-}
-
-.input-error {
-  margin: 2px 4px;
-  color: var(--error-message-foreground-color);
-  font-size: var(--font-size-small);
-}
-
-.input-error.hidden {
-  display: none !important;
-}
-
 a.activity-ref {
   color: inherit;
 }

extensions/BugModal/web/bug_modal.js

@@ -803,13 +803,7 @@ $(function() {
                 .map(($input) => {
                     let invalid = false;
 
-                    if ($input.id === 'att-data') {
-                        invalid = !$input.value.trim()
-                            && !document.querySelector('#att-textarea').value.trim()
-                            && !document.querySelector('#att-file').files.length;
-                        document.querySelector('#att-dropbox')?.classList
-                            .toggle('attention', invalid);
-                    } else if ($input.type === 'text') {
+                    if ($input.type === 'text') {
                         invalid = !$input.value.trim();
                     } else if ($input.type === 'select-one') {
                         invalid = $input.selectedIndex === -1;
@@ -833,6 +827,13 @@ $(function() {
                     return !!$input;
                 });
 
+            // attachment.js: the attachment selector markup is generated at runtime, so it is
+            // not covered by the `[aria-required="true"]` loop above. `$form.submit()` below also
+            // bypasses both native constraint validation and the form's `submit` event, so the
+            // selector's own listeners never get a chance to block the submission here.
+            if (window.bzAttachmentForm && !window.bzAttachmentForm.validate(event))
+                return;
+
             if (hasInvalidField || !$form.checkValidity())
                 return;
 

extensions/BugModal/web/create.js

@@ -103,7 +103,7 @@ window.addEventListener('DOMContentLoaded', () => {
     window.status_comment_required = statusCommentRequired;
 
     // attachment.js
-    bz_attachment_form.update_requirements(false);
+    bzAttachmentForm.updateRequirements(false);
 
     // bug_modal.js
     initKeywordsAutocomplete(keywords);
@@ -133,7 +133,7 @@ window.addEventListener('DOMContentLoaded', () => {
         },
         {
           key: 'update_token',
-          label: '',
+          label: 'Action',
           formatter: Bugzilla.DupTable.formatCcButton,
           allowHTML: true,
           sortable: false,
@@ -283,9 +283,7 @@ window.addEventListener('DOMContentLoaded', () => {
     const $attachFileActionOuter = document.querySelector('#attach-file-action-outer');
 
     const updatedRequiredFields = (required) => {
-      $attachFileContentOuter.querySelectorAll('[aria-required]').forEach(($input) => {
-        $input.setAttribute('aria-required', required);
-      });
+      bzAttachmentForm.updateRequirements(required);
     };
 
     $attachNewFile.addEventListener('click', () => {

extensions/GuidedBugEntry/Extension.pm

@@ -93,7 +93,6 @@ sub _init_vars {
 
   $vars->{'platform'} = detect_platform();
   $vars->{'op_sys'}   = detect_op_sys();
-  $vars->{'webdev'}   = Bugzilla->cgi->param('webdev');
 }
 
 sub page_before_template {
@@ -113,8 +112,6 @@ sub page_before_template {
     }
     $vars->{'create_bug_formats'} = \%bug_formats;
   }
-
-  $vars->{'webdev'} = $cgi->param('webdev');
 }
 
 __PACKAGE__->NAME;

extensions/GuidedBugEntry/template/en/default/bug/create/comment-guided.txt.tmpl

@@ -8,21 +8,19 @@ Firefox for Android
 [% END %]
 
 [% IF cgi.param('bug_steps') %]
-Steps to reproduce:
+### Steps to reproduce
 
 [%+ cgi.param('bug_steps') %]
 [% END %]
 
 [% IF cgi.param('actual') %]
-
-Actual results:
+### Actual results
 
 [%+ cgi.param('actual') %]
 [% END %]
 
 [% IF cgi.param('expected') %]
-
-Expected results:
+### Expected results
 
 [%+ cgi.param('expected') %]
 [% END %]