1348256 - Grid outline mouseover is slow

Status: VERIFIED FIXED

(DevTools :: Inspector, defect, P3)

Description

[Patrick Brosset <:pbro>]

While reviewing bug 1343447 I was testing the new grid outline widget. The widget supports mouse events so that, as you move, cells will get highlighted in the page.

STR:
- open this URL:
data:text/html,<div style="display:grid;grid-template-rows:repeat(50, 100px);grid-template-columns:repeat(20, 100px);">
- open the layout panel
- select the grid
- move your mouse very quickly over the outline, for a while

You will see that at some point, the cells don't get highlighted in the page in real time. The cell highlighter in the page either lags behind, or stays blocked at some previous cell, and finally highlights the right cell after a few seconds.

We should throttle this, otherwise it's pretty useless.

Comment 1

[Gabriel Luong [:gl] (ΦωΦ)]

Attachment: Bug 1348256 - Throttle the grid outline mouseover.

Review commit: https://reviewboard.mozilla.org/r/122062/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/122062/

Comment 2

[Patrick Brosset <:pbro>]

Comment on attachment 8849246 [details]
Bug 1348256 - Throttle the grid outline mouseover.

https://reviewboard.mozilla.org/r/122062/#review125404

::: devtools/client/inspector/grids/components/GridOutline.js:13
(Diff revision 1)
>    require("devtools/client/shared/vendor/react");
> +const { throttle } = require("devtools/client/inspector/shared/utils");
>  
>  const Types = require("../types");
>  
> +const GRID_CELL_MOUSEOVER_TIMEOUT = 150;

Please add a comment before this const explaining what it is and that it's important for perf reasons, etc...

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/mozilla-inbound/rev/0c88e3aa3e3a
Throttle the grid outline mouseover. r=pbro

Comment 4

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/mozilla-central/rev/0c88e3aa3e3a

Comment 5

[Saheda Reza [:Antora]]

I have reproduced this issue on Firefox nightly according to (2017-03-17)

Fixing bug is verified on Latest Firefox Nightly--- Build ID:(20170429030208),User Agent:Mozilla/5.0 (Windows NT 6.1; rv:55.0) Gecko/20100101 Firefox/55.0

Tested OS-- Windows7 32bit
[testday-20170428]

Comment 6

[Cristian Comorasu, QA [:ccomorasu], Releae Desktop QA - Please contact [e-mail]]

I reproduced this issue using Fx55.0a1, build ID: 20170317111607, on Windows 10 x64.
I can confirm this issue is fixed, I verified using Fx55.0b3, on Windows 10 x64, macOS X 10.12.5 and Ubuntu 14.04 LTS.

Cheers!