feat(workspace-search): focus found block on close or restore focus (#2576)

Uses Blockly 12 FocusManager API.

This matches browser in find in page behaviour where Escape closes find and
moves focus to the highlighted item.

When there's no search performed or nothing ever matched we restore focus to
the previous node.

Where there was a match but then the search changes so it no longer matched we
still focus that last match, because we've scrolled it into view which may have
moved the previous focus position out of view. In this scenario browsers seem
to focus the element but not mark it as focus:visible but we don't have a
similar distinction.

Author: microbit-matt-hillsdon

plugins/workspace-search/src/workspace_search.ts

@@ -42,6 +42,15 @@ export class WorkspaceSearch implements Blockly.IPositionable {
    */
   protected blocks: Blockly.BlockSvg[] = [];
 
+  /**
+   * The last highlighted block, which we focus on close.
+   *
+   * This block is focused on close even if the most recent search found nothing
+   * because we've centered on it and it's helpful for focus to be in sync with
+   * the scroll position.
+   */
+  private lastHighlighted: Blockly.BlockSvg | null = null;
+
   /**
    * Index of the currently "selected" block in the blocks array.
    */
@@ -436,6 +445,7 @@ export class WorkspaceSearch implements Blockly.IPositionable {
 
     this.highlightCurrentSelection(currentBlock);
     this.workspace.centerOnBlock(currentBlock.id, false);
+    this.lastHighlighted = currentBlock;
   }
 
   /**
@@ -455,8 +465,14 @@ export class WorkspaceSearch implements Blockly.IPositionable {
    */
   close() {
     this.setVisible(false);
-    this.workspace.markFocused();
+    const focusManager = Blockly.FocusManager.getFocusManager();
+    if (this.lastHighlighted && !this.lastHighlighted.isDisposed()) {
+      focusManager.focusNode(this.lastHighlighted);
+    } else {
+      focusManager.focusTree(this.workspace);
+    }
     this.clearBlocks();
+    this.lastHighlighted = null;
   }
 
   /**

plugins/workspace-search/test/workspace_search_test.mocha.js

@@ -69,6 +69,8 @@ suite('WorkspaceSearch', function () {
     );
     this.workspace = Blockly.inject('blocklyDiv');
     this.workspaceSearch = new WorkspaceSearch(this.workspace);
+    // See https://github.com/google/blockly-samples/issues/2528 for context.
+    global.SVGElement = window.SVGElement;
   });
 
   teardown(function () {
@@ -436,4 +438,64 @@ suite('WorkspaceSearch', function () {
       assertNoExtraCurrentStyling(this.blocks, this.blocks[1]);
     });
   });
+
+  suite('focus', function () {
+    suiteSetup(function () {
+      Blockly.defineBlocksWithJsonArray([
+        {
+          type: 'alpha_block',
+          message0: 'alpha',
+        },
+        {
+          type: 'beta_block',
+          message0: 'beta',
+        },
+      ]);
+    });
+
+    setup(function () {
+      this.alphaBlock = this.workspace.newBlock('alpha_block');
+      this.betaBlock = this.workspace.newBlock('beta_block');
+      this.workspaceSearch.init();
+      // Check starting position
+      this.focusManager = Blockly.FocusManager.getFocusManager();
+      this.focusManager.focusTree(this.workspace);
+      const originalBlock = /** @type {Blockly.BlockSvg} */ (
+        this.focusManager.getFocusedNode()
+      );
+      assert.equal('alpha_block', originalBlock.type);
+    });
+
+    /**
+     * @param {string} expected The expected block type.
+     */
+    function assertFocusedNodeType(expected) {
+      const block = /** @type {Blockly.BlockSvg} */ (
+        Blockly.FocusManager.getFocusManager().getFocusedNode()
+      );
+      assert.equal(expected, block.type);
+    }
+
+    test('close with match focuses found block', function () {
+      this.workspaceSearch.searchAndHighlight('beta', false);
+      this.workspaceSearch.close();
+
+      assertFocusedNodeType('beta_block');
+    });
+
+    test('close with no match restores focus', function () {
+      this.workspaceSearch.searchAndHighlight('nothingMatchesThis', false);
+      this.workspaceSearch.close();
+
+      assertFocusedNodeType('alpha_block');
+    });
+
+    test('close with match followed by non-match still focuses last found block', function () {
+      this.workspaceSearch.searchAndHighlight('beta', false);
+      this.workspaceSearch.searchAndHighlight('nothingMatchesThis', false);
+      this.workspaceSearch.close();
+
+      assertFocusedNodeType('beta_block');
+    });
+  });
 });