Rendering should be virtual wrt viewport

[joaomoreno]

Testing microsoft/vscode#98980

You should be able to use our list widget for this. It seems we're rendering wayyy more than necessary and I get a lot of blank frames when scrolling around.

[lramos15]

This was discussed briefly and I think it was just stated that it was too intertwined with the core of VS to easily utilize in the hex editor. I would be happy to discuss it more with you if you have any further knowledge about how that could easily be done, I would be happy to discuss it as my implementation does do some basic chunk rendering which does have a decent buffer outside the viewport.

[joaomoreno]

We'd have to weed it out but it is feasible! We even have paging capabilities which simply calls for pages to load, as the list scrolls up and down.

[rebornix]

I'm seeing a lot of blank frames when scrolling even though the file is relatively small (2k loc), which makes navigating in the document really hard.

If adopting list view is hard, I think we should at least add some gpu optimization to the rendering.

[rebornix]

I think we should at least add some gpu optimization to the rendering.

I took it back, the root cause is forced reflow -->

private populateHexAdresses(rowData: VirtualizedPacket[]): void {
        const hex_addr = document.getElementById("hexaddr");
        const offset = rowData[0].offset;
        const addr = document.createElement("div");
        addr.className = "row";
        addr.setAttribute("data-offset", offset.toString());
        addr.innerText = pad(offset.toString(16), 8).toUpperCase();
        hex_addr!.appendChild(addr);
        this.rows[0].set(offset.toString(), addr);
        // We add a left px offset to effectively right align the column
        addr.style.left = `${addr.parentElement!.clientWidth - addr.clientWidth}px`;
        this.translateRow(addr, offset);
    }

Suggestions:

• hold a reference to hexaddr DOM node
• cache its width
• listen to window size change and then update the cache (and also rerender the viewport if necessary)

I think this will remove most force reflow and reduce this issue by a ton.

[connor4312]

We're now virtual