Vertical Extensions Drop-Down Menu

quodroc

CSS modification for a vertical extension dropdown menu, similar to Chrome.

Requires "Expand Hidden Extensions to Drop-Down Menu" in Vivaldi Settings.

Known issues:

Menu may be positioned incorrectly when there are not very many extensions.
Extension popups opened near the bottom of the window may get cut off, which is why I limited the menu height to 50% of the viewport.

CSS

/* Vertical Extensions Drop-Down Menu */
.extensionIconPopupMenu {
  --popupWidth: 280px !important;
}
.extensionIconPopupMenu > .toolbar {
  max-height: 50vh;
  overflow: hidden auto;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
}
.extensionIconPopupMenu .ExtensionDropdownIcon > button {
  justify-content: flex-start;
  padding: 8px 10px;
}
.extensionIconPopupMenu .ExtensionDropdownIcon > button::after {
  content: attr(title);
  overflow: hidden;
  text-overflow: ellipsis;
}
.extensionIconPopupMenu .ExtensionDropdownIcon .button-badge {
  top: auto;
  right: 10px;
}

See also: Feature Request

Hadden89

@quodroc In my case I also need toggle all extension to make it work.
However I think I'll keep it for while; thanks for this

From a quick test, it might be nice to move also the badges on right:

.button-toolbar > button > .button-badge {
top: auto; right: 10px;
}

I noticed another small thing.. on drag, the menu shrink a bit

Capushon

@quodroc said in Vertical Extensions Drop-Down Menu:

CSS modification for a vertical extension dropdown menu, similar to Chrome.

Vivaldi is much more beautiful, why make wood-Chrome out of Vivaldi?

Описание

quodroc

@Hadden89 For "Toggle Only Hidden Extensions" you need to right-click individual extension icons on the toolbar and click "Hide Button"

Also if you only have a small number of extensions in the dropdown, the popup is not positioned correctly. I updated the CSS in the original post to improve this somewhat.

quodroc

@Capushon
Personally I have trouble finding the extension I'm looking for in a long row of small icons. But the great thing about Vivaldi is that it is so customizable.

Also I'm not just copying Chrome, Firefox also shows extensions in a vertical dropdown menu.

Hadden89

@quodroc actually I'm sure chrome took from Firefox, as vivaldi took the concept of submenu from older Chrome. Reimagine and reimplement is what browsers should do (but not too much fast as Mozilla do)

Fun fact: the hamburger menu concept comes from Xerox GUI ('80)

darrenlschultz

@quodroc Thank you for this absolutely wonderful and frankly life-changing CSS mod. I can now finally find and activate my extensions (amongst the gazillion I have installed) with much more efficiency and speed!

In any event, my apologies if this is easily doable on my own, and I am pretty sure I can possibly figure out how to do this on my own (if it’s possible?), but just to err on the side of caution and rely on the experts (and this mod’s actual creator!) before plunging into this and possibly messing something up, if I may just ask: if it is possible, could you show me what I might be able to add to the CSS file to make the dropdown list SORTED (preferably in ascending, alphabetical order)?

If so, then I would be forever grateful and thankful, and either way my many thanks once again for this truly terrific mod!

quodroc

@darrenlschultz I don't think it's possible to sort the list with CSS alone, but you can reorder the extensions manually. Hold Ctrl and click and drag to reorder them.

Catweazle

@quodroc, nice mod, but I since time have to easy access the Extension page in the Web Panel, which is a good alternative.

vgy.me

darrenlschultz

@quodroc Thanks so much! That'll work well, and I so appreciate you taking the time to reply!

luetage

This is a good mod, haven’t seen it before. I’m using the extensions container in the panel, that’s why it’s vital having the popup menu vertical too. The horizontal one looks silly.