fixup! Apply Timeline plugin API

packages/plugin-ext/src/common/plugin-api-rpc.ts

@@ -78,7 +78,7 @@ import { QuickTitleButton } from '@theia/core/lib/common/quick-open-model';
 import * as files from '@theia/filesystem/lib/common/files';
 import { BinaryBuffer } from '@theia/core/lib/common/buffer';
 import { ResourceLabelFormatter } from '@theia/core/lib/common/label-protocol';
-import {
+import type {
     InternalTimelineOptions,
     Timeline,
     TimelineChangeEvent,

packages/plugin-ext/src/plugin/timeline.ts

@@ -19,7 +19,7 @@ import { Disposable } from './types-impl';
 import { PLUGIN_RPC_CONTEXT } from '../common';
 import { DisposableCollection } from '@theia/core/lib/common/disposable';
 import { CommandRegistryImpl } from './command-registry';
-import {
+import type {
     InternalTimelineOptions,
     Timeline,
     TimelineItem,

packages/timeline/src/browser/timeline-contribution.ts

@@ -16,26 +16,21 @@
 
 import { injectable, inject } from 'inversify';
 import {
-    FrontendApplicationContribution,
-    FrontendApplication,
     ViewContainer,
     WidgetManager,
     Widget,
     ApplicationShell,
     Navigatable
 } from '@theia/core/lib/browser';
-import { FileNavigatorContribution } from '@theia/navigator/lib/browser/navigator-contribution';
 import { EXPLORER_VIEW_CONTAINER_ID } from '@theia/navigator/lib/browser';
 import { TimelineWidget } from './timeline-widget';
 import { TimelineService } from './timeline-service';
-import { Command, CommandRegistry } from '@theia/core/lib/common';
-import { TabBarToolbarRegistry } from '@theia/core/lib/browser/shell/tab-bar-toolbar';
+import { Command, CommandContribution, CommandRegistry } from '@theia/core/lib/common';
+import { TabBarToolbarContribution, TabBarToolbarRegistry } from '@theia/core/lib/browser/shell/tab-bar-toolbar';
 
 @injectable()
-export class TimelineContribution implements FrontendApplicationContribution {
+export class TimelineContribution implements CommandContribution, TabBarToolbarContribution {
 
-    @inject(FileNavigatorContribution)
-    protected readonly explorer: FileNavigatorContribution;
     @inject(WidgetManager)
     protected readonly widgetManager: WidgetManager;
     @inject(TimelineService)
@@ -50,61 +45,67 @@ export class TimelineContribution implements FrontendApplicationContribution {
     public static readonly LOAD_MORE_COMMAND: Command = {
         id: 'timeline-load-more'
     };
-
-    async onDidInitializeLayout?(app: FrontendApplication): Promise<void> {
-        let timeline: TimelineWidget;
+    private readonly toolbarItem = {
+        id: 'timeline-refresh-toolbar-item',
+        command: 'timeline-refresh',
+        tooltip: 'Refresh',
+        icon: 'fa fa-refresh'
+    };
+    registerToolbarItems(registry: TabBarToolbarRegistry): void {
+        registry.registerItem(this.toolbarItem);
+    }
+    registerCommands(commands: CommandRegistry): void {
         const attachTimeline = async (explorer: Widget) => {
+            const timeline = await this.widgetManager.getOrCreateWidget(TimelineWidget.ID);
             if (explorer instanceof ViewContainer && explorer.getTrackableWidgets().indexOf(timeline) === -1) {
-                timeline = await this.widgetManager.getOrCreateWidget(TimelineWidget.ID);
                 explorer.addWidget(timeline, { initiallyCollapsed: true });
             }
         };
-        this.widgetManager.onDidCreateWidget(async event => {
+        this.widgetManager.onWillCreateWidget(async event => {
            if (event.widget.id === EXPLORER_VIEW_CONTAINER_ID) {
-               attachTimeline(event.widget);
+               event.waitUntil(attachTimeline(event.widget));
            }
         });
         this.timelineService.onDidChangeProviders( async event => {
             const explorer = await this.widgetManager.getWidget(EXPLORER_VIEW_CONTAINER_ID);
             if (explorer && event.added && event.added.length > 0) {
                 attachTimeline(explorer);
             } else if (event.removed && this.timelineService.getSources().length === 0) {
-                timeline.close();
-            }
-        });
-        const toolbarItem = {
-            id: 'timeline-refresh-toolbar-item',
-            command: 'timeline-refresh',
-            tooltip: 'Refresh',
-            icon: 'fa fa-refresh'
-        };
-        this.commandRegistry.registerCommand({ id: toolbarItem.command }, {
-            execute: widget => this.checkWidget(widget, () => {
+                const timeline = await this.widgetManager.getWidget(TimelineWidget.ID);
                 if (timeline) {
-                    timeline.update();
+                    timeline.close();
                 }
-            }),
-            isEnabled: widget => this.checkWidget(widget, () => true),
-            isVisible: widget => this.checkWidget(widget, () => true)
+            }
         });
-        let navigable: Navigatable;
+        let navigableId: string;
         this.shell.onDidChangeCurrentWidget(event => {
             const oldValue = event.oldValue;
             if (oldValue && Navigatable.is(oldValue)) {
-                navigable = oldValue;
+                navigableId = oldValue.id;
             }
         });
-        this.commandRegistry.registerCommand(TimelineContribution.LOAD_MORE_COMMAND, {
-            execute: () => {
-                if (navigable) {
-                    const uri = navigable.getResourceUri();
-                    if (uri) {
+        commands.registerCommand(TimelineContribution.LOAD_MORE_COMMAND, {
+            execute: async () => {
+                const widget = this.shell.getWidgetById(navigableId);
+                if (Navigatable.is(widget)) {
+                    const uri = widget.getResourceUri();
+                    const timeline = await this.widgetManager.getWidget<TimelineWidget>(TimelineWidget.ID);
+                    if (uri && timeline) {
                         timeline.loadTimeline(uri, false);
                     }
                 }
             }
         });
-        this.tabBarToolbar.registerItem(toolbarItem);
+        commands.registerCommand({ id: this.toolbarItem.command }, {
+            execute: widget => this.checkWidget(widget, async () => {
+                const timeline = await this.widgetManager.getWidget(TimelineWidget.ID);
+                if (timeline) {
+                    timeline.update();
+                }
+            }),
+            isEnabled: widget => this.checkWidget(widget, () => true),
+            isVisible: widget => this.checkWidget(widget, () => true)
+        });
     }
 
     private checkWidget<T>(widget: Widget, cb: () => T): T | false {

packages/timeline/src/browser/timeline-frontend-module.ts

@@ -21,7 +21,6 @@ import { TimelineWidget } from './timeline-widget';
 import { TimelineTreeWidget } from './timeline-tree-widget';
 import {
     createTreeContainer,
-    FrontendApplicationContribution,
     TreeModel,
     TreeModelImpl,
     TreeWidget
@@ -32,10 +31,13 @@ import { TimelineContextKeyService } from './timeline-context-key-service';
 import { TimelineContribution } from './timeline-contribution';
 
 import '../../src/browser/style/index.css';
+import { CommandContribution } from '@theia/core/lib/common';
+import { TabBarToolbarContribution } from '@theia/core/lib/browser/shell/tab-bar-toolbar';
 
 export default new ContainerModule(bind => {
     bind(TimelineContribution).toSelf().inSingletonScope();
-    bind(FrontendApplicationContribution).toService(TimelineContribution);
+    bind(CommandContribution).toService(TimelineContribution);
+    bind(TabBarToolbarContribution).toService(TimelineContribution);
 
     bind(TimelineContextKeyService).toSelf().inSingletonScope();
     bind(TimelineService).toSelf().inSingletonScope();