webcompat / webcompat.com

Source code for webcompat.com
https://webcompat.com
358 stars 191 forks source link

Create bugs from twitter, when submitted with a hashtag (and a reduced TC) #2525

Open miketaylr opened 6 years ago

miketaylr commented 6 years ago

originally proposed by @foolip

Ideas: Labeling interop issues so that we can track them to resolution until the underlying spec or browser issues are resolved. Something like https://blogs.windows.com/msedgedev/2016/08/11/edgebug-twitter/, tweeting a reduced test case together with #webcompat to get a bug filed.

As for what happens after the first bug has been filed, I was hoping they could get a special label to separate them from existing bug sources, and a few of us from different vendors try working together for an hour a week to move those interop issues along, similar to what we've already been doing in our "Compat Experiment".

How far it could scale or how valuable I'm not sure, I'm thinking that if we just promote very gently to begin with, then there's not much risk that we'll be flooded. If successful, I imagine a team cross-vendor of browser engineers sharing the burden, and that real-world compat pain reliably turns into higher priority for the spec and browser bugs implicated.

I think the most important difference from the stages you describe is that there won't be a site to reach out to, and should already be a small repro case. The triage would consist of verifying that it does behave differently in different browsers, and if confirmed either turn the repro case into a test in web-platform-tests, or if it's not defined by the spec, open a spec issue.

I'd consider issues like this really "done" when the behavior of original repro case is the same on all browsers.

cc @karlcow @patrickkettner

patrickkettner commented 6 years ago

@karlcow mentioned the api for webcompat. Is there are docs around it?

karlcow commented 6 years ago

@patrickkettner So I will put that on my todo this week to make it a bit more explicit.

karlcow commented 6 years ago

This is a preliminary documentation before finding a place to put it in our docs. (I'm away for the next two weeks)

@miketaylr feel free to add comments. There are probably some omissions.

@patrickkettner if anything is missing for the purpose of what we want to do, just open an issue and we will implement it. Super happy (to say the least) to see more interactions with other browsers.

Documenting webcompat.com form submission

Eagle eye overview

The current system is two steps:

  1. a HTTP GET on /issues/new for pre-populating some form fields (automatic or human triggered)
  2. a HTTP POST on /issues/new for sending the form data to the server (human validation).  

    The data are massaged in the proper form and are sent to the GitHub repo /webcompat/web-bugs/issues. The HTTP POST is submitted with two possible authentifications:

    1. Through GitHub Authentication where the user has authorized webcompat to post things on behalf of the user. (side note: There's an issue about GitHub being too greedy with permissions. We probably need to switch to a GitHub App system.)
    2. Through webcompat-bot (anonymous mode), basically we take in charge the HTTP post. This is valuable for people who do not have a GitHub account or who do not want to reveal who they are (adult site reporting for example) or do not like the excessive permissions request from webcompat.com.

HTTP GET

When creating an HTTP GET from a browser, the form is automatically augmented with:

HTTP GET parameters

When doing a HTTP GET on /issues/new, two special parameters can be used to pass information to the form.

We plan to add a bit more control on this list which would allow us to be more flexible on specific treatments for the issues.

These labels are pretty Gecko oriented for now. They can be extended with new types and family depending on the contributions of external clients. We could perfectly host keywords for Edge, Chrome, Safari if they desire to do so, or any other clients.

The syntax for sending the label to the form is one label= per keyword.

https://webcompat.com/issues/new?src=desktop-reporter&label=type-media&label=type-stylo&url=https://url.example.com/

issue report format

This is an example of issue body as posted on GitHub by webcompat.com (slightly modified for the example).

<!-- @browser: Firefox 63.0 -->
<!-- @ua_header: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.13; rv:62.0) Gecko/20100101 Firefox/62.0 -->
<!-- @reported_with: desktop-reporter -->
<!-- @extra_labels: type-stylo, type-media -->

**URL**: http://penang-hokkien.gitlab.io/

**Browser / Version**: Firefox 63.0
**Operating System**: Mac OS X 10.13
**Tested Another Browser**: Yes

**Problem type**: Design is broken
**Description**: The round button for the chinese language selector is broken
**Steps to Reproduce**:
1. Go to http://penang-hokkien.gitlab.io/
2. Just look at the button.

* Firefox and Safari at first load display an oval on the side.
* Chrome gets it right at first load.
* Firefox gets it right if resizing the window (repaint)
* Safari never changes.

Screenshot:
Top Firefox
Middle Safari
Bottom Chrome
[![Screenshot Description](https://webcompat.com/uploads/2018/7/a9c661df-5edf-4ac6-94a5-7b314ff1d09a-thumb.jpg)](https://webcompat.com/uploads/2018/7/a9c661df-5edf-4ac6-94a5-7b314ff1d09a.jpg)

_From [webcompat.com](https://webcompat.com/) with ❤️_
foolip commented 6 years ago

Thanks @miketaylr for filing this issue while I was OOO, I think this might be great!

@patrickkettner, do you maintain the #EdgeBug reporter? Do you think it'd be straightforward enough to have it also use the API described above?

patrickkettner commented 6 years ago

@karlcow

Thanks a lot! I didn't see your update until just now, but its super helpful :D

@foolip 98% of the code for the twitter bot is integration with our bug tracker. Id be happy to spin up a thing for this though, will do in the next couple of days

kereliuk commented 6 years ago

I really like this idea!

Do you think we should worry about filtering at all? Maybe #EdgeBug has some experience we can learn from. My worry is that the quality of bug reports from this becoming low enough that they usually just get filled as lowest priority bugs and forgotten about. This might not be the case, or it might be something that only happens if this hashtag takes off and we are getting ahead of ourselves, but something to keep in mind.

karlcow commented 6 years ago

@kereliuk What would be for you the minimal requirements to have a valid issue (with quality)?

miketaylr commented 6 years ago

Id be happy to spin up a thing for this though, will do in the next couple of days

Any updates here, @patrickkettner? Or should we collaborate on building a new thing? Thanks!

miketaylr commented 6 years ago

@kereliuk What would be for you the minimal requirements to have a valid issue (with quality)?

if there's a code snippet, or a domain that matches one of the code-pen like things (see https://blogs.windows.com/msedgedev/2016/08/11/edgebug-twitter/ for what edgebug accepts), let's file a bug. we can triage them, and toss out any junk. i imagine the volume wouldn't be that high.