Advanced Panels Mod (with Sessions Panel)

LonM

Update

Vivaldi now has an experimental session panel, eventually it will be released, but for now you can enable it by typing vivaldi://experiments into the address bar and turning the session panel on. You may need to edit your toolbar to get the button.

As a result, I won't be making any new updates to this mod.

What

A mod that enabled an easy way to make advanced panels. A panel that runs in the same context as the bookmarks and notes panels.

Why

I wanted to try making a sessions panel, but found that there would be a lot of work to get the Advanced Panel created and running well. This effort would also be duplicated (and might conflict) if I wanted to make a second advanced panel later.

How

The mod hooks into dummy web panels (with URLs that go nowhere), and inserts the advanced panel into it. This way, Vivaldi will remember the size and position, as if it were a normal web panel, and the mod can manage its own state and HTML as needed without having to worry about loading and listeners and such nonsense.

Demo

Sessions Panel - Gives you an easy to access list of sessions. You can delete them, open them and create new ones from the panel instead of having to deal with the modal dialog. The mod requires that you first add your own web panel manually, with a URL set to vivaldi://sessions

Installation

Comes in two parts: advancedPanels.js and advancedPanels.css. These should be installed as per the instructions here.

The files are now too long to embed in this post. Please download them from these links: advancedPanels.js and advancedPanels.css

Choosing a language: Change the string on line 11 from 'en_gb' to whichever language you want.

Writing Panels

See the big comment at the top of the file for an explanation of what you need to do to make a panel. You need to provide HTML and identifiers, and in your javascript module you need to provide an interface that offers onInit and onActivate functions.

The vast majority of a panel is written in the JavaScript file, but you can use the key of a panel as an #id in the CSS file to add additional styles.

The JavaScript functionality for a mod should be written entirely within the CUSTOM_PANELS dictionary. Everything outside that is just assisting with loading the panel.

Additional Remarks

I've tried to put the important remarks in the code. If I think of any additional ones, they'll be put here.

I didn't bother to translate this mod because... that would be too much work.

The sessions icon is just 3 lines because I have no idea what icon to give it.

Something when clicking "open session in current window", if there are multiple windows in the session, Vivaldi will open only the primary window in the current window and still open other windows individually. There's nothing I can do about this, that's just the way Vivaldi works.

Let me know what you think - if this is useful, or if it's just a load of nonsense.

Session sorting by create date may be off by 1 hour for sessions created during a daylight saving time switchover.

Changelog

Add translation by mlopezgva
Update to v4.3 vivaldi.sessionsPrivate API
Display timezones according to current locale
Add translation by @vistaus
Add translation by @Folgore101
Add translation by @dencion
fix for can't open sessions with leading or trailing spaces in name
Bugfix for floating panels
Bugfixes - Better handling of cases where panel is removed from DOM
Can now save selected tabs in a session, style improvements
Can now save a session in a single click - uses current timestamp as name
Can now select multiple sessions at once using Ctrl+Click
Sessions Panel Sorting Rules
Fix a bug on dark themes, and when adding or removing a regular web panel
Initial Release

MasterLeo29

@lonm This looks great as a Vivaldi new feature and even better for a custom mod. Congrats!!

One request (you don't have to bother, just a little detail). Since the "advanced panel" is the main component here and the "session panel" is your example of use case (again, well done), could you perhaps split the code between the 'core' - advanced panels - and your example?
Like, every new 'panel' goes into a folder and the 'core' imports all of its contents

Again, just an idea (I might do it myself over the weekend if you're too busy). Thanks in advance

LonM

@masterleo29 I suppose that could be possible. I'm not sure how Vivaldi would react to trying to import javascript on the fly.

MasterLeo29

@lonm You have a point there.. Once I get back to my laptop I'll try something

ozoratsubasa

I loved this too much! I dream with a session panel and I liked the idea. I'll test it when possible.

sjudenim

I think I will be able to put this to good use. Thanks for sharing

burbuja

Hi, how to do this?
I used this code to hide the buttons:

.window-buttongroup, .window-buttongroup * {
	display: none;
}

But the trash button is not at the end of the bar.
Thank you.

LonM

@burbuja This isn't really the right place to post that request, it would be better in its own topic.

But the code you want is:

.window-buttongroup, .window-buttongroup * {
	display: none;
}
#tabs-container.top {
    padding-right: 10px;
}

Hadden89

Nice
I should test this on clean vivaldi as it throws a
sespanel.js:451 Failed to find button for Sessions
(probably conflictual css/js on my side. I'm sure about that)
Oops.

LonM

@hadden89 The mod requires that you first add your own web panel manually, with a URL set to vivaldi://sessions.

luetage

Well it works, but the only panel I'd possibly want is working inbuilt mail

sjudenim

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

@burbuja This isn't really the right place to post that request, it would be better in its own topic.

But the code you want is:
.window-buttongroup, .window-buttongroup * {
	display: none;
}
#tabs-container.top {
    padding-right: 10px;
}

This doesn't work

LonM

@sjudenim Ah, that should have an !important to force it:

.window-buttongroup, .window-buttongroup * {
	display: none;
}
#tabs-container.top {
    padding-right: 10px !important;
}

But again, I must stress that this should be in it's own modding topic.

sjudenim

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

@sjudenim Ah, that should have an !important to force it:
.window-buttongroup, .window-buttongroup * {
	display: none;
}
#tabs-container.top {
    padding-right: 10px !important;
}
But again, I must stress that this should be in it's own modding topic.

I agree, just pointing out code that does't work for those that may come across it in the future

Hadden89

An idea for a button could be something like these

LonM

@hadden89 I had an initial thought of using the clock, but thought it was too similar to the history icon.

Instead I went with 3 bars, which is too similar to the menu icon

QuHno

@lonm Something like this would look OK-ish https://www.onlinewebfonts.com/icon/475555

valiowk

[Sorry, false alert—old post edited away.]

Hadden89

@valiowk ~~On v2 RC2~~ it still works.
~~You mean on v2 stable, do you? (I don't have the mod there).~~

LonM

I've updated the sessions panel mod.

You can now use the Only selected tabs check box to save tabs that you select with by Ctrl/Shift clicking them.

As a consequence, the minimum required version of Vivaldi to run the mod is now 2.2.

If you're on an older version, To see the previous version, click the 3 dots on the first post above and view the forum post edit history.

(oh and there are some style improvements. ‍)