From 5cebb7049257c5048277b154d7ac3cddde5e900d Mon Sep 17 00:00:00 2001
From: nikolai-deriv <77829286+nikolai-deriv@users.noreply.github.com>
Date: Thu, 20 May 2021 09:39:17 +0300
Subject: [PATCH] nikolai/Function block label readability (#3154)

* highlight function name & wrap arguments into parenthesis

* put label name variable and field creation into else statement

* removed redundant variable, localize word "function" for label

* variable name fix

Co-authored-by: Matin shafiei <70938039+matin-binary@users.noreply.github.com>
---
 .../src/scratch/hooks/block_svg.js            | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/packages/bot-skeleton/src/scratch/hooks/block_svg.js b/packages/bot-skeleton/src/scratch/hooks/block_svg.js
index 9a69d6dd51b1..832c14f1a302 100644
--- a/packages/bot-skeleton/src/scratch/hooks/block_svg.js
+++ b/packages/bot-skeleton/src/scratch/hooks/block_svg.js
@@ -243,8 +243,6 @@ Blockly.BlockSvg.prototype.setCollapsed = function (collapsed) {
             .filter(icon => !(icon instanceof Blockly.ScratchBlockComment))
             .forEach(icon => icon.setVisible(false));
 
-        const text = this.toString(Blockly.COLLAPSE_CHARS);
-
         // Ensure class persists through collapse. Falls back to first
         // field that has a class. Doesn't work when multiple
         // field_labels on a block have different classes. So far we
@@ -264,12 +262,25 @@ Blockly.BlockSvg.prototype.setCollapsed = function (collapsed) {
         const dropdown_path =
             this.workspace.options.pathToMedia +
             (isDarkRgbColour(this.getColour()) ? 'dropdown-arrow.svg' : 'dropdown-arrow-dark.svg');
-        const field_label = new Blockly.FieldLabel(text, field_class);
         const field_expand_icon = new Blockly.FieldImage(dropdown_path, 16, 16, localize('Expand'), () =>
             this.setCollapsed(false)
         );
 
-        this.appendDummyInput(COLLAPSED_INPUT_NAME).appendField(field_label).appendField(field_expand_icon).init();
+        if (this.type === 'procedures_defreturn' || this.type === 'procedures_defnoreturn') {
+            const function_name = this.getFieldValue('NAME');
+            const args = ` (${this.arguments.join(', ')})`;
+
+            this.appendDummyInput(COLLAPSED_INPUT_NAME)
+                .appendField(new Blockly.FieldLabel(localize('function'), field_class))
+                .appendField(new Blockly.FieldLabel(function_name + args, 'header__title'))
+                .appendField(field_expand_icon)
+                .init();
+        } else {
+            const text = this.toString(Blockly.COLLAPSE_CHARS);
+            const field_label = new Blockly.FieldLabel(text, field_class);
+
+            this.appendDummyInput(COLLAPSED_INPUT_NAME).appendField(field_label).appendField(field_expand_icon).init();
+        }
     } else {
         this.removeInput(COLLAPSED_INPUT_NAME);
         this.setWarningText(null); // Clear any warnings inherited from enclosed blocks.