Break CSS into modules. (#3084)

* Break CSS into modules. Drops the compile test by 3 KB. Remove obsolete .blocklyDraggable class stub (it used to be dynamically changed). Remove unused menuseparator CSS.
2026-01-10 02:17:09 +01:00 · 2019-09-25 18:01:19 -07:00
parent 06d65b81c7
commit 75cf614104
9 changed files with 318 additions and 287 deletions
--- a/.eslintignore
+++ b/.eslintignore
@@ -3,7 +3,6 @@
 blockly_node_javascript_en.js
 gulpfile.js
 /msg/*
-/core/css.js
 /core/utils/global.js
 /tests/blocks/*
 /tests/compile/*
@@ -15,7 +14,6 @@ gulpfile.js
 /tests/workspace_svg/*
 /generators/*
 /demos/*
-/accessible/*
 /appengine/*
 /externs/*
-/closure/*
+/closure/*
--- a/core/css.js
+++ b/core/css.js
@@ -56,11 +56,19 @@ Blockly.Css.currentCursor_ = '';
 Blockly.Css.injected_ = false;

 /**
- * Path to media directory, with any trailing slash removed.
- * @type {string}
- * @private
+ * Add some CSS to the blob that will be injected later.  Allows optional
+ * components such as fields and the toolbox to store separate CSS.
+ * The provided array of CSS will be destroyed by this function.
+ * @param {!Array.<string>} cssArray Array of CSS strings.
 */
-Blockly.Css.mediaPath_ = '';
+Blockly.Css.register = function(cssArray) {
+  if (Blockly.Css.injected_) {
+    throw Error('CSS already injected');
+  }
+  // Concatenate cssArray onto Blockly.Css.CONTENT.
+  Array.prototype.push.apply(Blockly.Css.CONTENT, cssArray);
+  cssArray.length = 0;  // Garbage collect provided CSS content.
+};

 /**
 * Inject the CSS into the DOM.  This is preferable over using a regular CSS
@@ -78,18 +86,14 @@ Blockly.Css.inject = function(hasCss, pathToMedia) {
    return;
  }
  Blockly.Css.injected_ = true;
-  // Placeholder for cursor rule.  Must be first rule (index 0).
-  var text = '.blocklyDraggable {}\n';
-  if (hasCss) {
-    text += Blockly.Css.CONTENT.join('\n');
-    Blockly.Css.CONTENT = null;  // Garbage collect 13 KB.
-    if (Blockly.FieldDate) {
-      text += Blockly.FieldDate.CSS.join('\n');
-    }
+  var text = Blockly.Css.CONTENT.join('\n');
+  Blockly.Css.CONTENT.length = 0;  // Garbage collect CSS content.
+  if (!hasCss) {
+    return;
  }
  // Strip off any trailing slash (either Unix or Windows).
-  Blockly.Css.mediaPath_ = pathToMedia.replace(/[\\\/]$/, '');
-  text = text.replace(/<<<PATH>>>/g, Blockly.Css.mediaPath_);
+  var mediaPath = pathToMedia.replace(/[\\/]$/, '');
+  text = text.replace(/<<<PATH>>>/g, mediaPath);

  // Inject CSS tag at start of head.
  var cssNode = document.createElement('style');
@@ -101,10 +105,10 @@ Blockly.Css.inject = function(hasCss, pathToMedia) {
 /**
 * Set the cursor to be displayed when over something draggable.
 * See See https://github.com/google/blockly/issues/981 for context.
- * @param {Blockly.Css.Cursor} cursor Enum.
+ * @param {Blockly.Css.Cursor} _cursor Enum.
 * @deprecated April 2017.
 */
-Blockly.Css.setCursor = function(cursor) {
+Blockly.Css.setCursor = function(_cursor) {
  console.warn('Deprecated call to Blockly.Css.setCursor. ' +
      'See https://github.com/google/blockly/issues/981 for context');
 };
@@ -113,6 +117,7 @@ Blockly.Css.setCursor = function(cursor) {
 * Array making up the CSS content for Blockly.
 */
 Blockly.Css.CONTENT = [
+  /* eslint-disable indent */
  '.blocklySvg {',
    'background-color: #fff;',
    'outline: none;',
@@ -313,16 +318,6 @@ Blockly.Css.CONTENT = [
    'cursor: url("<<<PATH>>>/handdelete.cur"), auto;',
  '}',

-  '.blocklyToolboxDelete {',
-    'cursor: url("<<<PATH>>>/handdelete.cur"), auto;',
-  '}',
-
-  '.blocklyToolboxGrab {',
-    'cursor: url("<<<PATH>>>/handclosed.cur"), auto;',
-    'cursor: grabbing;',
-    'cursor: -webkit-grabbing;',
-  '}',
-
  '.blocklyDragging>.blocklyPath,',
  '.blocklyDragging>.blocklyPathLight {',
    'fill-opacity: .8;',
@@ -398,30 +393,6 @@ Blockly.Css.CONTENT = [
    'position: absolute;',
    'z-index: 20;',
  '}',
-  '.blocklyFlyoutButton {',
-    'fill: #888;',
-    'cursor: default;',
-  '}',
-
-  '.blocklyFlyoutButtonShadow {',
-    'fill: #666;',
-  '}',
-
-  '.blocklyFlyoutButton:hover {',
-    'fill: #aaa;',
-  '}',
-
-  '.blocklyFlyoutLabel {',
-    'cursor: default;',
-  '}',
-
-  '.blocklyFlyoutLabelBackground {',
-    'opacity: 0;',
-  '}',
-
-  '.blocklyFlyoutLabelText {',
-    'fill: #000;',
-  '}',

  /*
    Don't allow users to select text.  It gets annoying when trying to
@@ -549,7 +520,7 @@ Blockly.Css.CONTENT = [
  '}',

  /* Edge and IE introduce a close icon when the input value is longer than a
-     certain length. This affects our sizing calcutations of the text input.
+     certain length. This affects our sizing calculations of the text input.
     Hiding the close icon to avoid that. */
  '.blocklyHtmlInput::-ms-clear {',
    'display: none;',
@@ -597,18 +568,6 @@ Blockly.Css.CONTENT = [
    'fill: #bbb;',
  '}',

-  '.blocklyZoom>image, .blocklyZoom>svg>image {',
-    'opacity: .4;',
-  '}',
-
-  '.blocklyZoom>image:hover, .blocklyZoom>svg>image:hover {',
-    'opacity: .6;',
-  '}',
-
-  '.blocklyZoom>image:active, .blocklyZoom>svg>image:active {',
-    'opacity: .8;',
-  '}',
-
  /* Darken flyout scrollbars due to being on a grey background. */
  /* By contrast, workspace scrollbars are on a white background. */
  '.blocklyFlyout .blocklyScrollbarHandle {',
@@ -624,30 +583,6 @@ Blockly.Css.CONTENT = [
    'background: #faa;',
  '}',

-  '.blocklyAngleCircle {',
-    'stroke: #444;',
-    'stroke-width: 1;',
-    'fill: #ddd;',
-    'fill-opacity: .8;',
-  '}',
-
-  '.blocklyAngleMarks {',
-    'stroke: #444;',
-    'stroke-width: 1;',
-  '}',
-
-  '.blocklyAngleGauge {',
-    'fill: #f88;',
-    'fill-opacity: .8;',
-  '}',
-
-  '.blocklyAngleLine {',
-    'stroke: #f00;',
-    'stroke-width: 2;',
-    'stroke-linecap: round;',
-    'pointer-events: none;',
-  '}',
-
  '.blocklyContextMenu {',
    'border-radius: 4px;',
    'max-height: 100%;',
@@ -685,154 +620,6 @@ Blockly.Css.CONTENT = [
    'background: url(<<<PATH>>>/sprites.png) no-repeat -48px -16px;',
  '}',

-  /* Category tree in Toolbox. */
-  '.blocklyToolboxDiv {',
-    'background-color: #ddd;',
-    'overflow-x: visible;',
-    'overflow-y: auto;',
-    'position: absolute;',
-    'z-index: 70;', /* so blocks go under toolbox when dragging */
-    '-webkit-tap-highlight-color: transparent;', /* issue #1345 */
-  '}',
-
-  '.blocklyTreeRoot {',
-    'padding: 4px 0;',
-  '}',
-
-  '.blocklyTreeRoot:focus {',
-    'outline: none;',
-  '}',
-
-  '.blocklyTreeRow {',
-    'height: 22px;',
-    'line-height: 22px;',
-    'margin-bottom: 3px;',
-    'padding-right: 8px;',
-    'white-space: nowrap;',
-  '}',
-
-  '.blocklyHorizontalTree {',
-    'float: left;',
-    'margin: 1px 5px 8px 0;',
-  '}',
-
-  '.blocklyHorizontalTreeRtl {',
-    'float: right;',
-    'margin: 1px 0 8px 5px;',
-  '}',
-
-  '.blocklyToolboxDiv[dir="RTL"] .blocklyTreeRow {',
-    'margin-left: 8px;',
-  '}',
-
-  '.blocklyTreeRow:not(.blocklyTreeSelected):hover {',
-    'background-color: #e4e4e4;',
-  '}',
-
-  '.blocklyTreeSeparator {',
-    'border-bottom: solid #e5e5e5 1px;',
-    'height: 0;',
-    'margin: 5px 0;',
-  '}',
-
-  '.blocklyTreeSeparatorHorizontal {',
-    'border-right: solid #e5e5e5 1px;',
-    'width: 0;',
-    'padding: 5px 0;',
-    'margin: 0 5px;',
-  '}',
-
-  '.blocklyTreeIcon {',
-    'background-image: url(<<<PATH>>>/sprites.png);',
-    'height: 16px;',
-    'vertical-align: middle;',
-    'width: 16px;',
-  '}',
-
-  '.blocklyTreeIconClosedLtr {',
-    'background-position: -32px -1px;',
-  '}',
-
-  '.blocklyTreeIconClosedRtl {',
-    'background-position: 0 -1px;',
-  '}',
-
-  '.blocklyTreeIconOpen {',
-    'background-position: -16px -1px;',
-  '}',
-
-  '.blocklyTreeSelected>.blocklyTreeIconClosedLtr {',
-    'background-position: -32px -17px;',
-  '}',
-
-  '.blocklyTreeSelected>.blocklyTreeIconClosedRtl {',
-    'background-position: 0 -17px;',
-  '}',
-
-  '.blocklyTreeSelected>.blocklyTreeIconOpen {',
-    'background-position: -16px -17px;',
-  '}',
-
-  '.blocklyTreeIconNone,',
-  '.blocklyTreeSelected>.blocklyTreeIconNone {',
-    'background-position: -48px -1px;',
-  '}',
-
-  '.blocklyTreeLabel {',
-    'cursor: default;',
-    'font-family: sans-serif;',
-    'font-size: 16px;',
-    'padding: 0 3px;',
-    'vertical-align: middle;',
-  '}',
-
-  '.blocklyToolboxDelete .blocklyTreeLabel {',
-    'cursor: url("<<<PATH>>>/handdelete.cur"), auto;',
-  '}',
-
-  '.blocklyTreeSelected .blocklyTreeLabel {',
-    'color: #fff;',
-  '}',
-
-  /* Colour Picker Field */
-  '.blocklyColourTable {',
-    'border-collapse: collapse;',
-    'outline: none;',
-    'padding: 1px;',
-    'display: block;',
-  '}',
-
-  '.blocklyColourTable>tr>td {',
-    'padding: 0;',
-    'cursor: pointer;',
-    'border: .5px solid transparent;',
-    'height: 25px;',
-    'width: 25px;',
-    'box-sizing: border-box;',
-    'display: inline-block;',
-  '}',
-
-  '.blocklyColourTable>tr>td.blocklyColourHighlighted {',
-    'border-color: #eee;',
-    'position: relative;',
-    'box-shadow: 2px 2px 7px 2px rgba(0,0,0,.3);',
-  '}',
-
-  '.blocklyColourSelected, .blocklyColourSelected:hover {',
-    'border-color: #eee !important;',
-    'outline: 1px solid #333;',
-    'position: relative;',
-  '}',
-
-  /* Multiline (Textarea) Field */
-  '.blocklyHtmlTextAreaInput {',
-    'font-family: monospace;',
-    'resize: none;',
-    'overflow: hidden;',
-    'height: 100%;',
-    'text-align: left;',
-  '}',
-
  /* Copied from: goog/css/menu.css */
  /*
   * Copyright 2009 The Closure Library Authors. All Rights Reserved.
@@ -1010,29 +797,6 @@ Blockly.Css.CONTENT = [
  '.blocklyDropDownDiv .goog-menuitem-rtl .goog-menuitem-icon {',
    'float: right;',
    'margin-right: -24px;',
-  '}',
-
-
-  /* Copied from: goog/css/menuseparator.css */
-  /*
-   * Copyright 2009 The Closure Library Authors. All Rights Reserved.
-   *
-   * Use of this source code is governed by the Apache License, Version 2.0.
-   * See the COPYING file for details.
-   */
-
-  /**
-   * Standard styling for menus created by goog.ui.MenuSeparatorRenderer.
-   *
-   * @author attila@google.com (Attila Bodis)
-   */
-
-  '.blocklyWidgetDiv .goog-menuseparator,',
-  '.blocklyDropDownDiv .goog-menuseparator {',
-    'border-top: 1px solid #ccc;',
-    'margin: 4px 0;',
-    'padding: 0;',
-  '}',
-
-  ''
+  '}'
+  /* eslint-enable indent */
 ];
--- a/core/field_angle.js
+++ b/core/field_angle.js
@@ -26,6 +26,7 @@

 goog.provide('Blockly.FieldAngle');

+goog.require('Blockly.Css');
 goog.require('Blockly.DropDownDiv');
 goog.require('Blockly.fieldRegistry');
 goog.require('Blockly.FieldTextInput');
@@ -462,4 +463,35 @@ Blockly.FieldAngle.prototype.wrapValue_ = function(value) {
  return value;
 };

+/**
+ * CSS for angle field.  See css.js for use.
+ */
+Blockly.Css.register([
+  /* eslint-disable indent */
+  '.blocklyAngleCircle {',
+    'stroke: #444;',
+    'stroke-width: 1;',
+    'fill: #ddd;',
+    'fill-opacity: .8;',
+  '}',
+
+  '.blocklyAngleMarks {',
+    'stroke: #444;',
+    'stroke-width: 1;',
+  '}',
+
+  '.blocklyAngleGauge {',
+    'fill: #f88;',
+    'fill-opacity: .8;',
+  '}',
+
+  '.blocklyAngleLine {',
+    'stroke: #f00;',
+    'stroke-width: 2;',
+    'stroke-linecap: round;',
+    'pointer-events: none;',
+  '}'
+  /* eslint-enable indent */
+]);
+
 Blockly.fieldRegistry.register('field_angle', Blockly.FieldAngle);
--- a/core/field_colour.js
+++ b/core/field_colour.js
@@ -26,6 +26,7 @@

 goog.provide('Blockly.FieldColour');

+goog.require('Blockly.Css');
 goog.require('Blockly.DropDownDiv');
 goog.require('Blockly.Events');
 goog.require('Blockly.Events.BlockChange');
@@ -588,4 +589,40 @@ Blockly.FieldColour.prototype.dropdownDispose_ = function() {
  this.picker_ = null;
 };

+/**
+ * CSS for colour picker.  See css.js for use.
+ */
+Blockly.Css.register([
+  /* eslint-disable indent */
+  '.blocklyColourTable {',
+    'border-collapse: collapse;',
+    'display: block;',
+    'outline: none;',
+    'padding: 1px;',
+  '}',
+
+  '.blocklyColourTable>tr>td {',
+    'border: .5px solid #888;',
+    'box-sizing: border-box;',
+    'cursor: pointer;',
+    'display: inline-block;',
+    'height: 20px;',
+    'padding: 0;',
+    'width: 20px;',
+  '}',
+
+  '.blocklyColourTable>tr>td.blocklyColourHighlighted {',
+    'border-color: #eee;',
+    'box-shadow: 2px 2px 7px 2px rgba(0,0,0,.3);',
+    'position: relative;',
+  '}',
+
+  '.blocklyColourSelected, .blocklyColourSelected:hover {',
+    'border-color: #eee !important;',
+    'outline: 1px solid #333;',
+    'position: relative;',
+  '}'
+  /* eslint-enable indent */
+]);
+
 Blockly.fieldRegistry.register('field_colour', Blockly.FieldColour);
--- a/core/field_date.js
+++ b/core/field_date.js
@@ -26,6 +26,7 @@

 goog.provide('Blockly.FieldDate');

+goog.require('Blockly.Css');
 goog.require('Blockly.Events');
 goog.require('Blockly.Field');
 goog.require('Blockly.fieldRegistry');
@@ -263,64 +264,66 @@ Blockly.FieldDate.loadLanguage_ = function() {
 /**
 * CSS for date picker.  See css.js for use.
 */
-Blockly.FieldDate.CSS = [
+Blockly.Css.register([
+  /* eslint-disable indent */
  '.blocklyDatePicker,',
  '.blocklyDatePicker th,',
  '.blocklyDatePicker td {',
-  '  font: 13px Arial, sans-serif;',
-  '  color: #3c4043;',
+    'font: 13px Arial, sans-serif;',
+    'color: #3c4043;',
  '}',

  '.blocklyDatePicker th,',
  '.blocklyDatePicker td {',
-  '  text-align: center;',
-  '  vertical-align: middle;',
+    'text-align: center;',
+    'vertical-align: middle;',
  '}',

  '.blocklyDatePicker .goog-date-picker-wday,',
  '.blocklyDatePicker .goog-date-picker-date {',
-  '  padding: 6px 6px;',
+    'padding: 6px 6px;',
  '}',

  '.blocklyDatePicker button {',
-  '  cursor: pointer;',
-  '  padding: 6px 6px;',
-  '  margin: 1px 0;',
-  '  border: 0;',
-  '  color: #3c4043;',
-  '  font-weight: bold;',
-  '  background: transparent;',
+    'cursor: pointer;',
+    'padding: 6px 6px;',
+    'margin: 1px 0;',
+    'border: 0;',
+    'color: #3c4043;',
+    'font-weight: bold;',
+    'background: transparent;',
  '}',

  '.blocklyDatePicker .goog-date-picker-previousMonth,',
  '.blocklyDatePicker .goog-date-picker-nextMonth {',
-  '  height: 24px;',
-  '  width: 24px;',
+    'height: 24px;',
+    'width: 24px;',
  '}',

  '.blocklyDatePicker .goog-date-picker-monthyear {',
-  '  font-weight: bold;',
+    'font-weight: bold;',
  '}',

  '.blocklyDatePicker .goog-date-picker-wday, ',
  '.blocklyDatePicker .goog-date-picker-other-month {',
-  '  color: #70757a;',
-  '  border-radius: 12px;',
+    'color: #70757a;',
+    'border-radius: 12px;',
  '}',

  '.blocklyDatePicker button,',
  '.blocklyDatePicker .goog-date-picker-date {',
-  '  cursor: pointer;',
-  '  background-color: rgb(218, 220, 224, 0);',
-  '  border-radius: 12px;',
-  '  transition: background-color,opacity 100ms linear;',
+    'cursor: pointer;',
+    'background-color: rgb(218, 220, 224, 0);',
+    'border-radius: 12px;',
+    'transition: background-color,opacity 100ms linear;',
  '}',

  '.blocklyDatePicker button:hover,',
  '.blocklyDatePicker .goog-date-picker-date:hover {',
-  '  background-color: rgb(218, 220, 224, .5);',
+    'background-color: rgb(218, 220, 224, .5);',
  '}'
-];
+  /* eslint-enable indent */
+]);

 Blockly.fieldRegistry.register('field_date', Blockly.FieldDate);

--- a/core/field_multilineinput.js
+++ b/core/field_multilineinput.js
@@ -28,6 +28,7 @@

 goog.provide('Blockly.FieldMultilineInput');

+goog.require('Blockly.Css');
 goog.require('Blockly.DropDownDiv');
 goog.require('Blockly.FieldTextInput');
 goog.require('Blockly.utils');
@@ -275,4 +276,20 @@ Blockly.FieldMultilineInput.prototype.onHtmlInputKeyDown_ = function(e) {
  }
 };

+/**
+ * CSS for multiline field.  See css.js for use.
+ */
+Blockly.Css.register([
+  /* eslint-disable indent */
+  '.blocklyHtmlTextAreaInput {',
+    'font-family: monospace;',
+    'resize: none;',
+    'overflow: hidden;',
+    'height: 100%;',
+    'text-align: left;',
+  '}'
+  /* eslint-enable indent */
+]);
+
+
 Blockly.fieldRegistry.register('field_multilinetext', Blockly.FieldMultilineInput);
--- a/core/flyout_button.js
+++ b/core/flyout_button.js
@@ -26,6 +26,7 @@

 goog.provide('Blockly.FlyoutButton');

+goog.require('Blockly.Css');
 goog.require('Blockly.utils');
 goog.require('Blockly.utils.Coordinate');
 goog.require('Blockly.utils.dom');
@@ -258,3 +259,35 @@ Blockly.FlyoutButton.prototype.onMouseUp_ = function(e) {
    this.targetWorkspace_.getButtonCallback(this.callbackKey_)(this);
  }
 };
+
+/**
+ * CSS for buttons and labels.  See css.js for use.
+ */
+Blockly.Css.register([
+  /* eslint-disable indent */
+  '.blocklyFlyoutButton {',
+    'fill: #888;',
+    'cursor: default;',
+  '}',
+
+  '.blocklyFlyoutButtonShadow {',
+    'fill: #666;',
+  '}',
+
+  '.blocklyFlyoutButton:hover {',
+    'fill: #aaa;',
+  '}',
+
+  '.blocklyFlyoutLabel {',
+    'cursor: default;',
+  '}',
+
+  '.blocklyFlyoutLabelBackground {',
+    'opacity: 0;',
+  '}',
+
+  '.blocklyFlyoutLabelText {',
+    'fill: #000;',
+  '}'
+  /* eslint-enable indent */
+]);
--- a/core/toolbox.js
+++ b/core/toolbox.js
@@ -26,6 +26,7 @@

 goog.provide('Blockly.Toolbox');

+goog.require('Blockly.Css');
 goog.require('Blockly.Events');
 goog.require('Blockly.Events.Ui');
 goog.require('Blockly.navigation');
@@ -709,3 +710,129 @@ Blockly.Toolbox.TreeSeparator = function(config) {
 };
 Blockly.utils.object.inherits(Blockly.Toolbox.TreeSeparator,
    Blockly.tree.TreeNode);
+
+/**
+ * CSS for Toolbox.  See css.js for use.
+ */
+Blockly.Css.register([
+  /* eslint-disable indent */
+  '.blocklyToolboxDelete {',
+    'cursor: url("<<<PATH>>>/handdelete.cur"), auto;',
+  '}',
+
+  '.blocklyToolboxGrab {',
+    'cursor: url("<<<PATH>>>/handclosed.cur"), auto;',
+    'cursor: grabbing;',
+    'cursor: -webkit-grabbing;',
+  '}',
+
+  /* Category tree in Toolbox. */
+  '.blocklyToolboxDiv {',
+    'background-color: #ddd;',
+    'overflow-x: visible;',
+    'overflow-y: auto;',
+    'position: absolute;',
+    'z-index: 70;', /* so blocks go under toolbox when dragging */
+    '-webkit-tap-highlight-color: transparent;', /* issue #1345 */
+  '}',
+
+  '.blocklyTreeRoot {',
+    'padding: 4px 0;',
+  '}',
+
+  '.blocklyTreeRoot:focus {',
+    'outline: none;',
+  '}',
+
+  '.blocklyTreeRow {',
+    'height: 22px;',
+    'line-height: 22px;',
+    'margin-bottom: 3px;',
+    'padding-right: 8px;',
+    'white-space: nowrap;',
+  '}',
+
+  '.blocklyHorizontalTree {',
+    'float: left;',
+    'margin: 1px 5px 8px 0;',
+  '}',
+
+  '.blocklyHorizontalTreeRtl {',
+    'float: right;',
+    'margin: 1px 0 8px 5px;',
+  '}',
+
+  '.blocklyToolboxDiv[dir="RTL"] .blocklyTreeRow {',
+    'margin-left: 8px;',
+  '}',
+
+  '.blocklyTreeRow:not(.blocklyTreeSelected):hover {',
+    'background-color: #e4e4e4;',
+  '}',
+
+  '.blocklyTreeSeparator {',
+    'border-bottom: solid #e5e5e5 1px;',
+    'height: 0;',
+    'margin: 5px 0;',
+  '}',
+
+  '.blocklyTreeSeparatorHorizontal {',
+    'border-right: solid #e5e5e5 1px;',
+    'width: 0;',
+    'padding: 5px 0;',
+    'margin: 0 5px;',
+  '}',
+
+  '.blocklyTreeIcon {',
+    'background-image: url(<<<PATH>>>/sprites.png);',
+    'height: 16px;',
+    'vertical-align: middle;',
+    'width: 16px;',
+  '}',
+
+  '.blocklyTreeIconClosedLtr {',
+    'background-position: -32px -1px;',
+  '}',
+
+  '.blocklyTreeIconClosedRtl {',
+    'background-position: 0 -1px;',
+  '}',
+
+  '.blocklyTreeIconOpen {',
+    'background-position: -16px -1px;',
+  '}',
+
+  '.blocklyTreeSelected>.blocklyTreeIconClosedLtr {',
+    'background-position: -32px -17px;',
+  '}',
+
+  '.blocklyTreeSelected>.blocklyTreeIconClosedRtl {',
+    'background-position: 0 -17px;',
+  '}',
+
+  '.blocklyTreeSelected>.blocklyTreeIconOpen {',
+    'background-position: -16px -17px;',
+  '}',
+
+  '.blocklyTreeIconNone,',
+  '.blocklyTreeSelected>.blocklyTreeIconNone {',
+    'background-position: -48px -1px;',
+  '}',
+
+  '.blocklyTreeLabel {',
+    'cursor: default;',
+    'font-family: sans-serif;',
+    'font-size: 16px;',
+    'padding: 0 3px;',
+    'vertical-align: middle;',
+  '}',
+
+  '.blocklyToolboxDelete .blocklyTreeLabel {',
+    'cursor: url("<<<PATH>>>/handdelete.cur"), auto;',
+  '}',
+
+  '.blocklyTreeSelected .blocklyTreeLabel {',
+    'color: #fff;',
+  '}'
+  /* eslint-enable indent */
+]);
--- a/core/zoom_controls.js
+++ b/core/zoom_controls.js
@@ -26,6 +26,7 @@

 goog.provide('Blockly.ZoomControls');

+goog.require('Blockly.Css');
 goog.require('Blockly.Touch');
 goog.require('Blockly.utils.dom');

@@ -336,3 +337,22 @@ Blockly.ZoomControls.prototype.createZoomResetSvg_ = function(rnd) {
    e.preventDefault();  // Stop double-clicking from selecting text.
  });
 };
+
+/**
+ * CSS for zoom controls.  See css.js for use.
+ */
+Blockly.Css.register([
+  /* eslint-disable indent */
+  '.blocklyZoom>image, .blocklyZoom>svg>image {',
+    'opacity: .4;',
+  '}',
+
+  '.blocklyZoom>image:hover, .blocklyZoom>svg>image:hover {',
+    'opacity: .6;',
+  '}',
+
+  '.blocklyZoom>image:active, .blocklyZoom>svg>image:active {',
+    'opacity: .8;',
+  '}'
+  /* eslint-enable indent */
+]);