Auto Collapse All Actions from automations and scripts using the UI

Configuration
,
1

Hi, all!

If there’s anyone else like me, extremely annoyed by the fact that when you open an automation or a script, all actions are expanded and take up a huge amount of space on the page, so much so that if you have many actions it becomes very hard to follow them, here is a script I made, maybe it helps.
You can use the script below in a browser add‑on that injects JavaScript into the desired page.

I personally use Violentmonkey, and it works perfectly. Good luck

Updated 1.6 - If the URL has not been changed, do nothing

// ==UserScript==
// @name         Home Assistant - Collapse All Actions (Once per URL)
// @version      1.6
// @description  Collapse all automation & script actions once per editor URL
// @match        http://192.168.0.102:8123/*
// @grant        none
// ==/UserScript==

(function () {
    'use strict';

    let lastProcessedPath = null;

    function isAllowedEditor() {
        const p = location.pathname;
        return (
            p.startsWith('/config/automation/edit/') ||
            p.startsWith('/config/script/edit/')
        );
    }

    function collapseAllActionsOnce() {
        const currentPath = location.pathname;

        if (currentPath === lastProcessedPath) return;

        if (!isAllowedEditor()) return;

        lastProcessedPath = currentPath;

        function findInShadows(root) {
            root.querySelectorAll('*').forEach(el => {
                if (
                    el.tagName === 'HA-AUTOMATION-ROW' &&
                    el.hasAttribute('building-block') &&
                    !el.hasAttribute('collapsed') &&
                    el.shadowRoot
                ) {
                    const expandButton =
                        el.shadowRoot.querySelector('ha-icon-button.expand-button');
                    if (expandButton) {
                        expandButton.click();
                    }
                }

                if (el.shadowRoot) {
                    findInShadows(el.shadowRoot);
                }
            });
        }

        setTimeout(() => findInShadows(document), 800);
    }

    setTimeout(collapseAllActionsOnce, 1500);

    const push = history.pushState;
    const replace = history.replaceState;

    history.pushState = function () {
        push.apply(this, arguments);
        setTimeout(collapseAllActionsOnce, 500);
    };

    history.replaceState = function () {
        replace.apply(this, arguments);
        setTimeout(collapseAllActionsOnce, 500);
    };

    window.addEventListener('popstate', () => {
        setTimeout(collapseAllActionsOnce, 500);
    });
})();
2

Or, VSCode / Code Server editor…

3

Can you elaborate please?

Edit: Oh, are you referring to edit automations from the YAML file? If so, not everyone uses YAML, or like me, I use both methods. When I use the UI, I prefer not to have all the actions shown so I can see them more clearly.

1 Like
4

Open them from where?

5

Settings > Automations

Edit: I have changed the title to avoid confusion

6

Well, that is what I thought you might have meant. But, I am not seeing what I think you describe.
Here is what I get when opening this automation

image
image1568×559 25.3 KB

I have gone through all of my automations and don’t have any that have multiple first level actions. So, I may not see what you see. My sublevels do not expand automatically.

Am I missing something?

7

I am talking about the first level actions, take a look at one of mine. Imagine how it would look as all expanded

image
image1913×1234 141 KB

8

Gotcha. I get it.

9

Thanks! Works great in Safari too.

1 Like