• Community
    • Community
    • Vivaldi Social
    • Blogs
  • Forum
    • Vivaldi Forum
    • Categories
    • Recent
    • Popular
  • Themes
    • Vivaldi Themes
    • My Themes
    • FAQ
  • Contribute
    • Contribute
    • Volunteer
    • Donate
  • Browser
    • Vivaldi Browser
    • Latest News
    • Snapshots
    • Help
Register Login

Vivaldi

  • Community
  • Themes
  • Contribute
  • Browser

Navigation

    • Home
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    1. Home
    2. Desktop
    3. Customizations & Extensions
    4. Modifications
    5. Advanced Panels Mod (with Sessions Panel)

    Advanced Panels Mod (with Sessions Panel)

    Scheduled Pinned Locked Moved Modifications
    moddingjavascriptcss
    191 Posts 42 Posters 43.6k Views 29 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • LonM
      L
      LonM Soprano Patron Moderator
      last edited by 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

      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

      • 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

      ๐Ÿ’ป Windows 10 64-bit Sopranos Builds โ€ข en-GB โ€ข ๐Ÿ—ณ vote for features โ€ข ๐Ÿ•ต๏ธโ€โ™€๏ธ Code of Conduct โ€ข ๐Ÿž Report bugs

      MasterLeo29
      M
      Folgore101
      F
      stardepp
      S
      Y
      VAIO73
      V
      5 Replies Last reply
      Reply Quote 59
    • MasterLeo29
      M
      MasterLeo29 Ambassador @LonM
      last edited by

      @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
      L
      1 Reply Last reply
      Reply Quote 2
    • LonM
      L
      LonM Soprano Patron Moderator @MasterLeo29
      last edited by

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

      ๐Ÿ’ป Windows 10 64-bit Sopranos Builds โ€ข en-GB โ€ข ๐Ÿ—ณ vote for features โ€ข ๐Ÿ•ต๏ธโ€โ™€๏ธ Code of Conduct โ€ข ๐Ÿž Report bugs

      MasterLeo29
      M
      1 Reply Last reply
      Reply Quote 0
    • MasterLeo29
      M
      MasterLeo29 Ambassador @LonM
      last edited by

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

      1 Reply Last reply Reply Quote 0
    • ozoratsubasa
      O
      ozoratsubasa
      last edited by

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

      t.me/senna889091

      1 Reply Last reply Reply Quote 0
    • sjudenim
      S
      sjudenim Supporters
      last edited by

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

      https://github.com/sjudenim

      1 Reply Last reply Reply Quote 0
    • burbuja
      B
      burbuja
      last edited by

      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.

      Vivaldi -- Browser fรผr unsere Freunde
      Vivaldi -- Navegador web para nuestros amigos
      Vivaldi -- Browser for our friends
      Vivaldi -- Browser pro nase pratele

      Win 7 Enterprise, 32 bit

      LonM
      L
      1 Reply Last reply
      Reply Quote 0
    • LonM
      L
      LonM Soprano Patron Moderator @burbuja
      last edited by

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

      ๐Ÿ’ป Windows 10 64-bit Sopranos Builds โ€ข en-GB โ€ข ๐Ÿ—ณ vote for features โ€ข ๐Ÿ•ต๏ธโ€โ™€๏ธ Code of Conduct โ€ข ๐Ÿž Report bugs

      sjudenim
      S
      1 Reply Last reply
      Reply Quote 0
    • Hadden89
      H
      Hadden89
      last edited by 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.

      Vivaldi Stable+Snap | Patience Is The Key To Get The Vivaldi Spree | Unsupported Extensions | Github | windows 11 | Manjaro KDE | Q4OS Trinity | Android 13

      LonM
      L
      1 Reply Last reply
      Reply Quote 0
    • LonM
      L
      LonM Soprano Patron Moderator @Hadden89
      last edited by LonM

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

      ๐Ÿ’ป Windows 10 64-bit Sopranos Builds โ€ข en-GB โ€ข ๐Ÿ—ณ vote for features โ€ข ๐Ÿ•ต๏ธโ€โ™€๏ธ Code of Conduct โ€ข ๐Ÿž Report bugs

      1 Reply Last reply Reply Quote 1
    • luetage
      L
      luetage Supporters Soprano
      last edited by

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

      github โ—Š vfm

      1 Reply Last reply Reply Quote 1
    • sjudenim
      S
      sjudenim Supporters @LonM
      last edited by 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

      https://github.com/sjudenim

      LonM
      L
      1 Reply Last reply
      Reply Quote 0
    • LonM
      L
      LonM Soprano Patron Moderator @sjudenim
      last edited by

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

      ๐Ÿ’ป Windows 10 64-bit Sopranos Builds โ€ข en-GB โ€ข ๐Ÿ—ณ vote for features โ€ข ๐Ÿ•ต๏ธโ€โ™€๏ธ Code of Conduct โ€ข ๐Ÿž Report bugs

      sjudenim
      S
      1 Reply Last reply
      Reply Quote 0
    • sjudenim
      S
      sjudenim Supporters @LonM
      last edited by

      @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

      https://github.com/sjudenim

      1 Reply Last reply Reply Quote 0
    • Hadden89
      H
      Hadden89
      last edited by Hadden89

      An idea for a button could be something like these

      Vivaldi Stable+Snap | Patience Is The Key To Get The Vivaldi Spree | Unsupported Extensions | Github | windows 11 | Manjaro KDE | Q4OS Trinity | Android 13

      LonM
      L
      1 Reply Last reply
      Reply Quote 0
    • LonM
      L
      LonM Soprano Patron Moderator @Hadden89
      last edited by

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

      ๐Ÿ’ป Windows 10 64-bit Sopranos Builds โ€ข en-GB โ€ข ๐Ÿ—ณ vote for features โ€ข ๐Ÿ•ต๏ธโ€โ™€๏ธ Code of Conduct โ€ข ๐Ÿž Report bugs

      QuHno
      Q
      1 Reply Last reply
      Reply Quote 0
    • QuHno
      Q
      QuHno Soprano Translator @LonM
      last edited by

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

      bug logging monkey
      How to write good bug reports

      1 Reply Last reply Reply Quote 0
    • V
      valiowk
      last edited by valiowk

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

      Hadden89
      H
      1 Reply Last reply
      Reply Quote 0
    • Hadden89
      H
      Hadden89 @valiowk
      last edited by Hadden89

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

      Vivaldi Stable+Snap | Patience Is The Key To Get The Vivaldi Spree | Unsupported Extensions | Github | windows 11 | Manjaro KDE | Q4OS Trinity | Android 13

      1 Reply Last reply Reply Quote 0
    • LonM
      L
      LonM Soprano Patron Moderator
      last edited by 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, 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. ๐Ÿ‘ฉโ€๐ŸŽจ)

      ๐Ÿ’ป Windows 10 64-bit Sopranos Builds โ€ข en-GB โ€ข ๐Ÿ—ณ vote for features โ€ข ๐Ÿ•ต๏ธโ€โ™€๏ธ Code of Conduct โ€ข ๐Ÿž Report bugs

      1 Reply Last reply Reply Quote 2
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    • 1
    • 2
    • 3
    • 4
    • 5
    • 9
    • 10
    • 1 / 10
    • First post
      Last post

    Copyright © Vivaldi Technologies™ โ€” All rights reserved. Privacy Policy | Code of conduct | Terms of use | Vivaldi Status