From 75cf61410449dc804412e7c117c6fbad575441d4 Mon Sep 17 00:00:00 2001 From: Neil Fraser Date: Wed, 25 Sep 2019 18:01:19 -0700 Subject: [PATCH] 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. --- .eslintignore | 4 +- core/css.js | 284 +++-------------------------------- core/field_angle.js | 32 ++++ core/field_colour.js | 37 +++++ core/field_date.js | 51 ++++--- core/field_multilineinput.js | 17 +++ core/flyout_button.js | 33 ++++ core/toolbox.js | 127 ++++++++++++++++ core/zoom_controls.js | 20 +++ 9 files changed, 318 insertions(+), 287 deletions(-) diff --git a/.eslintignore b/.eslintignore index fb4f528a7..4793ef969 100644 --- 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/* \ No newline at end of file +/closure/* diff --git a/core/css.js b/core/css.js index 7b02a1b1c..7c638d679 100644 --- 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.} 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(/<<>>/g, Blockly.Css.mediaPath_); + var mediaPath = pathToMedia.replace(/[\\/]$/, ''); + text = text.replace(/<<>>/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("<<>>/handdelete.cur"), auto;', '}', - '.blocklyToolboxDelete {', - 'cursor: url("<<>>/handdelete.cur"), auto;', - '}', - - '.blocklyToolboxGrab {', - 'cursor: url("<<>>/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(<<>>/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(<<>>/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("<<>>/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 */ ]; diff --git a/core/field_angle.js b/core/field_angle.js index f28375ef3..c610df535 100644 --- 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); diff --git a/core/field_colour.js b/core/field_colour.js index 62057cc95..31bc3b6da 100644 --- 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); diff --git a/core/field_date.js b/core/field_date.js index 88b5f2548..35cd8f2ff 100644 --- 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); diff --git a/core/field_multilineinput.js b/core/field_multilineinput.js index 8197ab3b3..a7a6edcf9 100644 --- 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); diff --git a/core/flyout_button.js b/core/flyout_button.js index 973e3a320..9237b62de 100644 --- 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 */ +]); diff --git a/core/toolbox.js b/core/toolbox.js index 072278cff..aa679a49d 100644 --- 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("<<>>/handdelete.cur"), auto;', + '}', + + '.blocklyToolboxGrab {', + 'cursor: url("<<>>/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(<<>>/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("<<>>/handdelete.cur"), auto;', + '}', + + '.blocklyTreeSelected .blocklyTreeLabel {', + 'color: #fff;', + '}' + /* eslint-enable indent */ +]); diff --git a/core/zoom_controls.js b/core/zoom_controls.js index a0c541909..d30044d69 100644 --- 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 */ +]);