Skip to content
This repository was archived by the owner on Jun 23, 2026. It is now read-only.

Commit d5151f2

Browse files
rachel-fenichelcpcallen
rachel-fenichel
and
cpcallen
authored
refactor(CSS): move plugin styling to a static method in index.ts (#650)
* chore(CSS): Remove references to defunct class blocklyToolboxDiv The blocklyToolboxDiv class was renamed blocklyToolbox in RaspberryPiFoundation/blockly#8647, fixing RaspberryPiFoundation/blockly#8343. The references in this repository were not updated but are now evidently obsolete: if we wanted them we'd have fixed them by now. * refactor(CSS): move box-sizing to core/css.ts Also apply only to .blocklyToolbox instead of * * refactor(CSS): move .blocklyDeleteIcon to src/index.ts * refactor(CSS): move variables to src/index.ts Also move them from html to .injectionDiv. * refactor(CSS): move focus-related styling to src/index.ts * fixup delete icon * refactor(CSS): move context menu styling to src/index.ts * chore: move CSS registration to a static method * chore: add CSS registration call in webdriver tests * chore: format --------- Co-authored-by: Christopher Allen <cpcallen+git@google.com>
1 parent 12664d6 commit d5151f2

5 files changed

Lines changed: 138 additions & 104 deletions

File tree

‎src/index.ts‎

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -128,4 +128,137 @@ export class KeyboardNavigation {
128128
toggleShortcutDialog(): void {
129129
this.navigationController.shortcutDialog.toggle(this.workspace);
130130
}
131+
132+
/**
133+
* Register CSS used by the plugin.
134+
* This is broken up into sections by purpose, with some notes about
135+
* where it should eventually live.
136+
* Must be called before `Blockly.inject`.
137+
*/
138+
static registerKeyboardNavigationStyles() {
139+
// Enable the delete icon for comments.
140+
//
141+
// This should remain in the plugin for the time being because we do
142+
// not want to display the delete icon by default.
143+
Blockly.Css.register(`
144+
.blocklyDeleteIcon {
145+
display: block;
146+
}
147+
`);
148+
149+
// Set variables that will be used to control the appearance of the
150+
// focus indicators. Attach them to the injectionDiv since they will
151+
// apply to things contained therein.
152+
//
153+
// This should be moved to core, either to core/css.ts
154+
// or to core/renderers/.
155+
Blockly.Css.register(`
156+
.injectionDiv {
157+
--blockly-active-node-color: #fff200;
158+
--blockly-active-tree-color: #60a5fa;
159+
--blockly-selection-width: 3px;
160+
}
161+
`);
162+
163+
// Styling focusing blocks, connections and fields.
164+
//
165+
// This should be moved to core, being integrated into the
166+
// existing styling of renderers in core/renderers/*/constants.ts.
167+
Blockly.Css.register(`
168+
/* Blocks, connections and fields. */
169+
.blocklyKeyboardNavigation
170+
.blocklyActiveFocus:is(.blocklyPath, .blocklyHighlightedConnectionPath),
171+
.blocklyKeyboardNavigation
172+
.blocklyActiveFocus.blocklyField
173+
> .blocklyFieldRect,
174+
.blocklyKeyboardNavigation
175+
.blocklyActiveFocus.blocklyIconGroup
176+
> .blocklyIconShape:first-child {
177+
stroke: var(--blockly-active-node-color);
178+
stroke-width: var(--blockly-selection-width);
179+
}
180+
.blocklyKeyboardNavigation
181+
.blocklyPassiveFocus:is(
182+
.blocklyPath:not(.blocklyFlyout .blocklyPath),
183+
.blocklyHighlightedConnectionPath
184+
),
185+
.blocklyKeyboardNavigation
186+
.blocklyPassiveFocus.blocklyField
187+
> .blocklyFieldRect,
188+
.blocklyKeyboardNavigation
189+
.blocklyPassiveFocus.blocklyIconGroup
190+
> .blocklyIconShape:first-child {
191+
stroke: var(--blockly-active-node-color);
192+
stroke-dasharray: 5px 3px;
193+
stroke-width: var(--blockly-selection-width);
194+
}
195+
.blocklyKeyboardNavigation
196+
.blocklyPassiveFocus.blocklyHighlightedConnectionPath {
197+
/* The connection path is being unexpectedly hidden in core */
198+
display: unset !important;
199+
}
200+
`);
201+
202+
// Styling for focusing the toolbox and flyout.
203+
//
204+
// This should be moved to core, to core/css.ts if not to somewhere
205+
// more specific in core/toolbox/.
206+
Blockly.Css.register(`
207+
.blocklyKeyboardNavigation .blocklyFlyout:has(.blocklyActiveFocus),
208+
.blocklyKeyboardNavigation .blocklyToolbox:has(.blocklyActiveFocus),
209+
.blocklyKeyboardNavigation
210+
.blocklyActiveFocus:is(.blocklyFlyout, .blocklyToolbox) {
211+
outline-offset: calc(var(--blockly-selection-width) * -1);
212+
outline: var(--blockly-selection-width) solid
213+
var(--blockly-active-tree-color);
214+
}
215+
.blocklyKeyboardNavigation
216+
.blocklyToolboxCategoryContainer:focus-visible {
217+
outline: none;
218+
}
219+
`);
220+
221+
// Styling for focusing the Workspace.
222+
//
223+
// This should be move to core, probably to core/css.ts.
224+
Blockly.Css.register(`
225+
.blocklyKeyboardNavigation
226+
.blocklyWorkspace:has(.blocklyActiveFocus)
227+
.blocklyWorkspaceFocusRing,
228+
.blocklyKeyboardNavigation
229+
.blocklySvg:has(~ .blocklyBlockDragSurface .blocklyActiveFocus)
230+
.blocklyWorkspaceFocusRing,
231+
.blocklyKeyboardNavigation
232+
.blocklyWorkspace.blocklyActiveFocus
233+
.blocklyWorkspaceFocusRing {
234+
stroke: var(--blockly-active-tree-color);
235+
stroke-width: calc(var(--blockly-selection-width) * 2);
236+
}
237+
.blocklyKeyboardNavigation
238+
.blocklyWorkspace.blocklyActiveFocus
239+
.blocklyWorkspaceSelectionRing {
240+
stroke: var(--blockly-active-node-color);
241+
stroke-width: var(--blockly-selection-width);
242+
}
243+
`);
244+
245+
// Keyboard-nav-specific styling for the context menu.
246+
//
247+
// This should remain in the plugin for the time being because the
248+
// classes selected are currently only defined in the plugin.
249+
Blockly.Css.register(`
250+
.blocklyRTL .blocklyMenuItemContent .blocklyShortcutContainer {
251+
flex-direction: row-reverse;
252+
}
253+
.blocklyMenuItemContent .blocklyShortcutContainer {
254+
width: 100%;
255+
display: flex;
256+
justify-content: space-between;
257+
gap: 16px;
258+
}
259+
.blocklyMenuItemContent .blocklyShortcutContainer .blocklyShortcut {
260+
color: #ccc;
261+
}
262+
`);
263+
}
131264
}

‎test/index.html‎

Lines changed: 0 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -33,10 +33,6 @@
3333
position: relative;
3434
}
3535

36-
.blocklyToolboxDiv ~ .blocklyFlyout:focus {
37-
outline: none;
38-
}
39-
4036
pre,
4137
code {
4238
overflow: auto;
@@ -89,98 +85,6 @@
8985
thead {
9086
font-weight: bold;
9187
}
92-
93-
html {
94-
--blockly-active-node-color: #fff200;
95-
--blockly-active-tree-color: #60a5fa;
96-
--blockly-selection-width: 3px;
97-
}
98-
* {
99-
box-sizing: border-box;
100-
}
101-
102-
.blocklyDeleteIcon {
103-
display: block;
104-
}
105-
106-
/* Blocks, connections and fields. */
107-
.blocklyKeyboardNavigation
108-
.blocklyActiveFocus:is(.blocklyPath, .blocklyHighlightedConnectionPath),
109-
.blocklyKeyboardNavigation
110-
.blocklyActiveFocus.blocklyField
111-
> .blocklyFieldRect,
112-
.blocklyKeyboardNavigation
113-
.blocklyActiveFocus.blocklyIconGroup
114-
> .blocklyIconShape:first-child {
115-
stroke: var(--blockly-active-node-color);
116-
stroke-width: var(--blockly-selection-width);
117-
}
118-
.blocklyKeyboardNavigation
119-
.blocklyPassiveFocus:is(
120-
.blocklyPath:not(.blocklyFlyout .blocklyPath),
121-
.blocklyHighlightedConnectionPath
122-
),
123-
.blocklyKeyboardNavigation
124-
.blocklyPassiveFocus.blocklyField
125-
> .blocklyFieldRect,
126-
.blocklyKeyboardNavigation
127-
.blocklyPassiveFocus.blocklyIconGroup
128-
> .blocklyIconShape:first-child {
129-
stroke: var(--blockly-active-node-color);
130-
stroke-dasharray: 5px 3px;
131-
stroke-width: var(--blockly-selection-width);
132-
}
133-
.blocklyKeyboardNavigation
134-
.blocklyPassiveFocus.blocklyHighlightedConnectionPath {
135-
/* The connection path is being unexpectedly hidden in core */
136-
display: unset !important;
137-
}
138-
139-
/* Toolbox and flyout. */
140-
.blocklyKeyboardNavigation .blocklyFlyout:has(.blocklyActiveFocus),
141-
.blocklyKeyboardNavigation .blocklyToolbox:has(.blocklyActiveFocus),
142-
.blocklyKeyboardNavigation
143-
.blocklyActiveFocus:is(.blocklyFlyout, .blocklyToolbox) {
144-
outline-offset: calc(var(--blockly-selection-width) * -1);
145-
outline: var(--blockly-selection-width) solid
146-
var(--blockly-active-tree-color);
147-
}
148-
/* Workspace */
149-
.blocklyKeyboardNavigation
150-
.blocklyWorkspace:has(.blocklyActiveFocus)
151-
.blocklyWorkspaceFocusRing,
152-
.blocklyKeyboardNavigation
153-
.blocklySvg:has(~ .blocklyBlockDragSurface .blocklyActiveFocus)
154-
.blocklyWorkspaceFocusRing,
155-
.blocklyKeyboardNavigation
156-
.blocklyWorkspace.blocklyActiveFocus
157-
.blocklyWorkspaceFocusRing {
158-
stroke: var(--blockly-active-tree-color);
159-
stroke-width: calc(var(--blockly-selection-width) * 2);
160-
}
161-
.blocklyKeyboardNavigation
162-
.blocklyWorkspace.blocklyActiveFocus
163-
.blocklyWorkspaceSelectionRing {
164-
stroke: var(--blockly-active-node-color);
165-
stroke-width: var(--blockly-selection-width);
166-
}
167-
.blocklyKeyboardNavigation
168-
.blocklyToolboxCategoryContainer:focus-visible {
169-
outline: none;
170-
}
171-
172-
.blocklyRTL .blocklyMenuItemContent .blocklyShortcutContainer {
173-
flex-direction: row-reverse;
174-
}
175-
.blocklyMenuItemContent .blocklyShortcutContainer {
176-
width: 100%;
177-
display: flex;
178-
justify-content: space-between;
179-
gap: 16px;
180-
}
181-
.blocklyMenuItemContent .blocklyShortcutContainer .blocklyShortcut {
182-
color: #ccc;
183-
}
18488
</style>
18589
</head>
18690

‎test/index.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,9 @@ function createWorkspace(): Blockly.WorkspaceSvg {
8989
if (!blocklyDiv) {
9090
throw new Error('Missing blocklyDiv');
9191
}
92+
93+
// Must be called before injection.
94+
KeyboardNavigation.registerKeyboardNavigationStyles();
9295
const workspace = Blockly.inject(blocklyDiv, injectOptions);
9396

9497
Blockly.ContextMenuItems.registerCommentOptions();

‎test/webdriverio/index.html‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -38,14 +38,6 @@
3838
height: calc(100% - calc(var(--outline-width) * 2));
3939
}
4040

41-
.blocklyToolboxDiv ~ .blocklyFlyout:focus {
42-
outline: none;
43-
}
44-
45-
.blocklyDeleteIcon {
46-
display: block;
47-
}
48-
4941
pre,
5042
code {
5143
overflow: auto;

‎test/webdriverio/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,8 @@ function createWorkspace(): Blockly.WorkspaceSvg {
7878
if (!blocklyDiv) {
7979
throw new Error('Missing blocklyDiv');
8080
}
81+
// Must be called before injection.
82+
KeyboardNavigation.registerKeyboardNavigationStyles();
8183
const workspace = Blockly.inject(blocklyDiv, injectOptions);
8284

8385
new KeyboardNavigation(workspace);

0 commit comments

Comments
 (0)