Repository: atom/atom
File: src/workspace-element.js (JavaScript)

Code before:
          this.classList.add('scrollbars-visible-always')
          break
        case 'overlay':
          this.classList.remove('scrollbars-visible-always')
          this.classList.add('scrollbars-visible-when-scrolling')
          break
      }
    }))
  }

  observeTextEditorFontConfig () {
    this.updateGlobalTextEditorStyleSheet()
    this.subscriptions.add(this.config.onDidChange('editor.fontSize', this.updateGlobalTextEditorStyleSheet.bind(this)))
    this.subscriptions.add(this.config.onDidChange('editor.fontFamily', this.updateGlobalTextEditorStyleSheet.bind(this)))
    this.subscriptions.add(this.config.onDidChange('editor.lineHeight', this.updateGlobalTextEditorStyleSheet.bind(this)))
  }

  updateGlobalTextEditorStyleSheet () {
    const styleSheetSource = `atom-workspace {
  --editor-font-size: ${this.config.get('editor.fontSize')}px;
  --editor-font-family: ${this.config.get('editor.fontFamily')};
  --editor-line-height: ${this.config.get('editor.lineHeight')};
}

atom-text-editor {
  font-family: var(--editor-font-family);
  font-size: var(--editor-font-size);
  line-height: var(--editor-line-height);
}`
    this.styleManager.addStyleSheet(styleSheetSource, {sourcePath: 'global-text-editor-styles', priority: -1})
  }

  initialize (model, {config, project, styleManager, viewRegistry}) {
    this.handleCenterEnter = this.handleCenterEnter.bind(this)
    this.handleCenterLeave = this.handleCenterLeave.bind(this)
    this.handleEdgesMouseMove = _.throttle(this.handleEdgesMouseMove.bind(this), 100)
    this.handleDockDragEnd = this.handleDockDragEnd.bind(this)
    this.handleDragStart = this.handleDragStart.bind(this)
    this.handleDragEnd = this.handleDragEnd.bind(this)
    this.handleDrop = this.handleDrop.bind(this)

    this.model = model
    this.viewRegistry = viewRegistry
    this.project = project
    this.config = config
    this.styleManager = styleManager
    if (this.viewRegistry == null) { throw new Error('Must pass a viewRegistry parameter when initializing WorkspaceElements') }
    if (this.project == null) { throw new Error('Must pass a project parameter when initializing WorkspaceElements') }
    if (this.config == null) { throw new Error('Must pass a config parameter when initializing WorkspaceElements') }
    if (this.styleManager == null) { throw new Error('Must pass a styleManager parameter when initializing WorkspaceElements') }


Review comment (suggestion):
We could add a fallback, so that while you type in the settings or misspell, it doesn't show `Times New Roman` and make the cursor jump. 

![font](https://user-images.githubusercontent.com/378023/36297541-a1095554-1336-11e8-968e-291a5f15c51d.gif)

Maybe just `font-family: var(--editor-font-family), monospace;`

![font2](https://user-images.githubusercontent.com/378023/36297593-f18edee0-1336-11e8-8bfc-b838afc84e1b.gif)


Code after:
          this.classList.add('scrollbars-visible-always')
          break
        case 'overlay':
          this.classList.remove('scrollbars-visible-always')
          this.classList.add('scrollbars-visible-when-scrolling')
          break
      }
    }))
  }

  observeTextEditorFontConfig () {
    this.updateGlobalTextEditorStyleSheet()
    this.subscriptions.add(this.config.onDidChange('editor.fontSize', this.updateGlobalTextEditorStyleSheet.bind(this)))
    this.subscriptions.add(this.config.onDidChange('editor.fontFamily', this.updateGlobalTextEditorStyleSheet.bind(this)))
    this.subscriptions.add(this.config.onDidChange('editor.lineHeight', this.updateGlobalTextEditorStyleSheet.bind(this)))
  }

  updateGlobalTextEditorStyleSheet () {
    const styleSheetSource = `atom-workspace {
  --editor-font-size: ${this.config.get('editor.fontSize')}px;
  --editor-font-family: ${this.config.get('editor.fontFamily')};
  --editor-line-height: ${this.config.get('editor.lineHeight')};
}`
    this.styleManager.addStyleSheet(styleSheetSource, {sourcePath: 'global-text-editor-styles', priority: -1})
  }

  initialize (model, {config, project, styleManager, viewRegistry}) {
    this.handleCenterEnter = this.handleCenterEnter.bind(this)
    this.handleCenterLeave = this.handleCenterLeave.bind(this)
    this.handleEdgesMouseMove = _.throttle(this.handleEdgesMouseMove.bind(this), 100)
    this.handleDockDragEnd = this.handleDockDragEnd.bind(this)
    this.handleDragStart = this.handleDragStart.bind(this)
    this.handleDragEnd = this.handleDragEnd.bind(this)
    this.handleDrop = this.handleDrop.bind(this)

    this.model = model
    this.viewRegistry = viewRegistry
    this.project = project
    this.config = config
    this.styleManager = styleManager
    if (this.viewRegistry == null) { throw new Error('Must pass a viewRegistry parameter when initializing WorkspaceElements') }
    if (this.project == null) { throw new Error('Must pass a project parameter when initializing WorkspaceElements') }
    if (this.config == null) { throw new Error('Must pass a config parameter when initializing WorkspaceElements') }
    if (this.styleManager == null) { throw new Error('Must pass a styleManager parameter when initializing WorkspaceElements') }

    this.subscriptions = new CompositeDisposable(
      new Disposable(() => {
        this.paneContainer.removeEventListener('mouseenter', this.handleCenterEnter)
        this.paneContainer.removeEventListener('mouseleave', this.handleCenterLeave)
        window.removeEventListener('mousemove', this.handleEdgesMouseMove)
        window.removeEventListener('dragend', this.handleDockDragEnd)