Hide Slack Sidebar Icons

hide-slack-sidebar-icons

#! /usr/bin/env bash
##############
##
## A script to inject a custom style into Slack that hides the new sidebar icons.
## This script has very little error catching or extra debug output
##
## Run at your own risk.
## Anything done here can be "uninstalled" by reinstalling Slack
##
## To run Slack in debug mode, run the following:
## export SLACK_DEVELOPER_MENU=true; open -a Slack
## With that, Slack will have a new Developer item under the View menu
##
##############

# directory with the app.asar file, default for OSX
# on linux, just search for the app.asar file
RESOURCE_DIR="/Applications/Slack.app/Contents/Resources/"

# location of the preload file
PRELOAD_FILE="$RESOURCE_DIR/app/dist/preload.bundle.js"

# this script will add an extra style element to the head tag
read -r -d '' SCRIPT <<'EOF'
​
document.addEventListener("DOMContentLoaded", function () {
  let tt__customCss = `
        .p-channel_sidebar__user_avatar > .c-avatar { display: none !important; }
    `;
  var head = document.head;
  var iconStyle = document.createElement("style");
  iconStyle.appendChild(document.createTextNode(tt__customCss));
  head.appendChild(iconStyle);
});
EOF

# check for the npx command
if ! command -v "npx" &> /dev/null
then
  echo "npx command could not be found, install node https://nodejs.org/en/"
  exit
fi

# open resource dir; on linux, just search for the app.asar file
cd "$RESOURCE_DIR" || exit 04

# check for pre-existing app dir
if [ -d "app" ]
then
  echo "app dir alredy exists, skipping backup"
else
  # unpack asar resource
  npx asar extract app.asar app

  # move packaged asar, so electron reads from the app folder
  mv app.asar app.asar.bak
fi

# check to see if we've already added our script, there's better ways to do this I'm sure
if ! grep 'iconStyle' &> /dev/null < "$PRELOAD_FILE"
then
  echo "$SCRIPT" >> "$PRELOAD_FILE"
  echo "installed, close and reopen Slack if it's running"
else
  echo "iconStyle script already installed"
  exit 06
fi

Thanks for your script!!!
I suggest to add additional style for dots
.p-channel_sidebar__presence_icon--on-avatar {top:0px !important;}
it will be place dots in the midlde by vertical

@ekosinskiy

Thanks for your script!!!
I suggest to add additional style for dots
.p-channel_sidebar__presence_icon--on-avatar {top:0px !important;}
it will be place dots in the midlde by vertical

Nice touch!
What about the channel icons, could you get them on the same level as the circles?

Where can I find the styles and html for the panel ? Maybe I can change them myself.

I have added .p-channel_sidebar__presence_icon--on-avatar {top:0px !important; left: 0px !important;} to center them with the channel icons. :) very hack and not quite the desired output, but it does a part of the trick.

Great work on the script... may I suggest to combine efforts with this guy: https://gist.github.com/joshua-turner/9310780782f6526fc8717d6798a4d4b9

Also, if you're wondering how to edit the style after it's added, just edit /Applications/Slack.app/Contents/Resources/app/dist/preload.bundle.js and look at the end of the file

The persistence doesn't seem to work for me since I have updated slack to latest - 4.11.3. Anyone else facing the same ?

Update: Ok got it fixed by re-running the script again (This might need to be done each time we install / update slack it seems).

Has anyone successfully combined this script with this into one script yet? If not, would anyone be willing to give me a pointer on how to smash these two together?

Joshua Turner's addition is great but reverts pretty frequently, sometimes several times a day. I'd really like to apply a more stable hack/patch/whatever and this seems like just the way to move forward, but my brain is completely locked into error checking/remediating Jamf's CIS scripts and i feel like I'm at some negative percentage of computing/noggin power currently. "Jello" or "mush" seem like appropriate descriptors of my brain's consistency at the moment. =\

cmd+c:

document.addEventListener("DOMContentLoaded", function () {
  let tt__customCss = `
    .p-channel_sidebar__presence_icon.p-channel_sidebar__presence_icon--on-avatar {
      transform: scale(1.5) translateX(-6px) translateY(-5px);
    }

    .p-channel_sidebar__mpim_counter {
      transform: scale(1.2) translateX(-4px) translateY(-4px);
    }

    span.p-channel_sidebar__mpim_avatars_mpim1.c-avatar {
      opacity: 0;
    }

    .p-channel_sidebar__channel span.c-avatar {
      opacity: 0;
    }

    .p-channel_sidebar__user_avatar--hide-presence .p-channel_sidebar__presence_icon--on-avatar {
      display: block;
      transform: scale(1.5) translateX(-3.5px) translateY(-9px);
    }

    .p-channel_sidebar__channel_icon_prefix--comfy {
      margin-right: 0px;
    }
  `;
  var head = document.head;
  var iconStyle = document.createElement("style");
  iconStyle.appendChild(document.createTextNode(tt__customCss));
  head.appendChild(iconStyle);
});

• vi /Applications/Slack.app/Contents/Resources/app/dist/preload.bundle.js
• :$
• i
• cmd+v
• esc
• :wq

done

Kickass. Thanks a ton @marcopelegrini!