Collapse panel on toggle view

examples/api-tests/src/browser-utils.spec.js

@@ -0,0 +1,53 @@
+/********************************************************************************
+ * Copyright (C) 2020 TypeFox and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+
+// @ts-check
+describe('animationFrame', function () {
+    const { assert } = chai;
+    const { animationFrame } = require('@theia/core/lib/browser/browser');
+
+    class FrameCounter {
+        constructor() {
+            this.count = 0;
+            this.stop = false;
+            this.run();
+        }
+        run() {
+            requestAnimationFrame(this.nextFrame.bind(this));
+        }
+        nextFrame() {
+            this.count++;
+            if (!this.stop) {
+                this.run();
+            }
+        }
+    }
+
+    it('should resolve after one frame', async () => {
+        const counter = new FrameCounter();
+        await animationFrame();
+        counter.stop = true;
+        assert.equal(counter.count, 1);
+    });
+
+    it('should resolve after the given number of frames', async () => {
+        const counter = new FrameCounter();
+        await animationFrame(10);
+        counter.stop = true;
+        assert.equal(counter.count, 10);
+    });
+
+});

examples/api-tests/src/views.spec.js

@@ -23,19 +23,21 @@ describe('Views', function () {
     const { FileNavigatorContribution } = require('@theia/navigator/lib/browser/navigator-contribution');
     const { ScmContribution } = require('@theia/scm/lib/browser/scm-contribution');
     const { OutlineViewContribution } = require('@theia/outline-view/lib/browser/outline-view-contribution');
+    const { ProblemContribution } = require('@theia/markers/lib/browser/problem/problem-contribution');
 
     /** @type {import('inversify').Container} */
     const container = window['theia'].container;
     const shell = container.get(ApplicationShell);
     const navigatorContribution = container.get(FileNavigatorContribution);
     const scmContribution = container.get(ScmContribution);
     const outlineContribution = container.get(OutlineViewContribution);
+    const problemContribution = container.get(ProblemContribution);
 
     before(() => {
         shell.leftPanelHandler.collapse();
     });
 
-    for (const contribution of [navigatorContribution, scmContribution, outlineContribution]) {
+    for (const contribution of [navigatorContribution, scmContribution, outlineContribution, problemContribution]) {
         it(`should toggle ${contribution.viewLabel}`, async () => {
             let view = await contribution.closeView();
             if (view) {
@@ -53,8 +55,8 @@ describe('Views', function () {
 
             view = await contribution.toggleView();
             assert.notEqual(view, undefined);
-            assert.isUndefined(shell.getAreaFor(view));
-            assert.isUndefined(shell.getTabBarFor(view));
+            assert.equal(shell.getAreaFor(view), contribution.defaultViewOptions.area);
+            assert.isDefined(shell.getTabBarFor(view));
             assert.isFalse(view.isVisible);
             assert.notEqual(view, shell.activeWidget);
         });

packages/core/src/browser/browser.ts

@@ -35,6 +35,24 @@ export const isNative = typeof (window as any).process !== 'undefined';
 // tslint:disable-next-line:no-any
 export const isBasicWasmSupported = typeof (window as any).WebAssembly !== 'undefined';
 
+/**
+ * Resolves after the next animation frame if no parameter is given,
+ * or after the given number of animation frames.
+ */
+export function animationFrame(n: number = 1): Promise<void> {
+    return new Promise(resolve => {
+        function frameFunc(): void {
+            if (n <= 0) {
+                resolve();
+            } else {
+                n--;
+                requestAnimationFrame(frameFunc);
+            }
+        }
+        frameFunc();
+    });
+}
+
 /**
  * Parse a magnitude value (e.g. width, height, left, top) from a CSS attribute value.
  * Returns the given default value (or undefined) if the value cannot be determined,

packages/core/src/browser/frontend-application.ts

@@ -22,7 +22,7 @@ import { Widget } from './widgets';
 import { ApplicationShell } from './shell/application-shell';
 import { ShellLayoutRestorer, ApplicationShellLayoutMigrationError } from './shell/shell-layout-restorer';
 import { FrontendApplicationStateService } from './frontend-application-state';
-import { preventNavigation, parseCssTime } from './browser';
+import { preventNavigation, parseCssTime, animationFrame } from './browser';
 import { CorePreferences } from './core-preferences';
 
 /**
@@ -125,7 +125,7 @@ export class FrontendApplication {
 
         const host = await this.getHost();
         this.attachShell(host);
-        await new Promise(resolve => requestAnimationFrame(() => resolve()));
+        await animationFrame();
         this.stateService.state = 'attached_shell';
 
         await this.initializeLayout();

packages/core/src/browser/shell/application-shell.ts

@@ -24,6 +24,7 @@ import {
 import { Message } from '@phosphor/messaging';
 import { IDragEvent } from '@phosphor/dragdrop';
 import { RecursivePartial, MaybePromise, Event as CommonEvent, DisposableCollection, Disposable } from '../../common';
+import { animationFrame } from '../browser';
 import { Saveable } from '../saveable';
 import { StatusBarImpl, StatusBarEntry, StatusBarAlignment } from '../status-bar/status-bar';
 import { TheiaDockPanel, BOTTOM_AREA_ID, MAIN_AREA_ID } from './theia-dock-panel';
@@ -1198,17 +1199,14 @@ export class ApplicationShell extends Widget {
      * Collapse the named side panel area. This makes sure that the panel is hidden,
      * increasing the space that is available for other shell areas.
      */
-    collapsePanel(area: ApplicationShell.Area): void {
+    collapsePanel(area: ApplicationShell.Area): Promise<void> {
         switch (area) {
             case 'bottom':
-                this.collapseBottomPanel();
-                break;
+                return this.collapseBottomPanel();
             case 'left':
-                this.leftPanelHandler.collapse();
-                break;
+                return this.leftPanelHandler.collapse();
             case 'right':
-                this.rightPanelHandler.collapse();
-                break;
+                return this.rightPanelHandler.collapse();
             default:
                 throw new Error('Area cannot be collapsed: ' + area);
         }
@@ -1218,18 +1216,20 @@ export class ApplicationShell extends Widget {
      * Collapse the bottom panel. All contained widgets are hidden, but not closed.
      * They can be restored by calling `expandBottomPanel`.
      */
-    protected collapseBottomPanel(): void {
+    protected collapseBottomPanel(): Promise<void> {
         const bottomPanel = this.bottomPanel;
-        if (!bottomPanel.isHidden) {
-            if (this.bottomPanelState.expansion === SidePanel.ExpansionState.expanded) {
-                const size = this.getBottomPanelSize();
-                if (size) {
-                    this.bottomPanelState.lastPanelSize = size;
-                }
+        if (bottomPanel.isHidden) {
+            return Promise.resolve();
+        }
+        if (this.bottomPanelState.expansion === SidePanel.ExpansionState.expanded) {
+            const size = this.getBottomPanelSize();
+            if (size) {
+                this.bottomPanelState.lastPanelSize = size;
             }
-            this.bottomPanelState.expansion = SidePanel.ExpansionState.collapsed;
-            bottomPanel.hide();
         }
+        this.bottomPanelState.expansion = SidePanel.ExpansionState.collapsed;
+        bottomPanel.hide();
+        return animationFrame();
     }
 
     /**

packages/core/src/browser/shell/side-panel-handler.ts

@@ -22,6 +22,7 @@ import { Drag } from '@phosphor/dragdrop';
 import { AttachedProperty } from '@phosphor/properties';
 import { TabBarRendererFactory, TabBarRenderer, SHELL_TABBAR_CONTEXT_MENU, SideTabBar } from './tab-bars';
 import { SplitPositionHandler, SplitPositionOptions } from './split-panels';
+import { animationFrame } from '../browser';
 import { FrontendApplicationStateService } from '../frontend-application-state';
 import { TheiaDockPanel } from './theia-dock-panel';
 import { SidePanelToolbar } from './side-panel-toolbar';
@@ -339,13 +340,14 @@ export class SidePanelHandler {
     /**
      * Collapse the sidebar so no items are expanded.
      */
-    collapse(): void {
+    collapse(): Promise<void> {
         if (this.tabBar.currentTitle) {
             // tslint:disable-next-line:no-null-keyword
             this.tabBar.currentTitle = null;
         } else {
             this.refresh();
         }
+        return animationFrame();
     }
 
     /**

packages/core/src/browser/shell/view-contribution.ts

@@ -108,8 +108,23 @@ export abstract class AbstractViewContribution<T extends Widget> implements Comm
             };
             await shell.addWidget(widget, widgetArgs);
         } else if (args.toggle && area && shell.isExpanded(area) && tabBar.currentTitle === widget.title) {
-            // The widget is attached and visible, so close it (toggle)
-            await this.closeView();
+            // The widget is attached and visible, so collapse the containing panel (toggle)
+            switch (area) {
+                case 'left':
+                case 'right':
+                    await shell.collapsePanel(area);
+                    break;
+                case 'bottom':
+                    // Don't collapse the bottom panel if it's currently split
+                    if (shell.bottomAreaTabBars.length === 1) {
+                        await shell.collapsePanel('bottom');
+                    }
+                    break;
+                default:
+                    // The main area cannot be collapsed, so close the widget
+                    await this.closeView();
+            }
+            return this.widget;
         }
         if (widget.isAttached && args.activate) {
             await shell.activateWidget(this.viewId);

packages/core/src/browser/view-container.ts

@@ -954,15 +954,15 @@ export class ViewContainerPart extends BaseWidget {
     }
 
     protected onBeforeHide(msg: Message): void {
-        if (this.wrapped.isAttached && this.collapsed) {
+        if (this.wrapped.isAttached && !this.collapsed) {
             MessageLoop.sendMessage(this.wrapped, msg);
         }
         super.onBeforeShow(msg);
     }
 
     protected onAfterHide(msg: Message): void {
         super.onAfterHide(msg);
-        if (this.wrapped.isAttached && this.collapsed) {
+        if (this.wrapped.isAttached && !this.collapsed) {
             MessageLoop.sendMessage(this.wrapped, msg);
         }
     }