Advanced Panels Mod (with Sessions Panel)


  • Moderator

    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

    0_1529404049447_2018-06-19_11-26-26.gif

    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

    • 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

  • Ambassador

    @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


  • Moderator

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


  • Ambassador

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


  • Moderator

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



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



  • 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.


  • Moderator

    @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;
    }
    


  • 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.


  • Moderator

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



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



  • @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


  • Moderator

    @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.



  • @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



  • An idea for a button could be something like these


  • Moderator

    @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 ๐Ÿ˜Ž



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



  • [Sorry, false alertโ€”old post edited away.]



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


  • Moderator

    โš™ 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, no 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. ๐Ÿ‘ฉโ€๐ŸŽจ)



Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.