Help feature for first-time visitors who land on a Github issue #741
Comments
|
@karlcow you like thinking about end users with different perspectives - thoughts here? |
|
We discussed this a bit during Paris meeting. And indeed adjusting the first comment on Github once it has been POSTed would help anyone not only beginners to go back to webcompat.com. see this comment #267 (comment) |
|
Yep, agreed. #267 is closed. :)~ |
|
To continue the discussion about this and because @deckycoss is interested on actually working on it. When a user posts to webcompat.com a new issue…
The boilerplate text will be to determined, but should be a variable. Putting a no meaning text for the purpose of testing. We can bikeshed later. GITHUB_MSG = "I WILL arise and go now, and go to Innisfree," |
|
assuming that github does not allow special metadata or html (i.e., a span tag) in its issue descriptions, my approach for the help feature would be something like this:
does this sound like the right track? |
|
@deckycoss I think there is an easier way. So let's try the "to check if it is text only or html is authorized" above. I tested a local instance of webcompat on localhost and created a new bug report containing the following markup by hand: The result is visible at webcompat/webcompat-tests#338 Here for sure the markup is not at the right place, because I used the form. That's normal. But it also means that the markup was kept so if we insert it in the start of the body. It means we can just use css to hide it on webcompat.com without relying on JS. |
|
@karlcow i've been experimenting with this and i'm curious about something. i've found that inserting the following help message immediately before or after the browser information results in the message becoming hidden:
however, removing the could you explain how this works? i can see that the message and browser information are enclosed in a paragraph with the "is-hidden" class, but i haven't figured out what makes that happen. |
|
could you try with instead of
|
|
For the feature which is adding the but here we do not want a comment we really want something which is visible on Github and can be hidden on webcompat side.
|
|
@karlcow i actually tried so the js filter, if i'm reading the code right, looks for text matching html comment tags, and wraps everything in them in the hidden paragraph? i wonder then why it is able to hide the help message when it is inserted before the comment... |
|
@deckycoss
Yes but that doesn't matter.
What do you mean? |
|
@karlcow i guess what i'm trying to say is, i'm still confused as to why a |
|
ok let me see. Then dumb editing the form.py diff --git a/webcompat/form.py b/webcompat/form.py
index e5617c5..fcbd4cd 100644
--- a/webcompat/form.py
+++ b/webcompat/form.py
@@ -201,6 +201,8 @@ def build_formdata(form_object):
# Preparing the body
body = u'''{browser_label}{ua_label}
+<p class="boilerplate">This is the boilerplate text with a class.</p>
+<p>This is the boilerplate text without class.</p>
**URL**: {url}
**Browser / Version**: {browser}
**Operating System**: {os}Then Checking the results at: Bingo! Both worked. So still not sure what you are trying to do. |
|
btw the markup of that test issue is <!-- @browser: Firefox 47.0 -->
<!-- @ua_header: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:47.0) Gecko/20100101 Firefox/47.0 -->
<p class="boilerplate">This is the boilerplate text with a class.</p>
<p>This is the boilerplate text without class.</p>
**URL**: http://foo.example.com/
**Browser / Version**: Firefox 47.0
**Operating System**: Mac OS X 10.11
**Problem type**: Something else - I'll add details below
**Steps to Reproduce**
Testing boilerplate text. There should be something above this. |
|
@karlcow thanks for testing this. i decided to test this again using a message similar to yours: i found, as you did, that both paragraphs are hidden: http://i.imgur.com/p3t8rSg.png however, i then removed the first paragraph so the message looked like this: this time, it was not hidden: http://i.imgur.com/1lrSTkn.png i don't know if this is important or not, but i at least find it curious. if it isn't a big deal then i will submit my pull request. |
Note that my paragraphs are not hidden. :) It worked. I see you seem to have tested here. And I see both paragraph so it worked? or is it something else. Push your commits to your repo with this issue number in the commits messages and we can start discuss about it. ^_^ Maybe the code will help us clarify what's happening on your side. |
|
sorry, i should have been clearer. by "hidden", i meant that it is hidden on the webcompat.com app, but visible on github. i've made a pull request: #973 |
|
Ah understood I should have checked on my local instance. This is happening because the hidden is swallowing everything: <div class="js-Issue-markdown wc-Markdown"><p class="is-hidden">
<!-- @browser: Firefox 47.0 -->
<!-- @ua_header: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:47.0) Gecko/20100101 Firefox/47.0 -->
<p class="boilerplate">This is the boilerplate text with a class.</p>
<p>This is the boilerplate text without class.</p>
**URL**: http://foo.example.com/
**Browser / Version**: Firefox 47.0
**Operating System**: Mac OS X 10.11
**Problem type**: Something else - I'll add details below
</p><p><strong>Steps to Reproduce</strong><br>
Testing boilerplate text. There should be something above this.</p>
</div>And it gives indeed:
We probably need to check how is swallowing the DOM. |
|
@karlcow do you think i should try to figure out why this is happening? or should that be saved for another issue? |
|
Ok understood the issue. To have it work we really need to fix issues.js issues.BodyView = Backbone.View.extend({
el: $('.wc-Issue-report'),
template: _.template($('#issue-info-tmpl').html()),
initialize: function() {
this.QrView = new issues.QrView({
model: this.model
});
},
render: function() {
this.$el.html(this.template(this.model.toJSON()));
// hide metadata
$('.js-Issue-markdown')
.contents()
.filter(function() {
//find the bare html comment-ish text nodes
return this.nodeType === 3 && this.nodeValue.match(/<!--/);
//and hide them
}).wrap('<p class="is-hidden"></p>');
this.QrView.setElement('.wc-QrCode').render();
return this;
}
});I think we should solve this in this issue @deckycoss :) What is happening is that the JavaScript is matching a textNode The bad thing is that it is pretty generic. Trying to break the thing I did Which in localhost is rendered as: <div class="js-Issue-markdown wc-Markdown"><p class="is-hidden">
<!-- @browser: <p>Firefox 44.0</p> -->
<!-- @ua_header: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:44.0) Gecko/20100101 Firefox/44.0 -->
<p class="boilerplate">foo</p>
</p><p><strong>URL</strong>: <a href="http://foo.example.com/" rel="nofollow">foo.example.com/</a><iframe src="http://www.la-grange.net"/><br>
<strong>Browser / Version</strong>: <p>Firefox 44.0</p><br>
<strong>Operating System</strong>: Mac OS X 10.11<br>
<strong>Problem type</strong>: Something else - I'll add details below</p>
<p><strong>Steps to Reproduce</strong></p><p class="is-hidden">
<!-- foo bar -->
<p>
1) Navigate to: foo.example.com/<iframe src="http://www.la-grange.net"/>
2) …
</p>
Expected Behavior:
</p><p>Actual Behavior:</p>
</div>We need to improve our sanitization process and have a better targetting at the comments. |
If we @mention GitHub-users, they are going to get a notification sending them to a GitHub issue URL. This is extremely useful for us and one of the main reasons we are sticking to GitHub as a backend.
However, it is not necessarily easy for an unsuspecting first-time visitor to some issue to understand what this project is about when arriving on a random bug report.
I suggest we add some standard text at the top of each bug report (we can hide this when we are on webcompat.com) - perhaps a "What's this about?" link?
The text was updated successfully, but these errors were encountered: