Browser Extension Beta #5

jclancy93 · 2017-11-23T01:19:43Z

TODO List

Development

1. Ability to browse funded issues (and amounts) on an issue board
2. View funded issue states (and amounts) on github issues page
3. Visual style that matches github
4. ability to input what keywords you want to filter on, and only display those issues in the dropdown.
5. The notifications are kind of obnoxious. Don't show notifications for all issues associated with repo.
6. More robust check for user page
7. Improve user tip button (to match github styles)

…and title

…sues page

jclancy93 · 2017-11-24T05:04:35Z

Here is the current state of a repos issues page with badges for issues with funding amounts and statuses (these are also links which take you to the issue on the gitcoin site)

Here is the current state of a search for keywords, I am doing a keyword match as well as doing a title match with indexOf() . One can also search for claimed bounties. It is currently working on a 500ms debounce from the 'keyup event'.

Here is the new user tip button.

@owocki let me know if you have any thoughts on the work so far.

owocki · 2017-11-24T15:14:15Z

i am out of pocket today (limited internet, thanksgiving break in the US), but wanted to pop in and say that i'm very excited by the progress i see here! the issues board in particular looks very promising.

owocki · 2017-11-24T15:14:32Z

i will pop in with more thoughtful feedback hopefully over the weekend

jclancy93 · 2017-11-24T18:04:42Z

No rush @owocki, Happy Thanksgiving! I will update this pull with any further progress I make

jclancy93 · 2017-11-24T20:29:06Z

I actually have a few things I want to clarify:

For "1.) Ability to browse funded issues (and amounts) on an issue board", when you say board, do you mean the "boards" tab (the kanban board) or the page i attached (all issues page)? In your previous comment you said my work on the issues board looks good, just want to make sure which page this task is referring to.

I am also struggling to find the code when the notifications are generated, could you point me in the right direction? Thanks you for the help and I'm glad you like the progress so far :)

owocki · 2017-11-27T15:42:51Z

Looking at this now. Thanks for your patience thus far (holiday weekend!)

owocki · 2017-11-27T15:43:47Z

script/pageload/body.js

@@ -11,25 +11,41 @@ var body = function(){
        setThumbnail('');
    }

-    var isOnUserProfile = isOnGitHub && url.match(/.+\/.+\/?/gi) != null;
+    var isOnUserProfile = isOnGitHub && url.match(/.+\/.+\/?/gi) != null && document.getElementById("report-block-modal");


good catch!

owocki · 2017-11-27T15:44:30Z

script/pageload/body.js

    var isOnProfile = isOnGitHub && url.match(/.+\/.+\/.+\/?/gi) != null;
    var isOnRepo = isOnGitHub && url.match(/.+\/.+\/.+\/.+\/?/gi) != null;
    var isOnIssuePage = isOnGitHub && ( url.indexOf('/pull/') != -1 || url.indexOf('/issue/') != -1 || url.indexOf('/issues/') != -1 );
+    var isOnIssuesPage = isOnGitHub && url.indexOf('/issues') != -1;


this reminds me, i should refactor isOnIssuePage to be more descriptive of where the user actually is

definitely, this is something I can add too. A simple "check if element on page" should suffice, unless you have something else in mind

owocki · 2017-11-27T15:45:50Z

script/pageload/functions.js

+}
+
+getAllBounties = function(){
+  var bounties_api_url = 'https://gitcoin.co/api/v0.1/bounties/?order_by=-web3_created';


if you wanted to be more performant/selective, you could search bounties by keyword here (so that you don't have to match inside the for loop on line 28).

Here's an example: https://gitcoin.co/api/v0.1/bounties/?raw_data=python

itd also be good to only show mainnet bounties that are open

https://gitcoin.co/api/v0.1/bounties/?&idx_status=open&network=mainnet

Good idea, thanks for this

mind making this change

itd also be good to only show mainnet bounties that are open

https://gitcoin.co/api/v0.1/bounties/?&idx_status=open&network=mainnet

owocki · 2017-11-27T15:46:42Z

script/popup/index.js

@@ -66,15 +75,69 @@ var addMessage = function(_class, msg, seconds=5000){
    setTimeout(callback, seconds);
 }

+getAllBounties = function(){


i wonder if theres a way to DRY here.

owocki · 2017-11-27T15:56:00Z

installing the browser extension now to play with it. here is my feedback upon first use:

could the keywords persist from poup to popup? it stinks to lose my place just because i closed the browser extension window.
better yet, the keyword could prefill with the repo name of whatever repo the user is browsing at the moment (but only if they are on github).
building on the above, if the setThumbnail() number always matched the # of bounties that were visible when you opened the popup, that'd be 💯
issues page looks great!
so does the new tip button!
there used to be a 'fund issue' or 'claim issue' button on issue detail pages (example: Provide Firefox version of Gitcoin Chrome Extension #1) depending upon the gitcoin issue state. but maybe it's broken now.. ? Thats what I meant to refer to when I said "View funded issue states (and amounts) on github issues page". I should have said "issue detail page".

owocki · 2017-11-27T15:58:38Z

For "1.) Ability to browse funded issues (and amounts) on an issue board", when you say board, do you mean the "boards" tab (the kanban board) or the page i attached (all issues page)? In your previous comment you said my work on the issues board looks good, just want to make sure which page this task is referring to.

I was hoping that the user could be provided an option to hide non-funded issues when browsing an issues board. This way they would only be looking at funded issues. Is this plausible?

I am also struggling to find the code when the notifications are generated, could you point me in the right direction? Thanks you for the help and I'm glad you like the progress so far :)

Sure thing. What I did might be a little hacky, but here it is.

https://github.com/gitcoinco/chrome_ext/blob/master/script/pageload/callbacks.js#L25

You want to use setThumbnail()

owocki · 2017-11-27T15:59:54Z

Visual style that matches github

I'd also say that so far this looks really good and matches Github style way better than my code did.

owocki · 2017-11-27T16:14:08Z

TODO:

if an issue is already funded the green button shouldnt say 'fund issue', it should say 'claim issue'
also, if there is a long title, we need to deal with the CSS!

http://bits.owocki.com/1P321E1Z2Q2A/Image%202017-11-27%20at%209.13.27%20AM.png
MetaMask/metamask-extension#2577

jclancy93 · 2017-11-27T16:34:45Z

@owocki Thanks! Glad you like it. I tried to reuse github style classes as much as possible to save me writing css :)

I noticed the long titles conflicting with the button too. I will reposition so that doesn't happen and change text to claim issue if issue is funded.

I don't know how much success we will have with the issues kanban board. I can inject the html correctly on initial load, but it seems that there is a virtual scroll that re-renders the html and removes whatever i injected. Just pushed that code now, if you wanna take a look for yourself.

All your requested changed look good, I will work on them on the next few days and will update you with my progress.

jclancy93 · 2017-11-27T16:51:35Z

Also, as a side issue, I have noticed that the body function is only invoked on a full page refresh. From what I can tell, github is a collection of smaller SPAs. This means that not every page change will re-invoke the body function (it won't work if you stay inside the same SPA, only if you change to diff SPA). I tested and found this behavior on the master branch too.

Just something I thought I should give you a heads up on @owocki

owocki · 2017-11-27T18:28:09Z

I don't know how much success we will have with the issues kanban board. I can inject the html correctly on initial load, but it seems that there is a virtual scroll that re-renders the html and removes whatever i injected. Just pushed that code now, if you wanna take a look for yourself.

totally hacky, but would it be worth having a setInterval that keeps checking for re-rendered HTML and then inserts the gitcoin HTML?

Also, as a side issue, I have noticed that the body function is only invoked on a full page refresh. From what I can tell, github is a collection of smaller SPAs. This means that not every page change will re-invoke the body function (it won't work if you stay inside the same SPA, only if you change to diff SPA). I tested and found this behavior on the master branch too.

sorry, which body function? mind pointing me to the code?

i wonder if this means the setInterval() route might be the way to go more generally. its the only way i can think of handling this unless we can find a way to inject gitcoin code into github

owocki · 2017-11-27T18:28:22Z

All your requested changed look good, I will work on them on the next few days and will update you with my progress.

🔥 hott! looking forward

jclancy93 · 2017-11-27T19:40:55Z

totally hacky, but would it be worth having a setInterval that keeps checking for re-rendered HTML and then inserts the gitcoin HTML?

I tried doing something like this (was listening to dom changes) but it was firing way too much, setting it on an interval is a good idea. It won't be perfect but it will work.

sorry, which body function? mind pointing me to the code?

i wonder if this means the setInterval() route might be the way to go more generally. its the only
way i can think of handling this unless we can find a way to inject gitcoin code into github

Its the body function in the scripts/pageload/body.js file, invoked in body.js:52. I thought about how to handle this situation for a while over the weekend (with little success). I could see a setInterval being problematic for the general case. Wouldn't it just re-inject the same html multiple times? We could do a check to see if the html had already been injected as a workaround to that issue. It would be great if we could listen for a url change event instead. Ill let you posted on this.

rajatkapoor · 2017-11-28T22:50:10Z

Usually while developing chrome extension injecting content scripts to a dynamically changing SPA, we use MutationObservers. That might help in this case. Instead of calling the body() method in the content script on page load, we can have mutation observers observing added nodes and acting when an "interesting" change happens

owocki · 2017-11-28T22:55:48Z

this is so cool. thanks @rajatkapoor !

jclancy93 · 2017-11-29T03:02:49Z

@rajatkapoor thanks for pointing this out. I tried using the mutation events api with little success. mutation observers are exactly what I'm looking for.

jclancy93 · 2017-12-07T00:27:10Z

Here's a few more updates:

Fixed issue detail page positioning and text content

Early version of issue board page

The board page is tough to do. I tried hiding non-gitcoin issues but because the way these boards are designed, the element doesn't move up to the top of the list, its keeps its current position, because every card is positioned absolutely. This results in a bunch of whitespace when you try and hide cards.

Will post more updates soon. LMK if you have any thoughts.

owocki · 2017-12-07T02:11:21Z

really excited about the trello bonus! great to have you back @jclancy93 .. i hope to ship this soon!

jclancy93 · 2017-12-13T05:27:47Z

Hey @owocki, thanks for bearing with me! I added persistent keywords to the popup and the popup will now autofill the issue keyword when on a github repo. From what I can tell, it looks like you use the bounty smart contract as the data source for numBounties, the number for setThumbnail(). Would you like me to change this as the data source?

owocki · 2017-12-13T16:40:34Z

@jclancy93 npnp :)

Would you like me to change this as the data source?

defer to you on this. you can use either the REST API or web3 !

jclancy93 · 2017-12-13T16:50:06Z

@owocki it looks like the variable numBounties in the contract isn't always matching up with the number we expect (most of the time it is). For example, the smart contract repo it lists the number of issues as 4 but It should only be one.

owocki · 2017-12-13T16:58:59Z

got it; i think we can use the http api as source of truth then !

jclancy93 · 2017-12-14T07:16:41Z

Ok this should help a lot with the thumbnail issue. The thumbnail should now:

When user on a github repo with gitcoin issues, display number of gitcoin issues in thumbnail
When user on a github repo without gitcoin issues, display 0 in thumbnail
When user not on a github repo, don't display a thumbnail

Let me know what you think!

owocki · 2017-12-14T16:04:23Z

Let me know what you think!

this sounds right to me. ill pull the lates code into my google chrome and test it for a day or two and get back if anything feels off

owocki · 2017-12-14T16:06:41Z

When user on a github repo

Is it only when you are on the proper repo, or anything downstream from the repo (wiki, pull requests, etc)?

display number of gitcoin issues in thumbnail

does it only do issues of a certain type?

for example, i am on this URL right now #5 (comment) and i get a 0 in my thumbnail -- but the issue we are on now (chrome extension) is an open issue i think..

owocki · 2017-12-14T16:07:47Z

one other random piece of feedback. it'd be cool if when i was on a github repo that has open funded issues, if those were automatically shown when i click the gitcoin thumbnail.

so for example, while on #5 i click the thumbnail and the keywords field is prefilled with gitcoinco/chrome_ext, thereby filtering the popup on those issues!

jclancy93 · 2017-12-14T16:54:07Z

Is it only when you are on the proper repo, or anything downstream from the repo (wiki, pull requests, etc)?

I know its working on both issues and the repo page, but I still need to do more testing downstream. Based on some quick testing I did just now, it doesn't seem to work on anything more downstream than issues, but I will fix that up.

for example, i am on this URL right now #5 (comment) and i get a 0 in my thumbnail -- but the issue we are on now (chrome extension) is an open issue i think..

So the Browser Extension Revamp issue is actually associated with the web repo, thats why its not showing up here. I am only displaying issues with idx_status=open right now, but can easily change that.

one other random piece of feedback. it'd be cool if when i was on a github repo that has open funded issues, if those were automatically shown when i click the gitcoin thumbnail.

This is already happening! :) Here's some screenshots:

owocki · 2017-12-18T18:48:30Z

awesome!

what can i do to help you get this shipped soon. this is already such an advancement over the current featureset, i'd love to put it live for the community to play with it soon :)

jclancy93 · 2017-12-18T19:03:58Z

Maybe we could release this on a beta branch and allow for the community to given open feedback/suggestions? You can announce it via slack or email or reddit?

I'd like to do a little cleanup before then, just remove logging statements and make sure that I'm consistent with your code. Apart from that, I think everything from the original bounty is complete.

The only other thing I think needs improving is running specific functions with setTimeouts, I'm hesitant to force everything to run on a setTimeout cause I'm afraid of the performance costs.

I'll try to have a push out later today with these two improvements. Let me know what you think of this plan

owocki · 2017-12-18T20:32:45Z

Maybe we could release this on a beta branch and allow for the community to given open feedback/suggestions? You can announce it via slack or email or reddit?

Yes, I like this idea.

I'd like to do a little cleanup before then, just remove logging statements and make sure that I'm consistent with your code. Apart from that, I think everything from the original bounty is complete.

The only other thing I think needs improving is running specific functions with setTimeouts, I'm hesitant to force everything to run on a setTimeout cause I'm afraid of the performance costs.

I'll try to have a push out later today with these two improvements. Let me know what you think of this plan

I'm into it :) While youre at it, can you resolve the merge conflict too pls?

owocki · 2017-12-19T16:44:55Z

merging to master so i can cut a release. stay tuned!

jclancy93 added 8 commits November 21, 2017 23:17

adding issue amounts to issue pages

4b8adb5

search implentation v1 working

a3d72ac

improved search, now doing string matching on raw_data.issueKeywords …

3fd2f27

…and title

fixing get all bounties url to return claimed bounties as well

0bfbbd7

beginning work on adding issue state/amount icons to all issues on is…

c057845

…sues page

adding more robust check for isOnUserProfile

8220d08

funded issue state and amount for open issues

a797c4d

updating search styles and allowing searches for already claimed issues

c6b0927

jclancy93 added 3 commits November 24, 2017 15:38

prototype code to add issues to issue board page

82f671e

updating button styles

5551ca7

adding buttons to issue board (WIP) and updating user tip button styles

2be831c

owocki suggested changes Nov 27, 2017

View reviewed changes

code for issue boards that doesn't cause crash

3559062

jclancy93 added 2 commits November 27, 2017 11:42

add set timeout so issue boards injection works

0e80101

typo

11473b5

fixed issue detail page positioning + text and v1 of issue board

3610842

jclancy93 added 2 commits December 12, 2017 23:50

persistent search keyword

febeebe

autofilling repo keyword when on github repo

f097c3a

jclancy93 added 3 commits December 14, 2017 01:53

correctly setting thumbnail number

bb2e24f

exact match between thumbnail number and issues listed in search

c212407

final fixes for setThumbnail

cf8d1f5

owocki added 2 commits December 19, 2017 09:22

Merge branch 'master' into revamp

ab410fa

Merge branch 'master' into revamp

a563aed

owocki merged commit 23a91eb into gitcoinco:master Dec 19, 2017

owocki changed the title ~~(WIP) Browser Extension Revamp~~ Browser Extension Beta Dec 20, 2017

Browser Extension Beta #5

Browser Extension Beta #5

Conversation

jclancy93 commented Nov 23, 2017 • edited

Development

jclancy93 commented Nov 24, 2017 • edited

owocki commented Nov 24, 2017

owocki commented Nov 24, 2017

jclancy93 commented Nov 24, 2017

jclancy93 commented Nov 24, 2017 • edited

owocki commented Nov 27, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

owocki commented Nov 27, 2017 • edited

owocki commented Nov 27, 2017

owocki commented Nov 27, 2017

owocki commented Nov 27, 2017 • edited

jclancy93 commented Nov 27, 2017

jclancy93 commented Nov 27, 2017

owocki commented Nov 27, 2017

owocki commented Nov 27, 2017

jclancy93 commented Nov 27, 2017

rajatkapoor commented Nov 28, 2017

owocki commented Nov 28, 2017

jclancy93 commented Nov 29, 2017 • edited

jclancy93 commented Dec 7, 2017

owocki commented Dec 7, 2017

jclancy93 commented Dec 13, 2017

owocki commented Dec 13, 2017

jclancy93 commented Dec 13, 2017

owocki commented Dec 13, 2017

jclancy93 commented Dec 14, 2017 • edited

owocki commented Dec 14, 2017

owocki commented Dec 14, 2017

owocki commented Dec 14, 2017

jclancy93 commented Dec 14, 2017 • edited

owocki commented Dec 18, 2017

jclancy93 commented Dec 18, 2017

owocki commented Dec 18, 2017

owocki commented Dec 19, 2017

jclancy93 commented Nov 23, 2017 •

edited

jclancy93 commented Nov 24, 2017 •

edited

jclancy93 commented Nov 24, 2017 •

edited

owocki commented Nov 27, 2017 •

edited

owocki commented Nov 27, 2017 •

edited

jclancy93 commented Nov 29, 2017 •

edited

jclancy93 commented Dec 14, 2017 •

edited

jclancy93 commented Dec 14, 2017 •

edited