Convert a few long CSS strings to template strings

Author: adrianheine

src/display/scrolling.js

@@ -17,10 +17,10 @@ export function maybeScrollWindow(cm, coords) {
   if (coords.top + box.top < 0) doScroll = true
   else if (coords.bottom + box.top > (window.innerHeight || document.documentElement.clientHeight)) doScroll = false
   if (doScroll != null && !phantom) {
-    let scrollNode = elt("div", "\u200b", null, "position: absolute; top: " +
-                         (coords.top - display.viewOffset - paddingTop(cm.display)) + "px; height: " +
-                         (coords.bottom - coords.top + scrollGap(cm) + display.barHeight) + "px; left: " +
-                         coords.left + "px; width: 2px;")
+    let scrollNode = elt("div", "\u200b", null, `position: absolute;
+                         top: ${coords.top - display.viewOffset - paddingTop(cm.display)}px;
+                         height: ${coords.bottom - coords.top + scrollGap(cm) + display.barHeight}px;
+                         left: ${coords.left}px; width: 2px;`)
     cm.display.lineSpace.appendChild(scrollNode)
     scrollNode.scrollIntoView(doScroll)
     cm.display.lineSpace.removeChild(scrollNode)

src/display/selection.js

@@ -57,9 +57,9 @@ function drawSelectionRange(cm, range, output) {
     if (top < 0) top = 0
     top = Math.round(top)
     bottom = Math.round(bottom)
-    fragment.appendChild(elt("div", null, "CodeMirror-selected", "position: absolute; left: " + left +
-                             "px; top: " + top + "px; width: " + (width == null ? rightSide - left : width) +
-                             "px; height: " + (bottom - top) + "px"))
+    fragment.appendChild(elt("div", null, "CodeMirror-selected", `position: absolute; left: ${left}px;
+                             top: ${top}px; width: ${width == null ? rightSide - left : width}px;
+                             height: ${bottom - top}px`))
   }
 
   function drawForLine(line, fromArg, toArg) {

src/input/TextareaInput.js

@@ -284,10 +284,10 @@ TextareaInput.prototype = copyObj({
     let oldCSS = te.style.cssText, oldWrapperCSS = input.wrapper.style.cssText
     input.wrapper.style.cssText = "position: absolute"
     let wrapperBox = input.wrapper.getBoundingClientRect()
-    te.style.cssText = "position: absolute; width: 30px; height: 30px; top: " + (e.clientY - wrapperBox.top - 5) +
-      "px; left: " + (e.clientX - wrapperBox.left - 5) + "px; z-index: 1000; background: " +
-      (ie ? "rgba(255, 255, 255, .05)" : "transparent") +
-      "; outline: none; border-width: 0; outline: none; overflow: hidden; opacity: .05; filter: alpha(opacity=5);"
+    te.style.cssText = `position: absolute; width: 30px; height: 30px;
+      top: ${e.clientY - wrapperBox.top - 5}px; left: ${e.clientX - wrapperBox.left - 5}px;
+      z-index: 1000; background: ${ie ? "rgba(255, 255, 255, .05)" : "transparent"};
+      outline: none; border-width: 0; outline: none; overflow: hidden; opacity: .05; filter: alpha(opacity=5);`
     let oldScrollY
     if (webkit) oldScrollY = window.scrollY // Work around Chrome issue (#2712)
     display.input.focus()

src/measurement/update_line.js

@@ -95,15 +95,15 @@ function updateLineGutter(cm, lineView, lineN, dims) {
   if (lineView.line.gutterClass) {
     let wrap = ensureLineWrapped(lineView)
     lineView.gutterBackground = elt("div", null, "CodeMirror-gutter-background " + lineView.line.gutterClass,
-                                    "left: " + (cm.options.fixedGutter ? dims.fixedPos : -dims.gutterTotalWidth) +
-                                    "px; width: " + dims.gutterTotalWidth + "px")
+                                    `left: ${cm.options.fixedGutter ? dims.fixedPos : -dims.gutterTotalWidth}px
+                                    width: ${dims.gutterTotalWidth}px`)
     wrap.insertBefore(lineView.gutterBackground, lineView.text)
   }
   let markers = lineView.line.gutterMarkers
   if (cm.options.lineNumbers || markers) {
     let wrap = ensureLineWrapped(lineView)
-    let gutterWrap = lineView.gutter = elt("div", null, "CodeMirror-gutter-wrapper", "left: " +
-                                           (cm.options.fixedGutter ? dims.fixedPos : -dims.gutterTotalWidth) + "px")
+    let gutterWrap = lineView.gutter = elt("div", null, "CodeMirror-gutter-wrapper", `left:
+                                           ${cm.options.fixedGutter ? dims.fixedPos : -dims.gutterTotalWidth}px`)
     cm.display.input.setUneditable(gutterWrap)
     wrap.insertBefore(gutterWrap, lineView.text)
     if (lineView.line.gutterClass)
@@ -112,13 +112,13 @@ function updateLineGutter(cm, lineView, lineN, dims) {
       lineView.lineNumber = gutterWrap.appendChild(
         elt("div", lineNumberFor(cm.options, lineN),
             "CodeMirror-linenumber CodeMirror-gutter-elt",
-            "left: " + dims.gutterLeft["CodeMirror-linenumbers"] + "px; width: "
-            + cm.display.lineNumInnerWidth + "px"))
+            `left: ${dims.gutterLeft["CodeMirror-linenumbers"]}px;
+            width: ${cm.display.lineNumInnerWidth}px`))
     if (markers) for (let k = 0; k < cm.options.gutters.length; ++k) {
       let id = cm.options.gutters[k], found = markers.hasOwnProperty(id) && markers[id]
       if (found)
-        gutterWrap.appendChild(elt("div", [found], "CodeMirror-gutter-elt", "left: " +
-                                   dims.gutterLeft[id] + "px; width: " + dims.gutterWidth[id] + "px"))
+        gutterWrap.appendChild(elt("div", [found], "CodeMirror-gutter-elt",
+                                   `left: ${dims.gutterLeft[id]}px; width: ${dims.gutterWidth[id]}px`))
     }
   }
 }