outline: add 'expand-all' toolbar item

The commit adds support for the `expand-all` toolbar item for the
`outline-view` in order to expand rendered nodes. The changes mean that
the toolbar item for `collapse-all` and `expand-all` will be toggleable
based on the state of the view.

Signed-off-by: vince-fugnitto <[email protected]>

packages/outline-view/src/browser/outline-view-contribution.ts

@@ -32,13 +32,20 @@ export const OUTLINE_WIDGET_FACTORY_ID = 'outline-view';
  */
 export namespace OutlineViewCommands {
     /**
-     * Command which collapses all nodes
-     * from the `outline-view` tree.
+     * Command which collapses all nodes from the `outline-view` tree.
      */
     export const COLLAPSE_ALL: Command = {
         id: 'outlineView.collapse.all',
         iconClass: codicon('collapse-all')
     };
+
+    /**
+     * Command which expands all nodes from the `outline-view` tree.
+     */
+    export const EXPAND_ALL: Command = {
+        id: 'outlineView.expand.all',
+        iconClass: codicon('expand-all')
+    };
 }
 
 @injectable()
@@ -66,18 +73,33 @@ export class OutlineViewContribution extends AbstractViewContribution<OutlineVie
     override registerCommands(commands: CommandRegistry): void {
         super.registerCommands(commands);
         commands.registerCommand(OutlineViewCommands.COLLAPSE_ALL, {
-            isEnabled: widget => this.withWidget(widget, () => true),
-            isVisible: widget => this.withWidget(widget, () => true),
+            isEnabled: w => this.withWidget(w, () => true),
+            isVisible: w => this.withWidget(w, widget => !widget.model.areNodesCollapsed()),
             execute: () => this.collapseAllItems()
         });
+        commands.registerCommand(OutlineViewCommands.EXPAND_ALL, {
+            isEnabled: w => this.withWidget(w, () => true),
+            isVisible: w => this.withWidget(w, widget => widget.model.areNodesCollapsed()),
+            execute: () => this.expandAllItems()
+        });
     }
 
-    registerToolbarItems(toolbar: TabBarToolbarRegistry): void {
+    async registerToolbarItems(toolbar: TabBarToolbarRegistry): Promise<void> {
+        const widget = await this.widget;
+        const onDidChange = widget.onDidUpdate;
         toolbar.registerItem({
             id: OutlineViewCommands.COLLAPSE_ALL.id,
             command: OutlineViewCommands.COLLAPSE_ALL.id,
             tooltip: nls.localizeByDefault('Collapse All'),
-            priority: 0
+            priority: 0,
+            onDidChange
+        });
+        toolbar.registerItem({
+            id: OutlineViewCommands.EXPAND_ALL.id,
+            command: OutlineViewCommands.EXPAND_ALL.id,
+            tooltip: nls.localizeByDefault('Expand All'),
+            priority: 0,
+            onDidChange
         });
     }
 
@@ -92,6 +114,11 @@ export class OutlineViewContribution extends AbstractViewContribution<OutlineVie
         }
     }
 
+    protected async expandAllItems(): Promise<void> {
+        const { model } = await this.widget;
+        model.expandAll(model.root);
+    }
+
     /**
      * Determine if the current widget is the `outline-view`.
      */

packages/outline-view/src/browser/outline-view-tree-model.ts

@@ -49,4 +49,29 @@ export class OutlineViewTreeModel extends TreeModelImpl {
             this.onOpenNodeEmitter.fire(node);
         }
     }
+
+    expandAll(raw?: TreeNode): void {
+        if (CompositeTreeNode.is(raw)) {
+            for (const child of raw.children) {
+                if (ExpandableTreeNode.is(child)) {
+                    this.expandAll(child);
+                }
+            }
+        }
+        if (ExpandableTreeNode.is(raw)) {
+            this.expandNode(raw);
+        }
+    }
+
+    areNodesCollapsed(): boolean {
+        if (CompositeTreeNode.is(this.root)) {
+            for (const child of this.root.children) {
+                if (!ExpandableTreeNode.isCollapsed(child)) {
+                    return false;
+                }
+            }
+        }
+        return true;
+    }
+
 }

packages/outline-view/src/browser/outline-view-widget.tsx

@@ -14,7 +14,7 @@
 // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
 // *****************************************************************************
 
-import { injectable, inject } from '@theia/core/shared/inversify';
+import { injectable, inject, postConstruct } from '@theia/core/shared/inversify';
 import {
     TreeWidget,
     TreeNode,
@@ -29,7 +29,7 @@ import {
 } from '@theia/core/lib/browser';
 import { OutlineViewTreeModel } from './outline-view-tree-model';
 import { Message } from '@theia/core/shared/@phosphor/messaging';
-import { Emitter, isObject, Mutable, UriSelection } from '@theia/core';
+import { Emitter, Event, isObject, Mutable, UriSelection } from '@theia/core';
 import * as React from '@theia/core/shared/react';
 import { Range } from '@theia/core/shared/vscode-languageserver-protocol';
 import URI from '@theia/core/lib/common/uri';
@@ -78,6 +78,9 @@ export class OutlineViewWidget extends TreeWidget {
 
     readonly onDidChangeOpenStateEmitter = new Emitter<boolean>();
 
+    protected readonly onDidUpdateEmitter = new Emitter<void>();
+    readonly onDidUpdate: Event<void> = this.onDidUpdateEmitter.event;
+
     constructor(
         @inject(TreeProps) treeProps: TreeProps,
         @inject(OutlineViewTreeModel) override readonly model: OutlineViewTreeModel,
@@ -93,6 +96,12 @@ export class OutlineViewWidget extends TreeWidget {
         this.addClass('theia-outline-view');
     }
 
+    @postConstruct()
+    protected override init(): void {
+        super.init();
+        this.toDispose.push(this.model.onExpansionChanged(() => this.onDidUpdateEmitter.fire()));
+    }
+
     /**
      * Set the outline tree with the list of `OutlineSymbolInformationNode`.
      * @param roots the list of `OutlineSymbolInformationNode`.