Confirm Close Mod

LonM

What
A box to confirm closing Vivaldi from the close button.
IMPORTANT: This only affects closing vivaldi using the "close" window control. Pressing Alt+F4, using the menu option or other will close as expected

Preview
0_1537730294123_9f463516-a153-4092-8e99-2db67bbf906d-image.png

How To Use

button at the top right of the window
You will be told if there are multiple windows open
Click Quit Vivaldi to exit all windows
Click Close just this window to do.. uh.. I'll give you three guesses
Click Cancel to not exit

Installation
There are two parts:
confirmQuit.js

/**
 * Confirm Quit (a mod for Vivaldi)
 * Author: lonm
 */

(function confirmQuit(){
    "use strict";

    /**
     * Prep confirm box
     */
    function prepConfirm(){
        chrome.windows.getAll(windows => {
            makeConfirm(windows.length);
        });
    }

    /**
     * Make & Show confirm quit dialog
     * @param number n the number of windows
     */
    function makeConfirm(n){
        const confirmModalBox = document.createElement("div");
        confirmModalBox.className = "lonmConfirmQuit";

        const confirmModal = document.createElement("div");
        if(n>1){
            confirmModal.innerHTML = `
                <p>Are you sure you want to quit?</p>
                <p>There are ${n} windows currently open</p>
            `;
        } else {
            confirmModal.innerHTML = `
                <p>Are you sure you want to quit?</p>
            `;
        }
        confirmModal.className = "modal";

        const quitAll = document.createElement("button");
        quitAll.addEventListener("click", () => {
            vivaldi.runtimePrivate.exit();
        });
        quitAll.innerHTML = "Quit Vivaldi";
        confirmModal.appendChild(quitAll);

        if(n > 1){
            const quitThisWindow = document.createElement("button");
            quitThisWindow.addEventListener("click", () => {
                chrome.windows.getCurrent(window => {
                    chrome.windows.remove(window.id);
                });
            });
            quitThisWindow.innerHTML = "Close just this window";
            confirmModal.appendChild(quitThisWindow);
        }

        const cancel = document.createElement("button");
        cancel.addEventListener("click", (e) => {
            e.target.parentElement.parentElement.parentElement.removeChild(e.target.parentElement.parentElement);
        });
        cancel.innerHTML = "Cancel";
        confirmModal.appendChild(cancel);

        const confirmModalShadow = document.createElement("div");
        confirmModalShadow.appendChild(confirmModal);
        confirmModalShadow.className = "shadow";

        confirmModalBox.appendChild(confirmModalShadow);
        confirmModalBox.appendChild(confirmModal);

        document.querySelector("#browser").appendChild(confirmModalBox);
    }

    /**
     * Destroy and recreate the normal browser close button
     */
    function replaceClose(){
        const old = document.querySelector(".window-close");
        const newclose = old.cloneNode(true);
        newclose.addEventListener("click", prepConfirm);
        const parent = old.parentElement;
        parent.removeChild(old);
        parent.appendChild(newclose);
    }

    /**
     * Check that the browser is loaded up properly, and then initialise the mod
     */
    function initMod(){
        if(!document.querySelector(".window-close")){
            setTimeout(initMod, 500);
            return;
        }
        replaceClose();
    }

    initMod();
})();

and
confirmQuit.css

.lonmConfirmQuit {
    z-index: 4999;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.lonmConfirmQuit > div.shadow {
    z-index: 5001;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    background: rgba(0,0,0,0.5);
}

.lonmConfirmQuit > div.modal {
    z-index: 5002;
    width: 500px;
    height: 130px;
    background: var(--colorBg);
    color: var(--colorFg);
    background-color: var(--colorBgLight);
    box-shadow: var(--shadowOverlay);
    border-radius: var(--radiusHalf);
    position: fixed;
}

.lonmConfirmQuit p:nth-of-type(1) {
    margin: 20px;
}

.lonmConfirmQuit p:nth-of-type(2) {
    margin-left: 20px;
}

.lonmConfirmQuit button {
    margin: 20px;
    border: 1px solid var(--colorBorder);
    height: 28px;
    padding: 0 18px;
    -webkit-user-select: none;
    color: var(--colorFg);
    background-image: linear-gradient(var(--colorBgLightIntense) 0%, var(--colorBg) 100%);
}

.lonmConfirmQuit button:hover {
    background-image: linear-gradient(var(--colorBg), var(--colorBg));
}

Notes
I haven't extensively tested this. It's late on Sunday night, and I'm using a snapshot, so it may be unstable.

buttons may behave differently.

Changelog

Only show close just this window if there are more than 2 open
Release

claudio

Wow.
Works perfectly even on Wubiuefi / Ubuntu 18.04.1 LTS 64-bit
Vivaldi 2.0 RC 1 – Vivaldi Browser snapshot 1309.17
Linux DEB: 64-bit (Recommended) 2.0.1309.17-2_amd64.deb
User-agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.102 Safari/537.36 Vivaldi/2.0.1309.17

iAN CooG

perfect, at least accidental clicks on the X won't cause unwanted windows closing.

A Former User

For me doesn't work (snapshot) and the same after disabling all extensions and custom CSS (actually no JS).

LonM

@potmeklecbohdan Do you see anything printed in the browser console after having installed the mod?

A Former User

@lonm Nothing.

LonM

@potmeklecbohdan I have a windows 7 computer available. I could have a closer look tomorrow, and see if the OS is the cause

iAN CooG

@lonm probably not, as I've added your mod on both my win7 32 bit pc (both with vivaldi 2.0 RC1) and they work perfectly. I suspect @potmeklecbohdan did not add both mods correctly.

A Former User

@lonm Sorry, I only added the code to browser.html. Is it the mistake? And please, I'm new to this, so tell me how to do it, I never saw any tutorial

LonM

@potmeklecbohdan Don't worry about that, there's a tutorial in this sub-forum to get started with here: https://forum.vivaldi.net/topic/10549/modding-vivaldi

The process for modding can get a bit involved, so keep that in mind before you start.

LonM

I should also note that it won't work with native windows enabled.

A Former User

@LonM Nice, I've tried it again today and it works… (and it's really better than the default dialog)

iAN CooG

@Gwen-Dragon it's not the same as this, it only warns if you close the last window, while@LonM mod even warns for every window about to close.
Depending on what one wants, this may be still useful.

LonM

@Gwen-Dragon ehhhh, mine only works for pressing the actual close button. The official version works for any method of closing.