Insertion marker properties in theme (#3752)

* Pipe inseriton marker colour and opacity from theme

core/block_svg.js

@@ -917,7 +917,8 @@ Blockly.BlockSvg.prototype.setInsertionMarker = function(insertionMarker) {
   }
   this.isInsertionMarker_ = insertionMarker;
   if (this.isInsertionMarker_) {
-    this.setColour(Blockly.INSERTION_MARKER_COLOUR);
+    this.setColour(this.workspace.getRenderer().getConstants().
+        INSERTION_MARKER_COLOUR);
     this.pathObject.updateInsertionMarker(true);
   }
 };

core/constants.js

@@ -54,12 +54,6 @@ Blockly.CONNECTING_SNAP_RADIUS = Blockly.SNAP_RADIUS;
  */
 Blockly.CURRENT_CONNECTION_PREFERENCE = 8;
 
-/**
- * The main colour of insertion markers, in hex.  The block is rendered a
- * transparent grey by changing the fill opacity in CSS.
- */
-Blockly.INSERTION_MARKER_COLOUR = '#000000';
-
 /**
  * Delay in ms between trigger and bumping unconnected block out of alignment.
  */

core/insertion_marker_manager.js

@@ -255,16 +255,18 @@ Blockly.InsertionMarkerManager.prototype.createMarkerBlock_ = function(sourceBlo
     }
     result.setCollapsed(sourceBlock.isCollapsed());
     result.setInputsInline(sourceBlock.getInputsInline());
-    // Copy field values from the other block.  These values may impact the
-    // rendered size of the insertion marker.  Note that we do not care about
-    // child blocks here.
+    // Copy visible field values from the other block.  These values may impact
+    // the rendered size of the insertion marker.  Note that we do not care
+    // about child blocks here.
     for (var i = 0; i < sourceBlock.inputList.length; i++) {
       var sourceInput = sourceBlock.inputList[i];
-      var resultInput = result.inputList[i];
-      for (var j = 0; j < sourceInput.fieldRow.length; j++) {
-        var sourceField = sourceInput.fieldRow[j];
-        var resultField = resultInput.fieldRow[j];
-        resultField.setValue(sourceField.getValue());
+      if (sourceInput.isVisible()) {
+        var resultInput = result.inputList[i];
+        for (var j = 0; j < sourceInput.fieldRow.length; j++) {
+          var sourceField = sourceInput.fieldRow[j];
+          var resultField = resultInput.fieldRow[j];
+          resultField.setValue(sourceField.getValue());
+        }
       }
     }
 

core/renderers/common/constants.js

@@ -502,6 +502,21 @@ Blockly.blockRendering.ConstantProvider = function() {
    */
   this.FULL_BLOCK_FIELDS = false;
 
+  /**
+   * The main colour of insertion markers, in hex.  The block is rendered a
+   * transparent grey by changing the fill opacity in CSS.
+   * @type {string}
+   * @package
+   */
+  this.INSERTION_MARKER_COLOUR = '#000000';
+
+  /**
+   * The insertion marker opacity.
+   * @type {number}
+   * @package
+   */
+  this.INSERTION_MARKER_OPACITY = 0.2;
+
   /**
    * Enum for connection shapes.
    * @enum {number}
@@ -588,7 +603,7 @@ Blockly.blockRendering.ConstantProvider.prototype.setDynamicProperties_ =
     function(theme) {
     /* eslint-disable indent */
   this.setFontConstants_(theme);
-  this.setAccessibilityConstants_(theme);
+  this.setComponentConstants_(theme);
 
   this.ADD_START_HATS = theme.startHats != null ? theme.startHats :
       this.ADD_START_HATS;
@@ -621,17 +636,23 @@ Blockly.blockRendering.ConstantProvider.prototype.setFontConstants_ = function(
 };
 
 /**
- * Set constants related to accessibility.
+ * Set constants from a theme's component styles.
  * @param {!Blockly.Theme} theme The current workspace theme.
  * @protected
  */
-Blockly.blockRendering.ConstantProvider.prototype.setAccessibilityConstants_ =
+Blockly.blockRendering.ConstantProvider.prototype.setComponentConstants_ =
     function(theme) {
     /* eslint-disable indent */
   this.CURSOR_COLOUR = theme.getComponentStyle('cursorColour') ||
     this.CURSOR_COLOUR;
   this.MARKER_COLOUR = theme.getComponentStyle('markerColour') ||
     this.MARKER_COLOUR;
+  this.INSERTION_MARKER_COLOUR =
+    theme.getComponentStyle('insertionMarkerColour') ||
+    this.INSERTION_MARKER_COLOUR;
+  this.INSERTION_MARKER_OPACITY =
+    Number(theme.getComponentStyle('insertionMarkerOpacity')) ||
+    this.INSERTION_MARKER_OPACITY;
 }; /* eslint-enable indent */
 
 /**
@@ -1119,11 +1140,12 @@ Blockly.blockRendering.ConstantProvider.prototype.injectCSS_ = function(
   var cssNodeId = 'blockly-renderer-style-' + tagName;
   this.cssNode_ =
     /** @type {!HTMLStyleElement} */ (document.getElementById(cssNodeId));
+  var text = cssArray.join('\n');
   if (this.cssNode_) {
-    // Already injected.
+    // Already injected, update if the theme changed.
+    this.cssNode_.firstChild.textContent = text;
     return;
   }
-  var text = cssArray.join('\n');
   // Inject CSS tag at start of head.
   var cssNode =
     /** @type {!HTMLStyleElement} */ (document.createElement('style'));
@@ -1197,6 +1219,12 @@ Blockly.blockRendering.ConstantProvider.prototype.getCSS_ = function(selector) {
     selector + ' .blocklyReplaceable .blocklyPathDark {',
       'display: none;',
     '}',
+
+    // Insertion marker.
+    selector + ' .blocklyInsertionMarker>.blocklyPath {',
+      'fill-opacity: ' + this.INSERTION_MARKER_OPACITY + ';',
+      'stroke: none',
+    '}',
     /* eslint-enable indent */
   ];
 };

core/renderers/geras/constants.js

@@ -44,3 +44,21 @@ Blockly.geras.ConstantProvider = function() {
 };
 Blockly.utils.object.inherits(Blockly.geras.ConstantProvider,
     Blockly.blockRendering.ConstantProvider);
+
+
+/**
+ * @override
+ */
+Blockly.geras.ConstantProvider.prototype.getCSS_ = function(selector) {
+  return Blockly.geras.ConstantProvider.superClass_.getCSS_.call(this, selector)
+      .concat([
+        /* eslint-disable indent */
+        // Insertion marker.
+        selector + ' .blocklyInsertionMarker>.blocklyPathLight,',
+        selector + ' .blocklyInsertionMarker>.blocklyPathDark {',
+          'fill-opacity: ' + this.INSERTION_MARKER_OPACITY + ';',
+          'stroke: none',
+        '}',
+        /* eslint-enable indent */
+      ]);
+};

core/renderers/zelos/constants.js

@@ -965,6 +965,12 @@ Blockly.zelos.ConstantProvider.prototype.getCSS_ = function(selector) {
     selector + ' .blocklyDisabled > .blocklyOutlinePath {',
       'fill: url(#blocklyDisabledPattern' + this.randomIdentifier + ')',
     '}',
+
+    // Insertion marker.
+    selector + ' .blocklyInsertionMarker>.blocklyPath {',
+      'fill-opacity: ' + this.INSERTION_MARKER_OPACITY + ';',
+      'stroke: none',
+    '}',
     /* eslint-enable indent */
   ];
 };

core/theme.js

@@ -105,8 +105,14 @@ Blockly.Theme.CategoryStyle;
  *            flyoutOpacity:number?,
  *            scrollbarColour:string?,
  *            scrollbarOpacity:number?,
+ *            insertionMarkerColour:string?,
+ *            insertionMarkerOpacity:number?,
  *            markerColour:string?,
- *            cursorColour:string?
+ *            cursorColour:string?,
+ *            selectedGlowColour:string?,
+ *            selectedGlowOpacity:number?,
+ *            replacementGlowColour:string?,
+ *            replacementGlowOpacity:number?
  *          }}
  */
 Blockly.Theme.ComponentStyle;
@@ -202,6 +208,7 @@ Blockly.Theme.defineTheme = function(name, themeObj) {
   var base = themeObj['base'];
   if (base && base instanceof Blockly.Theme) {
     Blockly.utils.object.deepMerge(theme, base);
+    theme.name = name;
   }
   
   Blockly.utils.object.deepMerge(theme.blockStyles,

core/theme/dark.js

@@ -24,6 +24,8 @@ Blockly.Themes.Dark = Blockly.Theme.defineTheme('dark', {
     'flyoutForegroundColour': '#ccc',
     'flyoutOpacity': 1,
     'scrollbarColour': '#797979',
+    'insertionMarkerColour': '#fff',
+    'insertionMarkerOpacity': 0.3,
     'scrollbarOpacity': 0.4,
     'cursorColour': '#d0d0d0'
   }