Fix #3348 - Update contributing documentation

webcompat/templates/contributors/report-bug.html

@@ -26,27 +26,61 @@ <h2 id="how" class="headline-1 heading">How To Report An Issue?</h2>
           </p>
 
           <p>
-            <img src="/img/contributors/report-bug_1-form-empty.png" class="img-fit" alt="Image of an empty bug report form" />
-            When reporting an issue directly on webcompat.com or through external tools, you will always end up on the <a href="/issues/new">webcompat form</a>. Some of the fields in this form are mandatory. Take time to be precise and to guide us through the steps that will make it possible to reproduce the issue.
+            When reporting an issue directly on webcompat.com or through external tools, you will always end up on the <a href="/issues/new">webcompat multi-step form</a>. Take time to be precise and to guide us through the steps that will make it possible to reproduce the issue.
           </p>
 
           <p>
-            <img src="/img/contributors/report-bug_2-form_filled.png" class="img-fit" alt="Image of a fully filled out bug report form" />
+            A short walk-through for the multi-step form is listed below.
           </p>
 
           <ol>
-            <li>The exact URL.</li>
-            <li>A short summary helping us to understand the issue.</li>
-            <li>Select the type of bug.</li>
-            <li>List the steps you need to take in order to get to the issue. This includes which links you click, what you type into form inputs, and so on. Don't be shy! Be as precise as you can, as there are often multiple ways to do such simple-seeming things as log into a site or view an online shopping cart. </li>
-            <li>Modify the browser information if you are reporting an issue for another browser.</li>
-            <li>If possible, make sure you test in another browser before reporting. It may be that the web site simply has an issue no matter which browser is used. These are not web compatibility issues.</li>
-            <li>A screenshot of the page, or just the area of the page highlighting the issue, is one of the best ways to communicate the problem you experienced. Be mindful about screenshots containing private information about yourself or others (such as social network private pages or bank sites).</li>
-          </ol>
+            <li>Enter the exact site URL.</li>
+            <p>
+              <img src="/img/contributors/wizard-url.png" class="img-fit" alt="Image of url step" />
+            </p>
+            <p>
+              <li>Select type of the issue.</li>
+              <p>
+                <img src="/img/contributors/wizard-type.png" class="img-fit" alt="Image of issue type step" />
+              </p>
+            </p>
 
-          <p>
-            You can report the issue anonymously or with your <a href="https://help.github.com/" target="_blank">Github</a> username. (We use the GitHub issue reporting system behind-the-scenes for webcompat.com). When you are identified, we can better follow-up with you if there are additional information required to understand the issue. Anonymous issues which lack details will be closed when we can't reproduce the issue and create a diagnosis.
-          </p>
+            <li>
+              Confirm your browser or modify the browser information if you are reporting an issue for another browser.
+              <p>
+                <img src="/img/contributors/wizard-browser.png" class="img-fit" alt="Image of browser step" />
+              </p>
+            </li>
+
+            <li>
+              If possible, make sure you test in another browser before reporting. It may be that the web site simply has an issue no matter which browser is used. These are not web compatibility issues.
+              <p>
+                <img src="/img/contributors/wizard-different-browser.png" class="img-fit" alt="Image of different browser step" />
+              </p>
+            </li>
+
+            <li>
+              List the steps you need to take in order to get to the issue. This includes which links you click, what you type into form inputs, and so on. Don't be shy! Be as precise as you can, as there are often multiple ways to do such simple-seeming things as log into a site or view an online shopping cart.
+              <p>
+                <img src="/img/contributors/wizard-description.png" class="img-fit" alt="Image of description step" />
+              </p>
+            </li>
+
+            <li>
+              Upload screenshot of the page, or just the area of the page highlighting the issue, is one of the best ways to communicate the problem you experienced. Be mindful about screenshots containing private information about yourself or others (such as social network private pages or bank sites).
+              <p>
+                <img src="/img/contributors/wizard-screenshot.png" class="img-fit" alt="Image of screenshot step" />
+              </p>
+            </li>
+
+            <li>
+              Last step! You can report the issue anonymously or with your <a href="https://help.github.com/" target="_blank">Github</a> username. (We use the GitHub issue reporting system behind-the-scenes for webcompat.com). When you are identified,
+              we can better follow-up with you if there are additional information required to understand the issue. Anonymous issues which lack details will be closed when we can't reproduce the issue and do diagnosis.
+              <p>
+                <img src="/img/contributors/wizard-send.png" class="img-fit" alt="Image of the final step" />
+              </p>
+            </li>
+          </ol>
         </div>
       </div>
     </section>
@@ -59,9 +93,6 @@ <h2 id="tools" class="headline-1 heading">Tools To Report An Issue</h2>
           </p>
 
           <h3 id="form" class="headline-2">The Form</h3>
-          <p>
-            <img src="/img/contributors/report-bug_3-report-site-issue.gif" class="img-fit" alt="Screenshot of three dot menu in Firefox browser" />
-          </p>
           <p>
             The <a href="/issues/new">webcompat report form</a> is the main avenue to report an issue.
           </p>
@@ -81,23 +112,31 @@ <h3 id="web-extensions" class="headline-2">Web Extensions</h3>
 
           <h3 id="in-browser" class="headline-2">In Browser</h3>
           <p>
-            For now, only <a href="https://blog.nightly.mozilla.org/" target="_blank">Firefox Nightly</a> and <a href="https://www.mozilla.org/en-US/firefox/developer/" target="_blank">Firefox Developer Edition</a> have a feature for reporting issues directly from the browser interface.
+            You can find "Report site issue" button in
+            <a href="https://www.mozilla.org/en-US/firefox/channel/desktop/#beta" target="_blank">Firefox Beta</a>,
+            <a href=https://www.mozilla.org/en-US/firefox/channel/desktop/#nightly" target="_blank">Firefox Nightly</a> an
+            <a href="https://www.mozilla.org/en-US/firefox/channel/desktop/#developer" target="_blank">Firefox Developer Edition</a> on desktop and in
+
+            <a href="https://play.google.com/store/apps/details?id=org.mozilla.firefox_beta" target="_blank">Firefox for Android Beta</a>,
+            <a href="https://play.google.com/store/apps/details?id=org.mozilla.fenix" target="_blank">Firefox for Android Nightly</a>,
+            <a href="https://apps.apple.com/ca/app/firefox-private-safe-browser/id989804926" target="_blank">Firefox on iOS</a> on mobile.
+
           </p>
 
           <p>
-            On Firefox Desktop, there is a <span abbr="three dots" title="three dots">•••</span> menu with a Report Site Issue option in the URL bar. Once selected, it automatically brings you to the webcompat reporting form with pre-filed data about your configuration.
+            On Firefox Desktop, "Report Site Issue" button is located in the "Help" submenu of the Application menu. Once selected, it automatically brings you to the webcompat reporting form with pre-filed data about your configuration.
           </p>
 
           <p>
-            <img src="/img/contributors/report-bug_4-desktop-arrow.png" class="img-fit" alt="Screenshot of three dot menu in Firefox browser" />
+            <img src="/img/contributors/report-desktop.png" class="img-fit" alt="Screenshot of Help menu in Firefox browser" />
           </p>
 
           <p>
-            On Firefox Android, you can use the menu button and scroll down to the Report Site Issue option.
+            On Firefox on Android or iOS you can tap the three dot menu and locate the Report Site Issue button in the list.
           </p>
 
           <p>
-            <img src="/img/contributors/report-bug_5-fennec-report-menu.png" class="img-fit" alt="Screenshot of three dot menu in mobile Firefox browser on Android" />
+            <img src="/img/contributors/report-mobile.png" class="img-fit" alt="Screenshot of three dot menu in mobile Firefox browser on Android" />
           </p>
 
           <p>