Matches vscode alt modifier & dblclick behavior

1 rok temu · b9dc1d3daa
--- a/src/webviews/apps/shared/components/commit/file-change-item.ts
+++ b/src/webviews/apps/shared/components/commit/file-change-item.ts
@ -1,273 +0,0 @@
 import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import type { FileShowOptions } from '../../../../commitDetails/protocol';
 import '../code-icon';

 export interface FileChangeItemEventDetail {
 	path: string;
 	repoPath: string;
 	showOptions?: FileShowOptions;
 }

 // TODO: use the model version
 const statusTextMap: Record<string, string> = {
 	'.': 'Unchanged',
 	'!': 'Ignored',
 	'?': 'Untracked',
 	A: 'Added',
 	D: 'Deleted',
 	M: 'Modified',
 	R: 'Renamed',
 	C: 'Copied',
 	AA: 'Conflict',
 	AU: 'Conflict',
 	UA: 'Conflict',
 	DD: 'Conflict',
 	DU: 'Conflict',
 	UD: 'Conflict',
 	UU: 'Conflict',
 	T: 'Modified',
 	U: 'Updated but Unmerged',
 };

 // TODO: use the model version
 const statusCodiconsMap: Record<string, string | undefined> = {
 	'.': undefined,
 	'!': 'diff-ignored',
 	'?': 'diff-added',
 	A: 'diff-added',
 	D: 'diff-removed',
 	M: 'diff-modified',
 	R: 'diff-renamed',
 	C: 'diff-added',
 	AA: 'warning',
 	AU: 'warning',
 	UA: 'warning',
 	DD: 'warning',
 	DU: 'warning',
 	UD: 'warning',
 	UU: 'warning',
 	T: 'diff-modified',
 	U: 'diff-modified',
 };

@customElement('file-change-item')
 export class FileChangeItem extends LitElement {
 	static override styles = css`
 		:host {
 			display: flex;
 			flex-direction: row;
 			align-items: center;
 			justify-content: space-between;
 			font-size: var(--vscode-font-size);
 			line-height: 2rem;
 			color: var(--vscode-sideBar-foreground);
 		}
 		:host(:hover) {
 			color: var(--vscode-list-hoverForeground);
 			background-color: var(--vscode-list-hoverBackground);
 		}

 		:host(:focus-within) {
 			outline: 1px solid var(--vscode-list-focusOutline);
 			outline-offset: -1px;
 			color: var(--vscode-list-activeSelectionForeground);
 			background-color: var(--vscode-list-activeSelectionBackground);
 		}

 		* {
 			box-sizing: border-box;
 		}

 		.change-list__link {
 			width: 100%;
 			color: inherit;
 			white-space: nowrap;
 			text-overflow: ellipsis;
 			overflow: hidden;
 			text-decoration: none;
 			outline: none;
 		}

 		.change-list__status {
 			margin-right: 0.6rem;
 		}

 		.change-list__status-icon {
 			width: 16px;
 			aspect-ratio: 1;
 			vertical-align: text-bottom;
 		}

 		.change-list__path {
 			opacity: 0.7;
 			margin-left: 0.3rem;
 		}

 		.change-list__actions {
 			flex: none;
 			user-select: none;
 			display: flex;
 			align-items: center;
 			color: var(--vscode-icon-foreground);
 		}

 		:host(:focus-within) .change-list__actions {
 			color: var(--vscode-list-activeSelectionIconForeground);
 		}

 		:host(:not(:hover):not(:focus-within)) .change-list__actions {
 			display: none;
 		}

 		.change-list__action {
 			display: inline-flex;
 			justify-content: center;
 			align-items: center;
 			width: 2rem;
 			height: 2rem;
 			border-radius: 0.25em;
 			color: inherit;
 			padding: 2px;
 			vertical-align: text-bottom;
 			text-decoration: none;
 		}
 		.change-list__action:focus {
 			outline: 1px solid var(--vscode-focusBorder);
 			outline-offset: -1px;
 		}
 		.change-list__action:hover {
 			background-color: var(--vscode-toolbar-hoverBackground);
 		}
 		.change-list__action:active {
 			background-color: var(--vscode-toolbar-activeBackground);
 		}
 	`;

 	@property()
 	status = '';

 	@property()
 	path = '';

 	@property({ attribute: 'repo-path' })
 	repoPath = '';

 	@property()
 	icon = '';

 	@property({ type: Boolean, reflect: true })
 	stash = false;

 	@property({ type: Boolean, reflect: true })
 	uncommitted = false;

 	@property({ type: Boolean, reflect: true })
 	tree = false;

 	private renderIcon() {
 		if (this.icon !== '') {
 			return html`<img class="change-list__status-icon" src="${this.icon}" />`;
 		}

 		const statusIcon = (this.status !== '' && statusCodiconsMap[this.status]) ?? 'file';
 		return html` <code-icon icon="${statusIcon}"></code-icon> `;
 	}

 	override focus(options?: FocusOptions | undefined): void {
 		this.shadowRoot?.getElementById('item')?.focus(options);
 	}

 	open(showOptions?: FileShowOptions): void {
 		this.onComparePrevious(undefined, showOptions);
 	}

 	override render() {
 		const statusName = this.status !== '' ? statusTextMap[this.status] : '';
 		const pathIndex = this.path.lastIndexOf('/');
 		const fileName = pathIndex > -1 ? this.path.substring(pathIndex + 1) : this.path;
 		const filePath = !this.tree && pathIndex > -1 ? this.path.substring(0, pathIndex) : '';

 		return html`
 			<a id="item" class="change-list__link" @click=${this.onComparePrevious} href="#">
 				<span class="change-list__status" title="${statusName}" aria-label="${statusName}"
 					>${this.renderIcon()}</span
 				><span class="change-list__filename">${fileName}</span>
 				${!this.tree ? html`<small class="change-list__path">${filePath}</small>` : nothing}
 			</a>
 			<nav class="change-list__actions">
 				<a
 					class="change-list__action"
 					@click=${this.onOpenFile}
 					href="#"
 					title="Open file"
 					aria-label="Open file"
 					><code-icon icon="go-to-file"></code-icon></a
 				>${!this.uncommitted
 					? html`<a
 							class="change-list__action"
 							@click=${this.onCompareWorking}
 							href="#"
 							title="Open Changes with Working File"
 							aria-label="Open Changes with Working File"
 							><code-icon icon="git-compare"></code-icon
 					  ></a>`
 					: nothing}${!this.stash && !this.uncommitted
 					? html`<a
 								class="change-list__action"
 								@click=${this.onOpenFileOnRemote}
 								href="#"
 								title="Open on remote"
 								aria-label="Open on remote"
 								><code-icon icon="globe"></code-icon></a
 							><a
 								class="change-list__action"
 								@click=${this.onMoreActions}
 								href="#"
 								title="Show more actions"
 								aria-label="Show more actions"
 								><code-icon icon="ellipsis"></code-icon
 							></a>`
 					: nothing}
 			</nav>
 		`;
 	}

 	private onOpenFile(e: Event) {
 		e.preventDefault();
 		this.fireEvent('file-open');
 	}

 	private onOpenFileOnRemote(e: Event) {
 		e.preventDefault();
 		this.fireEvent('file-open-on-remote');
 	}

 	private onCompareWorking(e: Event) {
 		e.preventDefault();
 		this.fireEvent('file-compare-working');
 	}

 	private onComparePrevious(e?: Event, showOptions?: FileShowOptions) {
 		e?.preventDefault();
 		this.fireEvent('file-compare-previous', showOptions);
 	}

 	private onMoreActions(e: Event) {
 		e.preventDefault();
 		this.fireEvent('file-more-actions');
 	}

 	private fireEvent(eventName: string, showOptions?: FileShowOptions) {
 		const event = new CustomEvent<FileChangeItemEventDetail>(eventName, {
 			detail: {
 				path: this.path,
 				repoPath: this.repoPath,
 				showOptions: showOptions,
 			},
 			bubbles: true,
 			composed: true,
 		});
 		this.dispatchEvent(event);
 	}
 }
--- a/src/webviews/apps/shared/components/list/file-change-list-item.ts
+++ b/src/webviews/apps/shared/components/list/file-change-list-item.ts
@ -1,10 +1,12 @@
 import { attr, css, customElement, FASTElement, html, ref, volatile, when } from '@microsoft/fast-element';
 import type { TextDocumentShowOptions } from 'vscode';
 import { numberConverter } from '../converters/number-converter';
 import type { ListItem } from './list-item';
 import './list-item';
 import type { ListItem, ListItemSelectedEvent } from './list-item';
 import '../code-icon';

 // Can only import types from 'vscode'
 const BesideViewColumn = -2; /*ViewColumn.Beside*/

 export interface FileChangeListItemDetail {
 	path: string;
 	repoPath: string;
@ -20,7 +22,7 @@ const template = html`
 		active="${x => x.active}"
 		expanded="${x => x.expanded}"
 		parentexpanded="${x => x.parentexpanded}"
 		@selected="${(x, c) => x.onComparePrevious(c.event)}"
 		@selected="${(x, c) => x.onComparePrevious(c.event as ListItemSelectedEvent)}"
 	>
 		<img slot="icon" src="${x => x.icon}" title="${x => x.statusName}" alt="${x => x.statusName}" />
 		${x => x.fileName}
@ -28,7 +30,7 @@ const template = html`
 		<span slot="actions">
 			<a
 				class="change-list__action"
 				@click="${(x, c) => x.onOpenFile(c.event)}"
 				@click="${(x, c) => x.onOpenFile(c.event as MouseEvent)}"
 				href="#"
 				title="Open file"
 				aria-label="Open file"
@ -39,7 +41,7 @@ const template = html`
 				html<FileChangeListItem>`
 					<a
 						class="change-list__action"
 						@click="${(x, c) => x.onCompareWorking(c.event)}"
 						@click="${(x, c) => x.onCompareWorking(c.event as MouseEvent)}"
 						href="#"
 						title="Open Changes with Working File"
 						aria-label="Open Changes with Working File"
@ -49,14 +51,14 @@ const template = html`
 						x => !x.stash,
 						html<FileChangeListItem>`<a
 								class="change-list__action"
 								@click="${(x, c) => x.onOpenFileOnRemote(c.event)}"
 								@click="${(x, c) => x.onOpenFileOnRemote(c.event as MouseEvent)}"
 								href="#"
 								title="Open on remote"
 								aria-label="Open on remote"
 								><code-icon icon="globe"></code-icon></a
 							><a
 								class="change-list__action"
 								@click="${(x, c) => x.onMoreActions(c.event)}"
 								@click="${(x, c) => x.onMoreActions(c.event as MouseEvent)}"
 								href="#"
 								title="Show more actions"
 								aria-label="Show more actions"
@ -195,28 +197,32 @@ export class FileChangeListItem extends FASTElement {
 		};
 	}

 	onOpenFile(e: Event) {
 		e.preventDefault();
 		this.$emit('file-open', this.getEventDetail());
 	onOpenFile(e: MouseEvent) {
 		this.$emit(
 			'file-open',
 			this.getEventDetail({ preview: false, viewColumn: e.altKey ? BesideViewColumn : undefined }),
 		);
 	}

 	onOpenFileOnRemote(e: Event) {
 		e.preventDefault();
 		this.$emit('file-open-on-remote', this.getEventDetail());
 	onOpenFileOnRemote(e: MouseEvent) {
 		this.$emit(
 			'file-open-on-remote',
 			this.getEventDetail({ preview: false, viewColumn: e.altKey ? BesideViewColumn : undefined }),
 		);
 	}

 	onCompareWorking(e: Event) {
 		e.preventDefault();
 		this.$emit('file-compare-working', this.getEventDetail());
 	onCompareWorking(e: MouseEvent) {
 		this.$emit(
 			'file-compare-working',
 			this.getEventDetail({ preview: false, viewColumn: e.altKey ? BesideViewColumn : undefined }),
 		);
 	}

 	onComparePrevious(e?: Event, showOptions?: TextDocumentShowOptions) {
 		e?.preventDefault();
 		this.$emit('file-compare-previous', this.getEventDetail(showOptions));
 	onComparePrevious(e: ListItemSelectedEvent) {
 		this.$emit('file-compare-previous', this.getEventDetail(e.detail.showOptions));
 	}

 	onMoreActions(e: Event) {
 		e.preventDefault();
 	onMoreActions(_e: MouseEvent) {
 		this.$emit('file-more-actions', this.getEventDetail());
 	}
 }
--- a/src/webviews/apps/shared/components/list/list-container.ts
+++ b/src/webviews/apps/shared/components/list/list-container.ts
@ -1,6 +1,9 @@
 import { css, customElement, FASTElement, html, observable, slotted } from '@microsoft/fast-element';
 import type { FileChangeListItem } from './file-change-list-item';
 import type { ListItem, ListItemSelectedDetail } from './list-item';
 import type { ListItem, ListItemSelectedEvent } from './list-item';

 // Can only import types from 'vscode'
 const BesideViewColumn = -2; /*ViewColumn.Beside*/

 const template = html<ListContainer>`
 	<template role="tree">
@ -69,31 +72,33 @@ export class ListContainer extends FASTElement {
 		this._lastSelected = target;
 	}

 	handleSelected(e: CustomEvent<ListItemSelectedDetail>) {
 	handleSelected(e: ListItemSelectedEvent) {
 		if (!e.target || !e.detail.branch) return;

 		const target = e.target as ListItem;
 		const level = target.getAttribute('level');
 		function getLevel(el: ListItem) {
 			return parseInt(el.getAttribute('level') ?? '0', 10);
 		}

 		const getLevel = (el: ListItem) => parseInt(el.getAttribute('level') ?? '0', 10);
 		const getParent = (el: ListItem) => {
 		function getParent(el: ListItem) {
 			const level = getLevel(el);
 			let prev = el.previousElementSibling;
 			let prev = el.previousElementSibling as ListItem | null;
 			while (prev) {
 				const prevLevel = getLevel(prev as ListItem);
 				if (prevLevel < level) {
 					return prev as ListItem;
 				}
 				prev = prev.previousElementSibling;
 				const prevLevel = getLevel(prev);
 				if (prevLevel < level) return prev;

 				prev = prev.previousElementSibling as ListItem | null;
 			}

 			return undefined;
 		};
 		let nextElement = target.nextElementSibling as ListItem;
 		}

 		const target = e.target as ListItem;
 		const level = getLevel(target);

 		let nextElement = target.nextElementSibling as ListItem | null;
 		while (nextElement) {
 			if (nextElement.getAttribute('level') === level) {
 				break;
 			}
 			if (level == getLevel(nextElement)) break;

 			const parentElement = getParent(nextElement);
 			nextElement.setAttribute('parentexpanded', parentElement?.expanded === false ? 'false' : 'true');
 			nextElement.setAttribute('expanded', e.detail.expanded ? 'true' : 'false');
@ -106,7 +111,10 @@ export class ListContainer extends FASTElement {
 		const target = e.target as ListItem;

 		if (e.key === 'Enter' || e.key === ' ') {
 			target.select(e.key === 'Enter' ? { preserveFocus: false } : undefined);
 			target.select({
 				preserveFocus: e.key !== 'Enter',
 				viewColumn: e.altKey ? BesideViewColumn : undefined,
 			});
 		} else if (e.key === 'ArrowUp') {
 			const $previous: HTMLElement | null = target.previousElementSibling as HTMLElement;
 			$previous?.focus();
--- a/src/webviews/apps/shared/components/list/list-item.ts
+++ b/src/webviews/apps/shared/components/list/list-item.ts
@ -3,17 +3,23 @@ import type { TextDocumentShowOptions } from 'vscode';
 import { numberConverter } from '../converters/number-converter';
 import '../code-icon';

 // Can only import types from 'vscode'
 const BesideViewColumn = -2; /*ViewColumn.Beside*/

 declare global {
 	interface HTMLElementEventMap {
 		selected: CustomEvent;
 	}
 }

 export interface ListItemSelectedDetail {
 export type ListItemSelectedEvent = CustomEvent<ListItemSelectedEventDetail>;

 export interface ListItemSelectedEventDetail {
 	tree: boolean;
 	branch: boolean;
 	expanded: boolean;
 	level: number;
 	showOptions?: TextDocumentShowOptions;
 }

 const template = html<ListItem>`
@ -22,7 +28,13 @@ const template = html`
 		aria-expanded="${x => (x.expanded === true ? 'true' : 'false')}"
 		aria-hidden="${x => x.isHidden}"
 	>
 		<button id="item" class="item" type="button" @click="${(x, c) => x.onItemClick(c.event)}">
 		<button
 			id="item"
 			class="item"
 			type="button"
 			@click="${(x, c) => x.onItemClick(c.event as MouseEvent)}"
 			@dblclick="${(x, c) => x.onDblItemClick(c.event as MouseEvent)}"
 		>
 			${repeat(
 				x => x.treeLeaves,
 				html<ListItem>`<span class="node node--connector"><code-icon name="blank"></code-icon></span>`,
@ -216,11 +228,18 @@ export class ListItem extends FASTElement {
 		return 'false';
 	}

 	onItemClick(_e: Event) {
 		this.select();
 	onItemClick(e: MouseEvent) {
 		this.select(e.altKey ? { viewColumn: BesideViewColumn } : undefined);
 	}

 	onDblItemClick(e: MouseEvent) {
 		this.select({
 			preview: false,
 			viewColumn: e.altKey || e.ctrlKey || e.metaKey ? BesideViewColumn : undefined,
 		});
 	}

 	select(_showOptions?: TextDocumentShowOptions, quiet = false) {
 	select(showOptions?: TextDocumentShowOptions, quiet = false) {
 		this.$emit('select');

 		// TODO: this needs to be implemented
@ -236,7 +255,8 @@ export class ListItem extends FASTElement {
 					branch: this.branch,
 					expanded: this.expanded,
 					level: this.level,
 				});
 					showOptions: showOptions,
 				} satisfies ListItemSelectedEventDetail);
 			});
 		}
 	}