From ec9092fd67ddb7dca6c8a64e6cfe4e1b04ec59d4 Mon Sep 17 00:00:00 2001 From: Sandeep Dubey Date: Fri, 15 Oct 2021 04:17:10 +0530 Subject: [PATCH] Changes Css.register API to accept string param (#5472) * Chnages Css.register API to accept string param * Address self review comments and nits * Fix code-comment * Address minor review comments and nits * Allow passing an array of strings when registering CSS * Fix lint errors Co-authored-by: Aaron Dodson --- core/comment.js | 19 +- core/css.js | 806 +++++++++++++++++----------------- core/field_angle.js | 49 ++- core/field_colour.js | 56 ++- core/field_dropdown.js | 2 +- core/field_multilineinput.js | 24 +- core/flyout_button.js | 40 +- core/toolbox/category.js | 118 ++--- core/toolbox/separator.js | 31 +- core/toolbox/toolbox.js | 43 +- core/workspace_comment_svg.js | 100 ++--- core/zoom_controls.js | 22 +- tests/deps.js | 2 +- tests/deps.mocha.js | 2 +- 14 files changed, 668 insertions(+), 646 deletions(-) diff --git a/core/comment.js b/core/comment.js index 1e0511412..72b432ff6 100644 --- a/core/comment.js +++ b/core/comment.js @@ -402,12 +402,17 @@ Comment.prototype.dispose = function() { /** * CSS for block comment. See css.js for use. */ -Css.register([ - /* eslint-disable indent */ - '.blocklyCommentTextarea {', 'background-color: #fef49c;', 'border: 0;', - 'outline: 0;', 'margin: 0;', 'padding: 3px;', 'resize: none;', - 'display: block;', 'text-overflow: hidden;', '}' - /* eslint-enable indent */ -]); +Css.register(` + .blocklyCommentTextarea { + background-color: #fef49c; + border: 0; + display: block; + margin: 0; + outline: 0; + padding: 3px; + resize: none; + text-overflow: hidden; + } +`); exports = Comment; diff --git a/core/css.js b/core/css.js index 04c2e301b..af2c95a84 100644 --- a/core/css.js +++ b/core/css.js @@ -16,6 +16,8 @@ */ goog.module('Blockly.Css'); +const deprecation = goog.require('Blockly.utils.deprecation'); + /** * Has CSS already been injected? @@ -27,17 +29,24 @@ let injected = false; /** * 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. + * @param {string|!Array} cssContent Multiline CSS string or an array of + * single lines of CSS. * @alias Blockly.Css.register */ -const register = function(cssArray) { +const register = function(cssContent) { if (injected) { throw Error('CSS already injected'); } - // Concatenate cssArray onto CONTENT. - Array.prototype.push.apply(CONTENT, cssArray); - cssArray.length = 0; // Garbage collect provided CSS content. + + if (Array.isArray(cssContent)) { + deprecation.warn( + 'Registering CSS by passing an array of strings', 'September 2021', + 'September 2022', 'css.register passing a multiline string'); + content += ('\n' + cssContent.join('\n')); + } else { + // Add new cssContent in the global content. + content += ('\n' + cssContent); + } }; exports.register = register; @@ -58,502 +67,503 @@ const inject = function(hasCss, pathToMedia) { return; } injected = true; - let text = CONTENT.join('\n'); - CONTENT.length = 0; // Garbage collect CSS content. if (!hasCss) { return; } // Strip off any trailing slash (either Unix or Windows). const mediaPath = pathToMedia.replace(/[\\/]$/, ''); - text = text.replace(/<<>>/g, mediaPath); + let cssContent = content.replace(/<<>>/g, mediaPath); + // Cleanup the collected css content after injecting it to the DOM. + content = ''; // Inject CSS tag at start of head. const cssNode = document.createElement('style'); cssNode.id = 'blockly-common-style'; - const cssTextNode = document.createTextNode(text); + const cssTextNode = document.createTextNode(cssContent); cssNode.appendChild(cssTextNode); document.head.insertBefore(cssNode, document.head.firstChild); }; exports.inject = inject; /** - * Array making up the CSS content for Blockly. - * @alias Blockly.Css.CONTENT + * The CSS content for Blockly. + * @alias Blockly.Css.content */ -const CONTENT = [ - `.blocklySvg { - background-color: #fff; - outline: none; - overflow: hidden; /* IE overflows by default. */ - position: absolute; - display: block; -}`, +let content = (` + .blocklySvg { + background-color: #fff; + outline: none; + overflow: hidden; /* IE overflows by default. */ + position: absolute; + display: block; + } - `.blocklyWidgetDiv { - display: none; - position: absolute; - z-index: 99999; /* big value for bootstrap3 compatibility */ -}`, + .blocklyWidgetDiv { + display: none; + position: absolute; + z-index: 99999; /* big value for bootstrap3 compatibility */ + } - `.injectionDiv { - height: 100%; - position: relative; - overflow: hidden; /* So blocks in drag surface disappear at edges */ - touch-action: none; -}`, + .injectionDiv { + height: 100%; + position: relative; + overflow: hidden; /* So blocks in drag surface disappear at edges */ + touch-action: none; + } - `.blocklyNonSelectable { - user-select: none; - -ms-user-select: none; - -webkit-user-select: none; -}`, + .blocklyNonSelectable { + user-select: none; + -ms-user-select: none; + -webkit-user-select: none; + } - `.blocklyWsDragSurface { - display: none; - position: absolute; - top: 0; - left: 0; -}`, + .blocklyWsDragSurface { + display: none; + position: absolute; + top: 0; + left: 0; + } /* Added as a separate rule with multiple classes to make it more specific than a bootstrap rule that selects svg:root. See issue #1275 for context. */ - `.blocklyWsDragSurface.blocklyOverflowVisible { - overflow: visible; -}`, + .blocklyWsDragSurface.blocklyOverflowVisible { + overflow: visible; + } - `.blocklyBlockDragSurface { - display: none; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - overflow: visible !important; - z-index: 50; /* Display below toolbox, but above everything else. */ -}`, + .blocklyBlockDragSurface { + display: none; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + overflow: visible !important; + z-index: 50; /* Display below toolbox, but above everything else. */ + } - `.blocklyBlockCanvas.blocklyCanvasTransitioning, -.blocklyBubbleCanvas.blocklyCanvasTransitioning { - transition: transform .5s; -}`, + .blocklyBlockCanvas.blocklyCanvasTransitioning, + .blocklyBubbleCanvas.blocklyCanvasTransitioning { + transition: transform .5s; + } - `.blocklyTooltipDiv { - background-color: #ffffc7; - border: 1px solid #ddc; - box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15); - color: #000; - display: none; - font: 9pt sans-serif; - opacity: .9; - padding: 2px; - position: absolute; - z-index: 100000; /* big value for bootstrap3 compatibility */ -}`, + .blocklyTooltipDiv { + background-color: #ffffc7; + border: 1px solid #ddc; + box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15); + color: #000; + display: none; + font: 9pt sans-serif; + opacity: .9; + padding: 2px; + position: absolute; + z-index: 100000; /* big value for bootstrap3 compatibility */ + } - `.blocklyDropDownDiv { - position: absolute; - left: 0; - top: 0; - z-index: 1000; - display: none; - border: 1px solid; - border-color: #dadce0; - background-color: #fff; - border-radius: 2px; - padding: 4px; - box-shadow: 0 0 3px 1px rgba(0,0,0,.3); -}`, + .blocklyDropDownDiv { + position: absolute; + left: 0; + top: 0; + z-index: 1000; + display: none; + border: 1px solid; + border-color: #dadce0; + background-color: #fff; + border-radius: 2px; + padding: 4px; + box-shadow: 0 0 3px 1px rgba(0,0,0,.3); + } - `.blocklyDropDownDiv.blocklyFocused { - box-shadow: 0 0 6px 1px rgba(0,0,0,.3); -}`, - `.blocklyDropDownContent { - max-height: 300px; - overflow: auto; - overflow-x: hidden; - position: relative; -}`, + .blocklyDropDownDiv.blocklyFocused { + box-shadow: 0 0 6px 1px rgba(0,0,0,.3); + } - `.blocklyDropDownArrow { - position: absolute; - left: 0; - top: 0; - width: 16px; - height: 16px; - z-index: -1; - background-color: inherit; - border-color: inherit; -}`, + .blocklyDropDownContent { + max-height: 300px; // @todo: spec for maximum height. + overflow: auto; + overflow-x: hidden; + position: relative; + } - `.blocklyDropDownButton { - display: inline-block; - float: left; - padding: 0; - margin: 4px; - border-radius: 4px; - outline: none; - border: 1px solid; - transition: box-shadow .1s; - cursor: pointer; -}`, + .blocklyDropDownArrow { + position: absolute; + left: 0; + top: 0; + width: 16px; + height: 16px; + z-index: -1; + background-color: inherit; + border-color: inherit; + } - `.blocklyArrowTop { - border-top: 1px solid; - border-left: 1px solid; - border-top-left-radius: 4px; - border-color: inherit; -}`, + .blocklyDropDownButton { + display: inline-block; + float: left; + padding: 0; + margin: 4px; + border-radius: 4px; + outline: none; + border: 1px solid; + transition: box-shadow .1s; + cursor: pointer; + } - `.blocklyArrowBottom { - border-bottom: 1px solid; - border-right: 1px solid; - border-bottom-right-radius: 4px; - border-color: inherit; -}`, + .blocklyArrowTop { + border-top: 1px solid; + border-left: 1px solid; + border-top-left-radius: 4px; + border-color: inherit; + } - `.blocklyResizeSE { - cursor: se-resize; - fill: #aaa; -}`, + .blocklyArrowBottom { + border-bottom: 1px solid; + border-right: 1px solid; + border-bottom-right-radius: 4px; + border-color: inherit; + } - `.blocklyResizeSW { - cursor: sw-resize; - fill: #aaa; -}`, + .blocklyResizeSE { + cursor: se-resize; + fill: #aaa; + } - `.blocklyResizeLine { - stroke: #515A5A; - stroke-width: 1; -}`, + .blocklyResizeSW { + cursor: sw-resize; + fill: #aaa; + } - `.blocklyHighlightedConnectionPath { - fill: none; - stroke: #fc3; - stroke-width: 4px; -}`, + .blocklyResizeLine { + stroke: #515A5A; + stroke-width: 1; + } - `.blocklyPathLight { - fill: none; - stroke-linecap: round; - stroke-width: 1; -}`, + .blocklyHighlightedConnectionPath { + fill: none; + stroke: #fc3; + stroke-width: 4px; + } - `.blocklySelected>.blocklyPathLight { - display: none; -}`, + .blocklyPathLight { + fill: none; + stroke-linecap: round; + stroke-width: 1; + } - `.blocklyDraggable { - /* backup for browsers (e.g. IE11) that don't support grab */ - cursor: url("<<>>/handopen.cur"), auto; - cursor: grab; - cursor: -webkit-grab; -}`, + .blocklySelected>.blocklyPathLight { + display: none; + } - /* backup for browsers (e.g. IE11) that don't support grabbing */ - `.blocklyDragging { - /* backup for browsers (e.g. IE11) that don't support grabbing */ - cursor: url("<<>>/handclosed.cur"), auto; - cursor: grabbing; - cursor: -webkit-grabbing; -}`, + .blocklyDraggable { + /* backup for browsers (e.g. IE11) that don't support grab */ + cursor: url("<<>>/handopen.cur"), auto; + cursor: grab; + cursor: -webkit-grab; + } - /* Changes cursor on mouse down. Not effective in Firefox because of - https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */ - `.blocklyDraggable:active { - /* backup for browsers (e.g. IE11) that don't support grabbing */ - cursor: url("<<>>/handclosed.cur"), auto; - cursor: grabbing; - cursor: -webkit-grabbing; -}`, + /* backup for browsers (e.g. IE11) that don't support grabbing */ + .blocklyDragging { + /* backup for browsers (e.g. IE11) that don't support grabbing */ + cursor: url("<<>>/handclosed.cur"), auto; + cursor: grabbing; + cursor: -webkit-grabbing; + } + + /* Changes cursor on mouse down. Not effective in Firefox because of + https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */ + .blocklyDraggable:active { + /* backup for browsers (e.g. IE11) that don't support grabbing */ + cursor: url("<<>>/handclosed.cur"), auto; + cursor: grabbing; + cursor: -webkit-grabbing; + } /* Change the cursor on the whole drag surface in case the mouse gets ahead of block during a drag. This way the cursor is still a closed hand. - */ - `.blocklyBlockDragSurface .blocklyDraggable { - /* backup for browsers (e.g. IE11) that don't support grabbing */ - cursor: url("<<>>/handclosed.cur"), auto; - cursor: grabbing; - cursor: -webkit-grabbing; -}`, + */ + .blocklyBlockDragSurface .blocklyDraggable { + /* backup for browsers (e.g. IE11) that don't support grabbing */ + cursor: url("<<>>/handclosed.cur"), auto; + cursor: grabbing; + cursor: -webkit-grabbing; + } - `.blocklyDragging.blocklyDraggingDelete { - cursor: url("<<>>/handdelete.cur"), auto; -}`, + .blocklyDragging.blocklyDraggingDelete { + cursor: url("<<>>/handdelete.cur"), auto; + } - `.blocklyDragging>.blocklyPath, -.blocklyDragging>.blocklyPathLight { - fill-opacity: .8; - stroke-opacity: .8; -}`, + .blocklyDragging>.blocklyPath, + .blocklyDragging>.blocklyPathLight { + fill-opacity: .8; + stroke-opacity: .8; + } - `.blocklyDragging>.blocklyPathDark { - display: none; -}`, + .blocklyDragging>.blocklyPathDark { + display: none; + } - `.blocklyDisabled>.blocklyPath { - fill-opacity: .5; - stroke-opacity: .5; -}`, + .blocklyDisabled>.blocklyPath { + fill-opacity: .5; + stroke-opacity: .5; + } - `.blocklyDisabled>.blocklyPathLight, -.blocklyDisabled>.blocklyPathDark { - display: none; -}`, + .blocklyDisabled>.blocklyPathLight, + .blocklyDisabled>.blocklyPathDark { + display: none; + } - `.blocklyInsertionMarker>.blocklyPath, -.blocklyInsertionMarker>.blocklyPathLight, -.blocklyInsertionMarker>.blocklyPathDark { - fill-opacity: .2; - stroke: none; -}`, + .blocklyInsertionMarker>.blocklyPath, + .blocklyInsertionMarker>.blocklyPathLight, + .blocklyInsertionMarker>.blocklyPathDark { + fill-opacity: .2; + stroke: none; + } - `.blocklyMultilineText { - font-family: monospace; -}`, + .blocklyMultilineText { + font-family: monospace; + } - `.blocklyNonEditableText>text { - pointer-events: none; -}`, + .blocklyNonEditableText>text { + pointer-events: none; + } - `.blocklyFlyout { - position: absolute; - z-index: 20; -}`, + .blocklyFlyout { + position: absolute; + z-index: 20; + } - `.blocklyText text { - cursor: default; -}`, + .blocklyText text { + cursor: default; + } /* Don't allow users to select text. It gets annoying when trying to drag a block and selected text moves instead. */ - `.blocklySvg text, -.blocklyBlockDragSurface text { - user-select: none; - -ms-user-select: none; - -webkit-user-select: none; - cursor: inherit; -}`, + .blocklySvg text, + .blocklyBlockDragSurface text { + user-select: none; + -ms-user-select: none; + -webkit-user-select: none; + cursor: inherit; + } - `.blocklyHidden { - display: none; -}`, + .blocklyHidden { + display: none; + } - `.blocklyFieldDropdown:not(.blocklyHidden) { - display: block; -}`, + .blocklyFieldDropdown:not(.blocklyHidden) { + display: block; + } - `.blocklyIconGroup { - cursor: default; -}`, + .blocklyIconGroup { + cursor: default; + } - `.blocklyIconGroup:not(:hover), -.blocklyIconGroupReadonly { - opacity: .6; -}`, + .blocklyIconGroup:not(:hover), + .blocklyIconGroupReadonly { + opacity: .6; + } - `.blocklyIconShape { - fill: #00f; - stroke: #fff; - stroke-width: 1px; -}`, + .blocklyIconShape { + fill: #00f; + stroke: #fff; + stroke-width: 1px; + } - `.blocklyIconSymbol { - fill: #fff; -}`, + .blocklyIconSymbol { + fill: #fff; + } - `.blocklyMinimalBody { - margin: 0; - padding: 0; -}`, + .blocklyMinimalBody { + margin: 0; + padding: 0; + } - `.blocklyHtmlInput { - border: none; - border-radius: 4px; - height: 100%; - margin: 0; - outline: none; - padding: 0; - width: 100%; - text-align: center; - display: block; - box-sizing: border-box; -}`, + .blocklyHtmlInput { + border: none; + border-radius: 4px; + height: 100%; + margin: 0; + outline: none; + padding: 0; + width: 100%; + text-align: center; + display: block; + box-sizing: border-box; + } /* Edge and IE introduce a close icon when the input value is longer than a certain length. This affects our sizing calculations of the text input. Hiding the close icon to avoid that. */ - `.blocklyHtmlInput::-ms-clear { - display: none; -}`, + .blocklyHtmlInput::-ms-clear { + display: none; + } - `.blocklyMainBackground { - stroke-width: 1; - stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */ -}`, + .blocklyMainBackground { + stroke-width: 1; + stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */ + } - `.blocklyMutatorBackground { - fill: #fff; - stroke: #ddd; - stroke-width: 1; -}`, + .blocklyMutatorBackground { + fill: #fff; + stroke: #ddd; + stroke-width: 1; + } - `.blocklyFlyoutBackground { - fill: #ddd; - fill-opacity: .8; -}`, + .blocklyFlyoutBackground { + fill: #ddd; + fill-opacity: .8; + } - `.blocklyMainWorkspaceScrollbar { - z-index: 20; -}`, + .blocklyMainWorkspaceScrollbar { + z-index: 20; + } - `.blocklyFlyoutScrollbar { - z-index: 30; -}`, + .blocklyFlyoutScrollbar { + z-index: 30; + } - `.blocklyScrollbarHorizontal, -.blocklyScrollbarVertical { - position: absolute; - outline: none; -}`, + .blocklyScrollbarHorizontal, + .blocklyScrollbarVertical { + position: absolute; + outline: none; + } - `.blocklyScrollbarBackground { - opacity: 0; -}`, + .blocklyScrollbarBackground { + opacity: 0; + } - `.blocklyScrollbarHandle { - fill: #ccc; -}`, + .blocklyScrollbarHandle { + fill: #ccc; + } - `.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle, -.blocklyScrollbarHandle:hover { - fill: #bbb; -}`, + .blocklyScrollbarBackground:hover+.blocklyScrollbarHandle, + .blocklyScrollbarHandle:hover { + fill: #bbb; + } /* Darken flyout scrollbars due to being on a grey background. */ /* By contrast, workspace scrollbars are on a white background. */ - `.blocklyFlyout .blocklyScrollbarHandle { - fill: #bbb; -}`, + .blocklyFlyout .blocklyScrollbarHandle { + fill: #bbb; + } - `.blocklyFlyout .blocklyScrollbarBackground:hover+.blocklyScrollbarHandle, -.blocklyFlyout .blocklyScrollbarHandle:hover { - fill: #aaa; -}`, + .blocklyFlyout .blocklyScrollbarBackground:hover+.blocklyScrollbarHandle, + .blocklyFlyout .blocklyScrollbarHandle:hover { + fill: #aaa; + } - `.blocklyInvalidInput { - background: #faa; -}`, + .blocklyInvalidInput { + background: #faa; + } - `.blocklyVerticalMarker { - stroke-width: 3px; - fill: rgba(255,255,255,.5); - pointer-events: none; -}`, + .blocklyVerticalMarker { + stroke-width: 3px; + fill: rgba(255,255,255,.5); + pointer-events: none; + } - `.blocklyComputeCanvas { - position: absolute; - width: 0; - height: 0; -}`, + .blocklyComputeCanvas { + position: absolute; + width: 0; + height: 0; + } - `.blocklyNoPointerEvents { - pointer-events: none; -}`, + .blocklyNoPointerEvents { + pointer-events: none; + } - `.blocklyContextMenu { - border-radius: 4px; - max-height: 100%; -}`, + .blocklyContextMenu { + border-radius: 4px; + max-height: 100%; + } - `.blocklyDropdownMenu { - border-radius: 2px; - padding: 0 !important; -}`, + .blocklyDropdownMenu { + border-radius: 2px; + padding: 0 !important; + } - `.blocklyDropdownMenu .blocklyMenuItem { - /* 28px on the left for icon or checkbox. */ - padding-left: 28px; -}`, + .blocklyDropdownMenu .blocklyMenuItem { + /* 28px on the left for icon or checkbox. */ + padding-left: 28px; + } /* BiDi override for the resting state. */ - `.blocklyDropdownMenu .blocklyMenuItemRtl { - /* Flip left/right padding for BiDi. */ - padding-left: 5px; - padding-right: 28px; -}`, + .blocklyDropdownMenu .blocklyMenuItemRtl { + /* Flip left/right padding for BiDi. */ + padding-left: 5px; + padding-right: 28px; + } - `.blocklyWidgetDiv .blocklyMenu { - background: #fff; - border: 1px solid transparent; - box-shadow: 0 0 3px 1px rgba(0,0,0,.3); - font: normal 13px Arial, sans-serif; - margin: 0; - outline: none; - padding: 4px 0; - position: absolute; - overflow-y: auto; - overflow-x: hidden; - max-height: 100%; - z-index: 20000; /* Arbitrary, but some apps depend on it... */ -}`, + .blocklyWidgetDiv .blocklyMenu { + background: #fff; + border: 1px solid transparent; + box-shadow: 0 0 3px 1px rgba(0,0,0,.3); + font: normal 13px Arial, sans-serif; + margin: 0; + outline: none; + padding: 4px 0; + position: absolute; + overflow-y: auto; + overflow-x: hidden; + max-height: 100%; + z-index: 20000; /* Arbitrary, but some apps depend on it... */ + } - `.blocklyWidgetDiv .blocklyMenu.blocklyFocused { - box-shadow: 0 0 6px 1px rgba(0,0,0,.3); -}`, + .blocklyWidgetDiv .blocklyMenu.blocklyFocused { + box-shadow: 0 0 6px 1px rgba(0,0,0,.3); + } - `.blocklyDropDownDiv .blocklyMenu { - background: inherit; /* Compatibility with gapi, reset from goog-menu */ - border: inherit; /* Compatibility with gapi, reset from goog-menu */ - font: normal 13px "Helvetica Neue", Helvetica, sans-serif; - outline: none; - position: relative; /* Compatibility with gapi, reset from goog-menu */ - z-index: 20000; /* Arbitrary, but some apps depend on it... */ -}`, + .blocklyDropDownDiv .blocklyMenu { + background: inherit; /* Compatibility with gapi, reset from goog-menu */ + border: inherit; /* Compatibility with gapi, reset from goog-menu */ + font: normal 13px "Helvetica Neue", Helvetica, sans-serif; + outline: none; + position: relative; /* Compatibility with gapi, reset from goog-menu */ + z-index: 20000; /* Arbitrary, but some apps depend on it... */ + } /* State: resting. */ - `.blocklyMenuItem { - border: none; - color: #000; - cursor: pointer; - list-style: none; - margin: 0; - /* 7em on the right for shortcut. */ - min-width: 7em; - padding: 6px 15px; - white-space: nowrap; -}`, + .blocklyMenuItem { + border: none; + color: #000; + cursor: pointer; + list-style: none; + margin: 0; + /* 7em on the right for shortcut. */ + min-width: 7em; + padding: 6px 15px; + white-space: nowrap; + } /* State: disabled. */ - `.blocklyMenuItemDisabled { - color: #ccc; - cursor: inherit; -}`, + .blocklyMenuItemDisabled { + color: #ccc; + cursor: inherit; + } /* State: hover. */ - `.blocklyMenuItemHighlight { - background-color: rgba(0,0,0,.1); -}`, + .blocklyMenuItemHighlight { + background-color: rgba(0,0,0,.1); + } /* State: selected/checked. */ - `.blocklyMenuItemCheckbox { - height: 16px; - position: absolute; - width: 16px; -}`, + .blocklyMenuItemCheckbox { + height: 16px; + position: absolute; + width: 16px; + } - `.blocklyMenuItemSelected .blocklyMenuItemCheckbox { - background: url(<<>>/sprites.png) no-repeat -48px -16px; - float: left; - margin-left: -24px; - position: static; /* Scroll with the menu. */ -}`, + .blocklyMenuItemSelected .blocklyMenuItemCheckbox { + background: url(<<>>/sprites.png) no-repeat -48px -16px; + float: left; + margin-left: -24px; + position: static; /* Scroll with the menu. */ + } - `.blocklyMenuItemRtl .blocklyMenuItemCheckbox { - float: right; - margin-right: -24px; -}`, -]; -exports.CONTENT = CONTENT; + .blocklyMenuItemRtl .blocklyMenuItemCheckbox { + float: right; + margin-right: -24px; + } +`); +exports.content = content; diff --git a/core/field_angle.js b/core/field_angle.js index 376beda2d..35d218272 100644 --- a/core/field_angle.js +++ b/core/field_angle.js @@ -540,29 +540,32 @@ FieldAngle.prototype.wrapValue_ = function(value) { /** * CSS for angle field. See css.js for use. */ -Css.register([ - `.blocklyAngleCircle { - stroke: #444; - stroke-width: 1; - fill: #ddd; - fill-opacity: .8; -}`, - `.blocklyAngleMarks { - stroke: #444; - stroke-width: 1; -}`, - `.blocklyAngleGauge { - fill: #f88; - fill-opacity: .8; - pointer-events: none; -}`, - `.blocklyAngleLine { - stroke: #f00; - stroke-width: 2; - stroke-linecap: round; - pointer-events: none; -}` -]); +Css.register(` + .blocklyAngleCircle { + stroke: #444; + stroke-width: 1; + fill: #ddd; + fill-opacity: .8; + } + + .blocklyAngleMarks { + stroke: #444; + stroke-width: 1; + } + + .blocklyAngleGauge { + fill: #f88; + fill-opacity: .8; + pointer-events: none; + } + + .blocklyAngleLine { + stroke: #f00; + stroke-width: 2; + stroke-linecap: round; + pointer-events: none; + } +`); fieldRegistry.register('field_angle', FieldAngle); diff --git a/core/field_colour.js b/core/field_colour.js index d5f2c2d50..9eea803d7 100644 --- a/core/field_colour.js +++ b/core/field_colour.js @@ -608,38 +608,36 @@ FieldColour.prototype.dropdownDispose_ = function() { /** * CSS for colour picker. See css.js for use. */ -Css.register([ - /* eslint-disable indent */ - '.blocklyColourTable {', - 'border-collapse: collapse;', - 'display: block;', - 'outline: none;', - 'padding: 1px;', - '}', +Css.register(` + .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 { + 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;', - '}', + .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 */ -]); + .blocklyColourSelected, .blocklyColourSelected:hover { + border-color: #eee !important; + outline: 1px solid #333; + position: relative; + } +`); fieldRegistry.register('field_colour', FieldColour); diff --git a/core/field_dropdown.js b/core/field_dropdown.js index 569c8a918..e9c63a31d 100644 --- a/core/field_dropdown.js +++ b/core/field_dropdown.js @@ -317,7 +317,7 @@ FieldDropdown.prototype.showEditor_ = function(opt_e) { } // Remove any pre-existing elements in the dropdown. - Blockly.DropDownDiv.clearContent(); + DropDownDiv.clearContent(); // Element gets created in render. this.menu_.render(DropDownDiv.getContentDiv()); const menuElement = /** @type {!Element} */ (this.menu_.getElement()); diff --git a/core/field_multilineinput.js b/core/field_multilineinput.js index fa308ae74..e3af3501e 100644 --- a/core/field_multilineinput.js +++ b/core/field_multilineinput.js @@ -433,19 +433,19 @@ FieldMultilineInput.prototype.onHtmlInputKeyDown_ = function(e) { /** * CSS for multiline field. See css.js for use. */ -Css.register([ - `.blocklyHtmlTextAreaInput { - font-family: monospace; - resize: none; - overflow: hidden; - height: 100%; - text-align: left; -}`, - `.blocklyHtmlTextAreaInputOverflowedY { - overflow-y: scroll; -}` -]); +Css.register(` + .blocklyHtmlTextAreaInput { + font-family: monospace; + resize: none; + overflow: hidden; + height: 100%; + text-align: left; + } + .blocklyHtmlTextAreaInputOverflowedY { + overflow-y: scroll; + } +`); fieldRegistry.register('field_multilinetext', FieldMultilineInput); diff --git a/core/flyout_button.js b/core/flyout_button.js index 6acc02500..96fe58b14 100644 --- a/core/flyout_button.js +++ b/core/flyout_button.js @@ -312,31 +312,29 @@ FlyoutButton.prototype.onMouseUp_ = function(e) { }; /** - * CSS for buttons and labels. See css.js for use. + * CSS for buttons and labels. See css.js for use. */ -Css.register([ - /* eslint-disable indent */ - '.blocklyFlyoutButton {', - 'fill: #888;', - 'cursor: default;', - '}', +Css.register(` + .blocklyFlyoutButton { + fill: #888; + cursor: default; + } - '.blocklyFlyoutButtonShadow {', - 'fill: #666;', - '}', + .blocklyFlyoutButtonShadow { + fill: #666; + } - '.blocklyFlyoutButton:hover {', - 'fill: #aaa;', - '}', + .blocklyFlyoutButton:hover { + fill: #aaa; + } - '.blocklyFlyoutLabel {', - 'cursor: default;', - '}', + .blocklyFlyoutLabel { + cursor: default; + } - '.blocklyFlyoutLabelBackground {', - 'opacity: 0;', - '}', - /* eslint-enable indent */ -]); + .blocklyFlyoutLabelBackground { + opacity: 0; + } +`); exports = FlyoutButton; diff --git a/core/toolbox/category.js b/core/toolbox/category.js index 5d57cc58f..15ffbe780 100644 --- a/core/toolbox/category.js +++ b/core/toolbox/category.js @@ -645,79 +645,79 @@ ToolboxCategory.prototype.dispose = function() { /** * CSS for Toolbox. See css.js for use. */ -Css.register([ - `.blocklyTreeRow:not(.blocklyTreeSelected):hover { - background-color: rgba(255, 255, 255, 0.2); -}`, +Css.register(` + .blocklyTreeRow:not(.blocklyTreeSelected):hover { + background-color: rgba(255, 255, 255, 0.2); + } - `.blocklyToolboxDiv[layout="h"] .blocklyToolboxCategory { - margin: 1px 5px 1px 0; -}`, + .blocklyToolboxDiv[layout="h"] .blocklyToolboxCategory { + margin: 1px 5px 1px 0; + } - `.blocklyToolboxDiv[dir="RTL"][layout="h"] .blocklyToolboxCategory { - margin: 1px 0 1px 5px; -}`, + .blocklyToolboxDiv[dir="RTL"][layout="h"] .blocklyToolboxCategory { + margin: 1px 0 1px 5px; + } - `.blocklyTreeRow { - height: 22px; - line-height: 22px; - margin-bottom: 3px; - padding-right: 8px; - white-space: nowrap; -}`, + .blocklyTreeRow { + height: 22px; + line-height: 22px; + margin-bottom: 3px; + padding-right: 8px; + white-space: nowrap; + } - `.blocklyToolboxDiv[dir="RTL"] .blocklyTreeRow { - margin-left: 8px; - padding-right: 0; -}`, + .blocklyToolboxDiv[dir="RTL"] .blocklyTreeRow { + margin-left: 8px; + padding-right: 0; + } - `.blocklyTreeIcon { - background-image: url(<<>>/sprites.png); - height: 16px; - vertical-align: middle; - visibility: hidden; - width: 16px; -}`, + .blocklyTreeIcon { + background-image: url(<<>>/sprites.png); + height: 16px; + vertical-align: middle; + visibility: hidden; + width: 16px; + } - `.blocklyTreeIconClosed { - background-position: -32px -1px; -}`, + .blocklyTreeIconClosed { + background-position: -32px -1px; + } - `.blocklyToolboxDiv[dir="RTL"] .blocklyTreeIconClosed { - background-position: 0 -1px; -}`, + .blocklyToolboxDiv[dir="RTL"] .blocklyTreeIconClosed { + background-position: 0 -1px; + } - `.blocklyTreeSelected>.blocklyTreeIconClosed { - background-position: -32px -17px; -}`, + .blocklyTreeSelected>.blocklyTreeIconClosed { + background-position: -32px -17px; + } - `.blocklyToolboxDiv[dir="RTL"] .blocklyTreeSelected>.blocklyTreeIconClosed { - background-position: 0 -17px; -}`, + .blocklyToolboxDiv[dir="RTL"] .blocklyTreeSelected>.blocklyTreeIconClosed { + background-position: 0 -17px; + } - `.blocklyTreeIconOpen { - background-position: -16px -1px; -}`, + .blocklyTreeIconOpen { + background-position: -16px -1px; + } - `.blocklyTreeSelected>.blocklyTreeIconOpen { - background-position: -16px -17px; -}`, + .blocklyTreeSelected>.blocklyTreeIconOpen { + background-position: -16px -17px; + } - `.blocklyTreeLabel { - cursor: default; - font: 16px sans-serif; - padding: 0 3px; - vertical-align: middle; -}`, + .blocklyTreeLabel { + cursor: default; + font: 16px sans-serif; + padding: 0 3px; + vertical-align: middle; + } - `.blocklyToolboxDelete .blocklyTreeLabel { - cursor: url("<<>>/handdelete.cur"), auto; -}`, + .blocklyToolboxDelete .blocklyTreeLabel { + cursor: url("<<>>/handdelete.cur"), auto; + } - `.blocklyTreeSelected .blocklyTreeLabel { - color: #fff; -}` -]); + .blocklyTreeSelected .blocklyTreeLabel { + color: #fff; + } +`); registry.register( registry.Type.TOOLBOX_ITEM, ToolboxCategory.registrationName, diff --git a/core/toolbox/separator.js b/core/toolbox/separator.js index d920578cd..dc0cf72ce 100644 --- a/core/toolbox/separator.js +++ b/core/toolbox/separator.js @@ -102,21 +102,22 @@ ToolboxSeparator.prototype.dispose = function() { /** * CSS for Toolbox. See css.js for use. */ -Css.register([ - `.blocklyTreeSeparator { - border-bottom: solid #e5e5e5 1px; - height: 0; - margin: 5px 0; -}`, - `.blocklyToolboxDiv[layout="h"] .blocklyTreeSeparator { - border-right: solid #e5e5e5 1px; - border-bottom: none; - height: auto; - margin: 0 5px 0 5px; - padding: 5px 0; - width: 0; -}`, -]); +Css.register(` + .blocklyTreeSeparator { + border-bottom: solid #e5e5e5 1px; + height: 0; + margin: 5px 0; + } + + .blocklyToolboxDiv[layout="h"] .blocklyTreeSeparator { + border-right: solid #e5e5e5 1px; + border-bottom: none; + height: auto; + margin: 0 5px 0 5px; + padding: 5px 0; + width: 0; + } +`); registry.register( registry.Type.TOOLBOX_ITEM, ToolboxSeparator.registrationName, diff --git a/core/toolbox/toolbox.js b/core/toolbox/toolbox.js index fadb81bad..8aa4ac35d 100644 --- a/core/toolbox/toolbox.js +++ b/core/toolbox/toolbox.js @@ -1116,27 +1116,38 @@ Toolbox.prototype.dispose = function() { /** * CSS for Toolbox. See css.js for use. */ -Css.register([ - /* eslint-disable indent */ - '.blocklyToolboxDelete {', 'cursor: url("<<>>/handdelete.cur"), auto;', - '}', +Css.register(` + .blocklyToolboxDelete { + cursor: url("<<>>/handdelete.cur"), auto; + } - '.blocklyToolboxGrab {', 'cursor: url("<<>>/handclosed.cur"), auto;', - 'cursor: grabbing;', 'cursor: -webkit-grabbing;', '}', + .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;', 'padding: 4px 0 4px 0;', 'position: absolute;', - 'z-index: 70;', /* so blocks go under toolbox when dragging */ - '-webkit-tap-highlight-color: transparent;', /* issue #1345 */ - '}', + .blocklyToolboxDiv { + background-color: #ddd; + overflow-x: visible; + overflow-y: auto; + padding: 4px 0 4px 0; + position: absolute; + z-index: 70; /* so blocks go under toolbox when dragging */ + -webkit-tap-highlight-color: transparent; /* issue #1345 */ + } - '.blocklyToolboxContents {', 'display: flex;', 'flex-wrap: wrap;', - 'flex-direction: column;', '}', + .blocklyToolboxContents { + display: flex; + flex-wrap: wrap; + flex-direction: column; + } - '.blocklyToolboxContents:focus {', 'outline: none;', '}', - /* eslint-enable indent */ -]); + .blocklyToolboxContents:focus { + outline: none; + } +`); registry.register(registry.Type.TOOLBOX, registry.DEFAULT, Toolbox); diff --git a/core/workspace_comment_svg.js b/core/workspace_comment_svg.js index 7d2f89f54..a40a0b4bb 100644 --- a/core/workspace_comment_svg.js +++ b/core/workspace_comment_svg.js @@ -1080,68 +1080,64 @@ WorkspaceCommentSvg.prototype.blurFocus = function() { /** * CSS for workspace comment. See css.js for use. */ -Css.register([ - // clang-format off - /* eslint-disable indent */ - '.blocklyCommentForeignObject {', - 'position: relative;', - 'z-index: 0;', - '}', +Css.register(` + .blocklyCommentForeignObject { + position: relative; + z-index: 0; + } - '.blocklyCommentRect {', - 'fill: #E7DE8E;', - 'stroke: #bcA903;', - 'stroke-width: 1px;', - '}', + .blocklyCommentRect { + fill: #E7DE8E; + stroke: #bcA903; + stroke-width: 1px; + } - '.blocklyCommentTarget {', - 'fill: transparent;', - 'stroke: #bcA903;', - '}', + .blocklyCommentTarget { + fill: transparent; + stroke: #bcA903; + } - '.blocklyCommentTargetFocused {', - 'fill: none;', - '}', + .blocklyCommentTargetFocused { + fill: none; + } - '.blocklyCommentHandleTarget {', - 'fill: none;', - '}', + .blocklyCommentHandleTarget { + fill: none; + } - '.blocklyCommentHandleTargetFocused {', - 'fill: transparent;', - '}', + .blocklyCommentHandleTargetFocused { + fill: transparent; + } - '.blocklyFocused>.blocklyCommentRect {', - 'fill: #B9B272;', - 'stroke: #B9B272;', - '}', + .blocklyFocused>.blocklyCommentRect { + fill: #B9B272; + stroke: #B9B272; + } - '.blocklySelected>.blocklyCommentTarget {', - 'stroke: #fc3;', - 'stroke-width: 3px;', - '}', + .blocklySelected>.blocklyCommentTarget { + stroke: #fc3; + stroke-width: 3px; + } - '.blocklyCommentDeleteIcon {', - 'cursor: pointer;', - 'fill: #000;', - 'display: none;', - '}', + .blocklyCommentDeleteIcon { + cursor: pointer; + fill: #000; + display: none; + } - '.blocklySelected > .blocklyCommentDeleteIcon {', - 'display: block;', - '}', + .blocklySelected > .blocklyCommentDeleteIcon { + display: block; + } - '.blocklyDeleteIconShape {', - 'fill: #000;', - 'stroke: #000;', - 'stroke-width: 1px;', - '}', + .blocklyDeleteIconShape { + fill: #000; + stroke: #000; + stroke-width: 1px; + } - '.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {', - 'stroke: #fc3;', - '}' - /* eslint-enable indent */ - // clang-format on -]); + .blocklyDeleteIconShape.blocklyDeleteIconHighlighted { + stroke: #fc3; + } +`); exports = WorkspaceCommentSvg; diff --git a/core/zoom_controls.js b/core/zoom_controls.js index 8092fee57..06a7fb361 100644 --- a/core/zoom_controls.js +++ b/core/zoom_controls.js @@ -499,18 +499,18 @@ ZoomControls.prototype.fireZoomEvent_ = function() { /** * CSS for zoom controls. See css.js for use. */ -Css.register([ - `.blocklyZoom>image, .blocklyZoom>svg>image { - opacity: .4; -}`, +Css.register(` + .blocklyZoom>image, .blocklyZoom>svg>image { + opacity: .4; + } - `.blocklyZoom>image:hover, .blocklyZoom>svg>image:hover { - opacity: .6; -}`, + .blocklyZoom>image:hover, .blocklyZoom>svg>image:hover { + opacity: .6; + } - `.blocklyZoom>image:active, .blocklyZoom>svg>image:active { - opacity: .8; -}` -]); + .blocklyZoom>image:active, .blocklyZoom>svg>image:active { + opacity: .8; + } +`); exports = ZoomControls; diff --git a/tests/deps.js b/tests/deps.js index f95545de7..b961dadbf 100644 --- a/tests/deps.js +++ b/tests/deps.js @@ -31,7 +31,7 @@ goog.addDependency('../../core/constants.js', ['Blockly.constants'], [], {'lang' goog.addDependency('../../core/contextmenu.js', ['Blockly.ContextMenu'], ['Blockly.Events.BlockCreate', 'Blockly.Events.utils', 'Blockly.Menu', 'Blockly.MenuItem', 'Blockly.Msg', 'Blockly.WidgetDiv', 'Blockly.Xml', 'Blockly.browserEvents', 'Blockly.clipboard', 'Blockly.internalConstants', 'Blockly.utils', 'Blockly.utils.Coordinate', 'Blockly.utils.Rect', 'Blockly.utils.aria', 'Blockly.utils.deprecation', 'Blockly.utils.dom', 'Blockly.utils.userAgent'], {'lang': 'es6', 'module': 'goog'}); goog.addDependency('../../core/contextmenu_items.js', ['Blockly.ContextMenuItems'], ['Blockly.ContextMenuRegistry', 'Blockly.Events.utils', 'Blockly.Msg', 'Blockly.clipboard', 'Blockly.dialog', 'Blockly.inputTypes', 'Blockly.utils.idGenerator', 'Blockly.utils.userAgent'], {'lang': 'es6', 'module': 'goog'}); goog.addDependency('../../core/contextmenu_registry.js', ['Blockly.ContextMenuRegistry'], [], {'lang': 'es6', 'module': 'goog'}); -goog.addDependency('../../core/css.js', ['Blockly.Css'], [], {'lang': 'es6', 'module': 'goog'}); +goog.addDependency('../../core/css.js', ['Blockly.Css'], ['Blockly.utils.deprecation'], {'lang': 'es6', 'module': 'goog'}); goog.addDependency('../../core/delete_area.js', ['Blockly.DeleteArea'], ['Blockly.BlockSvg', 'Blockly.DragTarget', 'Blockly.IDeleteArea', 'Blockly.utils.object'], {'lang': 'es6', 'module': 'goog'}); goog.addDependency('../../core/dialog.js', ['Blockly.dialog'], [], {'lang': 'es6', 'module': 'goog'}); goog.addDependency('../../core/drag_target.js', ['Blockly.DragTarget'], ['Blockly.IDragTarget'], {'lang': 'es6', 'module': 'goog'}); diff --git a/tests/deps.mocha.js b/tests/deps.mocha.js index fb0fa09d2..1d3b7fcac 100644 --- a/tests/deps.mocha.js +++ b/tests/deps.mocha.js @@ -31,7 +31,7 @@ goog.addDependency('../../core/constants.js', ['Blockly.constants'], [], {'lang' goog.addDependency('../../core/contextmenu.js', ['Blockly.ContextMenu'], ['Blockly.Events.BlockCreate', 'Blockly.Events.utils', 'Blockly.Menu', 'Blockly.MenuItem', 'Blockly.Msg', 'Blockly.WidgetDiv', 'Blockly.Xml', 'Blockly.browserEvents', 'Blockly.clipboard', 'Blockly.internalConstants', 'Blockly.utils', 'Blockly.utils.Coordinate', 'Blockly.utils.Rect', 'Blockly.utils.aria', 'Blockly.utils.deprecation', 'Blockly.utils.dom', 'Blockly.utils.userAgent'], {'lang': 'es6', 'module': 'goog'}); goog.addDependency('../../core/contextmenu_items.js', ['Blockly.ContextMenuItems'], ['Blockly.ContextMenuRegistry', 'Blockly.Events.utils', 'Blockly.Msg', 'Blockly.clipboard', 'Blockly.dialog', 'Blockly.inputTypes', 'Blockly.utils.idGenerator', 'Blockly.utils.userAgent'], {'lang': 'es6', 'module': 'goog'}); goog.addDependency('../../core/contextmenu_registry.js', ['Blockly.ContextMenuRegistry'], [], {'lang': 'es6', 'module': 'goog'}); -goog.addDependency('../../core/css.js', ['Blockly.Css'], [], {'lang': 'es6', 'module': 'goog'}); +goog.addDependency('../../core/css.js', ['Blockly.Css'], ['Blockly.utils.deprecation'], {'lang': 'es6', 'module': 'goog'}); goog.addDependency('../../core/delete_area.js', ['Blockly.DeleteArea'], ['Blockly.BlockSvg', 'Blockly.DragTarget', 'Blockly.IDeleteArea', 'Blockly.utils.object'], {'lang': 'es6', 'module': 'goog'}); goog.addDependency('../../core/dialog.js', ['Blockly.dialog'], [], {'lang': 'es6', 'module': 'goog'}); goog.addDependency('../../core/drag_target.js', ['Blockly.DragTarget'], ['Blockly.IDragTarget'], {'lang': 'es6', 'module': 'goog'});