Chrome / Webkit removing event.layerX and event.layerY

[darth]

Chrome shows the following warning when using Dojo

"event.layerX and event.layerY are broken and deprecated in WebKit. They will be removed from the engine in the near future."

Dojo should not rely on them anymore for webkit.

[dougtmayer]

This is now in Chrome stable:

​https://bugs.webkit.org/show_bug.cgi?id=69951 (deprecation warning) ​https://bugs.webkit.org/show_bug.cgi?id=21868 (outright removal)

It will also be in Mozilla: ​https://bugzilla.mozilla.org/show_bug.cgi?id=674292

[Karl Tiedt]

Just for visibility sake: (from latest git pull as of 2 minutes ago)

proton:dojotoolkit ktiedt$ grep -R layer[XY] *
dijit/layout/SplitContainer.js:			client = e.layerX || e.offsetX || 0;
dijit/layout/SplitContainer.js:			client = e.layerY || e.offsetY || 0;
dojo/dom-geometry.js:		// 		offsetX, offsetY, layerX, and layerX properties
dojo/dom-geometry.js:		if(!("layerX" in event)){
dojo/dom-geometry.js:			event.layerX = event.offsetX;
dojo/dom-geometry.js:			event.layerY = event.offsetY;
dojox/gantt/GanttChart.js:						var hlTop = parseInt(event.layerY / rowHeight) * rowHeight + this.panelTimeHeight - this.contentData.scrollTop;
dojox/gfx/silverlight.js:				ev.x = ev.offsetX = ev.layerX = p.x;
dojox/gfx/silverlight.js:				ev.y = ev.offsetY = ev.layerY = p.y;
dojox/grid/_Builder.js:			var n, x = e.layerX;
dojox/mobile/PageIndicator.js:			if(e.layerX < this._tblNode.offsetLeft){
dojox/mobile/PageIndicator.js:			}else if(e.layerX > this._tblNode.offsetLeft + this._tblNode.offsetWidth){
dojox/widget/ColorPicker.js:			var ypos = evt.layerY - selCenter;
dojox/widget/ColorPicker.js:			var newTop = evt.layerY - satSelCenterH;
dojox/widget/ColorPicker.js:			var newLeft = evt.layerX - satSelCenterW;

[bill]

See also ​http://www.quirksmode.org/dom/w3c_cssom.html#mousepos.

When does dojo show these warnings, exactly? Just for the few widgets mentioned above, or more pervasively?

[Karl Tiedt]

The warnings are fired by the browser anytime .layerX/Y are accessed via JS wether it be reading or setting it seems

[bill]

Hmm, I downloaded Chrome Canary and I don't see any warnings in the console (the javascript console). This is from testing dijit/tests/test_Dialog.html, dijit/tests/layout/test_SplitContainer.html, and dojox/widget/tests/test_ColorPicker.html. Is there something I'm doing wrong?

[dvasquez]

I'm getting this after a Chrome/MacBook? Pro restart. I'm running Chrome 16.0.912.63.

These are the relevant tests I could quickly find:
dijit.tests.layout.robot.AccordionContainer_a11y
dijit.tests.layout.robot.BorderContainer?
dijit.tests.layout.robot.BorderContainer_complex
dijit.tests.layout.robot.BorderContainer_nested

[lmds]

I'm seeing the warnings on Chrome (16.0.912.63/Ubuntu and 10.0.912.75m/Windows) when hovering over the headers in an EnhancedGrid?, e.g. ​http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/grid/tests/enhanced/test_enhanced_grid_pagination.html

[kbenjamin]

Look into dijit.layout.TabContainer and dijit.form.Textarea.

I'm seeing these warnings on both a dijit.form.Textarea and dijit.layout.ContentPane with contenteditable set when it is within a TabContainer.

The ContentPane alone (not wrapped in a TabContainer) does not fire the warning. I also tested the ContentPane inside a BorderContainer and it's fine there, too.

Reading the discussion on the Chrome bug reports it's clear that they don't know that a potentially large number of users are using layerx and layery. Maybe they should be told by someone on the Dojo dev team.

[bill]

This happens when typing into a simple dijit.form.TextBox, and I traced at least part of it to the back-compat code dojo/_base/connect.js for "keypress" and "keydown":

var _synthesizeEvent = function(evt, props){
        var faux = lang.mixin({}, evt, props);

mixin() is referencing layerX and layerY from the event object, along with all the other properties... so the warning message will go away whenever layerX and layerY disappear from the evt object. But the annoying thing is that all these spurious warning messages are alarming, and hide the real places where the error occurs.

I tried switching the lang.mixin() to lang.delegate(evt, props) but that doesn't work so well on IE; the event object disappears before it's referenced and (for example) evt.type is undefined.

I'll attach a test case.

[bill]

test case for problem in dojo/_base/connect.js

[bill]

It also happens due to code in _TextBoxMixin.js, which also generates a faux event:

var faux = lang.mixin({}, e, {
        charOrCode: charCode,
        wasConsumed: false,
        preventDefault: function(){
                faux.wasConsumed = true;
                e.preventDefault();
        },
        stopPropagation: function(){ e.stopPropagation(); }
});

thus again copying layerX and layerY from the evt object, and generating more warnings.

I filed #14754 and #14755 to try to address those two issues.

[bill]

In [27949]:

Remove layerX/layerY references from SplitContainer. AFAICT pageX/pageY is enough to handle slider drags, so there's no reason to access layerX/layerY/offsetX/offsetY too. Fixes #14840, refs #14114 !strict.

[janefung]

There is also another one

I added a text box as follow:

<input id="id1" data-dojo-type="dojox.mobile.TextBox?" placeHolder="Airport code, city or country" class="searchbox"></input>

As soon as i typed anything in the check box, I get the error

event.layerX and event.layerY are broken and deprecated in WebKit?. They will be removed from the engine in the nea

My chrome is 18.0.1025.142 m Dojo = 1.7

Thanks

[bill]

That happens in 1.7 but it's already been fixed in trunk.

[kbenjamin]

Webkit is having a change of heart on this matter:

​https://bugs.webkit.org/show_bug.cgi?id=21868#c21 states:

For the record, we have decided to remove the warning for several reasons:

• we need to assess the web-compatibility issues.
• we need to engage the standard bodies to get a replacement.

[bill]

OK, guess we should close this ticket.