Adjust marker and cursor colours from the theme (#3735)

* Support adjusting marker and cursor colours from the theme

core/renderers/common/constants.js

@@ -588,6 +588,7 @@ Blockly.blockRendering.ConstantProvider.prototype.setDynamicProperties_ =
     function(theme) {
     /* eslint-disable indent */
   this.setFontConstants_(theme);
+  this.setAccessibilityConstants_(theme);
 
   this.ADD_START_HATS = theme.startHats != null ? theme.startHats :
       this.ADD_START_HATS;
@@ -619,6 +620,20 @@ Blockly.blockRendering.ConstantProvider.prototype.setFontConstants_ = function(
   this.FIELD_TEXT_BASELINE = fontMetrics.baseline;
 };
 
+/**
+ * Set constants related to accessibility.
+ * @param {!Blockly.Theme} theme The current workspace theme.
+ * @protected
+ */
+Blockly.blockRendering.ConstantProvider.prototype.setAccessibilityConstants_ =
+    function(theme) {
+    /* eslint-disable indent */
+  this.CURSOR_COLOUR = theme.getComponentStyle('cursorColour') ||
+    this.CURSOR_COLOUR;
+  this.MARKER_COLOUR = theme.getComponentStyle('markerColour') ||
+    this.MARKER_COLOUR;
+}; /* eslint-enable indent */
+
 /**
  * Get or create a block style based on a single colour value.  Generate a name
  * for the style based on the colour.

core/renderers/common/marker_svg.js

@@ -123,6 +123,7 @@ Blockly.blockRendering.MarkerSvg.prototype.createDom = function() {
       }, null);
 
   this.createDomInternal_();
+  this.applyColour_();
   return this.svgGroup_;
 };
 
@@ -454,6 +455,13 @@ Blockly.blockRendering.MarkerSvg.prototype.draw = function(oldNode, curNode) {
     return;
   }
 
+  this.constants_ = this.workspace_.getRenderer().getConstants();
+
+  var defaultColour = this.isCursor() ? this.constants_.CURSOR_COLOUR :
+    this.constants_.MARKER_COLOUR;
+  this.colour_ = this.marker_.colour || defaultColour;
+  this.applyColour_();
+
   this.showAtLocation_(curNode);
 
   this.firemarkerEvent_(oldNode, curNode);
@@ -550,7 +558,6 @@ Blockly.blockRendering.MarkerSvg.prototype.createDomInternal_ = function() {
   // A horizontal line used to represent a workspace coordinate or next connection.
   this.markerSvgLine_ = Blockly.utils.dom.createSvgElement('rect',
       {
-        'fill': this.colour_,
         'width': this.constants_.CURSOR_WS_WIDTH,
         'height': this.constants_.WS_CURSOR_HEIGHT,
         'style': 'display: none'
@@ -562,8 +569,7 @@ Blockly.blockRendering.MarkerSvg.prototype.createDomInternal_ = function() {
       {
         'class': 'blocklyVerticalMarker',
         'rx': 10, 'ry': 10,
-        'style': 'display: none',
-        'stroke': this.colour_
+        'style': 'display: none'
       },
       this.markerSvg_);
 
@@ -571,8 +577,7 @@ Blockly.blockRendering.MarkerSvg.prototype.createDomInternal_ = function() {
   this.markerInput_ = Blockly.utils.dom.createSvgElement('path',
       {
         'transform': '',
-        'style': 'display: none',
-        'fill': this.colour_
+        'style': 'display: none'
       },
       this.markerSvg_);
 
@@ -583,7 +588,6 @@ Blockly.blockRendering.MarkerSvg.prototype.createDomInternal_ = function() {
         'transform': '',
         'style': 'display: none',
         'fill': 'none',
-        'stroke': this.colour_,
         'stroke-width': this.constants_.CURSOR_STROKE_WIDTH
       },
       this.markerSvg_);
@@ -591,7 +595,7 @@ Blockly.blockRendering.MarkerSvg.prototype.createDomInternal_ = function() {
   // Markers and stack markers don't blink.
   if (this.isCursor()) {
     var blinkProperties = this.getBlinkProperties_();
-    Blockly.utils.dom.createSvgElement('animate', this.getBlinkProperties_(),
+    Blockly.utils.dom.createSvgElement('animate', blinkProperties,
         this.markerSvgLine_);
     Blockly.utils.dom.createSvgElement('animate', blinkProperties,
         this.markerInput_);
@@ -603,6 +607,24 @@ Blockly.blockRendering.MarkerSvg.prototype.createDomInternal_ = function() {
   return this.markerSvg_;
 };
 
+/**
+ * Apply the marker's colour.
+ * @protected
+ */
+Blockly.blockRendering.MarkerSvg.prototype.applyColour_ = function() {
+  this.markerSvgLine_.setAttribute('fill', this.colour_);
+  this.markerSvgRect_.setAttribute('stroke', this.colour_);
+  this.markerInput_.setAttribute('fill', this.colour_);
+  this.markerBlock_.setAttribute('stroke', this.colour_);
+
+  if (this.isCursor()) {
+    var values = this.colour_ + ';transparent;transparent;';
+    this.markerSvgLine_.firstChild.setAttribute('values', values);
+    this.markerInput_.firstChild.setAttribute('values', values);
+    this.markerBlock_.firstChild.setAttribute('values', values);
+  }
+};
+
 /**
  * Dispose of this marker.
  * @package

core/renderers/common/path_object.js

@@ -60,17 +60,17 @@ Blockly.blockRendering.PathObject = function(root, style, constants) {
    * Holds the cursors svg element when the cursor is attached to the block.
    * This is null if there is no cursor on the block.
    * @type {SVGElement}
-   * @private
+   * @package
    */
-  this.cursorSvg_ = null;
+  this.cursorSvg = null;
 
   /**
    * Holds the markers svg element when the marker is attached to the block.
    * This is null if there is no marker on the block.
    * @type {SVGElement}
-   * @private
+   * @package
    */
-  this.markerSvg_ = null;
+  this.markerSvg = null;
 };
 
 /**
@@ -99,12 +99,12 @@ Blockly.blockRendering.PathObject.prototype.flipRTL = function() {
  */
 Blockly.blockRendering.PathObject.prototype.setCursorSvg = function(cursorSvg) {
   if (!cursorSvg) {
-    this.cursorSvg_ = null;
+    this.cursorSvg = null;
     return;
   }
 
   this.svgRoot.appendChild(cursorSvg);
-  this.cursorSvg_ = cursorSvg;
+  this.cursorSvg = cursorSvg;
 };
 
 /**
@@ -115,16 +115,16 @@ Blockly.blockRendering.PathObject.prototype.setCursorSvg = function(cursorSvg) {
  */
 Blockly.blockRendering.PathObject.prototype.setMarkerSvg = function(markerSvg) {
   if (!markerSvg) {
-    this.markerSvg_ = null;
+    this.markerSvg = null;
     return;
   }
 
-  if (this.cursorSvg_) {
-    this.svgRoot.insertBefore(markerSvg, this.cursorSvg_);
+  if (this.cursorSvg) {
+    this.svgRoot.insertBefore(markerSvg, this.cursorSvg);
   } else {
     this.svgRoot.appendChild(markerSvg);
   }
-  this.markerSvg_ = markerSvg;
+  this.markerSvg = markerSvg;
 };
 
 /**

core/renderers/zelos/marker_svg.js

@@ -119,8 +119,6 @@ Blockly.zelos.MarkerSvg.prototype.createDomInternal_ = function() {
   this.markerCircle_ = Blockly.utils.dom.createSvgElement('circle', {
     'r': this.constants_.CURSOR_RADIUS,
     'style': 'display: none',
-    'fill': this.colour_,
-    'stroke': this.colour_,
     'stroke-width': this.constants_.CURSOR_STROKE_WIDTH
   },
   this.markerSvg_);
@@ -135,3 +133,17 @@ Blockly.zelos.MarkerSvg.prototype.createDomInternal_ = function() {
   return this.markerSvg_;
 };
 
+/**
+ * @override
+ */
+Blockly.zelos.MarkerSvg.prototype.applyColour_ = function() {
+  Blockly.zelos.MarkerSvg.superClass_.applyColour_.call(this);
+
+  this.markerCircle_.setAttribute('fill', this.colour_);
+  this.markerCircle_.setAttribute('stroke', this.colour_);
+
+  if (this.isCursor()) {
+    var values = this.colour_ + ';transparent;transparent;';
+    this.markerCircle_.firstChild.setAttribute('values', values);
+  }
+};