Add repo file tree item link behavior

web_src/js/components/ViewFileTree.vue

@@ -37,8 +37,12 @@ async function loadViewContent(url: string) {
   document.querySelector('.repo-view-content').innerHTML = await response.text();
 }
 
-async function navigateTreeView(treePath: string) {
+async function navigateTreeView(treePath: string, newTab?: boolean) {
   const url = `${props.repoLink}/src/${props.currentRefNameSubURL}/${pathEscapeSegments(treePath)}`;
+  if (newTab) {
+    window.open(url, '_blank');
+    return;
+  }
   window.history.pushState({treePath, url}, null, url);
   selectedItem.value = treePath;
   await loadViewContent(url);

web_src/js/components/ViewFileTreeItem.vue

@@ -14,7 +14,7 @@ type Item = {
 
 const props = defineProps<{
   item: Item,
-  navigateViewContent:(treePath: string) => void,
+  navigateViewContent:(treePath: string, newTab?: boolean) => void,
   loadChildren:(treePath: string, subPath?: string) => Promise<Item[]>,
   selectedItem?: string,
 }>();
@@ -40,8 +40,12 @@ const doLoadDirContent = () => {
   props.navigateViewContent(props.item.fullPath);
 };
 
-const doLoadFileContent = () => {
-  props.navigateViewContent(props.item.fullPath);
+const doLoadFileContent = (event: MouseEvent) => {
+  // open the file in a new tab if either
+  // - the auxiliary button (usually the mouse wheel button) is the origin of the click
+  // - the ctrl key was pressed while clicking
+  const openNewTab = event.button === 1 || event.ctrlKey;
+  props.navigateViewContent(props.item.fullPath, openNewTab);
 };
 
 const doGotoSubModule = () => {
@@ -68,6 +72,7 @@ const doGotoSubModule = () => {
     :class="{'selected': selectedItem === item.fullPath}"
     :title="item.entryName"
     @click.stop="doLoadFileContent"
+    @click.middle.stop="doLoadFileContent"
   >
     <!-- symlink -->
     <div class="item-content">
@@ -81,6 +86,7 @@ const doGotoSubModule = () => {
     :class="{'selected': selectedItem === item.fullPath}"
     :title="item.entryName"
     @click.stop="doLoadFileContent"
+    @click.middle.stop="doLoadFileContent"
   >
     <!-- file -->
     <div class="item-content">
@@ -94,6 +100,7 @@ const doGotoSubModule = () => {
     :class="{'selected': selectedItem === item.fullPath}"
     :title="item.entryName"
     @click.stop="doLoadDirContent"
+    @click.middle.stop="doLoadFileContent"
   >
     <!-- directory -->
     <div class="item-toggle">