Bug 1113375: Make changes to MDN's feature request form

1 files changed, 120 insertions, 39 deletions

diff --git a/extensions/BMO/template/en/default/bug/create/create-mdn.html.tmpl b/extensions/BMO/template/en/default/bug/create/create-mdn.html.tmpl
index f79363c99..9f2d480a0 100644
--- a/extensions/BMO/template/en/default/bug/create/create-mdn.html.tmpl
+++ b/extensions/BMO/template/en/default/bug/create/create-mdn.html.tmpl
@@ -38,20 +38,20 @@ strong.required:before {
   var mdn = {
     _initial_state: 'initial',
     _current_state: 'initial',
-    _current_type:  'Bug',
+    _current_type:  'bug',
     _required_fields: {
-      'Bug': {
+      'bug': {
         'bug_actions': 'Please enter some text for "What did you do?"',
         'bug_actual_results': 'Please enter some text for "What happened?"',
         'bug_expected_results': 'Please enter some text for "What should have happened?"',
       },
-      'Feature': {
-        'feature_problem_solving': 'Please enter some text for "What problems would this solve?"',
-        'feature_audience': 'Please enter some text for "Who would use this?"',
-        'feature_interface': 'Please enter some text for "What would users see?"',
-        'feature_process': 'Please enter some text for "What would users do? What would happen as a result?"',
+      'feature': {
+        'feature_problem': 'Please enter some text for "What problem would this solve?"',
+        'feature_identification': 'Please enter some text for "How do you know that the users identified above have this problem?"',
+        'feature_solution': 'Please enter some text for "How are the users identified above solving this problem now?"',
+        'feature_suggestions': 'Please enter some text for "Do you have any suggestions for solving the problem?"'
       },
-      'Change': {
+      'change': {
         'change_feature': 'Please enter some text for "What feature should be changed? Please provide the URL of the feature if possible"',
         'change_problem_solving': 'Please enter some text for "What problems would this solve?"',
         'change_audience': 'Please enter some text for "Who would use this?"',
@@ -62,14 +62,14 @@ strong.required:before {
     setState: function(state, request_type, no_set_history) {
       if (state == 'detail') {
         request_type = request_type || this._getRadioValueByClass('request_type');
-        request_type = request_type.toLowerCase();
-        if (request_type == 'bug') { 
+        if (request_type == 'bug') {
           Dom.get('detail_header').innerHTML = '<h2>[% terms.Bug %] Report</h2>';
           Dom.get('secure_type').innerHTML = 'report';
         }
         if (request_type == 'feature') {
           Dom.get('detail_header').innerHTML = '<h2>Feature Request</h2>';
           Dom.get('secure_type').innerHTML = 'request';
+          Dom.removeClass('detail_feature_other_forms', 'bz_default_hidden');
         }
         if (request_type == 'change') {
           Dom.get('detail_header').innerHTML = '<h2>Change Request</h2>';
@@ -77,42 +77,69 @@ strong.required:before {
         }
         Dom.addClass('detail_' + this._current_type, 'bz_default_hidden');
         Dom.removeClass('detail_' + request_type, 'bz_default_hidden');
+        if (request_type != 'feature') {
+          Dom.addClass('detail_feature_other_forms', 'bz_default_hidden');
+        }
         this._current_type = request_type;
+
       }
       Dom.addClass(this._current_state + '_form', 'bz_default_hidden');
       Dom.removeClass(state + '_form', 'bz_default_hidden');
       this._current_state = state;
       if (History && !no_set_history) {
-        History.navigate('h', state + 
+        History.navigate('h', state +
                          (request_type ? '|' + request_type : ''));
       }
       return true;
-    },    
+    },
     validateAndSubmit: function() {
-      var request_type = this._getRadioValueByClass('request_type');
       var alert_text = '';
+      var request_type = this._current_type;
       if (!isFilledOut('short_desc')) alert_text += 'Please enter a "Summary".\n';
       for (require_type in this._required_fields) {
         if (require_type == request_type) {
           for (field in this._required_fields[require_type]) {
-            if (!isFilledOut(field)) 
+            if (!isFilledOut(field))
               alert_text += this._required_fields[require_type][field] + "\n";
           }
         }
       }
+
+      // Feature audience radio input
+      if (request_type == 'feature') {
+        var audience = document.getElementsByName('feature_audience');
+        var found = 0;
+        for(var i = 0, l = audience.length; i < l; i++) {
+          if (audience[i].checked) {
+              found = 1;
+              if (audience[i].id == 'feature_audience_other'
+                  && document.getElementById('feature_audience_other_text').value == '')
+              {
+                alert_text += 'Please enter a value for "Other" in "Who has this problem?"';
+              }
+          }
+        }
+        if (!found) {
+          alert_text += 'Please select a value for "Who has this problem?"';
+        }
+      }
+
       if (alert_text != '') {
         alert(alert_text);
         return false;
       }
       var whiteboard = Dom.get('status_whiteboard');
       whiteboard.value = "[specification][type:" + request_type.toLowerCase() + "]";
+      if (request_type == 'feature') {
+        Dom.get('bug_severity').value = 'enhancement';
+      }
       return true;
-    }, 
+    },
     _getRadioValueByClass: function(class_name) {
       var elements = Dom.getElementsByClassName(class_name);
       for (var i = 0,  l = elements.length; i < l; i++) {
-        if (elements[i].checked) return elements[i].value;   
-      }      
+        if (elements[i].checked) return elements[i].value;
+      }
     },
     init: function() {
       var bookmarked_state = History.getBookmarkedState('h');
@@ -134,6 +161,7 @@ strong.required:before {
       mdn.setState(state_data[0], state_data[1], no_set_history);
     }
   };
+  Event.onDOMReady(mdn.init);
   Event.on('show_detail', 'click', function() { mdn.setState('detail'); });
 [% END %]
 
@@ -164,14 +192,14 @@ strong.required:before {
 
   <div id="initial_form">
     <p>
-      <input type="radio" name="request_type" class="request_type" 
-             id="request_type_bug" value="Bug" checked="checked">
+      <input type="radio" name="request_type" class="request_type"
+             id="request_type_bug" value="bug" checked="checked">
         <label for="request_type_bug">Report a [% terms.bug %]</label><br>
-      <input type="radio" name="request_type" class="request_type" 
-             id="request_type_feature" value="Feature">
+      <input type="radio" name="request_type" class="request_type"
+             id="request_type_feature" value="feature">
         <label for="request_type_feature">Request a new feature</label><br>
-      <input type="radio" name="request_type" class="request_type" 
-             id="request_type_change" value="Change">
+      <input type="radio" name="request_type" class="request_type"
+             id="request_type_change" value="change">
         <label for="request_type_change">Request a change to an existing feature</label><br>
       <br>
       <input id="show_detail" type="button" value="Next">
@@ -181,9 +209,30 @@ strong.required:before {
   <div id="detail_form" class="bz_default_hidden">
     <p id="detail_header"></p>
 
-    <p id="detail_summary">
-      <strong class="required">Summary</strong><br>
-      <input type="text" name="short_desc" id="short_desc" size="60">
+    <div id="detail_feature_other_forms" class="bz_default_hidden">
+      <p>
+        This form lets you to request new features on MDN. Please use the
+        different specific [% terms.bug %] forms for…<br>
+        <ul>
+          <li>
+            <a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Mozilla%20Developer%20Network#h=detail%7Cbug">
+              Reporting a software [% terms.bug %] in MDN</a>
+          </li>
+          <li>
+            <a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Developer%20Documentation&component=General">
+              Requesting changes to content or localizations in MDN</a>
+          </li>
+          <li>
+            <a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Developer%20Engagement&component=Events%20Request">
+              Requesting sponsorship for your developer event</a>
+          </li>
+        </ul>
+      </p>
+    </div>
+
+    <p>
+        <strong class="required">Summary</strong><br>
+        <input type="text" name="short_desc" id="short_desc" size="60">
     </p>
 
     <div id="detail_bug" class="bz_default_hidden">
@@ -206,20 +255,56 @@ strong.required:before {
 
     <div id="detail_feature" class="bz_default_hidden">
       <p>
-        <strong class="required">What problems would this solve?</strong><br>
-        <textarea name="feature_problem_solving" id="feature_problem_solving" rows="5" cols="60"></textarea>
+        <strong class="required">
+          What problem would this solve?
+       </strong><br>
+        <textarea name="feature_problem" id="feature_problem" rows="5" cols="60"></textarea>
       </p>
       <p>
-        <strong class="required">Who would use this?</strong><br>
-        <textarea name="feature_audience" id="feature_audience" rows="5" cols="60"></textarea>
+        <strong class="required">Who has this problem?</strong><br>
+        <input type="radio" name="feature_audience" class="feature_audience"
+               id="feature_audience_all" value="All visitors to MDN">
+        <label for="feature_audience_all">All visitors to MDN</label><br>
+        <input type="radio" name="feature_audience" class="feature_audience"
+               id="feature_audience_registered" value="Registered users of MDN">
+        <label for="feature_audience_registered">Registered users of MDN</label><br>
+        <input type="radio" name="feature_audience" class="feature_audience"
+               id="feature_audience_contributors" value="All contributors to MDN">
+        <label for="feature_audience_contributors">All contributors to MDN</label><br>
+        <input type="radio" name="feature_audience" class="feature_audience"
+               id="feature_audience_core" value="Core contributors to MDN">
+        <label for="feature_audience_core">Core contributors to MDN</label><br>
+        <input type="radio" name="feature_audience" class="feature_audience"
+               id="feature_audience_staff" value="Staff contributors to MDN">
+        <label for="feature_audience_staff">Staff contributors to MDN</label><br>
+        <input type="radio" name="feature_audience" class="feature_audience"
+               id="feature_audience_other" value="Other"
+               onchange="document.getElementById('feature_audience_other_text').focus();">
+        <label for="feature_audience_other">Other (please explain)</label><br>
+        <input type="text" name="feature_audience_other_text"
+               id="feature_audience_other_text">
       </p>
       <p>
-        <strong class="required">What would users see?</strong><br>
-        <textarea name="feature_interface" id="feature_interface" rows="5" cols="60"></textarea>
+        <strong class="required">
+          How do you know that the users identified above have this problem?<br>
+          What experiment did you run? What data are you considering?<br>
+          (If you did not run an experiment or do not have any data yet, that’s OK;
+           please say so.)
+        </strong><br>
+        <textarea name="feature_identification" id="feature_identification"
+                  rows="5" cols="60"></textarea>
+      <p>
+        <strong class="required">
+          How are the users identified above solving this problem now?
+        </strong><br>
+        <textarea name="feature_solution" id="feature_solution" rows="5" cols="60"></textarea>
       </p>
       <p>
-        <strong class="required">What would users do? What would happen as a result?</strong><br>
-        <textarea name="feature_process" id="feature_process" rows="5" cols="60"></textarea>
+        <strong class="required">
+          Do you have any suggestions for solving the problem? Please explain
+          in detail.
+        </strong><br>
+        <textarea name="feature_suggestions" id="feature_suggestions" rows="5" cols="60"></textarea>
       </p>
     </div>
 
@@ -245,7 +330,7 @@ strong.required:before {
         <textarea name="change_process" id="change_process" rows="5" cols="60"></textarea>
       </p>
     </div>
- 
+
     <p id="detail_description">
       <strong>Is there anything else we should know?</strong><br>
       <textarea name="description" id="description" rows="5" cols="60"></textarea>
@@ -272,8 +357,4 @@ strong.required:before {
     Switch to the standard [% terms.bug %] entry form</a>
 </div>
 
-<script>
-  mdn.init();
-</script>
-
 [% PROCESS global/footer.html.tmpl %]