Changes Blockly style to be Blockly theme.

blockly_uncompressed.js

@@ -85,7 +85,7 @@ goog.addDependency("../../../" + dir + "/core/options.js", ['Blockly.Options'],
 goog.addDependency("../../../" + dir + "/core/procedures.js", ['Blockly.Procedures'], ['Blockly.Blocks', 'Blockly.constants', 'Blockly.Events.BlockChange', 'Blockly.Field', 'Blockly.Names', 'Blockly.Workspace', 'Blockly.Xml', 'Blockly.Xml.utils']);
 goog.addDependency("../../../" + dir + "/core/rendered_connection.js", ['Blockly.RenderedConnection'], ['Blockly.Connection', 'Blockly.utils', 'goog.math.Coordinate']);
 goog.addDependency("../../../" + dir + "/core/scrollbar.js", ['Blockly.Scrollbar', 'Blockly.ScrollbarPair'], ['Blockly.utils', 'goog.events.BrowserFeature', 'goog.math.Coordinate']);
-goog.addDependency("../../../" + dir + "/core/style.js", ['Blockly.Style'], []);
+goog.addDependency("../../../" + dir + "/core/theme.js", ['Blockly.Theme'], []);
 goog.addDependency("../../../" + dir + "/core/toolbox.js", ['Blockly.Toolbox'], ['Blockly.Events.Ui', 'Blockly.Flyout', 'Blockly.HorizontalFlyout', 'Blockly.Touch', 'Blockly.utils', 'Blockly.VerticalFlyout', 'goog.events', 'goog.events.BrowserFeature', 'goog.html.SafeHtml', 'goog.html.SafeStyle', 'goog.math.Rect', 'goog.style', 'goog.ui.tree.TreeControl', 'goog.ui.tree.TreeNode']);
 goog.addDependency("../../../" + dir + "/core/tooltip.js", ['Blockly.Tooltip'], ['Blockly.utils', 'goog.dom']);
 goog.addDependency("../../../" + dir + "/core/touch.js", ['Blockly.Touch'], ['Blockly.utils', 'goog.events.BrowserFeature']);
@@ -1797,7 +1797,7 @@ goog.require('Blockly.Procedures');
 goog.require('Blockly.RenderedConnection');
 goog.require('Blockly.Scrollbar');
 goog.require('Blockly.ScrollbarPair');
-goog.require('Blockly.Style');
+goog.require('Blockly.Theme');
 goog.require('Blockly.Toolbox');
 goog.require('Blockly.Tooltip');
 goog.require('Blockly.Touch');

core/block.js

@@ -929,7 +929,7 @@ Blockly.Block.prototype.setColour = function(colour) {
  * @throws {Error} if the block style does not exist.
  */
 Blockly.Block.prototype.setStyle = function(blockStyleName) {
-  var style = Blockly.getStyle();
+  var style = Blockly.getTheme();
   if (!style) {
     throw Error('Trying to set block style to ' + blockStyleName +
       ' before style was defined via Blockly.setStyle().');

core/blockly.js

@@ -117,7 +117,7 @@ Blockly.cache3dSupported_ = null;
  * @type {?Blockly.Style}
  * @private
  */
-Blockly.style_ = null;
+Blockly.theme_ = null;
 
 /**
  * Convert a hue (HSV model) into an RGB hex triplet.
@@ -682,11 +682,11 @@ Blockly.checkBlockColourConstant_ = function(
 
 
 /**
- * Sets the style for blockly and refreshes all blocks in toolbox and workspace.
- * @param {Blockly.Style} style Style for blockly.
+ * Sets the theme for blockly and refreshes all blocks in the toolbox and workspace.
+ * @param {Blockly.Theme} theme Theme for blockly.
  */
-Blockly.setStyle = function(style) {
-  this.style_ = style;
+Blockly.setTheme = function(theme) {
+  this.theme_ = theme;
   var ws = Blockly.getMainWorkspace();
 
   this.updateBlockStyles_(ws.getAllBlocks());
@@ -698,7 +698,7 @@ Blockly.setStyle = function(style) {
     ws.refreshToolboxSelection();
   }
 
-  var event = new Blockly.Events.Ui(null, 'styleChanged');
+  var event = new Blockly.Events.Ui(null, 'themeChanged');
   event.workspaceId = ws.id;
   Blockly.Events.fire(event);
 };
@@ -721,11 +721,11 @@ Blockly.updateBlockStyles_ = function(blocks) {
 };
 
 /**
- * Gets the style for blockly.
- * @return {?Blockly.Style} style Style for blockly.
+ * Gets the theme.
+ * @return {?Blockly.Theme} theme Theme for blockly.
  */
-Blockly.getStyle = function() {
-  return this.style_;
+Blockly.getTheme = function() {
+  return this.theme_;
 };
 
 // IE9 does not have a console.  Create a stub to stop errors.

core/inject.js

@@ -69,7 +69,7 @@ Blockly.inject = function(container, opt_options) {
 
   var workspace = Blockly.createMainWorkspace_(svg, options, blockDragSurface,
       workspaceDragSurface);
-  Blockly.setStyle(options.style);
+  Blockly.setTheme(options.theme);
 
   Blockly.init_(workspace);
   Blockly.mainWorkspace = workspace;

core/options.js

@@ -119,9 +119,9 @@ Blockly.Options = function(options) {
   } else {
     var oneBasedIndex = !!options['oneBasedIndex'];
   }
-  var style = options['style'];
-  if (style === undefined) {
-    style = Blockly.Styles.Classic;
+  var theme = options['theme'];
+  if (theme === undefined) {
+    theme = Blockly.Themes.Classic;
   }
 
   this.RTL = rtl;
@@ -144,7 +144,7 @@ Blockly.Options = function(options) {
   this.gridOptions = Blockly.Options.parseGridOptions_(options);
   this.zoomOptions = Blockly.Options.parseZoomOptions_(options);
   this.toolboxPosition = toolboxPosition;
-  this.style = style;
+  this.theme = theme;
 };
 
 /**

core/theme.js

@@ -19,28 +19,28 @@
  */
 
 /**
- * @fileoverview The class representing a style.
+ * @fileoverview The class representing a theme.
  * @author aschmiedt@google.com (Abby Schmiedt)
  */
 'use strict';
 
-goog.provide('Blockly.Style');
+goog.provide('Blockly.Theme');
 /**
- * Class for a style.
+ * Class for a theme.
  * @param {Object.<string, Blockly.BlockStyle>} blockStyles A map from style
- * names (strings) to objects with color attributes.
+ * names (strings) to objects with style attributes.
  * @constructor
  */
-Blockly.Style = function(blockStyles) {
+Blockly.Theme = function(blockStyles) {
   this.blockStyles_ = blockStyles;
 };
 
 /**
  * Overrides or adds all values from blockStyles to blockStyles_
- * @param {Object.<string, Blockly.BlockStyle>} blockStyles List of a
+ * @param {Object.<string, Blockly.BlockStyle>} blockStyles List of
  * block styles.
  */
-Blockly.Style.prototype.setAllBlockStyles = function(blockStyles) {
+Blockly.Theme.prototype.setAllBlockStyles = function(blockStyles) {
   for (var key in blockStyles) {
     this.setBlockStyle(key, blockStyles[key]);
   }
@@ -50,16 +50,16 @@ Blockly.Style.prototype.setAllBlockStyles = function(blockStyles) {
  * Gets a list of all the block style names.
  * @return{Array.<String>} styleName List of blockstyle names.
  */
-Blockly.Style.prototype.getAllBlockStyles = function() {
+Blockly.Theme.prototype.getAllBlockStyles = function() {
   return this.blockStyles_;
 };
 
 /**
  * Gets the BlockStyle for the given block style name.
  * @param{String} blockStyleName The name of the block style.
- * @return {Blockly.Style} The style with the block style name.
+ * @return {Blockly.BlockStyle} The style with the block style name.
  */
-Blockly.Style.prototype.getBlockStyle = function(blockStyleName) {
+Blockly.Theme.prototype.getBlockStyle = function(blockStyleName) {
   return this.blockStyles_[blockStyleName];
 };
 
@@ -68,6 +68,6 @@ Blockly.Style.prototype.getBlockStyle = function(blockStyleName) {
  * @param{String} blockStyleName The name of the block style.
  * @param{Blockly.BlockStyle} blockStyle The block style
 */
-Blockly.Style.prototype.setBlockStyle = function(blockStyleName, blockStyle) {
+Blockly.Theme.prototype.setBlockStyle = function(blockStyleName, blockStyle) {
   this.blockStyles_[blockStyleName] = blockStyle;
 };

tests/generators/index.html

@@ -59,7 +59,7 @@
 <script src="../../generators/dart/colour.js"></script>
 <script src="../../generators/dart/variables.js"></script>
 <script src="../../generators/dart/procedures.js"></script>
-<script src="../../style/classic.js"></script>
+<script src="../../theme/classic.js"></script>
 
 
 <script src="unittest.js"></script>
@@ -91,7 +91,7 @@ function start() {
        zoom: {controls: true, wheel: true}
        });
   changeIndex();
-  Blockly.setStyle(Blockly.Styles.Classic);
+  Blockly.setTheme(Blockly.Themes.Classic);
 }
 
 /*

tests/jsunit/block_test.js

@@ -270,7 +270,7 @@ function test_set_style() {
       }
     }
   };
-  setUpMockMethod(mockControl_, Blockly, 'getStyle', null, [styleStub]);
+  setUpMockMethod(mockControl_, Blockly, 'getTheme', null, [styleStub]);
   var blockA = workspace.newBlock('row_block');
   blockA.setStyle('styleOne');
 
@@ -288,7 +288,7 @@ function test_set_style_throw_exception() {
       return null;
     }
   };
-  setUpMockMethod(mockControl_, Blockly, 'getStyle', null, [styleStub]);
+  setUpMockMethod(mockControl_, Blockly, 'getTheme', null, [styleStub]);
   var blockA = workspace.newBlock('row_block');
   try {
     blockA.setStyle('styleOne');

tests/jsunit/index.html

@@ -29,7 +29,7 @@
     <script src="metrics_test.js"></script>
     <script src="names_test.js"></script>
     <script src="procedures_test.js"></script>
-    <script src="style_test.js"></script>
+    <script src="theme_test.js"></script>
     <script src="utils_test.js"></script>
     <script src="variables_test.js"></script>
     <script src="variable_map_test.js"></script>

tests/jsunit/theme_test.js

@@ -24,7 +24,7 @@
  */
 'use strict';
 
-function defineStyleTestBlocks() {
+function defineThemeTestBlocks() {
   Blockly.defineBlocksWithJsonArray([{
     "type": "stack_block",
     "message0": "",
@@ -44,7 +44,7 @@ function defineStyleTestBlocks() {
   }]);
 };
 
-function undefineStyleTestBlocks() {
+function undefineThemeTestBlocks() {
   delete Blockly.Blocks['stack_block'];
   delete Blockly.Blocks['row_block'];
 }
@@ -76,47 +76,47 @@ function createMultipleBlockStyles() {
 }
 
 function test_setAllBlockStyles() {
-  var style = new Blockly.Style(createBlockStyles());
-  stringifyAndCompare(createBlockStyles(), style.blockStyles_);
-  style.setAllBlockStyles(createMultipleBlockStyles());
-  stringifyAndCompare(createMultipleBlockStyles(), style.blockStyles_);
+  var theme = new Blockly.Theme(createBlockStyles());
+  stringifyAndCompare(createBlockStyles(), theme.blockStyles_);
+  theme.setAllBlockStyles(createMultipleBlockStyles());
+  stringifyAndCompare(createMultipleBlockStyles(), theme.blockStyles_);
 }
 
 function test_getAllBlockStyles() {
-  var style = new Blockly.Style(createMultipleBlockStyles());
-  var allBlocks = style.getAllBlockStyles();
+  var theme = new Blockly.Theme(createMultipleBlockStyles());
+  var allBlocks = theme.getAllBlockStyles();
   stringifyAndCompare(createMultipleBlockStyles(), allBlocks);
 
 }
 
 function test_getBlockStyles() {
-  var style = new Blockly.Style(createBlockStyles());
-  var blockStyle = style.getBlockStyle("styleOne");
+  var theme = new Blockly.Theme(createBlockStyles());
+  var blockStyle = theme.getBlockStyle("styleOne");
 
   stringifyAndCompare(blockStyle, createBlockStyles().styleOne);
 }
 
 function test_setBlockStyleUpdate() {
-  var style = new Blockly.Style(createBlockStyles());
+  var theme = new Blockly.Theme(createBlockStyles());
   var blockStyle = createBlockStyles();
   blockStyle.styleOne.primaryColour = "somethingElse";
 
-  style.setBlockStyle('styleOne', blockStyle.styleOne);
+  theme.setBlockStyle('styleOne', blockStyle.styleOne);
 
-  stringifyAndCompare(style.blockStyles_, blockStyle);
+  stringifyAndCompare(theme.blockStyles_, blockStyle);
 }
 
 function test_setBlockStyleAdd() {
-  var style = new Blockly.Style(createBlockStyles());
+  var theme = new Blockly.Theme(createBlockStyles());
   var blockStyle = createMultipleBlockStyles();
 
-  style.setBlockStyle('styleTwo', blockStyle.styleTwo);
+  theme.setBlockStyle('styleTwo', blockStyle.styleTwo);
 
-  stringifyAndCompare(style.blockStyles_, blockStyle);
+  stringifyAndCompare(theme.blockStyles_, blockStyle);
 }
 
-function test_setStyleForBlockly() {
-  defineStyleTestBlocks();
+function test_setTheme() {
+  defineThemeTestBlocks();
   var blockStyles = createBlockStyles();
   var workspace = new Blockly.WorkspaceSvg({});
   var blockA = workspace.newBlock('stack_block');
@@ -131,20 +131,20 @@ function test_setStyleForBlockly() {
 
   setUpMockMethod(mockControl_, Blockly, 'getMainWorkspace', null, [workspace]);
 
-  Blockly.setStyle(blockStyles);
+  Blockly.setTheme(blockStyles);
 
-  //Checks that the style set correctly on Blockly namespace
-  stringifyAndCompare(Blockly.getStyle(), blockStyles);
+  //Checks that the theme was set correctly on Blockly namespace
+  stringifyAndCompare(Blockly.getTheme(), blockStyles);
 
-  //Checks that the setStyle function was called on the block
+  //Checks that the setTheme function was called on the block
   assertEquals(blockA.getStyleName(), 'styleTwo');
 
   //check that the toolbox refreshed method was called
   assertEquals(workspace.refreshToolboxSelection(), 3);
 
-  assertEquals(Blockly.Events.FIRE_QUEUE_.pop().element, "styleChanged");
+  assertEquals(Blockly.Events.FIRE_QUEUE_.pop().element, "themeChanged");
 
-  undefineStyleTestBlocks();
+  undefineThemeTestBlocks();
 }
 
 function stringifyAndCompare(val1, val2) {

tests/multi_playground.html

@@ -13,7 +13,7 @@
 <script src="../blocks/colour.js"></script>
 <script src="../blocks/variables.js"></script>
 <script src="../blocks/procedures.js"></script>
-<script src="../style/classic.js"></script>
+<script src="../theme/classic.js"></script>
 <script>
 'use strict';
 var options = {

tests/playground.html

@@ -65,9 +65,9 @@
 <script src="../blocks/variables_dynamic.js"></script>
 <script src="../blocks/procedures.js"></script>
 <script src="blocks/test_blocks.js"></script>
-<script src="../style/highcontrast.js"></script>
-<script src="../style/classic.js"></script>
-<script src="../style/modern.js"></script>
+<script src="../theme/highcontrast.js"></script>
+<script src="../theme/classic.js"></script>
+<script src="../theme/modern.js"></script>
 
 <script>
 'use strict';
@@ -141,14 +141,14 @@ function start() {
   taChange();
 }
 
-function changeStyle() {
-  var style = document.getElementById('styleChanger');
-  if (style.value === "modern") {
-    Blockly.setStyle(Blockly.Styles.Modern);
-  } else if (style.value === "high_contrast") {
-    Blockly.setStyle(Blockly.Styles.HighContrast);
+function changeTheme() {
+  var theme = document.getElementById('themeChanger');
+  if (theme.value === "modern") {
+    Blockly.setTheme(Blockly.Themes.Modern);
+  } else if (theme.value === "high_contrast") {
+    Blockly.setTheme(Blockly.Themes.HighContrast);
   } else {
-    Blockly.setStyle(Blockly.Styles.Classic);
+    Blockly.setTheme(Blockly.Themes.Classic);
   }
 }
 
@@ -343,7 +343,7 @@ h1 {
       <option value="bottom">Bottom</option>
     </select>
   </form>
-  <select id="styleChanger" name="style" onchange="changeStyle()">
+  <select id="themeChanger" name="theme" onchange="changeTheme()">
     <option value="classic">Classic</option>
     <option value="modern">Modern</option>
     <option value="high_contrast">High Contrast</option>

theme/classic.js

@@ -19,15 +19,15 @@
  */
 
 /**
- * @fileoverview Classic style.
+ * @fileoverview Classic theme.
  * Contains multi colored border to create shadow effect.
  */
 
 'use strict';
 
-goog.provide('Blockly.Styles.Classic');
+goog.provide('Blockly.Themes.Classic');
 
-goog.require('Blockly.Style');
+goog.require('Blockly.Theme');
 
 var defaultBlockStyles = {
   "colour_blocks":{
@@ -59,4 +59,4 @@ var defaultBlockStyles = {
   }
 };
 
-Blockly.Styles.Classic = new Blockly.Style(defaultBlockStyles);
+Blockly.Themes.Classic = new Blockly.Theme(defaultBlockStyles);

theme/highcontrast.js

@@ -19,14 +19,14 @@
  */
 
 /**
- * @fileoverview High contrast style.
- * Darker colors to contrast the white block font.
+ * @fileoverview High contrast theme.
+ * Darker colors to contrast the white font.
  */
 'use strict';
 
-goog.provide('Blockly.Styles.HighContrast');
+goog.provide('Blockly.Themes.HighContrast');
 
-goog.require('Blockly.Style');
+goog.require('Blockly.Theme');
 
 var defaultBlockStyles = {
   "colour_blocks":{
@@ -77,4 +77,4 @@ var defaultBlockStyles = {
 };
 
 //This style is still being fleshed out and may change.
-Blockly.Styles.HighContrast = new Blockly.Style(defaultBlockStyles);
+Blockly.Themes.HighContrast = new Blockly.Theme(defaultBlockStyles);

theme/modern.js

@@ -19,14 +19,14 @@
  */
 
 /**
- * @fileoverview Modern style.
+ * @fileoverview Modern theme.
  * Same colors as classic, but single colored border.
  */
 'use strict';
 
-goog.provide('Blockly.Styles.Modern');
+goog.provide('Blockly.Themes.Modern');
 
-goog.require('Blockly.Style');
+goog.require('Blockly.Theme');
 
 var defaultBlockStyles = {
   "colour_blocks": {
@@ -77,4 +77,4 @@ var defaultBlockStyles = {
 };
 
 //This style is still being fleshed out and may change.
-Blockly.Styles.Modern = new Blockly.Style(defaultBlockStyles);
+Blockly.Themes.Modern = new Blockly.Theme(defaultBlockStyles);

theme/theme_scripts/create_blockStyles.py

@@ -20,10 +20,10 @@
 # limitations under the License.
 #
 #
-# Usage: create_styles.py <fileName>
+# Usage: create_blockStyles.py <fileName>
 #
 # fileName - Name of the file holding the map of style names to colours.
-# Refer to colours_example.json for an example input.
+# Refer to blockStyles_example.json for an example input.
 #
 # Input: A json file with the keys being style names and the values
 # being either a hue (number) or a hex value (string).