respect dpr/charWidth changes, more accurate base measuring

src/browser/renderer/dom/DomRenderer.ts

@@ -233,6 +233,7 @@ export class DomRenderer extends Disposable implements IRenderer {
 
   public handleDevicePixelRatioChange(): void {
     this._updateDimensions();
+    this._widthCache.clear();
   }
 
   private _refreshRowElements(cols: number, rows: number): void {
@@ -255,6 +256,7 @@ export class DomRenderer extends Disposable implements IRenderer {
 
   public handleCharSizeChanged(): void {
     this._updateDimensions();
+    this._widthCache.clear();
   }
 
   public handleBlur(): void {

src/browser/renderer/dom/DomRendererRowFactory.ts

@@ -391,6 +391,11 @@ export class DomRendererRowFactory {
       }
       // apply letter-spacing rule
       if (spacing) {
+        /**
+         * TODO:
+         * - check if we can ignore tiny spacings here (saves ~400ms)
+         * - check if we can apply a global spacing to rows element
+         */
         charElement.style.letterSpacing = `${spacing}px`;
       }
 

src/browser/services/CharSizeService.ts

@@ -7,7 +7,10 @@ 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';
+
+
+const CHAR_REPEAT = 32;
+
 
 export class CharSizeService extends Disposable implements ICharSizeService {
   public serviceBrand: undefined;
@@ -67,9 +70,10 @@ class DomMeasureStrategy implements IMeasureStrategy {
   ) {
     this._measureElement = this._document.createElement('span');
     this._measureElement.classList.add('xterm-char-measure-element');
-    this._measureElement.textContent = 'W';
+    this._measureElement.textContent = 'W'.repeat(CHAR_REPEAT);
     this._measureElement.setAttribute('aria-hidden', 'true');
     this._measureElement.style.whiteSpace = 'pre';
+    this._measureElement.style.fontKerning = 'none';
     this._parentElement.appendChild(this._measureElement);
   }
 
@@ -83,7 +87,7 @@ class DomMeasureStrategy implements IMeasureStrategy {
     // If values are 0 then the element is likely currently display:none, in which case we should
     // retain the previous value.
     if (geometry.width !== 0 && geometry.height !== 0) {
-      this._result.width = geometry.width;
+      this._result.width = geometry.width / CHAR_REPEAT;
       this._result.height = Math.ceil(geometry.height);
     }