The basics

• I validated my changes

The details

Resolves

Part of RaspberryPiFoundation/blockly-keyboard-experimentation#595

Proposed Changes

Add box-sizing: border-box to the existing .blocklyToolbox styling in core/css.ts.

Reason for Changes

The following "CSS reset" was added to the plugin playground by @microbit-matt-hillsdon in RaspberryPiFoundation/blockly-keyboard-experimentation#511 to fix an issue with the toolbox focus indicator border being misplaced:

* {
  box-sizing: border-box;
}

This would be a pretty good default (explanation) for Blockly but that would definitely be a breaking change, so for now apply it only to the blocklyToolbox div.

Test Coverage

Manually verified it has the desired effect on the toolbox focus indicator (after removing corresponding styling from plugin's test/index.html, of course).

Additional Information

• box-sizing styling to be removed from the keyboard-nav plugin by refactor(CSS): move plugin styling from test/index.html to src/index.js blockly-keyboard-experimentation#637
• Consider making box-sizing: border-box the default for Blockly v13 #9205