Add open in GitLab in file-viewer

index.html

@@ -18,7 +18,8 @@
     active: true,
     webviewAttributes: {
         nodeintegration: true,
-        webPreferences: 'contextIsolation=false'
+        webPreferences: 'contextIsolation=false',
+        allowpopups: true,
     },
     ready: (tab) => {
         tab.webview.addEventListener('ipc-message', (event) => {

main.js

@@ -44,6 +44,14 @@ app.on('activate', () => {
     }
 });
 
+// allow open external links in webview (electron-tabs) context
+app.on('web-contents-created', (_, webContents) => {
+    webContents.setWindowOpenHandler(({url}) => {
+        shell.openExternal(url);
+        return {action : "deny"};
+    });
+});
+
 ipcMain.on('SETTINGS_CHANGED', (event, electronSettings) => {
     const unsafeRequestsEnabled = store.get('enableUnsafeRequests');
     if (electronSettings && electronSettings.enableUnsafeRequests !== unsafeRequestsEnabled) {

src/app/core/services/gitlab-api/gitlab-www.service.ts

@@ -0,0 +1,16 @@
+import { Injectable } from '@angular/core';
+import { Project } from './models/project';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class GitlabWwwService {
+
+    public openFileUrl(project: Project, file_with_path: string, line?: number): string {
+        let url = `${project.web_url}/-/blob/${project.default_branch}/${file_with_path}`;
+        if (line !== undefined) {
+            url += `#L${line+1}`;
+        }
+        return url;
+    }
+}

src/app/core/services/gitlab-api/models/project.ts

@@ -6,4 +6,5 @@ export interface Project {
     name: string;
     name_with_namespace: string;
     path_with_namespace: string;
+    web_url: string;
 }

src/app/shared/components/file-viewer/file-viewer.component.html

@@ -1,6 +1,14 @@
 <clr-modal [clrModalOpen]="modalOpen" (clrModalOpenChange)="close()" [clrModalSize]="'xl'" [clrModalStaticBackdrop]="false">
     <h3 class="modal-title">
         <app-path-text [path]="filename"></app-path-text>
+        <div class="file-viewer-menu">
+            <div class="btn-group btn-outline-primary btn-icon btn-sm">
+                <a target="_blank" rel="noopener noreferrer" [href]="openGitLabUrl()" class="btn">
+                    GitLab
+                    <clr-icon shape="pop-out"></clr-icon>
+                </a>
+            </div>
+        </div>
         <div class="jump-lines-icons" *ngIf="highlightedRanges.length > 0">
             <span class="jump-counter">{{jumpedToLineIndex + 1}} of {{highlightedRanges.length}}</span>
             <div class="btn-group btn-outline-primary btn-icon btn-sm">

src/app/shared/components/file-viewer/file-viewer.component.scss

@@ -58,6 +58,11 @@ app-path-text {
     margin-bottom: 4px;
 }
 
+.file-viewer-menu {
+    position: absolute;
+    line-height: 0;
+}
+
 .jump-lines-icons {
     position: absolute;
     line-height: 0;

src/app/shared/components/file-viewer/file-viewer.component.ts

@@ -6,6 +6,7 @@ import { AceComponent, AceConfigInterface } from 'ngx-ace-wrapper';
 import { Project } from 'src/app/core/services/gitlab-api/models/project';
 import { SettingsService } from 'src/app/settings/settings.service';
 import { Range } from 'brace';
+import { GitlabWwwService } from 'src/app/core/services/gitlab-api/gitlab-www.service';
 
 import 'brace';
 import 'brace/mode/javascript';
@@ -50,6 +51,7 @@ export class FileViewerComponent extends Modal<FileViewerInitData> implements On
     @ViewChild('ace', { static: true })
     ace: AceComponent;
     aceConfig: AceConfigInterface;
+    aceInitialized = false;
 
     project: Project;
     filename: string;
@@ -62,7 +64,8 @@ export class FileViewerComponent extends Modal<FileViewerInitData> implements On
     highlightedRanges: Range[] = [];
     jumpedToLineIndex = -1;
 
-    constructor(private filesApiService: FilesApiService, private settingsService: SettingsService) {
+    constructor(private filesApiService: FilesApiService, private settingsService: SettingsService,
+        private gitlabWwwService: GitlabWwwService) {
         super();
     }
 
@@ -107,6 +110,11 @@ export class FileViewerComponent extends Modal<FileViewerInitData> implements On
         this.goToHighlight(this.jumpedToLineIndex);
     }
 
+    openGitLabUrl(): string {
+        const {row} = this.provideCursorPosition();
+        return this.gitlabWwwService.openFileUrl(this.project, this.filename, row);
+    }
+
     private goToHighlight(index: number): void {
         const range = this.highlightedRanges[index];
         const ace = this.ace.directiveRef.ace();
@@ -131,6 +139,7 @@ export class FileViewerComponent extends Modal<FileViewerInitData> implements On
             if (this.highlightedRanges.length > 0) {
                 this.goToNextHighlight();
             }
+            this.aceInitialized = true;
         });
     }
 
@@ -142,4 +151,8 @@ export class FileViewerComponent extends Modal<FileViewerInitData> implements On
     private decodeContent(content: string): string {
         return decodeURIComponent(escape(atob(content)));
     }
+
+    private provideCursorPosition(): {row?: number; column?: number} {
+        return this.aceInitialized ? this.ace.directiveRef.ace().getCursorPosition() : {};
+    }
 }