I want to remove Outline Widget from right panel and Selection menu from top menu

#1

Hi All,

I would like to remove Outline Widget from right panel and Selection menu from top menu

How can I remove it, I am not using in my project and would like to remove it, if not possible atleast disable it so no one can accidently open it.

Thanks in advance for you all for quick support.

#2

@gauravthorath I haven’t tested it, but it should be enough to unbind the OutlineViewContribution from the @theia/outline-view package in your own frontend module.

#3

You can also try via FilterContribution. I’ve used it to filter out the debug console like this:

registry.addFilters("*", [
    (toTest: any) => {
        if (typeof toTest === "object" && toTest.viewId === "debug-console") return false;
        return true;
    }
]);
#5

I have following code related to this:

import { injectable } from "@theia/core/shared/inversify";
import { CommandContribution, ContributionFilterRegistry, FilterContribution, MenuContribution } from "@theia/core";
import { FrontendApplicationContribution, KeybindingContribution, WidgetFactory } from "@theia/core/lib/browser";
import { TabBarToolbarContribution } from "@theia/core/lib/browser/shell/tab-bar-toolbar";

@injectable()
// Add contribution interface to be implemented, e.g. "XYZExtensionContribution implements CommandContribution"
export class XYZExtensionContribution implements FilterContribution {
  registerContributionFilters(registry: ContributionFilterRegistry): void {
    registry.addFilters(
      [CommandContribution, MenuContribution, KeybindingContribution, FrontendApplicationContribution, TabBarToolbarContribution],
      [
        (contribution) => {
          const shouldBeFiltered = ["OutlineViewContribution", "ProblemContribution"].includes(contribution.constructor.name);

          if (!shouldBeFiltered) {
            // log remaining contributions
            console.log(contribution.constructor.name);
          }

          return !shouldBeFiltered;
        },
      ]
    );

    registry.addFilters(
      [WidgetFactory],
      [
        (contribution) => {
          // @ts-ignore
          console.log(contribution.id);

          return true;
        },
      ]
    );
  }
}

and then XYZExtensionContribution is referred in ContainerModule

/**
 * Generated using theia-extension-generator
 */
import { FilterContribution } from "@theia/core";
import { ContainerModule } from "@theia/core/shared/inversify";
import { XYZExtensionContribution } from "./xyz-extension-contribution";

export default new ContainerModule((bind) => {
  bind(FilterContribution).to(XYZExtensionContribution);
});

and then ContainerModule is referred in

export default new ContainerModule((bind: interfaces.Bind, unbind: interfaces.Unbind, isBound: interfaces.IsBound, rebind: interfaces.Rebind) => {
  initConfig().then();
  bind(FrontendApplicationContribution).to(XYZApiService).inSingletonScope();
  |

  |

My custom react modules are added here.

I have even added console log statement in registerContributionFilters but its not logging.

Please let me know if I need to check anything else ?

#6

Any hint in this regard will be appreciated. with above code its not disabling the “OutlineViewContribution”.

#7

use className to filter the contributions works for me

  registry.addFilters('*', [
            filterClassName(name => name !== 'OutlineViewContribution')
])

function filterClassName(filter: Filter<string>): Filter<Object> {
    return object => {
        const className = object?.constructor?.name;
        return className
            ? filter(className)
            : false;
    };
}
#8

This works for me:

 registerContributionFilters(registry: ContributionFilterRegistry): void {
        registry.addFilters("*", [
            (toTest: any) => {
                if (typeof toTest === "object" && toTest.viewId === "outline-view") return false;
                return true;
            }
        ]);
    }

If it still doesn’t work, make sure that your container modules are registered in your package.json.

#9

@gauravthorath Did that help?

#10

No, It did not work for me. I even not getting logs added like below:
(toTest: any) => {
console.log(toTest);
if (typeof toTest === “object” && toTest.viewId === “outline-view”) return false;
return true;
}

May be I am missing something, which I am not getting.

#11

And it worked! with below:

registry.addFilters(
[WidgetFactory],
[
(contribution) => {
// @ts-ignore
console.log(contribution.id);
// @ts-ignore
if (contribution.id === “outline-view”) return false;
return true;
},
]
);

Thank you guys

1 Like