Enable single-click and keyboard arrow selection to navigate problem …

…markers Fixes #5003 - the current implementation of the `problems-widget` requires double-clicking nodes in order to navigate to the problems. This is an annoying behavior and inconsistent with vscode where if you single-click a marker the corresponding editor is revealed. The feature works both with single clicking markers, as well as selecting them with the keyboard arrow keys. Signed-off-by: Vincent Fugnitto <[email protected]>
eclipse-theia · Jul 5, 2019 · d76c038 · d76c038
1 parent 20251ea
commit d76c038
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 0 deletions.
diff --git a/packages/markers/src/browser/marker-tree-model.ts b/packages/markers/src/browser/marker-tree-model.ts
@@ -34,4 +34,14 @@ export class MarkerTreeModel extends TreeModelImpl {
     protected getOpenerOptionsByMarker(node: MarkerNode): OpenerOptions | undefined {
         return undefined;
     }
+
+    /**
+     * Reveal the corresponding node at the marker.
+     * @param node {TreeNode} the tree node.
+     */
+    revealNode(node: TreeNode): void {
+        if (MarkerNode.is(node)) {
+            open(this.openerService, node.uri, { ...this.getOpenerOptionsByMarker(node), mode: 'reveal' });
+        }
+    }
 }
diff --git a/packages/markers/src/browser/problem/problem-widget.tsx b/packages/markers/src/browser/problem/problem-widget.tsx
@@ -61,6 +61,14 @@ export class ProblemWidget extends TreeWidget {
         return;
     }
 
+    protected handleClickEvent(node: TreeNode | undefined, event: React.MouseEvent<HTMLElement>): void {
+        if (MarkerNode.is(node)) {
+            this.model.revealNode(node);
+        } else {
+            super.handleClickEvent(node, event);
+        }
+    }
+
     protected handleCopy(event: ClipboardEvent) {
         const uris = this.model.selectedNodes.filter(MarkerNode.is).map(node => node.uri.toString());
         if (uris.length > 0 && event.clipboardData) {
@@ -69,6 +77,26 @@ export class ProblemWidget extends TreeWidget {
         }
     }
 
+    protected handleDown(event: KeyboardEvent): void {
+        const node = this.model.getNextSelectableNode();
+        if (MarkerNode.is(node)) {
+            super.handleDown(event);
+            this.model.revealNode(node);
+        } else {
+            super.handleDown(event);
+        }
+    }
+
+    protected handleUp(event: KeyboardEvent): void {
+        const node = this.model.getPrevSelectableNode();
+        if (MarkerNode.is(node)) {
+            super.handleUp(event);
+            this.model.revealNode(node);
+        } else {
+            super.handleUp(event);
+        }
+    }
+
     protected renderTree(model: TreeModel): React.ReactNode {
         if (MarkerRootNode.is(model.root) && model.root.children.length > 0) {
             return super.renderTree(model);