Ticket #18439: remove-icon-ligatures.js

Gerrit.install(plugin => {
    const style = document.createElement('style');
    style.innerHTML = `
        @font-face {
            font-family: 'Material Symbols Outlined';
            font-style: normal;
            src: url('https://haiku.movingborders.es/testbuild/test/material-icons.woff') format('woff');
        }
    `;
    document.head.appendChild(style);

    // Full list: https://github.com/google/material-design-icons/blob/master/variablefont/MaterialSymbolsOutlined%5BFILL%2CGRAD%2Copsz%2Cwght%5D.codepoints
    const ligatures = {
        'alternate_email': '\ue0e6',
        'arrow_drop_down': '\ue5c5',
        'arrow_drop_up': '\ue5c7',
        'arrow_forward': '\ue5c8',
        'arrow_right_alt': '\ue941',
        'block': '\uf326',
        'bug_report': '\ue868',
        'calendar_view_day': '\ue936',
        'cancel': '\ue888',
        'chat_bubble': '\ue0cb',
        'check': '\ue5ca',
        'check_circle': '\ue86c',
        'chevron_left': '\ue5cb',
        'chevron_right': '\ue5cc',
        'close': '\ue5cd',
        'code': '\ue86f',
        'content_copy': '\ue14d',
        'delete': '\ue872',
        'description': '\ue873',
        'done_all': '\ue877',
        'download': '\uf090',
        'edit': '\uf345',
        'empty_dashboard': '\uf844',
        'error': '\uf8b6',
        'expand': '\ue94f',
        'expand_all': '\ue946',
        'expand_less': '\ue5ce',
        'expand_more': '\ue5cf',
        'file_present': '\uea0e',
        'filter_alt': '\uef4f',
        'help': '\ue8fd',
        'history': '\ue8b3',
        'image': '\ue3f4',
        'info': '\ue88e',
        'label_important': '\ue948',
        'lightbulb': '\ue90f',
        'link': '\ue250',
        'mark_chat_read': '\uf18b',
        'mode_comment': '\ue253',
        'more_horiz': '\ue5d3',
        'more_vert': '\ue5d4',
        'move_item': '\uf1ff',
        'new_releases': '\uef76',
        'open_in_new': '\ue89e',
        'pause': '\ue034',
        'pending_actions': '\uf1bb',
        'play_arrow': '\ue037',
        'publish': '\ue255',
        'published_with_changes': '\uf232',
        'rate_review': '\ue560',
        'rebase': '\uf845',
        'rebase_edit': '\uf846',
        'schedule': '\uefd6',
        'search': '\ue8b6',
        'settings': '\ue8b8',
        'star': '\ue838',//\ue885,
        'stop': '\ue047',
        'style': '\ue41d',
        'swap_horiz': '\ue8d4',
        'system_update': '\uf072',
        'timelapse': '\ue422',
        'undo': '\ue166',
        'view_column_2': '\uf847',
        'visibility': '\ue8f4',
        'warning': '\uf083',
    };

    function replaceIcon(element) {
        const name = element.icon;
        if (name == 'star' || name == '\ue838' || name == '\ue885')
            element.icon = element.filled ? '\ue838' : '\ue885';
        else {
            const glyph = ligatures[name];
            if (glyph != undefined)
                element.icon = glyph;
            else if (name && name.length > 1)
                console.log('Unknown icon name:', name);
        }
    }

    function newIcon(icon) {
        replaceIcon(icon);
        iconObserver.observe(icon, {attributes: true, attributeFilter: ['icon', 'filled']});
    }

    function iconMutation(mutationList, observer) {
        for (const mutation of mutationList)
            replaceIcon(mutation.target);
    }

    function newFragment(fragment) {
        fragmentObserver.observe(fragment, {childList: true, subtree: true});
        replaceIcons(fragment);
    }

    function replaceIcons(root = document.body) {
        if (typeof root.querySelectorAll != 'function') return;
        if (root.nodeName == 'GR-ICON')
            newIcon(root);
        else {
            for (const icon of root.querySelectorAll('GR-ICON'))
                newIcon(icon);
            if (root.shadowRoot)
                newFragment(root.shadowRoot);
            for (const element of root.querySelectorAll('*')) {
                if (element.shadowRoot)
                    newFragment(element.shadowRoot);
            }
        }
    }

    function fragmentMutation(mutationList, observer) {
        for (const mutation of mutationList) {
            for (const node of mutation.addedNodes)
                    replaceIcons(node);
        }
    }

    const iconObserver = new MutationObserver(iconMutation);

    const fragmentObserver = new MutationObserver(fragmentMutation);

    addEventListener('load', (event) => replaceIcons());
});