Change:
I recently noticed an animation to indicate toolbar actions can be changed: ! This seems to be inspired by Safari toolbar when you edit it: ! I am seeing a few issues with our approach: we allow to change visibility of actions in a lot of places (activity bar, status bar) where currently there is no such animation in Safari to get into this mode, the user explicitly picks an action "Customize Toolbar" while for us it starts on right click already in Safari you can actually grab an action and move it, I even think they only animate the action to make that more obvious (not so much the fact that you can hide the action) I would vote for not having the animation until we can support what Safari does including to drag and reorder actions. I think the menu makes it already clear what the right click gesture allows you to do: <img width="299" alt="image" src="https://user-"
Yes, thanks, this feels very strange to me. I don't think animating the whole menubar make sense when you are only operating on a single item.
How about beginning a right-click menu with an inactive entry that acts as a header? Something like "Button Visibility". It would also act as a protection against accidental hiding, since I can imagine some folk inadvertently pressing right button down, moving the mouse a few pixels right, releasing the button and seeing vanish the button they intended to actuate. Especially on Linux where there's a longstanding issue about this happening on context menus at certain Zoom levels and certain places on the screen.
related/motivation
Well, strictly speaking you operate on the whole menu because you also have toggle actions for all its entries. I like that direction. We already do something similar to right click the overflow item. You cannot hide that but you get a disabled "Hide" entry for consistency. On the flip side it is bogus use of menu items as "headers" <img width="340" alt="Screenshot 2022-09-29 at 08 23 30" src="https://user-"Overall the motivation for same kind of animation is mostly the . Left and right click show a context menu which do very different things but look very similar
Any scope for changing the button icon when in this edit mode? Maybe to pencil or gearwheel.
Note that animations like this look pretty terrible on standard DPI monitors due to the blurriness. It also removes sub-pixel anti-aliasing which makes it look even more different to non-animating. ! Regular: ! Animating: !
is that specific to this animation or something you notice with animations in general? Like the sync-spinner or the language status wiggle?
I also think the spinner looks pretty bad, though it's less noticeable than this I don't think I've noticed this, but any animation like these should have this problem. You can notice it when websites use animations as well, the shift from animated to non-animated is often jarring.
Or even spinning gearwheel
Can you please file a dedicated issue? There is a bunch of places that use CSS animations and if there is a flaw with that we should look at it holistically Created to disable the animation for now. Let's take time in October to revisit this. Lets discuss (1) if this is really needed and (2) if we should align other hide-able items (consistency is key)
created with a lot of details

Discussion:
background-size: 16px; } <del> @keyframes shift { 0% { transform: translateX(0px); } 33%{ transform: translateX(0.5px); } 66% { transform: translateX(-0.5px); } } .monaco-toolbar.config .monaco-action-bar .action-item { animation-duration: 1.2s; animation-iteration-count: infinite; animation-name: shift; } .monaco-toolbar.config .monaco-action-bar .action-item:nth-child(odd) { animation-delay: 0.6s; } </del> .monaco-dropdown-with-default { display: flex !important; flex-direction: row;

})); } <del> // this.getElement().classList.toggle('config', true); </del> this._contextMenuService.showContextMenu({ getAnchor: () => e, getActions: () => actions,

menuId: this._options?.contextMenu, menuActionOptions: { renderShortTitle: true, ...this._options?.menuOptions }, contextKeyService: this._contextKeyService, <del> onHide: () => this.getElement().classList.toggle('config', false), </del> }); })); }