this looks like a very useful tool.

here is an example which uses representations to create and cache shapes – this is recommended for performance.

from vanilla import FloatingWindow, CheckBox
from defconAppKit.windows.baseWindow import BaseWindowController
from mojo.events import addObserver, removeObserver
from mojo.UI import CurrentSpaceCenter
from defcon import Glyph, registerRepresentationFactory, unregisterRepresentationFactory
import mojo.drawingTools as ctx
from fontTools.pens.cocoaPen import CocoaPen
from random import random

def CounterShapeFactory(glyph):
    pen = CocoaPen(glyph.layer)
    # just a rect -- draw your counter shapes here
    pen.moveTo((0, 0))
    pen.lineTo((glyph.width, 0))    
    pen.lineTo((glyph.width, glyph.font.info.xHeight))
    pen.lineTo((0, glyph.font.info.xHeight))
    pen.closePath()
    return pen.path

class CounterShapeViewer(BaseWindowController):

    def __init__(self):
        self.w = FloatingWindow((123, 40))
        self.w.preview = CheckBox((10, 10, -10, 20), 'preview', value=True, callback=self.updatePreviewCallback)
        self.setUpBaseWindowBehavior()
        registerRepresentationFactory(Glyph, "CounterShapePreview", CounterShapeFactory)
        addObserver(self, "drawCounterShape", "spaceCenterDraw")
        self.w.open()

    def windowCloseCallback(self, sender):
        super().windowCloseCallback(sender)
        removeObserver(self, "spaceCenterDraw")
        unregisterRepresentationFactory(Glyph, "CounterShapePreview")

    def updatePreviewCallback(self, sender):
        S = CurrentSpaceCenter()
        if not S:
            return
        S.updateGlyphLineView()

    def drawCounterShape(self, notification):
        S = CurrentSpaceCenter()
        if not S or not self.w.preview.get():
            return
        glyph = notification['glyph']   
        counterShape = glyph.getRepresentation("CounterShapePreview")
        ctx.save()
        ctx.fill(random(), random(), random(), 0.3)
        ctx.drawPath(counterShape)
        ctx.restore()

CounterShapeViewer()

give it a try… cheers!

# draw the background color of the existing glyph

from mojo.UI import getDefault

r, g, b, a = getDefault("spaceCenterBackgroundColor")

bounds = glyph.bound
if bounds:
    x, y, maxx, maxy = bounds
    w = maxx - x
    h = maxy - y
    ctx.fill(r, g, b, a)
    offset = 10
    ctx.rect(x-offset, y-offset, w+offset*2, h+offset*2)

A multiline view has a _fill and _stroke attribute you can temporarily overwrite.

good luck