Refactor workspace grid to use single pattern definition

[Steve-Mcl]

Types of changes

• Bugfix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)

closes #5728

Proposed changes

Replace the individual dom line elements with a single rect that uses a pattern def

Before and after

Stats:

(index)	before	after	ratio
elements (DOM nodes under gridLayer)	800	4	'200.0x'
markup size (bytes)	70219	402	'174.7x'
updateGrid avg (ms, x1000 calls)	'1.632 (rebuild)'	'0.003'	'652.8x'

Comparison

• Original lines on the left
• Pattern def grid on the right

nr--orig-grid-left--new-grid-right.mp4

DOM

Checklist

• I have read the contribution guidelines
• For non-bugfix PRs, I have discussed this change on the forum/slack team.
• I have run npm run test to verify the unit tests pass
• I have added suitable unit tests to cover the new/changed functionality

[Steve-Mcl]

This was developed on Chrome (Blink) but before merge, we should test on Safari (Webkit) & Firefox (Gecko)

[knolleary]

Chrome looks okay. Seeing some inconsistencies in Firefox/Safari.

The grid lines appear slightly thicker:

• Before
  
• After
  

When zoomed out, it is more apparent (and distracting):

• Before
  

• After
  

[Steve-Mcl]

@knolleary 2nd last idea applied in 0edd9560edd956 (I have one more after this)

[knolleary]

@Steve-Mcl much better across the 3 browsers.