From 993322808ae474988af8f98678812280454d9d8b Mon Sep 17 00:00:00 2001 From: Christopher Allen Date: Wed, 2 Jul 2025 13:18:53 +0100 Subject: [PATCH 1/7] 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 2/7] 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 3/7] 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 4/7] 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 5/7] 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 6/7] 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 7/7] 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; - }