Support enabling start hats from themes (#3722)

* Support themes configuring the start hats of blocks. Add test themes

.eslintignore

@@ -4,6 +4,7 @@ gulpfile.js
 /msg/*
 /core/utils/global.js
 /tests/blocks/*
+/tests/themes/*
 /tests/compile/*
 /tests/jsunit/*
 /tests/generators/*

core/renderers/common/constants.js

@@ -42,6 +42,13 @@ Blockly.blockRendering.ConstantProvider = function() {
    */
   this.DYNAMICALLY_SET_STRING_ = '';
 
+  /**
+   * A placeholder value for boolean constants that are dynamically set.
+   * @type {boolean}
+   * @protected
+   */
+  this.DYNAMICALLY_SET_BOOLEAN_ = false;
+
   /**
    * The size of an empty spacer.
    * @type {number}
@@ -195,7 +202,7 @@ Blockly.blockRendering.ConstantProvider = function() {
    * connections. Can be overridden by 'hat' property on Theme.BlockStyle.
    * @type {boolean}
    */
-  this.ADD_START_HATS = false;
+  this.ADD_START_HATS = this.DYNAMICALLY_SET_BOOLEAN_;
 
   /**
    * Height of the top hat.
@@ -605,6 +612,8 @@ Blockly.blockRendering.ConstantProvider.prototype.setDynamicProperties_ =
     function(theme) {
     /* eslint-disable indent */
   this.setFontConstants_(theme);
+
+  this.ADD_START_HATS = theme.startHats != null ? theme.startHats : false;
 }; /* eslint-enable indent */
 
 /**

core/renderers/zelos/constants.js

@@ -407,8 +407,10 @@ Blockly.zelos.ConstantProvider.prototype.init = function() {
 /**
  * @override
  */
-Blockly.zelos.ConstantProvider.prototype.setTheme = function(theme) {
-  Blockly.zelos.ConstantProvider.superClass_.setTheme.call(this, theme);
+Blockly.zelos.ConstantProvider.prototype.setDynamicProperties_ = function(
+    theme) {
+  Blockly.zelos.ConstantProvider.superClass_.setDynamicProperties_.call(this,
+      theme);
 
   this.SELECTED_GLOW_COLOUR =
       theme.getComponentStyle('selectedGlowColour') ||

core/theme.js

@@ -61,8 +61,17 @@ Blockly.Theme = function(name, blockStyles, categoryStyles,
   /**
    * The font style.
    * @type {?Blockly.Theme.FontStyle}
+   * @package
    */
   this.fontStyle = null;
+
+  /**
+   * Whether or not to add a 'hat' on top of all blocks with no previous or
+   * output connections.
+   * @type {?boolean}
+   * @package
+   */
+  this.startHats = null;
 };
 
 /**
@@ -121,6 +130,15 @@ Blockly.Theme.prototype.setFontStyle = function(fontStyle) {
   this.fontStyle = fontStyle;
 };
 
+/**
+ * Configure a theme's start hats.
+ * @param {boolean} startHats True if the theme enables start hats, false
+ *     otherwise.
+*/
+Blockly.Theme.prototype.setStartHats = function(startHats) {
+  this.startHats = startHats;
+};
+
 /**
  * Gets the style for a given Blockly UI component.  If the style value is a
  * string, we attempt to find the value of any named references.

tests/playground.html

@@ -65,6 +65,7 @@
 <script src="../blocks/variables_dynamic.js"></script>
 <script src="../blocks/procedures.js"></script>
 <script src="blocks/test_blocks.js"></script>
+<script src="themes/test_themes.js"></script>
 <script src="./playgrounds/screenshot.js"></script>
 
 <script>
@@ -151,6 +152,7 @@ function start() {
   workspace.configureContextMenu = configureContextMenu;
   addToolboxButtonCallbacks();
   addRenderDebugOptionsCheckboxes();
+  populateTestThemes();
   // Restore previously displayed text.
   if (sessionStorage) {
     var text = sessionStorage.getItem('textarea');
@@ -358,7 +360,12 @@ function changeTheme() {
   } else if (theme.value === "zelos") {
     Blockly.getMainWorkspace().setTheme(Blockly.Themes.Zelos);
   } else {
-    Blockly.getMainWorkspace().setTheme(Blockly.Themes.Classic);
+    var testTheme = getTestTheme(theme.value);
+    if (testTheme) {
+      Blockly.getMainWorkspace().setTheme(testTheme);
+    } else {
+      Blockly.getMainWorkspace().setTheme(Blockly.Themes.Classic);
+    }
   }
 }
 

tests/themes/test_themes.js

@@ -0,0 +1,62 @@
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+'use strict';
+
+goog.provide('Blockly.TestThemes');
+
+
+/**
+ * A theme with classic colours but enables start hats.
+ */
+Blockly.Themes.TestHats = new Blockly.Theme('testhats',
+    Blockly.Themes.Classic.blockStyles, Blockly.Themes.Classic.categoryStyles);
+Blockly.Themes.TestHats.setStartHats(true);
+
+/**
+ * A theme with classic colours but a different font.
+ */
+Blockly.Themes.TestFont = new Blockly.Theme('testfont',
+    Blockly.Themes.Classic.blockStyles, Blockly.Themes.Classic.categoryStyles);
+Blockly.Themes.TestFont.setFontStyle({
+  'family': '"Times New Roman", Times, serif',
+  'weight': null, // Use default font-weight
+  'size': 16
+});
+
+/**
+ * Holds the test theme name to Theme instance mapping.
+ * @type {!Object<string, Blockly.Theme>}
+ * @private
+ */
+Blockly.Themes.testThemes_ = {
+  'Test Hats': Blockly.Themes.TestHats,
+  'Test Font': Blockly.Themes.TestFont
+};
+
+/**
+ * Get a test theme by name.
+ * @param {string} value The theme name.
+ * @return {Blockly.Theme} A theme object or undefined if one doesn't exist.
+ * @package
+ */
+function getTestTheme(value) {
+  return Blockly.Themes.testThemes_[value];
+}
+
+/**
+ * Populate the theme changer dropdown to list the set of test themes.
+ * @package
+ */
+function populateTestThemes() {
+  var themeChanger = document.getElementById('themeChanger');
+  var keys = Object.keys(Blockly.Themes.testThemes_);
+  for (var i = 0, key; (key = keys[i]); i++) {
+    var option = document.createElement('option');
+    option.setAttribute('value', key);
+    option.textContent = key;
+    themeChanger.appendChild(option);
+  }
+}