From 993322808ae474988af8f98678812280454d9d8b Mon Sep 17 00:00:00 2001 From: Christopher Allen Date: Wed, 2 Jul 2025 13:18:53 +0100 Subject: [PATCH 01/10] chore(CSS): Remove references to defunct class blocklyToolboxDiv The blocklyToolboxDiv class was renamed blocklyToolbox in google/blockly#8647, fixing google/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. --- test/index.html | 4 ---- test/webdriverio/index.html | 4 ---- 2 files changed, 8 deletions(-) diff --git a/test/index.html b/test/index.html index 6fca8c38..3356c9f2 100644 --- a/test/index.html +++ b/test/index.html @@ -33,10 +33,6 @@ position: relative; } - .blocklyToolboxDiv ~ .blocklyFlyout:focus { - outline: none; - } - pre, code { overflow: auto; diff --git a/test/webdriverio/index.html b/test/webdriverio/index.html index fb1bf4d6..0a1b923c 100644 --- a/test/webdriverio/index.html +++ b/test/webdriverio/index.html @@ -38,10 +38,6 @@ height: calc(100% - calc(var(--outline-width) * 2)); } - .blocklyToolboxDiv ~ .blocklyFlyout:focus { - outline: none; - } - pre, code { overflow: auto; From 7ae6814ed241ddc5ed15834aa237383d8da950c8 Mon Sep 17 00:00:00 2001 From: Christopher Allen Date: Wed, 2 Jul 2025 16:31:06 +0100 Subject: [PATCH 02/10] refactor(CSS): move box-sizing to core/css.ts Also apply only to .blocklyToolbox instead of * --- test/index.html | 3 --- 1 file changed, 3 deletions(-) diff --git a/test/index.html b/test/index.html index 3356c9f2..1b1a6fd5 100644 --- a/test/index.html +++ b/test/index.html @@ -91,9 +91,6 @@ --blockly-active-tree-color: #60a5fa; --blockly-selection-width: 3px; } - * { - box-sizing: border-box; - } .blocklyDeleteIcon { display: block; From df575f0c80f3acd7567882ed5978e390357bf065 Mon Sep 17 00:00:00 2001 From: Christopher Allen Date: Thu, 3 Jul 2025 00:26:41 +0100 Subject: [PATCH 03/10] refactor(CSS): move .blocklyDeleteIcon to src/index.ts --- src/index.ts | 13 +++++++++++++ test/index.html | 4 ---- 2 files changed, 13 insertions(+), 4 deletions(-) diff --git a/src/index.ts b/src/index.ts index 32f55d73..5bf880b2 100644 --- a/src/index.ts +++ b/src/index.ts @@ -129,3 +129,16 @@ export class KeyboardNavigation { this.navigationController.shortcutDialog.toggle(this.workspace); } } + +// Register CSS used by the plugin. +// +// This is broken up into sections by purpose, with some notes about +// where it should eventually live. + +// Enable the delete icon for comments. +Blockly.Css.register(` + .blocklyDeleteIcon { + display: block; + } +`); + diff --git a/test/index.html b/test/index.html index 1b1a6fd5..63129285 100644 --- a/test/index.html +++ b/test/index.html @@ -92,10 +92,6 @@ --blockly-selection-width: 3px; } - .blocklyDeleteIcon { - display: block; - } - /* Blocks, connections and fields. */ .blocklyKeyboardNavigation .blocklyActiveFocus:is(.blocklyPath, .blocklyHighlightedConnectionPath), From 6a105c053bfe09d7fd92b65faa8146f0aae6d875 Mon Sep 17 00:00:00 2001 From: Christopher Allen Date: Wed, 2 Jul 2025 16:30:38 +0100 Subject: [PATCH 04/10] refactor(CSS): move variables to src/index.ts Also move them from html to .injectionDiv. --- src/index.ts | 14 ++++++++++++++ test/index.html | 6 ------ 2 files changed, 14 insertions(+), 6 deletions(-) diff --git a/src/index.ts b/src/index.ts index 5bf880b2..da7f6a9b 100644 --- a/src/index.ts +++ b/src/index.ts @@ -142,3 +142,17 @@ Blockly.Css.register(` } `); +// Set variables that will be used to control the appearance of the +// focus indicators. Attach them to the injectionDiv since they will +// apply to things contained therein. +// +// This should be moved to core, either to core/css.ts +// or to core/renderers/. +Blockly.Css.register(` + .injectionDiv { + --blockly-active-node-color: #fff200; + --blockly-active-tree-color: #60a5fa; + --blockly-selection-width: 3px; + } +`); + diff --git a/test/index.html b/test/index.html index 63129285..e1b40b5b 100644 --- a/test/index.html +++ b/test/index.html @@ -86,12 +86,6 @@ font-weight: bold; } - html { - --blockly-active-node-color: #fff200; - --blockly-active-tree-color: #60a5fa; - --blockly-selection-width: 3px; - } - /* Blocks, connections and fields. */ .blocklyKeyboardNavigation .blocklyActiveFocus:is(.blocklyPath, .blocklyHighlightedConnectionPath), From 2eb6017a6855e2d3011892eb87bf4d26be6217d3 Mon Sep 17 00:00:00 2001 From: Christopher Allen Date: Thu, 3 Jul 2025 01:30:55 +0100 Subject: [PATCH 05/10] refactor(CSS): move focus-related styling to src/index.ts --- src/index.ts | 81 +++++++++++++++++++++++++++++++++++++++++++++++++ test/index.html | 66 ---------------------------------------- 2 files changed, 81 insertions(+), 66 deletions(-) diff --git a/src/index.ts b/src/index.ts index da7f6a9b..78995069 100644 --- a/src/index.ts +++ b/src/index.ts @@ -156,3 +156,84 @@ Blockly.Css.register(` } `); +// Styling focusing blocks, connections and fields. +// +// This should be moved to core, being integrated into the +// existing styling of renderers in core/renderers/*/constants.ts. +Blockly.Css.register(` + /* Blocks, connections and fields. */ + .blocklyKeyboardNavigation + .blocklyActiveFocus:is(.blocklyPath, .blocklyHighlightedConnectionPath), + .blocklyKeyboardNavigation + .blocklyActiveFocus.blocklyField + > .blocklyFieldRect, + .blocklyKeyboardNavigation + .blocklyActiveFocus.blocklyIconGroup + > .blocklyIconShape:first-child { + stroke: var(--blockly-active-node-color); + stroke-width: var(--blockly-selection-width); + } + .blocklyKeyboardNavigation + .blocklyPassiveFocus:is( + .blocklyPath:not(.blocklyFlyout .blocklyPath), + .blocklyHighlightedConnectionPath + ), + .blocklyKeyboardNavigation + .blocklyPassiveFocus.blocklyField + > .blocklyFieldRect, + .blocklyKeyboardNavigation + .blocklyPassiveFocus.blocklyIconGroup + > .blocklyIconShape:first-child { + stroke: var(--blockly-active-node-color); + stroke-dasharray: 5px 3px; + stroke-width: var(--blockly-selection-width); + } + .blocklyKeyboardNavigation + .blocklyPassiveFocus.blocklyHighlightedConnectionPath { + /* The connection path is being unexpectedly hidden in core */ + display: unset !important; + } +`); + +// Styling for focusing the toolbox and flyout. +// +// This should be moved to core, to core/css.ts if not to somewhere +// more specific in core/toolbox/. +Blockly.Css.register(` + .blocklyKeyboardNavigation .blocklyFlyout:has(.blocklyActiveFocus), + .blocklyKeyboardNavigation .blocklyToolbox:has(.blocklyActiveFocus), + .blocklyKeyboardNavigation + .blocklyActiveFocus:is(.blocklyFlyout, .blocklyToolbox) { + outline-offset: calc(var(--blockly-selection-width) * -1); + outline: var(--blockly-selection-width) solid + var(--blockly-active-tree-color); + } + .blocklyKeyboardNavigation + .blocklyToolboxCategoryContainer:focus-visible { + outline: none; + } +`); + +// Styling for focusing the Workspace. +// +// This should be move to core, probably to core/css.ts. +Blockly.Css.register(` + .blocklyKeyboardNavigation + .blocklyWorkspace:has(.blocklyActiveFocus) + .blocklyWorkspaceFocusRing, + .blocklyKeyboardNavigation + .blocklySvg:has(~ .blocklyBlockDragSurface .blocklyActiveFocus) + .blocklyWorkspaceFocusRing, + .blocklyKeyboardNavigation + .blocklyWorkspace.blocklyActiveFocus + .blocklyWorkspaceFocusRing { + stroke: var(--blockly-active-tree-color); + stroke-width: calc(var(--blockly-selection-width) * 2); + } + .blocklyKeyboardNavigation + .blocklyWorkspace.blocklyActiveFocus + .blocklyWorkspaceSelectionRing { + stroke: var(--blockly-active-node-color); + stroke-width: var(--blockly-selection-width); + } +`); diff --git a/test/index.html b/test/index.html index e1b40b5b..137ffd55 100644 --- a/test/index.html +++ b/test/index.html @@ -86,72 +86,6 @@ font-weight: bold; } - /* Blocks, connections and fields. */ - .blocklyKeyboardNavigation - .blocklyActiveFocus:is(.blocklyPath, .blocklyHighlightedConnectionPath), - .blocklyKeyboardNavigation - .blocklyActiveFocus.blocklyField - > .blocklyFieldRect, - .blocklyKeyboardNavigation - .blocklyActiveFocus.blocklyIconGroup - > .blocklyIconShape:first-child { - stroke: var(--blockly-active-node-color); - stroke-width: var(--blockly-selection-width); - } - .blocklyKeyboardNavigation - .blocklyPassiveFocus:is( - .blocklyPath:not(.blocklyFlyout .blocklyPath), - .blocklyHighlightedConnectionPath - ), - .blocklyKeyboardNavigation - .blocklyPassiveFocus.blocklyField - > .blocklyFieldRect, - .blocklyKeyboardNavigation - .blocklyPassiveFocus.blocklyIconGroup - > .blocklyIconShape:first-child { - stroke: var(--blockly-active-node-color); - stroke-dasharray: 5px 3px; - stroke-width: var(--blockly-selection-width); - } - .blocklyKeyboardNavigation - .blocklyPassiveFocus.blocklyHighlightedConnectionPath { - /* The connection path is being unexpectedly hidden in core */ - display: unset !important; - } - - /* Toolbox and flyout. */ - .blocklyKeyboardNavigation .blocklyFlyout:has(.blocklyActiveFocus), - .blocklyKeyboardNavigation .blocklyToolbox:has(.blocklyActiveFocus), - .blocklyKeyboardNavigation - .blocklyActiveFocus:is(.blocklyFlyout, .blocklyToolbox) { - outline-offset: calc(var(--blockly-selection-width) * -1); - outline: var(--blockly-selection-width) solid - var(--blockly-active-tree-color); - } - /* Workspace */ - .blocklyKeyboardNavigation - .blocklyWorkspace:has(.blocklyActiveFocus) - .blocklyWorkspaceFocusRing, - .blocklyKeyboardNavigation - .blocklySvg:has(~ .blocklyBlockDragSurface .blocklyActiveFocus) - .blocklyWorkspaceFocusRing, - .blocklyKeyboardNavigation - .blocklyWorkspace.blocklyActiveFocus - .blocklyWorkspaceFocusRing { - stroke: var(--blockly-active-tree-color); - stroke-width: calc(var(--blockly-selection-width) * 2); - } - .blocklyKeyboardNavigation - .blocklyWorkspace.blocklyActiveFocus - .blocklyWorkspaceSelectionRing { - stroke: var(--blockly-active-node-color); - stroke-width: var(--blockly-selection-width); - } - .blocklyKeyboardNavigation - .blocklyToolboxCategoryContainer:focus-visible { - outline: none; - } - .blocklyRTL .blocklyMenuItemContent .blocklyShortcutContainer { flex-direction: row-reverse; } From c275b5b04ea9da43379b184af4c8fd8c4a585a10 Mon Sep 17 00:00:00 2001 From: Christopher Allen Date: Thu, 3 Jul 2025 01:35:35 +0100 Subject: [PATCH 06/10] fixup delete icon --- src/index.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/index.ts b/src/index.ts index 78995069..be10ed8e 100644 --- a/src/index.ts +++ b/src/index.ts @@ -136,6 +136,9 @@ export class KeyboardNavigation { // where it should eventually live. // Enable the delete icon for comments. +// +// This should remain in the plugin for the time being because we do +// not want to display the delete icon by default. Blockly.Css.register(` .blocklyDeleteIcon { display: block; From 2cd29907c438cba604bc5cf3622a23dc825dfe31 Mon Sep 17 00:00:00 2001 From: Christopher Allen Date: Thu, 3 Jul 2025 01:36:02 +0100 Subject: [PATCH 07/10] refactor(CSS): move context menu styling to src/index.ts --- src/index.ts | 19 +++++++++++++++++++ test/index.html | 13 ------------- 2 files changed, 19 insertions(+), 13 deletions(-) diff --git a/src/index.ts b/src/index.ts index be10ed8e..89022424 100644 --- a/src/index.ts +++ b/src/index.ts @@ -240,3 +240,22 @@ Blockly.Css.register(` stroke-width: var(--blockly-selection-width); } `); + +// Keyboard-nav-specific styling for the context menu. +// +// This should remain in the plugin for the time being because the +// classes selected are currently only defined in the plugin. +Blockly.Css.register(` + .blocklyRTL .blocklyMenuItemContent .blocklyShortcutContainer { + flex-direction: row-reverse; + } + .blocklyMenuItemContent .blocklyShortcutContainer { + width: 100%; + display: flex; + justify-content: space-between; + gap: 16px; + } + .blocklyMenuItemContent .blocklyShortcutContainer .blocklyShortcut { + color: #ccc; + } +`); diff --git a/test/index.html b/test/index.html index 137ffd55..212d0354 100644 --- a/test/index.html +++ b/test/index.html @@ -85,19 +85,6 @@ thead { font-weight: bold; } - - .blocklyRTL .blocklyMenuItemContent .blocklyShortcutContainer { - flex-direction: row-reverse; - } - .blocklyMenuItemContent .blocklyShortcutContainer { - width: 100%; - display: flex; - justify-content: space-between; - gap: 16px; - } - .blocklyMenuItemContent .blocklyShortcutContainer .blocklyShortcut { - color: #ccc; - } From c9bffa1cf0e4fc7728aaaf25cdf6f3b881653c01 Mon Sep 17 00:00:00 2001 From: Rachel Fenichel Date: Mon, 7 Jul 2025 14:31:51 -0700 Subject: [PATCH 08/10] chore: move CSS registration to a static method --- src/index.ts | 77 ++++++++++++++++++++++++++------------------------- test/index.ts | 3 ++ 2 files changed, 43 insertions(+), 37 deletions(-) diff --git a/src/index.ts b/src/index.ts index 89022424..18bc95b3 100644 --- a/src/index.ts +++ b/src/index.ts @@ -128,30 +128,31 @@ export class KeyboardNavigation { toggleShortcutDialog(): void { this.navigationController.shortcutDialog.toggle(this.workspace); } -} - -// Register CSS used by the plugin. -// -// This is broken up into sections by purpose, with some notes about -// where it should eventually live. -// Enable the delete icon for comments. -// -// This should remain in the plugin for the time being because we do -// not want to display the delete icon by default. -Blockly.Css.register(` + /** + * Register CSS used by the plugin. + * This is broken up into sections by purpose, with some notes about + * where it should eventually live. + * Must be called before `Blockly.inject`. + */ + static registerKeyboardNavigationStyles() { + // Enable the delete icon for comments. + // + // This should remain in the plugin for the time being because we do + // not want to display the delete icon by default. + Blockly.Css.register(` .blocklyDeleteIcon { display: block; } `); -// Set variables that will be used to control the appearance of the -// focus indicators. Attach them to the injectionDiv since they will -// apply to things contained therein. -// -// This should be moved to core, either to core/css.ts -// or to core/renderers/. -Blockly.Css.register(` + // Set variables that will be used to control the appearance of the + // focus indicators. Attach them to the injectionDiv since they will + // apply to things contained therein. + // + // This should be moved to core, either to core/css.ts + // or to core/renderers/. + Blockly.Css.register(` .injectionDiv { --blockly-active-node-color: #fff200; --blockly-active-tree-color: #60a5fa; @@ -159,11 +160,11 @@ Blockly.Css.register(` } `); -// Styling focusing blocks, connections and fields. -// -// This should be moved to core, being integrated into the -// existing styling of renderers in core/renderers/*/constants.ts. -Blockly.Css.register(` + // Styling focusing blocks, connections and fields. + // + // This should be moved to core, being integrated into the + // existing styling of renderers in core/renderers/*/constants.ts. + Blockly.Css.register(` /* Blocks, connections and fields. */ .blocklyKeyboardNavigation .blocklyActiveFocus:is(.blocklyPath, .blocklyHighlightedConnectionPath), @@ -198,11 +199,11 @@ Blockly.Css.register(` } `); -// Styling for focusing the toolbox and flyout. -// -// This should be moved to core, to core/css.ts if not to somewhere -// more specific in core/toolbox/. -Blockly.Css.register(` + // Styling for focusing the toolbox and flyout. + // + // This should be moved to core, to core/css.ts if not to somewhere + // more specific in core/toolbox/. + Blockly.Css.register(` .blocklyKeyboardNavigation .blocklyFlyout:has(.blocklyActiveFocus), .blocklyKeyboardNavigation .blocklyToolbox:has(.blocklyActiveFocus), .blocklyKeyboardNavigation @@ -217,10 +218,10 @@ Blockly.Css.register(` } `); -// Styling for focusing the Workspace. -// -// This should be move to core, probably to core/css.ts. -Blockly.Css.register(` + // Styling for focusing the Workspace. + // + // This should be move to core, probably to core/css.ts. + Blockly.Css.register(` .blocklyKeyboardNavigation .blocklyWorkspace:has(.blocklyActiveFocus) .blocklyWorkspaceFocusRing, @@ -241,11 +242,11 @@ Blockly.Css.register(` } `); -// Keyboard-nav-specific styling for the context menu. -// -// This should remain in the plugin for the time being because the -// classes selected are currently only defined in the plugin. -Blockly.Css.register(` + // Keyboard-nav-specific styling for the context menu. + // + // This should remain in the plugin for the time being because the + // classes selected are currently only defined in the plugin. + Blockly.Css.register(` .blocklyRTL .blocklyMenuItemContent .blocklyShortcutContainer { flex-direction: row-reverse; } @@ -259,3 +260,5 @@ Blockly.Css.register(` color: #ccc; } `); + } +} diff --git a/test/index.ts b/test/index.ts index c7a40388..138c2827 100644 --- a/test/index.ts +++ b/test/index.ts @@ -89,6 +89,9 @@ function createWorkspace(): Blockly.WorkspaceSvg { if (!blocklyDiv) { throw new Error('Missing blocklyDiv'); } + + // Must be called before injection. + KeyboardNavigation.registerKeyboardNavigationStyles(); const workspace = Blockly.inject(blocklyDiv, injectOptions); Blockly.ContextMenuItems.registerCommentOptions(); From 5be428d692002e7e7c41a9917bacd035614eb67e Mon Sep 17 00:00:00 2001 From: Rachel Fenichel Date: Mon, 7 Jul 2025 15:26:00 -0700 Subject: [PATCH 09/10] chore: add CSS registration call in webdriver tests --- test/webdriverio/index.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/test/webdriverio/index.ts b/test/webdriverio/index.ts index a43d4038..63ef40bc 100644 --- a/test/webdriverio/index.ts +++ b/test/webdriverio/index.ts @@ -78,6 +78,8 @@ function createWorkspace(): Blockly.WorkspaceSvg { if (!blocklyDiv) { throw new Error('Missing blocklyDiv'); } + // Must be called before injection. + KeyboardNavigation.registerKeyboardNavigationStyles(); const workspace = Blockly.inject(blocklyDiv, injectOptions); new KeyboardNavigation(workspace); From 512eb9907a1f93ec8ef56f58e9ee296f9bf87ddb Mon Sep 17 00:00:00 2001 From: Rachel Fenichel Date: Mon, 7 Jul 2025 15:31:47 -0700 Subject: [PATCH 10/10] chore: format --- test/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/index.ts b/test/index.ts index 138c2827..a49c42c0 100644 --- a/test/index.ts +++ b/test/index.ts @@ -89,7 +89,7 @@ function createWorkspace(): Blockly.WorkspaceSvg { if (!blocklyDiv) { throw new Error('Missing blocklyDiv'); } - + // Must be called before injection. KeyboardNavigation.registerKeyboardNavigationStyles(); const workspace = Blockly.inject(blocklyDiv, injectOptions);