style is gone in GitHub

[chadwhitacre]

[chadwhitacre]

Still bad in 0.13:

[rummik]

Seems vertical-align wasn't overridden during testing, but is now. A !important should fix it

[rohitpaulk]

Oops, here's how it looks now:

I've checked my console for errors - none.

[kzisme]

Current state of the button on Github - currently reading into some possible fixes. Using the !important tag might be a possible easy fix - currently looking into that option.

Also are there any other websites where we would want to place a Gratipay button?

Lastly, I'm trying to figure out a simple way to test/debug chrome extensions.

[kzisme]

Currently wondering if the style is also broken on Bitbucket/Twitter. I'm still trying to find a decent way to look into the debugging of extensions - since I'm not finding much aside from Chrome Dev Tools - (which I've already been using)

[kzisme]

I currently don't see (or I'm just over-looking it) the gratipay button (or icon) within BitBucket or Twitter either. Still poking around though...

[kzisme]

Alright so it appears that using the !important tag is a last resort sort of deal.

So the issue is with CSS Specificity (I think)

What's happening is the id selector for the BitBucket button is taking precedence over the Github selector.

The specificity hierarchy from what I understand is as follows:

ID > Class > Element

The only issue I'm running into now is...is there a way to change the selector type without messing up a lot of things, or do we even need the BitBucket information in there currently.

The only difference between the two methods(?) is the size of the button, so I'm curious if they are needed.

Going to look into #29 now until I get some input

[clone1018]

We should only be loading bitbucket css on bitbucket and GitHub css on GitHub, we use the important to enforce our styles on a website we don't control. It's probably broken because GitHub changed their root styles.

[kzisme]

@clone1018 So, we just need to change it to match their new root styles, or how would that work?

(sorry I'm new to chrome extensions and such)

[clone1018]

It's pretty simple, we're allowed to run custom js and css on the GitHub website via it, we add HTML here to look like a GitHub button https://github.com/gratipay/gratipay-everywhere/blob/master/chrome/websites/github/github.js#L22 (their default style) and then customize it here: https://github.com/gratipay/gratipay-everywhere/blob/master/chrome/button/button.css#L2

[kzisme]

So, on the initial link (their Github Buttons) changed? - and that's why it broke?

[clone1018]

Sorry I meant to link this line: https://github.com/gratipay/gratipay-everywhere/blob/master/chrome/websites/github/github.js#L19

It looks like they changed the class to: btn btn-sm

[kzisme]

@clone1018 Wow....I was looking in Google Dev Tools this morning and was literally staring at their styling name btn....

Also is there a simple way for me to test if the proposed changes would work while building a Chrome Extension?

[clone1018]

All you have to do is zip the chrome folder and "Load Unpacked Extension" on chrome://extensions/ and select the zip.

[kzisme]

Awesome! I'll check it out and see what I come up with thanks for the guidance @clone1018 👍

[rohitpaulk]

!m @kzisme

[kzisme]

Alright I tested and committed the changes to fix this issue.

@clone1018 was exactly right (thanks for the help)

I'll take a look at the next issue tomorrow :)

Current status:

!m @clone1018

[clone1018]

@kzisme Do you want me to release it?

[kzisme]

If you would like to - I feel like it would be a good idea since it fixes that functionality. Although - I don't know how important/difficult it is to push changes to a chrome extension.

[chadwhitacre]

Yay team! 💃

!m @kzisme @clone1018

Reopening until we've deployed the fix. I'm still seeing 0.13 (November 18, 2014) at https://chrome.google.com/webstore/detail/gratipay-everywhere/ffbkkncpfcobpjaolefljnpmianmflig.

[clone1018]

Good because I forgot :D! "Your item is in the process of being published and may take up to 60 minutes to appear in the Chrome Web Store. "

[kzisme]

@clone1018 @whit537 Just checked and it seems as though it has been updated in the Chrome Webstore :) I'm going to close this issue, but feel free to reopen/comment as needed.

[chadwhitacre]

Huzzah! 💃

[chadwhitacre]

@kzisme Looks like you committed directly to master in 1efcc21, ya? Let's observe our usual pull request workflow for code changes (note that changes to markdown docs can go directly on master).

[chadwhitacre]

Sorry, here's the right link: http://inside.gratipay.com/howto/build-gratipay. :-)

[kzisme]

@whit537 I thought I committed to the css-data-uri branch. Is there a simple way to check based on my commit?

When I view this

At the top when I select "Tree" it doesn't have the master branch selected. I just did a quick edit in browser (since it was a small change) and I tested it locally.

Next time (as per the docs)

use a topic branch in the main repo

Is that right?

Sorry, still getting used to everything :)

[chadwhitacre]

Is there a simple way to check based on my commit?

I do see an indicator in the GitHub UI for 1efcc21:

At the top when I select "Tree" it doesn't have the master branch selected.

That's because, per the URL, you're browsing the tree at commit 1efcc21. Branches in Git are light-weight pointers to SHA-1 hashes. As you add commits to the master branch you are really adding a commit (changeset, diff) to Git history and updating the master branch/pointer to point to your new commit via it's SHA-1 hash. Note that css-data-uri is not selected either.

Is that right?

Yup! :-)

Sorry, still getting used to everything :)

!m @kzisme

Want to schedule a Google Hangout for Monday at 11am to go over PR workflow together?

[kzisme]

@whit537 I will be unable to do a call, but I will be available to chat via hangouts. Would that work for you?

[chadwhitacre]

@kzisme Sure thing. 11am still good?

[kzisme]

Yup, works for me!

[kzisme]

@whit537 Ready when you are