Slack Tweaks

slack_tweaks.md

Slack Tweaks

In Fall 2023, Slack introduced an updated client with some unpopular UI changes. The tweaks in this document can be used to revert to the old client or hide the new side bar. These will reset every time you fully close Slack but they are easy to re-apply once you get the hang of it.

(Cross Platform) Open Dev Tools [Preferred Option]

To run any of these scripts, you'll need to open the Dev Tools (or Console). You can do this by typing /slackdevtools in a Slack channel or direct message. These are the same Dev Tools you'd get in Chrome if you hit F12. Along the top are tabs for Elements, Console, Sources, Network, etc. You'll want to paste these scripts into the Console tab at the > prompt.

If Slack disables this command, then you can open Dev Tools by setting a system-wide environment variable and using a keyboard shortcut to open the console. If /slackdevtools worked for you then you can skip these next two sections.

(Mac OS) Enable Dev Mode

1. Close the Slack app (command + Q)
2. Open the terminal and run these two commands separately:
   • export SLACK_DEVELOPER_MENU=true
   • open /Applications/Slack.app
3. Slack will re-open with but now we have access to its console
4. Open Slack’s console by pressing command + option + I and clicking on the Console tab at the top
   • At the bottom of the console window you should see a blue > character. This is the prompt where you'll want to paste the code snippets found below.

Note If you close (cmd + q) or reload the app (cmd + r), you will have to do this again. There are instructions on how to make this permanent at the bottom of the document.

(Windows) Enable Dev Mode

1. Close the Slack app if it's open (ctrl + Q or File -> Quit Slack)
2. Add an environment variable SLACK_DEVELOPER_MENU with a value of true to your system
   • Windows 10 and 11 instructions can be found here, just skip down to the section titled "How to Edit Environment Variables"
3. Re-open Slack
4. Open Slack's console by pressing ctrl + alt + I and clicking on the console tab at the top
   • At the bottom of the console window you should see a blue > character. This is the prompt where you'll want to paste the code snippets found below.

(GNU/Linux) Enable Dev Mode

Courtesy of @jm-janzen

1. Close the Slack app (ctrl + Q)
2. Open the terminal and run the following command:
   • SLACK_DEVELOPER_MENU=true /usr/bin/slack
3. Slack will re-open with but now we have access to its console
4. Open Slack’s console by pressing ctrl + alt + I and clicking on the Console tab at the top
   • At the bottom of the console window you should see a blue > character. This is the prompt where you'll want to paste the code snippets found below.

---

Revert to old client (pre-update)

Note: This is my preferred option and most likely the only one I will be maintaining moving forward.

You can completely revert (temporarily) to the old client by pasting this into the console:

localStorage.setItem("localConfig_v2", localStorage.getItem("localConfig_v2").replace(/\"is_unified_user_client_enabled\":true/g, '\"is_unified_user_client_enabled\":false'))

It'll probably return undefined, but that's fine. Reload Slack with command+R or ctrl+R and it should revert back until you restart Slack.

---

Merge Activity Tab with Workspace Switcher

You can remove the activity tab and merge it with the workspace switcher using the merge.js snippet from dkoes/slackfix. Check out that repo for a screenshot and more information. There's also a button.js in that repo to to show/hide the activity tab.

---

Hide the sidebar

If you like the new design and just want to hide the new sidebar paste the following into the console, courtesy of /u/CherryDT on reddit with a few edits by me:

document.querySelector('[data-qa="top-nav-help-button"]').parentNode.parentNode.parentNode.insertAdjacentElement('afterend', document.querySelector('[data-qa="user-button"]').parentNode.parentNode);
document.querySelector('.p-tab_rail').style.display = 'none';
document.querySelector('.p-control_strip').style.display = 'none';
document.querySelector('.p-ia4_client .p-client_workspace--including_tab_rail').style.gridTemplateAreas = 'p-client-workspace p-client-workspace';
document.querySelector('.p-ia4_client .p-client_workspace--including_tab_rail').className="p-theme_background";

This will hide the workspace switcher and you won't be able to see the "Mentions & reactions" link. It moves your profile image to the top right of the screen so you can still set your Slack status, pause notifications, edit preferences, etc. On mouseover, you'll see a tooltip block your profile image but you can click through it. I'm still working on a way to remove the tooltip.

According to @chipbite in the comments, if you have multiple workspaces can still switch using keyboard shortcuts. So, ctrl-1, ctrl-2, etc would still work to switch workspaces.

You can undo this change by restarting Slack if you change your mind or if it causes problems for you in the future.

---

Save a snippet

You can save snippets in your Dev Tools allowing you to quickly re-run them after Slack resets the interface. Open Dev Tools and go to the Sources tab. Just below the tabs, in the left pane, you'll probably see "Page", "Filesystem", and ">>". Click the ">>" button then "Snippets". Click + New snippet and paste your code into the window that opens on the right.

Any time you need to re-run the script, just come back to this window and run the snippet by pressing Cmd + Enter (Mac) or Ctrl + Enter (Windows).

---

(Mac OS) Set environment variable automatically

According to to @navels: If you want SLACK_DEVELOPER_MENU=true to be set whenever you log in, create a file in ~/Library/LaunchAgents/setenv.SLACK_DEVELOPER_MENU.plist with these contents. (I have not been able to get this to work on macOS 14 Sonoma.)

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
  <plist version="1.0">
  <dict>
  <key>Label</key>
  <string>setenv.SLACK_DEVELOPER_MENU</string>
  <key>ProgramArguments</key>
  <array>
    <string>/bin/launchctl</string>
    <string>setenv</string>
    <string>SLACK_DEVELOPER_MENU</string>
    <string>true</string>
  </array>
  <key>RunAtLoad</key>
  <true/>
</dict>
</plist>

Latest code is here. I use the merge code so that will be updated with fixes to slack changes as I experience them. Pull requests for the button code gratefully accepted.

I have a simple version at https://gist.github.com/chx/22372925d1db05e19e76d7438262a575 which removes the rail containing Activity and moves the user + create new button to the bottom of the workspace switcher bar.

@Werkov Your updated snippet is perfect. This worked exactly how I hoped (hid the superfluous sidebar, and gave me back the space it was using).

EDIT: Argh I spoke too soon. I get the following error when attempting to navigate to different channels. 😞

Error: REB8C8891C74

PS I've added linux instructions on a fork here. @Kenny-MWI if you want to incorporate, I can just delete this fork. 😄

Thanks, @jm-janzen, I'll add those instructions to my gist too. Although, I prefer just using the /slackdevtools command in Slack itself these days.

Is /slackdevtools supposed to do anything with Slack in FF?

@Werkov no, it won't do anything in Firefox. In that case you would just need to press F12 on your keyboard or right click on the page and click "Inspect". I forgot Slack could be used in a browser so all of my instructions have been geared towards people using the standalone desktop app.

In case anyone wants it, I took the method @Werkov figured out and adapted it to something that does some more things just to make the experience a little nicer:

• Moves the home button into the top bar
• Fixes the tooltip when mousing over the user button
• Keeps all the necessary items hidden when switching between home and searching
• Keeps checking for the existence of the sidebar before modifying it, for use in scripts that run when the page loads

Here's the code:

function tryToRemoveStupidSidebar() {
    function findWorkspace() {
        return document.querySelector('.p-client_workspace');
    }
    
    function findHomeIcon() {
        return document.querySelector('[data-qa="home-filled"]') || document.querySelector('[data-qa="home"]');
    }
    
    function sidebarIsLoaded() {
        return (document.querySelector('[data-qa="top-nav-help-button"]') !== null
                && document.querySelector('.p-tab_rail') !== null
                && document.querySelector('.p-control_strip') !== null
                && document.querySelector('.p-ia4_client .p-client_workspace_wrapper') !== null
                && findHomeIcon() !== null
                && findWorkspace() !== null);
    }
    
    function removeSidebar() {
        var insertionPointTopBar = document.querySelector('[data-qa="top-nav-help-button"]').parentNode.parentNode.parentNode;
        var insertionPointNavBar = document.querySelector('[data-qa="arrow-left"]').parentNode.parentNode.parentNode;
        var homeIcon = findHomeIcon();
        var homeOutline = homeIcon.parentNode.parentNode;
        var homeButton = homeOutline.parentNode.parentNode.parentNode;
        var homeLabel = homeButton.querySelector(".p-tab_rail__button__label");
        
        homeOutline.style.width = '30px';
        homeOutline.style.height = '30px';
        homeButton.style.width = '30px';
        homeLabel.style.display = "none";
        
        var lastUserButton = insertionPointTopBar.parentNode.querySelector('[data-qa="user-button"]');
        
        if (lastUserButton !== null) {
            lastUserButton.parentNode.parentNode.removeChild(lastUserButton.parentNode);
        } else {
            insertionPointNavBar.insertAdjacentElement('afterend', homeButton);
            document.querySelector('.p-tab_rail').style.display = 'none';
            document.querySelector('.p-client_workspace_wrapper').style.display = 'block';
        }
        
        findWorkspace().style.height = '100%';
        document.querySelector('.p-control_strip').style.display = 'none';
        
        var userButton = document.querySelector('[data-qa="user-button"]');
        userButton.style.marginLeft = '10px';
        insertionPointTopBar.insertAdjacentElement('afterend', userButton.parentNode.parentNode);
    }
    
    function checkForUserTooltip(mutations) {
        mutations.forEach(function(mutation) {
            for(var i = 0; i < mutation.addedNodes.length; ++i) {
                var newNode = mutation.addedNodes[i];
                
                if (newNode.className !== "ReactModalPortal") {
                    continue;
                }
                
                var tooltip = document.querySelector('[data-qa="tooltip-tip"]');
                
                if (tooltip === null) {
                    continue;
                }
                
                // Check to see if this is a left-pointing tooltip that's directly against the right
                // side of the window:
                
                if (!tooltip.classList.contains("c-tooltip__tip--right")
                    || !tooltip.classList.contains("c-tooltip__tip--small")) {
                    continue;
                }
                
                var container = tooltip.parentNode.parentNode;
                
                if (Math.abs(container.offsetLeft + container.offsetWidth - window.innerWidth) > 10) {
                    continue;
                }
                
                // Make it point to the right and shift it 40 pixels to the left:
                tooltip.classList.remove("c-tooltip__tip--right");
                tooltip.classList.add("c-tooltip__tip--left");
                container.style.left = (container.offsetLeft - 40) + 'px'
            }
        });
    }
    
    if (!sidebarIsLoaded()) {
        return false;
    }
    
    removeSidebar();
    
    // Need to rerun this whenever switching between home and searching
    var observer1 = new MutationObserver(removeSidebar);
    observer1.observe(findWorkspace().parentNode, { childList : true });
    
    // Fixes overlapping tooltip when mousing over the user button:
    var observer2 = new MutationObserver(checkForUserTooltip);
    observer2.observe(document.body, { childList : true });
    
    return true;
}

let count = 60;

function checkForSidebarTimer() {
    if (tryToRemoveStupidSidebar()) {
        return;
    }
    
    count--;
    
    if (count > 0) {
        setTimeout(checkForSidebarTimer, 500);
    }
}

checkForSidebarTimer();

I've got this in my Ferdium user.js file so that it automatically removes the sidebar when a Slack workspace loads. So far it's working well! Hopefully Slack doesn't change around the UI and break it before I have a chance to enjoy it for a bit.

In case anyone wants it, I took the method @Werkov figured out and adapted it to something that does some more things just to make the experience a little nicer:

• Moves the home button into the top bar
• Fixes the tooltip when mousing over the user button
• Keeps all the necessary items hidden when switching between home and searching
• Keeps checking for the existence of the sidebar before modifying it, for use in scripts that run when the page loads

Here's I commented out the code:

I've got this in my Ferdium user.js file so that it automatically removes the sidebar when a Slack workspace loads. So far it's working well! Hopefully Slack doesn't change around the UI and break it before I have a chance to enjoy it for a bit.

This code is working perfectly! I'm wondering what you mean by the user.js portion - I'd love to have this auto run when Slack loads.

@OstentatiousOtter In Ferdium (or Franz too probably), each recipe has an optional user.js file where you can drop Javascript that you want to run each time a service loads. I put that code in my Slack user.js file. You can get at it by opening the service's settings, scrolling to the bottom and clicking the "Open user.js" button.

I'm not sure if there's any good way to do that when using Slack's app, other than manually opening the dev console and pasting it in. But maybe someone knows of a method.

Thanks @briankendall ! Slack reset my cache recently, so I had to go hunting again for this wonderful snippet. Also on behalf of all 00s online nerds, thanks for your animation work in the early 00s, it still holds a special place in my heart!

I can no longer get /slackdevtools to open on my Mac. Anyone else having this issue or know of a workaround?

@therealdickieadams I had the same issue and I've managed to open dev tools in another way.
open /Applications/Slack.app/ --args --remote-debugging-port=8315
then in chrome go to chrome://inspect/#devices click "Configure" and add localhost:8315
it should then detect the slack instance

and you can click inspect and open dev tools

The snippet to remove the extra sidebar didn't fully work for me I had to find the element with class p-client_workspace_wrapper and change grid-template-columns to 0 auto for example