Advanced Panels Mod (with Sessions Panel)

[guigirl]

@yaha12 My original post was merely to indicate to you that the scripts are not generically broken, qed, but ofc that did not give you any specific info to troubleshoot.

So, for that, as a starting point to ensure we're comparing apples with apples, fwiw here's the verbatim contents of my two files.

advancedPanels.css

/*
* Advanced Panels (a mod for Vivaldi)
* Written by LonM
* No Copyright Reserved
* https://forum.vivaldi.net/post/217005
*/
.panel[advancedpanel="true"] header .toolbar .back, /* hide the web panel back/reload buttons */
.panel[advancedpanel="true"] header .toolbar .forward,
.panel[advancedpanel="true"] header .toolbar .reload,
.panel[advancedpanel="true"] header .toolbar .home,
.panel[advancedpanel="true"] footer /* this last one is to prevent collision with panel actions mod */ {
    display: none !important;
}

.panel[advancedpanel="true"] > div {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.panel[advancedpanel="true"] button {
    background: var(--colorBg);
}


/*
* CSS For Sessions Panel
*/
#sessions_lonm .sessionslist li {
    display: flex;
    flex-direction: row;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 8px
}

#sessions_lonm .sessionslist li div {
    flex-grow: 1;
    padding-right: 4px;
}

#sessions_lonm .sessionslist li button {
    width: 24px;
    height: 24px;
}

#sessions_lonm .sessionslist li span {
    font-size: smaller;
}

#sessions_lonm li h3 , #sessions_lonm li div {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

#sessions_lonm li:hover {
    background: var(--colorHighlightBgAlpha);
}
#sessions_lonm li.selected {
    background: var(--colorHighlightBg);
    color: var(--colorHighlightFg);
}

#sessions_lonm li button {
    display: none;
}
#sessions_lonm li.selected button {
    display: block;
}

#sessions_lonm .sortselector-button {
    display: none;
}
#sessions_lonm .sortselector-button.selected {
    display: block;
}

#sessions_lonm .open_current svg {
    width: 16px;
    left: -3.5px;
    position: relative;
}

#sessions_lonm .open_new svg {
    width: 20px;
    position: relative;
    left: -5.5px;
}
#sessions_lonm .modal-container{
    display: none;
}

#sessions_lonm .show.modal-container {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

#sessions_lonm .confirm {
    width: 90%;
    height: 130px;
    background: var(--colorBg);
    color: var(--colorFg);
    background-color: var(--colorBgLight);
    box-shadow: var(--shadowOverlay);
    border-radius: var(--radiusHalf);
}

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

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

#sessions_lonm .confirm 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%);
}

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


#sessions_lonm .newSession {
    padding: 4px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-column-gap: 6px;
    grid-row-gap: 6px;
}

#sessions_lonm .newSession h2,
#sessions_lonm .newSession input[type="text"]{
    grid-column: 1/3;
}

#sessions_lonm .newSession label input + span {
    margin-left: 10px;
}

custom.js [at least, the extract from it specific to this mod]

/*
guigirl 25/9/20: File holds these mods:

1. https://forum.vivaldi.net/topic/26623/zoom-find-in-page-other-actions-in-web-panels?page=1
    --> 1/1/21: i updated this code with @LonM's latest version. 

2. https://forum.vivaldi.net/topic/33047/autosave-sessions-mod?page=1
    --> 1/1/21: i confirmed this code still matches @LonM's latest version.
    --> 5/1/21: i updated to @LonM's latest version; 4.1.
    --> 2/3/21: The 27 lines beginning `function init()` replaced @LonM's original 22 lines, per @luetage's improvement in https://forum.vivaldi.net/post/451999

3. https://forum.vivaldi.net/topic/33154/import-and-export-themes
    --> 30/9/21: Egads, how come i'd overlooked this cool mod til now?
    --> 13/11/21: I've disabled it coz today's new Snappie 4.4.2482.13 now includes native theme exporting.

4. https://forum.vivaldi.net/post/483429 [open-panels-on-mouse-over]
    --> 10/11/21: Kindly referred here via https://forum.vivaldi.net/post/531000

###################################################################### */

 
/*


/* guigirl 25/9/20, per https://forum.vivaldi.net/topic/33047/autosave-sessions-mod?page=1 */

/*
* Autosave Sessions (a mod for Vivaldi)
* Written by LonM
* guigirl 2/3/21: The 27 lines beginning `function init()` replaced @LonM's original 22 lines, per @luetage's improvement in https://forum.vivaldi.net/post/451999
* V4.1: Attempt to retry if settings is not ready
* v4 : Localise to current timezone, l10n
* v3 : Has own settings section & support private windows again
* v2 : Better handling of multiple windows
*/

(function autoSaveSessionsMod(){
    "use strict";

    const LANGUAGE = 'en_gb'; // en_gb or ko

    const l10n = {
        en_gb: {
            delay: 'Period (minutes)',
            restart: 'This setting requires a restart to take full effect.',
            maxoldsessions: 'Old Sessions Count',
            prefix: 'Prefix',
            prefixdesc: 'A unique prefix made up of the following characters: A-Z 0-9 _',
            saveprivate: 'Save Private Windows'
        },
    }[LANGUAGE];

    let CURRENT_SETTINGS = {};

    /**
     * Copied from bundle.js © Vivaldi - Check if a filename is valid
     * @param {string} s
     */
    function isValidName(e){
        return /^[^\\/:\*\?"<>\|]+$/.test(e) && !/^\./.test(e) && !/^(nul|prn|con|lpt[0-9]|com[0-9])(\.|$)/i.test(e);
    }

    /**
     * Turns a date into a string that can be used in a file name
     * Locale string seems to be the best at getting the correct time for any given timezone
     * @param {Date} date object
     */
    function dateToFileSafeString(date){
        const badChars = /[\\/:\*\?"<>\|]/gi;
        return date.toLocaleString().replace(badChars, '.');
    }

    /**
     * Enable Autosaving sessions
     */
    function autoSaveSession(isPrivate){
        vivaldi.sessionsPrivate.getAll(allSessions => {
            const priv = isPrivate ? "PRIV" : "";
            const prefix = CURRENT_SETTINGS["LONM_SESSION_AUTOSAVE_PREFIX"] + priv;
            const maxOld = CURRENT_SETTINGS["LONM_SESSION_AUTOSAVE_MAX_OLD_SESSIONS"];
            const now = new Date();
            const autosavesOnly = allSessions.filter(x => x.name.indexOf(prefix)===0);
            const oldestFirst = autosavesOnly.sort((a,b) => {return a.createDateJS - b.createDateJS;});

            /* create the new session */
            const name = prefix + dateToFileSafeString(now);
            /* final sanity check */
            if (!isValidName(name)){
                throw new Error("[Autosave Sessions] Cannot name a session as " + name);
            }
            const options = {
                saveOnlyWindowId: 0
            };
            vivaldi.sessionsPrivate.saveOpenTabs(name, options, () => {}); /* there is no way to tell if it failed */

            /* delete older sessions */
            let numberOfSessions = oldestFirst.length + 1; /* length + 1 as we have just added a new one */
            let oldestIndex = 0;
            while(numberOfSessions > maxOld){
                vivaldi.sessionsPrivate.delete(oldestFirst[oldestIndex].name,() => {});
                oldestIndex++;
                numberOfSessions--;
            }
        });
    }

    /**
     * Check if this is the most recent window, and if the most recent window is still open
     * if not, then stop saving the sessions
     */
    function triggerAutosave(){
        chrome.storage.local.get("LONM_SESSION_AUTOSAVE_LAST_WINDOW", data => {
            const lastOpenedWindow = data["LONM_SESSION_AUTOSAVE_LAST_WINDOW"];
            if(window.vivaldiWindowId===lastOpenedWindow){
                /* We know this window is correct, skip the checks */
                autoSaveSession();
                return;
            }
            chrome.windows.getAll(openWindows => {
                const foundLastOpen = openWindows.find(window => window.id===lastOpenedWindow);
                if(foundLastOpen){
                    /*Most recent window still active, use that one instead*/
                } else {
                    /*Most recent window was closed, revert to this one*/
                    chrome.storage.local.set({
                        "LONM_SESSION_AUTOSAVE_LAST_WINDOW": window.vivaldiWindowId
                    }, () => {
                        autoSaveSession();
                    });
                }
            });
        });
    }
    function triggerAutosavePrivate(){
        chrome.storage.local.get("LONM_SESSION_AUTOSAVE_LAST_PRIV_WINDOW", data => {
            const lastOpenedWindow = data["LONM_SESSION_AUTOSAVE_LAST_PRIV_WINDOW"];
            if(window.vivaldiWindowId===lastOpenedWindow){
                /* We know this window is correct, skip the checks */
                autoSaveSession(true);
                return;
            }
            chrome.windows.getAll(openWindows => {
                const foundLastOpen = openWindows.find(window => window.id===lastOpenedWindow);
                if(foundLastOpen){
                    /*Most recent window still active, use that one instead*/
                } else {
                    /*Most recent window was closed, revert to this one*/
                    chrome.storage.local.set({
                        "LONM_SESSION_AUTOSAVE_LAST_PRIV_WINDOW": window.vivaldiWindowId
                    }, () => {
                        autoSaveSession(true);
                    });
                }
            });
        });
    }

    /**
     * Mod the settings page to show settings there
     * Wait a little bit after a settings page has been opened and add settings in
     */
    const SETTINGSPAGE = "chrome-extension://mpognobbkildjkofajifpdfhcoklimli/components/settings/settings.html?path=general";
    function modSettingsPageListener(newTab){
        if(newTab.url === SETTINGSPAGE || newTab.pendingUrl === SETTINGSPAGE){
            setTimeout(modSettingsPage, 1000);
        }
    }
    function modSettingsPage(){
        const settingSection = document.querySelector(".vivaldi-settings .settings-content section");
        if(!settingSection){
            setTimeout(modSettingsPage, 1000);
            return;
        }
        const settingsHTML = document.createElement("section");
        settingsHTML.className = "setting-section";
        settingsHTML.id = "lonmAutosaveSessionsSettings";
        const settingsDiv = document.createElement("div");
        settingsDiv.insertAdjacentHTML("beforeend", "<h2>Autosave Sessions Mod</h2>");
        MOD_SETTINGS.forEach(setting => {
            settingsDiv.appendChild(makeSettingElement(setting));
        });
        settingsHTML.appendChild(settingsDiv);
        settingSection.insertAdjacentElement("afterbegin", settingsHTML);
    }

    /**
     * For a mod setting you need:
     *
     * A) Load it when the mod starts
     * B) Make an option for it when settings is opened
     * C) Change the saved and current state with new value when setting is changed
     *
     * Mod setting has:
     * Key: string
     * Default Value: string|int
     * Description: string
     */
    const MOD_SETTINGS = [
        {
            id: "LONM_SESSION_AUTOSAVE_DELAY_MINUTES",
            type: Number,
            min: 1,
            max: undefined,
            default: 5,
            title: l10n.delay,
            description: l10n.restart
        },
        {
            id: "LONM_SESSION_AUTOSAVE_MAX_OLD_SESSIONS",
            type: Number,
            min: 1,
            max: undefined,
            default: 5,
            title: l10n.maxoldsessions
        },
        {
            id: "LONM_SESSION_AUTOSAVE_PREFIX",
            type: String,
            pattern: "[\\w_]{0,20}",
            default: "VSESAUTOSAVE_",
            title: l10n.prefix,
            description: l10n.prefixdesc
        },
        {
            id: "LONM_SESSION_SAVE_PRIVATE_WINDOWS",
            type: Boolean,
            default: false,
            title: l10n.saveprivate,
            description: l10n.restart
        }
    ];

    /**
     * Handle a change to a setting input
     *   Should be bound in a listener to the setting object
     * @param {InputEvent} input
     */
    function settingUpdated(input){
        if(input.target.type === "checkbox"){
            CURRENT_SETTINGS[this.id] = input.target.checked;
        } else {
            input.target.checkValidity();
            if(input.target.reportValidity() && input.target.value !== ""){
                CURRENT_SETTINGS[this.id] = input.target.value;
            }
        }
        chrome.storage.local.set(CURRENT_SETTINGS);
    }

    /**
     * Create an element for the current setting
     * @param modSetting
     */
    function makeSettingElement(modSetting) {
        const currentSettingValue = CURRENT_SETTINGS[modSetting.id];
        const div = document.createElement("div");
        div.className = "setting-single";
        const title = document.createElement("h3");
        title.innerText = modSetting.title;
        div.appendChild(title);
        if(modSetting.description){
            const info = document.createElement("p");
            info.className = "info";
            info.innerText = modSetting.description;
            div.appendChild(info);
        }
        const input = document.createElement("input");
        input.id = modSetting.id;
        input.value = currentSettingValue;
        input.autocomplete = "off";
        input.autocapitalize = "off";
        input.autocorrect = "off";
        input.spellcheck = "off";
        switch (modSetting.type) {
        case Number:
            input.type = "number";
            break;
        case String:
            input.type = "text";
            break;
        case Boolean:
            input.type = "checkbox";
            if(currentSettingValue){input.checked = "checked";}
            break;
        default:
            throw Error("Unknown setting type!");
        }
        if(modSetting.max){input.max = modSetting.max;}
        if(modSetting.min){input.min = modSetting.min;}
        if(modSetting.pattern){input.pattern = modSetting.pattern;}
        input.addEventListener("input", settingUpdated.bind(modSetting));
        div.appendChild(input);
        return div;
    }

    /**
     * Init the mod, but only if we are not incognito, to maintain privacy.
     * Save the window id in storage, and only use the most recent window to save sessions
     */
    /**
    guigirl 2/3/21: The following 27 lines replaced @LonM's original 22 lines, per @luetage's improvement in https://forum.vivaldi.net/post/451999
    */
    function init(){
        if(window.vivaldiWindowId){
            chrome.windows.getCurrent(window => {
                if(!window.incognito){
                    chrome.storage.local.set({
                        "LONM_SESSION_AUTOSAVE_LAST_WINDOW": window.vivaldiWindowId
                    }, () => {
                        setInterval(triggerAutosave, CURRENT_SETTINGS["LONM_SESSION_AUTOSAVE_DELAY_MINUTES"]*60*1000);
                    });
                }
                if(CURRENT_SETTINGS["LONM_SESSION_SAVE_PRIVATE_WINDOWS"] && window.incognito){
                    chrome.storage.local.set({
                        "LONM_SESSION_AUTOSAVE_LAST_PRIV_WINDOW": window.vivaldiWindowId
                    }, () => {
                        setInterval(triggerAutosavePrivate, CURRENT_SETTINGS["LONM_SESSION_AUTOSAVE_DELAY_MINUTES"]*60*1000);
                    });
                }
                chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
                    if (changeInfo.url === SETTINGSPAGE) {
                        modSettingsPage();
                    }
                })
            });
        } else {
            setTimeout(init, 500);
        }
    }

    /**
     * Load the settings and call the initialiser function
     */
    function loadSettingsAndInit(){
        const keys = MOD_SETTINGS.reduce((prev, current) => {
            prev[current.id] = current.default;
            return prev;
        }, {});
        chrome.storage.local.get(keys, value => {
            CURRENT_SETTINGS = value;
            setTimeout(init, 500);
        });
    }

    loadSettingsAndInit();
})();

[guigirl]

@yaha12 said in Advanced Panels Mod (with Sessions Panel):

if you visit vivaldi://sessions in the address bar, what happens for you? I

Yeah it doesn't work, but so what, who cares? Per the mod, i access this via the custom web panel, not the address bar.

[yaha12]

@guigirl Because I get the same error in the custom panel window when I try to access the mod. Hence, I concluded that it was caused by the same issue.

[yaha12]

@guigirl One thing that did go wrong for sure was that the browser.html file was somehow overridden. It didn't contain references to the mods. Since I didn't do it, I can only assume that an update of some sort did that.

Also, after adding the mod style and js files back to browser.html, I am still getting the original error.

[LonM]

You can't access vivaldi://sessions as a page because that page doesn't exist. The mod just used it as a dummy placeholder value.

Going by your screenshot it looks like the mod just isn't loading for whatever reason. I don't have macos to test with, but that shouldn't pose any problems. If you can see any errors in the console, those would be helpful, if you can paste them here.

[guigirl]

@yaha12 said in Advanced Panels Mod (with Sessions Panel):

the browser.html file was somehow overridden

Well yes, that happens by definition with every single update. Each User must always re-edit their files after each update, either manually or semi-automagically via script.

I am still getting the original error.

I've not seen the result yet of your file comparison with mine...

[yaha12]

@guigirl The files were identical. The difference being that I use separate files, instead of putting all the mods in custom.js.

Understood on browser.html. I didn't know that.

[guigirl]

@yaha12 Ok cool.

Hey, i have a long-shot for you.

On or soon before the date you mentioned, did you by any chance change the location of your file/s from before, & if so did the new path/s include any spaces?

[yaha12]

@guigirl said in Advanced Panels Mod (with Sessions Panel):

On or soon before the date you mentioned, did you by any chance change the location of your file/s from before, & if so did the new path/s include any spaces?

No. I didn't mess with the files at all. Now that I think about it, this whole thing might have had something to do with Vivaldi 5.1 update. I believe I installed it at about that date, with the difference of about a week between the two machines. Prior to that, I was using Vivaldi 5.0

[yaha12]

@lonm Just to be sure, how do I access the console? Is that the one in web developer tools?

[LonM]

@yaha12 It is the browser dev tools, not the normal website dev tools.

If you're unsure, you can get to it by visiting vivaldi://inspect, going to "apps" and clicking "inspect" under the first "vivaldi" item in the list.

[A Former User]

I had tried seperate file for different js mods, it didn't work then.
I don't know if using seperate files works or not.

[yaha12]

@lonm Thanks! I was able to look through the console and clear some (syntactical) errors with those files. Much appreciated! Looks like it is working again on Linux!

P.S. I see that you have a lot mods in that repository. Is there a place, where it is explained what each one does?

[LonM]

@yaha12 Good to know its fixed!

That's mostly my own personal repository that I made public as its easy to link straight to code there. The best mods each have their own post here on the forum which describes what they do.

Here's a list of all of them: https://forum.vivaldi.net/search?term=&in=titles&matchWords=all&by[]=LonM&categories[]=52&sortBy=votes&sortDirection=desc&showAs=topics

[yaha12]

@lonm Thanks! I was able to fix the mods on macOS as well. This time I figured out how the code in your repo worked and ran it via script. It went smoothly! Thanks for that. Much appreciated.

Could you tell me how the autoSessionSave works in the context of user profiles? Will it save sessions for each profile? Will it override sessions from another profile? What if two profiles are open at the same time?

[LonM]

@yaha12 I have just tested it now and even normal saving of sessions doesn't handle multiple open profiles properly, so the mod will not work either. I've filed a bug for this - VB-86671 - and hopefully when that is fixed, the mod will work correctly without needing any fixes.

[yaha12]

@lonm

I see.

It appears to me that it currently bunches open profiles into one saved session and treats them like windows. It is somewhat safe to use it this way? Any timeframe on the bug?

[LonM]

@yaha12 I don't know the timeframe as I've just discovered this bug myself now.

It's "safe" in the sense that you won't lose any data. But it's not "safe" in the sense that whatever reason you were using multiple profile for (e.g. privacy) is now broken.

[yaha12]

@lonm said in Advanced Panels Mod (with Sessions Panel):

It's "safe" in the sense that you won't lose any data. But it's not "safe" in the sense that whatever reason you were using multiple profile for (e.g. privacy) is now broken.

I see. I am using profiles to separate my work into different themes and projects, so privacy is not an issue in this case. Is there a way to stay updated on the bug? Is there a public group or a tracker?

[LonM]

@yaha12 If you want to keep up to date with the status of previously reported bugs, I'd suggest hitting up this thread: status of vb

But for now the bug hasn't been confirmed by another tester yet.