tabs/frontend/ts/index.ts

import {
    clipboard,
    ipcRenderer,
    PageFaviconUpdatedEvent,
    remote,
    shell,
    UpdateTargetUrlEvent,
    WebContents
} from "electron";
import "../sass/index.scss";

const {
    Menu,
    MenuItem,
    dialog,
    session,
} = remote;

const appInfo: any = {};
let icons: any[] = [];

let services: any[] = [];
let selectedService: any = null;
let securityButton: HTMLElement | null,
    homeButton: HTMLElement | null,
    forwardButton: HTMLElement | null,
    backButton: HTMLElement | null,
    refreshButton: HTMLElement | null;
let addButton, settingsButton;
let emptyPage: string;
let urlPreview: HTMLElement | null;
let serviceSelector: HTMLElement | null;

// Service reordering
let lastDragPosition: HTMLElement | null, oldActiveService: number;

// Service context menu
function openServiceContextMenu(event: Event, serviceId: number) {
    event.preventDefault();
    const service = services[serviceId];

    const menu = new Menu();
    const ready = service.view && service.viewReady, notReady = !service.view && !service.viewReady;
    menu.append(new MenuItem({
        label: 'Home', click: () => {
            service.view.loadURL(service.url)
                .catch(console.error);
        },
        enabled: ready,
    }));
    menu.append(new MenuItem({
        label: ready ? 'Reload' : 'Load', click: () => {
            reloadService(serviceId);
        },
        enabled: ready || notReady,
    }));
    menu.append(new MenuItem({
        label: 'Close', click: () => {
            unloadService(serviceId);
        },
        enabled: ready,
    }));

    menu.append(new MenuItem({type: "separator"}));

    let permissionsMenu = [];
    if (ready) {
        for (const domain in service.permissions) {
            if (service.permissions.hasOwnProperty(domain)) {
                const domainPermissionsMenu = [];

                const domainPermissions = service.permissions[domain];
                for (const permission of domainPermissions) {
                    domainPermissionsMenu.push({
                        label: (permission.authorized ? '✓' : '❌') + ' ' + permission.name,
                        submenu: [{
                            label: 'Toggle',
                            click: () => {
                                permission.authorized = !permission.authorized;
                                updateServicePermissions(serviceId);
                            },
                        }, {
                            label: 'Forget',
                            click: () => {
                                service.permissions[domain] = domainPermissions.filter((p: any) => p !== permission);
                            },
                        }],
                    });
                }

                if (domainPermissionsMenu.length > 0) {
                    permissionsMenu.push({
                        label: domain,
                        submenu: domainPermissionsMenu,
                    });
                }
            }
        }
    }
    menu.append(new MenuItem({
        label: 'Permissions',
        enabled: ready,
        submenu: permissionsMenu,
    }));

    menu.append(new MenuItem({type: "separator"}));

    menu.append(new MenuItem({
        label: 'Edit', click: () => {
            ipcRenderer.send('openServiceSettings', serviceId);
        }
    }));
    menu.append(new MenuItem({
        label: 'Delete', click: () => {
            dialog.showMessageBox(remote.getCurrentWindow(), {
                type: 'question',
                title: 'Confirm',
                message: 'Are you sure you want to delete this service?',
                buttons: ['Cancel', 'Confirm'],
                cancelId: 0,
            }).then(result => {
                if (result.response === 1) {
                    ipcRenderer.send('deleteService', serviceId);
                }
            }).catch(console.error);
        }
    }));
    menu.popup({window: remote.getCurrentWindow()});
}


ipcRenderer.on('data', (event, appData, iconSets, actualSelectedService, emptyUrl, config) => {
    // App info
    appInfo.title = appData.title;

    // Icons
    icons = [];
    for (const set of iconSets) {
        icons = icons.concat(set);
    }

    console.log('Updating services ...');
    services = config.services;

    const nav = document.querySelector('#service-selector');
    if (nav) {
        while (nav.children.length > 0) {
            nav.removeChild(nav.children[0]);
        }
    }

    const serviceContainer = document.querySelector('#services');
    if (serviceContainer) {
        serviceContainer.querySelectorAll(":scope > webview").forEach(w => serviceContainer.removeChild(w));
    }

    for (let i = 0; i < services.length; i++) {
        createService(i);
    }

    // Init drag last position
    lastDragPosition = document.getElementById('service-last-drag-position');
    if (lastDragPosition) {
        lastDragPosition.addEventListener('dragover', () => {
            const index = services.length;
            if (draggedId !== index && draggedId !== index - 1) {
                resetDrag();
                lastDragTarget = dragTargetId = index;
                lastDragPosition?.classList.remove('hidden');
                lastDragPosition?.classList.add('drag-target');
            }
        });
    }

    // Set active service
    if (actualSelectedService < 0 || actualSelectedService >= services.length) {
        actualSelectedService = 0;
    }
    setActiveService(actualSelectedService);

    // Empty
    emptyPage = emptyUrl;

    // Url preview element
    urlPreview = document.getElementById("url-preview");
    if (urlPreview) {
        urlPreview.addEventListener('mouseover', () => {
            if (urlPreview!.classList.contains('right')) {
                urlPreview!.classList.remove('right');
            } else {
                urlPreview!.classList.add('right');
            }
        });
    }

    // History nav buttons
    const buttons: { [k: string]: HTMLElement | null } = {
        securityButton: securityButton,
        homeButton: homeButton,
        backButton: backButton,
        forwardButton: forwardButton,
        refreshButton: refreshButton,
    };
    for (const k in buttons) {
        if (config[k]) buttons[k]?.classList.remove('hidden');
        else buttons[k]?.classList.add('hidden');
    }

    // Other elements
    serviceSelector = document.getElementById('service-selector');
});

function removeServiceFeatures(id: number): HTMLElement | null {
    // Remove nav
    const nav = document.querySelector('#service-selector');
    let oldNavButton: HTMLElement | null = null;
    if (nav) {
        oldNavButton = nav.querySelector('li:nth-of-type(' + (id + 1) + ')');
        if (oldNavButton) {
            nav.removeChild(oldNavButton);
        }
    }

    // Remove webview
    if (services[id] && services[id].view) {
        document.querySelector('#services')?.removeChild(services[id].view);
    }

    return oldNavButton;
}

ipcRenderer.on('updateService', (e, id, data) => {
    if (id === null) {
        services.push(data);
        createService(services.length - 1);
    } else {
        const oldNavButton = removeServiceFeatures(id);

        // Create new service
        services[id] = data;
        createService(id, oldNavButton ? oldNavButton.nextElementSibling : null);
        if (parseInt(selectedService) === id) {
            setActiveService(id);
        }
    }
});

ipcRenderer.on('reorderService', (e, serviceId, targetId) => {
    const oldServices = services;
    services = [];

    let newId = targetId;

    for (let i = 0; i < targetId; i++) {
        if (i !== serviceId) {
            services.push(oldServices[i]);
            if (i === oldActiveService) newId = services.length - 1;
        }
    }
    services.push(oldServices[serviceId]);
    for (let i = targetId; i < oldServices.length; i++) {
        if (i !== serviceId) {
            services.push(oldServices[i]);
            if (i === oldActiveService) newId = services.length - 1;
        }
    }

    if (serviceSelector) {
        serviceSelector.innerHTML = '';
    }
    for (let i = 0; i < services.length; i++) {
        services[i].li = undefined;
        createService(i);
    }
    setActiveService(newId);
});

ipcRenderer.on('deleteService', (e, id) => {
    removeServiceFeatures(id);

    if (parseInt(selectedService) === id) {
        setActiveService(0);
    }

    delete services[id];
    services = services.filter(s => s !== null);
});

function createService(index: number, nextNavButton?: Element | null) {
    let service = services[index];
    let li = <any>document.createElement('li');
    service.li = li;

    let button = document.createElement('button');
    button.dataset.serviceId = '' + index;
    button.dataset.tooltip = service.name;
    button.addEventListener('click', () => {
        if (button.dataset.serviceId) {
            setActiveService(parseInt(button.dataset.serviceId));
        }
        ipcRenderer.send('setActiveService', button.dataset.serviceId);
    });
    button.addEventListener('contextmenu', e => openServiceContextMenu(e, index));

    let icon: any;
    if (service.useFavicon && service.favicon != null) {
        icon = document.createElement('img');
        icon.src = service.favicon;
        icon.alt = service.name;
    } else if (service.isImage) {
        icon = document.createElement('img');
        icon.src = service.icon;
        icon.alt = service.name;
    } else {
        icon = document.createElement('i');
        let iconProperties = icons.find(i => `${i.set}/${i.name}` === service.icon);

        // Compatibility with old services
        if (!iconProperties) iconProperties = icons.find(i => i.name === service.icon);

        if (iconProperties) {
            iconProperties.faIcon.split(' ').forEach((cl: string) => {
                icon.classList.add(cl);
            });
        }
    }

    button.appendChild(icon);
    li.appendChild(button);
    li.button = button;

    const nav = document.querySelector('#service-selector');
    if (nav) {
        if (nextNavButton === nav || nextNavButton === undefined) {
            nav.appendChild(li);
        } else {
            nav.insertBefore(li, nextNavButton);
        }
    }

    if (service.autoLoad) {
        loadService(index, service);
    }

    initDrag(index, li);
}

let draggedId: number;
let lastDragTarget = -1;
let dragTargetId = -1;
let dragTargetCount = 0;

function initDrag(index: number, li: any) {
    li.serviceId = index;
    li.draggable = true;
    li.addEventListener('dragstart', (event: DragEvent) => {
        draggedId = index;
        if (event.dataTransfer) {
            event.dataTransfer.dropEffect = 'move';
        }
        lastDragPosition?.classList.remove('hidden');
    });
    li.addEventListener('dragover', (e: DragEvent) => {
        let realIndex = index;
        let rect = li.getBoundingClientRect();

        if ((e.clientY - rect.y) / rect.height >= 0.5) {
            realIndex++;
        }

        if (draggedId === realIndex - 1) {
            realIndex--;
        }

        resetDrag();
        let el = realIndex === services.length ? lastDragPosition : services[realIndex].li;
        lastDragTarget = dragTargetId = realIndex;
        lastDragPosition?.classList.remove('hidden');
        el.classList.add('drag-target');

        if (draggedId === realIndex || draggedId === realIndex - 1) el.classList.add('drag-target-self');
    });
    li.addEventListener('dragend', () => {
        reorderService(draggedId, lastDragTarget);
        resetDrag();
    });
}

function resetDrag() {
    lastDragTarget = -1;
    dragTargetId = -1;
    dragTargetCount = 0;
    serviceSelector?.querySelectorAll('li').forEach(li => {
        li.classList.remove('drag-target');
        li.classList.remove('drag-target-self');
    });
    const lastDragPosition = document.getElementById('service-last-drag-position');
    lastDragPosition?.classList.remove('drag-target');
    lastDragPosition?.classList.add('hidden');
}

function reorderService(serviceId: number, targetId: number) {
    console.log('Reordering service', serviceId, targetId);
    if (targetId >= 0) {
        oldActiveService = selectedService;
        setActiveService(-1);
        ipcRenderer.send('reorderService', serviceId, targetId);
    }
}

document.addEventListener('DOMContentLoaded', () => {
    securityButton = document.getElementById('status');

    homeButton = document.getElementById('home');
    homeButton?.addEventListener('click', () => goHome());

    forwardButton = document.getElementById('forward');
    forwardButton?.addEventListener('click', () => goForward());

    backButton = document.getElementById('back');
    backButton?.addEventListener('click', () => goBack());

    refreshButton = document.getElementById('reload');
    refreshButton?.addEventListener('click', () => reload());

    addButton = document.getElementById('add-button');
    addButton?.addEventListener('click', () => ipcRenderer.send('openServiceSettings', null));

    settingsButton = document.getElementById('settings-button');
    settingsButton?.addEventListener('click', () => ipcRenderer.send('openSettings', null));
});

function setActiveService(serviceId: number) {
    const currentService = services[serviceId];
    process.nextTick(() => {
        if (currentService) {
            loadService(serviceId, currentService);
        }

        // Hide previous service
        if (services[selectedService] && services[selectedService].view) {
            services[selectedService].view.classList.remove('active');
        }

        // Show service
        if (currentService) {
            currentService.view.classList.add('active');
        }

        // Save active service ID
        selectedService = serviceId;

        // Refresh navigation
        updateNavigation();
    });
}

function loadService(serviceId: number, service: any) {
    // Load service if not loaded yet
    if (!service.view && !service.viewReady) {
        console.log('Loading service', serviceId);

        document.querySelector('#services > .loader')?.classList.remove('hidden');
        service.view = document.createElement('webview');
        service.view.setAttribute('enableRemoteModule', 'false');
        service.view.setAttribute('partition', 'persist:service_' + service.partition);
        service.view.setAttribute('autosize', 'true');
        service.view.setAttribute('src', emptyPage);

        // Append element to DOM
        document.querySelector('#services')?.appendChild(service.view);

        // Load chain
        let listener: Function;
        service.view.addEventListener('dom-ready', listener = () => {
            service.view.removeEventListener('dom-ready', listener);

            service.view.addEventListener('dom-ready', listener = () => {
                if (service.customCSS) {
                    service.view.insertCSS(service.customCSS);
                }

                document.querySelector('#services > .loader')?.classList.add('hidden');
                service.li.classList.add('loaded');
                service.viewReady = true;

                updateNavigation();

                if (selectedService === null) {
                    setActiveService(serviceId);
                }
            });

            const webContents = remote.webContents.fromId(service.view.getWebContentsId());

            // Set custom user agent
            if (typeof service.customUserAgent === 'string') {
                webContents.setUserAgent(service.customUserAgent);
            }

            // Set context menu
            setContextMenu(webContents);

            // Set permission request handler
            function getUrlDomain(url: string) {
                let matches = url.match(/^https?:\/\/((.+?)\/|(.+))/i);
                if (matches !== null) {
                    let domain = matches[1];
                    if (domain.endsWith('/')) domain = domain.substr(0, domain.length - 1);
                    return domain;
                }

                return '';
            }

            function getDomainPermissions(domain: string) {
                let domainPermissions = service.permissions[domain];
                if (!domainPermissions) domainPermissions = service.permissions[domain] = [];
                return domainPermissions;
            }

            let serviceSession = session.fromPartition(service.view.partition);
            serviceSession.setPermissionRequestHandler(((webContents, permissionName, callback, details) => {
                let domain = getUrlDomain(details.requestingUrl);
                let domainPermissions = getDomainPermissions(domain);

                let existingPermissions = domainPermissions.filter((p: any) => p.name === permissionName);
                if (existingPermissions.length > 0) {
                    callback(existingPermissions[0].authorized);
                    return;
                }

                dialog.showMessageBox(remote.getCurrentWindow(), {
                    type: 'question',
                    title: 'Grant ' + permissionName + ' permission',
                    message: 'Do you wish to grant the ' + permissionName + ' permission to ' + domain + '?',
                    buttons: ['Deny', 'Authorize'],
                    cancelId: 0,
                }).then(result => {
                    const authorized = result.response === 1;

                    domainPermissions.push({
                        name: permissionName,
                        authorized: authorized,
                    });
                    updateServicePermissions(serviceId);

                    console.log(authorized ? 'Granted' : 'Denied', permissionName, 'for domain', domain);
                    callback(authorized);
                }).catch(console.error);
            }));
            serviceSession.setPermissionCheckHandler((webContents1, permissionName, requestingOrigin, details) => {
                console.log('Permission check', permissionName, requestingOrigin, details);
                let domain = getUrlDomain(details.requestingUrl);
                let domainPermissions = getDomainPermissions(domain);

                let existingPermissions = domainPermissions.filter((p: any) => p.name === permissionName);
                return existingPermissions.length > 0 && existingPermissions[0].authorized;
            });

            service.view.setAttribute('src', service.url);
        });

        // Load favicon
        service.view.addEventListener('page-favicon-updated', (event: PageFaviconUpdatedEvent) => {
            console.debug('Loaded favicons for', service.name, event.favicons);
            if (event.favicons.length > 0 && service.favicon !== event.favicons[0]) {
                ipcRenderer.send('setServiceFavicon', serviceId, event.favicons[0]);
                if (service.useFavicon) {
                    const img = document.createElement('img');
                    img.src = event.favicons[0];
                    img.alt = service.name;
                    img.onload = () => {
                        service.li.button.innerHTML = '';
                        service.li.button.appendChild(img);
                    };
                }
            }
        });

        // Display target urls
        service.view.addEventListener('update-target-url', (event: UpdateTargetUrlEvent) => {
            if (event.url.length === 0) {
                urlPreview?.classList.add('hidden');
            } else {
                urlPreview?.classList.remove('hidden');
                if (urlPreview) {
                    urlPreview.innerHTML = event.url;
                }
            }
        });
    }
}

function unloadService(serviceId: number) {
    const service = services[serviceId];
    if (service.view && service.viewReady) {
        service.view.remove();
        service.view = null;
        service.li.classList.remove('loaded');
        service.viewReady = false;

        if (parseInt(selectedService) === serviceId) {
            selectedService = null;
            for (let i = 0; i < services.length; i++) {
                if (services[i].view && services[i].viewReady) {
                    setActiveService(i);
                    break;
                }
            }
            if (selectedService === null) {
                updateNavigation();
            }
        }
    }
}

function reloadService(serviceId: number) {
    const service = services[serviceId];
    if (service.view && service.viewReady) {
        console.log('Reloading service', serviceId);
        document.querySelector('#services > .loader')?.classList.remove('hidden');
        service.view.reload();
    } else if (!service.view && !service.viewReady) {
        loadService(serviceId, service);
    }
}

function updateServicePermissions(serviceId: number) {
    const service = services[serviceId];
    ipcRenderer.send('updateServicePermissions', serviceId, service.permissions);
}

function updateNavigation() {
    console.debug('Updating navigation');
    // Update active list element
    for (let i = 0; i < services.length; i++) {
        const service = services[i];

        // Active?
        if (parseInt(selectedService) === i) service.li.classList.add('active');
        else service.li.classList.remove('active');

        // Loaded?
        if (service.viewReady) service.li.classList.add('loaded');
        else service.li.classList.remove('loaded');
    }

    if (selectedService !== null && services[selectedService].viewReady) {
        console.debug('Updating navigation buttons because view is ready');
        // Update history navigation
        let view = services[selectedService].view;

        homeButton?.classList.remove('disabled');

        if (view && view.canGoForward()) forwardButton?.classList.remove('disabled');
        else forwardButton?.classList.add('disabled');

        if (view && view.canGoBack()) backButton?.classList.remove('disabled');
        else backButton?.classList.add('disabled');

        refreshButton?.classList.remove('disabled');

        updateStatusButton();
    }

    updateWindowTitle();
}

function updateStatusButton() {
    let protocol = services[selectedService].view.getURL().split('://')[0];
    if (!protocol) protocol = 'unknown';
    for (const c of <any>securityButton?.children) {
        if (c.classList.contains(protocol)) c.classList.add('active');
        else c.classList.remove('active');
    }
}

function updateWindowTitle() {
    if (selectedService === null) {
        ipcRenderer.send('updateWindowTitle', null);
    } else if (services[selectedService].viewReady) {
        ipcRenderer.send('updateWindowTitle', selectedService, remote.webContents.fromId(services[selectedService].view.getWebContentsId()).getTitle());
    }
}

function goHome() {
    let service = services[selectedService];
    service.view.loadURL(service.url)
        .catch(console.error);
}

function goForward() {
    let view = services[selectedService].view;
    if (view) remote.webContents.fromId(view.getWebContentsId()).goForward();
}

function goBack() {
    let view = services[selectedService].view;
    if (view) remote.webContents.fromId(view.getWebContentsId()).goBack();
}

function reload() {
    reloadService(selectedService);
}

function setContextMenu(webContents: WebContents) {
    webContents.on('context-menu', (event, props) => {
        const menu = new Menu();
        const {editFlags} = props;

        // linkURL
        if (props.linkURL.length > 0) {
            if (menu.items.length > 0) {
                menu.append(new MenuItem({type: 'separator'}));
            }

            menu.append(new MenuItem({
                label: 'Copy link URL',
                click: () => {
                    clipboard.writeText(props.linkURL);
                },
            }));
            menu.append(new MenuItem({
                label: 'Open URL in default browser',
                click: () => {
                    if (props.linkURL.startsWith('https://')) {
                        shell.openExternal(props.linkURL)
                            .catch(console.error);
                    }
                },
            }));
        }

        // Image
        if (props.hasImageContents) {
            if (menu.items.length > 0) {
                menu.append(new MenuItem({type: 'separator'}));
            }

            menu.append(new MenuItem({
                label: 'Copy image',
                click: () => {
                    webContents.copyImageAt(props.x, props.y);
                },
            }));

            menu.append(new MenuItem({
                label: 'Save image as',
                click: () => {
                    webContents.downloadURL(props.srcURL);
                },
            }));
        }

        // Text clipboard
        if (editFlags.canUndo || editFlags.canRedo || editFlags.canCut || editFlags.canCopy || editFlags.canPaste || editFlags.canDelete) {
            if (editFlags.canUndo || editFlags.canRedo) {
                if (menu.items.length > 0) {
                    menu.append(new MenuItem({type: 'separator'}));
                }

                if (editFlags.canUndo) {
                    menu.append(new MenuItem({
                        label: 'Undo',
                        role: 'undo',
                    }));
                }
                if (editFlags.canRedo) {
                    menu.append(new MenuItem({
                        label: 'Redo',
                        role: 'redo',
                    }));
                }
            }

            if (menu.items.length > 0) {
                menu.append(new MenuItem({type: 'separator'}));
            }

            menu.append(new MenuItem({
                label: 'Cut',
                role: 'cut',
                enabled: editFlags.canCut,
            }));
            menu.append(new MenuItem({
                label: 'Copy',
                role: 'copy',
                enabled: editFlags.canCopy,
            }));
            menu.append(new MenuItem({
                label: 'Paste',
                role: 'paste',
                enabled: editFlags.canPaste,
            }));
            menu.append(new MenuItem({
                label: 'Delete',
                role: 'delete',
                enabled: editFlags.canDelete,
            }));
        }

        if (editFlags.canSelectAll) {
            if (menu.items.length > 0) {
                menu.append(new MenuItem({type: 'separator'}));
            }

            menu.append(new MenuItem({
                label: 'Select all',
                role: 'selectAll',
            }));
        }

        // Inspect element
        if (menu.items.length > 0) {
            menu.append(new MenuItem({type: 'separator'}));
        }

        menu.append(new MenuItem({
            label: 'Inspect element',
            click: () => {
                webContents.inspectElement(props.x, props.y);
            },
        }));


        menu.popup({
            window: remote.getCurrentWindow(),
        });
    });
}