Community-edition: Slack workspace icons are missing again

Created on 29 Jul 2019 · 9Comments · Source: ramboxapp/community-edition

Looks like this bug is back. Slack recently made a big update to their desktop / web application so it's not surprising this is no longer working.

Steps to reproduce

Add a Slack workspace to Rambox that has a customized icon

Expected behavior

The workspace's icon will load and appear in the service bar

Actual behavior

The workspace's icon does not appear in the service bar

ENVIRONMENT

Rambox: v0.6.9

OS: macOS 10.14.4

Arch: x64

Source

briankendall

👍4

Most helpful comment

Same. The workaround at https://github.com/ramboxapp/community-edition/issues/113#issuecomment-312558014 added the icons back for me. The original snippet required some modification though:

(() => {
  const slackWebviews = document.querySelectorAll('webview[src*=".slack.com"]');
  const slackTabs = document.querySelectorAll('.x-tab-icon-el[style*="resources/icons/slack.png"]');

  [...slackWebviews]
  .filter(webview => !webview._slackIconAdded)
  .forEach((webview, index) => {
    webview.executeJavaScript(`
      // lazy man's team icon grabbing method
      (() => {
        let teamIcon = document.querySelector('.c-team_icon');

        // open team menu if not already open
        if (!teamIcon) {
          const teamMenu = document.querySelector('#team-menu-trigger');

          if (teamMenu) {
            teamMenu.click();
            teamIcon = document.querySelector('.c-team_icon');
          }
        }

        // bail if no icon found
        if (!teamIcon) {
          return false;
        }

        // grab the background image from team icon
        const { style: { backgroundImage } } = teamIcon;

        // force menu to close after we have the goods
        const md = document.createEvent('MouseEvents');
        md.initEvent('click', true, true);
        document.querySelector('.ReactModal__Overlay').dispatchEvent(md);

        return backgroundImage;
      })();
    `,
    false,
    (backgroundImage) => {
      if (backgroundImage) {
        slackTabs[index].style.backgroundImage = backgroundImage;
        webview._slackIconAdded = true;
      }
    });
  });
})();

ash14 on 14 Aug 2019

👍4

All 9 comments

Same here on linux version 0.6.9

Version: 0.6.9
Platform: linux (x64)
Electron: 4.1.4
Chromium: 69.0.3497.128
Node: 10.11.0

novalu on 4 Aug 2019

Same. The workaround at https://github.com/ramboxapp/community-edition/issues/113#issuecomment-312558014 added the icons back for me. The original snippet required some modification though:

(() => {
  const slackWebviews = document.querySelectorAll('webview[src*=".slack.com"]');
  const slackTabs = document.querySelectorAll('.x-tab-icon-el[style*="resources/icons/slack.png"]');

  [...slackWebviews]
  .filter(webview => !webview._slackIconAdded)
  .forEach((webview, index) => {
    webview.executeJavaScript(`
      // lazy man's team icon grabbing method
      (() => {
        let teamIcon = document.querySelector('.c-team_icon');

        // open team menu if not already open
        if (!teamIcon) {
          const teamMenu = document.querySelector('#team-menu-trigger');

          if (teamMenu) {
            teamMenu.click();
            teamIcon = document.querySelector('.c-team_icon');
          }
        }

        // bail if no icon found
        if (!teamIcon) {
          return false;
        }

        // grab the background image from team icon
        const { style: { backgroundImage } } = teamIcon;

        // force menu to close after we have the goods
        const md = document.createEvent('MouseEvents');
        md.initEvent('click', true, true);
        document.querySelector('.ReactModal__Overlay').dispatchEvent(md);

        return backgroundImage;
      })();
    `,
    false,
    (backgroundImage) => {
      if (backgroundImage) {
        slackTabs[index].style.backgroundImage = backgroundImage;
        webview._slackIconAdded = true;
      }
    });
  });
})();

ash14 on 14 Aug 2019

👍4

@ash14 Thanks for the workaround! That'll tide me over until this is fixed properly.

briankendall on 14 Aug 2019

It looks like Rambox "officially" uses pretty much the same hack: https://github.com/ramboxapp/community-edition/blob/0.6.9/app/util/IconLoader.js#L21-L30

Not sure what a proper fix would be, but if someone has more time than I do a PR to update that script would be nice.

ash14 on 15 Aug 2019

Same here

megaroeny on 10 Sep 2019

I have the same issue ~~and the workaround in https://github.com/ramboxapp/community-edition/issues/2355#issuecomment-521076848 didn't work for me :(~~
Edit: The original https://github.com/ramboxapp/community-edition/issues/113#issuecomment-312558014 doesn't work, https://github.com/ramboxapp/community-edition/issues/2355#issuecomment-521076848 does indeed work!