Editor GPU: Create an inline decoration style cache

[Tyriar]

With #234127 there is a new charMetadata that is passed along to the rasterizer and used as a key for the glyph:

vscode/src/vs/editor/browser/gpu/raster/glyphRasterizer.ts

Lines 120 to 124 in 9088a37

	if (charMetadata) {
	this._ctx.fillStyle = `#${charMetadata.toString(16).padStart(8, '0')}`;
	} else {
	this._ctx.fillStyle = colorMap[TokenMetadata.getForeground(metadata)];
	}

vscode/src/vs/editor/browser/gpu/atlas/textureAtlasPage.ts

Line 92 in 9088a37

this._glyphMap.set(chars, tokenMetadata, charMetadata, rasterizer.cacheKey, glyph);

This isn't scalable to the amount of CSS rules that we want to cover, so I think the solution there is to allow creating a set of styles which would turn into a single number. A kind of similar system is used right now for the rasterizer which creates the unique key cacheKey out of the font size and family:

vscode/src/vs/editor/browser/gpu/atlas/textureAtlasPage.ts

Lines 91 to 92 in 9088a37

	// Save the glyph
	this._glyphMap.set(chars, tokenMetadata, charMetadata, rasterizer.cacheKey, glyph);

So in the end we want to turn it into something like this:

this._glyphMap.set(chars, tokenMetadata, rasterizer.cacheKey, styleId, glyph);

Each styleId would map to a cached object like:

interface IDecorationStyleSet {
  fontSize?: number;
  fontFamily?: string;
  color?: Color;
  colorCss?: string; // avoid converting color whenever we need it for ctx.fillStyle
  textDecorationStyle?: string;
  // etc.
}

We can add as many things to that as we want which will then uniquely identify the set of styles. It's unclear whether we want to roll rasterizer.cacheKey (ie. default editor font family+size) into this. If we do not this could be exclusively for inline decorations which might be easier to understand.