Move Terminal option updates into owning components

src/browser/Terminal.ts

@@ -275,38 +275,6 @@ export class Terminal extends CoreTerminal implements ITerminal {
     }
   }
 
-  protected _updateOptions(key: string): void {
-    // TODO: These listeners should be owned by individual components
-    switch (key) {
-      case 'fontFamily':
-      case 'fontSize':
-        // When the font changes the size of the cells may change which requires a renderer clear
-        this._renderService?.clear();
-        this._charSizeService?.measure();
-        break;
-      case 'cursorBlink':
-      case 'cursorStyle':
-        // The DOM renderer needs a row refresh to update the cursor styles
-        this.refresh(this.buffer.y, this.buffer.y);
-        break;
-      case 'customGlyphs':
-      case 'drawBoldTextInBrightColors':
-      case 'letterSpacing':
-      case 'lineHeight':
-      case 'fontWeight':
-      case 'fontWeightBold':
-      case 'minimumContrastRatio':
-        // TODO: move to render service
-        // When the font changes the size of the cells may change which requires a renderer clear
-        if (this._renderService) {
-          this._renderService.clear();
-          this._renderService.handleResize(this.cols, this.rows);
-          this.refresh(0, this.rows - 1);
-        }
-        break;
-    }
-  }
-
   /**
    * Binds the desired focus behavior on a given terminal object.
    */

src/browser/services/CharSizeService.ts

@@ -7,6 +7,7 @@ import { IOptionsService } from 'common/services/Services';
 import { EventEmitter } from 'common/EventEmitter';
 import { ICharSizeService } from 'browser/services/Services';
 import { Disposable } from 'common/Lifecycle';
+import { ITerminalOptions } from 'common/Types';
 
 export class CharSizeService extends Disposable implements ICharSizeService {
   public serviceBrand: undefined;
@@ -27,8 +28,7 @@ export class CharSizeService extends Disposable implements ICharSizeService {
   ) {
     super();
     this._measureStrategy = new DomMeasureStrategy(document, parentElement, this._optionsService);
-    // TODO: ...
-    // this.register(this._optionsService.onSpecificOptionChange(
+    this.register(this._optionsService.onMultipleOptionChange(['fontFamily', 'fontSize'], () => this.measure()));
   }
 
   public measure(): void {

src/browser/services/RenderService.ts

@@ -84,8 +84,28 @@ export class RenderService extends Disposable implements IRenderService {
     this.register(decorationService.onDecorationRegistered(() => this._fullRefresh()));
     this.register(decorationService.onDecorationRemoved(() => this._fullRefresh()));
 
-    // No need to register this as renderer is explicitly disposed in RenderService.dispose
-    // this._renderer.onRequestRedraw(e => this.refreshRows(e.start, e.end, true));
+    // Clear the renderer when the a change that could affect glyphs occurs
+    this.register(optionsService.onMultipleOptionChange([
+      'customGlyphs',
+      'drawBoldTextInBrightColors',
+      'letterSpacing',
+      'lineHeight',
+      'fontFamily',
+      'fontSize',
+      'fontWeight',
+      'fontWeightBold',
+      'minimumContrastRatio'
+    ], () => {
+      this.clear();
+      this.handleResize(bufferService.cols, bufferService.rows);
+      this._fullRefresh();
+    }));
+
+    // Refresh the cursor line when the cursor changes
+    this.register(optionsService.onMultipleOptionChange([
+      'cursorBlink',
+      'cursorStyle'
+    ], () => this.refreshRows(bufferService.buffer.y, bufferService.buffer.y, true)));
 
     // dprchange should handle this case, we need this as well for browsers that don't support the
     // matchMedia query.