Allow CSS styles to be passed for gutter backgrounds

Issue #5834

Author: marijnh

doc/manual.html

@@ -371,16 +371,16 @@ <h2>Configuration</h2>
       passed the line number, and should return a string that will be
       shown in the gutter.</dd>
 
-      <dt id="option_gutters"><code><strong>gutters</strong>: array&lt;string&gt;</code></dt>
+      <dt id="option_gutters"><code><strong>gutters</strong>: array&lt;string | {className: string, style: ?string}&gt;</code></dt>
       <dd>Can be used to add extra gutters (beyond or instead of the
-      line number gutter). Should be an array of CSS class names, each
-      of which defines a <code>width</code> (and optionally a
-      background), and which will be used to draw the background of
-      the gutters. <em>May</em> include
-      the <code>CodeMirror-linenumbers</code> class, in order to
-      explicitly set the position of the line number gutter (it will
-      default to be to the right of all other gutters). These class
-      names are the keys passed
+      line number gutter). Should be an array of CSS class names or
+      class name / CSS string pairs, each of which defines
+      a <code>width</code> (and optionally a background), and which
+      will be used to draw the background of the gutters. <em>May</em>
+      include the <code>CodeMirror-linenumbers</code> class, in order
+      to explicitly set the position of the line number gutter (it
+      will default to be to the right of all other gutters). These
+      class names are the keys passed
       to <a href="#setGutterMarker"><code>setGutterMarker</code></a>.</dd>
 
       <dt id="option_fixedGutter"><code><strong>fixedGutter</strong>: boolean</code></dt>

src/display/Display.js

@@ -1,12 +1,13 @@
 import { gecko, ie, ie_version, mobile, webkit } from "../util/browser.js"
 import { elt, eltP } from "../util/dom.js"
 import { scrollerGap } from "../util/misc.js"
+import { getGutters, renderGutters } from "./gutters.js"
 
 // The display handles the DOM integration, both for input reading
 // and content drawing. It holds references to DOM nodes and
 // display-related state.
 
-export function Display(place, doc, input) {
+export function Display(place, doc, input, options) {
   let d = this
   this.input = input
 
@@ -102,5 +103,8 @@ export function Display(place, doc, input) {
 
   d.activeTouch = null
 
+  d.gutterSpecs = getGutters(options.gutters, options.lineNumbers)
+  renderGutters(d)
+
   input.init(d)
 }

src/display/gutters.js

@@ -1,34 +1,44 @@
 import { elt, removeChildren } from "../util/dom.js"
-import { indexOf } from "../util/misc.js"
-
+import { regChange } from "./view_tracking.js"
+import { alignHorizontally } from "./line_numbers.js"
 import { updateGutterSpace } from "./update_display.js"
 
+export function getGutters(gutters, lineNumbers) {
+  let result = [], sawLineNumbers = false
+  for (let i = 0; i < gutters.length; i++) {
+    let name = gutters[i], style = null
+    if (typeof name != "string") { style = name.style; name = name.className }
+    if (name == "CodeMirror-linenumbers") {
+      if (!lineNumbers) continue
+      else sawLineNumbers = true
+    }
+    result.push({className: name, style})
+  }
+  if (lineNumbers && !sawLineNumbers) result.push({className: "CodeMirror-linenumbers", style: null})
+  return result
+}
+
 // Rebuild the gutter elements, ensure the margin to the left of the
 // code matches their width.
-export function updateGutters(cm) {
-  let gutters = cm.display.gutters, specs = cm.options.gutters
+export function renderGutters(display) {
+  let gutters = display.gutters, specs = display.gutterSpecs
   removeChildren(gutters)
-  let i = 0
-  for (; i < specs.length; ++i) {
-    let gutterClass = specs[i]
-    let gElt = gutters.appendChild(elt("div", null, "CodeMirror-gutter " + gutterClass))
-    if (gutterClass == "CodeMirror-linenumbers") {
-      cm.display.lineGutter = gElt
-      gElt.style.width = (cm.display.lineNumWidth || 1) + "px"
+  display.lineGutter = null
+  for (let i = 0; i < specs.length; ++i) {
+    let {className, style} = specs[i]
+    let gElt = gutters.appendChild(elt("div", null, "CodeMirror-gutter " + className))
+    if (style) gElt.style.cssText = style
+    if (className == "CodeMirror-linenumbers") {
+      display.lineGutter = gElt
+      gElt.style.width = (display.lineNumWidth || 1) + "px"
     }
   }
-  gutters.style.display = i ? "" : "none"
-  updateGutterSpace(cm)
+  gutters.style.display = specs.length ? "" : "none"
+  updateGutterSpace(display)
 }
 
-// Make sure the gutters options contains the element
-// "CodeMirror-linenumbers" when the lineNumbers option is true.
-export function setGuttersForLineNumbers(options) {
-  let found = indexOf(options.gutters, "CodeMirror-linenumbers")
-  if (found == -1 && options.lineNumbers) {
-    options.gutters = options.gutters.concat(["CodeMirror-linenumbers"])
-  } else if (found > -1 && !options.lineNumbers) {
-    options.gutters = options.gutters.slice(0)
-    options.gutters.splice(found, 1)
-  }
+export function updateGutters(cm) {
+  renderGutters(cm.display)
+  regChange(cm)
+  alignHorizontally(cm)
 }

src/display/line_numbers.js

@@ -41,7 +41,7 @@ export function maybeUpdateLineNumberWidth(cm) {
     display.lineNumWidth = display.lineNumInnerWidth + padding
     display.lineNumChars = display.lineNumInnerWidth ? last.length : -1
     display.lineGutter.style.width = display.lineNumWidth + "px"
-    updateGutterSpace(cm)
+    updateGutterSpace(cm.display)
     return true
   }
   return false

src/display/update_display.js

@@ -248,9 +248,9 @@ function patchDisplay(cm, updateNumbersFrom, dims) {
   while (cur) cur = rm(cur)
 }
 
-export function updateGutterSpace(cm) {
-  let width = cm.display.gutters.offsetWidth
-  cm.display.sizer.style.marginLeft = width + "px"
+export function updateGutterSpace(display) {
+  let width = display.gutters.offsetWidth
+  display.sizer.style.marginLeft = width + "px"
 }
 
 export function setDocumentHeight(cm, measure) {

src/display/update_line.js

@@ -113,8 +113,8 @@ function updateLineGutter(cm, lineView, lineN, dims) {
         elt("div", lineNumberFor(cm.options, lineN),
             "CodeMirror-linenumber CodeMirror-gutter-elt",
             `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 (markers) for (let k = 0; k < cm.display.gutterSpecs.length; ++k) {
+      let id = cm.display.gutterSpecs[k].className, 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`))

src/edit/CodeMirror.js

@@ -1,6 +1,5 @@
 import { Display } from "../display/Display.js"
 import { onFocus, onBlur } from "../display/focus.js"
-import { setGuttersForLineNumbers, updateGutters } from "../display/gutters.js"
 import { maybeUpdateLineNumberWidth } from "../display/line_numbers.js"
 import { endOperation, operation, startOperation } from "../display/operations.js"
 import { initScrollbars } from "../display/scrollbars.js"
@@ -33,17 +32,15 @@ export function CodeMirror(place, options) {
   this.options = options = options ? copyObj(options) : {}
   // Determine effective options based on given values and defaults.
   copyObj(defaults, options, false)
-  setGuttersForLineNumbers(options)
 
   let doc = options.value
   if (typeof doc == "string") doc = new Doc(doc, options.mode, null, options.lineSeparator, options.direction)
   else if (options.mode) doc.modeOption = options.mode
   this.doc = doc
 
   let input = new CodeMirror.inputStyles[options.inputStyle](this)
-  let display = this.display = new Display(place, doc, input)
+  let display = this.display = new Display(place, doc, input, options)
   display.wrapper.CodeMirror = this
-  updateGutters(this)
   themeChanged(this)
   if (options.lineWrapping)
     this.display.wrapper.className += " CodeMirror-wrap"

src/edit/methods.js

@@ -414,7 +414,7 @@ export default function(CodeMirror) {
       this.curOp.forceUpdate = true
       clearCaches(this)
       scrollToCoords(this, this.doc.scrollLeft, this.doc.scrollTop)
-      updateGutterSpace(this)
+      updateGutterSpace(this.display)
       if (oldHeight == null || Math.abs(oldHeight - textHeight(this.display)) > .5)
         estimateLineHeights(this)
       signal(this, "refresh", this)

src/edit/mouse_events.js

@@ -380,12 +380,12 @@ function gutterEvent(cm, e, type, prevent) {
   if (mY > lineBox.bottom || !hasHandler(cm, type)) return e_defaultPrevented(e)
   mY -= lineBox.top - display.viewOffset
 
-  for (let i = 0; i < cm.options.gutters.length; ++i) {
+  for (let i = 0; i < cm.display.gutterSpecs.length; ++i) {
     let g = display.gutters.childNodes[i]
     if (g && g.getBoundingClientRect().right >= mX) {
       let line = lineAtHeight(cm.doc, mY)
-      let gutter = cm.options.gutters[i]
-      signal(cm, type, cm, line, gutter, e)
+      let gutter = cm.display.gutterSpecs[i]
+      signal(cm, type, cm, line, gutter.className, e)
       return e_defaultPrevented(e)
     }
   }

src/edit/options.js

@@ -1,6 +1,5 @@
 import { onBlur } from "../display/focus.js"
-import { setGuttersForLineNumbers, updateGutters } from "../display/gutters.js"
-import { alignHorizontally } from "../display/line_numbers.js"
+import { getGutters, updateGutters } from "../display/gutters.js"
 import { loadMode, resetModeState } from "../display/mode_state.js"
 import { initScrollbars, updateScrollbars } from "../display/scrollbars.js"
 import { updateSelection } from "../display/selection.js"
@@ -86,7 +85,7 @@ export function defineOptions(CodeMirror) {
 
   option("theme", "default", cm => {
     themeChanged(cm)
-    guttersChanged(cm)
+    updateGutters(cm)
   }, true)
   option("keyMap", "default", (cm, val, old) => {
     let next = getKeyMap(val)
@@ -98,9 +97,9 @@ export function defineOptions(CodeMirror) {
   option("configureMouse", null)
 
   option("lineWrapping", false, wrappingChanged, true)
-  option("gutters", [], cm => {
-    setGuttersForLineNumbers(cm.options)
-    guttersChanged(cm)
+  option("gutters", [], (cm, val) => {
+    cm.display.gutterSpecs = getGutters(val, cm.options.lineNumbers)
+    updateGutters(cm)
   }, true)
   option("fixedGutter", true, (cm, val) => {
     cm.display.gutters.style.left = val ? compensateForHScroll(cm.display) + "px" : "0"
@@ -113,12 +112,12 @@ export function defineOptions(CodeMirror) {
     cm.display.scrollbars.setScrollTop(cm.doc.scrollTop)
     cm.display.scrollbars.setScrollLeft(cm.doc.scrollLeft)
   }, true)
-  option("lineNumbers", false, cm => {
-    setGuttersForLineNumbers(cm.options)
-    guttersChanged(cm)
+  option("lineNumbers", false, (cm, val) => {
+    cm.display.gutterSpecs = getGutters(cm.options.gutters, val)
+    updateGutters(cm)
   }, true)
-  option("firstLineNumber", 1, guttersChanged, true)
-  option("lineNumberFormatter", integer => integer, guttersChanged, true)
+  option("firstLineNumber", 1, updateGutters, true)
+  option("lineNumberFormatter", integer => integer, updateGutters, true)
   option("showCursorWhenSelecting", false, updateSelection, true)
 
   option("resetSelectionOnContextMenu", true)
@@ -160,12 +159,6 @@ export function defineOptions(CodeMirror) {
   option("phrases", null)
 }
 
-function guttersChanged(cm) {
-  updateGutters(cm)
-  regChange(cm)
-  alignHorizontally(cm)
-}
-
 function dragDropChanged(cm, value, old) {
   let wasOn = old && old != Init
   if (!value != !wasOn) {