mirror of
https://github.com/google/blockly.git
synced 2026-01-05 08:00:09 +01:00
0e16b0405a
## The basics - [x] I [validated my changes](https://developers.google.com/blockly/guides/contribute/core#making_and_verifying_a_change) ## The details ### Resolves Fixes https://github.com/google/blockly-keyboard-experimentation/issues/563 ### Proposed Changes This introduces support in `FocusManager` to receive feedback on when an ephemerally focused element entirely loses focus (that is, neither it nor any of its descendants have focus). This also introduces a behavior change for drop-down divs using the previously mentioned functionality to automatically close themselves when they lose focus for any reason (e.g. clicking outside of the div or tab navigating away from it). Finally, and **importantly**, this adds a case where ephemeral focus does _not_ automatically return to the previously focused node: when focus is lost to the ephemerally focused element's tree and isn't instead put on another focused node. ### Reason for Changes Ultimately, focus is probably the best proxy for cases when a drop-down div ought to no longer be open. However, tracking focus only within the scope of the drop-down div utility is rather difficult since a lot of the same problems that `FocusManager` handles also occur here (with regards to both descendants and outside elements receiving focus). It made more sense to expand `FocusManager`'s ephemeral focus support: - It was easier to implement this `FocusManager` and in a way that's much more robust (since it's leveraging existing event handlers). - Using `FocusManager` trivialized the solution for drop-down divs. - There could be other use cases where custom ephemeral focus uses might benefit from knowing when they lose focus. This new support is enabled by default for all drop-down divs, but can be disabled by callers if they wish to revert to the previous behavior of not auto-closing. The change for whether to restore ephemeral focus was needed to fix a drawback that arises from the automatic returning of ephemeral focus introduced in this PR: when a user clicks out of an open drop-down menu it will restore focus back to the node that held focus prior to taking ephemeral focus (since it properly hides the drop-down div and restores focus). This creates awkward behavior issues for both mouse and keyboard users: - For mouse: trying to open a drop-down outside of Blockly will automatically close the drop-down when the Blockly drop-down finishes closing (since focus is stolen back away from the thing the user clicked on). - For keyboard: tab navigating out of Blockly tries to force focus back to Blockly. **New in v2 of this PR**: Commit0363d67c18is the main one that prevents #9203 from being reintroduced by ensuring that widget div only clears its contents after ephemeral focus has returned. This was missed in the first audit since it wasn't clear that this line, in particular, can cause a div with focus to be removed and thus focus lost:dfd565957b/core/widgetdiv.ts (L156)### Test Coverage New tests have been added for both the drop-down div and `FocusManager` components, and have been verified as failing without the new behaviors in place. There may be other edge cases worth testing for `FocusManager` in particular, but the tests introduced in this PR seem to cover the most important cases. **New in v2 of this PR**: A test was added to validate that widget div now clears its contents only after ephemeral focus has returned to avoid the desyncing scenario that led to #9203. This test has been verified to fail without the fix. There are also a few new tests being added in the keyboard navigation plugin repository that also validate this behavior at a higher level (see https://github.com/google/blockly-keyboard-experimentation/pull/649). Demonstration of the new behavior: [Screen recording 2025-07-01 6.28.37 PM.webm](https://github.com/user-attachments/assets/7af29fed-1ba1-4828-a6cd-65bb94509e72) ### Documentation No new documentation changes seem needed beyond the code documentation updates. ### Additional Information It's also possible to change the automatic restoration behavior to be conditional instead of always assuming focus shouldn't be reset if focus leaves the ephemeral element, but that's probably a better change if there's an actual user issue discovered with this approach. This was originally introduced in #9175 but it was reverted in #9204 due to #9203.
360 lines
12 KiB
HTML
360 lines
12 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Mocha Tests for Blockly</title>
|
|
|
|
<link href="../../node_modules/mocha/mocha.css" rel="stylesheet" />
|
|
</head>
|
|
<style>
|
|
#blocklyDiv {
|
|
height: 1000px;
|
|
position: fixed;
|
|
visibility: hidden;
|
|
width: 1000px;
|
|
}
|
|
|
|
.blocklyActiveFocus {
|
|
outline-color: #0f0;
|
|
outline-width: 2px;
|
|
}
|
|
.blocklyPassiveFocus {
|
|
outline-color: #00f;
|
|
outline-width: 1.5px;
|
|
}
|
|
div.blocklyActiveFocus {
|
|
color: #0f0;
|
|
}
|
|
div.blocklyPassiveFocus {
|
|
color: #00f;
|
|
}
|
|
g.blocklyActiveFocus {
|
|
fill: #0f0;
|
|
}
|
|
g.blocklyPassiveFocus {
|
|
fill: #00f;
|
|
}
|
|
</style>
|
|
<body tabindex="-1">
|
|
<div id="mocha"></div>
|
|
<div id="failureCount" style="display: none" tests_failed="unset"></div>
|
|
<div id="failureMessages" style="display: none"></div>
|
|
<div id="testFocusableTree1">
|
|
Focusable tree 1
|
|
<div id="testFocusableTree1.node1" style="margin-left: 1em">
|
|
Tree 1 node 1
|
|
<div id="testFocusableTree1.node1.child1" style="margin-left: 2em">
|
|
Tree 1 node 1 child 1
|
|
<div
|
|
id="testFocusableTree1.node1.child1.unregisteredChild1"
|
|
style="margin-left: 3em">
|
|
Tree 1 node 1 child 1 child 1 (unregistered)
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="testFocusableTree1.node2" style="margin-left: 1em">
|
|
Tree 1 node 2
|
|
<div
|
|
id="testFocusableTree1.node2.unregisteredChild1"
|
|
style="margin-left: 2em">
|
|
Tree 1 node 2 child 2 (unregistered)
|
|
</div>
|
|
</div>
|
|
<div id="testFocusableTree1.unregisteredChild1" style="margin-left: 1em">
|
|
Tree 1 child 1 (unregistered)
|
|
</div>
|
|
</div>
|
|
<div id="testFocusableTree2">
|
|
Focusable tree 2
|
|
<div id="testFocusableTree2.node1" style="margin-left: 1em">
|
|
Tree 2 node 1
|
|
<div id="testFocusableNestedTree4" style="margin-left: 2em">
|
|
Nested tree 4
|
|
<div id="testFocusableNestedTree4.node1" style="margin-left: 3em">
|
|
Tree 4 node 1 (nested)
|
|
<div
|
|
id="testFocusableNestedTree4.node1.unregisteredChild1"
|
|
style="margin-left: 4em">
|
|
Tree 4 node 1 child 1 (unregistered)
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="testFocusableNestedTree5" style="margin-left: 1em">
|
|
Nested tree 5
|
|
<div id="testFocusableNestedTree5.node1" style="margin-left: 2em">
|
|
Tree 5 node 1 (nested)
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="testUnregisteredFocusableTree3">
|
|
Unregistered tree 3
|
|
<div id="testUnregisteredFocusableTree3.node1" style="margin-left: 1em">
|
|
Tree 3 node 1 (unregistered)
|
|
</div>
|
|
</div>
|
|
<div id="testUnfocusableElement">Unfocusable element</div>
|
|
<div id="nonTreeElementForEphemeralFocus" tabindex="-1">
|
|
<div
|
|
id="nonTreeElementForEphemeralFocus.child1"
|
|
tabindex="-1"
|
|
style="margin-left: 1em"></div>
|
|
</div>
|
|
<div id="nonTreeElementForEphemeralFocus2" tabindex="-1"></div>
|
|
<svg width="250" height="250">
|
|
<g id="testFocusableGroup1">
|
|
<g id="testFocusableGroup1.node1">
|
|
<rect x="0" y="0" width="250" height="30" fill="grey" />
|
|
<text x="10" y="20" class="svgText">Group 1 node 1</text>
|
|
<g id="testFocusableGroup1.node1.child1">
|
|
<rect x="0" y="30" width="250" height="30" fill="lightgrey" />
|
|
<text x="10" y="50" class="svgText">Tree 1 node 1 child 1</text>
|
|
</g>
|
|
</g>
|
|
<g id="testFocusableGroup1.node2">
|
|
<rect x="0" y="60" width="250" height="30" fill="grey" />
|
|
<text x="10" y="80" class="svgText">Group 1 node 2</text>
|
|
<g id="testFocusableGroup1.node2.unregisteredChild1">
|
|
<rect x="0" y="90" width="250" height="30" fill="lightgrey" />
|
|
<text x="10" y="110" class="svgText">
|
|
Tree 1 node 2 child 2 (unregistered)
|
|
</text>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g id="testFocusableGroup2">
|
|
<g id="testFocusableGroup2.node1">
|
|
<rect x="0" y="120" width="250" height="30" fill="grey" />
|
|
<text x="10" y="140" class="svgText">Group 2 node 1</text>
|
|
</g>
|
|
<g id="testFocusableNestedGroup4">
|
|
<g id="testFocusableNestedGroup4.node1">
|
|
<rect x="0" y="150" width="250" height="30" fill="lightgrey" />
|
|
<text x="10" y="170" class="svgText">Group 4 node 1 (nested)</text>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g id="testUnregisteredFocusableGroup3">
|
|
<g id="testUnregisteredFocusableGroup3.node1">
|
|
<rect x="0" y="180" width="250" height="30" fill="grey" />
|
|
<text x="10" y="200" class="svgText">
|
|
Tree 3 node 1 (unregistered)
|
|
</text>
|
|
</g>
|
|
</g>
|
|
<g id="nonTreeGroupForEphemeralFocus"></g>
|
|
</svg>
|
|
<!-- Load mocha et al. before Blockly and the test modules so that
|
|
we can safely import the test modules that make calls
|
|
to (e.g.) suite() at the top level. -->
|
|
<script src="../../node_modules/mocha/mocha.js"></script>
|
|
<script src="../../node_modules/sinon/pkg/sinon.js"></script>
|
|
<script>
|
|
mocha.setup({
|
|
ui: 'tdd',
|
|
failZero: true,
|
|
});
|
|
</script>
|
|
|
|
<script type="module">
|
|
import {loadScript} from '../scripts/load.mjs';
|
|
|
|
// Load Blockly in uncompressed mode.
|
|
import * as Blockly from '../../build/blockly.loader.mjs';
|
|
import '../../build/blocks.loader.mjs';
|
|
import {javascriptGenerator} from '../../build/javascript.loader.mjs';
|
|
|
|
// Import tests.
|
|
import './block_json_test.js';
|
|
import './block_test.js';
|
|
import './clipboard_test.js';
|
|
import './comment_test.js';
|
|
import './comment_deserialization_test.js';
|
|
import './connection_checker_test.js';
|
|
import './connection_db_test.js';
|
|
import './connection_test.js';
|
|
import './contextmenu_items_test.js';
|
|
import './contextmenu_test.js';
|
|
import './cursor_test.js';
|
|
import './dialog_test.js';
|
|
import './dropdowndiv_test.js';
|
|
import './event_test.js';
|
|
import './event_block_change_test.js';
|
|
import './event_block_create_test.js';
|
|
import './event_block_delete_test.js';
|
|
import './event_block_drag_test.js';
|
|
import './event_block_field_intermediate_change_test.js';
|
|
import './event_block_move_test.js';
|
|
import './event_bubble_open_test.js';
|
|
import './event_click_test.js';
|
|
import './event_comment_change_test.js';
|
|
import './event_comment_collapse_test.js';
|
|
import './event_comment_create_test.js';
|
|
import './event_comment_delete_test.js';
|
|
import './event_comment_move_test.js';
|
|
import './event_comment_drag_test.js';
|
|
import './event_comment_resize_test.js';
|
|
import './event_selected_test.js';
|
|
import './event_theme_change_test.js';
|
|
import './event_toolbox_item_select_test.js';
|
|
import './event_trashcan_open_test.js';
|
|
import './event_var_create_test.js';
|
|
import './event_var_delete_test.js';
|
|
import './event_var_rename_test.js';
|
|
import './event_var_type_change_test.js';
|
|
import './event_viewport_test.js';
|
|
import './extensions_test.js';
|
|
import './field_checkbox_test.js';
|
|
import './field_dropdown_test.js';
|
|
import './field_image_test.js';
|
|
import './field_label_serializable_test.js';
|
|
import './field_label_test.js';
|
|
import './field_number_test.js';
|
|
import './field_registry_test.js';
|
|
import './field_test.js';
|
|
import './field_textinput_test.js';
|
|
import './field_variable_test.js';
|
|
import './flyout_test.js';
|
|
import './focus_manager_test.js';
|
|
import './focusable_tree_traverser_test.js';
|
|
import './generator_test.js';
|
|
import './gesture_test.js';
|
|
import './icon_test.js';
|
|
import './input_test.js';
|
|
import './insertion_marker_test.js';
|
|
import './jso_deserialization_test.js';
|
|
import './jso_serialization_test.js';
|
|
import './json_test.js';
|
|
import './keyboard_navigation_controller_test.js';
|
|
import './layering_test.js';
|
|
import './blocks/lists_test.js';
|
|
import './blocks/logic_ternary_test.js';
|
|
import './blocks/loops_test.js';
|
|
import './metrics_test.js';
|
|
import './mutator_test.js';
|
|
import './names_test.js';
|
|
import './navigation_test.js';
|
|
// TODO: Remove these tests.
|
|
import './old_workspace_comment_test.js';
|
|
import './procedure_map_test.js';
|
|
import './blocks/procedures_test.js';
|
|
import './rect_test.js';
|
|
import './registry_test.js';
|
|
import './render_management_test.js';
|
|
import './serializer_test.js';
|
|
import './shortcut_items_test.js';
|
|
import './shortcut_registry_test.js';
|
|
import './touch_test.js';
|
|
import './theme_test.js';
|
|
import './toast_test.js';
|
|
import './toolbox_test.js';
|
|
import './tooltip_test.js';
|
|
import './trashcan_test.js';
|
|
import './utils_test.js';
|
|
import './variable_map_test.js';
|
|
import './variable_model_test.js';
|
|
import './blocks/variables_test.js';
|
|
import './widget_div_test.js';
|
|
import './comment_view_test.js';
|
|
import './workspace_comment_test.js';
|
|
import './workspace_svg_test.js';
|
|
import './workspace_test.js';
|
|
import './xml_test.js';
|
|
import './zoom_controls_test.js';
|
|
|
|
// Make Blockly and generators available via global scope.
|
|
globalThis.Blockly = Blockly;
|
|
globalThis.javascriptGenerator = javascriptGenerator;
|
|
|
|
// Load additional scripts.
|
|
await loadScript('../../build/msg/en.js');
|
|
await loadScript('../playgrounds/screenshot.js');
|
|
await loadScript('../../node_modules/@blockly/dev-tools/dist/index.js');
|
|
|
|
let runner = mocha.run(function (failures) {
|
|
var failureDiv = document.getElementById('failureCount');
|
|
failureDiv.setAttribute('tests_failed', failures);
|
|
});
|
|
runner.on('fail', function (test, err) {
|
|
const msg = document.createElement('p');
|
|
msg.textContent = `"${test.fullTitle()}" failed: ${err.message}`;
|
|
const div = document.getElementById('failureMessages');
|
|
div.appendChild(msg);
|
|
});
|
|
</script>
|
|
|
|
<div id="blocklyDiv"></div>
|
|
|
|
<xml
|
|
xmlns="https://developers.google.com/blockly/xml"
|
|
id="toolbox-simple"
|
|
style="display: none">
|
|
<block type="logic_compare">
|
|
<field name="OP">NEQ</field>
|
|
<value name="A">
|
|
<shadow type="math_number">
|
|
<field name="NUM">1</field>
|
|
</shadow>
|
|
</value>
|
|
<value name="B">
|
|
<block type="math_number">
|
|
<field name="NUM">2</field>
|
|
</block>
|
|
</value>
|
|
</block>
|
|
<sep gap="20"></sep>
|
|
<button text="insert" callbackkey="insertConnectionRows"></button>
|
|
<label text="tooltips"></label>
|
|
</xml>
|
|
|
|
<xml
|
|
xmlns="https://developers.google.com/blockly/xml"
|
|
id="toolbox-categories"
|
|
style="display: none">
|
|
<category name="First" css-container="something">
|
|
<block type="basic_block">
|
|
<field name="TEXT">FirstCategory-FirstBlock</field>
|
|
</block>
|
|
<block type="basic_block">
|
|
<field name="TEXT">FirstCategory-SecondBlock</field>
|
|
</block>
|
|
</category>
|
|
<category name="Second">
|
|
<block type="basic_block">
|
|
<field name="TEXT">SecondCategory-FirstBlock</field>
|
|
</block>
|
|
</category>
|
|
</xml>
|
|
|
|
<xml
|
|
xmlns="https://developers.google.com/blockly/xml"
|
|
id="toolbox-test"
|
|
style="display: none">
|
|
<category name="First" expanded="true" categorystyle="logic_category">
|
|
<sep gap="-1"></sep>
|
|
<button text="insert" callbackkey="insertConnectionRows"></button>
|
|
<block type="stack_block"></block>
|
|
<block type="stack_block"></block>
|
|
</category>
|
|
<category name="Second">
|
|
<block type="stack_block"></block>
|
|
</category>
|
|
<sep toolboxitemid="separator" gap="-1"></sep>
|
|
<category name="Variables" custom="VARIABLE"></category>
|
|
<category name="NestedCategory">
|
|
<category
|
|
toolboxitemid="nestedCategory"
|
|
name="NestedItemOne"></category>
|
|
</category>
|
|
<category name="lastItem"></category>
|
|
</xml>
|
|
|
|
<xml
|
|
xmlns="https://developers.google.com/blockly/xml"
|
|
id="gesture-test-toolbox"
|
|
style="display: none">
|
|
<block type="test_field_block"></block>
|
|
</xml>
|
|
</body>
|
|
</html>
|