From 902112be3d88493261435b2c786b274d261fcccb Mon Sep 17 00:00:00 2001 From: kozbial Date: Fri, 16 Jul 2021 10:00:56 -0700 Subject: [PATCH] Use ES6 template strings in core/css.js --- core/css.js | 766 ++++++++++++++++++++++++++-------------------------- 1 file changed, 384 insertions(+), 382 deletions(-) diff --git a/core/css.js b/core/css.js index a72088a7f..b63c7ed8e 100644 --- a/core/css.js +++ b/core/css.js @@ -76,477 +76,479 @@ Blockly.Css.inject = function(hasCss, pathToMedia) { * Array making up the CSS content for Blockly. */ Blockly.Css.CONTENT = [ - /* eslint-disable indent */ - '.blocklySvg {', - 'background-color: #fff;', - 'outline: none;', - 'overflow: hidden;', /* IE overflows by default. */ - 'position: absolute;', - 'display: block;', - '}', +`.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);', - '}', +`.blocklyDropDownDiv.blocklyFocused { + box-shadow: 0 0 6px 1px rgba(0,0,0,.3); +}`, - '.blocklyDropDownContent {', - 'max-height: 300px;', // @todo: spec for maximum height. - 'overflow: auto;', - 'overflow-x: hidden;', - 'position: relative;', - '}', +`.blocklyDropDownContent { + max-height: 300px;', // @todo: spec for maximum height. + overflow: auto; + overflow-x: hidden; + position: relative; +}`, - '.blocklyDropDownArrow {', - 'position: absolute;', - 'left: 0;', - 'top: 0;', - 'width: 16px;', - 'height: 16px;', - 'z-index: -1;', - 'background-color: inherit;', - 'border-color: inherit;', - '}', +`.blocklyDropDownArrow { + position: absolute; + left: 0; + top: 0; + width: 16px; + height: 16px; + z-index: -1; + background-color: inherit; + 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;', - '}', +`.blocklyDropDownButton { + display: inline-block; + float: left; + padding: 0; + margin: 4px; + border-radius: 4px; + outline: none; + border: 1px solid; + transition: box-shadow .1s; + cursor: pointer; +}`, - '.blocklyArrowTop {', - 'border-top: 1px solid;', - 'border-left: 1px solid;', - 'border-top-left-radius: 4px;', - 'border-color: inherit;', - '}', +`.blocklyArrowTop { + border-top: 1px solid; + border-left: 1px solid; + border-top-left-radius: 4px; + border-color: inherit; +}`, - '.blocklyArrowBottom {', - 'border-bottom: 1px solid;', - 'border-right: 1px solid;', - 'border-bottom-right-radius: 4px;', - 'border-color: inherit;', - '}', +`.blocklyArrowBottom { + border-bottom: 1px solid; + border-right: 1px solid; + border-bottom-right-radius: 4px; + border-color: inherit; +}`, - '.blocklyResizeSE {', - 'cursor: se-resize;', - 'fill: #aaa;', - '}', +`.blocklyResizeSE { + cursor: se-resize; + fill: #aaa; +}`, - '.blocklyResizeSW {', - 'cursor: sw-resize;', - 'fill: #aaa;', - '}', +`.blocklyResizeSW { + cursor: sw-resize; + fill: #aaa; +}`, - '.blocklyResizeLine {', - 'stroke: #515A5A;', - 'stroke-width: 1;', - '}', +`.blocklyResizeLine { + stroke: #515A5A; + stroke-width: 1; +}`, - '.blocklyHighlightedConnectionPath {', - 'fill: none;', - 'stroke: #fc3;', - 'stroke-width: 4px;', - '}', +`.blocklyHighlightedConnectionPath { + fill: none; + stroke: #fc3; + stroke-width: 4px; +}`, - '.blocklyPathLight {', - 'fill: none;', - 'stroke-linecap: round;', - 'stroke-width: 1;', - '}', +`.blocklyPathLight { + fill: none; + stroke-linecap: round; + stroke-width: 1; +}`, - '.blocklySelected>.blocklyPathLight {', - 'display: none;', - '}', +`.blocklySelected>.blocklyPathLight { + display: none; +}`, - '.blocklyDraggable {', - /* backup for browsers (e.g. IE11) that don't support grab */ - 'cursor: url("<<>>/handopen.cur"), auto;', - 'cursor: grab;', - 'cursor: -webkit-grab;', - '}', +`.blocklyDraggable { + /* backup for browsers (e.g. IE11) that don't support grab */ + cursor: url("<<>>/handopen.cur"), auto; + cursor: grab; + cursor: -webkit-grab; +}`, + + /* 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; +}`, - '.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;', - '}', + 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;', - '}', - /* eslint-enable indent */ +`.blocklyMenuItemRtl .blocklyMenuItemCheckbox { + float: right; + margin-right: -24px; +}`, ];