Refactor mouse events #955

Elchi3 · 2019-02-06T13:38:12Z

irenesmith · 2019-02-07T13:16:15Z

Estimate is based on 5 or 6 pages a day

irenesmith · 2019-02-07T13:19:43Z

Reviewer Sheppy

irenesmith · 2019-03-19T13:09:48Z

https://developer.mozilla.org/en-US/docs/Web/Events/DOMMouseScroll - this event is a MouseScrollEvent and that has been deprecated.

https://developer.mozilla.org/en-US/docs/Web/Events/mousewheel - this is a MouseWheelEvent and that has been deprecated

https://developer.mozilla.org/en-US/docs/Web/Events/MozMousePixelScroll is a MouseScrollEvent and that has been deprecated

wbamberg · 2019-04-02T17:54:47Z

@irenesmith , can you comment on the status of this story? Is it waiting for review, or finished?

irenesmith · 2019-04-03T14:40:47Z

@wbamburg Sheppy suggested some updates. I have to go through and make sure that implemented the suggested changes on all pages. I will update after the mid-sprint meeting today.

Elchi3 · 2019-04-24T16:13:08Z

There is still an open PR that relates to this issue:
mdn/browser-compat-data#3947

irenesmith · 2019-04-29T02:54:01Z

irenesmith · 2019-04-29T05:16:19Z

All events have been checked and the following PR has been created for BCD: PR #4019

@a2sheppy Ready for second review

a2sheppy · 2019-04-29T21:00:30Z

Ignore my briefly-present comment about the locations. I see there are apparently redirects in place

a2sheppy · 2019-04-29T22:25:25Z

https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseenter_event -- The example does not work, at least in Firefox. I added code to make it use the prefixed version if available, but it still doesn't work. Claims the object being passed into the matches() method isn't an element. Weird. This needs to be fixed so the example works. Also, it should be revised to split the JavaScript, HTML, etc into separate sections like other examples do, instead of using <script>

https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseleave_event -- The example needs to be made "live" and the code split up into separate JavaScript, HTML, etc.

chrisdavidmills · 2019-04-30T07:38:58Z

https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseenter_event -- The example does not work, at least in Firefox. I added code to make it use the prefixed version if available, but it still doesn't work. Claims the object being passed into the matches() method isn't an element. Weird. This needs to be fixed so the example works. Also, it should be revised to split the JavaScript, HTML, etc into separate sections like other examples do, instead of using <script>

You could always just copy the example from https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseover_event, since it includes both. I don't think the current mouseenter example is very useful anyway.

a2sheppy · 2019-04-30T11:47:55Z

Yeah, I’ve actually fixed one or two of these, but then decided I would leave them for Irene to fix from here out. I’m just commenting on them as I go from now on, unless the problems are really minor. On April 30, 2019 at 3:38:59 AM, Chris Mills (notifications@github.com) wrote: You could always just copy the example from https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseover_event, since it includes both. I don't think the current mouseenter example is very useful anyway. Eric Shepherd Senior Technical Writer MDN Web Docs <https://developer.mozilla.org/> Blog: https://www.bitstampede.com/

irenesmith · 2019-04-30T12:16:11Z

I don't mind having to fix them. Once you are done @a2sheppy, let me know and I'll go back and work through it.

a2sheppy · 2019-04-30T21:35:49Z

@irenesmith -

https://developer.mozilla.org/en-US/docs/Web/API/Element/Activate_event -- There is no activate event in HTML, the DOM, or any other related spec that I could find. The only one I can find is in the SVG spec, but if that's the one this is documenting, it doesn't belong under Element but under SVGElement, probably. Then the content needs to be straightened up to cover that better.

In addition, the example should be straightened up; the syntax is somewhat out of date judging from what I see in the SVG spec.

a2sheppy · 2019-04-30T22:00:50Z

Other than the issues mentioned here that need to be gone over, I'm done reviewing and doing some copy edits through these articles.

chrisdavidmills · 2019-05-01T08:11:05Z

There's an activate event in service workers, but that's a different thing entirely: https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerGlobalScope/activate_event.

@a2sheppy , where did you see the SVG mention? I never saw that when I was doing the SVG events.

I had never heard of this onactivate event either. I tried writing a quick demo to see if I could get it working on a standard link:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>activate event test</title>
    <style>
      a:active {
        background-color: red;
      }
    </style>
  </head>
  <body>
    <h1 id="top">Top heading</h1>

    <p>Some content, <a href="#second">Link to second heading</a>.</p>
    <p>Some content</p>
    <p>Some content</p>
    <p>Some content</p>
    <p>Some content</p>
    <p>Some content</p>
    <p>Some content</p>
    <p>Some content</p>
    <p>Some content</p>
    <p>Some content</p>

    <h2 id="second">Second heading</h2>

    <script>
      let link = document.querySelector('a');


      link.addEventListener('activate', () => {
        console.log('Link activated');
      })
    </script>
  </body>
</html>

But no joy.

It must be an SVG thing, if it still exists; it is mentioned on https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes.

@irenesmith , I'd just move this one under the SVGEvent interface and be done with it; don't waste loads of time trying to get it to work.

chrisdavidmills · 2019-05-01T08:30:29Z

OK, stop the train.

I tried rewriting the SVG example on the activate page and testing it:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>activate event test</title>
    <style>
      a:active {
        background-color: red;
      }
    </style>
  </head>
  <body>

    <svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"
         xmlns:ev="http://www.w3.org/2001/xml-events"
         width="6cm" height="5cm" viewBox="0 0 600 500">

      <desc>Example: invoke an ECMAScript function from a DOMActivate event</desc>

      <!-- Act on each DOMActivate event -->
      <circle cx="300" cy="225" r="100" fill="red">

      </circle>

      <text x="300" y="480" font-family="Verdana" font-size="35" text-anchor="middle">
        Activate the circle to change its size
      </text>
    </svg>

    <!-- ECMAScript to change the radius -->
    <script>
      let circle = document.querySelector('circle');

      circle.addEventListener('DOMActivate', () => {
        circle.setAttribute('r', '200');
      })
    </script>

  </body>
</html>

This works in Chrome and Safari, but not in Firefox.

Then I tried changing the example in the last comment to use DOMActivate — this works in Firefox, but not in Chrome/Safari.

So it looks like we need one version of this on Element, and one on SVGElement.

And BTW, you don't need to worry about equivalent onDOMActivate pages. That doesn't seem to work anywhere.

chrisdavidmills · 2019-05-01T08:37:19Z

And then I found this:

http://help.dottoro.com/ljckqjrt.php

Which says that DOMActivate only works on certain elements in certain browsers.

It has some useful examples on it. It looks like DOMActivate works on <button> elements in all browsers.

OK, final word on this — leave the page on Element, but make sure you document in the BCD where it fires, in what browsers. And change the name to DOMActivate.

And by the way, it's defined in the UIEvents spec: https://w3c.github.io/uievents/#event-type-DOMActivate

and it's deprecated.

irenesmith · 2019-05-01T11:47:32Z

@chrisdavidmills Thanks! I'm working on this today and will try to get done before we meet. I've got a better-working example going for the mouseenter/mouseleave events.

Created a new example that shows both mouseenter and mouseleave. I also updated the PR. I think I'm good to go now.

@a2sheppy I know you already know that you can review the changes, but I wanted to put it here as well for tracking purposes.

a2sheppy · 2019-05-09T11:11:53Z

Working on reviews; my feedback will go into this and following comments.

Activate

Must-fix items

As @chrisdavidmills said earlier, it appears to be obsolete, and the page needs moving and renaming to DOMActivate; need to then make sure this event is listed in the correct place in GroupData.json
The spec table included Pointer Lock; Activate is not defined in that spec, so I removed that row from the table.
The other row remaining in the spec table, CSSOM View, also does not define Activate. The spec table needs to be updated to instead refer to the actual place where this event is defined.

Other concerns

It would be nice if the example were either a live example, used the interactive example mechanism, or offered a link to try the example out.

auxclick

Must-fix items

auxclick does not appear anywhere in GroupData.json and needs to be added
The spec table refers the UI Events spec, which does not appear in GroupData.json and needs to be added, if we intend to use this group. Otherwise, this should be put into the "DOM Events" group. It does already exist in SpecData.json.

Things I changed

I tweaked the example I previously updated to call preventDefault() on the contexrtmenu event, in order to keep the popup from appearing on right-click. I then added a paragraph discussing this addition.

click

Things I changed

I added a paragraph to the "Usage notes" section explicitly saying that the detail property indicates the number of clicks that occurred

contextmenu

Must-fix items

In the spec table, notice that the event's URL is listed as .../oncontextmenu_event. This needs to be fixed to .../contextmenu_event.

a2sheppy · 2019-05-09T11:59:09Z

mouseleave

Other concerns

Please re-use the example from mouseenter here, instead of this non-interactive, non-live example. Or make this into a live example

mousemove

Other concerns

It would be nice to have a little bit of explanatory text along with the JavaScript code in the example. For instance, talking about the math being done with the coordinates, how the mouse events are being used to figure out where to draw, things like that.

a2sheppy · 2019-05-09T15:37:57Z

mouseout

Other concerns

It might be useful if the timeouts were different durations in the example.

mousewheel

Things I changed

I did a bunch of cleanup and rewriting to clarify the state of this event.

MozMousePixelScroll

Must-fix items

There's a paragraph after the blue box that talks about a bunch of compatibility information. This should migrate to BCD.

Things I changed

I rewrote and updated a lot of stuff to clean things up and do a better job of encouraging people to move on to other pages.

webkitmmouseforcechanged

Must-fix items

Add examples section with example code and appropriate text
Make sure the BCD info is in place and that the table works; it's not there yet

webkitmouseforcedown

Must-fix items

Add examples section with example code and appropriate text
Make sure the BCD info is in place and that the table works; it's not there yet

webkitmouseforceup

Must-fix items

Add examples section with example code and appropriate text
Make sure the BCD info is in place and that the table works; it's not there yet

webkitmouseforcewillbegin

Must-fix items

Add examples section with example code and appropriate text
Make sure the BCD info is in place and that the table works; it's not there yet

webkitmouseforcewillbegin

Must-fix items

Add examples section with example code and appropriate text
Make sure the BCD info is in place and that the table works; it's not there yet

a2sheppy · 2019-05-09T15:58:25Z

@irenesmith - I've completed my review. The comments above list the things I think need to be dealt with and other information about what I noticed or did.

There are some things that need to be fixed or added, listed up above.

irenesmith · 2019-05-09T15:59:33Z

Thanks. I will go through it.

…

On Thu, May 9, 2019 at 11:58 AM Eric Shepherd ***@***.***> wrote: @irenesmith <https://github.com/irenesmith> - I've completed my review. The comments above list the things I think need to be dealt with and other information about what I noticed or did. There are some things that need to be fixed or added, listed up above. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#955 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABO6WTCEJVTIL4PSDCXZ2DPURC2FANCNFSM4GUVASIA> .

irenesmith · 2019-05-23T14:57:12Z

DOMActivate event

moved and renamed the Activate page to DOMActivate
updated the link in the spec table to point to the spec Chris mentioned
added the deprecated_header to the page
changed the name on Elements page to DOMActivate
added the deprecated_inline macro
tried to make the example work as a live example with no luck I'll come back to this after everything else is completed
still need to create updated BCD for this

wbamberg · 2019-05-23T15:05:42Z

tried to make the example work as a live example with no luck I'll come back to this after everything else is completed

Considering the event is deprecated, I don't think this is worth doing.

irenesmith · 2019-05-23T15:09:16Z

auxclick

after discussion with Chris, I added auxclick to GroupData.json in the section for DOM Events.

irenesmith · 2019-05-23T15:11:34Z

mouseleave

The example was the same as the one used in mouseenter but I neglected to make it live. That has been fixed.

irenesmith · 2019-05-27T01:07:49Z

mousemove

I added a description of what is happening, including why the x and y values have to be adjusted. The other events I used in this example have the same description thanks to the macro Sheppy inserted on the page. It only made me nuts for a few minutes while I figured out what had suddenly gone wrong.

irenesmith · 2019-05-27T06:18:38Z

And the rest...

mouseout

I did make the change but I really don't like the example. I'll see if I can come up with something else, perhaps something that's more useful. But I'd like to get the overall changes made and approved first.

MozMousePixelScroll

Since this is a deprecated event, after discussion with Chris, I won't update the BCD.

webkit-prefixed events

These events are vendor-specific. Chris and I discussed how to handle them, and determined to follow the pattern set by Will. Unfortunately, I didn't bookmark the example I had and have asked Will to send me a link.

irenesmith · 2019-05-27T06:19:05Z

@a2sheppy The PR for the updated groupData.json is PR #1172 but I can't either request or assign reviewers for this Repo. Can you review and merge if it's all right?

wbamberg · 2019-05-27T15:48:43Z

Chris and I discussed how to handle them, and determined to follow the pattern set by Will. Unfortunately, I didn't bookmark the example I had and have asked Will to send me a link.

I'm not sure what Chris meant because I'm not Chris :), but perhaps the pattern is the one used for these: #1102 (comment) ?

These have:

a "nonstandard" header
a normal intro paragraph with an extra bit at the end like "It is a proprietary event specific to $browser"
a normal blue nox
a "Specifications" saying "Not part of any specification"
keep the example if there is one and it is useful, otherwise don't bother
a normal BCD (this is important)
a normal "See Also"

irenesmith · 2019-05-27T15:51:14Z

Thank you so much!

…

On Mon, May 27, 2019 at 11:48 AM wbamberg ***@***.***> wrote: Chris and I discussed how to handle them, and determined to follow the pattern set by Will. Unfortunately, I didn't bookmark the example I had and have asked Will to send me a link. I'm not sure what Chris meant because I'm not Chris :), but perhaps the pattern is the one used for these: #1102 (comment) <#1102 (comment)> ? These have: - a "nonstandard" header - a normal intro paragraph with an extra bit at the end like "It is a proprietary event specific to $browser" - a normal blue nox - a "Specifications" saying "Not part of any specification" - keep the example if there is one and it is useful, otherwise don't bother - a normal BCD (this is important) - a normal "See Also" — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#955?email_source=notifications&email_token=AABO6WQNQNPGOKEC6ZG72ATPXP7FZA5CNFSM4GUVASIKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODWKDM4Y#issuecomment-496252531>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABO6WUJOSAXHU7VU3DIHQLPXP7FZANCNFSM4GUVASIA> .

jmswisher · 2019-06-13T23:16:26Z

Moving this to Lena Horne, as the PR is not yet merged. @irenesmith What help do you need to move forward?

irenesmith · 2019-06-26T11:36:05Z

The PR was too outdated so I've closed the original PR and created a new one:

PR #1193

a2sheppy · 2019-07-11T21:36:33Z

Things that still need to be addressed:

Missing compatibility tables:

Those webkit ones at least need to indicate true for Safari desktop if nothing else.

Incorrect `mdn_url` link in BCD:

https://developer.mozilla.org/en-US/docs/Web/API/Element/contextmenu_event (links to .../oncontextmenu_event

Once these BCD issues are resolved, this is all done at last!

irenesmith · 2019-07-22T14:36:29Z

Created a new pull request which adds the missing mouse events, exept for mousewheel which has BCD information. I also corrected the link in the contextmenu event.

PR 4524

Elchi3 mentioned this issue Feb 6, 2019

O: Event reference docs refactoring #685

Closed

4 tasks

Elchi3 assigned irenesmith Feb 6, 2019

irenesmith added this to the Fantasia (S2 Q1 2019) milestone Feb 7, 2019

Elchi3 mentioned this issue Feb 27, 2019

Add compat data for EventType mdn/browser-compat-data#1899

Closed

irenesmith modified the milestones: Fantasia (S2 Q1 2019), Grace Jones (S3 Q1 2019) Mar 6, 2019

wbamberg added the event-ref-migration label Mar 11, 2019

irenesmith modified the milestones: Grace Jones (S3 Q1 2019), India.Arie (S2 Q2 2019) Apr 24, 2019

irenesmith mentioned this issue Apr 29, 2019

Add mouse events mdn/browser-compat-data#4019

Merged

jmswisher removed this from the India.Arie (S2 Q2 2019) milestone May 2, 2019

jmswisher added this to the Jessye Norman (S3 Q2 2019 milestone May 2, 2019

irenesmith mentioned this issue May 27, 2019

Added two missing events to the groupData.json file. mdn/kumascript#1172

Closed

jmswisher modified the milestones: Jessye Norman (S3 Q2 2019), Koko Taylor (S4 Q2 2019) May 30, 2019

jmswisher modified the milestones: Koko Taylor (S4 Q2 2019), Lena Horne (S5 Q2 2019) Jun 13, 2019

irenesmith mentioned this issue Jun 26, 2019

Add mouse events mdn/kumascript#1193

Merged

jmswisher modified the milestones: Lena Horne (S5 Q2 2019), MC Lyte (S1 Q3 2019) Jul 11, 2019

jmswisher closed this as completed Aug 5, 2019

Refactor mouse events #955

Refactor mouse events #955

Comments

Elchi3 commented Feb 6, 2019 • edited by a2sheppy Loading

macOS specific

Acceptance criteria

irenesmith commented Feb 7, 2019

irenesmith commented Feb 7, 2019

irenesmith commented Mar 19, 2019

wbamberg commented Apr 2, 2019

irenesmith commented Apr 3, 2019

Elchi3 commented Apr 24, 2019

irenesmith commented Apr 29, 2019 • edited Loading

macOS specific

irenesmith commented Apr 29, 2019 • edited Loading

a2sheppy commented Apr 29, 2019

a2sheppy commented Apr 29, 2019 • edited Loading

chrisdavidmills commented Apr 30, 2019

a2sheppy commented Apr 30, 2019 via email

irenesmith commented Apr 30, 2019

a2sheppy commented Apr 30, 2019

a2sheppy commented Apr 30, 2019

chrisdavidmills commented May 1, 2019

chrisdavidmills commented May 1, 2019

chrisdavidmills commented May 1, 2019

irenesmith commented May 1, 2019 • edited Loading

a2sheppy commented May 9, 2019 • edited Loading

Must-fix items

Other concerns

Must-fix items

Things I changed

Things I changed

Must-fix items

a2sheppy commented May 9, 2019 • edited Loading

Other concerns

Other concerns

a2sheppy commented May 9, 2019

Other concerns

Things I changed

Must-fix items

Things I changed

Must-fix items

Must-fix items

Must-fix items

Must-fix items

Must-fix items

a2sheppy commented May 9, 2019

irenesmith commented May 9, 2019 via email

irenesmith commented May 23, 2019 • edited Loading

DOMActivate event

wbamberg commented May 23, 2019

irenesmith commented May 23, 2019

auxclick

irenesmith commented May 23, 2019

mouseleave

irenesmith commented May 27, 2019

mousemove

irenesmith commented May 27, 2019

And the rest...

mouseout

MozMousePixelScroll

webkit-prefixed events

irenesmith commented May 27, 2019

wbamberg commented May 27, 2019

irenesmith commented May 27, 2019 via email

jmswisher commented Jun 13, 2019

irenesmith commented Jun 26, 2019

a2sheppy commented Jul 11, 2019

Missing compatibility tables:

Incorrect mdn_url link in BCD:

irenesmith commented Jul 22, 2019 • edited Loading

Elchi3 commented Feb 6, 2019 •

edited by a2sheppy

Loading

irenesmith commented Apr 29, 2019 •

edited

Loading

irenesmith commented Apr 29, 2019 •

edited

Loading

a2sheppy commented Apr 29, 2019 •

edited

Loading

irenesmith commented May 1, 2019 •

edited

Loading

a2sheppy commented May 9, 2019 •

edited

Loading

a2sheppy commented May 9, 2019 •

edited

Loading

irenesmith commented May 23, 2019 •

edited

Loading

Incorrect `mdn_url` link in BCD:

irenesmith commented Jul 22, 2019 •

edited

Loading