fix: fix styling of dropdown menus (#152)

* chore: remove block definitions monkeypatched by scratch-gui

* refactor: use block styles instead of colors to color blocks

* fix: fix highlighting of dropdown fields in shadow blocks

* fix: prevent white hover highlight on non-shadow dropdown fields

* fix: make selected dropdown color changes more robust

* chore: remove duplicative sound colors

* refactor: move block colors into a custom theme

* chore: condense placeholder block definitions

Author: gonfunko

src/blocks/control.js

@@ -20,7 +20,6 @@
 
 import * as Blockly from "blockly/core";
 import { Categories } from "../categories.js";
-import { Colours } from "../colours.js";
 
 Blockly.Blocks["control_forever"] = {
   /**
@@ -198,12 +197,7 @@ Blockly.Blocks["control_stop"] = {
     this.appendDummyInput()
       .appendField(Blockly.Msg.CONTROL_STOP)
       .appendField(stopDropdown, "STOP_OPTION");
-    this.setColour(
-      Colours.control.primary,
-      Colours.control.secondary,
-      Colours.control.tertiary,
-      Colours.control.quaternary
-    );
+    this.setStyle("colours_control");
     this.setPreviousStatement(true);
   },
 };
@@ -381,25 +375,10 @@ Blockly.Blocks["control_start_as_clone"] = {
   },
 };
 
-Blockly.Blocks["control_create_clone_of_menu"] = {
-  /**
-   * Create-clone drop-down menu.
-   * @this Blockly.Block
-   */
-  init: function () {
-    this.jsonInit({
-      message0: "%1",
-      args0: [
-        {
-          type: "field_dropdown",
-          name: "CLONE_OPTION",
-          options: [[Blockly.Msg.CONTROL_CREATECLONEOF_MYSELF, "_myself_"]],
-        },
-      ],
-      extensions: ["colours_control", "output_string"],
-    });
-  },
-};
+/**
+ * Create-clone drop-down menu. Populated dynamically by scratch-gui.
+ */
+Blockly.Blocks["control_create_clone_of_menu"] = {};
 
 Blockly.Blocks["control_create_clone_of"] = {
   /**

src/blocks/event.js

@@ -142,26 +142,11 @@ Blockly.Blocks["event_whenbroadcastreceived"] = {
   },
 };
 
-Blockly.Blocks["event_whenbackdropswitchesto"] = {
-  /**
-   * Block for when the current backdrop switched to a selected backdrop.
-   * @this Blockly.Block
-   */
-  init: function () {
-    this.jsonInit({
-      message0: Blockly.Msg.EVENT_WHENBACKDROPSWITCHESTO,
-      args0: [
-        {
-          type: "field_dropdown",
-          name: "BACKDROP",
-          options: [["backdrop1", "BACKDROP1"]],
-        },
-      ],
-      category: Categories.event,
-      extensions: ["colours_event", "shape_hat"],
-    });
-  },
-};
+/**
+ * Block for when the current backdrop switched to a selected backdrop.
+ * Populated dynamically by scratch-gui.
+ */
+Blockly.Blocks["event_whenbackdropswitchesto"] = {};
 
 Blockly.Blocks["event_whengreaterthan"] = {
   /**

src/blocks/looks.js

@@ -339,28 +339,10 @@ Blockly.Blocks["looks_setstretchto"] = {
   },
 };
 
-Blockly.Blocks["looks_costume"] = {
-  /**
-   * Costumes drop-down menu.
-   * @this Blockly.Block
-   */
-  init: function () {
-    this.jsonInit({
-      message0: "%1",
-      args0: [
-        {
-          type: "field_dropdown",
-          name: "COSTUME",
-          options: [
-            ["costume1", "COSTUME1"],
-            ["costume2", "COSTUME2"],
-          ],
-        },
-      ],
-      extensions: ["colours_looks", "output_string"],
-    });
-  },
-};
+/**
+ * Costumes drop-down menu. Populated dynamically by scratch-gui.
+ */
+Blockly.Blocks["looks_costume"] = {};
 
 Blockly.Blocks["looks_switchcostumeto"] = {
   /**
@@ -416,26 +398,10 @@ Blockly.Blocks["looks_switchbackdropto"] = {
   },
 };
 
-Blockly.Blocks["looks_backdrops"] = {
-  /**
-   * Backdrop list
-   * @this Blockly.Block
-   */
-  init: function () {
-    this.jsonInit({
-      id: "looks_backdrops",
-      message0: "%1",
-      args0: [
-        {
-          type: "field_dropdown",
-          name: "BACKDROP",
-          options: [["backdrop1", "BACKDROP1"]],
-        },
-      ],
-      extensions: ["colours_looks", "output_string"],
-    });
-  },
-};
+/**
+ * Backdrop list. Populated dynamically by scratch-gui.
+ */
+Blockly.Blocks["looks_backdrops"] = {};
 
 Blockly.Blocks["looks_gotofrontback"] = {
   /**

src/blocks/math.js

@@ -23,7 +23,6 @@
  * @author [email protected] (Quynh Neutron)
  */
 import * as Blockly from "blockly/core";
-import { Colours } from "../colours.js";
 import * as Constants from "../constants.js";
 
 Blockly.Blocks["math_number"] = {
@@ -43,10 +42,7 @@ Blockly.Blocks["math_number"] = {
       ],
       output: "Number",
       outputShape: Constants.OUTPUT_SHAPE_ROUND,
-      colour: Colours.textField,
-      colourSecondary: Colours.textField,
-      colourTertiary: Colours.textField,
-      colourQuaternary: Colours.textField,
+      extensions: ["colours_textfield"],
     });
   },
 };
@@ -68,10 +64,7 @@ Blockly.Blocks["math_integer"] = {
       ],
       output: "Number",
       outputShape: Constants.OUTPUT_SHAPE_ROUND,
-      colour: Colours.textField,
-      colourSecondary: Colours.textField,
-      colourTertiary: Colours.textField,
-      colourQuaternary: Colours.textField,
+      extensions: ["colours_textfield"],
     });
   },
 };
@@ -94,10 +87,7 @@ Blockly.Blocks["math_whole_number"] = {
       ],
       output: "Number",
       outputShape: Constants.OUTPUT_SHAPE_ROUND,
-      colour: Colours.textField,
-      colourSecondary: Colours.textField,
-      colourTertiary: Colours.textField,
-      colourQuaternary: Colours.textField,
+      extensions: ["colours_textfield"],
     });
   },
 };
@@ -119,10 +109,7 @@ Blockly.Blocks["math_positive_number"] = {
       ],
       output: "Number",
       outputShape: Constants.OUTPUT_SHAPE_ROUND,
-      colour: Colours.textField,
-      colourSecondary: Colours.textField,
-      colourTertiary: Colours.textField,
-      colourQuaternary: Colours.textField,
+      extensions: ["colours_textfield"],
     });
   },
 };
@@ -144,10 +131,7 @@ Blockly.Blocks["math_angle"] = {
       ],
       output: "Number",
       outputShape: Constants.OUTPUT_SHAPE_ROUND,
-      colour: Colours.textField,
-      colourSecondary: Colours.textField,
-      colourTertiary: Colours.textField,
-      colourQuaternary: Colours.textField,
+      extensions: ["colours_textfield"],
     });
   },
 };

src/blocks/motion.js

@@ -115,28 +115,10 @@ Blockly.Blocks["motion_pointindirection"] = {
   },
 };
 
-Blockly.Blocks["motion_pointtowards_menu"] = {
-  /**
-   * Point towards drop-down menu.
-   * @this Blockly.Block
-   */
-  init: function () {
-    this.jsonInit({
-      message0: "%1",
-      args0: [
-        {
-          type: "field_dropdown",
-          name: "TOWARDS",
-          options: [
-            [Blockly.Msg.MOTION_POINTTOWARDS_POINTER, "_mouse_"],
-            [Blockly.Msg.MOTION_POINTTOWARDS_RANDOM, "_random_"],
-          ],
-        },
-      ],
-      extensions: ["colours_motion", "output_string"],
-    });
-  },
-};
+/**
+ * Point towards drop-down menu. Populated dynamically by scratch-gui.
+ */
+Blockly.Blocks["motion_pointtowards_menu"] = {};
 
 Blockly.Blocks["motion_pointtowards"] = {
   /**
@@ -158,28 +140,10 @@ Blockly.Blocks["motion_pointtowards"] = {
   },
 };
 
-Blockly.Blocks["motion_goto_menu"] = {
-  /**
-   * Go to drop-down menu.
-   * @this Blockly.Block
-   */
-  init: function () {
-    this.jsonInit({
-      message0: "%1",
-      args0: [
-        {
-          type: "field_dropdown",
-          name: "TO",
-          options: [
-            [Blockly.Msg.MOTION_GOTO_POINTER, "_mouse_"],
-            [Blockly.Msg.MOTION_GOTO_RANDOM, "_random_"],
-          ],
-        },
-      ],
-      extensions: ["colours_motion", "output_string"],
-    });
-  },
-};
+/**
+ * Go to drop-down menu. Populated dynamically by scratch-gui.
+ */
+Blockly.Blocks["motion_goto_menu"] = {};
 
 Blockly.Blocks["motion_gotoxy"] = {
   /**
@@ -253,28 +217,10 @@ Blockly.Blocks["motion_glidesecstoxy"] = {
   },
 };
 
-Blockly.Blocks["motion_glideto_menu"] = {
-  /**
-   * Glide to drop-down menu
-   * @this Blockly.Block
-   */
-  init: function () {
-    this.jsonInit({
-      message0: "%1",
-      args0: [
-        {
-          type: "field_dropdown",
-          name: "TO",
-          options: [
-            [Blockly.Msg.MOTION_GLIDETO_POINTER, "_mouse_"],
-            [Blockly.Msg.MOTION_GLIDETO_RANDOM, "_random_"],
-          ],
-        },
-      ],
-      extensions: ["colours_motion", "output_string"],
-    });
-  },
-};
+/**
+ * Glide to drop-down menu. Populated dynamically by scratch-gui.
+ */
+Blockly.Blocks["motion_glideto_menu"] = {};
 
 Blockly.Blocks["motion_glideto"] = {
   /**

src/blocks/note.js

@@ -23,7 +23,6 @@
  * @author [email protected] (Eric Rosenbaum)
  */
 import * as Blockly from "blockly/core";
-import { Colours } from "../colours.js";
 import * as Constants from "../constants.js";
 
 Blockly.Blocks["note"] = {
@@ -43,10 +42,7 @@ Blockly.Blocks["note"] = {
       ],
       outputShape: Constants.OUTPUT_SHAPE_ROUND,
       output: "Number",
-      colour: Colours.textField,
-      colourSecondary: Colours.textField,
-      colourTertiary: Colours.textField,
-      colourQuaternary: Colours.textField,
+      extensions: ["colours_textfield"],
     });
   },
 };

src/blocks/procedures.js

@@ -23,7 +23,6 @@
  */
 
 import * as Blockly from "blockly/core";
-import { Colours } from "../colours.js";
 import { FieldTextInputRemovable } from "../fields/field_textinput_removable.js";
 
 class DuplicateOnDragDraggable {
@@ -984,11 +983,7 @@ Blockly.Blocks["argument_editor_boolean"] = {
           text: "foo",
         },
       ],
-      colour: Colours.textField,
-      colourSecondary: Colours.textField,
-      colourTertiary: Colours.textField,
-      colourQuaternary: Colours.textField,
-      extensions: ["output_boolean"],
+      extensions: ["colours_textfield", "output_boolean"],
     });
 
     // Exist on declaration and arguments editors, with different implementations.
@@ -1007,11 +1002,7 @@ Blockly.Blocks["argument_editor_string_number"] = {
           text: "foo",
         },
       ],
-      colour: Colours.textField,
-      colourSecondary: Colours.textField,
-      colourTertiary: Colours.textField,
-      colourQuaternary: Colours.textField,
-      extensions: ["output_number", "output_string"],
+      extensions: ["colours_textfield", "output_number", "output_string"],
     });
 
     // Exist on declaration and arguments editors, with different implementations.