1449729 - Highlighters cut off on big screens

Status: NEW

(DevTools :: Inspector, defect, P3)

Description

[Martin Balfanz [:mbalfanz]]

Attachment: Screen Shot 2018-03-28 at 22.31.36.png

Using the highlighters (e.g. for CSS grid) on a big screen causes them to be cut off on the left side.

In the attached screenshot you can see the results on my Dell 2718q at an innerWidth of 2547px.


Setting https://searchfox.org/mozilla-central/source/devtools/server/actors/highlighters/utils/canvas.js#38 to a larger number (e.g. 8192) seems to fix the problem.



STR:
1. Open the browser on a big monitor
2. Visit a page where the grid highlighter works, for example https://gridbyexample.com/examples/code/example2.html
3. Open the devtools and enable the grid highlighter.

Expected results:
- see the full highlighter

Actual results:
- Highlighter is cut off on the left side

Comment 1

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

We create a <canvas> element that has always 4096x4096 physical pixels, to displays our grid's overlay. Then, we move the element around when needed, to give the perception that it always covers the screen (See bug 1345434).

This canvas size value is the safest we can use because most GPUs can handle it. It's also far from the maximum canvas memory allocation limit (4096x4096x4 is 67.108.864 bytes, where the limit is 500.000.000 bytes, see:
http://searchfox.org/mozilla-central/source/gfx/thebes/gfxPrefs.h#401).

I'm sure I have a fix but it is quite a lot of work... just adding this comment to prevent us from upping the canvas size, which could cause problems.