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

* Support adjusting marker and cursor colours from the theme

core/block_svg.js

@@ -1664,9 +1664,19 @@ Blockly.BlockSvg.prototype.render = function(opt_bubble) {
   }
   Blockly.utils.dom.stopTextWidthCache();
 
-  var cursor = this.workspace.getCursor();
-  if (this.workspace.keyboardAccessibilityMode && this.pathObject.cursorSvg_) {
-    cursor.draw();
+  this.updateMarkers_();
+};
+
+/**
+ * Redraw any attached marker or cursor svgs if needed.
+ * @protected
+ */
+Blockly.BlockSvg.prototype.updateMarkers_ = function() {
+  if (this.workspace.keyboardAccessibilityMode && this.pathObject.cursorSvg) {
+    this.workspace.getCursor().draw();
+  }
+  if (this.workspace.keyboardAccessibilityMode && this.pathObject.markerSvg) {
+    this.workspace.getMarker(Blockly.navigation.MARKER_NAME).draw();
   }
 };
 

core/field.js

@@ -821,6 +821,7 @@ Blockly.Field.prototype.forceRerender = function() {
   if (this.sourceBlock_ && this.sourceBlock_.rendered) {
     this.sourceBlock_.render();
     this.sourceBlock_.bumpNeighbours();
+    this.updateMarkers_();
   }
 };
 
@@ -1093,3 +1094,17 @@ Blockly.Field.prototype.setMarkerSvg = function(markerSvg) {
   this.fieldGroup_.appendChild(markerSvg);
   this.markerSvg_ = markerSvg;
 };
+
+/**
+ * Redraw any attached marker or cursor svgs if needed.
+ * @protected
+ */
+Blockly.Field.prototype.updateMarkers_ = function() {
+  var workspace = this.sourceBlock_.workspace;
+  if (workspace.keyboardAccessibilityMode && this.cursorSvg_) {
+    workspace.getCursor().draw();
+  }
+  if (workspace.keyboardAccessibilityMode && this.markerSvg_) {
+    workspace.getMarker(Blockly.navigation.MARKER_NAME).draw();
+  }
+};

core/marker_manager.js

@@ -154,6 +154,16 @@ Blockly.MarkerManager.prototype.setMarkerSvg = function(markerSvg) {
   }
 };
 
+/**
+ * Redraw the attached cursor svg if needed.
+ * @package
+ */
+Blockly.MarkerManager.prototype.updateMarkers = function() {
+  if (this.workspace_.keyboardAccessibilityMode && this.cursorSvg_) {
+    this.workspace_.getCursor().draw();
+  }
+};
+
 /**
  * Dispose of the marker manager.
  * Go through and delete all markers associated with this marker manager.

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);
+  }
+};

core/theme.js

@@ -24,8 +24,8 @@ goog.require('Blockly.utils.object');
  * @param {!Object.<string, Blockly.Theme.CategoryStyle>=} opt_categoryStyles A
  *     map from style names (strings) to objects with style attributes for
  *     categories.
- * @param {!Object.<string, *>=} opt_componentStyles A map of Blockly component
- *     names to style value.
+ * @param {!Blockly.Theme.ComponentStyle=} opt_componentStyles A map of Blockly
+ *     component names to style value.
  * @constructor
  */
 Blockly.Theme = function(name, opt_blockStyles, opt_categoryStyles,
@@ -53,14 +53,15 @@ Blockly.Theme = function(name, opt_blockStyles, opt_categoryStyles,
 
   /**
    * The UI components styles map.
-   * @type {!Object.<string, *>}
+   * @type {!Blockly.Theme.ComponentStyle}
    * @package
    */
-  this.componentStyles = opt_componentStyles || Object.create(null);
+  this.componentStyles = opt_componentStyles ||
+    (/** @type {Blockly.Theme.ComponentStyle} */ (Object.create(null)));
 
   /**
    * The font style.
-   * @type {Blockly.Theme.FontStyle}
+   * @type {!Blockly.Theme.FontStyle}
    * @package
    */
   this.fontStyle = /** @type {Blockly.Theme.FontStyle} */ (Object.create(null));
@@ -68,10 +69,10 @@ Blockly.Theme = function(name, opt_blockStyles, opt_categoryStyles,
   /**
    * Whether or not to add a 'hat' on top of all blocks with no previous or
    * output connections.
-   * @type {boolean}
+   * @type {?boolean}
    * @package
    */
-  this.startHats = false;
+  this.startHats = null;
 };
 
 /**
@@ -93,6 +94,23 @@ Blockly.Theme.BlockStyle;
  */
 Blockly.Theme.CategoryStyle;
 
+/**
+ * A component style.
+ * @typedef {{
+ *            workspaceBackgroundColour:string?,
+ *            toolboxBackgroundColour:string?,
+ *            toolboxForegroundColour:string?,
+ *            flyoutBackgroundColour:string?,
+ *            flyoutForegroundColour:string?,
+ *            flyoutOpacity:number?,
+ *            scrollbarColour:string?,
+ *            scrollbarOpacity:number?,
+ *            markerColour:string?,
+ *            cursorColour:string?
+ *          }}
+ */
+Blockly.Theme.ComponentStyle;
+
 /**
  * A font style.
  * @typedef {{

core/theme/dark.js

@@ -24,6 +24,7 @@ Blockly.Themes.Dark = Blockly.Theme.defineTheme('dark', {
     'flyoutForegroundColour': '#ccc',
     'flyoutOpacity': 1,
     'scrollbarColour': '#797979',
-    'scrollbarOpacity': 0.4
+    'scrollbarOpacity': 0.4,
+    'cursorColour': '#d0d0d0'
   }
 });

core/workspace_svg.js

@@ -1211,6 +1211,8 @@ Blockly.WorkspaceSvg.prototype.render = function() {
       imList[i].render(false);
     }
   }
+
+  this.markerManager_.updateMarkers();
 };
 
 /**

tests/mocha/field_checkbox_test.js

@@ -167,6 +167,9 @@ suite('Checkbox Fields', function() {
         field.sourceBlock_ = {
           RTL: false,
           rendered: true,
+          workspace: {
+            keyboardAccessibilityMode: false
+          },
           render: function() { field.render_(); },
           bumpNeighbours: function() {}
         };