feat(dev-server): clickable line numbers open in editor

Author: adamdbradley

src/dev-server/dev-client/app-error.ts

@@ -63,12 +63,7 @@ function appendDiagnostic(win: Window, doc: Document, config: d.DevClientConfig,
       fileHeader.title = escapeHtml(diagnostic.absFilePath);
 
       if (canOpenInEditor) {
-        (fileHeader as HTMLAnchorElement).href = '#open-in-editor';
-        fileHeader.addEventListener('click', (ev) => {
-          ev.preventDefault();
-          ev.stopPropagation();
-          openInEditor(win, config, diagnostic);
-        });
+        addOpenInEditor(win, config, fileHeader, diagnostic.absFilePath, diagnostic.lineNumber, diagnostic.columnNumber);
       }
     }
 
@@ -98,15 +93,24 @@ function appendDiagnostic(win: Window, doc: Document, config: d.DevClientConfig,
 
     prepareLines(diagnostic.lines).forEach(l => {
       const tr = doc.createElement('tr');
-      if (l.errorCharStart > -1) {
-        tr.className = 'dev-server-diagnostic-error-line';
+      if (l.errorCharStart > 0) {
+        tr.classList.add('dev-server-diagnostic-error-line');
+      }
+      if (canOpenInEditor) {
+        tr.classList.add('dev-server-diagnostic-open-in-editor');
       }
       table.appendChild(tr);
 
       const tdNum = doc.createElement('td');
       tdNum.className = 'dev-server-diagnostic-blob-num';
-      if (l.lineNumber > -1) {
+      if (l.lineNumber > 0) {
         tdNum.setAttribute('data-line-number', l.lineNumber + '');
+        tdNum.title = escapeHtml(diagnostic.relFilePath) + ', line ' + l.lineNumber;
+
+        if (canOpenInEditor) {
+          const column = l.lineNumber === diagnostic.lineNumber ? diagnostic.columnNumber : 1;
+          addOpenInEditor(win, config, tdNum, diagnostic.absFilePath, l.lineNumber, column);
+        }
       }
       tr.appendChild(tdNum);
 
@@ -121,17 +125,26 @@ function appendDiagnostic(win: Window, doc: Document, config: d.DevClientConfig,
 }
 
 
-function openInEditor(win: Window, config: d.DevClientConfig, diagnostic: d.Diagnostic) {
-  const qs: d.OpenInEditorData = {
-    file: diagnostic.absFilePath,
-    line: diagnostic.lineNumber,
-    column: diagnostic.columnNumber,
-    editor: config.editors[0].id
-  };
-
-  const url = `${OPEN_IN_EDITOR_URL}?${Object.keys(qs).map(k => `${k}=${(qs as any)[k]}`).join('&')}`;
-
-  win.fetch(url);
+function addOpenInEditor(win: Window, config: d.DevClientConfig, elm: HTMLElement, file: string, line: number, column: number) {
+  if (elm.tagName === 'A') {
+    (elm as HTMLAnchorElement).href = '#open-in-editor';
+  }
+  if (typeof column !== 'number' || column < 1) {
+    column = 1;
+  }
+  elm.addEventListener('click', (ev) => {
+    ev.preventDefault();
+    ev.stopPropagation();
+    const qs: d.OpenInEditorData = {
+      file: file,
+      line: line,
+      column: column,
+      editor: config.editors[0].id
+    };
+
+    const url = `${OPEN_IN_EDITOR_URL}?${Object.keys(qs).map(k => `${k}=${(qs as any)[k]}`).join('&')}`;
+    win.fetch(url);
+  });
 }
 
 

src/dev-server/open-in-editor.ts

@@ -48,13 +48,15 @@ async function parseData(devServerConfig: d.DevServerConfig, fs: d.FileSystem, r
 
   if (qs.line != null && !isNaN(qs.line)) {
     data.line = parseInt(qs.line, 10);
-  } else {
+  }
+  if (typeof data.line !== 'number' || data.line < 1) {
     data.line = 1;
   }
 
   if (qs.column != null && !isNaN(qs.column)) {
     data.column = parseInt(qs.column, 10);
-  } else {
+  }
+  if (typeof data.column !== 'number' || data.column < 1) {
     data.column = 1;
   }
 

src/dev-server/static/app-error.css

@@ -149,6 +149,16 @@ td.dev-server-diagnostic-blob-num::before {
   z-index: -1;
 }
 
+.dev-server-diagnostic-open-in-editor td.dev-server-diagnostic-blob-num:hover {
+  cursor: pointer;
+  background-color: #ffffe3 !important;
+  font-weight: bold;
+}
+
+.dev-server-diagnostic-open-in-editor.dev-server-diagnostic-error-line td.dev-server-diagnostic-blob-num:hover {
+  background-color: #ffdada !important;
+}
+
 td.dev-server-diagnostic-blob-code {
   position: relative !important;
   padding-right: 10px !important;