Button to hide annoying animated gifs

[jhilden]

A coworker introduced me to Kinding today and I really love it. Since there is no good native Linux client for Campfire I was always missing messages. Not anymore! :)

However I have one feature request. It would be awesome to have a button either globally or next to any animated gifs (or other images) to hide those.

Right now if a gif is particularly annoying I use Chrome Developer Tools to remove it: Inspect Element > Delete Node

Would you be willing to implement such a feature? Or can you point me to what I would need to do to implement it myself?

[ejensen]

Here's a little snippet of javascript that might help you get started:

/* Any time a message body is clicked */
$(document).on('click', 'table.chat tr.message > td.body', function () {
  /* find the images within that message */
  $(this).find('a > img').each(function (i, img) {
    /* and toggle their visibility. */
    img.style.visibility = (img.style.visibility === 'hidden') ? 'visible' : 'hidden';
  });
});

That code allows you to toggle the visibility of images by clicking on their message body. You can test the code by putting it in the init function within kindling.contentscript.js

I'd be happy to integrate this feature if we can come up with a solution that is intuitive enough that people immediately know how to use the feature. Maybe adding a "hide/show" button that sits next to the "star" button would improve discoverability?

[jhilden]

Thanks a lot for looking at this issue and providing the code snippet.

In my opinion, the nicest solution for the interaction/UI would be to show a little 'hide' button on top of any image only when you hover over that image. And then show a 'Show hidden image' button in place of the image when it's hidden. I would also use display: none instead of visbility: hidden so that the message table row can collapse.

I forked your project and played around a little bit with your snippet, but unfortunately I don't really have any experience developing Chrome extensions and don't know how the debugging works etc. I tried listening to 'hover' or 'mouseenter' events instead of 'click', but they didn't seem to be bubbling up to the document. Will continue trying.