Support Gitako

[MCOfficer]

Describe the change you'd like

Since we have support for Octotree, it would be awesome to also get support for its alternative, Gitako.

Additional context For anyone unwilling to wait (and any possible contributor), I've put together a stylesheet that makes Gitako at the very least usable. It has some quirks though, so you have been warned.

CSS

``` .gitako-side-bar .gitako-side-bar-body { border-right: 1px solid #404040; border-left: 1px solid #404040; } .gitako-side-bar .gitako-side-bar-body .gitako-settings-bar .header-row { border-top: 1px solid #404040; } .gitako-side-bar .gitako-side-bar-body .gitako-side-bar-content .meta-bar { background: #181818; border-bottom: 1px solid #404040; color: #d2d2d2; } .gitako-side-bar .gitako-side-bar-body .gitako-side-bar-content .file-explorer .node-item-row .node-item { border-top: 1px solid #404040; } .gitako-side-bar .gitako-resize-handler { border-left: 1px solid #404040; } .gitako-side-bar .gitako-side-bar-body .gitako-settings-bar, .gitako-side-bar .gitako-side-bar-body .gitako-side-bar-content .file-explorer .node-item-row, .gitako-side-bar .gitako-side-bar-body .gitako-side-bar-content .meta-bar, .gitako-side-bar .gitako-side-bar-body .gitako-settings-bar-content .shadow-shelter, .gitako-side-bar .gitako-side-bar-body .gitako-side-bar-content .file-explorer{ background: #181818; } .gitako-side-bar .gitako-side-bar-body .gitako-side-bar-content .file-explorer .node-item-row.focused, gitako-side-bar .gitako-resize-handler, .gitako-side-bar .gitako-resize-handler:hover { background: #2e2e2e !important; } .gitako-side-bar .gitako-resize-handler:hover { border-right: 1px solid #404040; } .gitako-side-bar .gitako-side-bar-body .gitako-side-bar-content .file-explorer .node-item-row:hover{ background: #3b6a99; } .gitako-side-bar .gitako-side-bar-body .gitako-side-bar-content .file-explorer .node-item-row .node-item { color: #d2d2d2; } .gitako-side-bar .gitako-side-bar-body .octicon { color: #4f8cc9; } ```

Thank you for your work :)

[the-j0k3r]

CSS at https://github.com/EnixCoda/Gitako/blob/master/src/content.less

@MCOfficer read https://github.com/StylishThemes/GitHub-Dark/issues/1012#issuecomment-539843129

@silverwind

[silverwind]

The extension compiles their CSS into JS so we can not automatically extract and override its styles. I would consider supporting it if the extension would use https://webpack.js.org/plugins/mini-css-extract-plugin or similar to produce .css files in the web extension's files.

@EnixCoda

[EnixCoda]

Hi @silverwind I released Gitako v0.8.7 which contains content.css. It has been published for FireFox and still pending review for Chrome.

[silverwind]

@EnixCoda Awesome, thanks. Once it's on the Chrome store, I will integrate it. I will also experiment extracting CSS out of JS but it's good that you did it nonetheless.

[silverwind]

I actually finished the CSS extraction. It's a bit hackish but works. Once the version with the CSS is released, our tooling will automatically switch to using CSS instead.

[MCOfficer]

Super quick reactions from all of you. Thanks, everyone ^^

[EnixCoda]

Hi @silverwind One user of Gitako feedbacks (in Chinese) that dark mode crashed on his side because of the changes (extracting CSS from Gitako). He is using another tool called dark reader to apply dark mode. Since I extracted styles to CSS files and Chrome injects CSS into somewhere not accessible by dark reader, it does not work anymore.

I'm trying to figure out a way that both users of stylus and other tools could enjoy dark mode. I need to ask few questions:

1. How does this project extract styles out of Gitako and apply to stylus?
2. how do you keep update to updates of Gitako?
3. Would it be possible of stylus to support Gitako if it was rollback to the old way it used to inject styles? Would that be much more work for you now and in the future?
4. Was there problems like this before? How did you solve them?

Thanks!

[the-j0k3r]

Answer to 1 and 2 is our generator see https://github.com/StylishThemes/GitHub-Dark/commit/b609598aea28a36ca76315d55e0b1c091afb7c42 the whole commit

So that is extracting the css based on those rules and its then put into GitHub-Dark usercss which you then get updated and working within GitHub Dark this is autogenerated content. As a user you only need stylus and GitHub Dark.

3) Stylus doesnt support ANY sites, userstyles/themes do, Im not sure what this is supposed to mean, sorry.

4) We have many requests for extension support, soe we add, some cant be added but always the same. None of us uses most f any of these extensions like Gitako, Refined GitHub etc, so we really need people who use them to help maintain them.

[MCOfficer]

WRT 3, I suppose they mean this userstyle.

I tried this userstyle + gitako + dark reader and didn't find any problems.

[the-j0k3r]

Yea but they are hacking the CSS into chrome somehow and not using this.

[silverwind]

How does this project extract styles out of Gitako and apply to stylus?

Download the Chrome extension and parse all CSS files as well as strings in JS files that look like CSS. Then, apply replacement colors based on a predefined color-to-color mapping and output the result into our CSS.

how do you keep update to updates of Gitako?

We have a automated job that pulls the extension twice a day and updates the style using above method.

Would it be possible of stylus to support Gitako if it was rollback to the old way it used to inject styles?

While I do prefer standalone CSS files, the JS-in-CSS extraction seems to work so I'm happy if you want to revert.

Would that be much more work for you now and in the future?

Unless webpack changes their way in how they embed CSS, it should not be much of an issue.

Was there problems like this before? How did you solve them?

We support a number of other extensions which so far all use CSS files, yours it the first that uses webpack.

[EnixCoda]

@MCOfficer The problem shows up when use Gitako and Dark Reader without Stylus.

Thank you all for the quick responses and very detailed explanation! Luckily, I found another solution to this. By injecting a copy of CSS into DOM like this, both Dark Reader and Stylus will work properly. 🎉