VS Codify the context menu & fix selected commit info hover color

web/src/App.vue

@@ -262,25 +262,9 @@ input:not([type='checkbox']):not([type='radio']).filter {
 	background: #000;
 	color: #d5983d;
 }
-ul.context-menu-wrapper {
+vscode-context-menu {
 	position: absolute;
-	background: var(--vscode-menu-background);
-	min-width: 150px;
-	cursor: pointer;
-	box-shadow: 0 2px 3px 2px rgba(17,17,17,0.867);
-	user-select: none;
-	z-index: 10;
-}
-ul.context-menu-wrapper > li {
-	padding: 4px 8px;
-}
-ul.context-menu-wrapper > li:not(:last-child) {
-	border-bottom: 1px solid #424242;
-}
-ul.context-menu-wrapper > li:hover {
-	background: #000;
-	background-color: var(--vscode-menu-selectionBackground, var(--vscode-menu-background));
-	color: var(--vscode-menu-selectionForeground, var(--vscode-menu-foreground));
+	z-index: 2;
 }
 </style>
 

web/src/directives/context-menu.js

@@ -1,3 +1,5 @@
+/** @import { VscodeContextMenu } from '@vscode-elements/elements' */
+
 /** @typedef {{label:string,icon?:string,action:()=>any}} ContextMenuEntry */
 /**
 @typedef {{
@@ -16,7 +18,11 @@ function remove_all_context_menus() {
 }
 document.addEventListener('contextmenu', remove_all_context_menus, false)
 document.addEventListener('click', remove_all_context_menus, false)
-document.addEventListener('keyup', remove_all_context_menus, false)
+document.addEventListener('keyup', (event) => {
+	if (event.key === 'ArrowDown' || event.key === 'ArrowUp')
+		return
+	remove_all_context_menus()
+}, false)
 
 function set_context_menu(/** @type {HTMLElement} */ el, /** @type {(ev: MouseEvent)=>ContextMenuEntry[]} */ entries_provider) {
 	let existing_context_menu_data = context_menu_data_by_el.get(el)
@@ -25,37 +31,62 @@ function set_context_menu(/** @type {HTMLElement} */ el, /** @type {(ev: MouseEv
 		return
 	}
 
-	/** @type {HTMLElement | null} */
+	/** @type {VscodeContextMenu | null} */
 	let wrapper_el = null
 
 	// The element(s) created by this is quite similar to the template of <git-action-button>
 	function build_context_menu(/** @type {MouseEvent} */ event) {
 		let entries = entries_provider(event)
 		if (! entries || wrapper_el)
 			return
-		wrapper_el = document.createElement('ul')
+		wrapper_el = document.createElement('vscode-context-menu')
 		wrapper_el.setAttribute('aria-label', 'Context menu')
-		wrapper_el.classList.add('context-menu-wrapper')
 		wrapper_el.style.setProperty('left', event.clientX + 'px')
 		wrapper_el.style.setProperty('top', event.clientY + 'px')
-		entries.forEach((entry) => {
-			let entry_el = document.createElement('li')
-			entry_el.setAttribute('role', 'button')
-			entry_el.classList.add('row', 'gap-5')
-			let icon_el = document.createElement('i')
-			if (entry.icon)
-				icon_el.classList.add('codicon', `codicon-${entry.icon}`)
-			let label_el = document.createElement('span')
-			label_el.textContent = entry.label
-			entry_el.appendChild(icon_el)
-			entry_el.appendChild(label_el)
-			entry_el.onmouseup = (e) => {
-				if (e.button === 0)
-					entry.action()
-			}
-			wrapper_el?.appendChild(entry_el)
+
+		// Unfortunately, using wrapper_el.data.push breaks hovering, so we have to create a new array
+		wrapper_el.data = entries.map((entry, i) => ({
+			label: entry.label,
+			value: i.toString(),
+		}))
+		wrapper_el.addEventListener('vsc-context-menu-select', (selectEvent) => {
+			entries[parseInt(selectEvent.detail.value)]?.action()
 		})
+		wrapper_el.show = true
 		document.body.appendChild(wrapper_el)
+
+		// Hack some icons in
+		// We'll need to wait for the context menu items to be available
+		requestAnimationFrame(() => {
+			if (! wrapper_el || ! wrapper_el.shadowRoot)
+				return
+
+			const items = wrapper_el.shadowRoot.querySelectorAll('vscode-context-menu-item')
+			entries.forEach((entry, index) => {
+				const shadowRoot = items[index]?.shadowRoot
+				if (! shadowRoot)
+					return
+
+				const anchor_el = shadowRoot.querySelector('a')
+				/** @type {HTMLElement | null} */
+				const label_el = shadowRoot.querySelector('.label')
+				if (! anchor_el || ! label_el)
+					return
+				// vscode-elements goes against vscode's cursor for context menu items
+				anchor_el.style.cursor = 'pointer'
+
+				if (! entry.icon)
+					return
+				// I feel like the padding vscode-elements uses doesn't match the padding vscode uses
+				// So I tried to match it as best as I could
+				const icon = document.createElement('vscode-icon')
+				icon.name = entry.icon
+				icon.style.position = 'absolute'
+				icon.style.left = '4px'
+				label_el.style.paddingLeft = '2em'
+				anchor_el.prepend(icon)
+			})
+		})
 	}
 
 	/** @type {ContextMenuData} */

web/src/views/MainView.vue

@@ -172,7 +172,7 @@
 }
 let filtered_commits = computed(() => {
 	if (! txt_filter.value || txt_filter_type.value === 'jump')
 		return store.commits.value || []
 	return (store.commits.value || []).filter(txt_filter_filter)
 })
 let txt_filter_last_i = -1
@@ -587,10 +587,6 @@
 }
 #main-panel #log.scroller .commit :deep(.info:hover) {
 	z-index: 1;
-	background: #161616;
-}
-:deep(#main-panel #log.scroller .commit.selected_commit .info:hover) {
-	background: #292616;
 }
 #details-panel {
 	min-width: 400px;
@@ -629,11 +625,3 @@
 	background: var(--vscode-list-hoverBackground);
 }
 </style>
-
-<style>
-.info:hover,
-.info:hover,
-.vue-recycle-scroller__item-view.hover > .commit .info:hover {
-	background: var(--vscode-list-hoverBackground) !important;
-}
-</style>