Compact Menu with CSS possible?

[N3C2L]

I have an interesting idea for a compact menu, but I need your opinion on this, if this is possible with CSS:

Please insert this CSS rules into GH an do a right click on the tab item list:

#needcontext-container {
flex-direction: row !important;
flex-wrap: wrap !important;
}

.needcontext-text {
display: none !important;
}

Your tab item menu on the tab when right clicking should then only have the icons of the cmds visible without the text of these cmds. Here is the example from my GH:

But the problem with the CSS rules from above is, that when enabled, all the other menus for example in the settings also have no text, and thats a huge problem, because the text should be here in the settings menus. I can't get it to work that only when right clicking a tab or clicking the close button or clicking the hover button these CSS rules from above should apply.

But this icon only menus have huge potential for quick navigating, its advantages:

1. More space for additional commands in the list
2. Less extensive mouse movements because the list is shorter
3. Time savings; be able to access commands quickly

Do you also think that would be useful? It would be very kind if you could take a look at this.

[madprops]

This is interesting. The best way would be for me to add it to needcontext as an argument, to create compact lists. But as you say it wouldn't make sense in all cases. Where should I optionally enable it then is the question. Also separators would have to be removed etc, which can be done internally. But yes it's possible through custom css, but what is not possible right now is doing it selectively, it does it for all menus.

[N3C2L]

Glad you find it interesting too 👍

It's nice of you to want to implement these compact lists for certain areas. This is better than a CSS solution anyway, as other users who don't know CSS can also use these compact lists.

Perhaps it would make sense to enable this compact lists only where the user would actually use them. Maybe these points are sensible where a user:

1. navigates most often
2. or where a user would most often make a change

For example, when I click on a tab and realize I want to make a change to this tab right away, these three areas are the quickest to reach from the tab:

1. Tab Item Menu (when right-clicking a tab)
2. Close Menu
3. Hover Menu

I think since the Tab mode is the most frequently used mode, and it has the most commands, the compact list will make the most sense there (compared to the other modes: Closed Mode, History Mode, Bookmark Mode).

[N3C2L]

I think I forgot a small detail. When I hover over a combo with the mouse, the tooltip doesn't display the name a user has given to this combo. This would be useful for the compact list, in case a user has forgotten the name of a combo.

[madprops]

Check out the new Compact settings category.

Btw you can restore hover menu from a backup if you edit it to hover_button_menu from hover_menu.

[N3C2L]

This is fantastic! This new category is really very useful, you've included so many compact menus to activate, there's something for everyone! 👍

I was able to restore the menus from the backup. Thank you!

And I have an idea for seperators that work for my compact list:
I can create my own separators by simply creating a new color and set it to the background color of the compact list. This way, I can put in several of these in the compact list and have good separators this way. Of course they are not real visible seperators but only big blank spaces between them for categorize, but it works.

The compact lists work everwhere I tested it, but I think there's a conflict between the "Tab Item Menu" and the "Extra Menu". You made the "Tab Item Menu" for users who want to completely replace the Extra Menu, and it works for normal menus. But in compact lists there is this issue:
Please reproduce: Put several commands in the "Tab Item Menu" and set the "Extra Menu Mode" to "none". Then, in Settings > Compact, check the box for "Tab Item Menu". The result is that this menu is not displayed as compact when you right-click on the tab.

I'm trying to help with further bug reports next days, hope these reports below help 👍

1. The 2 hover effect settings don't work under > Settings > General > Hover Effect 1+2 (All hover effects in these two are affected).
2. And maybe only on my side but please try to repro: In the close button menu set a cmd for "Middle Click Press Close" and try to run it on the close button.
3. Cmd "To Folder" seems bugged because when executed on a tab, the folder popup is stretched too much so that the folders aren't visible in this folder popup.

[N3C2L]

Ok, sorry, it's again a problem with my mouse. I have assigned mouse3 (middle click) to mouse4 (thumbs key) and it's working when the close button is on the left side (middle click press). And it's working if I press the normal middle3 button on the right close button. Please could you try with your mouse to assign the middle click (mouse3) to the thumb key (mouse4) and then try to execute middle click press on the right side of the close button, is this working on your side?

[madprops]

I don't see a reason why that would change the mouse event handler. I re-mapped the middle button anyway to a side button, I was able to trigger middle click press with that side button.

[madprops]

The code is the same, the position shouldn't matter

[N3C2L]

Ok, thanks for checking it. Then there is something other going on my side. I'll use the close button on the left side then and the hover button on the right side, no problem.

[madprops]

I'm going to do some modifications that might be involved, though not sure

[madprops]

Made big changes to mouse events. Might have fixed something, might have broken something. But performance should increase (even if it wasn't a problem, it scales better now).

[N3C2L]

Thanks! Performance is good. The "middle click press" works good on my side, but the normal middle click doesn't work when applied to tabs. Please repro: Settings > Triggers > "middle click item (tabs) > set to cmd "close tab".
But this middle clicks do work for example on the close or hover button.
All other mouse functions are working also good. Thanks.

Small idea for the compact category if you like it: A new setting for users to set the tooltip delay in milliseconds. Advantage would be that when I set it for example to 10ms, then every description of each cmd is visible very fast. This would be good if users have put fresh cmds inside the compact lists but haven't memorized the name of the cmd good enough. Faster tooltip appearance would help me and maybe others to have a quicker experience when remembering the cmds with the names by hovering over them.

Question: The tooltip has a really tiny font. I couldn't target the css rules for the tooltip with the inspector. But I don't know either if the css of the tooltip can be changed anyway with CSS? I'd be glad if you help me here increasing the font a little bit for the tooltip for the compact lists.

I think there is a little tooltip bug in the compact list when hovering over combos: Most of the time when hovering over the icons of the combos, it shows the name that a user has given to this combo. But in maybe 1 out of 10 times on hovering of some combos it displays "Run Combo (1)" instead of the name a user has given to the combo.

[madprops]

Alright fixed the middle click bug, and the compact icons now have better tooltips.

To customize tooltips i'd need to add a tooltips library since afaik native tooltips are not configurable.

And not sure i'd like to add a library, but i'll consider it.

[madprops]

I'm adding something that can be useful for debugging.

If you do shift+ctrl+click on Add, it will add 5 random commands. You can do it multiple times.

This is to fill lists quickly.

[N3C2L]

Thanks for this and the fixes!

Regarding the tooltips:

I don't know about libraries and it's advantages/disadvantes but what I did was 2 things for me to enhance the tooltip experience in ff overall:

1. Tooltip delay: I created a new entry in about:config "ui.tooltipDelay" and set it to 100ms
2. Added some global tooltip css styling via userchrome.css for font increasing. The styling affects now everything in ff: ff sidebar, ff toolbar etc. but I can live with it and it's ok now.

[N3C2L]

This idea has been implemented and I guess I can close this.