Code Monkey home page Code Monkey logo

github-vscode-icons's Introduction

Github-vscode-icons

Build Status Known Vulnerabilities code style: prettier

Chrome webstore: Chrome Web Store

Download:

Chrome Web Store Mozilla Add-on

Supported websites: github-favicon Github (also Gist), gitlab-favicon Gitlab,

pastebin-favicon Pastebin, sourceforge-favicon SourceForge

About

Extension for browser, which displays vscode-icons in Github (including Gist), Gitlab and Bitbucket repositories. It also displays vscode-icons in user's Pastebin list and in Sourceforge projects.

If you're familiar with beautiful extension for vscode called vscode-icons, then you know that you need also one for Web. Brain will recognize different icons much faster and when you're spending several hours per day on websites like github, gitlab or bitbucket, this extension is for you. If you look at github repository with displayed vscode-icons, you'll get instant overview of used technologies by their specific icons (look at screenshots below).

Go to changelog to see latest changes

Screenshots

screen_repo

Development

To stay updated with vscode-icons, you need to extract compiled icons.json from vscode-icons everytime when it updates. After that, you need run script called npm run preprocess, which will generate definition chunks (categorized icons) from icons.json for easier and faster work with them.

Related

github-vscode-icons's People

Contributors

antoinerousseau avatar dderevjanik avatar kidonng avatar s-weigand avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

github-vscode-icons's Issues

Unable to get file icons in GitLab and BitBucket

The icons in the files list under any merge-request in Gitlab or BitBucket is showing a buffering icon instead of file icon.

Below is a screnshot of README in gitlab:
icon-issue

The buffering icon showing in the image above is chrome-extension://hoccpcefjcgnabbmojbfoflggkecmpgd/images/animation.gif

Same happens for the files in the merge-requests on both Gitlab and BitBucket.

Disabling the extension shows the file icon.

Steps to replicate:

  • Install extension on Chrome/Chromium
  • View any gitlab repo or merge-requests
  • View any bitbucket merge-requests

vscode icons for files are no longer loaded in latest chrome

On latest Chrome, folder icons are applied, however, file icons look like this.

image

This behavior also valid for GitLab too. Folders are visible, file icons are not.

I catch this error in console:

content.js:1 Uncaught (in promise) TypeError: Cannot read property 'includes' of undefined
    at content.js:1
    at y (content.js:1)
    at Object.t.initGithub [as github] (content.js:1)
    at Object.t.showIconsForHosting (content.js:1)
    at content.js:1
    at Generator.next (<anonymous>)
    at p (content.js:1)
(anonymous) @ content.js:1
y @ content.js:1
t.initGithub @ content.js:1
t.showIconsForHosting @ content.js:1
(anonymous) @ content.js:1
p @ content.js:1
Promise.then (async)
g @ content.js:1
(anonymous) @ content.js:1
l @ content.js:1
(anonymous) @ content.js:1
(anonymous) @ content.js:1
s @ content.js:1
(anonymous) @ content.js:1
(anonymous) @ content.js:1

Content Security Policy error for icons

Hello,

when I get to any repository I get this error:

Refused to load the font '<URL>' because it violates the following Content Security Policy directive: "font-src github.githubassets.com".

No icons showing in GitLab

Browser: Firefox 73, Linux Mint x64
All other addons disabled (separate profile).

I see no icons at all.
missing_icons_gitlab

No longer available for Firefox?

I was working to install my Firefox plugins on a new machine, and can't find this anymore in the Firefox extension "store" and the link on the Readme doesn't work either. Could it be added back?

Thanks for all your work here.

vertical-align

Icons are not properly aligned vertically in GitHub.
I suggest adding vertical-align: -3px; to the <img> tags.

default + github-vscode-icons + vertical-align
Capture d’écran 2020-08-26 à 12 30 52 Capture d’écran 2020-08-26 à 12 29 52 Capture d’écran 2020-08-26 à 12 34 25

What do you think?

Icons are selectable

Screenshot from 2021-09-25 15-25-05
Screenshot from 2021-09-25 15-25-34

Making the icons selectable can make users have more trouble when trying to copy-paste the directories subfiles/folders somewhere because the icon alt keeps popping up in the clipboard.

Can't view icons on private instance of GitLab :(

My company uses a private instance of GitLab to host our code and the extension doesn't seem to work there, I just get an infinite spinner like this:

image

It works fine on the regular GitLab page! Is there anything I can tweak in order to get it working on our private instance of GitLab? Or at the very least, disable the extension on that specific domain?

Here's what the HTML looks like:

<td class="tree-item-file-name">
  <i aria-hidden="true" data-hidden="true" class="fa fa-folder fa-fw"></i>
  <a class="str-truncated" title="bin" href="/***/***/tree/master/bin"><span>bin</span></a>
</td>

Prevent future outages

Well, I'm pretty sure that everyone who is using this extension have recently experienced outages. Those outages are caused when (e.g. Github) change html structure of website without further warning.

I need manually find out how much was html structure changed and then fix it. This can vary from several minutes to several hours (YES, hours, because in GH, you need to use observer to observe DOM changes and listen on pjax events). Most of time, it takes maximum day-two to fix a problem.

But nowdays, we have much bigger problem - publishing an extension to chrome store (which has most users). Since chrome changed privacy & polices of store extensions, reviewing updated extension can take several days to weeks - depends on extension size and size of userbase). During that time, user has still broken extension :(

in short:

  1. Websites can change HTML structure without warning (it takes several hours to realize it)
  2. We need to update extension in order to work with new HTML structure (max day-two)
  3. Publishing extension to chrome store can take several days

So, my idea to prevent further outages is to be able to temporally turn off extension on specific websites without user knowing it or letting him/her to turn off extension on specific websites. This could be also useful for Gitlab users, which can have different Gitlab versions (old self-deployed version).

  • Extension could check every day / 12 hours remote config (CDN json) if something is broken
  • Extension should have popup with options to enable/disable icons on specific websites

What do you think ?

WIP (popup branch)
image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.