Several Blockly fixes (#9939)

* restore red color of block quotes

* bring back default paramter for text blocks

* bring back light outline for dark shadow blocks

* remove references to inDebugWorkspace

* get field slider track color from the parent block

libs/pxt-common/pxt-core.d.ts

@@ -272,6 +272,7 @@ declare interface String {
     //% shim=String_::charAt weight=48
     //% help=text/char-at
     //% blockId="string_get" block="char from %this=text|at %pos" blockNamespace="text"
+    //% this.defl="this"
     charAt(index: number): string;
 
     /** Returns the length of a String object. */
@@ -293,6 +294,7 @@ declare interface String {
     //% shim=String_::compare
     //% help=text/compare
     //% blockId="string_compare" block="compare %this=text| to %that" blockNamespace="text"
+    //% this.defl="this"
     compare(that: string): number;
 
     /**
@@ -303,6 +305,7 @@ declare interface String {
     //% helper=stringSubstr
     //% help=text/substr
     //% blockId="string_substr" block="substring of %this=text|from %start|of length %length" blockNamespace="text"
+    //% this.defl="this"
     substr(start: number, length?: number): string;
 
     /**
@@ -338,6 +341,7 @@ declare interface String {
     //% help=text/is-empty
     //% blockId="string_isempty" blockNamespace="text"
     //% block="%this=text| is empty"
+    //% this.defl="this"
     isEmpty(): boolean;
 
     /**
@@ -349,6 +353,7 @@ declare interface String {
     //% help=text/index-of
     //% blockId="string_indexof" blockNamespace="text"
     //% block="%this=text|find index of %searchValue"
+    //% this.defl="this"
     indexOf(searchValue: string, start?: number): number;
 
     /**
@@ -360,6 +365,7 @@ declare interface String {
     //% help=text/includes
     //% blockId="string_includes" blockNamespace="text"
     //% block="%this=text|includes %searchValue"
+    //% this.defl="this"
     includes(searchValue: string, start?: number): boolean;
 
     /**
@@ -371,6 +377,7 @@ declare interface String {
     //% help=text/split
     //% blockId="string_split" blockNamespace="text"
     //% block="split %this=text|at %separator"
+    //% this.defl="this"
     split(separator?: string, limit?: number): string[];
 
     /**

pxtblocks/builtins/loops.ts

@@ -177,8 +177,8 @@ export function initLoops() {
          * @param {!Array} options List of menu options to add to.
          * @this Blockly.Block
          */
-        customContextMenu: function (options: any[]) {
-            if (!this.isCollapsed() && !this.inDebugWorkspace()) {
+        customContextMenu: function (this: Blockly.BlockSvg, options: any[]) {
+            if (!this.isCollapsed() && !(this.workspace?.options?.readOnly)) {
                 let option: any = { enabled: true };
                 let name = this.getField('VAR').getText();
                 option.text = lf("Create 'get {0}'", name);

pxtblocks/builtins/variables.ts

@@ -154,8 +154,8 @@ export function initVariables() {
          * @param {!Array} options List of menu options to add to.
          * @this Blockly.Block
          */
-        customContextMenu: function (options: any[]) {
-            if (!(this.inDebugWorkspace())) {
+        customContextMenu: function (this: Blockly.BlockSvg, options: any[]) {
+            if (!(this.workspace?.options?.readOnly)) {
                 let option: any = {
                     enabled: this.workspace.remainingCapacity() > 0
                 };

pxtblocks/plugins/functions/blocks/functionDefinitionBlock.ts

@@ -142,7 +142,7 @@ const FUNCTION_DEFINITION_MIXIN: FunctionDefinitionMixin = {
 
     makeEditOption: function (this: FunctionDefinitionBlock) {
         return {
-            enabled: true, // FIXME !this.inDebugWorkspace(),
+            enabled: !(this.workspace?.options?.readOnly),
             text: Blockly.Msg.FUNCTIONS_EDIT_OPTION,
             callback: () => {
                 editFunctionCallback(this);
@@ -160,7 +160,7 @@ const FUNCTION_DEFINITION_MIXIN: FunctionDefinitionMixin = {
         callBlock.setAttribute("type", FUNCTION_CALL_BLOCK_TYPE);
 
         return {
-            enabled: this.workspace.remainingCapacity() > 0, // FIXME && !block.inDebugWorkspace(),
+            enabled: this.workspace.remainingCapacity() > 0 && !(this.workspace?.options?.readOnly),
             text: Blockly.Msg.FUNCTIONS_CREATE_CALL_OPTION.replace("%1", functionName),
             callback: Blockly.ContextMenu.callbackFactory(this, callBlock),
         };

pxtblocks/plugins/functions/extensions.ts

@@ -52,7 +52,7 @@ function inlineSvgs(this: InlineSvgsExtensionBlock) {
 const contextMenuEditMixin = {
     customContextMenu: function (this: Blockly.Block, menuOptions: any[]) {
         const gtdOption = {
-            enabled: true, // FIXME: !this.inDebugWorkspace(),
+            enabled: !(this.workspace?.options?.readOnly),
             text: Blockly.Msg[MsgKey.FUNCTIONS_GO_TO_DEFINITION_OPTION],
             callback: () => {
                 const functionName = this.getField("function_name")!.getText();

pxtblocks/plugins/math/fieldSlider.ts

@@ -179,6 +179,25 @@ export class FieldSlider extends Blockly.FieldNumber {
         slider.min = this.getMin() + "";
         slider.max = this.getMax() + "";
         slider.value = this.getValue() + "";
+
+        let color: string;
+
+        if (this.sourceBlock_ instanceof Blockly.BlockSvg) {
+            // If the block color is white, grab from the parent block instead
+            if (this.sourceBlock_.getColour() === "#ffffff") {
+                if (this.sourceBlock_.getParent()) {
+                    color = this.sourceBlock_.getParent().getColourTertiary();
+                }
+            }
+            else {
+                color = this.sourceBlock_.getColourTertiary();
+            }
+        }
+
+        if (color) {
+            slider.setAttribute("style", `--blocklyFieldSliderBackgroundColor: ${color}`);
+        }
+
         if (!Number.isNaN(this.step_)) {
             slider.step = this.step_ + "";
         }
@@ -212,6 +231,9 @@ export class FieldSlider extends Blockly.FieldNumber {
 Blockly.fieldRegistry.register('field_slider', FieldSlider);
 
 Blockly.Css.register(`
+:root {
+    --blocklyFieldSliderBackgroundColor: #547AB2;
+}
 .blocklyFieldSliderLabel {
     font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
     font-size: 0.65rem;
@@ -240,7 +262,7 @@ input[type=range]::-webkit-slider-runnable-track {
     outline: none;
     border-radius: 11px;
     margin-bottom: 20px;
-    background: #547AB2;
+    background: var(--blocklyFieldSliderBackgroundColor);
 }
 input[type=range]::-webkit-slider-thumb {
     -webkit-appearance: none;

pxtblocks/plugins/renderer/pathObject.ts

@@ -74,6 +74,20 @@ export class PathObject extends Blockly.zelos.PathObject {
         }
     }
 
+    override applyColour(block: Blockly.BlockSvg): void {
+        super.applyColour(block);
+
+        // For dark shadow blocks, add a lighter border to differentiate
+        if (block.isShadow() && block.getParent()) {
+            const colour = block.getParent().style.colourTertiary;
+            const rgb = Blockly.utils.colour.hexToRgb(colour);
+            const luminance = calculateLuminance(rgb);
+            if (luminance < 0.15) {
+                this.svgPath.setAttribute('stroke', Blockly.utils.colour.blend("#ffffff", colour, 0.3));
+            }
+        }
+    }
+
     setHasDottedOutllineOnHover(enabled: boolean) {
         this.hasDottedOutlineOnHover = enabled;
 
@@ -127,6 +141,10 @@ export class PathObject extends Blockly.zelos.PathObject {
     }
 }
 
+function calculateLuminance(rgb: number[]) {
+    return ((0.2126 * rgb[0]) + (0.7152 * rgb[1]) + (0.0722 * rgb[2])) / 255;
+}
+
 Blockly.Css.register(`
 .blockly-dotted-outline-on-hover {
     transition: stroke .4s;

pxtblocks/plugins/text/fieldString.ts

@@ -86,4 +86,10 @@ export class FieldString extends Blockly.FieldTextInput {
     }
 }
 
+Blockly.Css.register(`
+.field-text-quote {
+    fill: #a31515 !important;
+}
+`);
+
 Blockly.fieldRegistry.register('field_string', FieldString);

pxtblocks/toolbox.ts

@@ -351,7 +351,7 @@ export function createToolboxBlock(info: pxtc.BlocksInfo, fn: pxtc.SymbolInfo, c
         let shadowId = t.shadowBlockId;
         let defaultValue = t.defaultValue;
 
-        if (!isFixedInstance && !shadowId) {
+        if (!isFixedInstance && (!shadowId || shadowId === "variables_get")) {
             shadowId = "variables_get";
             defaultValue = defaultValue || t.definitionName;
         }

pxtlib/blocks.ts

@@ -151,10 +151,10 @@ namespace pxt.blocks {
             const defName = def.name;
             const isVar = !def.shadowBlockId || def.shadowBlockId === "variables_get";
 
-            let defaultValue: string;
+            let defaultValue = fn.attributes.paramDefl[defName] || fn.attributes.paramDefl["this"];
 
             if (isVar) {
-                defaultValue = def.varName || fn.attributes.paramDefl[defName] || fn.attributes.paramDefl["this"];
+                defaultValue = def.varName || defaultValue;
             }
 
             res.thisParameter = {