Is a New Bookmark folder tree UI like this possible via CSS/JS?

Darthagnon

folder tree UI

Is a folder tree UI in the New Bookmark dialog possible to do as a Vivaldi mod (something like in the picture)?

I made it look like this on my end by opening Vivaldi in inspect mode and copying the HTML that makes the bookmarks panel's folder tree, and pasting it into the section that applied to the New Bookmark popup.

Unfortunately, this disappears as soon as you do anything, and I can't figure out what CSS to address...

Any help would be appreciated!

Live long and prosper!

Darthagnon

Ideally, I'm looking to replace the current folder select dropdown with a scrollable folder tree view.

Darthagnon

Bump.

Does anyone know the Vivaldi CSS addresses for:

The bookmarks panel's folder view
The "New Bookmark" popup window

If I had those, could probably combine them to make a better New Bookmark panel.

Pathduck

@Darthagnon I doubt this is doable in CSS, you'd need a bunch of JS.

To find the values of CSS, three ways:

Launch Vivaldi with the flags:
--flag-switches-begin --debug-packed-apps --silent-debugger-extension-api --force-dark-mode
You can then right-click UI elements to inspect their code.
Open Settings, press F12 for Devtools, you can then inspect, but harder since you can't directly choose elements.
Go to URL vivaldi://inspect/#apps and inspect the "Vivaldi" app.

Darthagnon

Thank you for the instructions, Pathduck! I've been using the Inspect commands to launch a standalone instance of Vivaldi.

Managed to find the following, which look promising.

.bookmark-folder-picker
.vivaldi-tree
.cb-form-row .bookmark-folder-picker select {
    min-width: 100%;
}

.panel-bookmarks header {
    display: none;
}
.panel-bookmarks .panel-bookmarks-edit {
    display: none;
}

But it's beyond my CSS skills to do much with them, and I don't know JS. Oh, well, maybe one day.