{% extends "layout.html" %}
{% block title %}Report A Website Issue{% endblock %}
{% block body %}
<div>
  {% include "nav/nav.html" %}
  <main role="main">
    <section class="grid grid-show-gap">
      <div class="grid-row">
        <aside class="grid-cell x1-fix">
          {% include "contributors/sub-nav.html" %}
        </aside>
        <article class="grid-cell x1">
          <h1 id="report" class="headline-1 heading">Report A Website Issue</h1>
          <p>
            Once upon a time there was an issue on a website. Something is behaving differently in your favorite browser and not in another one. A menu is not working; the layout is a bit off; you click or tap on this link but it doesn't respond. This seems like a good time to file a bug report on webcompat.com! Since we can’t fix every issue on the web, we have <a href="#tools">tools</a> and <a href="#recommendations">recommendations</a> to help you understand what issues are not in the scope of this project.
          </p>
        </article>
      </div>
    </section>
    <section class="grid">
      <div class="grid-row">
        <div class="grid-cell x3">
          <h2 id="how" class="headline-1 heading">How To Report An Issue?</h2>
          <p>
            The goal of reporting an issue is to give all the possible information that will help someone without any context to understand, reproduce and eventually diagnose the symptoms of this issue.
          </p>

          <p>
            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>
            A short walk-through for the multi-step form is listed below.
          </p>

          <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>

            <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 id="last-step">
              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>
    <section class="grid">
      <div class="grid-row">
        <div class="grid-cell x3">
          <h2 id="tools" class="headline-1 heading">Tools To Report An Issue</h2>
          <p>
            There are basically three ways of reporting an issue depending on your browser.
          </p>

          <h3 id="form" class="headline-2">The Form</h3>
          <p>
            The <a href="/issues/new">webcompat report form</a> is the main avenue to report an issue.
          </p>

          <h3 id="web-extensions" class="headline-2">Web Extensions</h3>
          <p>
            <a href="https://addons.mozilla.org/en-US/firefox/addon/webcompatcom-reporter/" target="_blank">Webcompat.com Reporter</a> for Firefox (<a href="https://www.mozilla.org/en-US/firefox/" target="_blank">normal</a> and <a href="https://www.mozilla.org/en-US/firefox/channel/desktop/" target="_blank">beta</a> releases)
          </p>

          <p>
            <a href="https://chrome.google.com/webstore/detail/webcompatcom-reporter/ffnnhckjcpbbjlmgfjigknkoffakclol" target="_blank">Webcompat.com Reporter</a> for Chrome
          </p>

          <p>
            We do not have currently an extension for Chrome on Android and Safari on iOS, you are welcome to contribute to the project, see <a href="https://github.com/webcompat/webcompat-reporter-extensions/issues/70" target="_blank">Support reporting issues from iOS browsers and Chrome for Android</a>.
          </p>

          <h3 id="in-browser" class="headline-2">In Browser</h3>
          <p>
            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> and
            <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, "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-desktop.png" class="img-fit" alt="Screenshot of Help menu in Firefox browser" />
          </p>

          <p>
            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-mobile.png" class="img-fit" alt="Screenshot of three dot menu in mobile Firefox browser on Android" />
          </p>

          <p>
            Other browser vendors are welcome to provide a way to automatically report issues to webcompat.com in a similar fashion in their pre-release versions. <a href="https://github.com/webcompat/webcompat.com/issues/new" target="_blank">Open an issue</a> on the webcompat.com project.
          </p>
        </div>
      </div>
    </section>
    <section class="grid">
      <div class="grid-row">
        <div class="grid-cell x3">
          <h2 id="recommendations" class="headline-1 heading">Is It Really A Web Compatibility Issue?</h2>

          <p>
            Issues that fall into the web compatibility category are related to layout, content,
            features or site functionality and occur in one browser, but not in another, for various reasons.
          </p>


          <p>Therefore, we're looking for reports that represent <b>differences </b> in how browsers render web content with this principle in mind.</p>

          For example:
            <ol>
              <li>Missing elements on the page in Chrome, but not in Firefox.</li>
              <li>Can't access a site due to Safari on iOS being unsupported.</li>
              <li>Video or audio doesn't play.</li>
              <li>The desktop version of the site is displayed on Firefox for Android, but Chrome receives the mobile layout.</li>
              <li>Buttons or links don't respond to clicks or taps.</li>
              <li>Can't log in or constantly being logged out in Firefox, but it works in Edge.</li>
              <li>Animation on a website is slow in one browser but fast in another.</li>
            </ol>
          <p id="non-compat">
            Note that network issues, tracking, ads and script blockers, are likely <a href="http://www.otsukare.info/2017/10/05/what-is-a-webcompat-issue" target="_blank">not compatibility issues</a>.
          </p>
          <p>
            <b> Issues that are not related to web compatibility efforts and will be closed: </b>
          </p>
          <ol>
            <li>
              Issues that are reproducible in all browsers. Likely this is a website issue and author or owner of the website should be notified instead.
            </li>
            <li>
              Issues with the user interface of the browser itself and not the content of a website. These suggestions should be reported directly to the browser vendor.
            </li>
            <li>
              Add-ons or web extensions. Report these issues directly to the creator of the extension.
            </li>
            <li>
              Deceptive websites (phishing, scam, malware). You can report such sites to the <a href="https://safebrowsing.google.com/safebrowsing/report_phish/" target="_blank">Report Phishing Page</a>.
            </li>
            <li>
              Illegal content on the website. The best would be to report to your local authorities as we're not in a position to act on these issues.
            </li>
            <li>
              Incorrect or inaccurate content. The best course of action is to get in touch with the author/owner of the website and let them know.
            </li>
          </ol>
        </div>
      </div>
    </section>
    <section class="grid">
      <div class="grid-row">
        <div class="grid-cell x3">
          <h2 id="ml" class="headline-1 heading">Machine Learning for detecting invalid reports</h2>

          <p>
            We have added a machine learning bot into our workflow to help with incoming reports triage.
            The bot analyses content of the reports and classifies them as valid or invalid based on the historical data.
            Invalid reports are closed automatically without human involvement. </p>

          <p>If your report was closed by the bot, there are three possible reasons:
            <ol>
              <li>
                It falls into a <a href="#non-compat">category that is outside the scope of this project</a>.
                Please take a closer look at the section describing <a href="#recommendations">web compatibility issues in detail</a>.
              </li>
              <li>
                The problem you're experiencing has already been reported, and we received a lot of duplicates.
                In this case, you could search for the domain in question on our <a target="_blank" href="https://github.com/webcompat/web-bugs/issues">GitHub page</a>
                to look for similar reports and get updated information on their status.
              </li>
              <li>
                It was closed by mistake. While these cases are rare, there is still a possibility that the bot classified your report as invalid mistakenly.
                If you think it was closed by mistake, you could file another one using <a href="#last-step">"Report via GitHub"</a> option instead of
                "Report anonymously". Reports from authenticated users don't get triaged by the bot.
              </li>
            </ol>
          </p>

        </div>
      </div>
    </section>
  </main>
</div>
{% endblock %}
{%- block extrascripts -%}
<script type="module" src="{{ url_for('static', filename='dist/contributors.js')|bust_cache }}"></script>
{%- if config.PRODUCTION or config.STAGING -%}
<script nomodule src="{{ url_for('static', filename='dist/contributors.es5.js')|bust_cache }}"></script>
{%- endif %}
{%- endblock %}
