(CHROME) Added onclick handler to freeze current measurement.

[cferriss]

Added freeze ability so we can compare/screenshot multiple measurements at the same time.

Single click will freeze/lock current lines/tooltip, and allow you continue to other areas with a new set of lines/tooltip.

Chrome only.

[cferriss]

[mrflix]

Now thats a cool idea!

Great code! I think the only thing I would have done differently would be that I'd add a class is-frozen instead of switching the classes. That wouldn't require touching the CSS. forEach on nodes - nice! Didn't know about it yet! Though its Firefox 50 only so maybe it makes still sense to replace it with for()? (the current version is 51 and the extension as it is right now works with Firefox too). Question: I've never used removeChild. I usually remove the elements itself by using .remove(). Is there an advantage?

How do you remove all frozen dimensions? Alt+D twice?

[cferriss]

Thanks!

is-frozen CSS: I was trying to avoid multiple class lookups on each mouse move event, but I think the following lookups wouldn't be too expensive: body.querySelector('.fn-dimensions:not(.is-frozen)') and body.querySelector('.fn-dimensions.is-frozen'). I agree with your thoughts, i'll change it.

forEach: This works because we are iterating over an array of nodes, so it behaves like any typical JS array. The native forEach extension has been available for awhile: Array.forEach definition. Unless i misunderstood your comment, i think we are OK to use it.

removeChild: I used this over .remove() to stay consistent with the default element removal in the same method, Ln 118. I don't see an advantage one way or the other here.

Removing frozen dimensions: The only removal logic i put in place is when you toggle the extension off. Any specific key combo you would prefer if I add additional listeners in place?