Save All Tabs to Speed Dial Folder

nomadic

Saving a grouping of tabs as a session doesn't always fit with how I normally use a browser. I prefer to have them as bookmarks, so that I can search through and reference back to individual bookmarks easily.

Opera has a nice context menu option, when right clicking on the tab bar, to save all the open tabs in the window to a speed dial folder. I tried to recreate that with this mod.

Instead of adding another option to Vivaldi's already overcrowded context menus with the Chrome Context Menu API (because I couldn't figure out how to get it only in the menu on the tab bar,) I decided to just add a button after the extensions toolbar.

Preview
Saving tabs in action

Javascript

(function() {
  // ============================================================================================================
  // Adds a "save all tabs to speed dial folder" button to the addressbar
  //    - made by nomadic on the Vivaldi Forums
  // ============================================================================================================
  function saveTabsToSpeeddialBtn() {
    const LOCATE_BTN_IN = ".toolbar.toolbar-addressbar.toolbar-mainbar";
    const DEBUG = false;
    const PADDING_FROM_TOP = "7px";

    function tempAlert(msg, duration, parent) {
      var el = document.createElement("div");
      el.setAttribute(
        "style",
        `position:absolute;top:15px;right:15px;padding:${PADDING_FROM_TOP} 11px;opacity:0;transition:opacity 1000ms ease;z-index:999;color:#3c763d;background-color:#dff0d8;border:1px solid#3c763d;border-radius:var(--radius);`
      );
      el.setAttribute("id", "custom-notification");
      el.innerHTML = msg;
      var toAddTo = document.querySelector(parent);
      toAddTo.appendChild(el);
      setTimeout(function() {
        el.style.opacity = 0.9;
      }, 100);
      setTimeout(
        function() {
          el.style.opacity = 0;
        },
        duration > 1000 ? duration - 1000 : duration / 2
      );
      setTimeout(function() {
        if (el !== null && el.parentNode) {
          el.parentNode.removeChild(el);
        }
      }, duration);
    }

    // get speed dial folder
    let speeddialFolder;
    // CUSTOM FOLDER NAME HERE
    chrome.bookmarks.search("speed dial", function(bookmarks) {
      for (let bookmark of bookmarks) {
        DEBUG && console.log(bookmark);
        // CUSTOM SELECTORS HERE
        if (bookmark.speeddial === true && bookmark.trash === false) {
          speeddialFolder = bookmark;
          break;
        }
      }
      if (speeddialFolder === undefined) {
        console.log("Rename your Speed Dial Folder to 'Speed Dial' and make sure it isn't in the trash");
        return;
      }
    });

    // create the button
    var saveTabsBtn = document.createElement("div");
    saveTabsBtn.setAttribute("class", "button-toolbar custom-button");
    saveTabsBtn.innerHTML = `
    <button tabindex="-1" title="Save all tabs as Speed Dial Folder" id="vivaldiSaveTabsBtn">
      <span>
        <svg viewBox="0 0 26 26" xmlns="http://www.w3.org/2000/svg">
          <path d="M12.99 12.5c-1.1 0-2.01.9-2.01 2s.9 2.01 2 2.01 2.02-.9 2.02-2-.91-2.01-2.01-2.01zM8.15 8.23v2.7h7.14v-2.7zm-1.3-1.88a.5.5 0 00-.5.5v12.3a.5.5 0 00.5.5h12.3a.5.5 0 00.5-.5V9.42a.5.5 0 00-.16-.35L16.92 6.5a.5.5 0 00-.35-.15zm.5 1h9l2.3 2.28v9.02H7.34z"/>
        </svg>
      </span>
    </button>
    `;
    var toolbar = document.querySelector(LOCATE_BTN_IN);
    toolbar.appendChild(saveTabsBtn);

    // add click action for button
    document.getElementById("vivaldiSaveTabsBtn").addEventListener("click", function() {
      let queryInfo = {
        currentWindow: true
      };
      chrome.tabs.query(queryInfo, function(tabs) {
        // make the folder on the speed dial
        var dateFormat = { year: "numeric", month: "numeric", day: "numeric", hour: "numeric", minute: "numeric" };
        var date = new Date();
        let folderTitle = "Tabs: " + date.toLocaleDateString("en-US", dateFormat);
        let folderProperties = {
          parentId: speeddialFolder.id,
          title: folderTitle
        };
        chrome.bookmarks.create(folderProperties, function(newFolder) {
          // saveeach open tab to the new folder
          let folderId = newFolder.id;
          tabs.forEach(function(tab) {
            let bookmarkProperties = {
              parentId: folderId,
              title: tab.title,
              url: tab.url
            };
            chrome.bookmarks.create(bookmarkProperties);
          });

          // open the Start Page if not already open
          let isStartPage = document.querySelector(".dials.speeddial");
          if (!isStartPage) {
            chrome.tabs.create({ url: "chrome://vivaldi-webui/startpage" }, function() {
              //! BUG: scroll down didn't work
              tempAlert("Current Tabs Saved", 4000, ".startpage");
            });
          } else {
            window.scrollTo(0, document.querySelector(".startpage-content").scrollHeight);
            tempAlert("Current Tabs Saved", 4000, ".startpage");
          }
        });
      });
    });
  }

  // Loop waiting for the browser to load the UI
  let intervalID = setInterval(function() {
    const browser = document.getElementById("browser");
    if (browser) {
      saveTabsToSpeeddialBtn();
      clearInterval(intervalID);
    }
  }, 300);
})();

Help Wanted

It would be nice if the thumbnails could automatically be fetched, but I couldn't figure it out. Using simulated clicks and wait intervals didn't work, and I couldn't understand how the compressed js in the browser was working when I stepped through it with the debugger. So, if anyone knows a bit more about how Vivaldi gets the thumbnails, please let me know!
The save icon on the button isn't perfect, so if anyone has a better icon idea, it could be a nice addition to the mod. I just made a quick floppy disk icon because I couldn't think of anything else.

Possible Fixes (look at these if pressing the save button doesn't have any effect)

Your bookmarks speed dial folder needs to be called "Speed Dial" or some variation of upper and lower case case characters that spell "speed dial"

this is just so the code can find the correct folder, you can go into the code and change the search term if you really want the folder to have a different folder name. Look in the code under the comment "// CUSTOM FOLDER NAME HERE" to change it

It is also beneficial to put your speed dial folder at the top of your bookmarks list, so any other matches don't accidentally go through
If you don't want to do either of these or pressing the button does nothing, you can make you selectors more specific in the code under the comment "// CUSTOM SELECTORS HERE"
You can find out what selectors you might need by setting the const DEBUG to true and then looking at the console and expanding any Objects that get printed out.
here is an example:

In the code I only check if it is a speeddial and that it isn't in the trash with:
bookmark.speeddial === true && bookmark.trash === false
You can add additional ones that match your speed dial folder

Expand to see

treego

You could simply bookmark all the tabs to a folder and specify that folder to be in the Speed Dial by simply clicking that option in the Bookmarks Panel. That's how I did it recently.

nomadic

@treego yeah, that does work, but I am looking for a one click option. The "bookmark all tabs" is Vivaldi's equivalent, but there isn't a way to put it on the speed dial automatically (as far as I know.)

I did look into making some event listener to move the folder to the speed dial, but it was just as simple to make the folder itself.

This mod is really just for something I got used to doing in Opera. For most people your suggestion is probably better than using this mod.

BoneTone

@treego or, drag & drop that folder into an already existing speed dial folder, which is what I would so if I wanted to bookmark a bunch of tabs to be placed into a new folder in the speed dial.

@nomadic said in Save All Tabs to Speed Dial Folder:

I am looking for a one click option

2 extra clicks ain't terrible for something that is a rather uncommon use case. Not saying it's not common for you, but for the Vivaldi user base. But, this is why Vivaldi rocks. Mods let us create solutions for things that are important personal workflows, but not common enough to warrant changes in the browser itself, or at least a rapid response.

Good luck and happy surfing!

A Former User

I think you are looking for vivaldi.thumbnails or—maybe—vivaldi.bookmarksPrivate.updateSpeedDialsForWindowsJumplist() (none of these tested).

nomadic

@potmeklecbohdan Thanks. Didn't even know about these Vivaldi APIs. I never made it out of @LonM 's VivaldiMods folder on his Github. Should have known he would have figured something out.

prascal

@treego yep, that is the way I do it too... I have a Speed Dial "inbox" in the bookmark bar, but still, a context menu entry "add bookmark to speed dial" is missing.
Would help to bring the speed dial a bit more to the centre and integrate it better in daily bookmark tasks ..... alien