fix #8225: fix debug exception height computation

Signed-off-by: Anton Kosyakov <[email protected]>
eclipse-theia · Aug 17, 2020 · fee75c2 · fee75c2
1 parent af98a8e
commit fee75c2
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 20 deletions.
diff --git a/packages/debug/src/browser/editor/debug-editor-model.ts b/packages/debug/src/browser/editor/debug-editor-model.ts
@@ -175,7 +175,7 @@ export class DebugEditorModel implements Disposable {
 
     protected async toggleExceptionWidget(): Promise<void> {
         const { currentFrame } = this.sessions;
-        if (!currentFrame) {
+        if (!currentFrame || !currentFrame.source || currentFrame.source.uri.toString() !== this.uri.toString()) {
             this.exceptionWidget.hide();
             return;
         }

diff --git a/packages/debug/src/browser/editor/debug-exception-widget.tsx b/packages/debug/src/browser/editor/debug-exception-widget.tsx
@@ -28,6 +28,22 @@ export interface ShowDebugExceptionParams {
     column: number
 }
 
+export class DebugExceptionMonacoEditorZoneWidget extends MonacoEditorZoneWidget {
+
+    protected computeContainerHeight(zoneHeight: number): {
+        height: number,
+        frameWidth: number
+    } {
+        // reset height to match it to the content
+        this.containerNode.style.height = 'initial';
+        const height = this.containerNode.offsetHeight;
+        const result = super.computeContainerHeight(zoneHeight);
+        result.height = height;
+        return result;
+    }
+
+}
+
 @injectable()
 export class DebugExceptionWidget implements Disposable {
 
@@ -40,45 +56,52 @@ export class DebugExceptionWidget implements Disposable {
 
     @postConstruct()
     protected async init(): Promise<void> {
-        this.toDispose.push(this.zone = new MonacoEditorZoneWidget(this.editor.getControl()));
+        this.toDispose.push(this.zone = new DebugExceptionMonacoEditorZoneWidget(this.editor.getControl()));
         this.zone.containerNode.classList.add('theia-debug-exception-widget');
         this.toDispose.push(Disposable.create(() => ReactDOM.unmountComponentAtNode(this.zone.containerNode)));
+        this.toDispose.push(this.editor.getControl().onDidLayoutChange(() => this.layout()));
     }
 
     dispose(): void {
         this.toDispose.dispose();
     }
 
     show({ info, lineNumber, column }: ShowDebugExceptionParams): void {
-        this.render(info);
-
-        const fontInfo = this.editor.getControl().getOption(monaco.editor.EditorOption.fontInfo);
-        this.zone.containerNode.style.fontSize = `${fontInfo.fontSize}px`;
-        this.zone.containerNode.style.lineHeight = `${fontInfo.lineHeight}px`;
-
-        if (lineNumber !== undefined && column !== undefined) {
-            const afterLineNumber = lineNumber;
-            const afterColumn = column;
-            const heightInLines = 0;
-            this.zone.show({ showFrame: true, afterLineNumber, afterColumn, heightInLines, frameWidth: 1 });
-        }
+        this.render(info, () => {
+            const fontInfo = this.editor.getControl().getOption(monaco.editor.EditorOption.fontInfo);
+            this.zone.containerNode.style.fontSize = `${fontInfo.fontSize}px`;
+            this.zone.containerNode.style.lineHeight = `${fontInfo.lineHeight}px`;
+
+            if (lineNumber !== undefined && column !== undefined) {
+                const afterLineNumber = lineNumber;
+                const afterColumn = column;
+                this.zone.show({ showFrame: true, afterLineNumber, afterColumn, heightInLines: 0, frameWidth: 1 });
+            }
+
+            this.layout();
+        });
     }
 
     hide(): void {
         this.zone.hide();
     }
 
-    protected render(info: DebugExceptionInfo): void {
+    protected render(info: DebugExceptionInfo, cb: () => void): void {
         const stackTrace = info.details && info.details.stackTrace;
         ReactDOM.render(<React.Fragment>
             <div className='title'>{info.id ? `Exception has occurred: ${info.id}` : 'Exception has occurred.'}</div>
             {info.description && <div className='description'>{info.description}</div>}
             {stackTrace && <div className='stack-trace'>{stackTrace}</div>}
-        </React.Fragment>, this.zone.containerNode, () => {
-            const lineHeight = this.editor.getControl().getOption(monaco.editor.EditorOption.lineHeight);
-            const heightInLines = Math.ceil(this.zone.containerNode.offsetHeight / lineHeight);
-            this.zone.layout(heightInLines);
-        });
+        </React.Fragment>, this.zone.containerNode, cb);
+    }
+
+    protected layout(): void {
+        // reset height to match it to the content
+        this.zone.containerNode.style.height = 'initial';
+
+        const lineHeight = this.editor.getControl().getOption(monaco.editor.EditorOption.lineHeight);
+        const heightInLines = Math.ceil(this.zone.containerNode.offsetHeight / lineHeight);
+        this.zone.layout(heightInLines);
     }
 
 }