[Do not merge] Test prototype focus manager incorporation

core/block_svg.ts

@@ -43,6 +43,8 @@ import type {IASTNodeLocationSvg} from './interfaces/i_ast_node_location_svg.js'
 import type {IBoundedElement} from './interfaces/i_bounded_element.js';
 import type {ICopyable} from './interfaces/i_copyable.js';
 import type {IDragStrategy, IDraggable} from './interfaces/i_draggable.js';
+import type {IFocusableNode} from './interfaces/i_focusable_node.js';
+import type {IFocusableTree} from './interfaces/i_focusable_tree.js';
 import {IIcon} from './interfaces/i_icon.js';
 import * as internalConstants from './internal_constants.js';
 import {MarkerManager} from './marker_manager.js';
@@ -74,7 +76,8 @@ export class BlockSvg
     IBoundedElement,
     ICopyable<BlockCopyData>,
     IDraggable,
-    IDeletable
+    IDeletable,
+    IFocusableNode
 {
   /**
    * Constant for identifying rows that are to be rendered inline.
@@ -208,6 +211,7 @@ export class BlockSvg
 
     // Expose this block's ID on its top-level SVG group.
     this.svgGroup.setAttribute('data-id', this.id);
+    svgPath.id = this.id;
 
     this.doInit_();
   }
@@ -1767,4 +1771,24 @@ export class BlockSvg
       );
     }
   }
+
+  getFocusableElement(): HTMLElement | SVGElement {
+    return this.pathObject.svgPath;
+  }
+
+  getFocusableTree(): IFocusableTree {
+    return this.workspace;
+  }
+
+  onNodeFocus(): void {
+    if (!this.isShadow()) {
+      common.setSelected(this);
+    }
+  }
+
+  onNodeBlur(): void {
+    if (common.getSelected() === this) {
+      common.setSelected(null);
+    }
+  }
 }

core/blockly.ts

@@ -145,8 +145,8 @@ import {
 } from './interfaces/i_draggable.js';
 import {IDragger} from './interfaces/i_dragger.js';
 import {IFlyout} from './interfaces/i_flyout.js';
-import {IFocusableNode} from './interfaces/i_focusable_node.js';
-import {IFocusableTree} from './interfaces/i_focusable_tree.js';
+import {IFocusableNode, isFocusableNode} from './interfaces/i_focusable_node.js';
+import {IFocusableTree, isFocusableTree} from './interfaces/i_focusable_tree.js';
 import {IHasBubble, hasBubble} from './interfaces/i_has_bubble.js';
 import {IIcon, isIcon} from './interfaces/i_icon.js';
 import {IKeyboardAccessible} from './interfaces/i_keyboard_accessible.js';
@@ -619,6 +619,8 @@ export {
   isCopyable,
   isDeletable,
   isDraggable,
+  isFocusableNode,
+  isFocusableTree,
   isIcon,
   isObservable,
   isPaster,

core/connection.ts

@@ -20,6 +20,7 @@ import type {Input} from './inputs/input.js';
 import type {IASTNodeLocationWithBlock} from './interfaces/i_ast_node_location_with_block.js';
 import type {IConnectionChecker} from './interfaces/i_connection_checker.js';
 import * as blocks from './serialization/blocks.js';
+import { idGenerator } from './utils.js';
 import * as Xml from './xml.js';
 
 /**
@@ -55,6 +56,8 @@ export class Connection implements IASTNodeLocationWithBlock {
   /** DOM representation of a shadow block, or null if none. */
   private shadowDom: Element | null = null;
 
+  id: string;
+
   /**
    * Horizontal location of this connection.
    *
@@ -80,6 +83,7 @@ export class Connection implements IASTNodeLocationWithBlock {
     public type: number,
   ) {
     this.sourceBlock_ = source;
+    this.id = `${source.id}_connection_${idGenerator.getNextUniqueId()}`;
   }
 
   /**

core/css.ts

@@ -150,8 +150,8 @@ let content = `
 
 .blocklyHighlightedConnectionPath {
   fill: none;
-  stroke: #fc3;
-  stroke-width: 4px;
+  // stroke: #fc3;
+  // stroke-width: 4px;
 }
 
 .blocklyPathLight {
@@ -160,6 +160,11 @@ let content = `
   stroke-width: 1;
 }
 
+.blocklySelected {
+  stroke: #ffa200;
+  stroke-width: 5;
+}
+
 .blocklySelected>.blocklyPathLight {
   display: none;
 }
@@ -464,8 +469,8 @@ input[type=number] {
 }
 
 .blocklyMenuSeparator {
-  background-color: #ccc; 
-  height: 1px; 
+  background-color: #ccc;
+  height: 1px;
   border: 0;
   margin-left: 4px;
   margin-right: 4px;
@@ -496,11 +501,14 @@ input[type=number] {
 }
 
 .blocklyActiveFocus {
-  outline-color: #2ae;
-  outline-width: 2px;
+  stroke: #ffa200;
+  stroke-width: 3;
+  outline-color: #ffa200;
 }
 .blocklyPassiveFocus {
-  outline-color: #3fdfff;
-  outline-width: 1.5px;
+  stroke: #ffa200;
+  stroke-dasharray: 5 3;
+  stroke-width: 3;
+  outline-color: #ffa200;
 }
 `;

core/field.ts

@@ -25,6 +25,8 @@ import * as eventUtils from './events/utils.js';
 import type {Input} from './inputs/input.js';
 import type {IASTNodeLocationSvg} from './interfaces/i_ast_node_location_svg.js';
 import type {IASTNodeLocationWithBlock} from './interfaces/i_ast_node_location_with_block.js';
+import type {IFocusableNode} from './interfaces/i_focusable_node.js';
+import type {IFocusableTree} from './interfaces/i_focusable_tree.js';
 import type {IKeyboardAccessible} from './interfaces/i_keyboard_accessible.js';
 import type {IRegistrable} from './interfaces/i_registrable.js';
 import {ISerializable} from './interfaces/i_serializable.js';
@@ -42,7 +44,8 @@ import {Svg} from './utils/svg.js';
 import * as userAgent from './utils/useragent.js';
 import * as utilsXml from './utils/xml.js';
 import * as WidgetDiv from './widgetdiv.js';
-import type {WorkspaceSvg} from './workspace_svg.js';
+import {WorkspaceSvg} from './workspace_svg.js';
+import * as idGenerator from './utils/idgenerator.js';
 
 /**
  * A function that is called to validate changes to the field's value before
@@ -72,7 +75,8 @@ export abstract class Field<T = any>
     IASTNodeLocationWithBlock,
     IKeyboardAccessible,
     IRegistrable,
-    ISerializable
+    ISerializable,
+    IFocusableNode
 {
   /**
    * To overwrite the default value which is set in **Field**, directly update
@@ -191,6 +195,8 @@ export abstract class Field<T = any>
    */
   SERIALIZABLE = false;
 
+  private id_: string | null = null;
+
   /**
    * @param value The initial value of the field.
    *     Also accepts Field.SKIP_SETUP if you wish to skip setup (only used by
@@ -255,6 +261,7 @@ export abstract class Field<T = any>
       throw Error('Field already bound to a block');
     }
     this.sourceBlock_ = block;
+    this.id_ = `${block.id}_field_${idGenerator.getNextUniqueId()}`;
   }
 
   /**
@@ -298,7 +305,12 @@ export abstract class Field<T = any>
       // Field has already been initialized once.
       return;
     }
-    this.fieldGroup_ = dom.createSvgElement(Svg.G, {});
+    const id = this.id_;
+    if (!id) throw new Error('Expected ID to be defined prior to init.');
+    this.fieldGroup_ = dom.createSvgElement(Svg.G, {
+      'tabindex': '-1',
+      'id': id
+    });
     if (!this.isVisible()) {
       this.fieldGroup_.style.display = 'none';
     }
@@ -1401,6 +1413,25 @@ export abstract class Field<T = any>
     }
   }
 
+  getFocusableElement(): HTMLElement | SVGElement {
+    if (!this.fieldGroup_) {
+      throw Error("This field currently has no representative DOM element.");
+    }
+    return this.fieldGroup_;
+  }
+
+  getFocusableTree(): IFocusableTree {
+    const block = this.getSourceBlock();
+    if (!block) {
+      throw new UnattachedFieldError();
+    }
+    return block.workspace as WorkspaceSvg;
+  }
+
+  onNodeFocus(): void {}
+
+  onNodeBlur(): void {}
+
   /**
    * Subclasses should reimplement this method to construct their Field
    * subclass from a JSON arg object.

core/field_input.ts

@@ -35,6 +35,7 @@ import {Size} from './utils/size.js';
 import * as userAgent from './utils/useragent.js';
 import * as WidgetDiv from './widgetdiv.js';
 import type {WorkspaceSvg} from './workspace_svg.js';
+import { getFocusManager } from './focus_manager.js';
 
 /**
  * Supported types for FieldInput subclasses.
@@ -351,6 +352,7 @@ export abstract class FieldInput<T extends InputTypes> extends Field<
    * keyboards).
    */
   private showPromptEditor() {
+    const returnFocusCallback = getFocusManager().takeEphemeralFocus(document.body);
     dialog.prompt(
       Msg['CHANGE_VALUE_TITLE'],
       this.getText(),
@@ -360,6 +362,7 @@ export abstract class FieldInput<T extends InputTypes> extends Field<
           this.setValue(this.getValueFromEditorText_(text));
         }
         this.onFinishEditing_(this.value_);
+        returnFocusCallback();
       },
     );
   }
@@ -374,10 +377,14 @@ export abstract class FieldInput<T extends InputTypes> extends Field<
     if (!block) {
       throw new UnattachedFieldError();
     }
+    const returnFocusCallback = getFocusManager().takeEphemeralFocus(document.body);
     WidgetDiv.show(
       this,
       block.RTL,
-      this.widgetDispose_.bind(this),
+      () => {
+        this.widgetDispose_();
+        returnFocusCallback();
+      },
       this.workspace_,
     );
     this.htmlInput_ = this.widgetCreate_() as HTMLInputElement;

core/flyout_base.ts

@@ -12,6 +12,8 @@
 // Former goog.module ID: Blockly.Flyout
 
 import {BlockSvg} from './block_svg.js';
+import { IFocusableNode, isFocusableNode } from './interfaces/i_focusable_node.js';
+import { IFocusableTree } from './interfaces/i_focusable_tree.js';
 import * as browserEvents from './browser_events.js';
 import {ComponentManager} from './component_manager.js';
 import {DeleteArea} from './delete_area.js';
@@ -32,18 +34,20 @@ import {SEPARATOR_TYPE} from './separator_flyout_inflater.js';
 import * as blocks from './serialization/blocks.js';
 import {Coordinate} from './utils/coordinate.js';
 import * as dom from './utils/dom.js';
+import { FocusableTreeTraverser } from './utils/focusable_tree_traverser.js';
 import * as idGenerator from './utils/idgenerator.js';
 import {Svg} from './utils/svg.js';
 import * as toolbox from './utils/toolbox.js';
 import * as Variables from './variables.js';
 import {WorkspaceSvg} from './workspace_svg.js';
+import { getFocusManager } from './focus_manager.js';
 
 /**
  * Class for a flyout.
  */
 export abstract class Flyout
   extends DeleteArea
-  implements IAutoHideable, IFlyout
+  implements IAutoHideable, IFlyout, IFocusableNode
 {
   /**
    * Position the flyout.
@@ -303,6 +307,7 @@ export abstract class Flyout
     // hide/show code will set up proper visibility and size later.
     this.svgGroup_ = dom.createSvgElement(tagName, {
       'class': 'blocklyFlyout',
+      'tabindex': '0',
     });
     this.svgGroup_.style.display = 'none';
     this.svgBackground_ = dom.createSvgElement(
@@ -317,6 +322,9 @@ export abstract class Flyout
     this.workspace_
       .getThemeManager()
       .subscribe(this.svgBackground_, 'flyoutOpacity', 'fill-opacity');
+
+    getFocusManager().registerTree(this);
+
     return this.svgGroup_;
   }
 
@@ -398,6 +406,7 @@ export abstract class Flyout
     if (this.svgGroup_) {
       dom.removeNode(this.svgGroup_);
     }
+    getFocusManager().unregisterTree(this);
   }
 
   /**
@@ -961,4 +970,62 @@ export abstract class Flyout
 
     return null;
   }
+
+  getFocusableElement(): HTMLElement | SVGElement {
+    if (!this.svgGroup_) throw new Error('Flyout DOM is not yet created.');
+    return this.svgGroup_;
+    // return this.workspace_.getFocusableElement();
+  }
+
+  getFocusableTree(): IFocusableTree {
+    return this;
+    // return this.workspace_.getFocusableTree();
+  }
+
+  onNodeFocus(): void {
+    // this.workspace_.onNodeFocus();
+  }
+
+  onNodeBlur(): void {
+    // this.workspace_.onNodeBlur();
+  }
+
+  getRootFocusableNode(): IFocusableNode {
+    return this;
+    // return this.workspace_.getRootFocusableNode();
+  }
+
+  getRestoredFocusableNode(previousNode: IFocusableNode | null): IFocusableNode | null {
+    return null;
+  }
+
+  getNestedTrees(): Array<IFocusableTree> {
+    return [this.workspace_];
+    // return this.workspace_.getNestedTrees();
+  }
+
+  onTreeFocus(node: IFocusableNode, previousTree: IFocusableTree | null): void {
+    // this.workspace_.onTreeFocus(node);
+  }
+
+  onTreeBlur(nextTree: IFocusableTree | null): void {
+    const toolbox = this.targetWorkspace.getToolbox();
+    // If focus is moving to either the toolbox or the flyout's workspace, do
+    // not close the flyout. For anything else, do close it.
+    if (toolbox && nextTree === toolbox) return;
+    if (nextTree == this.workspace_) return;
+    if (toolbox) toolbox.clearSelection();
+    this.autoHide(false);
+    // this.workspace_.onTreeBlur();
+  }
+
+  lookUpFocusableNode(id: string): IFocusableNode | null {
+    return null;
+    // return this.workspace_.lookUpFocusableNode(id);
+    // TODO: This may violate the cross-subtree boundary (since flyout contains a workspace that is itself a tree).
+    // return this.getContents()
+    //   .filter((item) => isFocusableNode(item))
+    //   .map((item) => item as unknown as IFocusableNode)
+    //   .find((node) => node.getFocusableElement().id == id) ?? null;
+  }
 }