About the Outline widget placement

#1

Hi all, it is possible to have an outline widget placed in Explorer like in VSCode:

grafik
grafik442×623 8.58 KB
?

As far as I see, by default the Outline Widget opens as a separate widget in Theia’s Activity bar.

#2

@kitzanie thank you for the discussion, by default the outline-view cannot be placed within the explorer as it is a dedicated view as you pointed out. The outline-view was initially implemented as a dedicated view to allow more flexibility with where it can be moved and allow more complex layouts.

If you require moving the outline-view you’ll need to perform the customizations for your downstream product. For reference the explorer-view is a container which contains different tree-widgets (ex: folder, open editors). You can take a look at it’s source code to better understand how it was implemented as such.

#3

@vince-fugnitto thank you for the tip. I looked into the explorer-view and wrote an extension to the navigatorWidgetFactory which adds the outline-view.

The code is here:

import { injectable } from '@theia/core/shared/inversify';
import { ViewContainer } from '@theia/core/lib/browser';

import { NavigatorWidgetFactory } from '@theia/navigator/lib/browser';
import { OUTLINE_WIDGET_FACTORY_ID } from '@theia/outline-view/lib/browser/outline-view-contribution';

@injectable()
export class MyNavigatorWidgetFactory extends NavigatorWidgetFactory {
    protected outlineViewWidgetOptions: ViewContainer.Factory.WidgetOptions = {
        order: 2,
        canHide: true,
        initiallyCollapsed: false,
        weight: 80,
        disableDraggingToOtherContainers: false,
        initiallyHidden: false
    };

    async createWidget(): Promise<ViewContainer> {
        const viewContainer = await super.createWidget();
        const outlineViewWidget = await this.widgetManager.getOrCreateWidget(OUTLINE_WIDGET_FACTORY_ID);
        viewContainer.addWidget(outlineViewWidget, this.outlineViewWidgetOptions);
        return viewContainer;
    }
}

and here is the binding:

import { ContainerModule } from '@theia/core/shared/inversify';
import { NavigatorWidgetFactory } from '@theia/navigator/lib/browser';

import { MyNavigatorWidgetFactory } from './my-navigator-widget-factory';

export default new ContainerModule((bind, _unbind, isBound, rebind) => {
    if (isBound(NavigatorWidgetFactory)) {
        rebind(NavigatorWidgetFactory).to(MyNavigatorWidgetFactory).inSingletonScope();
    } else {
        bind(NavigatorWidgetFactory).to(MyNavigatorWidgetFactory).inSingletonScope();
    }
});

Now the outline-view is part of the explorerView, which is great. Unfortunately the view never gets filled. I set breakpoints in outline-view-widget::setOutlineTree and I can observe, that the there is correct data in roots: OutlineSymbolInformationNode[]. But still my outline-view remains empty.

Do you have an idea why that is the case?

Thank you in advance and best regards,
Philipp