making empty patches focusable

coderibbon-theia/src/browser/coderibbon-theia-commands.ts

@@ -15,9 +15,15 @@ import { CodeRibbonTheiaRibbonStrip } from "./cr-ribbon-strip";
 
 import { crdebug } from "./cr-logger";
 
-export const CodeRibbonHelloWorldCommand = {
-  id: "CodeRibbon.HelloWorld",
-  label: "Hello, CodeRibbon.",
+export const CodeRibbonDebuggingCommands = {
+  helloWorldCommand: {
+    id: "CodeRibbon.HelloWorld",
+    label: "Hello, CodeRibbon.",
+  },
+  // testFuzzyFinderCommand: {
+  //   id: "CodeRibbon.dev.test_ff",
+  //   label: "CodeRibbon Test FuzzyFinder",
+  // },
 };
 
 export const CodeRibbonDevGetPanelCommand = {
@@ -138,14 +144,17 @@ export class CodeRibbonTheiaCommandContribution implements CommandContribution {
   ) {}
 
   registerCommands(registry: CommandRegistry): void {
-    registry.registerCommand(CodeRibbonHelloWorldCommand, {
+    // === NOTE: Debugging section
+    // TODO: only register these in debug mode
+
+    registry.registerCommand(CodeRibbonDebuggingCommands.helloWorldCommand, {
       execute: () => {
         this.messageService.info("CodeRibbon says hello!");
         crdebug("Hello console! CommandContribution:", this);
         // crdebug("CRAS is:", this.cras);
       },
     });
-    // registry.registerCommand(CodeRibbonDevGetPanelCommand, {
+    // registry.registerCommand(CodeRibbonDebuggingCommands.testFuzzyFinderCommand, {
     //   execute: () => {
     //     crdebug();
     //   }

coderibbon-theia/src/browser/coderibbon-theia-frontend-module.ts

@@ -9,38 +9,84 @@ import {
   CommandContribution,
   MenuModelRegistry,
   MessageService,
+  CorePreferences,
 } from "@theia/core/lib/common";
+import { PreferenceContribution } from "@theia/core/lib/common/preferences";
+import { ApplicationShell } from "@theia/core/lib/browser/shell/application-shell";
 import {
-  // FrontendApplicationContribution,
-  // bindViewContribution, WidgetFactory,
+  bindViewContribution,
+  DockPanel,
+  FrontendApplicationContribution,
   KeybindingContribution,
+  WidgetFactory,
+  WidgetManager,
 } from "@theia/core/lib/browser";
-import { PreferenceContribution } from "@theia/core/lib/common/preferences";
-import { ApplicationShell } from "@theia/core/lib/browser/shell/application-shell";
 
 // import { CodeRibbonTheiaRibbonViewContribution } from './coderibbon-theia-ribbon';
 import { CodeRibbonTheiaCommandContribution } from "./coderibbon-theia-commands";
 import { CodeRibbonTheiaMenuContribution } from "./coderibbon-theia-menus";
 import { CodeRibbonTheiaPreferenceSchema } from "./coderibbon-theia-preferences";
 import { CodeRibbonTheiaManager } from "./coderibbon-theia-manager";
-import { CodeRibbonTheiaRibbonPanel } from "./cr-ribbon";
 import { CodeRibbonApplicationShell } from "./cr-application-shell";
+import { CodeRibbonTheiaRibbonPanel } from "./cr-ribbon";
+import { CodeRibbonTheiaPatch } from "./cr-patch";
 import { CodeRibbonTheiaKeybindingContribution } from "./coderibbon-theia-keybinds";
+import {
+  CodeRibbonFuzzyFileOpenerWidget,
+  CodeRibbonFuzzyFileOpenerContribution,
+} from "./cr-fuzzy-file-opener";
 
 import "../../src/browser/style/ribbon.less";
 // temp CSS
 import "../../src/browser/style/debug.less";
+import { crdebug } from "./cr-logger";
+import { TheiaDockPanel } from "@theia/core/lib/browser/shell/theia-dock-panel";
 
 export default new ContainerModule((bind, unbind, isBound, rebind) => {
   bind(CodeRibbonApplicationShell).toSelf().inSingletonScope();
   // get rid of original ApplicationShell:
   // @ts-ignore
   rebind(ApplicationShell).to(CodeRibbonApplicationShell).inSingletonScope();
 
+  // this is how we sneak the inversify container into the non-injectable CR classes
+  // (instead of doing the cheap/unstable window.theia.container workaround)
+  bind(CodeRibbonTheiaRibbonPanel.Factory).toFactory(
+    ({ container }) =>
+      (options: Partial<CodeRibbonTheiaRibbonPanel.IOptions>) => {
+        return new CodeRibbonTheiaRibbonPanel({
+          alignment: "start",
+          direction: "left-to-right",
+          spacing: 0,
+          mode: "multiple-document",
+          container,
+          ...options,
+        });
+      },
+  );
+
   bind(CommandContribution).to(CodeRibbonTheiaCommandContribution);
   bind(MenuContribution).to(CodeRibbonTheiaMenuContribution);
   bind(KeybindingContribution).to(CodeRibbonTheiaKeybindingContribution);
 
+  // crdebug("now binding the CRFFO widget");
+  // CRFFO widget
+  bind(CodeRibbonFuzzyFileOpenerWidget).toSelf();
+  bind(WidgetFactory)
+    .toDynamicValue((ctx) => ({
+      id: CodeRibbonFuzzyFileOpenerWidget.ID,
+      createWidget: () =>
+        ctx.container.get<CodeRibbonFuzzyFileOpenerWidget>(
+          CodeRibbonFuzzyFileOpenerWidget,
+        ),
+    }))
+    .inSingletonScope();
+
+  // opener
+  bindViewContribution(bind, CodeRibbonFuzzyFileOpenerContribution);
+  bind(FrontendApplicationContribution).toService(
+    CodeRibbonFuzzyFileOpenerContribution,
+  );
+
   // TODO fix prefs
   // bind(PreferenceContribution).toConstantValue({
   //   schema: CodeRibbonTheiaPreferenceSchema});

coderibbon-theia/src/browser/coderibbon-theia-menus.ts

@@ -12,12 +12,14 @@ import {
 } from "@theia/core/lib/common";
 
 import {
-  CodeRibbonHelloWorldCommand,
+  CodeRibbonDebuggingCommands,
   CodeRibbonNavigationCommands,
   CodeRibbonManipulationCommands,
   CodeRibbonArrangementCommands,
 } from "./coderibbon-theia-commands";
 
+import { TestOpenFFOCommand } from "./cr-fuzzy-file-opener";
+
 export const CodeRibbonTopMenuPath = [...MAIN_MENU_BAR, "7_coderibbon"];
 export const CodeRibbonNavigationMenu = [
   ...CodeRibbonTopMenuPath,
@@ -38,9 +40,12 @@ export class CodeRibbonTheiaMenuContribution implements MenuContribution {
   registerMenus(menus: MenuModelRegistry): void {
     menus.registerSubmenu(CodeRibbonTopMenuPath, "CodeRibbon");
 
+    // General
+
     menus.registerMenuAction(CodeRibbonTopMenuPath, {
-      commandId: CodeRibbonHelloWorldCommand.id,
-      label: "Say Hello",
+      // commandId: CodeRibbonDebuggingCommands.testFuzzyFinderCommand.id,
+      commandId: TestOpenFFOCommand.id,
+      label: "Test FuzzyFinder",
     });
 
     // Navigation

coderibbon-theia/src/browser/cr-application-shell.ts

@@ -24,7 +24,7 @@ import { FrontendApplicationStateService } from "@theia/core/lib/browser/fronten
 import { CorePreferences } from "@theia/core/lib/common/core-preferences";
 import {
   TheiaDockPanel,
-  BOTTOM_AREA_ID,
+  // BOTTOM_AREA_ID,
   MAIN_AREA_ID,
   // MAXIMIZED_CLASS,
 } from "@theia/core/lib/browser/shell/theia-dock-panel";
@@ -56,10 +56,25 @@ export class CodeRibbonApplicationShell extends ApplicationShell {
   // @ts-expect-error TS2416: Property in type is not assignable to the same property in base type
   override mainPanel: CodeRibbonTheiaRibbonPanel;
 
+  // ApplicationShell only supplies the DockPanel renderer
+  // other constructor requirements are in the factory itself
+  @inject(CodeRibbonTheiaRibbonPanel.Factory)
+  protected readonly ribbonPanelFactory: ({
+    renderer,
+  }: {
+    renderer: DockPanelRenderer;
+  }) => CodeRibbonTheiaRibbonPanel;
+
   /**
    * Create the dock panel in the main shell area.
    *
    * Override the default from using TheiaDockPanel to CodeRibbonTheiaRibbonPanel
+   * this is a modification of:
+   * https://github.com/eclipse-theia/theia/blob/008c8340465f7e42298839881d814863bef0b039/packages/core/src/browser/shell/application-shell.ts#L579-L591
+   * expect to have to update this if the upstream behavior changes
+   *
+   * Q: Why not just override the dockPanelFactory?
+   * A: because it's also used to create the bottom panel & it's not indicated at construction which it will be
    */
   // @ts-expect-error TS2416: Property in type is not assignable to the same property in base type
   override createMainPanel(): CodeRibbonTheiaRibbonPanel {
@@ -91,11 +106,15 @@ export class CodeRibbonApplicationShell extends ApplicationShell {
     // }, this.corePreferences);
 
     // what I want, based on BoxPanel
-    const ribbonPanel = new CodeRibbonTheiaRibbonPanel({
-      alignment: "start",
-      direction: "left-to-right",
-      spacing: 0,
-      mode: "multiple-document",
+    // const ribbonPanel = new CodeRibbonTheiaRibbonPanel({
+    //   alignment: "start",
+    //   direction: "left-to-right",
+    //   spacing: 0,
+    //   mode: "multiple-document",
+    //   renderer,
+    //   // widgetManager: this.widgetManager,
+    // });
+    const ribbonPanel = this.ribbonPanelFactory({
       renderer,
     });
 

coderibbon-theia/src/browser/cr-fuzzy-file-opener.tsx

@@ -0,0 +1,115 @@
+import * as React from "react";
+import {
+  injectable,
+  postConstruct,
+  inject,
+} from "@theia/core/shared/inversify";
+import { AlertMessage } from "@theia/core/lib/browser/widgets/alert-message";
+import { ReactWidget } from "@theia/core/lib/browser/widgets/react-widget";
+import { MessageService } from "@theia/core";
+import { Message, QuickInputService, InputBox } from "@theia/core/lib/browser";
+import { AbstractViewContribution } from "@theia/core/lib/browser";
+import { Command, CommandRegistry } from "@theia/core/lib/common/command";
+import { crdebug } from "./cr-logger";
+
+import { QuickFileSelectService } from "@theia/file-search/lib/browser/quick-file-select-service";
+import { MonacoQuickInputService } from "@theia/monaco/lib/browser/monaco-quick-input-service";
+
+/**
+ * since this is registered in theia's WidgetManager / WidgetFactory it is part of the inversify container (hence injectable)
+ */
+@injectable()
+export class CodeRibbonFuzzyFileOpenerWidget extends ReactWidget {
+  static readonly ID = "coderibbon:fuzzy-file-opener";
+  static readonly LABEL = "CodeRibbon Fuzzy File Finder";
+
+  // protected current_search?: string = undefined;
+  // TODO this should be the monaco input / quick open equivalent
+  // protected inputElement?: HTMLInputElement;
+  protected inputElementRef: React.RefObject<HTMLInputElement>;
+
+  @inject(QuickInputService)
+  protected readonly quickInputService: QuickInputService;
+
+  @inject(QuickFileSelectService)
+  protected readonly quickFileSelectService: QuickFileSelectService;
+
+  @inject(MonacoQuickInputService)
+  protected readonly monacoQuickInputService: MonacoQuickInputService;
+
+  @inject(MessageService)
+  protected readonly messageService!: MessageService;
+
+  @postConstruct()
+  protected init(): void {
+    crdebug("CRFFO postConstruct");
+    this.id = CodeRibbonFuzzyFileOpenerWidget.ID;
+    this.title.label = CodeRibbonFuzzyFileOpenerWidget.LABEL;
+    this.title.caption = CodeRibbonFuzzyFileOpenerWidget.LABEL;
+    this.title.closable = true;
+    this.title.iconClass = "fa fa-window-maximize"; // example widget icon.
+
+    this.inputElementRef = React.createRef();
+    // TODO how?
+    // this.inputBox = this.quickInputService.createInputBox();
+    this.update();
+  }
+
+  activate(): void {
+    this.inputElementRef.current?.focus();
+  }
+
+  render(): React.ReactElement {
+    const header = `Does not work yet. Eventually this should be the same UI as Ctrl-P.`;
+    const show_fuzzy_search: boolean = true;
+    return (
+      <div id="widget-container">
+        <AlertMessage type="INFO" header={header} />
+        {/* <button
+          className="theia-button secondary"
+          title="Display Message"
+          onClick={(_a) => this.displayMessage()}
+        >
+          Display Message
+        </button> */}
+        <input
+          ref={this.inputElementRef}
+          name="search"
+          placeholder="search project files..."
+          autoComplete="off"
+        />
+      </div>
+    );
+  }
+
+  protected displayMessage(): void {
+    this.messageService.info(
+      "Congratulations: My Widget Successfully Created!",
+    );
+  }
+}
+
+export const TestOpenFFOCommand: Command = { id: "coderibbon:test-ffo" };
+
+@injectable()
+export class CodeRibbonFuzzyFileOpenerContribution extends AbstractViewContribution<CodeRibbonFuzzyFileOpenerWidget> {
+  constructor() {
+    super({
+      widgetId: CodeRibbonFuzzyFileOpenerWidget.ID,
+      widgetName: CodeRibbonFuzzyFileOpenerWidget.LABEL,
+      defaultWidgetOptions: { area: "main" },
+      toggleCommandId: TestOpenFFOCommand.id,
+    });
+  }
+
+  registerCommands(commands: CommandRegistry): void {
+    commands.registerCommand(TestOpenFFOCommand, {
+      execute: () => {
+        crdebug("command: TestOpenFFOCommand executes");
+        super.openView({ activate: false, reveal: true });
+      },
+    });
+  }
+
+  // registerMenus(menus:)
+}

coderibbon-theia/src/browser/cr-interfaces.ts

@@ -66,14 +66,6 @@ export namespace RibbonPanel {
      * areas, and those areas can be individually resized by the user.
      */
     | "multiple-document";
-  export interface IOptions {
-    direction?: BoxLayout.Direction; // only horizontal
-    alignment?: BoxLayout.Alignment; // only ...
-    spacing?: number;
-    layout?: CodeRibbonTheiaRibbonLayout;
-    mode: RibbonPanel.Mode;
-    renderer?: DockLayout.IRenderer;
-  }
   export interface ILayoutConfig {
     // TODO actual definition of serializable layout config
     // NOTE probably a sequence of RibbonStrip.ILayoutConfig ???